/* PURPOSE: Radio circular 24×24 con punto interior. Sin JS. Variantes: check-center, check-no, check-bleed, check-top, check-clear.
   KEY CLASSES: .checkbox-radio
   DEPENDS ON: --hg-color-error, --hg-color-primary, --hg-spacing-10, --hg-spacing-16, --hg-spacing-30 (config); --border-style, --border-width, --transition.
   DEMO: dist/componentes.html#radios */

/* ============================================
   CHECKBOX-RADIO (Radio buttons con estilo checkbox)
   ============================================ */

.checkbox-radio {
  position: relative;
}

/* Input oculto */
.checkbox-radio [type=radio] {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
  line-height: normal;
}

/* Label base */
.checkbox-radio [type=radio] + label {
  position: relative;
  padding-left: 0;
  padding-bottom: 0;
  cursor: pointer;
  font-weight: normal;
  font-size: var(--hg-typo-font-size-xs, 12px);
  text-align: initial;
  display: flex;
  flex-direction: column;
  float: none;
}

/* Círculo del radio (::before)
   Tamaño promedio del proyecto: 24x24, circular.
   top: 50% + translateY(-50%) lo centra verticalmente respecto al
   label completo. Así, sea el texto de 1 línea o de varias, sea
   font-size 12 o 24, el círculo siempre queda al centro vertical. */
.checkbox-radio [type=radio] + label::before {
  position: absolute;
  box-sizing: border-box;
  content: "";
  width: 24px;
  height: 24px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border: var(--border-width) var(--border-style) var(--hg-color-primary);
  outline: 0;
  display: inline-block;
  vertical-align: top;
  margin: 0 var(--hg-spacing-10, 10px) 0 0;
  border-radius: 50%;
}

/* Texto del label.
   min-height 24 garantiza que el label tenga al menos la altura del
   círculo, así el centrado vertical de éste coincide con el del texto
   cuando sólo hay una línea corta. */
.checkbox-radio [type=radio] + label span {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  line-height: var(--hg-typo-line-height-sm, 16px);
  padding-left: var(--hg-spacing-32, 32px);
  min-height: 24px;
}

/* Indicador interno (punto) — círculo 10x10 centrado dentro del 24x24.
   También usa top: 50% para seguir al círculo cuando éste se centra
   verticalmente. translateY(-50%) lo recentra dentro del aro. */
.checkbox-radio [type=radio] + label .ico-radio {
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--hg-color-primary);
  border-radius: 50%;
  transition: var(--transition);
}

/* Estado no seleccionado — escala 0 + mantén el centrado vertical */
.checkbox-radio [type=radio]:not(:checked) + label .ico-radio {
  opacity: 0;
  transform: translateY(-50%) scale(0);
}

/* Estado seleccionado — escala 1 + mantén el centrado vertical */
.checkbox-radio [type=radio]:checked + label .ico-radio {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Estado deshabilitado */
.checkbox-radio [type=radio]:disabled {
  opacity: 0.5;
}

.checkbox-radio [type=radio]:disabled + label::before {
  opacity: 0.5;
}

/* Estado de error */
.checkbox-radio.is-error label::before {
  border-color: var(--hg-color-error) !important;
}

.checkbox-radio.is-error span {
  color: var(--hg-color-error) !important;
}

/* ============================================
   VARIANTES DE CHECKBOX-RADIO
   ============================================ */

/* Variante: Centrado verticalmente */
.check-center.checkbox-radio [type=radio] + label::before {
  position: absolute;
  top: 50%;
  left: var(--hg-spacing-16);
  transform: translateY(-50%);
}

.check-center.checkbox-radio [type=radio] + label .ico-radio {
  top: 50%;
  left: calc(var(--hg-spacing-16) + 7px);
  margin-top: -5px;
}

.check-center .box3-content {
  padding-left: var(--hg-spacing-30, 30px);
}

.check-center.checkbox-radio [type=radio]:checked + label .border-1,
.check-center.checkbox-radio [type=radio]:checked + label .border-1-grey {
  border-color: var(--hg-color-primary);
}

/* Variante: Sin indicador visual (solo borde) */
.check-no.checkbox-radio [type=radio] + label::before {
  display: none;
}

.check-no.checkbox-radio [type=radio]:checked + label .ico-radio {
  display: none;
}

.check-no.checkbox-radio [type=radio]:checked + label .border-1,
.check-no.checkbox-radio [type=radio]:checked + label .border-1-grey {
  border-color: var(--hg-color-primary);
}

/* Variante: Sin margen izquierdo */
.check-bleed.checkbox-radio [type=radio] + label::before {
  left: 0;
}

.check-bleed.checkbox-radio [type=radio] + label .ico-radio {
  left: 7px;
}

/* Variante: Posición superior */
.check-top.checkbox-radio [type=radio] + label::before {
  position: absolute;
  top: var(--hg-spacing-16);
  left: var(--hg-spacing-16);
  transform: none;  /* anula el translateY(-50%) del default */
}

.check-top.checkbox-radio [type=radio] + label .ico-radio {
  top: calc(var(--hg-spacing-16) + 7px);
  left: calc(var(--hg-spacing-16) + 7px);
  transform: none;
}

/* Re-activar la animación de scale sin el translateY (el ico ya no
   está vertically centered en estas variantes) */
.check-top.checkbox-radio [type=radio]:not(:checked) + label .ico-radio { transform: scale(0); }
.check-top.checkbox-radio [type=radio]:checked + label .ico-radio { transform: scale(1); }

.check-top .box3-content {
  padding-left: var(--hg-spacing-40, 40px);
}

.check-top.checkbox-radio [type=radio]:checked + label .border-1,
.check-top.checkbox-radio [type=radio]:checked + label .border-1-grey {
  border-color: var(--hg-color-primary);
}

/* Variante: Sin padding izquierdo */
.check-clear.checkbox-radio [type=radio] + label::before {
  position: absolute;
  top: var(--hg-spacing-16);
  left: 0;
  transform: none;
}

.check-clear.checkbox-radio [type=radio] + label .ico-radio {
  top: calc(var(--hg-spacing-16) + 7px);
  left: 7px;
  transform: none;
}

.check-clear.checkbox-radio [type=radio]:not(:checked) + label .ico-radio { transform: scale(0); }
.check-clear.checkbox-radio [type=radio]:checked + label .ico-radio { transform: scale(1); }

.check-clear .box3-content {
  padding-left: var(--hg-spacing-40, 40px);
}

.check-clear.checkbox-radio [type=radio]:checked + label .border-1,
.check-clear.checkbox-radio [type=radio]:checked + label .border-1-grey {
  border-color: var(--hg-color-primary);
}