/* ==========================================================================
   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*="ge-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"] [card-transition-name*="ge-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(ge-title-empleados),
html[data-transition-from="menu"]::view-transition-group(ge-title-incidencias),
html[data-transition-from="menu"]::view-transition-group(ge-title-precandidatos),
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(ge-card-comunicados),
html[data-transition-from="menu"]::view-transition-group(ge-card-beneficios),
html[data-transition-from="menu"]::view-transition-group(ge-card-documentos),
html[data-transition-from="menu"]::view-transition-group(ge-card-categorias),
html[data-transition-from="menu"]::view-transition-group(ge-card-informacion),
html[data-transition-from="menu"]::view-transition-group(ge-card-vacaciones),
html[data-transition-from="menu"]::view-transition-group(ge-card-incapacidades),
html[data-transition-from="menu"]::view-transition-group(ge-card-otras-ausencias),
html[data-transition-from="menu"]::view-transition-group(ge-card-soporte-tickets),
html[data-transition-from="menu"]::view-transition-group(ge-card-comentarios),
html[data-transition-from="menu"]::view-transition-group(ge-card-metricas),
html[data-transition-from="menu"]::view-transition-group(ge-card-metricas-comunicado),
html[data-transition-from="menu"]::view-transition-group(ge-card-metricas-beneficio),
html[data-transition-from="menu"]::view-transition-group(ge-card-metricas-documento),
html[data-transition-from="menu"]::view-transition-group(ge-card-empleados),
html[data-transition-from="menu"]::view-transition-group(ge-card-incidencias),
html[data-transition-from="menu"]::view-transition-group(ge-card-precandidatos),
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)) .module-card[data-transition-name="compensaciones-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="compensaciones-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-compensaciones .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="compensaciones-morph-ctn"] {
  view-transition-name: compensaciones-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;
}

/* Transición simétrica de chrome bars exclusivamente hacia/desde el Menú Principal y cambio de empresa */
html[data-transition-from="menu"]:not(:has(.modal-backdrop)):not(:has(.modal.show)) #menu-company-wrapper,
html[data-transition-from="menu"]:not(:has(.modal-backdrop)):not(:has(.modal.show)) #topbar-company-wrapper,
html[data-transition-from="menu"]:not(:has(.modal-backdrop)):not(:has(.modal.show)) #comp-company-wrapper,
html[data-transition-from="menu"]:not(:has(.modal-backdrop)):not(:has(.modal.show)) #portal-user-wrapper,
html[data-transition-from="company-change"]:not(:has(.modal-backdrop)):not(:has(.modal.show)) #menu-company-wrapper,
html[data-transition-from="company-change"]:not(:has(.modal-backdrop)):not(:has(.modal.show)) #topbar-company-wrapper,
html[data-transition-from="company-change"]:not(:has(.modal-backdrop)):not(:has(.modal.show)) #comp-company-wrapper {
  view-transition-name: topbar-company;
}

html[data-transition-from="menu"]:not(:has(.modal-backdrop)):not(:has(.modal.show)) #menu-profile-wrapper,
html[data-transition-from="menu"]:not(:has(.modal-backdrop)):not(:has(.modal.show)) #topbar-profile-wrapper {
  view-transition-name: topbar-profile;
}

html[data-transition-from="menu"]:not(:has(.modal-backdrop)):not(:has(.modal.show)) #menu-notifications-wrapper,
html[data-transition-from="menu"]:not(:has(.modal-backdrop)):not(:has(.modal.show)) #topbar-notifications-wrapper {
  view-transition-name: topbar-notifications;
}

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

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

/* Drawer y pestaña handle de Accesos Directos en Compensaciones */
html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) #ctn_side {
  view-transition-name: drawer-side-panel;
}

html:not([data-transition-from="login"]):not([data-transition-from="logout"]):not(:has(.modal-backdrop)):not(:has(.modal.show)) #btn_panel {
  view-transition-name: drawer-handle-btn;
}

