/* ==========================================================================
   TRANSICIONES MODERNAS PARA SPA / TURBO DRIVE (TRANSITIONS-SPA.CSS)
   Inspirado en Apple Human Interface Guidelines (HIG), UIKit y SwiftUI.
   Física basada en resortes (critically damped springs) y desaceleración asimétrica.
   ========================================================================== */

/* 1. Constantes de movimiento Apple (HIG Motion Principles) */
:root {
  --apple-ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);       /* SwiftUI .smooth: desaceleración fluida sin oscilación */
  --apple-ease-nav: cubic-bezier(0.25, 0.1, 0.25, 1);        /* iOS UINavigation push: movimiento natural */
  --apple-ease-snappy: cubic-bezier(0.15, 0.85, 0.35, 1.2);   /* SwiftUI .snappy: respuesta viva que frena limpia */
  --apple-ease-exit: cubic-bezier(0.4, 0, 1, 1);             /* Salida asimétrica: abandono ágil */
}

/* Desactivación de View Transitions del navegador en rutas SPA (Cero pantallas blancas) */
@view-transition {
  navigation: none;
}

/* ==========================================================================
   2. KEYFRAMES DE ANIMACIONES DE CONTENEDOR (MICRO Y MACRO MOVIMIENTOS)
   ========================================================================== */

