/* ==========================================================================
   MIND MIAMI — ICON SYSTEM v1 · CSS de uso del sprite assets/art/icons.svg
   Archivo NUEVO: no toca system.css, motion.css ni motion2.css.

   ── QUÉ ES ────────────────────────────────────────────────────────────────
   34 iconos, viewBox 0 0 24 24, id `ic-*`, trazo 1.75 en currentColor.
   Este CSS aporta: tamaños, alineación óptica con el texto, la primitiva de
   acento cian y la preparación de `data-draw` (motor v2) para iconos inline.

   ── CÓMO SE USA ───────────────────────────────────────────────────────────
   A) DECORATIVO (el 90% de los casos) — el icono acompaña a un texto que ya
      dice lo mismo. El <svg> se oculta a lectores de pantalla:

        <a class="with-ic" href="/start">
          <span>Start a project</span>
          <svg class="ic ic-sm" aria-hidden="true" focusable="false">
            <use href="/assets/art/icons.svg#ic-arrow-up-right"></use>
          </svg>
        </a>

   B) SIGNIFICATIVO — el icono es la única etiqueta (un botón de cerrar).
      Lleva role="img" y nombre accesible BILINGÜE (data-en-attr/data-es-attr,
      igual que el resto del sitio):

        <button type="button" data-en-attr="aria-label:Close"
                data-es-attr="aria-label:Cerrar" aria-label="Close">
          <svg class="ic" aria-hidden="true" focusable="false">
            <use href="/assets/art/icons.svg#ic-close"></use>
          </svg>
        </button>

      (El nombre va en el BOTÓN, no en el <svg>: así el target de 44px y la
      etiqueta viven en el mismo nodo y el i18n existente ya lo traduce.)

   C) INLINE — obligatorio si el icono se va a ANIMAR. Con <use> el dibujo
      vive en shadow DOM y ni el JS ni los selectores de la página lo alcanzan.
      Al pegar el contenido del <symbol> dentro de un <svg class="ic"> hay que
      copiar también el viewBox. Los atributos de trazo los pone `.ic`.

   ── COLOR ─────────────────────────────────────────────────────────────────
   Todo el trazo es currentColor: el icono se tiñe con el `color` de su
   contenedor (tinta sobre papel, texto-sobre-navy sobre navy). El cian entra
   SOLO como relleno de `.ic-accent`, nunca como trazo fino: #06d6dd a 1.75 de
   grosor no contrasta sobre papel. Sobre la banda cian de marca el acento
   desaparecería contra el fondo → ahí se usa `.ic-mono`.
   ========================================================================== */

/* ==========================================================================
   1 · BASE
   `.ic` sirve a los dos modos de consumo:
   · con <use>, los atributos de presentación viajan dentro del sprite y estas
     declaraciones simplemente no llegan al shadow DOM (salvo --ic-stroke, que
     sí lo cruza por ser propiedad heredada);
   · inline, son las que visten el dibujo.
   ========================================================================== */
.ic {
  --ic-size: 24px;
  display: inline-block;
  inline-size: var(--ic-size);
  block-size: var(--ic-size);
  flex: 0 0 auto;                 /* nunca se deforma dentro de un flex row */
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ic-stroke, 1.75);
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Alineación óptica: el centro del icono cae en el centro de la altura de
     mayúsculas (≈ .36em sobre la línea base de Inter), no en la línea base.
     `vertical-align: L` sube la BASE del icono L por encima de la línea base,
     así que centro = L + size/2 → L = .36em − size/2 (negativo casi siempre).
     Vale para cualquier --ic-size, en px o en em, y a cualquier font-size. */
  vertical-align: calc(.36em - var(--ic-size) / 2);
}

/* Las dos únicas primitivas rellenas de la familia (necesarias inline; con
   <use> ya vienen resueltas por los atributos del sprite). */