/* ==========================================================================
   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: 480ms;
  animation-timing-function: var(--apple-ease-smooth);
  z-index: 2;
}

::view-transition-group(topbar-company),
::view-transition-group(topbar-profile),
::view-transition-group(topbar-notifications) {
  animation-duration: 480ms;
  animation-timing-function: var(--apple-ease-smooth);
  z-index: 25;
}

/* Transición fluida de chrome bars hacia/desde el Menú */
html[data-transition-from="menu"]::view-transition-old(portal-topbar),
html[data-transition-from="menu"]::view-transition-new(portal-topbar),
::view-transition-old(topbar-company),
::view-transition-new(topbar-company),
::view-transition-old(topbar-profile),
::view-transition-new(topbar-profile),
::view-transition-old(topbar-notifications),
::view-transition-new(topbar-notifications) {
  animation-duration: 480ms;
  animation-timing-function: var(--apple-ease-smooth);
  mix-blend-mode: normal;
}

/* En navegación interna entre pestañas (Portal o Compensaciones), el topbar permanece
   100% estático y opaco (cero parpadeos ni dimming de logos/avatares) mientras la píldora activa se desliza */
html:not([data-transition-from="menu"])::view-transition-old(portal-topbar) {
  animation: none;
  display: none;
}

html:not([data-transition-from="menu"])::view-transition-new(portal-topbar) {
  animation: none;
}

/* Footer Chrome Bar: Estabilidad y capa superior para evitar que las tarjetas morphing lo cubran */
::view-transition-group(portal-footer) {
  animation-duration: 480ms;
  animation-timing-function: var(--apple-ease-smooth);
  z-index: 25;
}

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

/* Drawer y pestaña handle de Accesos Directos (Compensaciones): Estabilidad y capa superior sobre .config-ctn */
::view-transition-group(drawer-side-panel) {
  animation-duration: 480ms;
  animation-timing-function: var(--apple-ease-smooth);
  overflow: visible !important;
  z-index: 22;
}

::view-transition-image-pair(drawer-side-panel) {
  isolation: isolate;
  overflow: visible !important;
  z-index: 22;
}

::view-transition-group(drawer-handle-btn) {
  animation-duration: 480ms;
  animation-timing-function: var(--apple-ease-smooth);
  overflow: visible !important;
  z-index: 23;
}

::view-transition-image-pair(drawer-handle-btn) {
  isolation: isolate;
  overflow: visible !important;
  z-index: 23;
}

/* En navegación interna dentro de Compensaciones, el botón y panel de Accesos permanecen estáticos y nítidos */
html:not([data-transition-from="menu"])::view-transition-old(drawer-handle-btn),
html:not([data-transition-from="menu"])::view-transition-old(drawer-side-panel) {
  animation: none;
  display: none;
}

html:not([data-transition-from="menu"])::view-transition-new(drawer-handle-btn),
html:not([data-transition-from="menu"])::view-transition-new(drawer-side-panel) {
  animation: none;
}

/* Transición suave hacia/desde el Menú Principal */
html[data-transition-from="menu"]::view-transition-old(drawer-handle-btn),
html[data-transition-from="menu"]::view-transition-old(drawer-side-panel) {
  animation-duration: 220ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
  mix-blend-mode: normal;
}

html[data-transition-from="menu"]::view-transition-new(drawer-handle-btn),
html[data-transition-from="menu"]::view-transition-new(drawer-side-panel) {
  animation-duration: 480ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
  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),
::view-transition-group(compensaciones-morph-ctn) {
  animation-duration: 600ms;
  animation-timing-function: var(--apple-ease-smooth);
  overflow: hidden;
  border-radius: var(--border-radius-content, 1.25rem);
  z-index: 6;
}

::view-transition-image-pair(portal-morph-ctn),
::view-transition-image-pair(atencion-morph-ctn),
::view-transition-image-pair(compensaciones-morph-ctn) {
  z-index: 6;
}

/* Asimetría Apple: La vista saliente desvanece suavemente (220ms) */
::view-transition-old(portal-morph-ctn),
::view-transition-old(atencion-morph-ctn),
::view-transition-old(compensaciones-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),
::view-transition-new(compensaciones-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: 580ms;
  animation-timing-function: var(--apple-ease-smooth);
  z-index: 20;
}

::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: 220ms;
  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: 560ms;
  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: 620ms;
  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) {
  animation-duration: 580ms;
  animation-timing-function: var(--apple-ease-smooth);
  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: 240ms;
  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: 560ms;
  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),