@keyframes spaFadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes spaFadeInRight {
  from {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes spaFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes spaFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes spaFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spaFadeInScale {
  from {
    opacity: 0;
    transform: scale3d(0.98, 0.98, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* ==========================================================================
   3. ANIMACIONES ESPECÍFICAS POR MÓDULO SPA
   ========================================================================== */

/* --- A. Portal de Empleados (Fade-in Left suave tipo iOS navigation) --- */
#app-content main.container-fluid,
#app-content .config-ctn > main,
.portal-empleados-content {
  animation: spaFadeInLeft 280ms var(--apple-ease-smooth) both;
  will-change: opacity, transform;
}

/* --- B. Gestión de Empleados / Atención al Empleado (Elevación sutil tipo modal sheet) --- */
.content-body > .config-ctn > main.container-fluid,
.side-right main.container-fluid {
  animation: spaFadeInUp 260ms var(--apple-ease-smooth) both;
  will-change: opacity, transform;
}

@supports (view-transition-name: none) {
  /* En navegadores con View Transitions, la transición de pantalla la gestiona el motor nativo de forma limpia sin desalinear coordenadas */
  .content-body > .config-ctn > main.container-fluid,
  .side-right main.container-fluid,
  #app-content main.container-fluid,
  #app-content .config-ctn > main,
  .portal-empleados-content {
    animation: none !important;
    transform: none !important;
  }
}

/* --- C. Menú de Gestión (Escala natural Apple) --- */
.menu-gestion-ctn,
.menu-principal-wrapper {
  animation: spaFadeInScale 240ms var(--apple-ease-smooth) both;
  will-change: opacity, transform;
}

/* --- D. Flujo de Autenticación (Login, Restablecer contraseña, Pre-acceso) --- */
.login-h .col-md-5,
.col-login-form,
.auth-form-card {
  animation: spaFadeInRight 280ms var(--apple-ease-smooth) both;
  will-change: opacity, transform;
}

.login-h .tab-pane.active {
  animation: spaFadeIn 200ms ease-out both;
}

/* ==========================================================================
   4. CLASES DE UTILIDAD MODULARES PARA CONTROL MANUAL
   ========================================================================== */

.spa-animate-fade-left {
  animation: spaFadeInLeft 280ms var(--apple-ease-smooth) both !important;
  will-change: opacity, transform;
}

.spa-animate-fade-right {
  animation: spaFadeInRight 280ms var(--apple-ease-smooth) both !important;
  will-change: opacity, transform;
}

.spa-animate-fade-up {
  animation: spaFadeInUp 260ms var(--apple-ease-smooth) both !important;
  will-change: opacity, transform;
}

.spa-animate-fade-down {
  animation: spaFadeInDown 260ms var(--apple-ease-smooth) both !important;
  will-change: opacity, transform;
}

.spa-animate-fade-in {
  animation: spaFadeIn 200ms ease-out both !important;
  will-change: opacity;
}

.spa-animate-scale-in {
  animation: spaFadeInScale 240ms var(--apple-ease-smooth) both !important;
  will-change: opacity, transform;
}

/* ==========================================================================
   5. ACCESIBILIDAD (PREFERS-REDUCED-MOTION - REGLA DE ORO HIG)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   6. VIEW TRANSITIONS MORPHING (APPLE HERO EXPANSION / SHARED ELEMENTS)
   Transición morfológica entre Cards del Menú y .config-ctn.
   NOTA CRÍTICA: Durante la transición de salida de Login (data-transition-from="login"),
   absolutamente NINGÚN elemento puede tener view-transition-name, garantizando
   que toda la página entrante se capture como un bloque monolítico en ::view-transition-new(root)
   y no se desprendan cards flotantes en el centro del viewport.
   ========================================================================== */

/* Supresión total de nombres de transición durante modales, mensajes o salida de login/logout */
html[data-transition-from="login"] *,
html[data-transition-from="login"] *::before,
html[data-transition-from="login"] *::after,
html[data-transition-from="logout"] *,
html[data-transition-from="logout"] *::before,
html[data-transition-from="logout"] *::after,
body.modal-open *,
body.modal-open *::before,
body.modal-open *::after,
html:has(.modal.show) *,
html:has(.modal.show) *::before,
html:has(.modal.show) *::after,
html:has(.modal-backdrop) *,
html:has(.modal-backdrop) *::before,
html:has(.modal-backdrop) *::after,
html:has(.swal2-container) *,
html:has(.swal2-shown) * {
  view-transition-name: none !important;
}

/* Supresión de títulos de tarjetas al navegar desde o hacia el menú de módulos principales.
   Permite que la tarjeta completa (.config-ctn / atencion-morph-ctn / portal-morph-ctn) se expanda
   o encoja fluidamente como una sola unidad orgánica sin que los títulos se desprendan en capas flotantes */
html[data-transition-from="menu"] interactive-card .ic-title,
html[data-transition-from="menu"] interactive-card .ic-link,
html[data-transition-from="menu"] [style*="ge-title-"],
html[data-transition-from="menu"] [style*="pe-title-"],
html[data-transition-from="menu"] [style*="pe-card-"],
html[data-transition-from="menu"] [style*="hero-detail-"],
html[data-transition-from="menu"] [transition-name*="ge-title-"],
html[data-transition-from="menu"] [transition-name*="pe-title-"],
html[data-transition-from="menu"] [card-transition-name*="pe-card-"],
html[data-transition-from="menu"] .ic-title {
  view-transition-name: none !important;
}

html[data-transition-from="menu"]::view-transition-group(ge-title-comunicados),
html[data-transition-from="menu"]::view-transition-group(ge-title-beneficios),
html[data-transition-from="menu"]::view-transition-group(ge-title-documentos),
html[data-transition-from="menu"]::view-transition-group(ge-title-categorias),
html[data-transition-from="menu"]::view-transition-group(ge-title-informacion),
html[data-transition-from="menu"]::view-transition-group(ge-title-vacaciones),
html[data-transition-from="menu"]::view-transition-group(ge-title-incapacidades),
html[data-transition-from="menu"]::view-transition-group(ge-title-otras-ausencias),
html[data-transition-from="menu"]::view-transition-group(ge-title-soporte-tickets),
html[data-transition-from="menu"]::view-transition-group(ge-title-comentarios),
html[data-transition-from="menu"]::view-transition-group(ge-title-metricas),
html[data-transition-from="menu"]::view-transition-group(ge-title-metricas-comunicado),
html[data-transition-from="menu"]::view-transition-group(ge-title-metricas-beneficio),
html[data-transition-from="menu"]::view-transition-group(ge-title-metricas-documento),
html[data-transition-from="menu"]::view-transition-group(pe-title-datos-personales),
html[data-transition-from="menu"]::view-transition-group(pe-title-carne-digital),
html[data-transition-from="menu"]::view-transition-group(pe-title-expediente-laboral),
html[data-transition-from="menu"]::view-transition-group(pe-title-boletas-pago),
html[data-transition-from="menu"]::view-transition-group(pe-title-constancias-laborales),
html[data-transition-from="menu"]::view-transition-group(pe-title-constancias-salariales),
html[data-transition-from="menu"]::view-transition-group(pe-title-vacaciones),
html[data-transition-from="menu"]::view-transition-group(pe-title-incapacidades),
html[data-transition-from="menu"]::view-transition-group(pe-title-otras-ausencias),
html[data-transition-from="menu"]::view-transition-group(pe-title-tickets),
html[data-transition-from="menu"]::view-transition-group(pe-title-gestion-equipo),
html[data-transition-from="menu"]::view-transition-group(pe-title-organigrama),
html[data-transition-from="menu"]::view-transition-group(pe-title-documentos),
html[data-transition-from="menu"]::view-transition-group(pe-title-comunicados),
html[data-transition-from="menu"]::view-transition-group(pe-title-comunicados-destacados),
html[data-transition-from="menu"]::view-transition-group(pe-title-beneficios),
html[data-transition-from="menu"]::view-transition-group(pe-card-datos-personales),
html[data-transition-from="menu"]::view-transition-group(pe-card-carne-digital),
html[data-transition-from="menu"]::view-transition-group(pe-card-expediente-laboral),
html[data-transition-from="menu"]::view-transition-group(pe-card-boletas-pago),
html[data-transition-from="menu"]::view-transition-group(pe-card-constancias-laborales),
html[data-transition-from="menu"]::view-transition-group(pe-card-constancias-salariales),
html[data-transition-from="menu"]::view-transition-group(pe-card-vacaciones),
html[data-transition-from="menu"]::view-transition-group(pe-card-incapacidades),
html[data-transition-from="menu"]::view-transition-group(pe-card-otras-ausencias),
html[data-transition-from="menu"]::view-transition-group(pe-card-tickets),
html[data-transition-from="menu"]::view-transition-group(pe-card-gestion-equipo),
html[data-transition-from="menu"]::view-transition-group(pe-card-organigrama),
html[data-transition-from="menu"]::view-transition-group(hero-detail-card),
html[data-transition-from="menu"]::view-transition-group(hero-detail-title) {
  animation: none !important;
  display: none !important;
  opacity: 0 !important;
}

/* Asignación de identificadores de transición exclusivamente en navegación interna (NO desde login/logout ni con modales) */
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) .module-card[data-transition-name="portal-morph-ctn"],
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) card-modulo[transition-name="portal-morph-ctn"] .module-card,
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) #app-content .config-ctn,
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) .config-ctn[data-transition-name="portal-morph-ctn"] {
  view-transition-name: portal-morph-ctn;
}

html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) .module-card[data-transition-name="atencion-morph-ctn"],
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) card-modulo[transition-name="atencion-morph-ctn"] .module-card,
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) #app-content-atencion .config-ctn,
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) .side-right .config-ctn,
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) .config-ctn[data-transition-name="atencion-morph-ctn"] {
  view-transition-name: atencion-morph-ctn;
}

