/*
 * Cupstack UI System v2 — shared foundation (Wave 7, chunk 21).
 *
 * Linked only by a page whose reskin wave has landed (Wave 8: the portal page). A page adopts it after
 * AGENTS.md section 3 and docs/design/figma-v2-reference.md.
 *
 * Source: "Cupstack UI System v2" (.fig), Foundations and Components boards.
 * The documented text tokens are authoritative; raw node geometry in the .fig
 * carries a 0.875x import-scaling artifact and is never copied.
 * Machine-readable twin: docs/design/figma-v2-tokens.json (a test pins the two together).
 *
 * Scope: tokens, density, .cs-btn, .cs-icon-btn, focus ring, .cs-input / .cs-select, .cs-pill, .cs-badge.
 * Wave 8 additions (end of file): .cs-icon, .cs-topbar, .cs-avatar, .cs-section-label, .cs-module-card,
 * .cs-notice, .cs-link and the .cs-auth shell, with the tokens they use.
 * Wave 9 additions (after Wave 8): the authenticated shell (.cs-shell, .cs-sidebar, .cs-nav, rail mode,
 * .cs-tooltip) and the top bar slots (.cs-brand, .cs-clock, .cs-user, .cs-toolbar). Linked by Panel General only.
 * Deliberately NOT here: fonts (no @font-face, no DM Mono), severity colors,
 * row heights, hover-row fill and the amber severity border (all pending in the reference doc).
 */

