/* ── Tokens de diseño — Intranet Transworld (rediseño) ── */

:root {
  color-scheme: light;

  /* Tipografía */
  --font-sans: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Paleta corporativa */
  --corp-blue: #0f4c81;
  --corp-blue-light: #2a6ba8;
  --corp-blue-dark: #0b3a63;
  --corp-green: #a6d84a;
  --corp-green-dark: #5c8f1d;
  --corp-green-muted: rgba(166, 216, 74, 0.16);

  /* Alias con la nomenclatura del diseño (misma paleta, otro nombre) */
  --brand: var(--corp-blue);
  --brand-deep: var(--corp-blue-dark);
  --brand-soft: #e8f0f8;
  --green: var(--corp-green);
  --green-deep: var(--corp-green-dark);
  --green-soft: #f0f8dd;
  /* Verde para texto pequeño sobre --green-soft: --green-deep se queda en 3.5:1
     y no llega al mínimo AA. */
  --green-ink: #3d5f12;
  --ink: #0d1f33;
  --muted: #51637a;
  --subtle: #8494a7;
  --surface2: #eef2f6;
  --border2: #d3dce6;
  --nav-bg: rgba(11, 58, 99, 0.88);

  /* Superficies base — tarjetas planas, no glassmorphism */
  --color-bg: #f2f5fa;
  --color-bg-image-opacity: 0;
  --color-surface: #ffffff;
  --color-surface-muted: #eef2f6;
  --color-surface-elevated: #ffffff;
  --color-border: #e3e9f0;
  --color-border-strong: #d3dce6;
  --color-text: #0d1f33;
  --color-text-muted: #51637a;
  --color-text-subtle: #8494a7;
  --color-heading: #0b3a63;
  --color-link: #0f4c81;
  --color-input-bg: #ffffff;
  --color-input-text: #0d1f33;
  --color-overlay: rgba(13, 31, 51, 0.55);

  /* Superficies "glass" — mantenidas casi opacas para el look plano nuevo;
     los componentes que aún usan backdrop-filter (header, login) siguen viéndose bien. */
  --glass-bg: rgba(255, 255, 255, 0.94);
  --glass-bg-strong: #ffffff;
  --glass-bg-gradient: linear-gradient(145deg, #ffffff 0%, #fbfcfe 100%);
  --glass-blur-filter: blur(12px) saturate(1.15);
  --glass-bg-dark: rgba(11, 36, 64, 0.82);
  --glass-border: #e3e9f0;
  --glass-border-outer: rgba(15, 76, 129, 0.06);
  --glass-border-subtle: rgba(255, 255, 255, 0.25);
  --glass-blur: 12px;
  --glass-blur-strong: 18px;
  --glass-radius: 16px;
  --glass-radius-sm: 12px;
  --glass-shadow: 0 1px 2px rgba(13, 31, 51, 0.05), 0 4px 16px rgba(13, 31, 51, 0.05);
  --glass-shadow-lg: 0 4px 8px rgba(13, 31, 51, 0.06), 0 16px 40px rgba(13, 31, 51, 0.12);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Fondo global — dos halos corporativos muy tenues sobre un degradado frío.
     Va fijo al viewport (ver la regla de body), así que da profundidad de app
     sin moverse con el scroll ni competir con las tarjetas, que son blancas. */
  --app-background:
    radial-gradient(880px 520px at 6% -10%, rgba(15, 76, 129, 0.10), transparent 62%),
    radial-gradient(760px 460px at 98% 0%, rgba(166, 216, 74, 0.13), transparent 58%),
    linear-gradient(180deg, #f8fafd 0%, #eef2f8 48%, #e8edf5 100%);
  --bg-gradient: none;
  --bg-gradient-glow: none;

  /* Sombras */
  --shadow: var(--glass-shadow);
  --shadow-lg: var(--glass-shadow-lg);
  --shadow-card: 0 2px 8px rgba(13, 31, 51, 0.05), 0 8px 22px rgba(13, 31, 51, 0.06);
  --shadow-card-lg: 0 8px 20px rgba(13, 31, 51, 0.08), 0 16px 34px rgba(13, 31, 51, 0.08);

  /* Indicadores de estado */
  --up: #3c9a5f;
  --down: #d05c5c;
  --status-up: #3c9a5f;
  --status-down: #d05c5c;
  --status-equal: #8494a7;
}

/* ── Fondo global (intranet; login conserva blanco propio) ── */
html {
  min-height: 100%;
}

body:not(.login-split-page) {
  background-color: var(--color-bg) !important;
  background-image: var(--app-background) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  min-height: 100vh;
}

main {
  background: transparent !important;
}

/* ── Utilidad glass ── */
.glass-card {
  background: var(--glass-bg-gradient);
  backdrop-filter: var(--glass-blur-filter);
  -webkit-backdrop-filter: var(--glass-blur-filter);
  border: 1px solid var(--glass-border);
  outline: 1px solid var(--glass-border-outer);
  outline-offset: -1px;
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-card);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background: var(--glass-bg-strong);
  }
}