html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) #app-topbar {
  view-transition-name: portal-topbar;
}

/* Indicador y viñeta activa exclusivo de Portal del Empleado (translación fluida entre pestañas) */
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not([data-transition-from="menu"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) #app-topbar.topbar-portal-empleado .navpills-container > .navpills-item.active {
  view-transition-name: pe-topbar-active-pill;
}

/* ==========================================================================
   VIEW TRANSITIONS DE ELEMENTOS COMPARTIDOS EN AUTENTICACIÓN (HERO & BUTTON MORPH)
   Flujo continuo: Login <-> Pre-acceso <-> Olvidé mi contraseña <-> Códigos
   ========================================================================== */
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) #auth-brand-cover,
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) .col-img-login {
  view-transition-name: auth-brand-cover;
}

html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) .img-logo-login {
  view-transition-name: auth-logo;
}

html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) .auth-action-btn,
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) #btn-login-submit,
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) #btn-preacceso-submit,
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) #btn-reset-req-submit,
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) #btn-verify-submit,
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) #btn-confirm-submit {
  view-transition-name: auth-action-btn;
}

html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) .auth-form-stage {
  view-transition-name: auth-form-stage;
}

/* Supresión absoluta de capas aisladas de auth durante el swipe de Deck (Login/Logout) */
html[data-transition-from="login"]::view-transition-group(auth-brand-cover),
html[data-transition-from="login"]::view-transition-group(auth-logo),
html[data-transition-from="login"]::view-transition-group(auth-action-btn),
html[data-transition-from="login"]::view-transition-group(auth-form-stage),
html[data-transition-from="logout"]::view-transition-group(auth-brand-cover),
html[data-transition-from="logout"]::view-transition-group(auth-logo),
html[data-transition-from="logout"]::view-transition-group(auth-action-btn),
html[data-transition-from="logout"]::view-transition-group(auth-form-stage) {
  display: none !important;
  animation: none !important;
}

/* Columna de Marca (Ilustración izquierda): Fija e inmutable entre pantallas de auth */
::view-transition-group(auth-brand-cover) {
  animation: none !important;
  transform: none !important;
}
::view-transition-old(auth-brand-cover),
::view-transition-new(auth-brand-cover) {
  animation: none !important;
  opacity: 1 !important;
}

