/* ========================================
   CALENDARIO DE TURNOS - CÁDIZ
   Rediseño (mobile-first, tema "ink")
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── CSS Variables ── */
:root {
  /* Surfaces */
  --bg: #0A0B14;
  --bg-elev: #11131E;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-strong: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.11);
  --text: #F5F6FA;
  --text-mute: rgba(245, 246, 250, 0.55);
  --text-faint: rgba(245, 246, 250, 0.32);

  /* Aliases legacy (mantengo para que estilos inline antiguos sigan teniendo color razonable) */
  --bg-color: var(--bg-elev);
  --bg-primary: var(--bg);
  --bg-secondary: var(--bg-elev);
  --bg-card: var(--surface);
  --bg-glass: var(--surface);
  --bg-glass-border: var(--border);
  --border-color: var(--border-strong);
  --text-primary: var(--text);
  --text-secondary: var(--text-mute);
  --text-main: var(--text);
  --text-muted: var(--text-faint);

  /* Semánticos oklch */
  --work: oklch(72% 0.13 248);
  --work-bg: oklch(72% 0.13 248 / 0.13);
  --rest: oklch(88% 0.17 100);
  --rest-bg: oklch(88% 0.17 100 / 0.18);
  --today: oklch(80% 0.13 75);
  --today-bg: oklch(80% 0.13 75 / 0.18);
  --vacation: oklch(70% 0.16 25);
  --vacation-bg: oklch(70% 0.16 25 / 0.16);
  --week: oklch(70% 0.16 295);
  --flag: oklch(70% 0.18 25);

  /* Accent legacy mappings */
  --primary: var(--work);
  --accent-blue: var(--work);
  --accent-teal: var(--rest);
  --accent-amber: var(--today);
  --accent-red: var(--vacation);
  --accent-purple: var(--week);
  --accent-blue-glow: oklch(72% 0.13 248 / 0.3);
  --accent-teal-glow: oklch(76% 0.13 175 / 0.3);
  --accent-amber-glow: oklch(80% 0.13 75 / 0.3);
  --accent-purple-glow: oklch(70% 0.16 295 / 0.25);
  --gradient-accent: linear-gradient(180deg, #5b7cff 0%, #4665e0 100%);
  --gradient-teal:   linear-gradient(180deg, #4adba9 0%, #2fbf91 100%);
  --gradient-purple: linear-gradient(180deg, #a78bfa 0%, #7c5cf0 100%);
  --gradient-card:   linear-gradient(180deg, #14172a 0%, #0d0f1c 100%);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ── */
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.5;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 600px at 18% 0%, rgba(91, 124, 255, 0.06), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(74, 219, 169, 0.04), transparent 60%);
  z-index: 0;
  pointer-events: none;
}

.mono {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── App container (mobile-first; centrado en desktop) ── */
.app-container {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 0 auto;
  /* Respect the iPhone notch / Dynamic Island so the month title isn't hidden
     behind the status bar (the page uses viewport-fit=cover). */
  padding: max(28px, calc(env(safe-area-inset-top, 0px) + 24px)) 18px 110px;
  min-height: 100vh;
}

/* ── Screens (tabbar switching) ── */
.screen { display: none; animation: fadeIn .25s ease both; }
.screen.active { display: block; }

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

/* ── Page header ── */
.app-header {
  text-align: left;
  margin-bottom: 14px;
  padding: 6px 4px 0;
  background: none;
  border: none;
}

.page-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}

.app-header h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-top: 4px;
  line-height: 1.1;
}

.app-header .subtitle {
  font-size: 13px;
  color: var(--text-mute);
  font-weight: 400;
  margin-top: 4px;
}

/* ── Info Bar (compacta, una sola tarjeta interior) ── */
.info-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 12px;
}

.info-card {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--transition-fast);
}

.info-card:hover { background: var(--surface-strong); }

.info-card .icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}

.info-card .icon.blue   { background: var(--work-bg);     color: var(--work); }
.info-card .icon.teal   { background: var(--rest-bg);     color: var(--rest); }
.info-card .icon.amber  { background: var(--today-bg);    color: var(--today); }
.info-card .icon.purple { background: oklch(70% 0.16 295 / 0.18); color: var(--week); }

.info-card .info-content { min-width: 0; }
.info-card .info-content h3 {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}
.info-card .info-content p {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Month chips (Trabajo / Descanso / Vacaciones) ── */
.month-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scrollbar-width: none;
}
.month-chips::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}
.chip .num {
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.chip.chip-work     { color: var(--work);     border-color: oklch(72% 0.13 248 / 0.3); background: oklch(72% 0.13 248 / 0.1); }
.chip.chip-rest     { color: var(--rest);     border-color: oklch(88% 0.17 100 / 0.35); background: oklch(88% 0.17 100 / 0.12); }
.chip.chip-vacation { color: var(--vacation); border-color: oklch(70% 0.16 25 / 0.3);  background: oklch(70% 0.16 25 / 0.1); }

/* ── Aviso legal/informativo (debajo del calendario) ── */
.disclaimer-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 12px 14px;
  background: var(--today-bg);
  border: 1px solid oklch(80% 0.13 75 / 0.35);
  border-radius: var(--radius-md);
}
.disclaimer-icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.4;
}
.disclaimer-text {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--today);
}

/* ── Action Bar / Buttons ── */
.action-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover  { background: var(--surface-strong); }
.btn:active { transform: scale(0.98); }

.btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}
.btn-small:hover  { background: var(--surface-strong); }
.btn-small:active { transform: scale(0.96); }

