/* ============================================================
   iconography-pixar.css — MATERIAL PIXAR PARA LA ICONOGRAFÍA
   v21.0
   ============================================================
   QUÉ RESUELVE
   ------------------------------------------------------------
   Toda la iconografía de la aplicación son glifos planos de Font
   Awesome dentro de cuadraditos de color liso. Junto a un fondo de
   bienvenida renderizado en 3D, delatan dos épocas distintas.

   Aquí se les da MATERIAL: volumen, luz cenital, oclusión en los
   bordes, brillo especular y sombra de contacto. El lenguaje visual
   de un render Pixar no es el dibujo: es cómo la luz se comporta
   sobre una superficie.

   DOS RESTRICCIONES REALES QUE DICTAN LA TÉCNICA
   ------------------------------------------------------------
   1 · El glifo se dibuja en `i::before`. No puedo usar los
       pseudo-elementos de la propia `<i>` para añadir luces: ya
       están ocupados por el icono. Al glifo se le da relieve con
       `text-shadow`, que en una fuente icónica funciona igual que
       en el texto.
   2 · `arsenal.js`, `scan.js` y `app.js` escriben el color de
       fondo en el atributo `style` (`background:var(--teal-bg)`).
       Un `background` en la hoja NO ganaría. Por eso el volumen se
       construye con `box-shadow: inset`, que se suma al fondo en
       lugar de competir con él. Así cada icono conserva su color
       semántico y gana materia.

   ÍNDICE
     1 · Material base de los contenedores
     2 · Relieve de los glifos
     3 · Piezas grandes (modal legal, estado vacío)
     4 · Marcadores de imán sobre la silueta
     5 · Casillas, píldoras y controles
     6 · Tema claro
     7 · Movimiento reducido, impresión y pantallas finas
   ============================================================ */

/* ============================================================
   1 · MATERIAL BASE DE LOS CONTENEDORES
   ------------------------------------------------------------
   Un objeto real iluminado desde arriba tiene: un borde superior
   claro donde la luz pega, un interior algo más oscuro por
   oclusión, y una sombra proyectada por debajo. Se consigue con
   tres capas `inset` más una sombra exterior.
   ============================================================ */
.info-icon,
.clinic-tool-icon,
.ars-section-icon,
.cmdk-item-icon,
.pair-type-icon {
    position: relative;
    isolation: isolate;
    /* La luz cenital, la oclusión inferior y el contacto con el
       plano, en una sola declaración que respeta el color inline. */
    box-shadow:
        inset 0 1.5px 0.5px rgba(255, 255, 255, .55),   /* filo iluminado */
        inset 0 -2px 3px rgba(0, 0, 0, .16),            /* oclusión baja */
        inset 0 0 0 1px rgba(255, 255, 255, .10),       /* canto suave */
        0 2px 4px rgba(15, 20, 45, .16),                /* contacto */
        0 5px 12px -3px rgba(15, 20, 45, .20);          /* difusa */
    transition:
        box-shadow .24s cubic-bezier(.34, 1.36, .64, 1),
        transform .24s cubic-bezier(.34, 1.36, .64, 1);
}

/* Brillo especular: la banda de luz que delata una superficie
   pulida. Ocupa el tercio superior y se difumina hacia abajo. */
.info-icon::before,
.clinic-tool-icon::before,
.ars-section-icon::before,
.cmdk-item-icon::before,
.pair-type-icon::before {
    content: '';
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 42%;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, .42) 0%,
        rgba(255, 255, 255, .12) 55%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* El glifo debe quedar POR ENCIMA del especular, nunca velado. */
.info-icon > i,
.clinic-tool-icon > i,
.ars-section-icon > i,
.cmdk-item-icon > i,
.pair-type-icon > i {
    position: relative;
    z-index: 2;
}

/* Al señalar una tarjeta, su icono se eleva: la sombra se separa
   y crece, como un objeto que se levanta de la mesa. */
.clinic-tool-card:hover .clinic-tool-icon,
.info-card:hover .info-icon,
.cmdk-item.selected .cmdk-item-icon {
    transform: translateY(-1.5px) scale(1.04);
    box-shadow:
        inset 0 1.5px 0.5px rgba(255, 255, 255, .62),
        inset 0 -2px 4px rgba(0, 0, 0, .18),
        inset 0 0 0 1px rgba(255, 255, 255, .14),
        0 4px 7px rgba(15, 20, 45, .20),
        0 10px 20px -4px rgba(15, 20, 45, .26);
}

