/* ============================================
   PoolApp — Sistema de diseño (marca azul)
   Variables CSS + Dark mode + Utilidades
   ============================================ */

/* Google Fonts: cargados via <link> en HTML con preconnect (no @import, que bloquea render) */

/* F3 post-revisión: red de seguridad global. El atributo nativo `hidden`
   se anula si cualquier clase posterior define `display: flex|block|...`.
   Con !important evitamos repetir esto inline en cada HTML nuevo
   (gotcha F2.2: el modal de doble confirmación del wizard se mostraba a
   pesar de tener `hidden` por una `.modal { display: flex }`). */
[hidden] { display: none !important; }

/* --- Variables Light (default) --- */
:root {
  --card: #f8fafc;
  --ring: #2563eb;
  --input: #e2e8f0;
  --muted: #f1f5f9;
  --accent: #dbeafe;
  --border: #e2e8f0;
  --radius: 0.375rem;
  --primary: #2563eb;
  --sidebar: #f1f5f9;
  --secondary: #eff6ff;
  --background: #f8fafc;
  --foreground: #1a1a1a;
  --destructive: #991b1b;
  --muted-foreground: #57534e;
  --primary-foreground: #ffffff;
  --sidebar-foreground: #1a1a1a;
  --sidebar-border: #e2e8f0;
  --sidebar-primary: #2563eb;
  --sidebar-accent: #dbeafe;
  /* Piloto Eduardo V2.1: color del texto del item activo. En light usa la
     misma sidebar-primary (rojo marca) por compat. En dark se redefine
     para que tenga contraste con el background tinte rojo. */
  --sidebar-active-fg: var(--sidebar-primary);
  /* F5 post-deploy: background sólido del item activo. En light queda en el
     accent suave (default behaviour); en dark se sobreescribe con el rojo
     brand sólido para que el item activo destaque sin ambigüedad. Separado
     de --sidebar-accent para no afectar otros usos (badges, hover bgs). */
  --sidebar-active-bg: var(--sidebar-accent);
  --font-sans: 'Poppins', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  /* F5 post-deploy v3: paleta de charts SIN rojo en light. Antes era toda
     rojo/naranja brand (chocaba con tenants que cambian --primary en
     Apariencia). Ahora escala stone (gris cálido neutro) + un ámbar como
     único acento para diferenciar datasets secundarios. La paleta es
     independiente del --primary del tenant. */
  --chart-1: #a8a29e;  /* stone-400 — dataset principal */
  --chart-2: #78716c;  /* stone-500 */
  --chart-3: #57534e;  /* stone-600 */
  --chart-4: #b45309;  /* amber-700 — acento ocasional para dataset secundario */
  --chart-5: #44403c;  /* stone-700 */

  /* Piloto Eduardo F7: vars semánticas para warning/success/info y surface.
     Antes los HTML del admin hardcodeaban hex (#fee2e2, #fffbeb, #fff…) que
     rompían en oscuro. Estas vars resuelven contraste en ambos temas. */
  --surface:        var(--card);
  --surface-strong: #ffffff;
  --warning-bg:     #dbeafe;
  --warning-fg:     #92400e;
  --warning-border: #fcd34d;
  --success-bg:     #dcfce7;
  --success-fg:     #166534;
  --success-border: #86efac;
  --danger-bg:      #fee2e2;
  --danger-fg:      #991b1b;
  --danger-border:  #fca5a5;
  --info-bg:        #dbeafe;
  --info-fg:        #1e40af;
  --info-border:    #93c5fd;

  /* Piloto Eduardo F5: tokens "sólidos" para usar como color de texto o
     background plano (botones de éxito, dots, trend up/down, etc.). Los
     `-bg/-fg/-border` de arriba son para banners con texto contrastado;
     estos son para color: var(--success) directo. */
  --success:            #16a34a;
  --success-foreground: #ffffff;
  --warning:            #d97706;
  --warning-foreground: #ffffff;
  --danger:             #dc2626;
  --danger-foreground:  #ffffff;
  --info:               #0369a1;
  --info-foreground:    #ffffff;
  /* Badge "Destacado" del listado de servicios y picker. Estado neutro
     (fondo claro) y estado activo (pill amber). */
  --featured-bg:        #fef9c3;
  --featured-fg:        #78350f;
  --featured-border:    #f59e0b;
  --featured-pill-bg:   #fcd34d;
  /* Círculo del toggle switch — blanco en light, gris claro en dark. */
  --switch-thumb:       #ffffff;
}

/* --- Variables Dark --- */
[data-theme="dark"] {
  --card: #292524;
  --ring: #3b82f6;
  --input: #44403c;
  --muted: #292524;
  --accent: #1e3a8a;
  --border: #44403c;
  --primary: #3b82f6;
  --sidebar: #1c1917;
  --secondary: #1e3a8a;
  --background: #1c1917;
  --foreground: #f5f5f4;
  --destructive: #ef4444;
  --muted-foreground: #d6d3d1;
  --primary-foreground: #faf7f5;
  --sidebar-foreground: #f5f5f4;
  --sidebar-border: #44403c;
  --sidebar-primary: #3b82f6;
  /* Piloto Eduardo V2.1: el accent del sidebar en dark pasa de naranja
     opaco (#b45309) a un tinte rojo tenue del color de marca. Antes el
     item activo combinaba color rojo brillante sobre fondo naranja
     oscuro = contraste pobre. Ahora el fondo es rojo-15% y el texto va
     a un rojo claro pastel definido en --sidebar-active-fg. */
  --sidebar-accent: rgba(185, 28, 28, 0.18);
  /* F5 post-deploy v2: el item activo del sidebar pasa a fondo sólido
     primary (rojo brand del tenant) + texto blanco. Esto le da peso
     visual claro y diferencia del hover/inactive sin pasar por el
     rgba semi-transparente que daba contraste pobre. */
  --sidebar-active-fg: #ffffff;
  --sidebar-active-bg: var(--primary);
  /* Piloto Eduardo V2.3: paleta neutra en dark — escala slate + 1 acento
     ámbar como único acento. F5 post-deploy v3: el chart-5 que aún era
     rojo brand también pasa a slate (el founder no quiere rojo en
     ninguna gráfica — choca con tenants que cambian --primary). */
  --chart-1: #cbd5e1;  /* slate-300 — dataset principal */
  --chart-2: #94a3b8;  /* slate-400 */
  --chart-3: #64748b;  /* slate-500 */
  --chart-4: #fbbf24;  /* amber-400 — único acento */
  --chart-5: #475569;  /* slate-600 — antes #3b82f6 rojo, ahora slate */

  /* Piloto Eduardo F7: warning/success/danger en oscuro con suficiente
     contraste (texto claro sobre fondos atenuados). */
  --surface:        var(--card);
  --surface-strong: #1c1917;
  --warning-bg:     rgba(251, 191, 36, 0.15);
  --warning-fg:     #fcd34d;
  --warning-border: rgba(251, 191, 36, 0.35);
  --success-bg:     rgba(34, 197, 94, 0.18);
  --success-fg:     #86efac;
  --success-border: rgba(34, 197, 94, 0.35);
  --danger-bg:      rgba(239, 68, 68, 0.18);
  --danger-fg:     #fca5a5;
  --danger-border:  rgba(239, 68, 68, 0.35);
  --info-bg:        rgba(96, 165, 250, 0.16);
  --info-fg:        #bfdbfe;
  --info-border:    rgba(96, 165, 250, 0.35);

  /* Piloto Eduardo F5: tokens sólidos en dark — más claros para mantener
     contraste sobre el fondo oscuro. */
  --success:            #22c55e;
  --success-foreground: #052e16;
  --warning:            #fbbf24;
  --warning-foreground: #422006;
  --danger:             #ef4444;
  --danger-foreground:  #ffffff;
  --info:               #38bdf8;
  --info-foreground:    #082f49;
  --featured-bg:        rgba(251, 191, 36, 0.15);
  --featured-fg:        #fcd34d;
  --featured-border:    rgba(251, 191, 36, 0.5);
  --featured-pill-bg:   rgba(251, 191, 36, 0.3);
  --switch-thumb:       #e7e5e4;
}