/* Logotipo: Transición fija en posición superior */
::view-transition-group(auth-logo) {
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
}
::view-transition-old(auth-logo),
::view-transition-new(auth-logo) {
  animation: none !important;
  mix-blend-mode: normal !important;
}

/* Botón de acción principal: Morphing de botón fluido tipo iOS */
::view-transition-group(auth-action-btn) {
  animation-duration: 420ms;
  animation-timing-function: var(--apple-ease-smooth);
  border-radius: 0.75rem;
  overflow: hidden;
}
::view-transition-old(auth-action-btn) {
  animation-duration: 180ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
}
::view-transition-new(auth-action-btn) {
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
}

/* Contenedor del formulario: Interpolación de altura/posicionamiento suave */
::view-transition-group(auth-form-stage) {
  animation-duration: 400ms;
  animation-timing-function: var(--apple-ease-smooth);
}
::view-transition-old(auth-form-stage) {
  animation-duration: 180ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
}
::view-transition-new(auth-form-stage) {
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
}

/* Microanimación de Spinner de Carga para Botones */
.ui-btn-spinner {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  animation: uiBtnSpin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes uiBtnSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Topbar: Estabilidad absoluta tipo iOS navigation bar */
::view-transition-group(portal-topbar) {
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
}

::view-transition-old(portal-topbar),
::view-transition-new(portal-topbar) {
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
  mix-blend-mode: normal;
}

/* Interpolación de geometría (bounding-box): Curva SwiftUI .smooth (600ms más pausada y suave) */
::view-transition-group(portal-morph-ctn),
::view-transition-group(atencion-morph-ctn) {
  animation-duration: 600ms;
  animation-timing-function: var(--apple-ease-smooth);
  overflow: hidden;
  border-radius: var(--border-radius-content, 1.25rem);
}

/* Asimetría Apple: La vista saliente desvanece suavemente (220ms) */
::view-transition-old(portal-morph-ctn),
::view-transition-old(atencion-morph-ctn) {
  height: 100%;
  object-fit: cover;
  animation-duration: 220ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
}

/* La vista entrante toma protagonismo y desacelera con calma y suavidad (520ms) */
::view-transition-new(portal-morph-ctn),
::view-transition-new(atencion-morph-ctn) {
  height: 100%;
  object-fit: cover;
  animation-duration: 520ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
}

/* ==========================================================================
   VIEW TRANSITIONS DE TÍTULOS EN PORTAL DE EMPLEADOS (HERO TITLE MORPH)
   Transición morfológica del título de interactive-card al título principal de la vista
   ========================================================================== */
::view-transition-group(pe-title-datos-personales),
::view-transition-group(pe-title-carne-digital),
::view-transition-group(pe-title-expediente-laboral),
::view-transition-group(pe-title-boletas-pago),
::view-transition-group(pe-title-constancias-laborales),
::view-transition-group(pe-title-constancias-salariales),
::view-transition-group(pe-title-vacaciones),
::view-transition-group(pe-title-incapacidades),
::view-transition-group(pe-title-otras-ausencias),
::view-transition-group(pe-title-tickets),
::view-transition-group(pe-title-gestion-equipo),
::view-transition-group(pe-title-organigrama),
::view-transition-group(pe-title-documentos),
::view-transition-group(pe-title-comunicados),
::view-transition-group(pe-title-comunicados-destacados),
::view-transition-group(pe-title-beneficios) {
  animation-duration: 420ms;
  animation-timing-function: var(--apple-ease-smooth);
}

::view-transition-old(pe-title-datos-personales),
::view-transition-old(pe-title-carne-digital),
::view-transition-old(pe-title-expediente-laboral),
::view-transition-old(pe-title-boletas-pago),
::view-transition-old(pe-title-constancias-laborales),
::view-transition-old(pe-title-constancias-salariales),
::view-transition-old(pe-title-vacaciones),
::view-transition-old(pe-title-incapacidades),
::view-transition-old(pe-title-otras-ausencias),
::view-transition-old(pe-title-tickets),
::view-transition-old(pe-title-gestion-equipo),
::view-transition-old(pe-title-organigrama),
::view-transition-old(pe-title-documentos),
::view-transition-old(pe-title-comunicados),
::view-transition-old(pe-title-comunicados-destacados),
::view-transition-old(pe-title-beneficios) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 180ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
}