/* ============================================================
   2 · RELIEVE DE LOS GLIFOS
   ------------------------------------------------------------
   `text-shadow` sobre una fuente icónica produce bisel: una luz
   arriba y una sombra abajo hacen que el trazo parezca extruido.
   ============================================================ */
.info-icon > i,
.clinic-tool-icon > i,
.ars-section-icon > i,
.cmdk-item-icon > i,
.pair-type-icon > i,
.legal-icon > i {
    text-shadow:
        0 -0.5px 0 rgba(255, 255, 255, .38),   /* canto superior */
        0 1px 1.5px rgba(0, 0, 0, .30),        /* caída */
        0 2px 5px rgba(0, 0, 0, .18);          /* sombra suave */
}

/* Iconos que van SOLOS junto a un rótulo, sin cuadrado de color:
   títulos de gráfico, etiquetas de detalle, pestañas, notas. Un
   `drop-shadow` los despega del fondo sin engordar el trazo. */
.ars-chart-title > i,
.detail-info-label > i,
.tk-tab > i,
.body-diagram-title > i,
.zoom-info-title > i,
.placement-location > i,
.rel-title > i,
.tk-notes-label > i,
.tk-timer-label > i,
.mag-orient-note > i,
.mag-alt-note > i,
.mag-place-view > i,
.click-hint > i,
.search-icon > i,
.legal-inline-content h3 > i,
.splash-badges i {
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .26));
}

/* ------------------------------------------------------------
   FICHAS DE EMOCIÓN Y DE PROTOCOLO
   ------------------------------------------------------------
   Los 37 iconos de emoción y el de cada protocolo van SUELTOS junto
   al rótulo: `app.js` los escribe dentro del título de la tarjeta sin
   contenedor alguno. Eran los últimos iconos completamente planos de
   la aplicación.

   Un simple halo no bastaba: sobre un glifo de 1 rem resulta
   invisible. Así que se les construye una FICHA circular de verdad,
   con luz cenital, oclusión y sombra de contacto — el mismo material
   que el resto de la iconografía.

   Se puede fijar el fondo con total seguridad porque `app.js` sólo
   escribe `color` en el atributo `style` (verificado en las líneas
   999–1035 y 1217): el color de cada emoción se respeta, y el anillo
   y el halo lo heredan con `currentColor`, así que cada ficha se tiñe
   sola con el tono de su emoción.
   ------------------------------------------------------------ */
.emotion-card-title > i,
.protocol-card-title > i {
    display: inline-grid;
    place-items: center;
    width: 1.95em;
    height: 1.95em;
    margin-right: .15em;
    border-radius: 50%;
    vertical-align: -.55em;
    font-size: .92em;
    /* Superficie: luz cenital sobre el material de la tarjeta. */
    background-image:
        radial-gradient(115% 95% at 50% 4%,
            rgba(255, 255, 255, .40) 0%,
            rgba(255, 255, 255, .06) 46%,
            rgba(255, 255, 255, 0) 100%);
    background-color: var(--bg-surface, rgba(255, 255, 255, .06));
    /* Anillo y halo en el tono de la propia emoción. */
    box-shadow:
        inset 0 1px 0.5px rgba(255, 255, 255, .45),
        inset 0 -1.5px 3px rgba(0, 0, 0, .20),
        0 0 0 1px currentColor,
        0 0 9px -1px currentColor,
        0 2px 4px rgba(15, 20, 45, .22);
    text-shadow: 0 1px 1.5px rgba(0, 0, 0, .32);
    box-sizing: content-box;
}

/* El icono del protocolo lleva `margin-right` en línea desde el JS,
   que sumado al de la ficha separaría demasiado el rótulo. */
.protocol-card-title > i { margin-right: 0 !important; }

/* En el encabezado del modal legal el icono va sobre fondo claro:
   la sombra debe ser más tenue o se vería sucia. */
.legal-inline-content h3 > i {
    filter: drop-shadow(0 1px 1px rgba(15, 20, 45, .18));
}

/* ------------------------------------------------------------
   BARRA DE NAVEGACIÓN INFERIOR
   ------------------------------------------------------------
   Cinco iconos siempre a la vista: es la superficie más mirada de
   la aplicación. Sólo se añade relieve.

   NO se toca `transform` (`.nav-item.active i` ya lo usa para
   agrandar el icono activo) ni `::before` (ocupado por la barrita
   indicadora del `.nav-item.active`). Pisar cualquiera de los dos
   rompería la señal de «pestaña actual».
   ------------------------------------------------------------ */
.nav-item > i {
    filter: drop-shadow(0 1px 1.5px rgba(15, 20, 45, .22));
}