/* --- Clases utilitarias semánticas --- */
.bg-page     { background-color: var(--background); }
.bg-card     { background-color: var(--card); }
.bg-sidebar  { background-color: var(--sidebar); }
.bg-muted    { background-color: var(--muted); }
.bg-accent   { background-color: var(--accent); }
.bg-primary  { background-color: var(--primary); }
.bg-input    { background-color: var(--input); }
/* Toggle switch: peer-checked variant for custom colors */
.peer:checked ~ .peer-checked\:bg-primary { background-color: var(--primary); }

.text-main   { color: var(--foreground); }
.text-muted  { color: var(--muted-foreground); }
.text-primary-c { color: var(--primary); }

.border-app  { border-color: var(--border); }
.ring-app    { --tw-ring-color: var(--ring); }

/* --- Botones --- */
.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease,
              transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.btn-primary:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 4px 12px -2px rgba(0,0,0,0.18); }
.btn-primary:active { transform: scale(0.97); box-shadow: none; transition-duration: 0.08s; }
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--foreground);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease,
              transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.btn-secondary:hover { background-color: var(--muted); transform: translateY(-1px); box-shadow: 0 4px 10px -2px rgba(0,0,0,0.12); }
.btn-secondary:active { transform: scale(0.97); transition-duration: 0.08s; }

.btn-destructive {
  background-color: var(--destructive);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease,
              transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.btn-destructive:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 4px 12px -2px rgba(220, 38, 38, 0.25); }
.btn-destructive:active { transform: scale(0.97); transition-duration: 0.08s; }

.btn-ghost {
  background: transparent;
  color: var(--foreground);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.btn-ghost:hover { background-color: var(--muted); }

/* --- Inputs --- */
.input-field {
  background-color: var(--input);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  width: 100%;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input-field:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 25%, transparent);
}
.input-field::placeholder {
  color: var(--muted-foreground);
}

