/*
 * MATI · códice digital de la casa (fase 10).
 *
 * Paleta: obsidiana #0B0F14 · superficie #161C24 · grana #9B1B30
 * jade #0FA3A3 · amate #E8E2D4 · oro #C9A227 (solo excepciones).
 *
 * Contraste AA verificado (WCAG):
 *   amate/obsidiana 14.88:1 · amate/superficie 13.27:1 · jade/obsidiana 6.21:1
 *   oro/obsidiana 7.94:1 · amate/grana 6.27:1.
 *   La grana NUNCA va como texto sobre obsidiana (2.37:1): solo como
 *   fondo con texto amate, o como borde/acento no textual.
 *
 * Toda la audacia se gasta en el espejo; tableros y tablas, sobrios y densos.
 */

:root {
    --mati-obsidiana: #0B0F14;
    --mati-superficie: #161C24;
    --mati-grana: #9B1B30;
    --mati-jade: #0FA3A3;
    --mati-amate: #E8E2D4;
    --mati-oro: #C9A227;
}

/* ── Tipografía ──────────────────────────────────────────────── */
.fi-body, .fi-topbar, .fi-sidebar {
    font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-logo {
    font-family: 'Archivo', 'IBM Plex Sans', sans-serif;
    font-stretch: expanded;
    letter-spacing: .01em;
}

/* Toda cifra e indicador va en mono. */
.fi-wi-stats-overview-stat-value,
.fi-ta-text-item-label:has(> .mono),
.mono,
.espejo-fuentes,
td.fi-ta-cell-valor,
.fi-wi-chart {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
}

/* ── Fondo del códice (modo oscuro del panel) ────────────────── */
.dark .fi-body {
    background-color: var(--mati-obsidiana);
    color: var(--mati-amate);
}

.dark .fi-section,
.dark .fi-wi-widget > .fi-section,
.dark .fi-ta-ctn,
.dark .fi-sidebar,
.dark .fi-topbar nav {
    background-color: var(--mati-superficie);
}

.dark .fi-sidebar-nav-item-active .fi-sidebar-nav-item-label {
    color: var(--mati-jade);
}

/* Tableros sobrios y densos. */
.fi-ta-table { font-size: .9rem; }
.fi-ta-cell { padding-top: .5rem; padding-bottom: .5rem; }

/* ── El espejo ───────────────────────────────────────────────── */
/* La lámina oscura, quieta, siempre encendida y sin costo. */
.espejo-lamina {
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    border: 1px solid rgba(15, 163, 163, .25);
    background:
        radial-gradient(120% 90% at 50% 120%, rgba(15, 163, 163, .07), transparent 60%),
        linear-gradient(180deg, #0d1117 0%, var(--mati-obsidiana) 100%);
    color: var(--mati-amate);
    padding: 1.5rem;
    display: grid;
    gap: .75rem;
}

/* Cuando la Dirección pide análisis, la lámina se ilumina desde el centro. */
.espejo-mirando {
    animation: espejo-iluminar 2.4s ease-in-out infinite;
    border-color: rgba(15, 163, 163, .6);
}

@keyframes espejo-iluminar {
    0%, 100% { box-shadow: inset 0 0 60px 0 rgba(15, 163, 163, .08); }
    50% { box-shadow: inset 0 0 140px 20px rgba(15, 163, 163, .28); }
}

@media (prefers-reduced-motion: reduce) {
    .espejo-mirando { animation: none; box-shadow: inset 0 0 100px 10px rgba(15, 163, 163, .18); }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.espejo-etapa {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mati-jade);
    margin: 0;
}

.espejo-alcance { margin: 0; opacity: .8; font-size: .9rem; }

.espejo-peticion {
    width: 100%;
    background: rgba(11, 15, 20, .8);
    color: var(--mati-amate);
    border: 1px solid rgba(232, 226, 212, .18);
    border-radius: .5rem;
    padding: .75rem 1rem;
    font-family: 'IBM Plex Sans', sans-serif;
    resize: vertical;
}

.espejo-peticion:focus-visible {
    outline: 2px solid var(--mati-jade);
    outline-offset: 2px;
    border-color: var(--mati-jade);
}

.espejo-error { color: #ff8fa3; margin: 0; font-size: .85rem; }

.espejo-controles { display: flex; gap: .75rem; }

.espejo-respuesta h2 { font-family: 'Archivo', sans-serif; font-stretch: expanded; }
.espejo-respuesta table { font-size: .88rem; }
.espejo-respuesta code, .espejo-respuesta td:has(> .num) {
    font-family: 'IBM Plex Mono', monospace;
}

.espejo-propuestas {
    margin-top: 1.25rem;
    border-left: 3px solid var(--mati-jade);
    padding-left: 1rem;
}

.espejo-fuentes {
    margin-top: 1.25rem;
    font-size: .78rem;
    opacity: .65;
}

.espejo-historial { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }

.espejo-historial-item {
    width: 100%;
    text-align: left;
    padding: .4rem .6rem;
    border-radius: .375rem;
    font-size: .88rem;
}

.espejo-historial-item:hover { background: rgba(15, 163, 163, .1); }

.espejo-historial-item:focus-visible,
.fi-btn:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--mati-jade) !important;
    outline-offset: 2px;
}

/* El oro se reserva a excepciones: el aviso que no debe pasarse por alto. */
.dark .fi-badge.fi-color-warning {
    background: rgba(201, 162, 39, .15);
    color: var(--mati-oro);
}

/* Grana: fondo con texto amate, nunca texto sobre obsidiana. */
.dark .fi-badge.fi-color-danger {
    background: var(--mati-grana);
    color: var(--mati-amate);
}