:root {
  /* Color: brand + surfaces */
  --cs-bg: #EAF6FE;
  --cs-ink: #0A1C40;
  --cs-primary: #2471E7;
  --cs-accent: #E6701E;
  --cs-surface: #FFFFFF;

  /* Color: semantic pairs (text/icon, fill) */
  --cs-success: #1A7A4C;
  --cs-success-bg: #E6F7EF;
  --cs-warning: #B06010;
  --cs-warning-bg: #FEF3E6;
  --cs-error: #B52626;
  --cs-error-bg: #FDEAEA;
  --cs-neutral: #8499B0;
  --cs-neutral-bg: #F0F4F8;

  /* Appearance: text on a solid fill, text on a strong navy fill, the strong fill itself, the sidebar
     surface and the dialog scrim. Light values equal what the stylesheet used before Aspecto; the dark
     overrides are in the Aspecto block at the end of this file. */
  --cs-on-fill: #FFFFFF;
  --cs-on-strong: #FFFFFF;
  --cs-fill-strong: #0A1C40;
  --cs-sidebar-bg: #0A1C40;
  --cs-scrim: rgba(10, 28, 64, 0.55);
  --cs-logo-plate: transparent;
  --cs-navy: #0A1C40; /* constant navy text for the few light fills that need it */

  /* Appearance: the surface ladder. Light keeps one white surface (and the sky page color), so these equal the
     values the stylesheet and pages used before; Modo oscuro separates them (see the Aspecto block):
       canvas (page) < shell (sidebar, top bar) < bar (screen bar, toolbars) < surface (cards) < overlay (dialogs, menus)
     --cs-bg is the sky TINT inside a surface (selected tab, today, info chip); --cs-canvas is the page behind it. */
  --cs-canvas: var(--cs-bg);
  --cs-surface-shell: var(--cs-surface);
  --cs-surface-bar: var(--cs-surface);
  --cs-surface-overlay: var(--cs-surface);
  --cs-surface-sunken: var(--cs-surface-hover);
  --cs-field-bg: var(--cs-surface);
  --cs-grid-line: var(--cs-row-separator);
  --cs-shadow-overlay: none;
  /* The boundary of a text input, select or search field. Light keeps the hairline it always had; dark lifts it to
     about 3:1 against the surface that holds the field (WCAG 1.4.11), because there the border is what identifies it. */
  --cs-border-control: var(--cs-border);
  --cs-border-control-hover: var(--cs-border-hover);
  /* What the Hub / sign-in page shows while it decides which screen to draw (both are hidden during boot). */
  --cs-boot-bg: #FDFBF7;

  /* Appearance: schedule position colors (information, not decoration). White text on each fill. */
  --cs-pos-barra: #0A1C40;
  --cs-pos-aux: #226CDC;
  --cs-pos-caja: #B06010;
  --cs-pos-caja-text: #0A1C40;
  --cs-pos-super: #B52626;

  /* Appearance: the one line color Modo oscuro gives the Panel General sparklines. */
  --cs-chart-line: #4E7BB5;

  /* Color: borders (all 1px) */
  --cs-border: #E2ECF7;
  --cs-divider: #F0F4F8;
  --cs-row-separator: #F8FAFE;

  /* Color: interaction states read from the Components board */
  --cs-primary-hover: #1A5CC8;
  --cs-primary-active: #1450AA;
  --cs-surface-hover: #F5F9FE;
  --cs-border-hover: #C8DCF0;
  --cs-error-bg-hover: #F8D5D5;
  --cs-error-bg-active: #F5CCCC;
  --cs-error-border: rgba(181, 38, 38, 0.18);
  --cs-info-border: rgba(36, 113, 231, 0.15);
  --cs-warning-border: rgba(230, 112, 30, 0.15);
  --cs-success-border: rgba(26, 122, 76, 0.15);

  /* Type: Inter only (not loaded here), weights 400/500/600/700 */
  --cs-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cs-weight-regular: 400;
  --cs-weight-medium: 500;
  --cs-weight-semibold: 600;
  --cs-weight-bold: 700;

  /* Spacing: 4px base, documented steps only */
  --cs-space-2: 2px;
  --cs-space-4: 4px;
  --cs-space-6: 6px;
  --cs-space-8: 8px;
  --cs-space-10: 10px;
  --cs-space-12: 12px;
  --cs-space-14: 14px;
  --cs-space-16: 16px;
  --cs-space-20: 20px;
  --cs-space-24: 24px;

  /* Radius: named in Foundations, px measured on the board */
  --cs-radius-md: 6px;
  --cs-radius-lg: 8px;
  --cs-radius-xl: 12px;
  --cs-radius-full: 9999px;
  --cs-radius-sm: 4px; /* measured on the compact status pill; no documented name */

  /* Elevation: borders first. The only shadow is phone-only. */
  --cs-shadow-phone: 0 1px 3px rgba(10, 28, 64, 0.07);

  /* Focus ring: 2px primary, replaces the native outline */
  --cs-focus-ring-width: 2px;
  --cs-focus-ring: 0 0 0 var(--cs-focus-ring-width) var(--cs-primary);

  /* Icons (px): inline, sidebar, panel/bell, phone bottom nav */
  --cs-icon-inline: 13px;
  --cs-icon-sidebar: 15px;
  --cs-icon-panel: 18px;
  --cs-icon-bottom-nav: 20px;

  /* Navigation sizes (consumed by the shell wave) */
  --cs-topbar-h: 52px;
  --cs-sidebar-w: 200px;
  --cs-rail-w: 52px;
  --cs-bottom-nav-h: 56px;

  /* Density: compact (>= 768px). Touch overrides below. */
  --cs-control-h: 30px;
  --cs-control-min-w: 0;
  --cs-btn-pad-x: var(--cs-space-12);
  --cs-field-pad-x: var(--cs-space-10);
  --cs-field-radius: var(--cs-radius-md);
  --cs-icon-btn-size: 32px;
  --cs-icon-btn-radius: var(--cs-radius-md);
  --cs-text-control: 12.5px;
  --cs-pill-pad-y: var(--cs-space-2);
  --cs-pill-pad-x: var(--cs-space-8);
  --cs-pill-radius: var(--cs-radius-sm);
  --cs-text-pill: 10.5px;

  /* Wave 8: colors measured on the Hub and Authentication frames. They are not in the Foundations
     palette; see "hubFrame" in the manifest. Page bg, field and card borders, muted text, chevron. */
  --cs-bg-soft: #F4F8FC;
  --cs-border-card: #D8E6F0;
  --cs-text-muted: #597290;
  --cs-text-secondary: #68788B;
  --cs-text-notice: #226CDC;
  --cs-text-warning: #A85C0E;
  --cs-icon-muted: #B7CCE0;

  /* Wave 8: Hub and sign-in layout. Box geometry in the frames carries the 0.875x import artifact,
     so values are snapped to the documented spacing steps (manifest: hubFrame.snapped). */
  --cs-page-max: 1180px;
  --cs-page-pad-x: var(--cs-space-24);
  --cs-page-pad-y: 36px;
  --cs-topbar-pad-x: var(--cs-space-16);
  --cs-avatar-size: 24px;
  --cs-module-card-pad: var(--cs-space-14);
  --cs-module-card-gap: var(--cs-space-10);
  --cs-module-card-min-h: 132px;
  --cs-module-icon-box: 36px;
  --cs-text-greeting: 25px;
  --cs-text-lead: 12.5px;
  --cs-text-card-title: 13.5px;
  --cs-text-card-desc: 10.5px;
  --cs-text-section-label: 10px;
  --cs-section-label-tracking: 0.14em;
  --cs-auth-header-h: 64px;
  --cs-auth-card-w: 410px;
  --cs-auth-control-h: 36px;

  /* Wave 9: authenticated shell (sidebar, rail, top bar slots), measured on Panel General (10) and the
     module frames (24). White alphas are the frames' values except where they fail WCAG AA 4.5:1 on the
     sidebar ink (label 25% -> 50%, item 50% -> 65%); see "shellFrame" in the manifest. Breakpoints:
     sidebar from 1024px, rail from 768px to 1023px, none below 768px (no phone bottom navigation). */
  --cs-side-line: rgba(255, 255, 255, 0.08);
  --cs-side-text: rgba(255, 255, 255, 0.65);
  --cs-side-label: rgba(255, 255, 255, 0.5);
  --cs-side-hover-fill: rgba(255, 255, 255, 0.06);
  --cs-side-active-fill: rgba(255, 255, 255, 0.1);
  --cs-side-active-bar: var(--cs-accent);
  --cs-side-pad-x: var(--cs-space-8);
  --cs-side-item-h: 34px;
  --cs-side-item-pad-x: var(--cs-space-12);
  --cs-side-item-gap: var(--cs-space-10);
  --cs-side-group-gap: var(--cs-space-14);
  --cs-side-label-tracking: 0.1em;
  --cs-side-bar-w: 2px;
  --cs-rail-item-w: 36px;
  --cs-rail-item-h: 40px;
  --cs-shell-pad-x: var(--cs-space-20);
  --cs-shell-pad-y: var(--cs-space-16);
  --cs-shell-z-topbar: 30;
  --cs-shell-z-side: 40;
  --cs-shell-z-tooltip: 60;
  --cs-banner-h: 42px;
}