.btn-primary {
  background: var(--gradient-accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 20px -8px rgba(91, 124, 255, 0.5), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover { background: var(--gradient-accent); filter: brightness(1.05); }

#uploadTurnosBtn,
.btn-primary.mint {
  background: var(--gradient-teal) !important;
  box-shadow: 0 8px 20px -8px rgba(74, 219, 169, 0.5), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

#summaryBtn,
.btn-primary.purple {
  background: var(--gradient-purple) !important;
  box-shadow: 0 8px 20px -8px rgba(139, 92, 246, 0.5), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* ── Botón Ajustes (debajo de los chips, calendario) ── */
.settings-btn {
  width: 100%;
  margin: 4px 0 14px;
  height: 42px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-strong);
  border-color: var(--border-strong);
  color: var(--text);
}
.settings-btn:hover { background: var(--surface); }

/* ── Mes en curso (título arriba del calendario) ── */
.month-title {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 18px 0 16px;
  line-height: 1.1;
  text-transform: capitalize;
}

/* ── Month slider (◀ Anterior / Siguiente ▶) — debajo del calendario ── */
.year-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 12px 0 10px;
  grid-column: 1 / -1;
  position: relative;
}
/* Divisor vertical fino entre los dos botones */
.year-nav::after {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 1px;
  background: var(--border);
  transform: translateX(-50%);
  pointer-events: none;
}

.year-nav .btn {
  flex: 1;
  height: 46px;
  background: transparent !important;
  border: none !important;
  color: var(--text-mute) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 0 14px !important;
  box-shadow: none !important;
}
.year-nav .btn:hover { color: var(--text) !important; background: transparent !important; }

/* ── Legend ── */
.legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 10px;
  column-gap: 14px;
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-mute);
  font-weight: 400;
}

.legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
.legend-dot.work       { background: oklch(72% 0.13 248 / 0.33); border: 1px solid oklch(72% 0.13 248 / 0.55); }
.legend-dot.rest       { background: oklch(88% 0.17 100 / 0.38); border: 1px solid oklch(88% 0.17 100 / 0.6); }
.legend-dot.today      { background: oklch(80% 0.13 75 / 0.4);   border: 1px solid var(--today); }
.legend-dot.vacation   { background: oklch(70% 0.16 25 / 0.33);  border: 1px solid oklch(70% 0.16 25 / 0.55); }
.legend-dot.no-data    { background: rgba(255,255,255,0.06);     border: 1px solid var(--border); }
.legend-dot.current-week {
  background: transparent;
  border: 2px solid var(--week);
}

/* ── Códigos de turno en la leyenda (FD, FT, LC, HP, DA, AP, AJ, EF, HG, VAC) ──
   Todos los badges de la leyenda comparten el mismo verde mint (hue 165) que
   impregna la paleta del proyecto. Solo la letra del badge distingue cada
   código. Las celdas del calendario mantienen sus colores propios; aquí
   sólo se uniformiza la leyenda. */
.legend-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 16px;
  border-radius: 4px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  background: oklch(75% 0.13 165 / 0.18);
  border: 1px solid oklch(75% 0.13 165 / 0.5);
  color: oklch(82% 0.13 165);
}

/* ── Calendar grid wrapper ── */
.calendar-grid { margin-bottom: 10px; }

.month-card {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  animation: fadeIn .3s ease both;
}
.month-card.has-current-week { /* visual highlight is per-cell instead */ }

.month-header { display: none; }

/* Day names header (L M X J V S D) */
.day-names {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 6px;
  padding: 0 2px;
}
.day-name {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 0;
}

/* Days grid */
.days-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

/* ── Day Cell ── */
.day-cell {
  aspect-ratio: 0.75;
  min-height: 78px;
  border-radius: 14px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 9px 8px 11px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.day-cell:active { transform: scale(0.96); }

.day-cell.empty { background: transparent; cursor: default; pointer-events: none; }
.day-cell.no-data { background: rgba(255,255,255,0.02); }
.day-cell.no-data .day-shift { color: var(--text-faint); }

.day-cell.work { background: var(--work-bg); }
.day-cell.work .day-shift { color: var(--work); }
.day-cell.work .day-number { color: rgba(255,255,255,0.5); }

.day-cell.work.shift-other { background: oklch(70% 0.16 25 / 0.13); }
.day-cell.work.shift-other .day-shift { color: var(--vacation); }

.day-cell.rest { background: var(--rest-bg); }
.day-cell.rest .day-shift { color: var(--rest); }
.day-cell.rest .day-number { color: rgba(255,255,255,0.5); }

.day-cell.today {
  background: var(--today-bg) !important;
  border-color: var(--today) !important;
}
.day-cell.today .day-shift { color: var(--today) !important; }
.day-cell.today .day-number { color: var(--today); opacity: 0.85; }

/* Semana actual: ya no se resalta toda la semana, solo el día de hoy mantiene su borde ámbar.
   La clase la sigue añadiendo app.js para no tocar la lógica, pero no produce estilo. */
.day-cell.current-week-day { box-shadow: none; }

.day-cell.vacation {
  background: var(--vacation-bg) !important;
}
.day-cell.vacation .day-shift { color: var(--vacation) !important; }
.day-cell.vacation .day-number { color: rgba(255,255,255,0.5); }

/* Day number (top-left) */
.day-number {
  font-size: 13px;
  font-family: 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1;
  color: var(--text-mute);
  position: static;
  align-self: flex-start;
}

/* Day number with worked hours saved — clearly underlined so the user can
   tell at a glance which days they've already filled in. */
.day-number.has-hours {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--work, #4ade80);
  font-weight: 700;
  color: #fff !important;
  opacity: 1 !important;
}

/* Day shift value (center-bottom) */
.day-shift {
  font-family: 'Geist Mono', monospace;
  font-weight: 700;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  align-self: center;
  margin: 0 0 2px;
  max-width: 100%;
  text-align: center;
}

/* "DS" is shorter — slightly different style */
.day-cell.rest .day-shift {
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  letter-spacing: 0.04em;
}

/* Texto no numérico (manual o cualquier letra) → color verde */
.day-cell .day-shift.day-shift-text,
.day-cell.rest .day-shift.day-shift-text,
.day-cell.work .day-shift.day-shift-text,
.day-cell.vacation .day-shift.day-shift-text,
.day-cell.no-data .day-shift.day-shift-text {
  color: #22c55e !important;
}

/* DS (descansos) → siempre amarillo, sobrescribe cualquier otra regla */
.day-cell .day-shift.day-shift-ds,
.day-cell.rest .day-shift.day-shift-ds,
.day-cell.today .day-shift.day-shift-ds,
.day-cell.work .day-shift.day-shift-ds,
.day-cell.no-data .day-shift.day-shift-ds {
  color: var(--rest) !important;
}

/* Week number badge in cell corner */
.week-badge {
  position: absolute;
  top: 6px;
  right: 7px;
  font-size: 9.5px;
  font-family: 'Geist Mono', monospace;
  font-weight: 700;
  color: var(--week);
  letter-spacing: 0.02em;
  line-height: 1;
  z-index: 2;
}

/* Cierre badge (🚩) */
.cierre-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.95;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
  z-index: 3;
  cursor: help;
}