/* --- Cards --- */
.card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.badge-success { background-color: #dcfce7; color: #166534; }
.badge-warning { background-color: #dbeafe; color: #92400e; }
.badge-error   { background-color: #fee2e2; color: #991b1b; }
.badge-info    { background-color: #dbeafe; color: #1e40af; }
.badge-neutral { background-color: var(--muted); color: var(--muted-foreground); }

[data-theme="dark"] .badge-success { background-color: #166534; color: #dcfce7; }
[data-theme="dark"] .badge-warning { background-color: #92400e; color: #dbeafe; }
[data-theme="dark"] .badge-error   { background-color: #991b1b; color: #fee2e2; }
[data-theme="dark"] .badge-info    { background-color: #1e40af; color: #dbeafe; }

/* --- Toast --- */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  /* En móvil iOS PWA, evitar que el home indicator tape los toasts */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (max-width: 768px) {
  /* Botones desktop-only del módulo horario: descarga Excel, etc. */
  .horario-desktop-only { display: none !important; }
  #toast-container {
    /* Bottom-center en móvil — más visible y al alcance del thumb */
    left: 1rem;
    right: 1rem;
    bottom: calc(80px + env(safe-area-inset-bottom, 0) + 0.5rem); /* sobre bottom nav */
    align-items: center;
  }
}
.toast {
  pointer-events: auto;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-family: var(--font-sans);
  color: #fff;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  animation: toast-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 24rem;
}
.toast-success { background-color: #16a34a; }
.toast-error   { background-color: var(--destructive); }
.toast-info    { background-color: #2563eb; }
.toast-warning { background-color: #d97706; }

.toast-exit {
  animation: toast-out 0.25s ease-in forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(0.5rem) scale(0.97); }
}

/* --- Top progress bar (NProgress-style) — Phase 4.2 --- */
#spa-top-progress {
  position: fixed;
  top: 0;
  left: 16rem; /* Skip sidebar width on desktop */
  height: 2px;
  background: linear-gradient(90deg, var(--primary, #2563eb) 0%, var(--accent, #d97706) 100%);
  z-index: 10000;
  width: 0%;
  pointer-events: none;
  opacity: 0;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px var(--primary, #2563eb), 0 0 4px var(--primary, #2563eb);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
#spa-top-progress.loading { opacity: 1; }
#spa-top-progress.done    { opacity: 0; }
@media (max-width: 767px) {
  #spa-top-progress { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #spa-top-progress { transition: opacity 0.2s ease; }
}

/* --- Page transition (manual CSS, no View Transitions API) ---
   Animación directa sobre #page-content via JS (router.js).
   El sidebar NUNCA participa — sin screenshots, sin pseudo-elements,
   sin compositing layers que puedan causar flash. */
#page-content {
  scrollbar-gutter: stable;
}

/* --- Modal / Overlay --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlay-fade-in 0.2s ease-out;
}
.modal-content {
  background-color: var(--card);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 32rem;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modal-scale-in 0.2s ease-out;
}
@keyframes overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-scale-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- SlideOver --- */
.slideover-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 300;
  animation: overlay-fade-in 0.2s ease-out;
}
.slideover-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 28rem;
  background-color: var(--card);
  border-left: 1px solid var(--border);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.2s ease-out;
}
.slideover-panel.slideover-closed {
  transform: translateX(100%);
}
.slideover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.slideover-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* --- Skeleton loading --- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--muted) 25%,
    color-mix(in srgb, var(--muted) 60%, transparent) 50%,
    var(--muted) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--radius);
}
@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Indeterminate progress bar (modal footer / form submit feedback) --- */
.gcb-progress-bar {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--primary, #2563eb), transparent);
  border-radius: 99px;
  animation: indeterminate-slide 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes indeterminate-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  .gcb-progress-bar { animation-duration: 2s; }
}

/* --- Tabla --- */
.table-container {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.table-container table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.table-container thead {
  background-color: var(--muted);
}
.table-container th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--foreground);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table-container td {
  padding: 0.75rem 1rem;
  color: var(--foreground);
  border-bottom: 1px solid var(--border);
}
.table-container tbody tr {
  transition: background-color 0.15s;
}
.table-container tbody tr:hover {
  background-color: var(--muted);
}
.table-container tbody tr:last-child td {
  border-bottom: none;
}

/* --- Tabs --- */
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  gap: 0;
}
.tab-btn {
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: var(--font-sans);
}
.tab-btn:hover {
  color: var(--foreground);
}
.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* --- Sub-tab pills (for nested sections) --- */
.sub-tab-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.sub-tab-pill:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}
.sub-tab-pill.active {
  color: var(--primary-foreground);
  background: var(--primary);
  font-weight: 600;
}

/* --- Toggle switch --- */
.toggle {
  position: relative;
  width: 2.5rem;
  height: 1.375rem;
  background-color: var(--muted);
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s;
  border: 1px solid var(--border);
}
.toggle.active {
  background-color: var(--primary);
  border-color: var(--primary);
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle.active::after {
  transform: translateX(1.125rem);
}

/* --- Overrides Tailwind en dark mode --- */
[data-theme="dark"] .bg-white        { background-color: var(--card) !important; }
[data-theme="dark"] .bg-gray-50      { background-color: var(--muted) !important; }
[data-theme="dark"] .bg-gray-100     { background-color: var(--background) !important; }
[data-theme="dark"] .text-gray-900   { color: var(--foreground) !important; }
[data-theme="dark"] .text-gray-800   { color: var(--foreground) !important; }
[data-theme="dark"] .text-gray-700   { color: var(--foreground) !important; }
[data-theme="dark"] .text-gray-600   { color: var(--muted-foreground) !important; }
[data-theme="dark"] .text-gray-500   { color: var(--muted-foreground) !important; }
[data-theme="dark"] .text-gray-400   { color: var(--muted-foreground) !important; }
[data-theme="dark"] .border-gray-200 { border-color: var(--border) !important; }
[data-theme="dark"] .border-gray-300 { border-color: var(--border) !important; }
[data-theme="dark"] .divide-gray-200 > * + * { border-color: var(--border) !important; }

/* --- Responsive sidebar --- */
@media (max-width: 767px) {
  #sidebar { display: none; }
  #sidebar.mobile-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 400;
  }
  #mobile-topbar { display: flex !important; }
}
@media (min-width: 768px) {
  #mobile-topbar { display: none !important; }
}

/* ============================================
   MOBILE RESPONSIVE — <768px
   ============================================ */

/* --- Bottom navigation bar --- */
.bottom-nav {
  display: none;
}
@media (max-width: 767px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: var(--card);
    border-top: 1px solid var(--border);
    z-index: 500;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
  }
  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 56px;
    min-height: 44px;
    padding: 4px 8px;
    text-decoration: none;
    color: var(--muted-foreground);
    font-size: 0.6875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    background: none;
    border: none;
    transition: color 0.15s;
  }
  .bottom-nav-item.active {
    color: var(--primary);
    font-weight: 600;
  }
  .bottom-nav-item svg {
    width: 24px;
    height: 24px;
  }

  /* Padding bottom on body so content isn't hidden behind bottom nav */
  body.has-bottom-nav {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  /* Also adjust toast container above the bottom nav */
  body.has-bottom-nav #toast-container {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- "More" drawer --- */
.more-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 600;
  animation: overlay-fade-in 0.2s ease-out;
}
.more-drawer-overlay.open {
  display: block;
}
.more-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--card);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  z-index: 601;
  max-height: auto;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.more-drawer-overlay.open .more-drawer {
  transform: translateY(0);
}
.more-drawer-handle {
  width: 36px;
  height: 4px;
  background: var(--muted-foreground);
  border-radius: 2px;
  margin: 10px auto 8px;
  opacity: 0.4;
}
.more-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  text-decoration: none;
  color: var(--foreground);
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: var(--font-sans);
  transition: background-color 0.15s;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
.more-drawer-item:hover {
  background-color: var(--muted);
}
.more-drawer-item.active {
  color: var(--primary);
  font-weight: 600;
}
.more-drawer-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.more-drawer-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.more-drawer-actions button {
  flex: 1;
  min-height: 44px;
}

/* --- Table → mobile cards (<768px) --- */
@media (max-width: 767px) {
  .table-mobile-cards thead {
    display: none;
  }
  .table-mobile-cards tbody tr {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .table-mobile-cards tbody tr:hover {
    background-color: var(--card);
  }
  .table-mobile-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: none;
    font-size: 0.875rem;
  }
  .table-mobile-cards tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-right: 12px;
    flex-shrink: 0;
  }
  .table-mobile-cards tbody td:last-child {
    border-bottom: none;
  }
}

/* --- Modals → bottom sheet on mobile --- */
@media (max-width: 767px) {
  .modal-overlay {
    align-items: flex-end;
    z-index: 600; /* above bottom-nav (500) so content isn't hidden */
  }
  /* Sub-modales de confirmación del popup semana (Reset, Eliminar
     fichaje, Cambio de tipo, Aplicar conflict, etc) deben aparecer
     CENTRADOS en mobile, no como bottom-sheet. El bottom-sheet del
     parent ya cubre la mitad inferior; un sub-modal en bottom queda
     superpuesto al parent y no se ve. Override:
     - align-items: center → flota centrado
     - max-width acotado para parecer un popup de confirmación normal
     - sin handle bar (::before)
     - sin animación slide-up (parecía que se abría desde abajo) */
  .modal-overlay.cwp-sub-modal {
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  .modal-overlay.cwp-sub-modal .modal-content {
    max-width: 32rem !important;
    width: 100% !important;
    max-height: 80vh;
    border-radius: 0.75rem !important;
    animation: none !important;
    margin: 0 auto;
  }
  .modal-overlay.cwp-sub-modal .modal-content::before {
    display: none !important;
  }
  .modal-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: calc(100dvh - 2rem);
    border-radius: 1rem 1rem 0 0;
    padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    animation: modal-slide-up 0.25s ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Sticky modal header so close button stays visible when scrolling */
  .modal-content > .flex:first-child {
    position: sticky;
    top: -1rem; /* offset the padding */
    z-index: 1;
    background: var(--card);
    margin: -1rem -1.25rem 0;
    padding: 1rem 1.25rem 0.75rem;
    border-radius: 1rem 1rem 0 0;
  }
  .modal-content::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--muted-foreground);
    border-radius: 2px;
    margin: 0 auto 12px;
    opacity: 0.4;
    flex-shrink: 0;
  }
  @keyframes modal-slide-up {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Slideover: full-screen wizard on mobile */
  .slideover-overlay {
    z-index: 600;
  }
  .slideover-panel {
    max-width: 100%;
    width: 100%;
    z-index: 601;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-left: none;
    border-radius: 0;
  }
  .slideover-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--card);
  }
}

