/* ===========================================================================
   SisCompras — SOLO la transición entre sistemas.
   ---------------------------------------------------------------------------
   Este archivo se carga en TODO el panel admin, porque la transición arranca
   desde SisCampo+ (al pulsar el botón SisCompras del sidebar). Por eso aquí no
   puede haber NI UNA regla que toque el cromo de Filament: todo cuelga de
   `.cmp-transicion` / `.cmp-volver`, que están ocultos e inertes mientras no se
   activen.

   La identidad del sub-sistema (sidebar, topbar, colores) vive aparte, en
   compras-shell.css, que sólo se carga DENTRO de /admin/compras*.
   =========================================================================== */

:root {
    /* Azul SisCompras — distinto del verde de SisCampo+ a propósito: es lo que
       hace leer "cambié de sistema" de un vistazo. */
    --cmp-primary:    #2563EB;
    --cmp-dark:       #1E40AF;
    --cmp-darker:     #172554;
    --cmp-light:      #DBEAFE;
    --cmp-ink-950:    #0B1220;
    --cmp-ink-900:    #111A2E;
    --cmp-ink-800:    #1B2740;
    --cmp-accent:     #FBC02D;
}

/* ── Overlay ──────────────────────────────────────────────────────────────── */
.cmp-transicion {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.cmp-transicion.is-activa {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* ── Compuertas: dos mitades que cierran y luego abren ────────────────────── */
.cmp-compuerta {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50.5%;      /* 50.5 y no 50: evita la costura de 1px en pantallas HiDPI */
    background: linear-gradient(160deg, var(--cmp-ink-950) 0%, var(--cmp-darker) 100%);
    transform: translateY(-100%);
    /* .40s y no .52s: la navegación se suelta a los 470 ms (ESPERA en el JS).
       Con .52s las compuertas se cortaban a media cerrada y el cambio de página
       se veía como un salto. Si se toca este número, ajustar ESPERA. */
    transition: transform .40s cubic-bezier(.76, 0, .24, 1);
}
.cmp-compuerta--a { top: 0; }
.cmp-compuerta--b { bottom: 0; transform: translateY(100%); }

/* Aterrizaje: la página de destino ya nace con las compuertas cerradas, sin
   animarlas de nuevo. Sin esto se veía un doble gesto — cierran en el origen y
   volvían a cerrar en el destino. */
.cmp-transicion.is-aterrizaje .cmp-compuerta { transition: none; }
.cmp-transicion.is-aterrizaje .cmp-transicion-inner { transition: none; }

.cmp-transicion.is-activa .cmp-compuerta--a,
.cmp-transicion.is-activa .cmp-compuerta--b { transform: translateY(0); }

/* Salida: las compuertas se abren y descubren la página ya cargada. */
.cmp-transicion.is-saliendo .cmp-compuerta--a { transform: translateY(-100%); }
.cmp-transicion.is-saliendo .cmp-compuerta--b { transform: translateY(100%); }
.cmp-transicion.is-saliendo .cmp-compuerta--a,
.cmp-transicion.is-saliendo .cmp-compuerta--b { transition: transform .78s cubic-bezier(.76, 0, .24, 1); }

/* Malla técnica de fondo: textura sutil, nunca protagonista. */
.cmp-malla {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-image:
        linear-gradient(rgba(37, 99, 235, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .18) 1px, transparent 1px);
    background-size: 44px 44px;
    transition: opacity .4s ease .18s;
}
.cmp-transicion.is-activa  .cmp-malla { opacity: 1; }
.cmp-transicion.is-saliendo .cmp-malla { opacity: 0; transition-delay: 0s; }

/* ── Contenido central ────────────────────────────────────────────────────── */
.cmp-transicion-inner {
    position: relative;
    text-align: center;
    color: #FFFFFF;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .34s ease, transform .34s ease;
}
.cmp-transicion.is-activa  .cmp-transicion-inner { opacity: 1; transform: translateY(0); transition-delay: .34s; }
.cmp-transicion.is-saliendo .cmp-transicion-inner { opacity: 0; transform: translateY(-8px); transition-delay: 0s; }

.cmp-logo {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--cmp-primary) 0%, var(--cmp-dark) 100%);
    box-shadow: 0 18px 40px rgba(37, 99, 235, .38);
}
.cmp-logo-icono svg { width: 38px; height: 38px; color: #FFFFFF; display: block; }

.cmp-transicion-marca {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 6px;
}
.cmp-transicion-titulo {
    font-size: 2.1rem;
    font-weight: 300;
    letter-spacing: -.01em;
    line-height: 1.1;
}
.cmp-transicion-titulo em { font-style: normal; font-weight: 700; color: #93C5FD; }

.cmp-transicion-sub {
    margin-top: 10px;
    font-size: .84rem;
    color: rgba(255, 255, 255, .62);
}

/* Barra de progreso: es lo último en llenarse, justo al terminar MIN_MS. */
.cmp-transicion-barra {
    width: 190px;
    height: 3px;
    margin: 22px auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
    position: relative;
}
.cmp-transicion-barra::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cmp-primary), #93C5FD);
}
.cmp-transicion.is-activa .cmp-transicion-barra::after {
    width: 100%;
    transition: width 1.25s cubic-bezier(.4, 0, .2, 1) .38s;
}

/* Dirección de vuelta: el acento cambia para que se lea "voy al otro lado". */
.cmp-transicion.is-hacia-sis .cmp-logo {
    background: linear-gradient(145deg, #15803D 0%, #14532D 100%);
    box-shadow: 0 18px 40px rgba(21, 128, 61, .38);
}
.cmp-transicion.is-hacia-sis .cmp-transicion-titulo em { color: #86EFAC; }
.cmp-transicion.is-hacia-sis .cmp-transicion-barra::after {
    background: linear-gradient(90deg, #15803D, #86EFAC);
}

/* ── Pastilla flotante de vuelta (solo móvil) ─────────────────────────────── */
.cmp-volver {
    position: fixed;
    right: 14px;
    bottom: 78px;
    z-index: 60;
    display: none;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cmp-ink-900);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    text-decoration: none;
}
.cmp-volver svg { width: 15px; height: 15px; }

@media (max-width: 1024px) {
    .cmp-volver { display: inline-flex; }
}

/* Respeta a quien pidió menos movimiento: se mantiene el velo, se quita el baile. */
@media (prefers-reduced-motion: reduce) {
    .cmp-compuerta,
    .cmp-transicion-inner,
    .cmp-malla,
    .cmp-transicion-barra::after {
        transition-duration: .01ms !important;
    }
}