.welcome-module{
  min-width: 0;
  aspect-ratio: 1 / 1.24;
}

.welcome-module .welcome-icon{
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #e2f7f4;
  color: #00a39e;
}

.welcome-module .welcome-icon svg{
  width: 40px;
  height: 40px;
}

.welcome-copy .welcome-logo{
  display: block;
  width: 190px;
  height: auto;
  max-height: none;
  margin: 0 auto 14px;
  mix-blend-mode: multiply;
  filter: contrast(1.08) saturate(1.08);
}

/* Ya no hay versión de fábrica del logo para el tema oscuro: el único logo es
   el que la persona sube, y se muestra igual en los dos temas. */


@media (min-width: 1120px) {
  .welcome-copy .welcome-logo{ width: 150px; margin: 0 auto 8px; }
  .welcome-module .welcome-icon{ width: 54px; height: 54px; }
  .welcome-module .welcome-icon svg{ width: 32px; height: 32px; }
}


.settings-float{
  place-items: center;
}

.settings-float svg{
  width: 34px;
  height: 34px;
}

.nav-item .nav-icon{
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
}

.nav-item .nav-icon svg{
  width: 22px;
  height: 22px;
  stroke-width: 2.1;
}



/* ---------- Dashboard en tema oscuro ----------
   Los cuadritos de los íconos seguían con los fondos pastel del tema claro:
   se veían pálidos y pegados encima. Aquí llevan fondo tintado oscuro y el
   color vivo del módulo,
para que brillen en vez de apagarse. */
[data-theme="dark"] .welcome-module .welcome-icon{ color: #5fd8d0; background: rgba(0, 190, 180, .16); }

/* La tarjeta necesita separarse del fondo: un poco más clara,
con un filo
   superior iluminado que le da relieve. */
[data-theme="dark"] .welcome-module{
  background: linear-gradient(180deg, #202b40 0%, #1a2333 100%);
  border-color: #33415b;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ---------- Animación del dashboard ----------
   1) Entrada en cascada: las tarjetas aparecen una tras otra al abrir Inicio.
   2) Al pasar el mouse,
cada tarjeta se ilumina con SU propio color.
   3) El ícono da un rebotito suave (curva tipo resorte).                   */

@keyframes moduleIn{
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.welcome-module{
  /* --glow lo define cada módulo abajo; por defecto el turquesa de la marca */
  --glow: 0, 159, 155;
  animation: moduleIn .5s cubic-bezier(.16, 1, .3, 1) both;
}

.welcome-module:nth-child(1){ animation-delay: .04s; }
.welcome-module:nth-child(2){ animation-delay: .09s; }
.welcome-module:nth-child(3){ animation-delay: .14s; }
.welcome-module:nth-child(4){ animation-delay: .19s; }
.welcome-module:nth-child(5){ animation-delay: .24s; }
.welcome-module:nth-child(6){ animation-delay: .29s; }
.welcome-module:nth-child(7){ animation-delay: .34s; }
.welcome-module:nth-child(8){ animation-delay: .39s; }

.welcome-module.pagos{ --glow: 39, 140, 244; }
.welcome-module.tiempo{ --glow: 8, 169, 159; }
.welcome-module.comprobantes{ --glow: 8, 169, 159; }
.welcome-module.vacaciones{ --glow: 130, 66, 233; }
.welcome-module.aguinaldos{ --glow: 214, 150, 20; }
.welcome-module.liquidaciones{ --glow: 255, 67, 80; }
.welcome-module.reportes{ --glow: 134, 66, 233; }
.welcome-module.expedientes{ --glow: 113, 128, 150; }

/* El realce usa el color del propio módulo,
no el turquesa de todos. */
.welcome-module:hover{
  border-color: rgba(var(--glow), .55);
  box-shadow: 0 16px 30px rgba(var(--glow), .22), 0 0 0 1px rgba(var(--glow), .18);
}

[data-theme="dark"] .welcome-module:hover{
  border-color: rgba(var(--glow), .6);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45), 0 0 22px rgba(var(--glow), .3), inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* Rebotito del ícono: la curva se pasa un poco y regresa. */
.welcome-module .welcome-icon{
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1);
}

.welcome-module:hover .welcome-icon{
  transform: scale(1.14) rotate(-5deg);
}

/* Si el sistema pide menos movimiento, se respeta y no hay animación. */
@media (prefers-reduced-motion: reduce) {
  .welcome-module{ animation: none; }
  .welcome-module:hover{ transform: none; }
}