/* --- KPI cards 2-col on mobile --- */
@media (max-width: 767px) {
  .kpi-card {
    padding: 1rem;
  }
  .kpi-card .text-2xl,
  .kpi-card .text-3xl {
    font-size: 1.25rem !important;
  }
}

/* --- Touch targets on mobile --- */
@media (max-width: 767px) {
  .btn-primary,
  .btn-secondary,
  .btn-destructive,
  .btn-ghost,
  .tab-btn,
  .period-toggle button {
    min-height: 44px;
  }
  .input-field,
  select.input-field {
    min-height: 44px;
    font-size: 1rem; /* prevents iOS zoom on focus */
  }
  /* Space between interactive elements */
  .tab-bar {
    gap: 4px;
  }
}

/* --- Horario mobile: big clock-in/out button --- */
@media (max-width: 767px) {
  .clock-card-mobile-fullscreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px - 80px); /* viewport minus topbar and bottom nav */
    text-align: center;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .clock-card-mobile-fullscreen .clock-btn-big {
    min-height: 120px;
    font-size: 1.375rem;
    border-radius: 1rem;
    width: 100%;
    max-width: 20rem;
  }
}

/* --- Agenda mobile adjustments --- */
@media (max-width: 767px) {
  .agenda-mobile-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .agenda-mobile-controls .btn-ghost {
    padding: 10px;
  }
  .booking-block {
    min-height: 44px;
    font-size: 0.75rem;
    padding: 6px 8px;
  }
}

/* --- Compact main padding on mobile --- */
@media (max-width: 767px) {
  main {
    padding: 1rem !important;
  }
  /* Hide the desktop mobile-topbar brand when bottom nav is present */
  #mobile-topbar {
    padding: 10px 16px;
  }
}

/* --- Scrollbar personalizado --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--muted-foreground);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--foreground);
}

/* --- Transiciones globales --- */
* { box-sizing: border-box; }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* F5 post-deploy: causa raíz de ~10 reports de "texto en negro en dark".
     Sin esto, cualquier elemento sin clase/style que fije color: hereda
     canvasText (≈ negro literal por defecto) en lugar del token del tema.
     Fijarlo en body propaga var(--foreground) por todo el árbol y permite
     que los hijos sin color: lo respeten automáticamente. */
  color: var(--foreground);
}

/* body transition y sidebar nav transition eliminados — causaban
   repaint intermitente del sidebar cuando applyAdminColors() o el
   theme toggle actualizaban CSS variables mid-navegación. El sidebar
   debe ser instantáneo, sin transiciones animadas. */