/* Sextos note (⚖️) — top-left corner of the Sunday cell. Indica que la
   semana natural fue procesada por el subsistema de sextos y aplicó un
   ajuste a HEPES Acumuladas / Días Acumulados. El detalle va en `title`. */
.sextos-note {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 10px;
  line-height: 1;
  z-index: 3;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
  cursor: help;
}
@media (max-width: 480px) {
  .sextos-note { font-size: 9px; top: 3px; left: 3px; }
}

/* Incident badge (⚠️) — bottom-left corner of the cell, near the shift number. */
.incident-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 13px;
  line-height: 1;
  z-index: 4;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
  pointer-events: none;
  animation: incidentPulse 2.2s ease-in-out infinite;
}
@media (max-width: 480px) {
  .incident-badge { font-size: 11px; bottom: 3px; left: 3px; }
}
@keyframes incidentPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* Dieta badge (🍽️) — top-right corner of the cell. Indica que el día tiene
   dieta registrada. Comparte esquina con la semana (S##, solo el primer día
   de cada semana de turno), por eso va con z-index alto para quedar visible. */
.dieta-badge {
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 13px;
  line-height: 1;
  z-index: 5;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
  pointer-events: none;
}
@media (max-width: 480px) {
  .dieta-badge { font-size: 11px; top: 3px; right: 4px; }
}
/* Si el día también muestra el número de semana (S##, primer día de cada semana
   de turno), ambos comparten esquina superior derecha: bajamos la dieta justo
   debajo para que no se solapen. El badge de dieta va antes que el de semana en
   el DOM, de ahí el selector de hermano siguiente. */
.dieta-badge:has(~ .week-badge) { top: 20px; }
@media (max-width: 480px) {
  .dieta-badge:has(~ .week-badge) { top: 17px; }
}

/* Salario card (Hours screen). El grid pasa de 1 a 2 columnas cuando la
   tarjeta EXTRA está visible (marzo / julio / septiembre / diciembre). */
#salarioGrid { grid-template-columns: 1fr; }
#salarioGrid:has(.salario-extra-card:not([hidden])) { grid-template-columns: 1fr 1fr; }
#salarioGrid:has(.salario-renta-card:not([hidden])) { grid-template-columns: 1fr 1fr; }
.salario-card { position: relative; }
.salario-extra-card {
  border-color: oklch(88% 0.17 100 / 0.45);
  background:
    linear-gradient(135deg, oklch(88% 0.17 100 / 0.10), oklch(70% 0.16 25 / 0.05)),
    var(--surface);
  box-shadow: 0 6px 18px -12px oklch(88% 0.17 100 / 0.55);
}
.salario-extra-card[hidden] { display: none; }
.salario-extra-card .extra-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, oklch(88% 0.17 100 / 0.25), oklch(70% 0.16 25 / 0.20));
  border: 1px solid oklch(88% 0.17 100 / 0.55);
  color: oklch(92% 0.14 95);
  text-transform: uppercase;
}
.salario-renta-card {
  border-color: oklch(75% 0.13 165 / 0.45);
  background:
    linear-gradient(135deg, oklch(75% 0.13 165 / 0.10), oklch(72% 0.13 248 / 0.05)),
    var(--surface);
  box-shadow: 0 6px 18px -12px oklch(75% 0.13 165 / 0.55);
}
.salario-renta-card[hidden] { display: none; }
.salario-renta-card .renta-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, oklch(75% 0.13 165 / 0.25), oklch(72% 0.13 248 / 0.20));
  border: 1px solid oklch(75% 0.13 165 / 0.55);
  color: oklch(85% 0.13 165);
  text-transform: uppercase;
}

/* HEPES / DÍAS persist cards (Hours screen) */
.persist-card { display: flex; flex-direction: column; }
.persist-row {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 8px 6px;
  margin-top: 4px;
}
.persist-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  padding: 4px 2px;
  -moz-appearance: textfield;
}
.persist-input::-webkit-outer-spin-button,
.persist-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.persist-sep {
  font-size: 0.75rem;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.persist-hint {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

/* ── Selected day card (info on Horas screen tarjeta horas) ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
}
.card-tight { padding: 14px 16px; }

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--border);
  padding: 20px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(123, 142, 255, 0.16), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(74, 219, 169, 0.10), transparent 60%),
    var(--gradient-card);
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* ── Hours screen specific ── */
.hours-ring {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hours-ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hours-ring-center {
  position: absolute;
  text-align: center;
  inset: 0;
  display: grid;
  place-items: center;
}
.hours-ring-center .big {
  font-family: 'Geist Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
.hours-ring-center .big .unit { font-size: 13px; color: var(--text-mute); margin-left: 2px; }
.hours-ring-center .label {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-top: 4px;
}

.hours-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.hours-legend-item { display: flex; align-items: center; gap: 8px; }
.hours-legend-item .swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.hours-legend-item .info-line { flex: 1; min-width: 0; }
.hours-legend-item .lbl { font-size: 12px; color: var(--text-mute); }
.hours-legend-item .val { font-family: 'Geist Mono', monospace; font-size: 14px; font-weight: 600; }

.mini-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.mini-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width var(--transition-slow);
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
}
.stat-card .lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
  margin-bottom: 6px;
}
.stat-card .val {
  font-family: 'Geist Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.stat-card .val .sub {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 500;
}

/* ── Tab bar (bottom navigation) ── */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  padding: 14px 8px max(18px, env(safe-area-inset-bottom));
  background: rgba(15, 17, 27, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 80;
  box-shadow: 0 -8px 28px -8px rgba(0, 0, 0, 0.5);
  max-width: 460px;
  margin: 0 auto;
}

.tab {
  flex: 1;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  transition: color var(--transition-fast);
}
.tab.active { color: var(--text); }
.tab .tab-icon {
  width: 40px;
  height: 26px;
  border-radius: 9px;
  border: 1px solid transparent;
  display: grid;
  place-items: center;
  transition: background var(--transition-normal), border-color var(--transition-normal);
  font-size: 16px;
}
.tab.active .tab-icon {
  background: var(--surface-strong);
  border-color: var(--border-strong);
}

/* ── Útiles (caja de herramientas) ── */
.utiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.utiles-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 130px;
  padding: 14px 10px;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-normal), border-color var(--transition-normal);
}
.utiles-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.utiles-card:active { transform: translateY(0); }
.utiles-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-size: 28px;
  line-height: 1;
}
.utiles-card-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}
.utiles-card-label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.utiles-card-sub {
  font-size: 0.75rem;
  color: var(--text-mute);
  line-height: 1.3;
}

