/*
 * El traje de LíneaDJ: una consola, no una invitación.
 *
 * La zona de Yanira es un cuaderno de boda y le sienta bien el crema con
 * dorado. Esta la usa una empresa de sonido e imagen, de día en la oficina y
 * de noche en una cabina a oscuras, así que pide lo contrario: fondo casi
 * negro, contraste alto, nada de letra manuscrita, números tabulares para que
 * las horas no bailen y rótulos pequeños en mayúscula, como en el software de
 * directo. El dorado se queda, pero medido: solo marca lo que está activo.
 *
 * Se carga después de zonas/zona.css y lo reviste entero.
 */

:root {
    --fondo: #0C0D10;
    --fondo-alto: #121419;
    --panel: #15181E;
    --panel-alto: #1B1F26;
    --linea: rgba(233, 230, 225, 0.09);
    --linea-fuerte: rgba(233, 230, 225, 0.16);
    --texto: #E9E6E1;
    --piedra: #9D9A93;
    --piedra-clara: #6E6B65;
    --oro: #D8B35A;
    --oro-claro: #F0CE7A;
    --verde: #6FCF97;
    --rojo: #E2706A;
    --ambar: #E0A33E;
    --crema: var(--fondo);
    --sans: 'Montserrat', system-ui, sans-serif;
    --serif: 'Montserrat', system-ui, sans-serif;   /* en la consola no hay serif */
    --mano: 'Montserrat', system-ui, sans-serif;
}

body { background: var(--fondo); color: var(--texto); }

/* Un fondo con profundidad, no un color plano */
body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(900px 500px at 15% -10%, rgba(216, 179, 90, 0.07), transparent 60%),
        radial-gradient(700px 400px at 110% 10%, rgba(110, 130, 190, 0.07), transparent 60%);
}

/* ---------------------------------------------------------- Tipografía */