/* ═══════════ Color de cada módulo — una sola definición ═══════════
   Los once colores viven aquí como variables. El menú lateral, los módulos del
   dashboard y la barra de "Viendo a" leen de estas mismas variables, así no
   pueden volver a quedar de distinto color. Están repartidos por el círculo
   cromático: ninguno se confunde con su vecino. */
:root {
  --m-inicio: #0ea89b;
  --m-colaboradores: #0d93c7;
  --m-tiempo: #3b74d4;
  --m-pagos: #12a05f;
  --m-vacaciones: #dd8a15;
  --m-ausencias: #d8524e;
  --m-aguinaldos: #cc4a86;
  --m-liquidaciones: #8b52d4;
  --m-reportes: #5a5fd0;
  --m-expedientes: #8a6544;
  --m-configuracion: #6b7280;
}

[data-theme="dark"] {
  --m-inicio: #4ad6c4;
  --m-colaboradores: #52c3ec;
  --m-tiempo: #7fa4f5;
  --m-pagos: #4ecb8a;
  --m-vacaciones: #f0b45c;
  --m-ausencias: #f08a86;
  --m-aguinaldos: #ee85b3;
  --m-liquidaciones: #c39af5;
  --m-reportes: #7c86e8;
  --m-expedientes: #c49a72;
  --m-configuracion: #98a2b3;
}

/* Cada pestaña toma su color. Una sola regla sirve a los tres lugares. */
.nav-inicio .nav-icon,
.quien.inicio { --acento: var(--m-inicio); color: var(--m-inicio); }
.nav-colaboradores .nav-icon,
.quien.colaboradores,
.welcome-module.colaboradores .welcome-icon { --acento: var(--m-colaboradores); color: var(--m-colaboradores); }
.nav-tiempo .nav-icon,
.quien.tiempo,
.welcome-module.tiempo .welcome-icon { --acento: var(--m-tiempo); color: var(--m-tiempo); }
.nav-pagos .nav-icon,
.quien.pagos,
.welcome-module.pagos .welcome-icon { --acento: var(--m-pagos); color: var(--m-pagos); }
.nav-vacaciones .nav-icon,
.quien.vacaciones,
.welcome-module.vacaciones .welcome-icon { --acento: var(--m-vacaciones); color: var(--m-vacaciones); }
.nav-ausencias .nav-icon,
.quien.ausencias { --acento: var(--m-ausencias); color: var(--m-ausencias); }
.nav-aguinaldos .nav-icon,
.quien.aguinaldos,
.welcome-module.aguinaldos .welcome-icon { --acento: var(--m-aguinaldos); color: var(--m-aguinaldos); }
.nav-liquidaciones .nav-icon,
.quien.liquidaciones,
.welcome-module.liquidaciones .welcome-icon { --acento: var(--m-liquidaciones); color: var(--m-liquidaciones); }
.nav-reportes .nav-icon,
.quien.reportes,
.welcome-module.reportes .welcome-icon { --acento: var(--m-reportes); color: var(--m-reportes); }
.nav-expedientes .nav-icon,
.quien.expedientes,
.welcome-module.expedientes .welcome-icon { --acento: var(--m-expedientes); color: var(--m-expedientes); }
.nav-configuracion .nav-icon,
.quien.configuracion { --acento: var(--m-configuracion); color: var(--m-configuracion); }

