/* ==========================================================================
   ARBAPP — Design system
   Panel interno Rebuss. Registro: product. Restrained color, tema claro,
   densidad alta para tablas largas. Ver PRODUCT.md para el brief completo.
   ========================================================================== */

:root {
  /* -- Primitivas de color (hex, convertidas desde OKLCH) ----------------
     Antes estas primitivas usaban oklch() directo. Se convirtieron a hex/
     rgba equivalentes (2026-07-26) porque html2canvas (usado por
     html2pdf.js en /scheduling para exportar el resumen a PDF, ver
     public/js/scheduling.js#downloadTableAsPDF) no soporta ningún color
     moderno (oklch/lab/lch/color()) y fallaba con "Attempting to parse an
     unsupported color function 'oklch'" al clonar el DOM para renderizar el
     PDF. El resto de los PDFs del sistema usan Puppeteer del lado servidor
     (Chrome real, sí soporta oklch), por eso nunca se había visto este
     error en otro módulo. Los valores hex fueron calculados con la fórmula
     de conversión OKLCH->sRGB de referencia (Björn Ottosson), son visualmente
     equivalentes. ------------------------------------------------------- */
  --blue-97: #f3f7fe;
  --blue-92: #dde7f5;
  --blue-80: #a0c0ee;
  --blue-65: #548fe6;
  --blue-55: #236dd5;
  --blue-45: #0753b1;
  --blue-30: #002f6e;

  --gray-99: #fafcfe;
  --gray-97: #f3f5f8;
  --gray-94: #e8ebf0;
  --gray-88: #d4d8dd;
  --gray-70: #9a9fa6;
  --gray-55: #6d727a;
  --gray-40: #434850;
  --gray-22: #171b21;
  --gray-14: #080b10;

  --green-45: #067e3f;
  --green-94: #d6f4dd;
  --red-48: #c2272d;
  --red-95: #ffe6e5;
  --amber-55: #bd7900;
  --amber-95: #feedc9;

  /* -- Tokens semánticos --------------------------------------------------- */
  --color-bg: var(--gray-97);
  --color-surface: var(--gray-99);
  --color-surface-sunken: var(--gray-94);
  --color-sidebar-bg: #fafcfe;

  --color-border: var(--gray-88);
  --color-border-strong: var(--gray-70);

  --color-text: var(--gray-14);
  --color-text-muted: var(--gray-55);
  --color-text-subtle: var(--gray-70);

  --color-accent: var(--blue-55);
  --color-accent-hover: var(--blue-45);
  --color-accent-active: var(--blue-30);
  --color-accent-soft: var(--blue-92);
  --color-accent-softer: var(--blue-97);
  --color-accent-border: var(--blue-80);
  --color-on-accent: var(--gray-99);

  --color-success: var(--green-45);
  --color-success-soft: var(--green-94);
  --color-danger: var(--red-48);
  --color-danger-soft: var(--red-95);
  --color-warning: var(--amber-55);
  --color-warning-soft: var(--amber-95);

  /* -- Espaciado (base 4pt) -------------------------------------------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* -- Radios y sombras -------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-xs: 0 1px 2px rgba(28, 34, 43, 0.07);
  --shadow-sm: 0 2px 8px rgba(28, 34, 43, 0.09);
  --shadow-md: 0 10px 28px rgba(28, 34, 43, 0.14);

  /* -- Tipografía -------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.8125rem;
  --leading-base: 1.5;

  /* -- Movimiento ---------------------------------------------------------- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;

  /* -- Escala z-index ------------------------------------------------------ */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* -- Layout shell -------------------------------------------------------- */
  --topbar-height: 56px;
  --sidebar-width: 236px;
  --sidebar-width-collapsed: 64px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--space-md); font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); margin-top: var(--space-xl); }
h3 { font-size: var(--text-md); }
p { margin: 0 0 var(--space-sm); color: var(--color-text-muted); max-width: 75ch; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.hidden { display: none !important; }

/* ==========================================================================
   Shell: top bar + sidebar + content
   ========================================================================== */

.top-bar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0 var(--space-lg);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.top-bar .brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--color-text);
}

