/* ================================================================
   Catalogo Digital — capa de detalles ("el toque")

   Esta hoja va DESPUES de estilo.css y solo agrega adornos: no
   define nada estructural. Si se apaga, el sistema se ve como
   antes y sigue funcionando igual.

   Se enciende y se apaga con APP_ESTILO en el .env:
       APP_ESTILO=cool     -> se carga esta hoja
       APP_ESTILO=clasico  -> no se carga

   Regla que se respeta aqui: nada de esto puede estorbar la
   lectura. Los tamanos de letra, los contrastes y los 44px de los
   clickeables se quedan como estaban.
   ================================================================ */

/* ---------- Barra superior con profundidad ---------- */

.barra {
    background: linear-gradient(135deg, var(--guinda-oscuro) 0%, var(--guinda) 55%, #7d1f45 100%);
    box-shadow: 0 2px 14px rgba(74, 13, 38, .28);
}

/* Un hilo dorado que se desvanece hacia los extremos, en lugar del
   borde macizo. Es el mismo gesto de la identidad de la Ventanilla. */
.barra::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--oro-claro) 18%, #f0d89a 50%, var(--oro-claro) 82%, transparent);
    opacity: .85;
}

/* ---------- La flor ---------- */

.marca .sello {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.marca:hover .sello { transform: rotate(15deg) scale(1.08); }

.marca-texto small { transition: color .2s ease; }
.marca:hover .marca-texto small { color: #f0d89a; }

/* ---------- Tarjetas: se levantan al pasar el cursor ---------- */

.tarjeta {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Filo dorado que crece desde la izquierda al acercarse. */
.tarjeta::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--oro), var(--oro-claro));
    transition: width .35s ease;
}

.tarjeta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .07), 0 12px 28px rgba(98, 17, 50, .10);
    border-color: #cfc8bf;
}

.tarjeta:hover::before { width: 100%; }

/* ---------- Los numeritos del tablero ---------- */

.cifra {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.cifra .n {
    background: linear-gradient(135deg, var(--guinda) 0%, #8d2a52 60%, var(--oro) 140%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Respaldo: si el navegador no soporta el recorte, el color de
       estilo.css sigue aplicando y el numero se ve guinda solido. */
}

.cifra:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(98, 17, 50, .16);
}

.cifra.aviso .n {
    background: linear-gradient(135deg, var(--alerta) 0%, #b8842a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Botones ---------- */

.boton {
    background: linear-gradient(135deg, var(--guinda) 0%, var(--guinda-claro) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}

.boton:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(98, 17, 50, .28);
}

.boton:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }

.boton-oro { background: linear-gradient(135deg, var(--oro) 0%, var(--oro-claro) 100%); }
.boton-oro:hover { box-shadow: 0 4px 12px rgba(165, 127, 44, .38); }

.boton-borde, .boton-peligro { background: #fff; }
.boton-borde:hover { background: #f7eff2; }

/* ---------- Etiquetas de estado ---------- */

.chip {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
    transition: transform .15s ease;
}

.tabla tr:hover .chip { transform: scale(1.04); }

/* El verde de "en produccion" late despacito: es el estado que
   importa de un vistazo. */
.chip-PRODUCCION { position: relative; }

/* ---------- Tablas ---------- */

/* NOTA: aqui se intento dejar el encabezado pegado al desplazarse
   (position: sticky). NO funciona: la tabla vive dentro de
   .tabla-envuelta, que tiene overflow-x para poder deslizarse a lo
   ancho, y eso convierte al contenedor en el marco de referencia del
   sticky en vez de la pagina. Para que sirviera habria que darle al
   contenedor una altura fija y su propio desplazamiento vertical, y
   eso cambia el acomodo de todas las listas. Se dejo solo el degradado. */
.tabla thead th {
    background: linear-gradient(180deg, #fdfcfa, #f4f1ec);
    box-shadow: inset 0 -1px 0 var(--linea);
}

.tabla tbody tr { transition: background .12s ease; }
.tabla tbody tr:hover td { background: #fbf7f4; }

/* ---------- El secreto ---------- */

.secreto {
    background: linear-gradient(135deg, #f7f3ec, #f1ebe0);
    border-style: solid;
    border-color: rgba(165, 127, 44, .45);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.secreto[data-visible="1"] {
    border-color: var(--oro);
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .22);
}

/* ---------- Filtros ---------- */

.filtro { transition: transform .14s ease, border-color .18s ease, background .18s ease; }
.filtro:hover { transform: translateY(-1px); }
.filtro.activo { background: linear-gradient(135deg, var(--guinda), var(--guinda-claro)); }

/* ---------- Pantalla de acceso ---------- */

.acceso-fondo {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 600px at 20% -10%, #7d1f45 0%, transparent 60%),
                radial-gradient(900px 500px at 90% 110%, #8d2a52 0%, transparent 55%),
                linear-gradient(160deg, var(--guinda-oscuro), var(--guinda) 60%, #6d1739);
}

/* Un resplandor dorado muy tenue que respira detras de la caja. */
.acceso-fondo::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 620px; height: 620px;
    margin: -310px 0 0 -310px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 75, .20) 0%, transparent 62%);
    animation: respirar 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes respirar {
    0%, 100% { transform: scale(1);    opacity: .75; }
    50%      { transform: scale(1.14); opacity: 1; }
}

.acceso-caja {
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .06);
    animation: entrar .5s cubic-bezier(.2, .8, .3, 1) both;
}

.acceso-flor {
    filter: drop-shadow(0 6px 14px rgba(165, 127, 44, .35));
    animation: flotar 6s ease-in-out infinite;
}

@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ---------- Entradas ---------- */

@keyframes entrar {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.envoltura > h1,
.envoltura > .subtitulo,
.envoltura > .filtros,
.envoltura > .rejilla > *,
.envoltura > .tarjeta,
.envoltura > form > .tarjeta {
    animation: entrar .34s ease-out both;
}

/* Escalonado: aparecen una tras otra, no todas de golpe. */
.envoltura > .rejilla > *:nth-child(1) { animation-delay: .02s; }
.envoltura > .rejilla > *:nth-child(2) { animation-delay: .06s; }
.envoltura > .rejilla > *:nth-child(3) { animation-delay: .10s; }
.envoltura > .rejilla > *:nth-child(4) { animation-delay: .14s; }

/* ---------- Barra de desplazamiento ---------- */

* { scrollbar-color: #c3bab0 transparent; scrollbar-width: thin; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #cdc4ba;
    border-radius: 8px;
    border: 3px solid var(--papel);
}
::-webkit-scrollbar-thumb:hover { background: var(--oro); }

/* ---------- Pie ---------- */

.pie { border-top: 1px solid var(--linea); margin-top: 2rem; }

/* ================================================================
   Si la persona pidio menos movimiento en su sistema operativo, se
   respeta: se apagan TODAS las animaciones y transiciones.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .tarjeta:hover, .cifra:hover, .boton:hover, .filtro:hover { transform: none; }
}

/* ---------- Impresion: sin adornos ---------- */

@media print {
    .barra, .acceso-fondo::before { background: none; box-shadow: none; }
    .tarjeta, .cifra { box-shadow: none; transform: none; }
}