/* Density: touch (< 768px). Set by viewport, not by preference. */
@media (max-width: 767.98px) {
  :root {
    --cs-control-h: 40px;
    --cs-control-min-w: 44px;
    --cs-btn-pad-x: var(--cs-space-16);
    --cs-field-pad-x: var(--cs-space-12);
    --cs-field-radius: var(--cs-radius-lg);
    --cs-icon-btn-size: 40px;
    --cs-icon-btn-radius: var(--cs-radius-lg);
    --cs-text-control: 13.5px;
    --cs-pill-pad-y: var(--cs-space-4);
    --cs-pill-pad-x: var(--cs-space-10);
    --cs-pill-radius: var(--cs-radius-lg);
    --cs-text-pill: 11.5px;
    --cs-page-pad-x: var(--cs-space-14);
    --cs-page-pad-y: var(--cs-space-24);
    --cs-topbar-pad-x: var(--cs-space-14);
    --cs-module-card-pad: var(--cs-space-10);
    --cs-module-card-min-h: 74px;
    --cs-text-greeting: 21px;
    --cs-text-lead: 11.5px;
    --cs-text-card-title: 13px;
    --cs-text-card-desc: 10px;
    --cs-shell-pad-x: var(--cs-space-14);
    --cs-shell-pad-y: var(--cs-space-14);
  }
}

/* ------------------------------------------------------------------ buttons */
/* Disabled: native :disabled blocks activation. [aria-disabled="true"] only styles; the consumer must
   ignore the activation itself. No pointer-events:none, so a title/tooltip still shows. */
.cs-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-space-6);
  height: var(--cs-control-h);
  min-width: var(--cs-control-min-w);
  padding: 0 var(--cs-btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--cs-radius-md);
  background: transparent;
  color: var(--cs-ink);
  font-family: var(--cs-font);
  font-size: var(--cs-text-control);
  font-weight: var(--cs-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.cs-btn:focus-visible,
.cs-icon-btn:focus-visible,
.cs-module-card:focus-visible,
.cs-link:focus-visible,
.cs-nav__item:focus-visible,
.cs-skip:focus-visible,
.cs-theme__opt:focus-visible {
  outline: none;
  box-shadow: var(--cs-focus-ring);
}

.cs-btn:disabled,
.cs-btn[aria-disabled="true"],
.cs-icon-btn:disabled,
.cs-icon-btn[aria-disabled="true"] {
  cursor: not-allowed;
}

/* Primary */
.cs-btn--primary {
  background: var(--cs-primary);
  color: var(--cs-on-fill);
}
.cs-btn--primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--cs-primary-hover); }
.cs-btn--primary:not(:disabled):not([aria-disabled="true"]):active { background: var(--cs-primary-active); }
.cs-btn--primary:disabled,
.cs-btn--primary[aria-disabled="true"] { opacity: 0.38; }

/* Secondary */
.cs-btn--secondary {
  background: var(--cs-surface);
  border-color: var(--cs-border);
  color: var(--cs-ink);
}
.cs-btn--secondary:not(:disabled):not([aria-disabled="true"]):hover {
  background: var(--cs-surface-hover);
  border-color: var(--cs-border-hover);
}
.cs-btn--secondary:not(:disabled):not([aria-disabled="true"]):active {
  background: var(--cs-bg);
  border-color: var(--cs-border);
}
.cs-btn--secondary:disabled,
.cs-btn--secondary[aria-disabled="true"] {
  color: var(--cs-neutral);
  opacity: 0.5;
}

/* Ghost (the board's "Terciario"). Hover and active fills are not specified: pending. */
.cs-btn--ghost {
  background: transparent;
  color: var(--cs-primary);
}
.cs-btn--ghost:disabled,
.cs-btn--ghost[aria-disabled="true"] {
  color: var(--cs-neutral);
  opacity: 0.5;
}

/* Danger (the board's "Destructivo") */
.cs-btn--danger {
  background: var(--cs-error-bg);
  border-color: var(--cs-error-border);
  color: var(--cs-error);
}
.cs-btn--danger:not(:disabled):not([aria-disabled="true"]):hover { background: var(--cs-error-bg-hover); }
.cs-btn--danger:not(:disabled):not([aria-disabled="true"]):active { background: var(--cs-error-bg-active); }
.cs-btn--danger:disabled,
.cs-btn--danger[aria-disabled="true"] { opacity: 0.38; }

/* -------------------------------------------------------------- icon button */
.cs-icon-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cs-icon-btn-size);
  height: var(--cs-icon-btn-size);
  padding: 0;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-icon-btn-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.cs-icon-btn:not(:disabled):not([aria-disabled="true"]):hover {
  background: var(--cs-bg);
  border-color: var(--cs-border-hover);
}
.cs-icon-btn:not(:disabled):not([aria-disabled="true"]):active,
.cs-icon-btn[aria-pressed="true"] {
  background: var(--cs-bg);
  border-color: var(--cs-primary);
}
.cs-icon-btn:disabled,
.cs-icon-btn[aria-disabled="true"] {
  background: var(--cs-neutral-bg);
  border-color: var(--cs-border);
  opacity: 0.4;
}