/* La pestaña activa gana halo del color primario: parece encendida. */
.nav-item.active > i {
    filter:
        drop-shadow(0 1px 1.5px rgba(15, 20, 45, .26))
        drop-shadow(0 0 7px currentColor);
}

/* ============================================================
   3 · PIEZAS GRANDES
   ------------------------------------------------------------
   Cuanto mayor es el objeto, más se aprecia el modelado: aquí se
   permite un degradado propio porque estos dos no reciben color
   en línea desde JavaScript (verificado en index.html y app.js).
   ============================================================ */
.legal-icon {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(120% 100% at 50% 0%,
            rgba(255, 255, 255, .55) 0%,
            rgba(255, 255, 255, 0) 58%),
        var(--primary-bg);
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, .60),
        inset 0 -3px 6px rgba(79, 70, 229, .18),
        inset 0 0 0 1px rgba(255, 255, 255, .35),
        0 3px 6px rgba(15, 20, 45, .12),
        0 10px 24px -6px rgba(79, 70, 229, .34);
}

/* Sombra de contacto en el suelo: una elipse achatada bajo la
   pieza. Es el recurso que más «asienta» un objeto renderizado. */
.legal-icon::after {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: -7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(15, 20, 45, .20);
    filter: blur(4px);
    z-index: -1;
    pointer-events: none;
}

.empty-state-icon {
    position: relative;
    isolation: isolate;
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, .45),
        inset 0 -3px 7px rgba(0, 0, 0, .10),
        0 3px 8px rgba(15, 20, 45, .10);
}
.empty-state-icon > i {
    filter: drop-shadow(0 2px 3px rgba(15, 20, 45, .20));
}

/* ============================================================
   4 · MARCADORES DE IMÁN SOBRE LA SILUETA
   ------------------------------------------------------------
   Son las piezas más importantes de la aplicación: van sobre un
   render 3D, así que tienen que parecer imanes de verdad
   apoyados en la piel, no puntos de un mapa.

   OJO: `.mag-mk::after` YA está en uso — es el punto de mira
   central que da la precisión visible. Sólo queda `::before`,
   que se dedica al brillo especular. La letra N/S conserva su
   sitio porque el especular no intercepta el puntero.
   ============================================================ */
.mag-mk {
    isolation: isolate;
}

.mag-mk::before {
    content: '';
    position: absolute;
    top: 11%;
    left: 20%;
    width: 60%;
    height: 34%;
    border-radius: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, .72) 0%,
        rgba(255, 255, 255, .10) 100%);
    pointer-events: none;
    z-index: 1;
}

/* NO se toca `background` de los marcadores: `magnets.css` lo usa
   para codificar la POLARIDAD (azul negativo, rojo positivo) y
   `mk-primary` lo combina con la animación de pulso. Sobrescribirlo
   arriesgaría el significado clínico por un adorno. El volumen se
   consigue sólo con el especular de arriba y el grabado de la letra,
   que no compiten con ninguna regla existente. */

/* La letra N/S grabada en la superficie del imán. */
.mag-mk {
    text-shadow:
        0 -0.5px 0 rgba(255, 255, 255, .45),
        0 1px 2px rgba(0, 0, 0, .55);
}

/* Los puntos de la leyenda son los mismos imanes en miniatura:
   deben llevar el mismo material o la leyenda «miente». */
.mag-legend-dot {
    position: relative;
    box-shadow:
        inset 0 1px 0.5px rgba(255, 255, 255, .55),
        inset 0 -1px 2px rgba(0, 0, 0, .22),
        0 1px 2px rgba(15, 20, 45, .22);
}

/* ============================================================
   5 · CASILLAS, PÍLDORAS Y CONTROLES
   ============================================================ */

/* Casilla del escáner: hundida cuando está vacía, y con volumen
   de botón pulsado cuando se marca. */
.scan-option-box {
    box-shadow:
        inset 0 1.5px 3px rgba(15, 20, 45, .10),
        inset 0 -1px 0 rgba(255, 255, 255, .30);
}
.scan-option.checked .scan-option-box {
    box-shadow:
        inset 0 1.5px 0.5px rgba(255, 255, 255, .55),
        inset 0 -2px 4px rgba(0, 0, 0, .20),
        0 2px 5px rgba(79, 70, 229, .34);
}

/* Botones del escenario de ampliación: teclas físicas. */
.zst-btn {
    box-shadow:
        inset 0 1px 0.5px rgba(255, 255, 255, .22),
        inset 0 -2px 4px rgba(0, 0, 0, .28),
        0 2px 5px rgba(0, 0, 0, .30);
}
.zst-btn:active {
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, .38),
        inset 0 -1px 0 rgba(255, 255, 255, .12);
}