::view-transition-new(pe-title-datos-personales),
::view-transition-new(pe-title-carne-digital),
::view-transition-new(pe-title-expediente-laboral),
::view-transition-new(pe-title-boletas-pago),
::view-transition-new(pe-title-constancias-laborales),
::view-transition-new(pe-title-constancias-salariales),
::view-transition-new(pe-title-vacaciones),
::view-transition-new(pe-title-incapacidades),
::view-transition-new(pe-title-otras-ausencias),
::view-transition-new(pe-title-tickets),
::view-transition-new(pe-title-gestion-equipo),
::view-transition-new(pe-title-organigrama),
::view-transition-new(pe-title-documentos),
::view-transition-new(pe-title-comunicados),
::view-transition-new(pe-title-comunicados-destacados),
::view-transition-new(pe-title-beneficios) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
}

/* ==========================================================================
   VIEW TRANSITIONS DE TARJETAS COMPLETAS EN PORTAL DE EMPLEADOS (HERO CARD MORPH)
   Morphing y desplazamiento fluido de la tarjeta completa entre Inicio y Mis Gestiones
   ========================================================================== */
::view-transition-group(pe-card-datos-personales),
::view-transition-group(pe-card-carne-digital),
::view-transition-group(pe-card-expediente-laboral),
::view-transition-group(pe-card-boletas-pago),
::view-transition-group(pe-card-constancias-laborales),
::view-transition-group(pe-card-constancias-salariales),
::view-transition-group(pe-card-vacaciones),
::view-transition-group(pe-card-incapacidades),
::view-transition-group(pe-card-otras-ausencias),
::view-transition-group(pe-card-tickets),
::view-transition-group(pe-card-gestion-equipo),
::view-transition-group(pe-card-organigrama) {
  animation-duration: 460ms;
  animation-timing-function: var(--apple-ease-smooth);
  overflow: hidden;
  border-radius: 1rem;
  z-index: 10;
}

::view-transition-image-pair(pe-card-datos-personales),
::view-transition-image-pair(pe-card-carne-digital),
::view-transition-image-pair(pe-card-expediente-laboral),
::view-transition-image-pair(pe-card-boletas-pago),
::view-transition-image-pair(pe-card-constancias-laborales),
::view-transition-image-pair(pe-card-constancias-salariales),
::view-transition-image-pair(pe-card-vacaciones),
::view-transition-image-pair(pe-card-incapacidades),
::view-transition-image-pair(pe-card-otras-ausencias),
::view-transition-image-pair(pe-card-tickets),
::view-transition-image-pair(pe-card-gestion-equipo),
::view-transition-image-pair(pe-card-organigrama) {
  isolation: isolate;
  overflow: hidden;
  border-radius: 1rem;
}

::view-transition-group(pe-title-datos-personales),
::view-transition-group(pe-title-carne-digital),
::view-transition-group(pe-title-expediente-laboral),
::view-transition-group(pe-title-boletas-pago),
::view-transition-group(pe-title-constancias-laborales),
::view-transition-group(pe-title-constancias-salariales),
::view-transition-group(pe-title-vacaciones),
::view-transition-group(pe-title-incapacidades),
::view-transition-group(pe-title-otras-ausencias),
::view-transition-group(pe-title-tickets),
::view-transition-group(pe-title-gestion-equipo),
::view-transition-group(pe-title-organigrama),
::view-transition-group(pe-title-documentos),
::view-transition-group(pe-title-comunicados),
::view-transition-group(pe-title-comunicados-destacados),
::view-transition-group(pe-title-beneficios) {
  z-index: 20;
}

::view-transition-old(pe-card-datos-personales),
::view-transition-old(pe-card-carne-digital),
::view-transition-old(pe-card-expediente-laboral),
::view-transition-old(pe-card-boletas-pago),
::view-transition-old(pe-card-constancias-laborales),
::view-transition-old(pe-card-constancias-salariales),
::view-transition-old(pe-card-vacaciones),
::view-transition-old(pe-card-incapacidades),
::view-transition-old(pe-card-otras-ausencias),
::view-transition-old(pe-card-tickets),
::view-transition-old(pe-card-gestion-equipo),
::view-transition-old(pe-card-organigrama) {
  height: 100%;
  width: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  animation-duration: 200ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
  overflow: hidden;
}

