/* ==========================================================================
   Tetraktia · Sistema de iconografía propia
   Estilos de tamaño, alineación y color para los SVG que genera
   /js/iconos.js (icono() e iconoSigno()).

   Principios:
   · El icono hereda siempre el color del texto (currentColor), así funciona
     igual en el tema Papel y en el tema Tinta sin reglas duplicadas.
   · Tres tamaños nominales: s = 16px, m = 20px, l = 24px. Deben coincidir con
     el objeto TAMANOS de iconos.js.
   · Alineación óptica: el icono se apoya en la línea de base del texto con una
     corrección vertical, no con vertical-align: middle (que lo deja alto).
   ========================================================================== */

.icono {
  /* Tamaño por defecto (equivale a .icono-m). */
  --icono-tam: 20px;
  --icono-ajuste: -0.14em;

  display: inline-block;
  inline-size: var(--icono-tam);
  block-size: var(--icono-tam);
  flex: 0 0 auto;

  /* Color heredado: nunca se fija un color aquí. */
  color: inherit;
  fill: none;
  stroke: currentColor;

  /* Alineación óptica con la línea de base del texto. */
  vertical-align: var(--icono-ajuste);

  /* El icono es decorativo: no captura el puntero ni se selecciona. */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;

  /* Evita saltos de tamaño mientras carga el resto de la interfaz. */
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Tamaños
   -------------------------------------------------------------------------- */

.icono-s {
  --icono-tam: 16px;
  --icono-ajuste: -0.16em;
}

.icono-m {
  --icono-tam: 20px;
  --icono-ajuste: -0.14em;
}

.icono-l {
  --icono-tam: 24px;
  --icono-ajuste: -0.2em;
}

/* Tamaño XL para portadas de sección y cabeceras de tarjeta. */
.icono-xl {
  --icono-tam: 32px;
  --icono-ajuste: -0.24em;
}

/* Icono que ocupa el ancho de su contenedor (sellos, marcas de agua). */
.icono-fluido {
  inline-size: 100%;
  block-size: auto;
  vertical-align: baseline;
}

/* --------------------------------------------------------------------------
   Alineación y separación respecto al texto
   -------------------------------------------------------------------------- */

/* Contenedor recomendado cuando el icono acompaña a un texto: evita que el
   ajuste óptico dependa de la altura de línea del bloque. */
.con-icono {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.con-icono > .icono {
  vertical-align: baseline;
}

/* Icono a la izquierda de un texto suelto (títulos de tarjeta, leyendas). */
.icono-inicio {
  margin-inline-end: 0.45em;
}

/* Icono a la derecha (enlaces del tipo «Lee la guía completa»). */
.icono-fin {
  margin-inline-start: 0.35em;
}

/* Icono aislado dentro de un botón cuadrado (cerrar, editar, borrar). */
.icono-solo {
  vertical-align: baseline;
  margin: 0;
}

/* Bloque centrado, para cabeceras de sección. */
.icono-bloque {
  display: block;
  margin-inline: auto;
  vertical-align: baseline;
}

/* --------------------------------------------------------------------------
   Matices de color (siempre sobre tokens de marca, nunca colores sueltos)
   -------------------------------------------------------------------------- */

.icono-oro { color: var(--oro-400); }
.icono-turquesa { color: var(--turq-400); }
.icono-alta { color: var(--tinta-alta); }
.icono-media { color: var(--tinta-media); }
.icono-baja { color: var(--tinta-baja); }
.icono-linea { color: var(--linea); }

/* Atenuado, para iconos de apoyo dentro de párrafos densos. */
.icono-suave { opacity: 0.62; }

/* --------------------------------------------------------------------------
   Grosor de trazo
   El atributo stroke-width del SVG queda como valor de partida; estas clases
   permiten afinarlo sin regenerar el marcado.
   -------------------------------------------------------------------------- */

.icono-fino { stroke-width: 1.25; }
.icono-grueso { stroke-width: 1.75; }

/* En tamaños grandes el trazo de 1.5 se ve pesado: se compensa. */
.icono-xl,
.icono-fluido {
  stroke-width: 1.35;
}

/* --------------------------------------------------------------------------
   Iconos de los doce signos
   Llevan clase propia para poder darles un encaje distinto (suelen ir dentro
   de un medallón circular junto al nombre del signo).
   -------------------------------------------------------------------------- */

.icono-signo {
  --icono-ajuste: -0.18em;
}

/* Medallón: círculo de línea con el signo centrado. */
.medallon-signo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.6em;
  block-size: 2.6em;
  border: 1px solid var(--linea);
  border-radius: var(--r-circulo);
  color: var(--oro-400);
}

.medallon-signo > .icono {
  vertical-align: baseline;
}

/* --------------------------------------------------------------------------
   Rejilla de catálogo (pruebas visuales y galería interna de iconos)
   -------------------------------------------------------------------------- */

.rejilla-iconos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--e-4);
}

.rejilla-iconos > figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-3);
  text-align: center;
}

.rejilla-iconos figcaption {
  font-size: 0.75rem;
  color: var(--tinta-baja);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Accesibilidad y preferencias del sistema
   -------------------------------------------------------------------------- */

/* Los iconos no animan por sí solos, pero si un contenedor los anima, se
   respeta la preferencia de movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
  .icono {
    animation: none !important;
    transition: none !important;
  }
}

/* Alto contraste: se refuerza el trazo para que no desaparezca. */
@media (forced-colors: active) {
  .icono {
    stroke: CanvasText;
    forced-color-adjust: none;
  }

  .icono [fill='currentColor'] {
    fill: CanvasText;
  }
}

/* Impresión y exportaciones: trazo firme sobre papel blanco. */
@media print {
  .icono {
    color: #000;
    stroke-width: 1.4;
  }
}