/* El cuadrito del dashboard lleva el mismo color, muy diluido. */
.welcome-module.colaboradores .welcome-icon { background: #e0f3fb; }
.welcome-module.tiempo .welcome-icon { background: #e7eefc; }
.welcome-module.pagos .welcome-icon { background: #e2f6ec; }
.welcome-module.vacaciones .welcome-icon { background: #fcf0dc; }
.welcome-module.aguinaldos .welcome-icon { background: #fbe6ef; }
.welcome-module.liquidaciones .welcome-icon { background: #f0e7fc; }
.welcome-module.reportes .welcome-icon { background: #e8e9fb; }
.welcome-module.expedientes .welcome-icon { background: #f5ede4; }

[data-theme="dark"] .welcome-module.colaboradores .welcome-icon { background: rgba(13,147,199,.13); }
[data-theme="dark"] .welcome-module.tiempo .welcome-icon { background: rgba(59,116,212,.13); }
[data-theme="dark"] .welcome-module.pagos .welcome-icon { background: rgba(18,160,95,.14); }
[data-theme="dark"] .welcome-module.vacaciones .welcome-icon { background: rgba(221,138,21,.15); }
[data-theme="dark"] .welcome-module.aguinaldos .welcome-icon { background: rgba(204,74,134,.14); }
[data-theme="dark"] .welcome-module.liquidaciones .welcome-icon { background: rgba(139,82,212,.15); }
[data-theme="dark"] .welcome-module.reportes .welcome-icon { background: rgba(90,95,208,.15); }
[data-theme="dark"] .welcome-module.expedientes .welcome-icon { background: rgba(138,101,68,.16); }

/* En reposo el ícono del menú va algo apagado, para que la barra esté
   tranquila; al pasar por encima y en la pestaña abierta toma su color pleno. */
.nav-item .nav-icon { opacity: .8; }
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════════
   LOS ESPACIOS
   Dos planillas que no se mezclan. El botón de la pantalla de inicio va
   chiquito y discreto —no es algo de todos los días—, y adentro del segundo
   espacio hay una marca en la barra lateral para que nunca haya duda de en
   cuál está uno. */
.espacio-float {
  position: absolute;
  z-index: 2;
  top: 46px;
  left: 55px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--muted);
  background: var(--card);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  opacity: .55;
  transition: opacity var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-2) var(--ease);
}
.espacio-float svg { width: 17px; height: 17px; }
.espacio-float:hover { opacity: 1; color: var(--ink); border-color: #c7d0e0; transform: translateY(-1px); }
.espacio-float.otro { opacity: 1; width: 38px; padding: 0; justify-content: center; color: var(--m-liquidaciones); border-color: color-mix(in srgb, var(--m-liquidaciones) 40%, var(--line)); background: color-mix(in srgb, var(--m-liquidaciones) 8%, var(--card)); }
[data-theme="dark"] .espacio-float:hover { border-color: #47566f; }

/* La marca en la barra lateral del segundo espacio. */
.espacio-marca {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -6px auto 16px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--m-liquidaciones) 35%, var(--line));
  border-radius: 9px;
  color: var(--m-liquidaciones);
  background: color-mix(in srgb, var(--m-liquidaciones) 10%, transparent);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  text-align: left;
  transition: background-color var(--dur-2) ease;
}
.espacio-marca:hover { background: color-mix(in srgb, var(--m-liquidaciones) 18%, transparent); }
.espacio-marca svg { width: 17px; height: 17px; }
.espacio-marca.practica { color: var(--m-vacaciones); border-color: color-mix(in srgb, var(--m-vacaciones) 40%, var(--line)); background: color-mix(in srgb, var(--m-vacaciones) 12%, transparent); }
.espacio-marca.practica:hover { background: color-mix(in srgb, var(--m-vacaciones) 20%, transparent); }

/* El cajón de los espacios. */
.esp-cajon { width: min(520px, 100%); display: grid; gap: 16px; }
.esp-lista { display: grid; gap: 10px; }
.esp-tarjeta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.esp-tarjeta.actual { border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); background: color-mix(in srgb, var(--teal) 6%, var(--card)); }
.esp-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 11%, transparent);
}
.esp-tarjeta.practica .esp-ico { color: var(--m-vacaciones); background: color-mix(in srgb, var(--m-vacaciones) 13%, transparent); }
.esp-ico svg { width: 21px; height: 21px; stroke-width: 1.9; }
.esp-texto { display: grid; flex: 1; gap: 2px; min-width: 0; }
.esp-texto b { color: var(--ink); font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esp-texto small { color: var(--muted); font-size: 12.5px; }
.esp-aqui { flex: 0 0 auto; padding: 4px 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal); font-size: 11.5px; font-weight: 700; }
[data-theme="dark"] .esp-aqui { color: #5fd8d0; }
.esp-escoger { display: grid; gap: 10px; }
.esp-escoger > b { color: var(--ink); font-size: 14px; }
.esp-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.esp-opcion {
  display: grid;
  justify-items: start;
  gap: 3px;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease;
}
.esp-opcion:hover { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 5%, var(--card)); }
.esp-opcion svg { width: 20px; height: 20px; margin-bottom: 6px; color: var(--teal); }
.esp-opcion b { font-size: 13.5px; font-weight: 650; }
.esp-opcion small { color: var(--muted); font-size: 12px; line-height: 1.4; }

/* En un espacio de práctica, cada papel sale marcado: nadie puede confundir
   un comprobante de prueba con uno de verdad. */
html[data-practica] .comprobante { position: relative; }
html[data-practica] .comprobante::after {
  content: "PRÁCTICA · SIN VALIDEZ";
  position: absolute;
  top: 42%;
  left: 50%;
  color: rgba(220, 63, 69, .14);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-24deg);
  pointer-events: none;
}
@media (max-width: 480px) { .espacio-float { position: static; margin: 10px auto 0; } }