/* ── BKB (visor del listado de letreros) ── */
.bkb-frame-wrap {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  min-height: calc(100vh - 240px);
}
.bkb-frame-wrap iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 240px);
  min-height: 520px;
  border: 0;
  background: #f4f1e9;
}

/* ── Kms (registro diario de kilómetros) ── */
.kms-header {
  position: relative;
  text-align: center;
}
.kms-logo {
  display: block;
  margin: 0 auto 6px;
  width: 92px;
  height: auto;
  border-radius: 14px;
}
.kms-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kms-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kms-meta-row label {
  flex: 0 0 100px;
  font-size: 0.85rem;
  color: var(--text-mute);
  font-weight: 600;
}
.kms-meta-row input {
  flex: 1;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: 'Geist Mono', monospace;
  font-size: 0.95rem;
}
.kms-turno-auto {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.kms-turno-auto:active { transform: scale(0.96); }
.kms-field-card {
  margin-top: 14px;
}
.kms-field-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.kms-field-head h2 {
  font-size: 1rem;
  margin: 0;
  color: var(--work);
  font-weight: 700;
}
.kms-big-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text);
}
.kms-big-input:focus {
  outline: none;
  border-color: var(--work);
  box-shadow: 0 0 0 3px oklch(70% 0.16 250 / 0.15);
}
.kms-field-hint {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 6px;
  text-align: center;
}
.kms-field-hint.error { color: var(--vacation); }
.kms-result-card {
  margin-top: 14px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
}
.kms-result-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  font-weight: 700;
}
.kms-result-value {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--work);
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.kms-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.kms-bus-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  background: oklch(70% 0.16 250 / 0.12);
  color: var(--work);
  border: 1px solid oklch(70% 0.16 250 / 0.4);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.kms-bus-change:hover { background: oklch(70% 0.16 250 / 0.22); }
.kms-bus-change:active { transform: scale(0.97); }
.kms-result-breakdown {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--text-mute);
  font-weight: 600;
}
.kms-segments {
  list-style: none;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px dashed var(--border);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kms-segments li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.85rem;
}
.kms-segments .kms-seg-bus {
  font-weight: 700;
  color: var(--work);
}
.kms-segments .kms-seg-detail {
  color: var(--text-mute);
  flex: 1;
  font-family: 'Geist Mono', monospace;
  font-size: 0.8rem;
}
.kms-segments .kms-seg-km {
  font-weight: 700;
  font-family: 'Geist Mono', monospace;
}
.kms-segments .kms-seg-del {
  background: transparent;
  border: none;
  color: var(--vacation);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
  -webkit-tap-highlight-color: transparent;
}
.kms-foot-hint {
  font-size: 0.78rem;
  color: var(--text-faint);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
}

/* ── Convenio (visor + buscador) ── */
.convenio-search-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin-bottom: 12px;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.convenio-search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.convenio-search-icon {
  position: absolute;
  left: 10px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0.7;
}
.convenio-search-input-wrap input[type="search"] {
  flex: 1;
  width: 100%;
  padding: 8px 32px 8px 32px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  -webkit-appearance: none;
}
.convenio-search-input-wrap input[type="search"]::-webkit-search-decoration,
.convenio-search-input-wrap input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.convenio-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--text-mute);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.convenio-search-clear[hidden] { display: none; }
.convenio-search-count {
  font-family: 'Geist Mono', monospace;
  font-size: 0.78rem;
  color: var(--text-mute);
  min-width: 42px;
  text-align: center;
}
.convenio-search-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: background var(--transition-normal);
}
.convenio-search-btn:hover:not(:disabled) {
  background: var(--surface-strong);
}
.convenio-search-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.convenio-toc {
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 10px;
}
.convenio-toc summary {
  cursor: pointer;
  padding: 8px 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}
.convenio-toc summary::-webkit-details-marker { display: none; }
.convenio-toc summary::after {
  content: '▾';
  float: right;
  color: var(--text-faint);
  transition: transform var(--transition-fast);
}
.convenio-toc[open] summary::after { transform: rotate(180deg); }
.convenio-toc[open] ol {
  max-height: 50vh;
  overflow: auto;
  padding: 4px 0 8px 22px;
  margin: 0;
}
.convenio-toc li {
  padding: 5px 6px;
  font-size: 0.82rem;
  color: var(--text-mute);
  cursor: pointer;
  border-radius: 6px;
  line-height: 1.35;
}
.convenio-toc li:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