.ic .ic-dot { fill: currentColor; stroke: none; }
.ic .ic-accent { fill: var(--ic-accent, #06d6dd); stroke: none; }

/* Sobre la banda cian de marca (o en impresión a una tinta) el acento debe
   plegarse al color del texto para no desaparecer.
   Va por PROPIEDAD PERSONALIZADA a propósito: las custom properties heredan y
   cruzan la frontera del shadow DOM, así que esto también funciona con <use>
   (el sprite declara `fill:var(--ic-accent,#06d6dd)`). Un selector normal
   como `.ic-mono .ic-accent` solo alcanzaría a los iconos inline. */
.ic-mono { --ic-accent: currentColor; }

/* ==========================================================================
   2 · TAMAÑOS
   18 px = junto a texto pequeño (kickers, chips, enlaces de pie).
   24 px = por defecto (CTA, ítems de lista, nav).
   48 px = cabecera de tarjeta o de sección; el trazo sube a 3.5 px reales y
           el dibujo aguanta porque la rejilla es la misma.
   Cualquier otra medida: `style="--ic-size:32px"`.
   ========================================================================== */
.ic-sm { --ic-size: 18px; }
.ic-lg { --ic-size: 48px; }

/* Escapes de alineación */
.ic-mid { vertical-align: middle; }          /* dentro de tablas o botones */
.ic-block { display: block; vertical-align: baseline; }

/* Fila texto + icono con separación proporcional al cuerpo. El icono va
   SIEMPRE después del texto en el DOM cuando es una flecha de acción. */
.with-ic {
  display: inline-flex;
  align-items: center;
  gap: var(--ic-gap, .5em);
}

/* ==========================================================================
   3 · ORIENTACIÓN
   Un solo `ic-chevron` / `ic-arrow-right` cubre las cuatro direcciones. El
   giro es transform: no toca layout y no reflow-ea nada.
   ========================================================================== */
.ic-r90 { transform: rotate(90deg); }
.ic-r180 { transform: rotate(180deg); }
.ic-r270 { transform: rotate(-90deg); }
.ic-flip-x { transform: scaleX(-1); }

/* ==========================================================================
   4 · TRAZO DIBUJABLE — preparación para data-draw (motor v2)
   Requiere consumo INLINE (con <use> no hay nodos que medir).

     <svg class="ic ic-lg ic-draw" viewBox="0 0 24 24" aria-hidden="true"
          data-draw data-draw-stagger="60" data-draw-speed="1.4"> … </svg>

   Reparto de responsabilidades:
   · js/motion2.js dibuja los TRAZOS (stroke-dasharray/dashoffset, sin layout)
     y marca el <svg> con [data-draw-in] al terminar de lanzarlos.
   · este archivo se encarga de los RELLENOS (.ic-dot y .ic-accent), que no
     pueden dibujarse: entran por opacidad una vez trazada la silueta.

   Nota de integración: motion2.js mide TODA la geometría de dentro salvo que
   haya hijos [data-draw-path]. Los rellenos no tienen trazo, así que medirlos
   es inocuo, pero si se quiere el dibujo exacto basta marcar los trazos:
   `data-draw-path` en los <path>/<circle> con stroke.

   AVISO DURO — el icono tiene que estar en el DOM ANTES de que arranque
   motion2.js. El motor escanea [data-draw] una sola vez, al iniciarse, y
   MM2.refresh() solo RE-MIDE: no re-escanea. Un icono inyectado por JS después
   del arranque no se registra nunca, así que [data-draw-in] no llega y sus
   rellenos se quedarían ocultos para siempre. Por eso el ocultado exige
   `[data-draw]` explícito: `.ic-draw` a secas nunca esconde nada. Si hace
   falta inyectar iconos por JS, hazlo antes del script diferido del motor
   (script inline al final de <body>) o no les pongas data-draw.

   Todo lo que oculta cuelga de html.mm-motion2 (la clase que pone motion2.js
   solo si hay JS y NO hay prefers-reduced-motion): sin motor, icono completo.
   ========================================================================== */
.ic-draw { overflow: visible; }   /* el linejoin del trazo nunca se recorta */

.mm-motion2 .ic-draw[data-draw]:not([data-draw="scrub"]) :is(.ic-dot, .ic-accent) {
  opacity: 0;
  transition: opacity .32s var(--mm2-ease-out, cubic-bezier(.19, 1, .22, 1)) var(--ic-fill-delay, .34s);
}
/* Mismo peso de selector que la regla de arriba ([data-draw] incluido) y
   colocada después: gana por orden, no por especificidad accidental. */
.mm-motion2 .ic-draw[data-draw][data-draw-in] :is(.ic-dot, .ic-accent) { opacity: 1; }

/* En modo scrub el relleno no se esconde: al subir el scroll el trazo se
   deshace y un relleno parpadeando encima leería como error, no como diseño. */

/* ==========================================================================
   5 · REDUCED MOTION — red de seguridad propia
   motion2.css ya neutraliza [data-draw]; esto cubre el caso de cargar
   icons.css sin el motor v2.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ic-draw :is(.ic-dot, .ic-accent) { opacity: 1 !important; transition: none !important; }
  .ic-draw :is(path, circle, ellipse, rect, line, polyline, polygon) {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* ==========================================================================
   6 · FOCO E IMPRESIÓN
   ========================================================================== */
/* El icono nunca captura el foco ni el puntero: el target es su enlace/botón. */
.ic { pointer-events: none; }
.with-ic > .ic { pointer-events: none; }

@media print {
  .ic { --ic-stroke: 1.5; }
  .ic .ic-accent { fill: #000; }
}