/* ==========================================================================
   Movimiento de la interfaz.

   Reglas de la casa:
   - Las animaciones usan las propiedades sueltas `translate` / `scale`, no
     `transform`: así no pisan los -translate-y-1/2 y similares de Tailwind.
   - fill-mode `backwards` (no `both`): al terminar la animación el elemento
     regresa a sus estilos normales y los :hover pueden moverlo.
   - Casi todo cuelga de .ss-page (el contenedor de @Body en MainLayout): cada
     página nueva y cada bloque que aparece al terminar de cargar entra solo,
     sin tocar las páginas una por una.
   ========================================================================== */

:root {
    --ss-ease: cubic-bezier(.22, 1, .36, 1);
    --ss-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ss-marino: #1E2226;
    --ss-dorado: #F26A21;
}

@keyframes ss-fade-up {
    from { opacity: 0; translate: 0 14px; }
}

@keyframes ss-fade {
    from { opacity: 0; }
}

@keyframes ss-pop {
    from { opacity: 0; translate: 0 -6px; scale: .97; }
}

@keyframes ss-modal {
    from { opacity: 0; translate: 0 18px; scale: .96; }
}

@keyframes ss-shimmer {
    to { translate: 100% 0; }
}

@keyframes ss-shake {
    10%, 90% { translate: -1px 0; }
    20%, 80% { translate: 3px 0; }
    30%, 50%, 70% { translate: -6px 0; }
    40%, 60% { translate: 6px 0; }
}

@keyframes ss-badge {
    0% { scale: .3; }
    60% { scale: 1.25; }
}

@keyframes ss-wiggle {
    0%, 100% { rotate: 0deg; }
    15% { rotate: 14deg; }
    30% { rotate: -12deg; }
    45% { rotate: 8deg; }
    60% { rotate: -5deg; }
    75% { rotate: 2deg; }
}

@keyframes ss-float {
    from { translate: 0 0; scale: 1; }
    to { translate: 40px 30px; scale: 1.15; }
}

@keyframes ss-pan {
    to { background-position: 26px 26px; }
}

@keyframes ss-grow-x {
    from { scale: 0 1; }
}

/* --------------------------------------------------------------------------
   Entrada de página: bloques en cascada
   -------------------------------------------------------------------------- */

.ss-page > * {
    animation: ss-fade-up .55s var(--ss-ease) backwards;
}
.ss-page > :nth-child(2) { animation-delay: .06s; }
.ss-page > :nth-child(3) { animation-delay: .12s; }
.ss-page > :nth-child(4) { animation-delay: .18s; }
.ss-page > :nth-child(n+5) { animation-delay: .24s; }

/* Tarjetas dentro de grids: cada una entra un poco después que la anterior. */
.ss-page .grid > * {
    animation: ss-fade-up .5s var(--ss-ease) backwards;
}
.ss-page .grid > :nth-child(2) { animation-delay: .04s; }
.ss-page .grid > :nth-child(3) { animation-delay: .08s; }
.ss-page .grid > :nth-child(4) { animation-delay: .12s; }
.ss-page .grid > :nth-child(5) { animation-delay: .16s; }
.ss-page .grid > :nth-child(6) { animation-delay: .20s; }
.ss-page .grid > :nth-child(7) { animation-delay: .24s; }
.ss-page .grid > :nth-child(8) { animation-delay: .28s; }
.ss-page .grid > :nth-child(n+9) { animation-delay: .32s; }

/* El calendario de Agenda tiene 49 celdas: ahí se ve mejor un solo fade. */
.ss-page .grid.grid-cols-7 > * {
    animation: ss-fade .35s ease-out backwards;
    animation-delay: 0s;
}

/* Filas de tablas: solo opacidad (mover filas descuadra los bordes). */
.ss-page tbody tr {
    animation: ss-fade .4s ease-out backwards;
}
.ss-page tbody tr:nth-child(2) { animation-delay: .03s; }
.ss-page tbody tr:nth-child(3) { animation-delay: .06s; }
.ss-page tbody tr:nth-child(4) { animation-delay: .09s; }
.ss-page tbody tr:nth-child(5) { animation-delay: .12s; }
.ss-page tbody tr:nth-child(6) { animation-delay: .15s; }
.ss-page tbody tr:nth-child(7) { animation-delay: .18s; }
.ss-page tbody tr:nth-child(n+8) { animation-delay: .21s; }

/* --------------------------------------------------------------------------
   Modales (overlay fixed inset-0 bg-black/40 + tarjeta blanca)
   -------------------------------------------------------------------------- */

.fixed.inset-0[class*="bg-black/"] {
    animation: ss-fade .2s ease-out;
    backdrop-filter: blur(3px);
}
.fixed.inset-0[class*="bg-black/"] > * {
    animation: ss-modal .4s var(--ss-spring) backwards;
}

/* --------------------------------------------------------------------------
   Menús desplegables (notificaciones, buscador)
   -------------------------------------------------------------------------- */

.ss-pop {
    animation: ss-pop .22s var(--ss-ease);
    transform-origin: top right;
}
.ss-pop-left { transform-origin: top left; }

/* --------------------------------------------------------------------------
   Interacción: botones que se hunden, tarjetas que se levantan
   -------------------------------------------------------------------------- */