/* --- Chart container animations --- */
.chart-card {
  animation: chart-appear 0.6s ease-out backwards;
}
.chart-card:nth-child(2) { animation-delay: 0.1s; }
@keyframes chart-appear {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- KPI card staggered entrance --- */
.kpi-card {
  animation: kpi-enter 0.5s ease-out backwards;
}
.kpi-card:nth-child(1) { animation-delay: 0.1s; }
.kpi-card:nth-child(2) { animation-delay: 0.15s; }
.kpi-card:nth-child(3) { animation-delay: 0.2s; }
.kpi-card:nth-child(4) { animation-delay: 0.25s; }
@keyframes kpi-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Period toggle buttons --- */
.period-toggle {
  display: inline-flex;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}
.period-toggle button {
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: transparent;
  color: var(--muted-foreground);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background-color 0.2s, color 0.2s;
}
.period-toggle button.active {
  background-color: var(--primary);
  color: var(--primary-foreground);
}
.period-toggle button:hover:not(.active) {
  background-color: var(--muted);
}

/* --- Badge transition --- */
.badge {
  transition: background-color 0.2s, color 0.2s;
}

/* --- Tab content transition --- */
.tab-content {
  animation: tab-fade-in 0.2s ease-out;
}
@keyframes tab-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Focus visible ring --- */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* --- Wizard Stepper --- */
.wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 1.5rem;
  padding: 0 0.5rem;
}
.wizard-step {
  display: flex;
  align-items: center;
}
.wizard-step-circle {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.wizard-step-circle.completed {
  background-color: var(--primary);
  color: var(--primary-foreground);
}
.wizard-step-circle.active {
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.wizard-step-circle.pending {
  background-color: var(--muted);
  color: var(--muted-foreground);
}
.wizard-step-line {
  width: 1.5rem;
  height: 2px;
  flex-shrink: 0;
  transition: background-color 0.2s;
}
.wizard-step-line.completed {
  background-color: var(--primary);
}
.wizard-step-line.pending {
  background-color: var(--muted);
}
.wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background-color: var(--card);
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .wizard-step-circle {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
  }
  .wizard-step-line {
    width: 0.75rem;
  }
}

/* --- Phone input override (F5 post-deploy) ------------------------------
   El componente panels/shared/phone-input.css usa CSS vars --pi-* con
   fallbacks a --bm-* (booking modal) / --color-* que NO existen en panel
   admin. Sin override, en dark queda como una "isla blanca" (fallback
   #ffffff) con texto casi negro (#111827) chocando con el resto del
   wizard. Aquí redirigimos las --pi-* a los tokens del panel para que
   herede el tema correctamente.

   IMPORTANTE: este selector aparece DESPUÉS del de phone-input.css (que
   se carga antes en shell.html), así que gana por orden CSS con misma
   especificidad. */
.phone-input {
  --pi-bg:           var(--input);
  --pi-border:       var(--border);
  --pi-border-focus: var(--primary);
  --pi-text:         var(--foreground);
  --pi-muted:        var(--muted-foreground);
  --pi-prefix-bg:    var(--muted);
  --pi-error:        var(--destructive);
}

/* ─── Fichaje independiente — sub-tabs + badges + delta ───────────────── */
.sub-tab-bar {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.sub-tab-btn {
  background: transparent;
  border: none;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}

.sub-tab-btn:hover { color: var(--foreground); }

.sub-tab-btn.active {
  color: var(--foreground);
  border-bottom-color: var(--primary);
}

.sub-tab-content { padding-top: 1rem; }

/* Badges de estado de día (Plantilla / Semana a semana) */
.day-status-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.day-status-template { background: transparent; color: var(--muted-foreground); }
.day-status-work     { background: #fff7ed; color: #9a3412; }
.day-status-off      { background: #f3f4f6; color: #4b5563; }
.day-status-leave    { background: #fef2f2; color: #991b1b; }
.day-status-none     { color: var(--muted-foreground); opacity: 0.6; }

/* Δ semáforo */
.delta-ok    { color: #16a34a; }
.delta-warn  { color: #ea580c; }
.delta-alert { color: #dc2626; font-weight: 600; }

/* ───────────────────────────────────────────────────────────────────────
   Fichaje — Horario empleados (rediseño)
   Switch + tarjetitas empleados + tabla L-D + calendario anual
   ─────────────────────────────────────────────────────────────────────── */

.he-banner-aviso {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  background: #dbeafe;
  color: #92400e;
  border: 1px solid #fde68a;
  max-width: 22rem;
  line-height: 1.3;
}

.he-switch {
  display: inline-flex;
  background: var(--muted);
  border-radius: 0.5rem;
  padding: 0.25rem;
  gap: 0.25rem;
}
.he-switch-btn {
  background: transparent;
  border: none;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: 0.375rem;
  transition: background 150ms ease, color 150ms ease;
}
.he-switch-btn.active {
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.he-switch-btn:not(.active):hover { color: var(--foreground); }

.he-staff-strip {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.he-toolbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.he-switch-inline { margin-bottom: 0; }
.he-staff-strip-inline {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.he-staff-strip-inline:empty { display: none; }
.he-staff-card {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
  transition: border-color 150ms ease, background 150ms ease, transform 80ms ease;
  min-height: 40px;
}
.he-staff-card:hover { background: var(--muted); }
.he-staff-card:active { transform: scale(0.98); }
.he-staff-card.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--background));
}
.he-staff-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--muted-foreground);
}

.hh-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
}
/* Tablet (>768 hasta 900): 2 columnas. Mobile <=768 ya define 1 columna
   más abajo. Acotar el rango aquí evita que esta regla siga compitiendo
   en mobile aunque la otra tenga !important. */
@media (min-width: 769px) and (max-width: 900px) {
  .hh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hh-day {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  padding: 0.625rem;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.hh-day.inactive { opacity: 0.45; background: var(--muted); }
.hh-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}
.hh-day-toggle {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.hh-tramos { display: flex; flex-direction: column; gap: 0.375rem; flex: 1; }
.hh-tramo {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.hh-tramo-inputs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  background: var(--muted);
  border-radius: 0.25rem;
  padding: 0.25rem 0.375rem;
}
.hh-tramo-sep {
  color: var(--muted-foreground);
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.hh-tramo input[type="time"] {
  background: transparent;
  border: 1px solid transparent;
  padding: 0.125rem 0.125rem;
  font-size: 0.8125rem;
  color: var(--foreground);
  min-width: 0;
  width: 100%;
  font-family: var(--font-mono);
}
.hh-tramo input[type="time"]:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--background);
}
.hh-tramo input[type="time"]::-webkit-calendar-picker-indicator,
.hh-tramo input[type="time"]::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
  margin: 0;
}
.hh-tramo-rm {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--destructive);
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 700;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.hh-tramo-rm:hover {
  background: var(--destructive);
  border-color: var(--destructive);
  color: #fff;
}
.hh-add-tramo {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 0.25rem;
  padding: 0.25rem;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  cursor: pointer;
  margin-top: 0.25rem;
}
.hh-add-tramo:hover { color: var(--foreground); border-color: var(--foreground); }
.hh-day-total {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-weight: 700;
  font-size: 1rem;
  text-align: right;
  font-family: var(--font-mono);
  color: var(--primary);
}
.hh-week-total {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 2px solid var(--primary);
  border-radius: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.125rem;
}
.hh-week-total-label { font-weight: 600; }
.hh-week-total-value { font-weight: 800; font-size: 1.5rem; color: var(--primary); font-family: var(--font-mono); }

.cal-year-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.cal-card-tight { padding: 0.875rem 1rem; }
@media (max-width: 900px) { .cal-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .cal-year-grid { grid-template-columns: 1fr; } }
.cal-month {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  padding: 0.4375rem 0.5rem 0.1875rem;
}
.cal-month-head {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-bottom: 0.375rem;
  gap: 0.5rem;
}
.cal-month-name {
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--foreground);
}
.cal-foot-spacer { height: 0.125rem; }
.cal-foot-total {
  margin-top: 0;
  margin-bottom: 0;
  border-top: 1px solid var(--primary);
  padding-top: 2px;
  font-size: 0.6875rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}
.cal-year-total {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-left: 0.625rem;
  padding: 0.25rem 0.625rem;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  border-radius: 0.375rem;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  cursor: help;
}
.cal-year-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-right: 0.125rem;
}
.cal-year-fich { font-weight: 800; }
.cal-year-plan { font-weight: 500; opacity: 0.7; font-size: 0.8125rem; }
.cal-legend-fichado {
  background: transparent;
  border: 2px solid var(--primary);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.125rem;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr) 1.6fr;
  gap: 2px;
}
.cal-dow-header {
  font-size: 0.5625rem;
  text-align: center;
  color: var(--muted-foreground);
  font-weight: 600;
  padding-bottom: 1px;
}
.cal-dow-header.cal-dow-total { color: var(--primary); font-weight: 700; }
.cal-day {
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 0.1875rem;
  cursor: pointer;
  background: transparent;
  color: #1f2937;
  transition: transform 80ms ease;
}
.cal-day.empty { cursor: default; color: transparent; }
.cal-day-habitual   { background: #dcfce7; color: #166534; }
.cal-day-modificado { background: #dbeafe; color: #92400e; }
.cal-day-libre      { background: #e5e7eb; color: #1f2937; }
.cal-day-leave      { background: #fed7aa; color: #9a3412; }
.cal-day:hover:not(.empty) { transform: scale(1.18); z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
.cal-day.today { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.cal-day-fichado {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  border-radius: 0.1875rem;
}
.cal-day { position: relative; }
.cal-day-alarm {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  background: var(--destructive);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 800;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 3;
  pointer-events: none;
}
.cal-week-sum {
  height: 1.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}
.cal-sum-fich { font-weight: 800; color: var(--primary); cursor: help; }
.cal-sum-alarm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--destructive);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
  font-family: var(--font-sans);
  flex-shrink: 0;
  cursor: help;
}

[data-theme="dark"] .cal-day { color: #f3f4f6; }
[data-theme="dark"] .cal-day-habitual   { background: #14532d; color: #bbf7d0; }
[data-theme="dark"] .cal-day-modificado { background: #78350f; color: #fde68a; }
[data-theme="dark"] .cal-day-libre      { background: #374151; color: #e5e7eb; }
[data-theme="dark"] .cal-day-leave      { background: #7c2d12; color: #fed7aa; }
.cal-legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.cal-legend-item { display: inline-flex; align-items: center; gap: 0.25rem; }
.cal-legend-swatch { width: 0.75rem; height: 0.75rem; border-radius: 0.125rem; }

.cal-week-popup { max-width: 36rem; width: 95vw; padding: 1.25rem; }

/* ─── Popup semana (rediseño tabla) ─────────────────────────────────────── */
.cwp-modal {
  max-width: 96rem;
  width: 97vw;
  max-height: 92vh;
  padding: 1.125rem 1.375rem 0.875rem;
  overflow-y: auto;
  font-size: 0.875rem;
}
.cwp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.cwp-head-left { display: flex; flex-direction: column; gap: 0.375rem; flex: 1; min-width: 0; }
.cwp-title { font-size: 1.1875rem; font-weight: 700; color: var(--foreground); margin: 0; }
.cwp-staff { font-size: 0.9375rem; color: var(--muted-foreground); margin: 0; }
.cwp-tip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: color-mix(in srgb, #fbbf24 18%, var(--background));
  border: 1px solid #fbbf24;
  border-radius: 0.4375rem;
  padding: 0.3125rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #92400e;
  margin-top: 0.25rem;
  align-self: flex-start;
}
.cwp-close {
  background: transparent; border: none; color: var(--muted-foreground);
  font-size: 1.75rem; line-height: 1; cursor: pointer; padding: 0 0.25rem;
}
.cwp-close:hover { color: var(--foreground); }

.cwp-top-action { display: flex; justify-content: center; padding: 0.875rem 0 1rem; }
.cwp-apply-btn { font-size: 1rem; font-weight: 700; padding: 0.625rem 1.5rem; min-height: 44px; }

/* Tabla */
.cwp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}
.cwp-table thead th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  padding: 0.5rem 0.625rem;
  border-bottom: 2px solid var(--border);
  background: transparent;
}
.cwp-th-day      { width: 4.5rem; }
.cwp-th-tipo     { width: 12rem; }
.cwp-th-horario  { min-width: 22rem; }
.cwp-th-fichaje  { min-width: 24rem; }
.cwp-th-total    { width: 7.5rem; }
.cwp-th-actions  { width: 8rem; }

.cwp-table tbody td {
  padding: 0.75rem 0.625rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.cwp-row { transition: background 120ms ease; }
.cwp-row:hover { background: color-mix(in srgb, var(--muted) 30%, transparent); }
.cwp-today td { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.cwp-type-off    td { background: color-mix(in srgb, #9ca3af 7%, transparent); }
.cwp-type-leave  td { background: color-mix(in srgb, #fb923c 9%, transparent); }
.cwp-type-work   td { background: color-mix(in srgb, #f59e0b 7%, transparent); }
.cwp-today.cwp-type-off td,
.cwp-today.cwp-type-leave td,
.cwp-today.cwp-type-work td { background: color-mix(in srgb, var(--primary) 7%, transparent); }

/* Día */
.cwp-c-day { white-space: nowrap; }
.cwp-day-name { display: flex; align-items: baseline; gap: 0.375rem; }
.cwp-day-dow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-foreground);
  letter-spacing: 0.05em;
}
.cwp-day-num { font-size: 1.25rem; font-weight: 800; color: var(--foreground); }

/* Tipo */
.cwp-day-type {
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  padding: 0.375rem 0.375rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
}
.cwp-day-type:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.cwp-day-type:disabled { cursor: default; opacity: 0.7; }

/* Horario */
.cwp-c-horario { min-width: 0; }
.cwp-empty-cell { color: var(--muted-foreground); font-size: 0.9375rem; }
.cwp-tramos-ro { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 600; color: var(--foreground); }
.cwp-tramos-edit { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.cwp-tramo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--muted);
  border-radius: 0.375rem;
  padding: 0.25rem 0.4375rem;
}
.cwp-tramo input[type="time"] {
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
  padding: 0.125rem 0.125rem;
  width: 4.25rem;
}
.cwp-tramo input[type="time"]::-webkit-calendar-picker-indicator,
.cwp-tramo input[type="time"]::-webkit-inner-spin-button { display: none; -webkit-appearance: none; margin: 0; }
.cwp-tramo input[type="time"]:focus { outline: none; border-color: var(--primary); background: var(--background); }
.cwp-t-sep { color: var(--muted-foreground); font-weight: 600; }
.cwp-t-rm {
  background: transparent; border: none; color: var(--destructive);
  font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 0.125rem;
}
.cwp-t-rm:hover { color: #3b82f6; }
.cwp-add-tramo {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  cursor: pointer;
}
.cwp-add-tramo:hover { color: var(--foreground); border-color: var(--foreground); }

/* Horas trabajadas */
.cwp-c-fichaje { min-width: 0; }
.cwp-fich-missing { color: #b45309; font-weight: 700; font-size: 0.9375rem; }
.cwp-fich-prog {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #b45309;
  font-weight: 700;
  font-size: 0.9375rem;
}
.cwp-anomaly { display: block; font-size: 0.75rem; color: #b45309; font-weight: 600; margin-top: 0.25rem; }
.cwp-fich-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--muted);
  padding: 0.25rem 0.4375rem;
  border-radius: 0.4375rem;
  margin: 0.0625rem 0.1875rem 0.0625rem 0;
  vertical-align: middle;
}
.cwp-fich-inline input[type="time"],
.cwp-fich-inline input[type="number"] {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.1875rem;
  padding: 0.125rem 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
}
.cwp-fich-inline input[type="time"] { width: 3.75rem; }
.cwp-fich-inline input[type="number"] { width: 2.75rem; padding-left: 0.1875rem; padding-right: 0.1875rem; text-align: center; }
.cwp-fich-inline input[type="time"]::-webkit-calendar-picker-indicator,
.cwp-fich-inline input[type="time"]::-webkit-inner-spin-button { display: none; -webkit-appearance: none; margin: 0; }
.cwp-fi-sep { color: var(--muted-foreground); font-size: 0.75rem; font-weight: 500; }
.cwp-fi-total { color: var(--primary); font-weight: 800; font-family: var(--font-mono); font-size: 0.9375rem; }
/* Nueva columna 'Horas trabajadas' */
.cwp-c-total { white-space: nowrap; text-align: left; }
.cwp-day-total { color: var(--primary); font-weight: 800; font-family: var(--font-mono); font-size: 1rem; }
.cwp-day-vs-plan { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.75rem; }
.cwp-prog-tag {
  display: inline-block;
  background: color-mix(in srgb, #f59e0b 14%, var(--background));
  border: 1px solid #f59e0b;
  border-radius: 0.375rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #b45309;
}
.cwp-fi-x {
  background: transparent;
  border: none;
  color: var(--destructive);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.125rem;
  margin-left: 0.125rem;
}
.cwp-fi-x:hover { color: #3b82f6; }
.cwp-fi-add {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  margin-left: 0.375rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cwp-fi-add:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(155, 44, 44, 0.04);
}
/* Issue 5: aviso naranja tras auto-corrección de "Modificado" igual al habitual.
   Inyectado bajo los tramos en la celda de horario. Auto-disuelve a los 5s. */
.cwp-equal-hint {
  display: block;
  margin-top: 0.5rem;
  padding: 0.4375rem 0.625rem;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #f59e0b;
  border-radius: 0.25rem;
  color: #b45309;
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: 500;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
[data-theme="dark"] .cwp-equal-hint {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}
.cwp-equal-hint-fade {
  opacity: 0;
  transform: translateY(-3px);
}
.cwp-fich-total-line { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.cwp-fich-total-line strong { color: var(--primary); font-family: var(--font-mono); }

/* Acciones */
.cwp-c-actions { white-space: nowrap; }
.cwp-c-actions button + button { margin-left: 0.375rem; }
.cwp-act-reset {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.3125rem 0.625rem;
  border-radius: 0.375rem;
  cursor: pointer;
}
.cwp-act-reset:hover { color: var(--foreground); border-color: var(--foreground); }
.cwp-act-del {
  background: transparent;
  border: 1px solid var(--destructive);
  color: var(--destructive);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.5625rem;
  border-radius: 0.375rem;
  cursor: pointer;
}
.cwp-act-del:hover { background: var(--destructive); color: #fff; }
.cwp-act-fichar {
  background: var(--primary);
  color: var(--primary-foreground, #fff);
  border: none;
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 0.4375rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
}
.cwp-act-fichar:hover { filter: brightness(1.05); }

/* Fila TOTAL (último <tr> de la tabla) */
.cwp-total-row td {
  border-top: 3px solid var(--foreground) !important;
  border-bottom: none;
  padding-top: 1rem !important;
  padding-bottom: 0.5rem !important;
  background: transparent !important;
}
.cwp-total-label {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--foreground);
}
.cwp-total-fich {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--primary);
}
.cwp-total-plan {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-left: 0.5rem;
}

/* Footer */
.cwp-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.875rem;
  margin-top: 0;
  border-top: none;
}
.cwp-footer-totals { display: flex; flex-direction: column; gap: 0.375rem; font-size: 1rem; color: var(--foreground); }
.cwp-footer-totals strong { font-family: var(--font-mono); font-weight: 800; color: var(--primary); }
.cwp-footer-alarm { color: var(--destructive); font-weight: 700; font-size: 0.9375rem; }
.cwp-footer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4375rem;
}
.cwp-footer-actions .cwp-apply-btn { min-height: 44px; font-size: 1rem; padding: 0.625rem 1.5rem; }
.cwp-link-danger {
  background: transparent; border: none; color: var(--destructive);
  font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-decoration: underline;
  padding: 0;
}
.cwp-link-danger:hover { color: #3b82f6; }

/* Modal editar fichaje (sobre el principal) */
.cwp-fich-modal {
  max-width: 28rem;
  width: 92vw;
  padding: 1.5rem;
}
.cwp-fe-fields { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.cwp-fe-fields label { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-weight: 600; color: var(--foreground); }
.cwp-fe-fields input[type="time"],
.cwp-fe-fields input[type="number"] {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  padding: 0.4375rem 0.625rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--foreground);
  width: 8rem;
}
.cwp-fe-buttons { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ─── Popup semana — responsive mobile (<=768px) ─────────────────────────
   La tabla colapsa a "cards apiladas" via display:block. Cada <tr> se
   convierte en una card vertical. Sin duplicar HTML, sin JS extra.
   En desktop la tabla sigue funcionando exactamente igual. */
@media (max-width: 768px) {
  /* M5: quitar el handle bar de iPhone (::before generado por la regla
     global de .modal-content en sheets). Para el popup semana no
     queremos la sensación de "deslizar hacia abajo". Solo X. */
  .cwp-modal::before { display: none !important; }

  .cwp-modal {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    padding: 2.5rem 0.75rem 0.625rem; /* padding-top reservado para X absoluta */
    font-size: 0.875rem;
    border-radius: 0;
    position: relative;
  }
  .cwp-head { flex-direction: column; align-items: stretch; gap: 0.5rem; padding-bottom: 0.625rem; }
  .cwp-head-left { gap: 0.375rem; }
  .cwp-title { font-size: 1.0625rem; padding-right: 2rem; /* deja sitio a la X */ }
  /* M4: X arriba-derecha absoluta, separada del aviso amarillo. */
  .cwp-close {
    position: absolute;
    top: 0.5rem;
    right: 0.625rem;
    margin: 0;
    align-self: auto;
    font-size: 1.75rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    background: var(--background);
    border-radius: 0.375rem;
    z-index: 10;
  }
  .cwp-tip { font-size: 0.75rem; padding: 0.375rem 0.5rem; }

  /* Tabla → cards */
  .cwp-table thead { display: none; }
  .cwp-table, .cwp-table tbody { display: block; }
  .cwp-table tr.cwp-row {
    display: block;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.625rem;
    background: var(--card);
  }
  .cwp-table tr.cwp-row td {
    display: block;
    padding: 0.375rem 0;
    border: none;
    background: transparent !important;
  }
  .cwp-c-day { padding-top: 0 !important; }
  .cwp-day-name { display: inline-flex; }
  .cwp-day-num { font-size: 1.25rem; }

  .cwp-c-tipo::before { content: "Tipo"; display: block; font-size: 0.6875rem; font-weight: 700; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; }
  .cwp-c-horario::before { content: "Horario"; display: block; font-size: 0.6875rem; font-weight: 700; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; }
  .cwp-c-fichaje::before { content: "Fichajes"; display: block; font-size: 0.6875rem; font-weight: 700; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; }
  .cwp-c-total::before { content: "Horas trabajadas"; display: block; font-size: 0.6875rem; font-weight: 700; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; }
  .cwp-c-actions::before { content: "Acciones"; display: block; font-size: 0.6875rem; font-weight: 700; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; }

  .cwp-day-type { width: 100%; min-height: 44px; padding: 0.5rem; font-size: 0.9375rem; }

  /* Pills y fichajes apilados, no inline */
  .cwp-tramos-edit { gap: 0.375rem; }
  .cwp-tramo { padding: 0.375rem 0.5rem; }
  .cwp-tramo input[type="time"] { width: 4rem; font-size: 0.9375rem; padding: 0.25rem 0.1875rem; }
  .cwp-t-rm { font-size: 1.25rem; padding: 0 0.375rem; }
  .cwp-add-tramo { padding: 0.4375rem 0.625rem; font-size: 0.875rem; min-height: 36px; }

  .cwp-fich-inline { padding: 0.375rem 0.5rem; gap: 0.375rem; flex-wrap: wrap; }
  .cwp-fich-inline input[type="time"] { width: 4rem; font-size: 0.9375rem; padding: 0.25rem 0.1875rem; }
  .cwp-fich-inline input[type="number"] { width: 3rem; font-size: 0.9375rem; }
  .cwp-fi-x { font-size: 1.25rem; padding: 0 0.375rem; }
  .cwp-fi-add { font-size: 0.875rem; padding: 0.4375rem 0.75rem; min-height: 36px; margin-left: 0; margin-top: 0.375rem; }

  /* Acciones grandes y full width para thumb */
  .cwp-c-actions button + button { margin-left: 0; }
  .cwp-c-actions { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
  .cwp-act-reset, .cwp-act-fichar { min-height: 40px; padding: 0.5rem 0.875rem; flex: 1; }

  /* Fila TOTAL en mobile: card destacada */
  .cwp-table tr.cwp-total-row {
    display: block;
    border: 2px solid var(--primary);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.5rem;
    background: color-mix(in srgb, var(--primary) 5%, var(--background));
  }
  .cwp-table tr.cwp-total-row td { display: inline-block; padding: 0; }
  .cwp-table tr.cwp-total-row td:nth-child(1) { display: block; margin-bottom: 0.25rem; }
  .cwp-table tr.cwp-total-row td:nth-child(2),
  .cwp-table tr.cwp-total-row td:nth-child(3),
  .cwp-table tr.cwp-total-row td:nth-child(4),
  .cwp-table tr.cwp-total-row td:nth-child(6) { display: none; }
  .cwp-table tr.cwp-total-row .cwp-c-total { display: block !important; }
  .cwp-table tr.cwp-total-row .cwp-c-total::before { content: ""; margin: 0; }

  /* Footer apilado */
  .cwp-footer { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .cwp-footer-actions { width: 100%; }
  .cwp-apply-btn { width: 100%; min-height: 48px; font-size: 0.9375rem; }
  .cwp-footer-totals { font-size: 0.9375rem; }

  /* M1 (v2): Horario habitual mobile en UNA columna (de lunes a domingo
     apilados verticalmente). En 2 columnas las horas y la X se aplastaban
     siempre. Vertical es mucho más cómodo en pantallas estrechas. La
     regla 769-900 (tablet) está acotada arriba, así que sin conflicto. */
  .hh-grid { grid-template-columns: 1fr; }
  .hh-day { min-height: auto; }
  .hh-tramo { padding: 0.3125rem 0.5rem; gap: 0.375rem; }
  .hh-tramo input[type="time"] {
    width: auto;
    flex: 1;
    padding: 0.25rem 0.375rem;
    font-size: 0.9375rem;
  }

  /* M2 (v2): el botón Hoy del calendario anual no cabe en iPhone.
     Decisión: ocultarlo en mobile. La nav año arriba ya cumple, y el
     usuario puede tocar 'Hoy' en desktop. */
  #calToday { display: none !important; }
  .cal-year-total {
    margin-left: 0.375rem;
    padding: 0.1875rem 0.5rem;
    font-size: 0.8125rem;
  }
}
.cal-week-day-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.5rem;
  border-radius: 0.375rem;
  transition: background 150ms ease;
}
.cal-week-day-row:hover { background: var(--muted); }
.cal-week-day-row.editing { background: var(--muted); }
.cal-week-day-label { min-width: 5.5rem; font-weight: 600; font-size: 0.875rem; }
.cal-week-day-status { flex: 1; font-size: 0.8125rem; color: var(--muted-foreground); }
.cal-week-day-hours { font-weight: 700; font-family: var(--font-mono); min-width: 4.5rem; text-align: right; }
.cal-week-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--primary);
  font-weight: 700;
}
.cal-week-total-value { font-size: 1.25rem; color: var(--primary); font-family: var(--font-mono); }