/* ------------------------------------------------------------ input / select */
.cs-input,
.cs-select {
  box-sizing: border-box;
  height: var(--cs-control-h);
  min-width: 0;
  padding: 0 var(--cs-field-pad-x);
  border: 1px solid var(--cs-border-control);
  border-radius: var(--cs-field-radius);
  background: var(--cs-field-bg);
  color: var(--cs-ink);
  font-family: var(--cs-font);
  font-size: var(--cs-text-control);
  font-weight: var(--cs-weight-regular);
  line-height: 1.2;
}
.cs-input::placeholder { color: var(--cs-neutral); }
.cs-input:focus,
.cs-select:focus {
  outline: none;
  border-color: var(--cs-primary);
  box-shadow: var(--cs-focus-ring);
}
.cs-input[aria-invalid="true"],
.cs-select[aria-invalid="true"] {
  background: var(--cs-error-bg);
  border-color: var(--cs-error);
}
.cs-input:disabled,
.cs-select:disabled {
  background: var(--cs-neutral-bg);
  color: var(--cs-neutral);
  cursor: not-allowed;
}
.cs-select:disabled { opacity: 0.5; }

/* --------------------------------------------------------------- status pill */
.cs-pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: var(--cs-pill-pad-y) var(--cs-pill-pad-x);
  border: 1px solid transparent;
  border-radius: var(--cs-pill-radius);
  font-family: var(--cs-font);
  font-size: var(--cs-text-pill);
  font-weight: var(--cs-weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.cs-pill--info { background: var(--cs-bg); border-color: var(--cs-info-border); color: var(--cs-primary); }
.cs-pill--warning { background: var(--cs-warning-bg); border-color: var(--cs-warning-border); color: var(--cs-warning); }
.cs-pill--success { background: var(--cs-success-bg); border-color: var(--cs-success-border); color: var(--cs-success); }
/* The board shows no border for the error pill: pending. */
.cs-pill--error { background: var(--cs-error-bg); color: var(--cs-error); }

/* --------------------------------------------------------------- count badge */
.cs-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--cs-radius-full);
  background: var(--cs-accent);
  color: var(--cs-on-strong);
  font-family: var(--cs-font);
  font-size: 10px;
  font-weight: var(--cs-weight-bold);
  line-height: 1;
}
.cs-badge--error { background: var(--cs-error); color: var(--cs-on-fill); }
/* Neutral counts are plain text, not a filled badge. */
.cs-badge--neutral {
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--cs-neutral);
  font-size: 11px;
  font-weight: var(--cs-weight-medium);
}

/* ================================================================== Wave 8 */
/* Hub and sign-in building blocks, measured on the Hub and Authentication frames. */

/* Icons come from /shared/cupstack-icons.svg via <use>; color is the host's CSS color. */
.cs-icon {
  width: var(--cs-icon-panel);
  height: var(--cs-icon-panel);
  flex-shrink: 0;
}
.cs-icon--inline {
  width: var(--cs-icon-inline);
  height: var(--cs-icon-inline);
}

/* Text link in the primary color (Figma "action link"). */
.cs-link {
  color: var(--cs-primary);
  font-family: var(--cs-font);
  font-weight: var(--cs-weight-medium);
  text-decoration: none;
  border-radius: var(--cs-radius-md);
}
.cs-link:not(:disabled):not([aria-disabled="true"]):hover { text-decoration: underline; }

/* ------------------------------------------------------------------ top bar */
.cs-topbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--cs-space-10);
  height: var(--cs-topbar-h);
  padding: 0 var(--cs-topbar-pad-x);
  background: var(--cs-surface-shell);
  border-bottom: 1px solid var(--cs-border);
  font-family: var(--cs-font);
  color: var(--cs-ink);
}

.cs-avatar {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--cs-avatar-size);
  height: var(--cs-avatar-size);
  border-radius: var(--cs-radius-full);
  background: var(--cs-fill-strong);
  color: var(--cs-on-strong);
  font-family: var(--cs-font);
  font-size: 10px;
  font-weight: var(--cs-weight-semibold);
  line-height: 1;
}

/* ------------------------------------------------------------ section label */
.cs-section-label {
  display: flex;
  align-items: center;
  gap: var(--cs-space-12);
  margin: 0;
  color: var(--cs-text-muted);
  font-family: var(--cs-font);
  font-size: var(--cs-text-section-label);
  font-weight: var(--cs-weight-bold);
  letter-spacing: var(--cs-section-label-tracking);
  line-height: 1.5;
  text-transform: uppercase;
}
.cs-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cs-border-card);
}

/* -------------------------------------------------------------- module card */
/* Compact: icon box and arrow on top, title and description below. Touch: one row. */
.cs-module-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--cs-space-16);
  min-height: var(--cs-module-card-min-h);
  padding: var(--cs-module-card-pad);
  background: var(--cs-surface);
  border: 1px solid var(--cs-border-card);
  border-radius: var(--cs-radius-lg);
  color: var(--cs-ink);
  font-family: var(--cs-font);
  text-decoration: none;
}
.cs-module-card:not(:disabled):not([aria-disabled="true"]):hover {
  background: var(--cs-surface-hover);
  border-color: var(--cs-border-hover);
}
.cs-module-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.cs-module-card__icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--cs-module-icon-box);
  height: var(--cs-module-icon-box);
  background: var(--cs-bg);
  border: 1px solid var(--cs-border-card);
  border-radius: var(--cs-radius-lg);
  color: var(--cs-primary);
}
.cs-module-card__arrow {
  color: var(--cs-icon-muted);
  flex-shrink: 0;
}
.cs-module-card__body { min-width: 0; }
.cs-module-card__title {
  margin: 0;
  color: var(--cs-ink);
  font-size: var(--cs-text-card-title);
  font-weight: var(--cs-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.cs-module-card__desc {
  margin: var(--cs-space-4) 0 0;
  color: var(--cs-text-secondary);
  font-size: var(--cs-text-card-desc);
  font-weight: var(--cs-weight-regular);
  line-height: 1.4;
}
@media (max-width: 767.98px) {
  .cs-module-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--cs-space-10);
  }
  .cs-module-card__head { display: contents; }
  .cs-module-card__icon { order: 0; }
  .cs-module-card__body { order: 1; flex: 1; }
  .cs-module-card__arrow { order: 2; }
}