.convenio-doc {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.convenio-art {
  scroll-margin-top: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.convenio-art.is-hidden { display: none; }
.convenio-art h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--work);
  letter-spacing: -0.01em;
}
.convenio-art-body {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  font-size: 0.9rem;
  color: var(--text);
}
mark.convenio-hit {
  background: rgba(255, 215, 0, 0.28);
  color: inherit;
  padding: 0 1px;
  border-radius: 3px;
}
mark.convenio-hit.is-active {
  background: rgba(255, 200, 0, 0.85);
  color: #1a1a1a;
  box-shadow: 0 0 0 2px rgba(255, 200, 0, 0.45);
}

/* ── Sistema tarifario ── */
.tarifario-img {
  width: 100%;
  border-radius: 12px;
  background: #fff;
  cursor: zoom-in;
  display: block;
}

/* ── Horarios grid ── */
.horarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.horarios-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 12px;
  color: var(--text-faint);
  font-size: 0.85rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.horario-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  color: var(--text);
  padding: 0;
  text-align: center;
}
.horario-card:hover { transform: translateY(-2px); border-color: var(--border-strong); background: rgba(255,255,255,0.06); }
.horario-card:active { transform: translateY(0); }
.horario-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  background: #000;
}
.horario-card-emoji {
  font-size: 38px;
  line-height: 1;
  padding: 18px 10px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
.horario-card-name {
  font-size: 0.75rem;
  padding: 6px 8px 10px;
  color: var(--text);
  text-align: center;
  line-height: 1.25;
  background: rgba(0,0,0,0.25);
  word-break: break-word;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Horario fullscreen viewer ── */
.horario-viewer {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: none;
  flex-direction: column;
  touch-action: none;
}
.horario-viewer.active { display: flex; }
.horario-viewer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Respect the iOS status bar / notch / Dynamic Island so the back button
     isn't hidden under the system UI in PWA standalone mode. */
  padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 12px) 10px calc(env(safe-area-inset-left, 0px) + 12px);
  background: rgba(0,0,0,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  flex-shrink: 0;
  min-height: 44px;
}
.horario-viewer-back {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  padding: 9px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.horario-viewer-back:hover,
.horario-viewer-back:active { background: rgba(255,255,255,0.22); }
.horario-viewer-name {
  font-size: 0.95rem;
  font-weight: 600;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.horario-viewer-actions { display: flex; gap: 6px; flex-shrink: 0; }
.horario-viewer-actions .btn-small {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  padding: 9px 12px;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
  min-width: 40px;
  line-height: 1;
}
.horario-viewer-actions .btn-small:hover { background: rgba(255,255,255,0.15); }
.horario-viewer-stage {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
  background: #fff;
}
.horario-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: 0 0;
  will-change: transform;
}
.horario-viewer-stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  display: block;
}

/* ── Modals ── */
.upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 14, 0.7);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  padding: 16px;
}
.upload-overlay.active { opacity: 1; visibility: visible; }

.upload-modal {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  padding: 28px 22px;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  transform: scale(0.96) translateY(12px);
  transition: transform var(--transition-slow);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.upload-overlay.active .upload-modal { transform: scale(1) translateY(0); }

.upload-modal h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.upload-modal p {
  color: var(--text-mute);
  font-size: 13px;
  margin-bottom: 20px;
}

/* Dropzone */
.dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: 16px;
  padding: 36px 20px;
  cursor: pointer;
  position: relative;
  margin-bottom: 16px;
  background: var(--surface);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.dropzone:hover,
.dropzone.drag-over {
  border-color: var(--work);
  background: var(--work-bg);
}
.dropzone .drop-icon { font-size: 2rem; margin-bottom: 10px; display: block; }
.dropzone .drop-text { color: var(--text-mute); font-size: 13px; }
.dropzone .drop-text strong { color: var(--work); font-weight: 600; }
.dropzone input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

.upload-modal .btn-close {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-mute);
  padding: 10px 22px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.upload-modal .btn-close:hover {
  background: var(--surface-strong);
  color: var(--text);
}

/* OCR processing animation on input */
.ocr-processing {
  animation: ocrPulse 1.5s infinite alternate;
  pointer-events: none;
  opacity: 0.7;
}
@keyframes ocrPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 10px 2px rgba(245, 158, 11, 0.4); }
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 20px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  z-index: 200;
  opacity: 0;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  backdrop-filter: blur(16px);
  background: rgba(15, 17, 27, 0.92);
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.6);
  max-width: 86%;
  text-align: center;
  /* The toast sits above the shift modal (z-index 200 > 100). Without this it
     would swallow clicks on buttons that happen to sit underneath it (notably
     "Cerrar y Guardar"), which is what caused the button to "not respond"
     until the toast faded out. */
  pointer-events: none;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast.success { border-color: oklch(76% 0.13 175 / 0.5); }
.toast.error   { border-color: oklch(70% 0.16 25 / 0.5); }
.toast.warning { border-color: oklch(80% 0.13 75 / 0.5); }
.toast.info    { border-color: oklch(72% 0.13 248 / 0.5); }

/* ── Tooltip ── */
.tooltip {
  position: fixed;
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--text);
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  max-width: 220px;
  line-height: 1.4;
}
.tooltip.visible { opacity: 1; }
.tooltip .tooltip-title {
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--work);
  font-size: 12px;
}

