/* ===========================================================================
   Reportería — SOLO la transición entre sistemas.
   ---------------------------------------------------------------------------
   Este archivo se carga en TODO el panel, porque la transición arranca desde
   SisController (al pulsar Reportería en el sidebar). Por eso aquí no puede
   haber una sola regla que toque el cromo de Filament: todo cuelga de
   `.rep-transicion`, que está oculto e inerte mientras no se active.

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

:root {
    /* Rampa gris FRÍA (leve sesgo azul).
       Ojo: la neutra de Fluent (#F3F2F1) es cálida y quedaría casi encima del
       marfil de SisController (#F6F6F1) — se perdería el cambio de sistema.
       Por eso se enfría: es lo que separa un subsistema del otro de un vistazo. */
    --rep-n-950: #14161A;
    --rep-n-900: #1B1E23;
    --rep-n-850: #22262C;
    --rep-n-800: #2A2F36;
    --rep-n-700: #363C44;
    --rep-n-600: #5B636D;
    --rep-n-500: #79818C;
    --rep-n-400: #9AA1AB;
    --rep-n-300: #C2C7CE;
    --rep-n-200: #DFE2E7;
    --rep-n-100: #F0F2F4;
    --rep-n-050: #F8F9FA;

    --rep-bg:          var(--rep-n-100);
    --rep-surface:     #FFFFFF;
    --rep-surface-alt: var(--rep-n-050);
    --rep-line:        var(--rep-n-200);
    --rep-line-strong: var(--rep-n-300);
    --rep-text:        var(--rep-n-850);
    --rep-text-soft:   var(--rep-n-600);

    /* Marca: amarillo Power BI. Sólo sobre superficies oscuras. */
    --rep-accent:      #F2C811;
    --rep-accent-hi:   #FFD83D;
    /* Versión legible para texto e iconos sobre fondo claro (~4.9:1 en blanco) */
    --rep-accent-ink:  #8A6A00;
    --rep-accent-soft: #FDF6DA;

    /* Azul de datos Power BI — gráficos, no cromo */
    --rep-data:        #118DFF;

    --rep-r:   10px;
    --rep-r-lg: 14px;
}

html.dark {
    --rep-bg:          #121418;
    --rep-surface:     #1A1D22;
    --rep-surface-alt: #21252B;
    --rep-line:        #2E333A;
    --rep-line-strong: #3F454E;
    --rep-text:        #FFFFFF;
    --rep-text-soft:   #AAB1BA;

    /* En oscuro el amarillo sí contrasta: marca e "ink" convergen. */
    --rep-accent-ink:  #F2C811;
    --rep-accent-soft: rgba(242, 200, 17, 0.14);
    --rep-data:        #3AA0FF;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · TRANSICIÓN — 3 s en total
   Los tiempos están repartidos para que siempre haya algo entrando en
   pantalla: comprimidos al inicio, el resto sería una imagen fija y se
   sentiría trabada, no larga.
     A  0.00–0.30s  velo: el sistema actual se cubre
     B  0.12–0.67s  compuertas diagonales: el gesto de "cambio de sistema"
     C  0.45–2.15s  arranque: malla, logo juntándose, wordmark, subtítulo, barra
     D  2.15–3.00s  las compuertas se abren y revelan el sistema nuevo
   El JS (MIN_MS) sostiene el overlay hasta 2.15 s aunque la navegación termine
   antes; el cierre añade los 0.85 s finales. Cambiar uno obliga a mover el otro.
   ═══════════════════════════════════════════════════════════════════════════ */

.rep-transicion {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: var(--rep-n-950);
    transition: opacity .3s ease, visibility 0s linear .3s;
}
/* Velo: cubre el cambio de página al instante, sin animación. El nodo muere
   en el swap del body, así que animar aquí no se vería; la coreografía real
   arranca ya en la página de destino. */
.rep-transicion.is-velo {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: none;
}

.rep-transicion.is-activa {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity .18s ease, visibility 0s;
}

/* ── Tiempo D · El cierre ──
   Las compuertas se ABREN (el gesto inverso al de la entrada) y revelan el
   sistema nuevo, mientras el contenido se acerca a la cámara y se disuelve.
   El orden importa: el fondo no puede desvanecerse antes que las compuertas
   empiecen a separarse, o no habría nada que revelar y quedaría un parpadeo. */
.rep-transicion.is-saliendo {
    background-color: transparent;
    opacity: 0;
    visibility: hidden;
    transition:
        background-color .45s ease .16s,
        opacity .3s ease .55s,
        visibility 0s linear .86s;
}
.rep-transicion.is-saliendo .rep-compuerta {
    transition: transform .82s cubic-bezier(.66, 0, .18, 1);
    transition-delay: 0s;
}
.rep-transicion.is-saliendo .rep-compuerta--a { transform: translateX(-126%) skewY(-4deg); }
.rep-transicion.is-saliendo .rep-compuerta--b { transform: translateX(126%)  skewY(-4deg); }

/* El logo y el texto se van hacia adelante: refuerza el "atravesamos" */
.rep-transicion.is-saliendo .rep-transicion-inner {
    opacity: 0;
    transform: scale(1.16);
    transition: opacity .34s ease, transform .6s cubic-bezier(.5, 0, .75, 0);
}
.rep-transicion.is-saliendo .rep-malla { opacity: 0; transition: opacity .3s ease; }
.rep-transicion.is-saliendo::after     { opacity: 0; transition: opacity .38s ease; }

/* ── B · Compuertas ── */
.rep-compuerta {
    position: absolute;
    left: -12%;
    width: 124%;
    height: 62%;
    background: var(--rep-n-900);
    transition: transform .55s cubic-bezier(.76, 0, .24, 1);
}
.rep-compuerta--a { top: -12%;    transform: translateX(-118%) skewY(-4deg); }
.rep-compuerta--b { bottom: -12%; transform: translateX(118%)  skewY(-4deg); background: var(--rep-n-850); }
.rep-transicion.is-activa .rep-compuerta { transform: translateX(0) skewY(-4deg); transition-delay: .12s; }

/* ── C · Malla técnica de fondo ── */
.rep-malla {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
    transition: opacity .5s ease .5s;
}
.rep-transicion.is-activa .rep-malla { opacity: 1; }

/* Halo cálido detrás de la marca */
.rep-transicion::after {
    content: '';
    position: absolute;
    width: 60vmax; height: 60vmax;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 200, 17, .13) 0%, transparent 62%);
    opacity: 0;
    transition: opacity .6s ease .45s;
    pointer-events: none;
}
.rep-transicion.is-activa::after { opacity: 1; }