::view-transition-new(pe-card-datos-personales),
::view-transition-new(pe-card-carne-digital),
::view-transition-new(pe-card-expediente-laboral),
::view-transition-new(pe-card-boletas-pago),
::view-transition-new(pe-card-constancias-laborales),
::view-transition-new(pe-card-constancias-salariales),
::view-transition-new(pe-card-vacaciones),
::view-transition-new(pe-card-incapacidades),
::view-transition-new(pe-card-otras-ausencias),
::view-transition-new(pe-card-tickets),
::view-transition-new(pe-card-gestion-equipo),
::view-transition-new(pe-card-organigrama) {
  height: 100%;
  width: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  animation-duration: 420ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
  overflow: hidden;
}

/* ==========================================================================
   VIEW TRANSITIONS DE TÍTULOS EN GESTIÓN DE EMPLEADOS (HERO TITLE MORPH)
   Transición morfológica del título de interactive-card al título principal de la vista
   ========================================================================== */
::view-transition-group(ge-title-comunicados),
::view-transition-group(ge-title-beneficios),
::view-transition-group(ge-title-documentos),
::view-transition-group(ge-title-categorias),
::view-transition-group(ge-title-informacion),
::view-transition-group(ge-title-vacaciones),
::view-transition-group(ge-title-incapacidades),
::view-transition-group(ge-title-otras-ausencias),
::view-transition-group(ge-title-soporte-tickets),
::view-transition-group(ge-title-comentarios),
::view-transition-group(ge-title-metricas),
::view-transition-group(ge-title-metricas-comunicado),
::view-transition-group(ge-title-metricas-beneficio),
::view-transition-group(ge-title-metricas-documento) {
  animation-duration: 420ms;
  animation-timing-function: var(--apple-ease-smooth);
}

::view-transition-old(ge-title-comunicados),
::view-transition-old(ge-title-beneficios),
::view-transition-old(ge-title-documentos),
::view-transition-old(ge-title-categorias),
::view-transition-old(ge-title-informacion),
::view-transition-old(ge-title-vacaciones),
::view-transition-old(ge-title-incapacidades),
::view-transition-old(ge-title-otras-ausencias),
::view-transition-old(ge-title-soporte-tickets),
::view-transition-old(ge-title-comentarios),
::view-transition-old(ge-title-metricas),
::view-transition-old(ge-title-metricas-comunicado),
::view-transition-old(ge-title-metricas-beneficio),
::view-transition-old(ge-title-metricas-documento) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 180ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
}

::view-transition-new(ge-title-comunicados),
::view-transition-new(ge-title-beneficios),
::view-transition-new(ge-title-documentos),
::view-transition-new(ge-title-categorias),
::view-transition-new(ge-title-informacion),
::view-transition-new(ge-title-vacaciones),
::view-transition-new(ge-title-incapacidades),
::view-transition-new(ge-title-otras-ausencias),
::view-transition-new(ge-title-soporte-tickets),
::view-transition-new(ge-title-comentarios),
::view-transition-new(ge-title-metricas),
::view-transition-new(ge-title-metricas-comunicado),
::view-transition-new(ge-title-metricas-beneficio),
::view-transition-new(ge-title-metricas-documento) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
}

/* Transición suave global de pantalla (Navigation Push) */
::view-transition-group(root) {
  animation-duration: 420ms;
  animation-timing-function: var(--apple-ease-nav);
}

::view-transition-old(root) {
  animation-duration: 200ms;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
  animation-name: vt-fade-out;
}

::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
}

@keyframes vt-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   7. TRANSICIÓN CINEMÁTICA AL SALIR DEL LOGIN (APPLE DECK / CARD SWIPE)
   Movimiento continuo con momentum fluido: Zoom out continuo -> Barrido -> Expansión.
   Duración altamente cinematográfica calibrada a 2400ms.
   ========================================================================== */

html[data-transition-from="login"] {
  overflow-x: hidden !important;
}

html[data-transition-from="login"]::view-transition {
  background: #0b1a28 !important; /* Escenario oscuro Apple detrás del deck */
}

html[data-transition-from="login"]::view-transition-group(root) {
  animation: none !important;
  transform: none !important;
}

html[data-transition-from="login"]::view-transition-image-pair(root) {
  isolation: isolate;
  overflow: visible !important;
}

html[data-transition-from="login"]::view-transition-old(root) {
  animation: 2400ms var(--apple-ease-smooth) both vtDeckCardExit !important;
  z-index: 1 !important;
  overflow: hidden !important;
  transform-origin: center center !important;
  box-sizing: border-box !important;
}

html[data-transition-from="login"]::view-transition-new(root) {
  animation: 2400ms var(--apple-ease-smooth) both vtDeckCardEnter !important;
  z-index: 2 !important;
  overflow: hidden !important;
  transform-origin: center center !important;
  box-sizing: border-box !important;
}