/* ── Inputs (within modals) ── */
input[type="text"],
input[type="number"],
input[type="date"],
textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus {
  border-color: var(--work);
  background: var(--bg-elev);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ── Desktop tweaks ── */
@media (min-width: 720px) {
  .app-container { padding: max(36px, calc(env(safe-area-inset-top, 0px) + 28px)) 18px 110px; }
  .day-cell { min-height: 92px; }
  .day-shift { font-size: 28px; }
  .day-name { font-size: 14px; }
}

/* ── Very small phones ── */
@media (max-width: 360px) {
  .app-container { padding: max(22px, calc(env(safe-area-inset-top, 0px) + 20px)) 12px 110px; }
  .day-cell { min-height: 70px; padding: 6px 6px 8px; }
  .day-shift { font-size: 22px; }
  .day-cell.rest .day-shift { font-size: 15px; }
  .day-number { font-size: 12px; }
  .day-name { font-size: 12px; }
  .week-badge { font-size: 9px; top: 4px; right: 5px; }
  .days-grid, .day-names { gap: 4px; }
  .info-card .icon { width: 32px; height: 32px; font-size: 16px; }
  .info-card .info-content p { font-size: 13px; }
}

/* ── Hours screen: typography bump (tarjeta principal + Dietas) ── */
#screenHours .hours-ring-center .big { font-size: 26px; }
#screenHours .hours-ring-center .big .unit { font-size: 16px; }
#screenHours .hours-ring-center .label { font-size: 12px; }

#screenHours .hours-legend { gap: 10px; }
#screenHours .hours-legend-item .swatch { width: 10px; height: 10px; }
#screenHours .hours-legend-item .lbl { font-size: 14px; }
#screenHours .hours-legend-item .val { font-size: 17px; }

/* Resaltar la línea de Dietas para que destaque dentro del bloque */
#screenHours .hours-legend-item.diets-row .lbl { font-size: 15px; color: var(--text); font-weight: 600; }
#screenHours .hours-legend-item.diets-row .val { font-size: 19px; color: var(--week); }

#screenHours .stat-card .lbl { font-size: 12px; }
#screenHours .stat-card .val { font-size: 26px; }
#screenHours .stat-card .val .sub { font-size: 14px; }

#screenHours .persist-input { font-size: 1.15rem; padding: 4px 2px; }
#screenHours .persist-sep { font-size: 0.9rem; }
#screenHours .persist-hint { font-size: 12px; }

#screenHours .cycle-target-row .cycle-target-label { font-size: 14px !important; }
#screenHours .cycle-target-row .cycle-target-value { font-size: 16px !important; }
#screenHours .cycle-target-row input[type="number"] { font-size: 16px !important; width: 46px !important; }
#screenHours .cycle-target-row input#hoursProgressTargetM { width: 34px !important; }
#screenHours .cycle-target-row .cycle-target-unit { font-size: 13px !important; }
#screenHours #hoursCycleRange { font-size: 13px; }
#screenHours .mini-bar { height: 7px; }

/* ── Caja de horas extras (objetivo del ciclo superado) ── */
.overtime-box {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid oklch(70% 0.16 25 / 0.45);
  background:
    linear-gradient(135deg, oklch(70% 0.16 25 / 0.18), oklch(88% 0.17 100 / 0.10));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: 0 6px 18px -10px oklch(70% 0.16 25 / 0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: overtimePulse 2.4s ease-in-out infinite;
}
.overtime-box.hidden { display: none; }
.overtime-box .overtime-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--vacation);
  display: flex;
  align-items: center;
  gap: 6px;
}
.overtime-box .overtime-value {
  font-family: 'Geist Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.overtime-box .overtime-hex {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--week);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  letter-spacing: 0.04em;
}
@keyframes overtimePulse {
  0%, 100% { box-shadow: 0 6px 18px -10px oklch(70% 0.16 25 / 0.55), inset 0 1px 0 rgba(255,255,255,0.05); }
  50%      { box-shadow: 0 6px 24px -8px  oklch(70% 0.16 25 / 0.85), inset 0 1px 0 rgba(255,255,255,0.05); }
}

/* ══════════════════════════════════════════════
   AVISO "RELLENA LOS KILÓMETROS" (pantalla completa)
   Sale 30 min antes del inicio y 30 min después del fin del servicio.
   ══════════════════════════════════════════════ */
.kms-reminder {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 40%, oklch(70% 0.18 45 / 0.96), oklch(58% 0.20 30 / 0.98));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: kmsReminderIn 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.kms-reminder[hidden] { display: none; }
@keyframes kmsReminderIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.kms-reminder-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.kms-reminder-close:active { transform: scale(0.92); }
.kms-reminder-inner {
  text-align: center;
  color: #fff;
  max-width: 480px;
}
.kms-reminder-icon {
  font-size: 88px;
  line-height: 1;
  animation: kmsReminderBob 1.6s ease-in-out infinite;
}
@keyframes kmsReminderBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.kms-reminder-title {
  margin-top: 18px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  line-height: 1.1;
}
.kms-reminder-sub {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 600;
  opacity: 0.95;
  line-height: 1.4;
}
.kms-reminder-go {
  margin-top: 28px;
  padding: 16px 28px;
  border-radius: 16px;
  border: none;
  background: #fff;
  color: oklch(55% 0.20 30);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}
.kms-reminder-go:active { transform: scale(0.97); }

/* ══════════════════════════════════════════════
   PANTALLA ESTADÍSTICAS
   ══════════════════════════════════════════════ */