/* Yendo a SisController el halo se pone verde: el amarillo detrás del logo
   verde delataría que seguimos en la identidad de Reportería. */
.rep-transicion.is-hacia-sis::after {
    background: radial-gradient(circle, rgba(34, 103, 73, .30) 0%, transparent 62%);
}

.rep-transicion-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 1.5rem;
}

/* ── Logo partido que se junta ──
   El logo del DESTINO se arma en el centro: cada mitad entra desde su costado
   y se encuentran a los ~1.8 s, justo antes de que aparezca el wordmark.
   Truco: se pinta el logo completo dos veces y cada copia se recorta a su
   mitad con clip-path; así el corte cae siempre exacto y no depende del glifo. */
.rep-logo {
    position: relative;
    width: 76px; height: 76px;
    margin: 0 auto 1.5rem;
}
.rep-logo-set {
    position: absolute; inset: 0;
    opacity: 0;
    visibility: hidden;
}
/* Sólo se muestra el set del destino */
.rep-transicion.is-hacia-rep .rep-logo-set--rep,
.rep-transicion.is-hacia-sis .rep-logo-set--sis {
    opacity: 1;
    visibility: visible;
}

.rep-logo-half {
    position: absolute; inset: 0;
    opacity: 0;
    transition: transform .7s cubic-bezier(.16, 1, .3, 1) .5s,
                opacity .35s ease .5s;
}
.rep-logo-half svg { width: 100%; height: 100%; display: block; }

/* Cada copia recortada a su mitad + desplazada hacia afuera */
.rep-logo-half--izq {
    clip-path: inset(0 50% 0 0);
    transform: translateX(-72px) rotate(-6deg);
}
.rep-logo-half--der {
    clip-path: inset(0 0 0 50%);
    transform: translateX(72px) rotate(6deg);
}
.rep-transicion.is-activa .rep-logo-half {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
}

/* Destello en la costura, en el instante en que las mitades se encuentran */
.rep-logo-costura {
    position: absolute;
    top: -6%; bottom: -6%; left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg, transparent, #FFFFFF, transparent);
    opacity: 0;
    transform: scaleY(.4);
    pointer-events: none;
}
.rep-transicion.is-activa .rep-logo-costura {
    animation: rep-costura .45s ease-out 1.12s;
}
@keyframes rep-costura {
    0%   { opacity: 0;   transform: scaleY(.4); }
    45%  { opacity: .95; transform: scaleY(1); }
    100% { opacity: 0;   transform: scaleY(1.15); }
}

.rep-transicion-marca {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--rep-n-500);
    margin-bottom: .85rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease .55s, transform .35s ease .55s;
}
.rep-transicion.is-activa .rep-transicion-marca { opacity: 1; transform: translateY(0); }

/* Wordmark: se revela con un barrido, no con un fade */
.rep-transicion-titulo {
    font-size: clamp(2.1rem, 7vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: #FFFFFF;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .6s cubic-bezier(.76, 0, .24, 1) 1.25s;
}
.rep-transicion.is-activa .rep-transicion-titulo { clip-path: inset(0 0 0 0); }
.rep-transicion-titulo em { font-style: normal; color: var(--rep-accent); }

.rep-transicion-sub {
    margin-top: .8rem;
    font-size: .86rem;
    color: var(--rep-n-400);
    opacity: 0;
    transition: opacity .35s ease 1.6s;
}
.rep-transicion.is-activa .rep-transicion-sub { opacity: 1; }

/* Barra de progreso: se llena en el tiempo real de la transición */
.rep-transicion-barra {
    position: relative;
    width: 210px;
    height: 2px;
    margin: 1.7rem auto 0;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, .12);
    opacity: 0;
    transition: opacity .3s ease 1.55s;
}
.rep-transicion.is-activa .rep-transicion-barra { opacity: 1; }
.rep-transicion-barra::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--rep-accent), var(--rep-accent-hi));
    transform: scaleX(0);
    transform-origin: left;
}
.rep-transicion.is-activa .rep-transicion-barra::after {
    transform: scaleX(1);
    transition: transform .55s cubic-bezier(.3, .8, .4, 1) 1.6s;
}

/* Accesibilidad: sin coreografía, pero el overlay sigue apareciendo para no
   perder el contexto de "cambiaste de sistema". */
@media (prefers-reduced-motion: reduce) {
    .rep-transicion,
    .rep-transicion *,
    .rep-transicion *::after {
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        animation: none !important;
    }
    .rep-transicion-titulo { clip-path: none; }
    .rep-transicion-barra::after { transform: scaleX(1); }
    /* El logo aparece ya armado, sin el viaje de las mitades */
    .rep-transicion.is-activa .rep-logo-half { transform: translateX(0) rotate(0); opacity: 1; }
    .rep-logo-costura { display: none; }
}