:root {
  --color-bg: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-2: #ffffff;
  --color-surface-3: #f3f4f6;
  --color-text: #111827;
  --color-muted: #6b7280;
  --color-border: #e5e7eb;

  --color-brand: #64748b;
  --color-brand-soft: rgba(100, 116, 139, 0.18);
  --color-brand-line: rgba(100, 116, 139, 0.28);
  --color-brand-ink: #334155;
  --color-on-brand: #ffffff;

  --color-success: #16a34a;
  --color-success-soft: rgba(22, 163, 74, 0.18);
  --color-success-line: rgba(22, 163, 74, 0.24);
  --color-success-ink: #166534;

  --color-warning: #fbbf24;
  --color-warning-soft: var(--color-warning);
  --color-warning-line: var(--color-warning);
  --color-warning-ink: #422006;

  --color-danger: #ef4444;
  --color-danger-soft: rgba(239, 68, 68, 0.18);
  --color-danger-line: rgba(239, 68, 68, 0.24);
  --color-danger-ink: #4a0c0c;

  --color-focus: #60a5fa;
  --dashboard-stat-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --dashboard-stat-border: #e2e8f0;
  --dashboard-stat-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
  --dashboard-stat-hover-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
  --dashboard-stat-today-accent: #2563eb;
  --dashboard-stat-today-soft: rgba(37, 99, 235, 0.14);
  --dashboard-stat-active-accent: #059669;
  --dashboard-stat-active-soft: rgba(5, 150, 105, 0.14);

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  /* Escala de radios (px reales). Reducida para un look menos redondeado. */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  /* Reservado solo para formas verdaderamente circulares/stadium:
     dots, spinners, iconos circulares, badges de conteo, acentos. */
  --radius-pill: 999px;

  --shadow-1: 0 6px 18px rgba(17, 24, 39, 0.1);
  --shadow-2: 0 14px 32px rgba(17, 24, 39, 0.16);

  --font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-size-12: 12px;
  --font-size-11: 11px;
  --font-size-10: 10px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;
  --tracking-wide: 0.04em;

  --dur-quick: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --size-12: 12px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;
  --size-24: 24px;
  --size-28: 28px;
  --size-32: 32px;
  --size-36: 36px;
  --size-40: 40px;
  --size-48: 48px;
  --size-56: 56px;
  --size-64: 64px;
  --size-120: 120px;

  --content-pad: clamp(16px, 3vw, 28px);
  --nav-height: 72px;
  --nav-width: var(--size-120);
  --topbar-height: 72px;

  --ctl-h: 44px;
  --ctl-radius: var(--radius-10);
  --ctl-bg: var(--color-surface);
  --ctl-border: var(--color-border);
  --ctl-pad-x: var(--space-16);
  --ctl-pad-y: var(--space-8);
  --ctl-text-transform: none;
  --ctl-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.35);

  --btn-h: 44px;
  --btn-radius: var(--radius-8);
  --btn-px: var(--space-16);
  --btn-py: var(--space-8);
  --btn-gap: var(--space-8);
  --btn-weight: var(--font-weight-600);
  --btn-bg: var(--color-surface);
  --btn-border: var(--color-border);
  --btn-color: var(--color-text);

  --card-radius: var(--radius-10);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-pad: var(--space-20);
  --card-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);

  --table-min-width: 860px;
  --table-th-bg: #eef2f7;
  --table-th-color: #64748b;
  --table-row-border: #e2e8f0;
  --table-cell-px: var(--space-16);
  --table-cell-py: var(--space-8);
  --table-head-radius: var(--radius-8);
  --table-head-border: #d7dee8;
  --table-status-col: clamp(92px, 10vw, 120px);
  --table-group-bg: #dbe7ff;
  --table-group-border: var(--table-row-border);
  --table-group-color: var(--color-muted);
  --table-group-active-bg: var(--color-warning);
  --table-group-active-border: var(--color-warning);
  --table-group-active-color: var(--color-warning-ink);
  --table-group-active-pad-y: var(--space-4);
  --table-group-active-font-size: var(--font-size-11);
  --table-group-radius: var(--radius-6);
  --table-group-pad-x: var(--table-cell-px);
  --table-group-pad-y: var(--space-8);
  --table-group-alert-bg: var(--color-danger-soft);
  --table-group-alert-border: var(--color-danger-line);
  --table-group-alert-color: var(--color-danger-ink);
  --table-group-alert-pad-y: var(--space-4);

  --modal-radius: var(--radius-10);
  --modal-bg: var(--color-surface);
  --modal-shadow: var(--shadow-2);
  --modal-pad: var(--space-20);

  --chip-radius: var(--radius-6);
  --chip-px: var(--space-16);
  --chip-py: var(--space-8);
  --chip-font-size: var(--font-size-12);
  --chip-weight: var(--font-weight-600);
  --chip-status-radius: var(--radius-4);
  --chip-status-min: clamp(100px, 10vw, 130px);
  --chip-status-icon: var(--size-20);
  --chip-status-icon-font: var(--font-size-14);
  --chip-ok-bg: var(--color-success);
  --chip-ok-border: var(--color-success);
  --chip-ok-ink: var(--color-success-ink);
  --chip-warn-bg: #d97706;
  --chip-warn-border: #d97706;
  --chip-warn-ink: #451a03;
  --chip-danger-bg: #ef4444;
  --chip-danger-border: #ef4444;
  --chip-danger-ink: #7f1d1d;

  --grad-header: #e9edf1;
  --header-text: #1f2937;
  --header-radius: var(--radius-14);
  --header-pad-x: var(--space-20);
  --header-pad-top: var(--space-16);
  --header-pad-bottom: var(--space-24);
  --header-shadow: 0 8px 24px rgba(30, 41, 59, 0.12);
  --header-pill-bg: rgba(255, 255, 255, 0.9);
  --header-pill-text: #1f2937;
  --header-pill-border: rgba(15, 23, 42, 0.08);
  --header-icon-bg: var(--header-pill-bg);
  --header-icon-border: var(--header-pill-border);
  --header-icon-color: #1f2937;
  --header-muted: rgba(31, 41, 55, 0.72);

  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  --action-card-bg: #ffffff;
  --action-card-border: rgba(15, 23, 42, 0.08);
  --action-card-color: #0f172a;
  --action-card-radius: var(--radius-8);
  --action-card-pad: var(--space-12);
  --action-card-gap: var(--space-12);
  --action-card-icon-bg: #f1f5f9;
  --action-card-icon-size: var(--font-size-18);
  --action-card-icon-box: var(--size-40);

  --search-bg: transparent;
  --search-input-bg: #ffffff;
  --search-input-color: var(--color-text);
  --search-h: 44px;
  --search-radius: var(--radius-8);
  --search-btn-size: var(--size-32);
  --search-icon-left: var(--space-8);
  --search-text-gap: var(--space-8);
  --search-input-pad-left: calc(var(--search-btn-size) + var(--search-icon-left) + var(--search-text-gap));
  --search-btn-bg: #f1f5f9;
  --search-btn-color: #64748b;
  --search-shadow: none;
  --search-border: var(--color-border);

  --list-card-bg: #ffffff;
  --list-card-radius: var(--radius-10);
  --list-card-pad-x: var(--space-16);
  --list-card-pad-y: var(--space-12);
  --list-card-title-size: var(--font-size-12);
  --list-card-meta-size: var(--font-size-14);
  --overstay-panel-bg: var(--color-surface);
  --overstay-panel-border: var(--color-border);
  --overstay-section-bg: var(--color-surface-3);
  --overstay-section-border: var(--color-border);
  --overstay-section-color: var(--color-muted);
  --overstay-section-radius: var(--radius-6);
  --overstay-item-bg: var(--color-surface);
  --overstay-item-border: var(--color-border);
  --overstay-item-radius: var(--radius-8);
  --overstay-item-shadow: var(--shadow-1);
  --overstay-item-gap: var(--space-12);
  --overstay-item-pad-x: var(--space-16);
  --overstay-item-pad-y: var(--space-12);
  --overstay-accent-warning: var(--color-warning);
  --overstay-accent-danger: var(--color-danger);
  --overstay-meta-color: var(--color-muted);

  --chat-panel-width: 420px;
  --chat-panel-max-h: calc(100vh - var(--topbar-height) - var(--space-40));
  --chat-panel-height: min(720px, var(--chat-panel-max-h));
  --chat-panel-header-pad-y: var(--space-12);
  --chat-panel-header-pad-x: var(--space-16);
  --chat-panel-body-pad: var(--space-12);
  --chat-pane-gap: var(--space-12);
  --chat-heading-gap: var(--space-16);
  --chat-title-size: var(--font-size-20);
  --chat-subtitle-size: var(--font-size-12);
  --chat-thread-pad-y: var(--space-12);
  --chat-thread-pad-x: var(--space-12);
  --chat-thread-radius: var(--radius-8);
  --chat-thread-gap: var(--space-10);
  --chat-thread-dot-size: 8px;
  --chat-thread-time-size: var(--font-size-12);
  --chat-thread-status-size: var(--font-size-14);
  --chat-scroll-min-h: 0;
  --chat-scroll-pad: var(--space-12);
  --chat-scroll-radius: var(--radius-8);
  --chat-scroll-bg: var(--color-surface-3);
  --chat-bubble-max: 78%;
  --chat-bubble-pad-y: var(--space-8);
  --chat-bubble-pad-x: var(--space-12);
  --chat-bubble-radius: var(--radius-8);
  --chat-bubble-other-bg: var(--color-surface);
  --chat-bubble-other-border: var(--color-border);
  --chat-bubble-mine-bg: var(--color-brand);
  --chat-bubble-mine-border: var(--color-brand);
  --chat-bubble-mine-color: var(--color-on-brand);
  --chat-message-gap: var(--space-12);
  --chat-message-list-pad: var(--space-4);
  --chat-message-meta-top-gap: var(--space-4);
  --chat-meta-size: var(--font-size-11);
  --chat-meta-gap: var(--space-4);
  --chat-composer-gap: var(--space-8);
  --chat-composer-input-min-h: var(--ctl-h);
  --chat-composer-input-max-h: 120px;
  --chat-send-min-w: 104px;
  --chat-icon-btn-size: var(--size-32);
  --chat-status-icon-open: var(--color-brand);
  --chat-status-icon-closed: var(--color-muted);
  --chat-status-icon-pending: var(--color-muted);

  --status-size: var(--size-48);
  --status-radius: var(--radius-10);
  --status-font: var(--font-size-18);
  --status-warning-bg: var(--color-warning);
  --status-warning-color: var(--color-warning-ink);
  --status-success-bg: var(--color-success);
  --status-success-color: #ffffff;

  --nav-bg: #0f172a;
  --nav-item: #94a3b8;
  --nav-item-active-bg: rgba(226, 232, 240, 0.12);
  --nav-item-active: #e2e8f0;
  --nav-radius: var(--radius-12);
  --nav-shadow: 0 -5px 20px rgba(15, 23, 42, 0.08);
  --nav-pad-y: var(--space-12);
  --nav-item-pad-y: var(--space-12);
  --nav-item-pad-x: var(--space-8);
  --nav-item-gap: var(--space-8);
  --nav-item-font-size: var(--font-size-12);
  --nav-icon-size: var(--font-size-18);
  --nav-icon-box: var(--size-28);
  --nav-item-active-radius: var(--radius-6);
  --nav-badge-size: var(--size-18);
  --nav-badge-font: var(--font-size-12);
  --nav-badge-offset-x: var(--space-4);
  --nav-badge-offset-y: var(--space-4);
  --nav-label-pad: var(--space-4);
  --nav-label-line-height: 1.1;

  --hero-text: var(--color-text);
  --hero-muted: var(--color-muted);

  --overlay-bg: rgba(17, 24, 39, 0.4);

  --doc-flag-1-bg: #bae6fd;
  --doc-flag-1-ink: #0c4a6e;
  --doc-flag-2-bg: #bbf7d0;
  --doc-flag-2-ink: #166534;
  --doc-flag-3-bg: #fde68a;
  --doc-flag-3-ink: #92400e;
  --doc-flag-border: rgba(15, 23, 42, 0.1);
  --doc-flag-min: 160px;
  --doc-flag-radius: var(--radius-4);
  --doc-flag-pad-y: var(--space-8);
  --doc-flag-pad-x: var(--space-12);
  --doc-flag-gap: var(--space-8);
}