/* ------------------------------------------------------------------- notice */
.cs-notice {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--cs-space-8);
  padding: var(--cs-space-10);
  background: var(--cs-bg);
  border: 1px solid var(--cs-border-hover);
  border-radius: var(--cs-radius-lg);
  color: var(--cs-text-notice);
  font-family: var(--cs-font);
  font-size: 10.5px;
  font-weight: var(--cs-weight-semibold);
  line-height: 1.5;
}
.cs-notice--error {
  background: var(--cs-error-bg);
  border-color: var(--cs-error-border);
  color: var(--cs-error);
}

/* ------------------------------------------------------------ auth shell */
/* Header bar, centered card, footer. The card is a single column; width caps at the frame's 410px. */
.cs-auth {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--cs-canvas);
  color: var(--cs-ink);
  font-family: var(--cs-font);
}
.cs-auth__header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: var(--cs-auth-header-h);
  padding: 0 var(--cs-space-20);
  background: var(--cs-surface-shell);
  border-bottom: 1px solid var(--cs-border-hover);
}
.cs-auth__main {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cs-space-24) var(--cs-space-10);
}
.cs-auth__card {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--cs-auth-card-w);
  background: var(--cs-surface);
  border: 1px solid var(--cs-border-hover);
  border-radius: var(--cs-radius-xl);
  overflow: hidden;
}
.cs-auth__card-head {
  padding: var(--cs-space-20) var(--cs-space-20) var(--cs-space-14);
  border-bottom: 1px solid var(--cs-divider);
}
.cs-auth__card-body { padding: var(--cs-space-20); }
.cs-auth__icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--cs-space-10);
  background: var(--cs-bg);
  border-radius: var(--cs-radius-lg);
  color: var(--cs-primary);
}
.cs-auth__title {
  margin: 0;
  color: var(--cs-ink);
  font-size: 18px;
  font-weight: var(--cs-weight-semibold);
  line-height: 1.5;
}
.cs-auth__lead {
  margin: var(--cs-space-2) 0 0;
  color: var(--cs-text-secondary);
  font-size: 10.5px;
  line-height: 1.5;
}
.cs-auth__label {
  display: block;
  margin: 0 0 var(--cs-space-4);
  color: var(--cs-text-muted);
  font-size: 10px;
  font-weight: var(--cs-weight-semibold);
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
}
.cs-auth__footer {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--cs-space-16);
  color: var(--cs-text-muted);
  font-size: 10px;
  text-align: center;
}

/* ================================================================== Wave 9 */
/* Authenticated shell. Opt-in per page: a legacy page keeps its own header.topbar. Sidebar from 1024px,
   permanent icon rail from 768px to 1023px, no sidebar below 768px. The runtime (shared/cupstack-shell.js)
   only fills .cs-nav and the user slots; the page owns the top bar markup and its controls. */

.cs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cs-skip {
  position: fixed;
  top: var(--cs-space-8);
  left: var(--cs-space-8);
  z-index: calc(var(--cs-shell-z-tooltip) + 1);
  padding: var(--cs-space-8) var(--cs-space-12);
  background: var(--cs-surface);
  border: 1px solid var(--cs-border-hover);
  border-radius: var(--cs-radius-md);
  color: var(--cs-ink);
  font-family: var(--cs-font);
  font-size: var(--cs-text-control);
  font-weight: var(--cs-weight-medium);
  text-decoration: none;
  transform: translateY(-200%);
}
.cs-skip:focus-visible { transform: none; }

.cs-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cs-canvas);
  color: var(--cs-ink);
  font-family: var(--cs-font);
}
.cs-shell__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cs-shell__topbar {
  position: sticky;
  top: 0;
  z-index: var(--cs-shell-z-topbar);
}
.cs-shell__content {
  flex: 1;
  min-width: 0;
  padding: var(--cs-shell-pad-y) var(--cs-shell-pad-x);
}
/* The impersonation banner is fixed at the top and the page body is padded by the same height. */
body.poska-impersonating .cs-shell__topbar { top: var(--cs-banner-h); }
body.poska-impersonating .cs-shell { min-height: calc(100vh - var(--cs-banner-h)); min-height: calc(100dvh - var(--cs-banner-h)); }

/* A slot the runtime hides (the SuperAdmin link) must stay hidden although its component sets a display. */
.cs-shell [hidden] { display: none !important; }