::view-transition-group(ge-title-empleados),
::view-transition-group(ge-title-incidencias),
::view-transition-group(ge-title-precandidatos) {
  animation-duration: 580ms;
  animation-timing-function: var(--apple-ease-smooth);
  z-index: 20;
}

/* ==========================================================================
   VIEW TRANSITIONS DE TARJETAS COMPLETAS EN GESTIÓN DE EMPLEADOS (HERO CARD MORPH)
   Morphing y desplazamiento fluido de la tarjeta completa entre Inicio y Vistas Internas
   ========================================================================== */
::view-transition-group(ge-card-comunicados),
::view-transition-group(ge-card-beneficios),
::view-transition-group(ge-card-documentos),
::view-transition-group(ge-card-categorias),
::view-transition-group(ge-card-informacion),
::view-transition-group(ge-card-vacaciones),
::view-transition-group(ge-card-incapacidades),
::view-transition-group(ge-card-otras-ausencias),
::view-transition-group(ge-card-soporte-tickets),
::view-transition-group(ge-card-comentarios),
::view-transition-group(ge-card-metricas),
::view-transition-group(ge-card-metricas-comunicado),
::view-transition-group(ge-card-metricas-beneficio),
::view-transition-group(ge-card-metricas-documento),
::view-transition-group(ge-card-empleados),
::view-transition-group(ge-card-incidencias),
::view-transition-group(ge-card-precandidatos) {
  animation-duration: 620ms;
  animation-timing-function: var(--apple-ease-smooth);
  overflow: hidden;
  border-radius: 1rem;
  z-index: 10;
}

::view-transition-image-pair(ge-card-comunicados),
::view-transition-image-pair(ge-card-beneficios),
::view-transition-image-pair(ge-card-documentos),
::view-transition-image-pair(ge-card-categorias),
::view-transition-image-pair(ge-card-informacion),
::view-transition-image-pair(ge-card-vacaciones),
::view-transition-image-pair(ge-card-incapacidades),
::view-transition-image-pair(ge-card-otras-ausencias),
::view-transition-image-pair(ge-card-soporte-tickets),
::view-transition-image-pair(ge-card-comentarios),
::view-transition-image-pair(ge-card-metricas),
::view-transition-image-pair(ge-card-metricas-comunicado),
::view-transition-image-pair(ge-card-metricas-beneficio),
::view-transition-image-pair(ge-card-metricas-documento),
::view-transition-image-pair(ge-card-empleados),
::view-transition-image-pair(ge-card-incidencias),
::view-transition-image-pair(ge-card-precandidatos) {
  isolation: isolate;
  overflow: hidden;
  border-radius: 1rem;
}

::view-transition-old(ge-card-comunicados),
::view-transition-old(ge-card-beneficios),
::view-transition-old(ge-card-documentos),
::view-transition-old(ge-card-categorias),
::view-transition-old(ge-card-informacion),
::view-transition-old(ge-card-vacaciones),
::view-transition-old(ge-card-incapacidades),
::view-transition-old(ge-card-otras-ausencias),
::view-transition-old(ge-card-soporte-tickets),
::view-transition-old(ge-card-comentarios),
::view-transition-old(ge-card-metricas),
::view-transition-old(ge-card-metricas-comunicado),
::view-transition-old(ge-card-metricas-beneficio),
::view-transition-old(ge-card-metricas-documento),
::view-transition-old(ge-card-empleados),
::view-transition-old(ge-card-incidencias),
::view-transition-old(ge-card-precandidatos) {
  height: 100%;
  width: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  animation-duration: 240ms;
  animation-timing-function: var(--apple-ease-exit);
  animation-fill-mode: both;
  animation-name: vt-fade-out;
  overflow: hidden;
}

::view-transition-new(ge-card-comunicados),
::view-transition-new(ge-card-beneficios),
::view-transition-new(ge-card-documentos),
::view-transition-new(ge-card-categorias),
::view-transition-new(ge-card-informacion),
::view-transition-new(ge-card-vacaciones),
::view-transition-new(ge-card-incapacidades),
::view-transition-new(ge-card-otras-ausencias),
::view-transition-new(ge-card-soporte-tickets),
::view-transition-new(ge-card-comentarios),
::view-transition-new(ge-card-metricas),
::view-transition-new(ge-card-metricas-comunicado),
::view-transition-new(ge-card-metricas-beneficio),
::view-transition-new(ge-card-metricas-documento),
::view-transition-new(ge-card-empleados),
::view-transition-new(ge-card-incidencias),
::view-transition-new(ge-card-precandidatos) {
  height: 100%;
  width: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  animation-duration: 560ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
  overflow: hidden;
}