.top-bar .brand img { height: 22px; width: auto; display: block; }

.top-bar .menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
}
.link-btn i { font-size: 0.85em; }
.link-btn:hover { color: var(--color-text); background: var(--color-surface-sunken); text-decoration: none; }

.container { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-height)); }

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-border);
  min-height: calc(100vh - var(--topbar-height));
  padding: var(--space-md) var(--space-sm);
  transition: width var(--duration-base) var(--ease-out-quart);
}

.sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.sidebar li a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar li a i { width: 16px; text-align: center; color: var(--color-text-subtle); flex-shrink: 0; }

.sidebar li a:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
  text-decoration: none;
}
.sidebar li a:hover i { color: var(--color-text-muted); }

.sidebar li a.active {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
}
.sidebar li a.active i { color: var(--color-accent); }

.sidebar-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  justify-content: flex-end;
  font: inherit;
  font-size: var(--text-sm);
  background: none;
  border: none;
  color: var(--color-text-subtle);
  cursor: pointer;
  padding: var(--space-2xs) var(--space-xs) var(--space-md);
}
.sidebar-toggle:hover { color: var(--color-text); }
.sidebar-toggle i { transition: transform var(--duration-base) var(--ease-out-quart); }

.sidebar.collapsed { width: var(--sidebar-width-collapsed); }
.sidebar.collapsed .label { display: none; }
.sidebar.collapsed li a { justify-content: center; }
.sidebar.collapsed .sidebar-toggle { justify-content: center; }
.sidebar.collapsed .sidebar-toggle i { transform: rotate(180deg); }

#content {
  flex: 1;
  min-width: 0;
  padding: var(--space-xl) var(--space-2xl);
  max-width: 1280px;
}

/* ==========================================================================
   Panels / cards
   Usar con moderación: agrupar, no decorar. Nada de cards anidadas.
   ========================================================================== */

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.panel-header h2 { margin: 0; }
.panel-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-2xs) 0 0; }

.field-grid {
  display: flex;
  gap: var(--space-lg) var(--space-xl);
  flex-wrap: wrap;
}

.field-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.field-group-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.field-row { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field label,
.field-row > label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.field-hint { margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); }

.preview-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--color-surface-sunken);
}

/* ==========================================================================
   Formularios
   ========================================================================== */

.form-group { margin-bottom: var(--space-md); display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }

input, select, textarea {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  transition: border-color var(--duration-fast) var(--ease-out-quart), box-shadow var(--duration-fast) var(--ease-out-quart);
}
input::placeholder, textarea::placeholder { color: var(--color-text-subtle); }

input:hover, select:hover, textarea:hover { border-color: var(--gray-55); }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--color-surface-sunken);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  padding: 0;
}

.error-msg {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border: 1px solid rgba(194, 39, 45, 0.25);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
}

.success-msg {
  background: var(--color-success-soft);
  color: var(--color-success);
  border: 1px solid rgba(6, 126, 63, 0.25);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
}

#statusMessages { margin-bottom: var(--space-md); }
#statusMessages .success {
  background: var(--color-success-soft); color: var(--color-success);
  border: 1px solid rgba(6, 126, 63, 0.25);
  border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm);
}
#statusMessages .error {
  background: var(--color-danger-soft); color: var(--color-danger);
  border: 1px solid rgba(194, 39, 45, 0.25);
  border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm);
}

/* ==========================================================================
   Botones — un solo vocabulario en toda la app
   ========================================================================== */

.btn, button:not(.link-btn):not(.sidebar-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--color-accent);
  color: var(--color-on-accent);
  transition: background var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart), transform var(--duration-fast) var(--ease-out-quart);
}
.btn:hover, button:not(.link-btn):not(.sidebar-toggle):hover { background: var(--color-accent-hover); text-decoration: none; }
.btn:active, button:not(.link-btn):not(.sidebar-toggle):active { background: var(--color-accent-active); }
.btn:disabled, button:disabled { background: var(--gray-88); color: var(--color-text-subtle); cursor: not-allowed; }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-surface-sunken); border-color: var(--gray-55); }