h2.seccion, .ficha h3, .vistazo h3, .sub-seccion, .hoja-sheet h3, .tarjeta-puerta h1 {
    font-family: var(--sans); font-weight: 600; letter-spacing: -0.015em;
}
h2.seccion { font-size: 1.6rem; }
.hora-paso, .edita.hora, .hito .hora-calc, .resumen-timing b, .cifra .n, .cabina-reloj,
.franja-reglas, .paso .dura-paso, .cabina-fila .hora {
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
p.intro, .ficha p, .vacio { color: var(--piedra); font-style: normal; font-family: var(--sans); }
.vacio { font-style: normal; }

/* ---------------------------------------------------------- Armazón */

.cabecera {
    background: rgba(12, 13, 16, 0.86); border-bottom: 1px solid var(--linea);
    backdrop-filter: blur(14px) saturate(140%);
}
.cabecera .donde { color: var(--piedra-clara); }
.marca-zona .nombre { font-family: var(--sans); font-style: normal; font-weight: 700; letter-spacing: 0.02em; color: var(--texto); }
.marca-zona .oficio { color: var(--piedra-clara); }
.marca-zona .rombo { background: var(--oro); }
.marca-zona .rama::before { background: linear-gradient(90deg, transparent, var(--linea-fuerte)); }
.marca-zona .rama::after { background: linear-gradient(90deg, var(--linea-fuerte), transparent); }
#guardado { color: var(--piedra-clara); }
#guardado i { color: var(--verde); }
#guardado.guardando i { color: var(--ambar); }

.pestanas {
    background: rgba(12, 13, 16, 0.9); border-bottom: 1px solid var(--linea);
    backdrop-filter: blur(14px) saturate(140%);
}
.pestanas button { color: var(--piedra); border-radius: 0.5rem; }
.pestanas button:hover { color: var(--texto); background: var(--panel); }
.pestanas button.activa { background: transparent; color: var(--oro-claro); position: relative; }
.pestanas button.activa::after {
    content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: -0.55rem;
    height: 2px; background: var(--oro); border-radius: 2px;
}

/* ---------------------------------------------------------- Piezas */

.ficha, .tarj, .hito, .lista, .cifra, .resumen-timing, .vistazo, .archivos-zona, .veto, .tarea, .capitan-ficha {
    background: var(--panel); border-color: var(--linea); box-shadow: none;
}
.ficha, .vistazo, .archivos-zona { border-radius: 1rem; }
.tarj, .hito, .lista { border-radius: 0.9rem; }
.cifras { background: var(--panel); border-color: var(--linea); }
.cifra { background: var(--panel); box-shadow: 0 0 0 1px var(--linea); }
.cifra.fuerte { background: linear-gradient(160deg, rgba(216, 179, 90, 0.16), rgba(216, 179, 90, 0.03)); border-color: rgba(216, 179, 90, 0.35); }
.cifra .n { color: var(--oro-claro); font-weight: 600; }
.dato { border-bottom-color: var(--linea); }
.dato .etq { color: var(--piedra-clara); }
.marca.gris { background: var(--panel-alto); color: var(--piedra); }
.marca.ok { background: rgba(111, 207, 151, 0.12); color: var(--verde); }
.marca.hueco { background: rgba(224, 163, 62, 0.12); color: var(--ambar); }
.marca.solapa { background: rgba(226, 112, 106, 0.12); color: var(--rojo); }

.boton { background: var(--panel-alto); border-color: var(--linea-fuerte); color: var(--texto); }
.boton:hover { border-color: var(--oro); color: var(--oro-claro); transform: none; box-shadow: none; background: var(--panel-alto); }
.boton.principal { background: var(--oro); border-color: var(--oro); color: #14100A; font-weight: 700; }
.boton.principal:hover { background: var(--oro-claro); border-color: var(--oro-claro); color: #14100A; }
.boton.suave { background: transparent; border-style: dashed; color: var(--piedra); }
.boton.peligro { color: var(--rojo); border-color: rgba(226, 112, 106, 0.3); }
.util { color: var(--piedra); }
.util:hover { color: var(--oro-claro); background: var(--panel-alto); border-color: var(--linea-fuerte); }
.util.peligro:hover { color: var(--rojo); background: rgba(226, 112, 106, 0.1); border-color: rgba(226, 112, 106, 0.3); }
.flotante { background: var(--oro); color: #14100A; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.flotante:hover { background: var(--oro-claro); }

/* Campos: se ven como campos, también cuando no se tocan */
.edita { background: var(--fondo-alto); border-color: var(--linea); color: var(--texto); }
.edita:hover { background: var(--panel-alto); border-color: var(--linea-fuerte); }
.edita:focus { background: var(--fondo); border-color: var(--oro); box-shadow: 0 0 0 3px rgba(216, 179, 90, 0.14); }
.edita::placeholder { color: var(--piedra-clara); }
.edita.titulo { font-weight: 600; }
.edita.hora, .hito .hora-calc { color: var(--oro-claro); font-weight: 600; }
.hito .hora-calc { background: var(--panel-alto); border-color: var(--linea); }
.hito .hora-calc:hover { border-color: var(--oro); background: var(--panel-alto); }
select.edita, .tarj select.estado { background: var(--fondo-alto); color: var(--texto); border-color: var(--linea); }
.buscador input { background: var(--fondo-alto); border-color: var(--linea); color: var(--texto); }

/* La línea de tiempo del guion */
.hitos::before { background: linear-gradient(180deg, transparent, var(--linea-fuerte) 8%, var(--linea-fuerte) 92%, transparent); opacity: 1; }
.hito::before { background: var(--oro); box-shadow: 0 0 0 3px var(--fondo); }
.hito.encadenado::before { background: var(--fondo); border-color: var(--oro); }
.hito .franja { color: var(--piedra-clara); }
.insertar::before { background: var(--linea); }
.insertar button { background: var(--fondo); border-color: var(--linea); color: var(--piedra-clara); }
.insertar button:hover { color: var(--oro-claro); border-color: var(--oro); background: var(--panel); }
.musica-hito, .imagen-hito, .archivos-momento { border-top-color: var(--linea); }
.musica-hito .etq, .imagen-hito .etq { color: var(--piedra); letter-spacing: 0.22em; }

/* Niveles y pastillas */
.nivel { background: var(--fondo-alto); border-color: var(--linea); color: var(--piedra); }
.nivel:hover { border-color: var(--linea-fuerte); color: var(--texto); }
.nivel.puesto { background: var(--oro); border-color: var(--oro); color: #14100A; }
.adjunto { background: var(--fondo-alto); border-color: var(--linea); }
.adjunto:hover { border-color: var(--linea-fuerte); }
.adjunto .nombre-archivo { color: var(--texto); }
.adjunto a { color: var(--oro-claro); }
.soltar { border-color: var(--linea-fuerte); color: var(--piedra); background: var(--fondo-alto); }
.soltar:hover { border-color: var(--oro); color: var(--oro-claro); background: var(--panel-alto); }
.archivos-zona.soltando, .hito.soltando { border-color: var(--oro); background: var(--panel-alto); box-shadow: 0 0 0 1px var(--oro) inset; }
.tabla-archivos td { border-bottom-color: var(--linea); }
.tabla-archivos .nombre a, .tabla-archivos .nombre span { color: var(--texto); }
.cancion-del-archivo { color: var(--oro-claro); font-family: var(--sans); }

/* El día de un vistazo */
.franja-tiempo { gap: 3px; }
.franja-tiempo .tramo { background: linear-gradient(180deg, rgba(216, 179, 90, 0.5), rgba(216, 179, 90, 0.22)); border-radius: 3px; }
.franja-tiempo .tramo.sin-musica { background: repeating-linear-gradient(45deg, rgba(233, 230, 225, 0.07), rgba(233, 230, 225, 0.07) 5px, transparent 5px, transparent 10px); border: 1px solid var(--linea); }
.franja-tiempo .tramo:hover { box-shadow: 0 0 0 1px var(--oro); transform: none; }
.franja-tiempo .tramo span { color: #1A1407; font-weight: 700; }
.franja-reglas { color: var(--piedra-clara); }
.paso { border-top-color: var(--linea); }
.paso:hover { background: var(--panel-alto); }
.paso .hora-paso { color: var(--oro-claro); font-weight: 600; }
.paso .suena-paso { color: var(--piedra); font-style: normal; font-family: var(--sans); }
.paso .suena-paso.falta { color: var(--ambar); }
.vistazo .cuenta-corta { color: var(--piedra); }
.vistazo .cuenta-corta b { color: var(--oro-claro); }

/* La puerta */
.tarjeta-puerta { background: var(--panel); border-color: var(--linea); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
.tarjeta-puerta .sub { color: var(--piedra-clara); }
#codigo { background: var(--fondo-alto); border-color: var(--linea); color: var(--texto); letter-spacing: 0.3em; font-family: var(--sans); font-weight: 600; }
#codigo:focus { background: var(--fondo); border-color: var(--oro); }
.pie-puerta { font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: 0.08em; color: var(--piedra-clara); }
.filete { background: linear-gradient(90deg, transparent, var(--linea-fuerte), transparent); }

/* Listas de Spotify */
.lista .enlace-crudo { color: var(--piedra-clara); }
.lista iframe { background: var(--fondo-alto); }
.que-suena .cancion { font-family: var(--sans); font-weight: 600; }

/* Diálogos y pie */
.velo { background: rgba(6, 7, 9, 0.6); }
.hoja-sheet { background: var(--panel); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.hoja-sheet .campo-sheet { background: var(--fondo-alto); border-color: var(--linea); color: var(--texto); }
.opcion-sheet { background: var(--fondo-alto); border-color: var(--linea); color: var(--texto); }
.opcion-sheet:hover { border-color: var(--oro); background: var(--panel-alto); }
.instalar { background: var(--panel); border-color: var(--linea); color: var(--piedra); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }
.instalar b { color: var(--texto); }
.pie { border-top-color: var(--linea); color: var(--piedra-clara); }
#copiado { background: var(--oro); color: #14100A; font-weight: 700; }

/* ---------------------------------------------------------- Móvil */

@media (max-width: 720px) {
    .pestanas {
        background: rgba(12, 13, 16, 0.94);
        border-top: 1px solid var(--linea);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
    }
    .pestanas button.activa::after { left: 50%; right: auto; transform: translateX(-50%); bottom: auto; top: -0.45rem; width: 18px; }
    .pestanas button.activa { color: var(--oro-claro); }
    .pestanas button i { opacity: 0.9; }
    .flotante { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55); }
    /* Secciones con aire: menos caja, más jerarquía */
    h2.seccion { font-size: 1.7rem; letter-spacing: -0.02em; }
    .ficha, .vistazo { border-radius: 1.1rem; }
}