.estad-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 16px;
}
.estad-header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.estad-year-select {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2380879a' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* Hero card: donut + restantes */
.estad-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 22px 20px;
}
.estad-donut-wrap {
  position: relative;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
}
.estad-donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
.estad-donut-center .num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.estad-donut-center .num .unit {
  font-size: 18px;
  color: var(--text-mute);
  margin-left: 2px;
  font-weight: 600;
}
.estad-donut-center .label {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 6px;
}
.estad-donut-center .sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}
.estad-hero-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.estad-hero-lbl {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.estad-hero-val {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.estad-hero-val .unit {
  font-size: 16px;
  color: var(--text-mute);
  margin-left: 2px;
  font-weight: 600;
}
.estad-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  background: oklch(75% 0.13 165 / 0.14);
  border: 1px solid oklch(75% 0.13 165 / 0.35);
  font-size: 12px;
  margin-top: 4px;
}
.estad-hero-chip .arrow { font-size: 12px; color: var(--rest); }
.estad-hero-chip .num   { font-weight: 700; color: oklch(82% 0.12 165); }
.estad-hero-chip .muted { color: var(--text-mute); font-size: 11px; }
.estad-hero-chip.negative { background: oklch(70% 0.16 25 / 0.14); border-color: oklch(70% 0.16 25 / 0.35); }
.estad-hero-chip.negative .arrow,
.estad-hero-chip.negative .num { color: var(--vacation); }
.estad-hero-text {
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.5;
  margin: 4px 0 0 0;
}

/* Tarjetas genéricas (HEPES, DA, AP, APJ, Festivos, ...) */
.estad-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.estad-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.estad-card-lbl {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.estad-card-lbl.strong { color: var(--text); letter-spacing: 0.04em; text-transform: none; font-size: 14px; }
.estad-card-sublbl { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
.estad-card-val {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}
.estad-card-val .muted { font-size: 13px; color: var(--text-faint); font-weight: 500; letter-spacing: 0; }
.estad-card-val .suf   { margin-left: 4px; }
.estad-card-val.amber  { color: var(--rest); }
.estad-card-val.teal   { color: var(--work); }
.estad-card-val.blue   { color: var(--work); }
.estad-card-val.mint   { color: oklch(82% 0.13 165); }
.estad-card-val.red    { color: var(--vacation); }
.estad-card-hint {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 500;
}

/* Iconos */
.estad-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.estad-icon-mini {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}
.estad-icon-box.teal,   .estad-icon-mini.teal   { background: oklch(75% 0.13 165 / 0.16); border: 1px solid oklch(75% 0.13 165 / 0.3); }
.estad-icon-box.amber,  .estad-icon-mini.amber  { background: oklch(88% 0.17 100 / 0.14); border: 1px solid oklch(88% 0.17 100 / 0.3); }
.estad-icon-box.purple, .estad-icon-mini.purple { background: oklch(70% 0.16 295 / 0.16); border: 1px solid oklch(70% 0.16 295 / 0.3); }
.estad-icon-box.blue,   .estad-icon-mini.blue   { background: oklch(72% 0.13 248 / 0.16); border: 1px solid oklch(72% 0.13 248 / 0.32); }
.estad-icon-box.mint,   .estad-icon-mini.mint   { background: oklch(82% 0.13 165 / 0.16); border: 1px solid oklch(82% 0.13 165 / 0.3); }
.estad-icon-box.red,    .estad-icon-mini.red    { background: oklch(70% 0.16 25 / 0.14); border: 1px solid oklch(70% 0.16 25 / 0.3); }

/* Banda ancha (Dietas / Licencia) */
.estad-card-wide {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
.estad-card-wide .estad-card-body { flex: 1; min-width: 0; }
.estad-card-tail {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.estad-card-tail.teal { color: oklch(82% 0.13 165); }

/* Grid 2 columnas */
.estad-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

/* Mini barra de progreso (AP, APJ) */
.estad-progress {
  height: 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.estad-progress-bar {
  display: block;
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width var(--transition-slow);
}
.estad-progress-bar.blue { background: linear-gradient(90deg, oklch(72% 0.13 248), oklch(78% 0.10 230)); }
.estad-progress-bar.mint { background: linear-gradient(90deg, oklch(75% 0.13 165), oklch(82% 0.13 165)); }

/* Encabezado de sección (Festivos / Licencia / Ranking) */
.estad-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin: 22px 0 8px;
}
.estad-section-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.estad-year-chip {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 500;
}
.estad-section-tail {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.estad-section-tail.red { color: var(--vacation); }

/* Licencia desglose */
.estad-licencia-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
}
.estad-licencia-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.estad-licencia-bar {
  display: flex;
  height: 8px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.estad-licencia-bar > span {
  display: block;
  height: 100%;
  transition: width var(--transition-slow);
}
.estad-licencia-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.estad-licencia-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.estad-licencia-row .dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.estad-licencia-row .name { flex: 1; color: var(--text); }
.estad-licencia-row .num  { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 15px; }
.estad-licencia-row .suf  { font-size: 11px; color: var(--text-faint); }

/* Ranking turnos */
.estad-ranking {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.estad-rank-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.estad-rank-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--rank-color, transparent) 0%, transparent 60%);
  opacity: 0.18;
  pointer-events: none;
}
.estad-rank-pos {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
}
.estad-rank-badge {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: 'Geist Mono', monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--rank-color, var(--text));
  background: color-mix(in oklab, var(--rank-color, var(--surface-strong)) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--rank-color, var(--border-strong)) 30%, transparent);
}
.estad-rank-info { min-width: 0; }
.estad-rank-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}
.estad-rank-time {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.estad-rank-count {
  text-align: right;
  font-family: 'Geist Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rank-color, var(--text));
  line-height: 1;
}
.estad-rank-count .suf {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  margin-top: 2px;
}

/* Desplegable con todos los turnos repetidos */
.estad-rank-all {
  margin-top: 6px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.estad-rank-all > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.estad-rank-all > summary::-webkit-details-marker { display: none; }
.estad-rank-all-summary-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.estad-rank-all-summary-meta {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
.estad-rank-all-chevron {
  font-size: 14px;
  color: var(--text-mute);
  transition: transform var(--transition-fast);
}
.estad-rank-all[open] > summary .estad-rank-all-chevron {
  transform: rotate(180deg);
}
.estad-rank-all-list {
  border-top: 1px solid var(--border);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow-y: auto;
}
.estad-rank-all-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
}
.estad-rank-all-row:hover { background: var(--bg); }
.estad-rank-all-badge {
  width: 32px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-family: 'Geist Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
}
.estad-rank-all-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;
}
.estad-rank-all-time {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.estad-rank-all-count {
  text-align: right;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.estad-rank-all-count .num {
  font-family: 'Geist Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.estad-rank-all-count .suf {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

/* Comparativa: barras 2023–2026 */
.estad-comparativa {
  margin-top: 14px;
  padding: 18px 16px 14px;
}
.estad-comparativa-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.estad-comparativa-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.estad-comparativa-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
}
.estad-comparativa-tabs button {
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
}
.estad-comparativa-tabs button.active {
  background: var(--surface-strong);
  color: var(--text);
}

.estad-comparativa-chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  height: 200px;
  align-items: end;
  padding: 6px 4px 0;
}
.estad-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 8px;
}
.estad-bar-col .top-num {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--text-mute);
  font-weight: 600;
}
.estad-bar-col.current .top-num { color: var(--work); }
.estad-bar-col .bar {
  width: 100%;
  max-width: 60px;
  border-radius: 10px 10px 4px 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  min-height: 4px;
  transition: height var(--transition-slow);
}
.estad-bar-col.current .bar {
  background: linear-gradient(180deg, oklch(78% 0.10 230), oklch(60% 0.15 248));
  border-color: transparent;
  box-shadow: 0 0 18px -4px oklch(72% 0.13 248 / 0.55);
}
.estad-bar-col .year-lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--text-mute);
}
.estad-bar-col.current .year-lbl {
  color: var(--text);
  font-weight: 700;
  position: relative;
}
.estad-bar-col.current .year-lbl::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--work);
  margin: 4px auto 0;
}
.estad-comparativa-foot {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-mute);
}
.estad-comparativa-foot strong { color: var(--text); font-weight: 700; }