/* ---------------------------------------------------------------- sidebar */
.cs-sidebar {
  display: none;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: var(--cs-shell-z-side);
  flex: none;
  flex-direction: column;
  width: var(--cs-rail-w);
  height: 100vh;
  height: 100dvh;
  background: var(--cs-sidebar-bg);
  border-right: 1px solid var(--cs-side-line);
  font-family: var(--cs-font);
}
body.poska-impersonating .cs-sidebar {
  top: var(--cs-banner-h);
  height: calc(100vh - var(--cs-banner-h));
  height: calc(100dvh - var(--cs-banner-h));
}
@media (min-width: 768px) {
  .cs-sidebar { display: flex; }
}
@media (min-width: 1024px) {
  .cs-sidebar { width: var(--cs-sidebar-w); }
}

.cs-sidebar__brand {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--cs-space-8);
  height: var(--cs-topbar-h);
  padding: 0 var(--cs-space-14);
  border-bottom: 1px solid var(--cs-side-line);
  color: var(--cs-on-strong);
}
.cs-sidebar__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--cs-radius-md);
  background: var(--cs-primary);
  color: var(--cs-on-fill);
}
.cs-sidebar__word {
  font-size: 14px;
  font-weight: var(--cs-weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1.5;
}

.cs-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--cs-space-10) 0;
}
.cs-nav__group { margin: 0 0 var(--cs-side-group-gap); padding: 0; }
.cs-nav__label {
  margin: 0;
  padding: 0 var(--cs-space-14) var(--cs-space-4);
  color: var(--cs-side-label);
  font-size: 10px;
  font-weight: var(--cs-weight-semibold);
  letter-spacing: var(--cs-side-label-tracking);
  line-height: 1.5;
  text-transform: uppercase;
}
.cs-nav__list { list-style: none; margin: 0; padding: 0 var(--cs-side-pad-x); }
.cs-nav__list li + li { margin-top: var(--cs-space-2); }

.cs-nav__item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--cs-side-item-gap);
  min-height: var(--cs-side-item-h);
  padding: 0 var(--cs-side-item-pad-x);
  border-radius: var(--cs-radius-md);
  color: var(--cs-side-text);
  font-size: var(--cs-text-control);
  font-weight: var(--cs-weight-medium);
  line-height: 1.5;
  text-decoration: none;
}
.cs-nav__item .cs-icon {
  width: var(--cs-icon-sidebar);
  height: var(--cs-icon-sidebar);
}
.cs-nav__item:not(:disabled):not([aria-disabled="true"]):hover {
  background: var(--cs-side-hover-fill);
  color: var(--cs-on-strong);
}
.cs-nav__item[aria-current="page"] {
  background: var(--cs-side-active-fill);
  color: var(--cs-on-strong);
}
.cs-nav__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: var(--cs-space-4);
  bottom: var(--cs-space-4);
  left: calc(-1 * var(--cs-side-pad-x));
  width: var(--cs-side-bar-w);
  border-radius: 0 var(--cs-radius-sm) var(--cs-radius-sm) 0;
  background: var(--cs-side-active-bar);
}
.cs-nav__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rail: icons only. Group labels become hairlines and the item text stays in the DOM for assistive
   technology and for the tooltip. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .cs-sidebar__brand { justify-content: center; padding: 0; }
  .cs-sidebar__word,
  .cs-nav__label,
  .cs-nav__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .cs-nav__group { margin: 0; }
  .cs-nav__group + .cs-nav__group {
    margin-top: var(--cs-space-8);
    padding-top: var(--cs-space-8);
    border-top: 1px solid var(--cs-side-line);
  }
  .cs-nav__list { padding: 0 var(--cs-side-pad-x); }
  .cs-nav__item {
    justify-content: center;
    width: var(--cs-rail-item-w);
    min-height: var(--cs-rail-item-h);
    padding: 0;
  }
  .cs-nav__item[aria-current="page"]::before { top: var(--cs-space-8); bottom: var(--cs-space-8); }
}