/* Selección reactiva de la tarjeta de comentarios según el tab activo */
#tab-identificados.active > .card,
#tab-anonimos.active > .card {
  view-transition-name: ge-card-comentarios;
}

::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),
::view-transition-old(ge-title-empleados),
::view-transition-old(ge-title-incidencias),
::view-transition-old(ge-title-precandidatos) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 220ms;
  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),
::view-transition-new(ge-title-empleados),
::view-transition-new(ge-title-incidencias),
::view-transition-new(ge-title-precandidatos) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 560ms;
  animation-timing-function: var(--apple-ease-smooth);
  animation-fill-mode: both;
  animation-name: vt-fade-in;
}

/* Transición suave global de pantalla (Navigation Push) calibrada a 620ms cinematográficos */
::view-transition-group(root) {
  animation-duration: 620ms;
  animation-timing-function: var(--apple-ease-smooth);
}

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

::view-transition-new(root) {
  animation-duration: 560ms;
  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: 480ms;
  animation-timing-function: var(--apple-ease-smooth);
  z-index: 15;
}

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

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

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

::view-transition-old(app-breadcrumb-trail) {
  height: 100%;
  width: 100%;
  object-fit: contain;
  animation-duration: 220ms;
  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: 460ms;
  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: 620ms;
  animation-timing-function: var(--apple-ease-smooth);
  overflow: hidden;
  border-radius: 1rem;
  z-index: 15;
}

::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: 240ms;
  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: 560ms;
  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: 580ms;
  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: 220ms;
  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: 560ms;
  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);
  z-index: 20;
}

::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 !important;
  z-index: 35 !important;
}

::view-transition-image-pair(pe-topbar-active-pill) {
  isolation: isolate;
  overflow: visible !important;
  z-index: 35 !important;
}

::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;
}

/* ==========================================================================
   ANIMACIÓN CINEMÁTICA DE CAMBIO DE EMPRESA (topbar-company & root)
   Metamorfosis sedosa in-place: el logo y nombre se desvanecen con microescala
   y el nuevo logo emerge con nitidez y física Apple SwiftUI
   ========================================================================== */
html[data-transition-from="company-change"]::view-transition-group(topbar-company) {
  animation-duration: 480ms;
  animation-timing-function: var(--apple-ease-smooth);
  z-index: 30;
  overflow: visible !important;
}

html[data-transition-from="company-change"]::view-transition-old(topbar-company) {
  animation: 200ms var(--apple-ease-exit) forwards companyLogoFadeOut;
  mix-blend-mode: normal;
}

html[data-transition-from="company-change"]::view-transition-new(topbar-company) {
  animation: 460ms var(--apple-ease-smooth) forwards companyLogoFadeIn;
  mix-blend-mode: normal;
}

@keyframes companyLogoFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
  to {
    opacity: 0;
    transform: scale(0.90);
    filter: blur(3px);
  }
}

@keyframes companyLogoFadeIn {
  from {
    opacity: 0;
    transform: scale(1.10);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
}

/* Transición suave del contenido de la página durante el cambio de empresa */
html[data-transition-from="company-change"]::view-transition-old(root) {
  animation: 200ms var(--apple-ease-exit) forwards companyContentExit;
}

html[data-transition-from="company-change"]::view-transition-new(root) {
  animation: 440ms var(--apple-ease-smooth) forwards companyContentEnter;
}

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

@keyframes companyContentEnter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Indicador de pulso suave mientras se procesa la llamada al servidor */
.company-switching-pulse {
  pointer-events: none;
  opacity: 0.65;
  transition: opacity 180ms ease;
}

.company-switching-pulse img {
  animation: companyPulseAnim 800ms infinite alternate ease-in-out;
}

@keyframes companyPulseAnim {
  from {
    transform: scale(1);
    opacity: 0.85;
  }
  to {
    transform: scale(0.92);
    opacity: 0.45;
  }
}