.glass-card--strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
}

.glass-card--dark {
  background: var(--glass-bg-dark);
  border-color: var(--glass-border-subtle);
  color: #ffffff;
}

/* ── Velo de carga ────────────────────────────────────────────────────────────
   Las vistas traen sus propios <link> en el cuerpo (personal.css, gastos.css…),
   y hasta que llegan el navegador ya pintó la cabecera con el CSS del layout:
   ese es el destello de página "sin CSS". El velo la tapa hasta que el
   documento está listo. */

.cargando-pagina {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* El mismo fondo que el body: si el velo fuera plano se vería un salto de
     color justo al desaparecer. */
  background-color: var(--color-bg, #f2f5fa);
  background-image: var(--app-background);
  background-size: cover;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cargando-pagina__spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--color-border-strong, #d3dce6);
  border-top-color: var(--brand, #0f4c81);
  animation: cargando-giro 0.7s linear infinite;
}

@keyframes cargando-giro {
  to { transform: rotate(360deg); }
}

body.login-split-page .cargando-pagina {
  background: #ffffff;
}

/* La clase la pone el script del layout en cuanto el documento está listo. */
html.pagina-lista .cargando-pagina {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* La regla global de movimiento reducido (más abajo) congela cualquier
   animación; un indicador de carga congelado parece un error, así que aquí gira
   igual, sólo que despacio. */
@media (prefers-reduced-motion: reduce) {
  .cargando-pagina__spinner {
    animation-duration: 1.8s !important;
    animation-iteration-count: infinite !important;
  }

  .cargando-pagina {
    transition: none;
  }
}

/* ── Utilidad: texto solo para lectores de pantalla ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Cursos / Academy ── */
.btn-cursos {
  background: var(--glass-bg-strong);
  color: var(--color-text);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.btn-cursos:hover {
  background: var(--color-surface-elevated);
}

.cursos-sidebar {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-card-lg) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.cursos-sidebar .sidebar-brand {
  border-bottom-color: var(--color-border) !important;
}

.cursos-sidebar .sidebar-nav a {
  color: var(--color-text-muted) !important;
}

.cursos-sidebar .sidebar-nav a:hover {
  background: var(--color-surface-muted) !important;
  color: var(--color-heading) !important;
}

.cursos-sidebar .sidebar-nav a.active {
  background: var(--corp-green-muted) !important;
  color: var(--color-heading) !important;
}

.cursos-sidebar .sidebar-buttons {
  border-top-color: var(--color-border) !important;
}

.cursos-sidebar .btn-volver-intranet {
  background: var(--color-surface-muted) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border-strong) !important;
}

.cursos-sidebar .btn-volver-intranet:hover {
  background: var(--color-surface-elevated) !important;
}

.cursos-welcome .welcome-title {
  color: var(--color-heading) !important;
}

.cursos-welcome .welcome-text {
  color: var(--color-text) !important;
}

.cursos-welcome .ppt-frame {
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-card-lg) !important;
}

/* ── Procesos — tarjetas ── */
.card-opcion-exec,
.folder-card-exec {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.card-opcion-exec:hover,
.folder-card-exec:hover {
  background: var(--color-surface-elevated) !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--shadow-card-lg) !important;
  transform: translateY(-2px) scale(1.015);
}

.card-opcion-exec .card-title,
.folder-card-exec .folder-title-exec {
  color: var(--color-heading) !important;
}

.card-opcion-exec .card-desc {
  color: var(--color-text-muted) !important;
}

.folder-card-exec .folder-count {
  background: var(--corp-green-muted) !important;
  color: var(--color-text-muted) !important;
}

/* ── Sistema de animaciones de entrada (referencia de diseño) ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pop {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes cardIn {
  0% { opacity: 0; transform: translateX(-70px); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes itemUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(28px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes swapIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes cardPop {
  0% { opacity: 0; transform: translateY(26px) scale(0.97); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes galIn {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}