@keyframes vtDeckCardExit {
  /* Fase 1: Mini Zoom Out pausado convirtiendo la página de login en Card (0% - 32%) */
  0% {
    transform: scale(1) translate3d(0, 0, 0);
    border-radius: 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    opacity: 1;
    filter: brightness(1);
  }
  32% {
    transform: scale(0.82) translate3d(0, 0, 0);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    opacity: 1;
    filter: brightness(0.96);
  }
  /* Fase 2: Desplazamiento pausado, majestuoso y fluido hacia la IZQUIERDA (-110vw) (32% - 76%) */
  76% {
    transform: scale(0.82) translate3d(-110vw, 0, 0);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    opacity: 0.15;
    filter: brightness(0.8);
  }
  100% {
    transform: scale(0.82) translate3d(-110vw, 0, 0);
    border-radius: 28px;
    opacity: 0;
  }
}

@keyframes vtDeckCardEnter {
  /* Fase 1: Espera a la DERECHA fuera del viewport (0% - 22%) */
  0% {
    transform: translate3d(110vw, 0, 0) scale(0.82);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    opacity: 0;
    filter: brightness(0.8);
  }
  22% {
    transform: translate3d(110vw, 0, 0) scale(0.82);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    opacity: 1;
    filter: brightness(0.94);
  }
  /* Fase 2: Se desliza al centro del viewport como card con zoom reducido (22% - 68%) */
  68% {
    transform: translate3d(0, 0, 0) scale(0.82);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    opacity: 1;
    filter: brightness(0.98);
  }
  /* Fase 3: Expansión suave y majestuosa hasta tamaño completo (68% - 100%) */
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    opacity: 1;
    filter: brightness(1);
  }
}

/* ==========================================================================
   8. TRANSICIÓN CINEMÁTICA AL CERRAR SESIÓN (APPLE DECK / LOGOUT CARD SWIPE)
   Dirección inversa simétrica: La aplicación se compacta en Card y se desliza hacia la DERECHA (+110vw),
   mientras que la pantalla de autenticación entra desde la IZQUIERDA (-110vw -> centro) y se expande.
   Duración calibrada a 2400ms.
   ========================================================================== */

html[data-transition-from="logout"] {
  overflow-x: hidden !important;
}

html[data-transition-from="logout"]::view-transition {
  background: #0b1a28 !important; /* Escenario oscuro Apple detrás del deck */
}

html[data-transition-from="logout"]::view-transition-group(root) {
  animation: none !important;
  transform: none !important;
}

html[data-transition-from="logout"]::view-transition-image-pair(root) {
  isolation: isolate;
  overflow: visible !important;
}

html[data-transition-from="logout"]::view-transition-old(root) {
  animation: 2400ms var(--apple-ease-smooth) both vtDeckCardLogoutExit !important;
  z-index: 1 !important;
  overflow: hidden !important;
  transform-origin: center center !important;
  box-sizing: border-box !important;
}

html[data-transition-from="logout"]::view-transition-new(root) {
  animation: 2400ms var(--apple-ease-smooth) both vtDeckCardLogoutEnter !important;
  z-index: 2 !important;
  overflow: hidden !important;
  transform-origin: center center !important;
  box-sizing: border-box !important;
}

@keyframes vtDeckCardLogoutExit {
  /* Fase 1: Mini Zoom Out pausado convirtiendo la página actual en Card (0% - 32%) */
  0% {
    transform: scale(1) translate3d(0, 0, 0);
    border-radius: 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    opacity: 1;
    filter: brightness(1);
  }
  32% {
    transform: scale(0.82) translate3d(0, 0, 0);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    opacity: 1;
    filter: brightness(0.96);
  }
  /* Fase 2: Desplazamiento pausado y majestuoso hacia la DERECHA (+110vw) (32% - 76%) */
  76% {
    transform: scale(0.82) translate3d(110vw, 0, 0);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    opacity: 0.15;
    filter: brightness(0.8);
  }
  100% {
    transform: scale(0.82) translate3d(110vw, 0, 0);
    border-radius: 28px;
    opacity: 0;
  }
}