.btn-danger { background: var(--color-danger); color: var(--gray-99); }
.btn-danger:hover { background: #a90017; }
.btn-danger.btn-secondary {
  background: var(--color-surface); color: var(--color-danger); border-color: rgba(194, 39, 45, 0.4);
}
.btn-danger.btn-secondary:hover { background: var(--color-danger-soft); }

.btn-ghost { background: none; color: var(--color-text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--color-surface-sunken); color: var(--color-text); }

.btn-sm { padding: 5px 10px; font-size: var(--text-xs); border-radius: var(--radius-sm); }

/* ==========================================================================
   Badges — único vocabulario de estado, nunca decorativo
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-warning { background: var(--color-warning-soft); color: #7e4700; }
.badge-neutral { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.badge-accent { background: var(--color-accent-soft); color: var(--color-accent-hover); }

/* ==========================================================================
   Tablas — el elemento central del panel. Alta densidad, cero decoración.
   ========================================================================== */

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.table-search { position: relative; min-width: 240px; flex: 1 1 240px; max-width: 360px; }
.table-search i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-subtle); font-size: var(--text-sm); pointer-events: none;
}
.table-search input { width: 100%; padding-left: 32px; }

.table-filters { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.table-count { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }

.table-shell {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: auto;
  box-shadow: var(--shadow-xs);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--color-surface);
}

thead th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-surface-sunken);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-strong);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

tbody td {
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--color-accent-softer); }

tfoot td {
  padding: var(--space-xs) var(--space-md);
  border-top: 1px solid var(--color-border-strong);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-weight: 600;
}

td.table-actions, th.table-actions { text-align: right; white-space: nowrap; }
td.table-actions .btn, td.table-actions form { display: inline-flex; }
td.table-actions form + .btn,
td.table-actions .btn + form { margin-left: var(--space-2xs); }

/* Inputs dentro de celdas: se ven como texto hasta que se enfocan */
table input, table select {
  width: 100%;
  min-width: 70px;
  border-color: transparent;
  background: transparent;
  padding: 5px 7px;
  font-size: var(--text-sm);
}
table input:hover, table select:hover { border-color: var(--color-border-strong); background: var(--color-surface); }
table input:focus-visible, table select:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--space-md);
}

.client-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 108px;
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out-quart), box-shadow var(--duration-base) var(--ease-out-quart);
}
.client-tile:hover { border-color: var(--color-accent-border); box-shadow: var(--shadow-sm); text-decoration: none; }
.client-tile img { max-height: 44px; max-width: 88px; object-fit: contain; }
.client-tile-initial {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-soft); color: var(--color-accent-hover);
  font-weight: 700; font-size: var(--text-md);
}
.client-tile-label {
  font-size: var(--text-xs); color: var(--color-text-muted); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.client-tile-planificar { margin-top: 2px; }

.table-empty, .empty-state {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: var(--color-text-muted);
}
.empty-state i { font-size: 1.5rem; color: var(--color-text-subtle); margin-bottom: var(--space-sm); display: block; }
.empty-state p { margin: 0 auto; max-width: 40ch; }

/* ==========================================================================
   Login
   ========================================================================== */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: var(--space-lg);
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-xl);
}
.login-card h1 { font-size: var(--text-lg); text-align: center; margin-bottom: var(--space-lg); }
.login-card button { width: 100%; margin-top: var(--space-xs); }

/* ==========================================================================
   Calendario / scheduling
   ========================================================================== */

.calendar-month {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-md); font-weight: 600;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.calendar-day {
  background: var(--color-surface);
  min-height: 96px;
  padding: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calendar-day:hover { background: var(--color-surface-sunken); }
/* Destaca el día de hoy en el calendario de Admin (pedido explícito del
   usuario) — borde + fondo sutil para que resalte sin romper el resto de la
   grilla; el número del día pasa a color de acento para reforzarlo. */
.calendar-day.today {
  background: var(--color-accent-soft);
  border: 2px solid var(--color-accent);
}
.calendar-day.today .day-number { color: var(--color-accent-hover); }
.day-number { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-subtle); }