/* Rail tooltip (one element, positioned by the runtime). Hoverable, and dismissed with Escape. */
.cs-tooltip {
  position: fixed;
  z-index: var(--cs-shell-z-tooltip);
  box-sizing: border-box;
  padding: var(--cs-space-4) var(--cs-space-8);
  background: var(--cs-fill-strong);
  border: 1px solid var(--cs-side-line);
  border-radius: var(--cs-radius-md);
  color: var(--cs-on-strong);
  font-family: var(--cs-font);
  font-size: 11.5px;
  font-weight: var(--cs-weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}
.cs-tooltip[hidden] { display: none; }

/* --------------------------------------------------------- top bar slots */
.cs-shell__topbar.cs-topbar { justify-content: space-between; }
.cs-topbar__start,
.cs-topbar__end {
  display: flex;
  align-items: center;
  gap: var(--cs-space-10);
  min-width: 0;
}
.cs-topbar__end { flex: none; }
.cs-topbar__home { display: inline-flex; flex: none; }
@media (min-width: 768px) {
  .cs-topbar__home { display: none; }
}

.cs-brand { display: flex; align-items: center; gap: var(--cs-space-8); min-width: 0; }
.cs-brand__logo {
  display: block;
  flex: none;
  height: 24px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
}
.cs-brand__text { display: flex; align-items: baseline; gap: var(--cs-space-8); min-width: 0; }
.cs-brand__name {
  min-width: 0;
  overflow: hidden;
  color: var(--cs-ink);
  font-size: var(--cs-text-card-title);
  font-weight: var(--cs-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-brand__sep { color: var(--cs-border-hover); font-size: 12.25px; }
.cs-brand__loc {
  min-width: 0;
  overflow: hidden;
  color: var(--cs-text-secondary);
  font-size: var(--cs-text-lead);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .cs-brand__logo { display: none; }
}
@media (max-width: 767.98px) {
  .cs-brand__text { flex-direction: column; align-items: stretch; gap: 0; }
  .cs-brand__sep { display: none; }
  .cs-brand__loc { font-size: 10.5px; }
}

.cs-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.cs-clock__time { color: var(--cs-ink); font-size: 11.5px; font-weight: var(--cs-weight-semibold); white-space: nowrap; }
.cs-clock__date { color: var(--cs-text-secondary); font-size: 10.5px; white-space: nowrap; }
@media (max-width: 767.98px) {
  .cs-clock__date { display: none; }
}

.cs-user { display: flex; align-items: center; gap: var(--cs-space-8); min-width: 0; }
.cs-user__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cs-user__name {
  max-width: 160px;
  overflow: hidden;
  color: var(--cs-ink);
  font-size: 12px;
  font-weight: var(--cs-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-user__role { color: var(--cs-text-secondary); font-size: 10px; white-space: nowrap; }
@media (max-width: 767.98px) {
  .cs-user__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

.cs-icon-btn--badged { position: relative; }
.cs-icon-btn__badge {
  position: absolute;
  top: -4px;
  right: -4px;
}

/* Narrow phones: the top bar keeps Inicio, the tenant, the bell, change password and Salir. The clock and
   the avatar (the name and role stay in the page for assistive technology) make room for them. */
@media (max-width: 479.98px) {
  .cs-topbar__start,
  .cs-topbar__end { gap: var(--cs-space-6); }
  .cs-clock,
  .cs-user { display: none; }
  .cs-brand__logo { max-width: 48px; }
  /* with the extra SuperAdmin link, or the alerts bell, the name matters more than the mark */
  .cs-topbar:has([data-cs-admin-link]:not([hidden])) .cs-brand__logo,
  .cs-topbar:has(.cs-icon-btn--badged) .cs-brand__logo { display: none; }
}

.cs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cs-space-8) var(--cs-space-12);
  margin: 0 0 var(--cs-space-12);
}
.cs-toolbar__group { display: flex; align-items: center; gap: var(--cs-space-6); }
.cs-toolbar__note { margin-left: auto; color: var(--cs-text-secondary); font-size: 10.5px; }

/* ============================================================= Aspecto */
/* Appearance: Modo claro, Modo oscuro and Predeterminado del sistema. Dark is a set of semantic token
   overrides, applied when shared/cupstack-theme.js sets <html data-theme="dark"> (the resolved theme, so
   "system" arrives here already resolved). Light is the :root block above and is untouched.

   The dark palette keeps the identity: deep navy, blue for action, orange as the restrained accent,
   recognizable success / warning / error. It is not an inversion, and it is not one navy: surfaces climb in
   small luminance steps (about 3 to 4 L* each, one hue, modest chroma) so every layer reads against the one
   below it, and borders carry the rest:

     canvas   #071328  page behind everything                      L* 6
     shell    #0D1B33  sidebar, top bar                            L* 10
     bar      #11203C  screen bar, week bar, secondary toolbars    L* 12.5
     surface  #172846  cards, panels                               L* 16
     hover    #1D2F4F  hover rows, card headers                    L* 19.5
     overlay  #223557  dialogs, menus (also gets a shadow)         L* 22
     field    #0A182F  inputs: recessed below whatever holds them  L* 8
     sunken   #0E1D35  inactive / empty cells                      L* 10.8
     tint     #183257  --cs-bg: selected, today, info chips        L* 20.7 (bluer than hover)

   Primary and the semantic colors are lighter in dark so they work as text on these surfaces (all >= 4.5:1 on
   every level, pinned by scripts/appearance-theme-contract.test.mjs), and a solid fill of those colors carries
   navy text (--cs-on-fill) instead of white. */
html[data-theme="dark"] {
  color-scheme: dark;

  --cs-canvas: #071328;
  --cs-boot-bg: #071328;
  --cs-bg: #183257;
  --cs-bg-soft: #0A172E;
  --cs-surface-shell: #0D1B33;
  --cs-surface-bar: #11203C;
  --cs-surface: #172846;
  --cs-surface-hover: #1D2F4F;
  --cs-surface-overlay: #223557;
  --cs-surface-sunken: #0E1D35;
  --cs-field-bg: #0A182F;
  --cs-ink: #E1EAF7;

  --cs-primary: #6BA3F5;
  --cs-primary-hover: #86B6F8;
  --cs-primary-active: #5A93E8;
  --cs-on-fill: #0A1C40;
  --cs-on-strong: #FFFFFF;
  --cs-fill-strong: #2B4578;
  --cs-sidebar-bg: #0D1B33;
  --cs-scrim: rgba(3, 8, 20, 0.7);
  --cs-shadow-overlay: 0 18px 44px rgba(2, 6, 16, 0.6), 0 2px 8px rgba(2, 6, 16, 0.45);
  --cs-logo-plate: #F4F8FC;
  --cs-pos-barra: #3A5B9E;
  --cs-pos-aux: #2A68CF;
  --cs-pos-caja: #A85C0E;
  --cs-pos-caja-text: #FFFFFF;
  --cs-pos-super: #C2403F;
  --cs-chart-line: #8FB8F8;

  --cs-success: #58C18C;
  --cs-success-bg: #12352A;
  --cs-warning: #F0A45A;
  --cs-warning-bg: #3A2A16;
  --cs-error: #F28B8B;
  --cs-error-bg: #3C1E26;
  --cs-neutral: #8EA3C0;
  --cs-neutral-bg: #20314D;

  --cs-border: #2A3C5D;
  --cs-divider: #213350;
  --cs-row-separator: #1D2E4B;
  --cs-grid-line: #283A59;
  --cs-border-control: #6B80A3;
  --cs-border-control-hover: #8398BA;
  --cs-border-hover: #3A4E70;
  --cs-border-card: #304365;

  --cs-error-bg-hover: #4A2530;
  --cs-error-bg-active: #55293A;
  --cs-error-border: rgba(242, 139, 139, 0.3);
  --cs-info-border: rgba(107, 163, 245, 0.3);
  --cs-warning-border: rgba(240, 164, 90, 0.3);
  --cs-success-border: rgba(95, 203, 150, 0.3);

  --cs-text-muted: #A3B5CE;
  --cs-text-secondary: #9DB0CA;
  --cs-text-notice: #8FB8F8;
  --cs-text-warning: #F0A45A;
  --cs-icon-muted: #5F7CA8;

}

/* ------------------------------------------------------ Aspecto control */
/* One icon button in the top bar (every width, phone included) that opens a small radio menu. The glyph is the
   current mode (sun in light, moon in dark). Built by CupstackTheme.mountControl. */
.cs-theme { position: relative; display: inline-flex; flex: none; }
.cs-theme__menu {
  position: absolute;
  top: calc(100% + var(--cs-space-6));
  right: 0;
  z-index: calc(var(--cs-shell-z-tooltip) + 1);
  box-sizing: border-box;
  min-width: 252px;
  padding: var(--cs-space-6);
  background: var(--cs-surface-overlay);
  border: 1px solid var(--cs-border-hover);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-overlay);
  color: var(--cs-ink);
  font-family: var(--cs-font);
  text-align: left;
}
.cs-theme__menu[hidden] { display: none; }
.cs-theme[data-cs-theme-mode="dark"] .cs-theme__sun,
.cs-theme:not([data-cs-theme-mode="dark"]) .cs-theme__moon { display: none; }
.cs-theme__title {
  margin: 0;
  padding: var(--cs-space-4) var(--cs-space-8) var(--cs-space-6);
  color: var(--cs-text-muted);
  font-size: var(--cs-text-section-label);
  font-weight: var(--cs-weight-bold);
  letter-spacing: var(--cs-section-label-tracking);
  line-height: 1.5;
  text-transform: uppercase;
}
.cs-theme__opt {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-12);
  width: 100%;
  min-height: var(--cs-control-h);
  padding: 0 var(--cs-space-8);
  border: 0;
  border-radius: var(--cs-radius-md);
  background: transparent;
  color: var(--cs-ink);
  font-family: var(--cs-font);
  font-size: var(--cs-text-control);
  font-weight: var(--cs-weight-medium);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.cs-theme__opt:not(:disabled):not([aria-disabled="true"]):hover { background: var(--cs-surface-hover); }
.cs-theme__opt[aria-checked="true"] { background: var(--cs-bg); font-weight: var(--cs-weight-semibold); }
.cs-theme__opt-mark { color: var(--cs-primary); }
.cs-theme__opt-mark { display: inline-flex; width: var(--cs-icon-inline); height: var(--cs-icon-inline); flex: none; }
.cs-theme__opt[aria-checked="false"] .cs-theme__opt-mark { visibility: hidden; }
/* The accent count badge carries navy text in Modo oscuro (white on the orange is 3.1:1). */
html[data-theme="dark"] .cs-badge:not(.cs-badge--error):not(.cs-badge--neutral) { color: var(--cs-navy); }

/* Phones: the menu is anchored to the viewport (the button sits mid-bar, so a right-aligned menu would run off the
   left edge); the runtime sets its top from the button when it opens. Below 360px the tenant mark yields to the
   tenant name so the button, the password key and Salir all keep a 40px touch target. */
@media (max-width: 767.98px) {
  .cs-theme__menu {
    position: fixed;
    top: calc(var(--cs-topbar-h) + var(--cs-space-6));
    right: var(--cs-topbar-pad-x);
    min-width: 0;
    width: min(280px, calc(100vw - 2 * var(--cs-topbar-pad-x)));
  }
  .cs-theme__opt { min-height: var(--cs-control-h); }
}
@media (max-width: 359.98px) {
  .cs-topbar .cs-brand__logo { display: none; }
}

/* Raster tenant logos usually carry a white background. In Modo oscuro they sit on a soft plate so the
   white reads as intentional; the uploaded asset is untouched and there is no per-tenant logic. */
html[data-theme="dark"] img[data-tenant-brand-logo] {
  box-sizing: content-box;
  padding: var(--cs-space-2) var(--cs-space-4);
  background: var(--cs-logo-plate);
  border-radius: var(--cs-radius-md);
}

/* Sparkline strokes are drawn by the page script in light-mode colors; Modo oscuro lifts them to one readable blue. */
html[data-theme="dark"] .sparkline polyline { stroke: var(--cs-chart-line); }