/* Insignias del vestíbulo: cristal biselado sobre el render. */
.splash-badges li {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 -1px 2px rgba(0, 0, 0, .22),
        0 2px 8px -2px rgba(0, 0, 0, .34);
}

/* Numeración de la guía: esfera, no disco. */
.guide-num {
    position: relative;
    background-image:
        radial-gradient(110% 90% at 50% 6%,
            rgba(255, 255, 255, .48) 0%,
            rgba(255, 255, 255, 0) 60%);
    box-shadow:
        inset 0 1.5px 0.5px rgba(255, 255, 255, .55),
        inset 0 -2px 4px rgba(0, 0, 0, .22),
        0 2px 5px rgba(79, 70, 229, .30);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ============================================================
   6 · TEMA CLARO
   ------------------------------------------------------------
   Sobre fondo claro las mismas sombras se ven sucias: hay que
   bajar la oclusión y subir la luz.
   ============================================================ */
@media (prefers-color-scheme: light) {
    .info-icon,
    .clinic-tool-icon,
    .ars-section-icon,
    .cmdk-item-icon,
    .pair-type-icon {
        box-shadow:
            inset 0 1.5px 0.5px rgba(255, 255, 255, .85),
            inset 0 -2px 3px rgba(15, 20, 45, .10),
            inset 0 0 0 1px rgba(255, 255, 255, .45),
            0 1.5px 3px rgba(15, 20, 45, .10),
            0 4px 10px -3px rgba(15, 20, 45, .14);
    }
    .info-icon > i,
    .clinic-tool-icon > i,
    .ars-section-icon > i,
    .cmdk-item-icon > i,
    .pair-type-icon > i {
        text-shadow:
            0 -0.5px 0 rgba(255, 255, 255, .70),
            0 1px 1.5px rgba(15, 20, 45, .22);
    }
}

/* El mismo ajuste cuando el tema claro se fija a mano. */
html[data-theme="light"] .info-icon,
html[data-theme="light"] .clinic-tool-icon,
html[data-theme="light"] .ars-section-icon,
html[data-theme="light"] .cmdk-item-icon,
html[data-theme="light"] .pair-type-icon {
    box-shadow:
        inset 0 1.5px 0.5px rgba(255, 255, 255, .85),
        inset 0 -2px 3px rgba(15, 20, 45, .10),
        inset 0 0 0 1px rgba(255, 255, 255, .45),
        0 1.5px 3px rgba(15, 20, 45, .10),
        0 4px 10px -3px rgba(15, 20, 45, .14);
}

/* ============================================================
   7 · MOVIMIENTO REDUCIDO, IMPRESIÓN Y PANTALLAS FINAS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .info-icon,
    .clinic-tool-icon,
    .ars-section-icon,
    .cmdk-item-icon,
    .pair-type-icon {
        transition: none;
    }
    .clinic-tool-card:hover .clinic-tool-icon,
    .info-card:hover .info-icon {
        transform: none;
    }
}

/* En pantallas muy estrechas los iconos son diminutos: tanto
   detalle se convierte en ruido. Se deja sólo el volumen básico. */
@media (max-width: 380px) {
    .info-icon::before,
    .clinic-tool-icon::before,
    .ars-section-icon::before,
    .cmdk-item-icon::before,
    .pair-type-icon::before {
        height: 36%;
        background: linear-gradient(180deg,
            rgba(255, 255, 255, .30) 0%,
            rgba(255, 255, 255, 0) 100%);
    }
}

/* Al imprimir, las sombras se convierten en manchas grises que
   gastan tinta y estorban la lectura clínica. */
@media print {
    .info-icon,
    .clinic-tool-icon,
    .ars-section-icon,
    .cmdk-item-icon,
    .pair-type-icon,
    .legal-icon,
    .empty-state-icon,
    .guide-num,
    .mag-legend-dot,
    .splash-badges li,
    .scan-option-box,
    .zst-btn {
        box-shadow: none !important;
    }
    .info-icon::before,
    .clinic-tool-icon::before,
    .ars-section-icon::before,
    .cmdk-item-icon::before,
    .pair-type-icon::before,
    .legal-icon::after,
    .mag-mk::before {
        display: none !important;
    }
    .info-icon > i,
    .clinic-tool-icon > i,
    .ars-section-icon > i,
    .cmdk-item-icon > i,
    .pair-type-icon > i,
    .mag-mk {
        text-shadow: none !important;
    }
}