.events-list { display: flex; flex-direction: column; gap: 4px; }
.event-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: var(--text-xs);
  font-weight: 500;
}
.event-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.controls-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.nav-section, .actions-section { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

.filter-section { position: relative; }
.checkbox-group-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.checkbox-group-header:hover { border-color: var(--gray-55); }
.dropdown-arrow { transition: transform var(--duration-base) var(--ease-out-quart); color: var(--color-text-subtle); }
.filter-section.open .dropdown-arrow { transform: rotate(180deg); }

.checkbox-container {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--z-dropdown);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xs);
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
}
/* El JS de scheduling.js solo agrega/quita la clase "open" en .filter-section
   (no toca display inline) — sin esta regla, .checkbox-container quedaba
   visible siempre (solo `position:absolute` lo sacaba del flujo, pero
   display nunca era "none" por defecto), por eso el menú de empresas/
   clientes quedaba "permanentemente abierto". Los módulos que ya
   funcionaban bien (reporte-planificado-real, calendario-admin) alternan
   `style.display` inline desde su propio JS, así que esta regla de clase no
   los afecta (el inline style siempre gana sobre esta regla de hoja). */
.filter-section.open .checkbox-container { display: block; }

.checkbox-item {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: 6px var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.checkbox-item:hover { background: var(--color-surface-sunken); }

#staffingTableContainer { overflow-x: auto; }

/* ==========================================================================
   Utilidades
   ========================================================================== */

.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-danger { color: var(--color-danger); }
.stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.cluster { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

/* ==========================================================================
   Exportación a PDF/Word — no forma parte de la UI en pantalla.
   Se mantiene sobria e independiente de los tokens de pantalla para no
   arriesgar la fidelidad del documento exportado.
   ========================================================================== */

.pdf-export-content {
  font-family: Arial, Helvetica, sans-serif;
  color: #1a1a1a;
  /* Ancho FIJO: sin esto, html2canvas no tiene un layout estable de donde
     medir y termina capturando según el ancho de la ventana del navegador
     al momento de exportar — si la ventana era angosta, recorta contenido
     en vez de escalarlo; si el <img> del gráfico (que viene con su
     resolución nativa del canvas) no tiene `max-width`, se sale del
     contenedor. 990px corresponde al área imprimible de una hoja carta
     HORIZONTAL (landscape) con los márgenes de `options.margin` en
     scheduling.js (11in - 0.6in ≈ 10.4in a 96px/in ≈ 998px, redondeado un
     poco corto para margen de seguridad). Ver public/js/scheduling.js#downloadTableAsPDF
     para el porqué del cambio a landscape (celdas con detalle por cliente
     son strings largos, ej. "(Brittshop Chile: +10) + (Colgram: +2) + ... =
     299", necesitan más ancho que una hoja vertical).
  */
  width: 990px;
}
.pdf-export-content h1 { font-size: 13pt; margin-bottom: 8px; }
.pdf-export-content h2 { font-size: 10.5pt; margin-bottom: 8px; }
.pdf-export-content table { font-size: 6.5pt; width: 100%; border-collapse: collapse; table-layout: fixed; }
.pdf-export-content th, .pdf-export-content td {
  border: 1px solid #999;
  padding: 2px 3px;
  line-height: 1.15;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.pdf-export-content th { background: #e5e7eb; }
/* Refuerza el `pagebreak.avoid: ['tr']` de html2pdf.js (ver
   public/js/scheduling.js#downloadTableAsPDF) — el modo "css" de html2pdf
   también respeta esta propiedad directamente. Sin esto, una fila de la
   tabla podía quedar cortada justo en el borde entre dos hojas (reportado
   por el usuario con la fila del día 20). `thead` repetido en cada hoja es
   un extra útil ahora que el reporte ocupa 2-3 páginas.
*/
.pdf-export-content tr { page-break-inside: avoid; break-inside: avoid; }
.pdf-export-content thead { display: table-header-group; }
.pdf-chart-wrapper { margin-bottom: 10px; width: 100%; }
.pdf-chart-image { display: block; width: 100%; height: auto; max-width: 100%; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: var(--topbar-height); z-index: var(--z-sticky); box-shadow: var(--shadow-md); }
  #content { padding: var(--space-lg); }
}