@keyframes vtDeckCardLogoutEnter {
  /* Fase 1: Espera a la IZQUIERDA fuera del viewport (-110vw) (0% - 22%) */
  0% {
    transform: translate3d(-110vw, 0, 0) scale(0.82);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    opacity: 0;
    filter: brightness(0.8);
  }
  22% {
    transform: translate3d(-110vw, 0, 0) scale(0.82);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    opacity: 1;
    filter: brightness(0.94);
  }
  /* Fase 2: Se desliza desde la izquierda hacia el centro como card con zoom reducido (22% - 68%) */
  68% {
    transform: translate3d(0, 0, 0) scale(0.82);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    opacity: 1;
    filter: brightness(0.98);
  }
  /* Fase 3: Expansión suave y majestuosa hasta tamaño completo (68% - 100%) */
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    opacity: 1;
    filter: brightness(1);
  }
}

/* ==========================================================================
   8. VIEW TRANSITIONS DE NAVEGACIÓN Y BREADCRUMB (PERSISTENCIA Y ESTABILIDAD)
   ========================================================================== */
nav[aria-label="breadcrumb"] > div > a:first-child,
nav[aria-label="breadcrumb"] a.align-self-start,
.app-nav-back {
  view-transition-name: app-nav-back;
  width: fit-content;
}

nav[aria-label="breadcrumb"] .text-secondary.d-flex.align-items-center.gap-2,
.app-breadcrumb-trail {
  view-transition-name: app-breadcrumb-trail;
}

::view-transition-group(app-nav-back) {
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
}

::view-transition-old(app-nav-back),
::view-transition-new(app-nav-back) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 220ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
}

::view-transition-group(app-breadcrumb-trail) {
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
}

::view-transition-old(app-breadcrumb-trail) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 160ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
}

::view-transition-new(app-breadcrumb-trail) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 340ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
}

/* ==========================================================================
   9. VIEW TRANSITIONS DE AVATAR DE PERFIL (PORTAL DE EMPLEADOS)
   ========================================================================== */
::view-transition-group(pe-user-avatar) {
  animation-duration: 420ms;
  animation-timing-function: var(--apple-ease-smooth);
}

::view-transition-old(pe-user-avatar),
::view-transition-new(pe-user-avatar) {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 9999px;
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
}

/* ==========================================================================
   10. VIEW TRANSITIONS LISTADO A DETALLE (HERO DETAIL MORPHING)
   ========================================================================== */
::view-transition-group(hero-detail-card) {
  animation-duration: 460ms;
  animation-timing-function: var(--apple-ease-smooth);
  overflow: hidden;
  border-radius: 1rem;
  z-index: 10;
}

::view-transition-image-pair(hero-detail-card) {
  isolation: isolate;
  overflow: hidden;
  border-radius: 1rem;
}

::view-transition-old(hero-detail-card) {
  height: 100%;
  width: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  animation-duration: 200ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
  overflow: hidden;
}

::view-transition-new(hero-detail-card) {
  height: 100%;
  width: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  animation-duration: 420ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
  overflow: hidden;
}

::view-transition-group(hero-detail-title) {
  animation-duration: 420ms;
  animation-timing-function: var(--apple-ease-smooth);
  z-index: 20;
}

::view-transition-old(hero-detail-title) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 180ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
}

::view-transition-new(hero-detail-title) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
}

ui-card-article,
ui-card-document {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* ==========================================================================
   11. VIEW TRANSITIONS DE BOTÓN DE ACCIÓN PRIMARIA (FAB / NUEVO -> GUARDAR)
   ========================================================================== */
::view-transition-group(action-primary-btn) {
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
}

::view-transition-old(action-primary-btn) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 160ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
}

::view-transition-new(action-primary-btn) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 340ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
}

/* ==========================================================================
   12. VIEW TRANSITIONS: INDICADOR / VIÑETA ACTIVA DEL TOPBAR (PORTAL DE EMPLEADOS)
   Morphing deslizante con físicas SwiftUI .smooth exclusivo para Portal del Empleado.
   Traslada suavemente el remarcado y la viñeta inferior entre pestañas de navegación.
   ========================================================================== */
::view-transition-group(pe-topbar-active-pill) {
  animation-duration: 380ms;
  animation-timing-function: var(--apple-ease-smooth);
  overflow: visible;
}

::view-transition-image-pair(pe-topbar-active-pill) {
  isolation: isolate;
  overflow: visible;
}

::view-transition-old(pe-topbar-active-pill) {
  height: 100%;
  width: 100%;
  mix-blend-mode: normal;
  animation-duration: 180ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
  overflow: visible;
}

::view-transition-new(pe-topbar-active-pill) {
  height: 100%;
  width: 100%;
  mix-blend-mode: normal;
  animation-duration: 360ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
  overflow: visible;
}