:is(button, a) {
    transition-property: color, background-color, border-color, box-shadow, opacity, scale, translate, rotate;
    transition-duration: .18s;
    transition-timing-function: var(--ss-ease);
}

:is(button, a[class*="bg-"], a[class*="border"]):not(:disabled):active {
    scale: .97;
}

/* Tarjetas-enlace (bg-white rounded-xl): se levantan al pasar el mouse. */
.ss-page a.rounded-xl.bg-white:hover,
.ss-page a.rounded-lg.border:hover,
.ss-lift:hover {
    translate: 0 -3px;
    box-shadow: 0 10px 24px -10px rgb(30 34 38 / .22);
}

/* Botones principales: un brillo que cruza al pasar el mouse. */
.ss-page :is(button, a)[class*="bg-blue-600"],
.ss-brillo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ss-page :is(button, a)[class*="bg-blue-600"]::after,
.ss-brillo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%);
    translate: -110% 0;
    transition: translate .6s var(--ss-ease);
    pointer-events: none;
}
.ss-page :is(button, a)[class*="bg-blue-600"]:hover::after,
.ss-brillo:hover::after {
    translate: 110% 0;
}

/* Campos: el anillo de foco aparece suave en vez de saltar. */
:is(input, select, textarea) {
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}

/* --------------------------------------------------------------------------
   Menú lateral: pastilla que se desliza al elemento activo
   -------------------------------------------------------------------------- */

.ss-nav-indicador {
    transition: translate .45s var(--ss-spring), opacity .2s;
}
.ss-nav-indicador::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ss-dorado);
}

.ss-nav-item svg {
    transition: translate .25s var(--ss-ease), scale .25s var(--ss-spring);
}
.ss-nav-item:hover svg {
    translate: 2px 0;
    scale: 1.1;
}

/* --------------------------------------------------------------------------
   Notificaciones
   -------------------------------------------------------------------------- */

.ss-badge { animation: ss-badge .45s var(--ss-spring); }
.ss-wiggle { animation: ss-wiggle 1s ease-in-out .4s; transform-origin: top center; }

/* El ícono sol/luna entra girando al cambiar de tema. */
@keyframes ss-tema {
    from { opacity: 0; rotate: -90deg; scale: .5; }
}
.ss-tema-icono { animation: ss-tema .45s var(--ss-spring); }

/* --------------------------------------------------------------------------
   Esqueletos de carga
   -------------------------------------------------------------------------- */

.ss-skel {
    position: relative;
    overflow: hidden;
    background: #eceef1;
    border-radius: .5rem;
}
.ss-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    translate: -100% 0;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .65), transparent);
    animation: ss-shimmer 1.3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Contadores que suben (CSS puro: Blazor sigue siendo dueño del DOM)
   Uso: <span class="ss-count" style="--ss-to: 12" aria-label="12"></span>
   -------------------------------------------------------------------------- */

@property --ss-n {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}
@keyframes ss-count {
    from { --ss-n: 0; }
}
.ss-count {
    --ss-n: var(--ss-to);
    counter-reset: ss var(--ss-n);
    animation: ss-count 1.1s var(--ss-ease) .15s backwards;
    font-variant-numeric: tabular-nums;
}
.ss-count::after { content: counter(ss); }

/* --------------------------------------------------------------------------
   Login / recuperar contraseña
   -------------------------------------------------------------------------- */

.ss-blob { animation: ss-float 14s ease-in-out infinite alternate; }
.ss-blob-2 { animation-duration: 18s; animation-direction: alternate-reverse; }
.ss-puntos { animation: ss-pan 6s linear infinite; }
.ss-raya { animation: ss-grow-x .8s var(--ss-ease) .5s backwards; transform-origin: left; }

.ss-auth > * { animation: ss-fade-up .6s var(--ss-ease) backwards; }
.ss-auth > :nth-child(2) { animation-delay: .08s; }
.ss-auth > :nth-child(3) { animation-delay: .16s; }
.ss-auth form > * { animation: ss-fade-up .55s var(--ss-ease) backwards; }
.ss-auth form > :nth-child(1) { animation-delay: .22s; }
.ss-auth form > :nth-child(2) { animation-delay: .30s; }
.ss-auth form > :nth-child(3) { animation-delay: .38s; }

.ss-hero > * { animation: ss-fade-up .8s var(--ss-ease) backwards; }
.ss-hero > :nth-child(2) { animation-delay: .15s; }
.ss-hero > :nth-child(3) { animation-delay: .3s; }

.ss-shake { animation: ss-shake .5s ease-in-out; }

/* --------------------------------------------------------------------------
   SweetAlert2 (las clases se asignan en js/ui.js)
   -------------------------------------------------------------------------- */

@keyframes ss-swal-out {
    to { opacity: 0; scale: .95; }
}
.ss-swal-in { animation: ss-modal .4s var(--ss-spring); }
.ss-swal-out { animation: ss-swal-out .15s ease-in forwards; }
.swal2-popup { border-radius: 1rem !important; }
.swal2-container.swal2-backdrop-show { backdrop-filter: blur(3px); }

/* --------------------------------------------------------------------------
   Quien pidió menos movimiento en su sistema, no lo ve.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}