/* Doco style library — componente de iconos. Define .ds-icon, la clase que
   pinta cualquier símbolo del sprite templates/ds/_icons.html. Reemplaza a
   FontAwesome, que está prohibido en el stack nuevo (templates/base_ds.html). */
/* =====================================================================
   icons.css — set de iconos SVG del design system.

   Carga DESPUÉS de Bootstrap 5 y de tokens.css, junto al resto de components/.

   CÓMO SE USA (el sprite se incluye una vez por página, ver _icons.html):

     <svg class="ds-icon" aria-hidden="true" focusable="false">
       <use href="#ds-correo"></use>
     </svg>

   LAS DOS IDEAS QUE SOSTIENEN TODO EL COMPONENTE:

   1. El icono mide 1em, o sea "lo mismo que la letra de al lado". Como 1em es
      el tamaño de fuente heredado, el icono crece y encoge solo cuando lo metes
      en un título, en un botón chico o en el texto legal. No hay que fijar
      píxeles en cada sitio y no se rompe cuando alguien sube el tamaño de letra
      del navegador (accesibilidad).

   2. El icono se pinta con currentColor, o sea "del color del texto de al lado".
      Un icono dentro de un botón teal sale blanco sin escribir una sola regla;
      dentro de un mensaje de error sale del color del error. Por eso aquí NO se
      fija ningún color por defecto.

   Todo valor sale de var(--token). Los únicos literales son los que son
   intrínsecos a la geometría del icono (el 1em del tamaño, la corrección óptica
   vertical y los grosores de trazo) y están comentados uno por uno.
   ===================================================================== */

/* ---- El contenedor del sprite.
   El bloque <svg> que trae todos los <symbol> no debe verse ni ocupar espacio,
   pero TAMPOCO puede llevar display:none en algunos navegadores viejos porque
   ahí <use> deja de encontrar los símbolos. Sacarlo del flujo con posición
   absoluta y tamaño cero es la forma segura: invisible, sin hueco, y los
   símbolos siguen siendo referenciables. ---- */
.ds-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- El icono. ---- */
.ds-icon {
  /* 1em = el tamaño de la letra heredada. Ver "idea 1" del encabezado. */
  width: 1em;
  height: 1em;

  /* Corrección óptica: la línea base del texto no coincide con el borde
     inferior de una caja cuadrada, así que un icono alineado "de cajón" flota
     alto. Bajarlo 0.125em (un octavo del cuerpo de la letra) lo centra respecto
     a las minúsculas. Es una constante tipográfica, no un valor de marca. */
  vertical-align: -0.125em;

  /* Dentro de un contenedor flex (botones, filas de beneficios) el icono nunca
     debe encogerse para dejarle espacio al texto: se deformaría. */
  flex-shrink: 0;

  /* El icono se pinta del color del texto de al lado. Ver "idea 2". */
  color: inherit;
  fill: none;
  stroke: currentColor;

  /* Los clics atraviesan el icono y llegan al botón o enlace que lo envuelve.
     Sin esto, en JavaScript event.target sería el <svg> (o incluso el <path>)
     y no el botón, que es el error clásico al migrar de <i> a <svg>. */
  pointer-events: none;
}

/* ---- Tamaños.
   Como el icono mide 1em, cambiar su tamaño es cambiar su font-size. Los
   escalones salen de la escala tipográfica del sistema, no de píxeles sueltos,
   para que el icono siempre case con algún tamaño de texto existente.
   Una sola clase, igual que .ds-icon, y van después: gana el orden de fuente. ---- */
.ds-icon--sm { font-size: var(--fs-small); }
.ds-icon--lg { font-size: var(--fs-lead); }
.ds-icon--xl { font-size: var(--fs-h3); }

/* ---- Colores.
   Solo para el caso en que el icono debe destacar del texto que lo rodea (una
   palomita rosada en la lista de beneficios, por ejemplo). Si el icono debe
   ir del color del texto, NO pongas modificador: ese ya es el comportamiento.

   Nota de contraste: estos modificadores son para iconos DECORATIVOS o de
   apoyo. WCAG AA pide 3:1 para elementos gráficos que cargan información, y el
   rosado (#ed5482) sobre blanco queda en ~3.4:1 — pasa. El teal (#18b3af)
   sobre blanco queda en ~2.6:1 — NO pasa, así que el teal solo se usa cuando el
   icono acompaña a un texto que ya dice lo mismo. Nunca dejes que el icono sea
   el único portador de un dato. ---- */
.ds-icon--acento { color: var(--p-rosado); }
.ds-icon--marca  { color: var(--p-verde); }
.ds-icon--suave  { color: var(--gris); }

/* ---- Grosor del trazo.
   El sprite dibuja todo con grosor 2. Estos modificadores lo ajustan cuando el
   icono se ve muy fino o muy pesado a un tamaño extremo. El número está en
   unidades del viewBox de 24, no en píxeles: es geometría del dibujo. ---- */
.ds-icon--fino   { stroke-width: 1.5; }
.ds-icon--grueso { stroke-width: 2.5; }

/* ---- Icono con texto al lado.
   El patrón más repetido del checkout: icono + etiqueta en la misma línea
   (pasos del stepper, botones "Volver"/"Continuar", filas de beneficios).
   Va aquí y no en cada componente para que la separación sea una sola
   decisión del sistema. `align-items: center` sobre el eje corto mantiene el
   icono centrado aunque el texto haga dos renglones en móvil. ---- */
.ds-icon-texto {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---- Icono dentro de un control sin fondo (el ojo de la contraseña, la equis
   que cierra el widget de soporte).
   Existe porque un <button> sin estilos hereda la caja gris del navegador y
   pierde el foco visible. El área táctil de 44x44 es el mínimo recomendado
   para el pulgar en móvil; el icono sigue midiendo 1em dentro de ese cuadro. ---- */
.ds-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;   /* 44px: área táctil mínima recomendada para dedo/pulgar */
  height: 2.75rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--gris-secundario);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.ds-icon-btn:hover {
  color: var(--gris-oscuro);
  background-color: var(--gris-claro);
}
/* El foco visible NO se hereda de base.css aquí: base.css usa outline-offset
   de 4px, que en un control de 44px se sale de la caja y se encima con el
   campo de texto vecino. Se reduce a 2px, mismo color de marca. */
.ds-icon-btn:focus-visible {
  outline: 2px solid var(--p-verde);
  outline-offset: 2px;
}