/* Horas por mes (gráfica de barras de 12 meses) */
.estad-monthly-card { padding: 14px 10px 12px; }
.estad-monthly-chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  height: 180px;
  align-items: end;
  padding: 6px 2px 0;
}
.estad-monthly-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}
.estad-monthly-col .top-num {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--text-mute);
  font-weight: 600;
  line-height: 1;
}
.estad-monthly-col.current .top-num { color: var(--work); }
.estad-monthly-col .bar {
  width: 100%;
  max-width: 28px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, oklch(80% 0.10 200), oklch(60% 0.13 230));
  border: 1px solid transparent;
  min-height: 3px;
  transition: height var(--transition-slow);
}
.estad-monthly-col.empty .bar {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
}
.estad-monthly-col.current .bar {
  background: linear-gradient(180deg, oklch(82% 0.13 165), oklch(58% 0.16 165));
  box-shadow: 0 0 18px -4px oklch(75% 0.13 165 / 0.55);
}
.estad-monthly-col .month-lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.estad-monthly-col.current .month-lbl {
  color: var(--text);
  font-weight: 700;
}
.estad-monthly-foot {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-mute);
}
.estad-monthly-foot strong { color: var(--text); font-weight: 700; }
@media (max-width: 420px) {
  .estad-monthly-col .month-lbl { font-size: 9px; }
  .estad-monthly-col .top-num { font-size: 9px; }
}

@media (max-width: 420px) {
  .estad-hero { grid-template-columns: 1fr; gap: 14px; }
  .estad-donut-wrap { margin: 0 auto; }
  .estad-hero-side { align-items: flex-start; }
  .estad-card-val { font-size: 26px; }
  .estad-hero-val { font-size: 28px; }
  .estad-rank-row { grid-template-columns: 24px 34px 1fr auto; gap: 10px; padding: 10px 12px; }
  .estad-rank-name { font-size: 14px; }
  .estad-rank-count { font-size: 20px; }
}

/* ── Crédito en pantalla del calendario ── */
.app-credit {
  margin-top: 22px;
  margin-bottom: 6px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0.55;
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   ── ACCESS GATE (pantalla de bloqueo) + ADMIN ──
   ════════════════════════════════════════════════════════════ */

/* Mientras el body tenga .gated, se muestra la pantalla de bloqueo y se
   oculta toda la app. Cuando JS valida el código, quita la clase. */
.access-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 0%, oklch(72% 0.13 248 / 0.18), transparent 60%), var(--bg);
}
body.gated .app-container { display: none !important; }
body.gated .access-gate   { display: flex; }

.access-box {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}
.access-logo {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 10px;
}
.access-box h1 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: var(--text);
}
.access-subtitle {
  font-size: 0.85rem;
  color: var(--text-mute);
  line-height: 1.5;
  margin-bottom: 18px;
}
#accessForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
#accessCodeInput {
  width: 100%;
  padding: 14px 14px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text);
  font-family: 'Geist Mono', monospace;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
#accessCodeInput:focus {
  outline: none;
  border-color: var(--work);
  box-shadow: 0 0 0 3px oklch(72% 0.13 248 / 0.18);
}
#accessSubmit {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: var(--gradient-accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(91, 124, 255, 0.5), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
#accessSubmit:hover  { filter: brightness(1.06); }
#accessSubmit:active { transform: scale(0.98); }
#accessSubmit:disabled { opacity: 0.6; cursor: progress; }

.access-message {
  min-height: 20px;
  font-size: 0.82rem;
  color: var(--vacation);
  margin: 6px 0 8px;
  line-height: 1.4;
}
.access-message.ok { color: var(--rest); }
.access-footer {
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-top: 12px;
  line-height: 1.5;
}

/* ── Panel admin (dentro de Ajustes, solo visible para admin) ── */
.admin-codes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 55vh;
  overflow-y: auto;
}
.admin-loading {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-mute);
  padding: 16px 0;
}
.admin-code-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.admin-code-row.activated { border-color: oklch(72% 0.13 248 / 0.4); }
.admin-code-row.revoked   { border-color: oklch(70% 0.16 25 / 0.4); opacity: 0.65; }
.admin-code-num {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 90px;
}
.admin-code-code {
  font-family: 'Geist Mono', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}
.admin-code-numtag {
  font-family: 'Geist Mono', monospace;
  font-size: 0.65rem;
  color: var(--text-faint);
}
.admin-code-info { min-width: 0; }
.admin-code-status {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.admin-code-status.free    { color: var(--text-mute); font-weight: 500; }
.admin-code-status.active  { color: var(--rest); }
.admin-code-status.gone    { color: var(--vacation); }
.admin-code-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-code-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-code-actions .btn-small {
  padding: 4px 8px;
  font-size: 0.72rem;
}
.admin-code-actions .danger {
  color: var(--vacation);
  border-color: oklch(70% 0.16 25 / 0.4);
}