/*
══════════════════════════════════════════════════════════════════════
  TRIVET — Design Tokens & Component Styles
  ────────────────────────────────────────────────────────────────────
  Single source of truth for the entire app's visual language.
  Change values here to update the look everywhere.

  Token naming convention:
    --tv-{category}-{variant}

  Categories:
    color   — brand, semantic, surface, border, text
    space   — spacing scale
    radius  — border radii
    font    — sizes, weights
    shadow  — box-shadows
    anim    — transitions, durations

  Loaded from base.html via {% static 'design_tokens.css' %}

  Z-index scale (keep in sync when adding new layers):
    10  — dropdowns, popovers
    50  — modal backdrops (.tv-modal-backdrop)
    100 — progress bars
    200 — search overlays
    299 — sidebar backdrop (#sb-backdrop)
    300 — sidebar (#trivet-sidebar on mobile)
    9999 — toasts / notifications (always on top)
══════════════════════════════════════════════════════════════════════
*/

/* ══════════════════════════════════════════════════════════════════
   0. CRITICAL LAYOUT FALLBACKS
   These replicate Tailwind utility classes used by base.html so the
   app remains functional even if the Tailwind CDN fails to load.
   ══════════════════════════════════════════════════════════════════ */
.h-full          { height: 100%; }
.min-h-screen    { min-height: 100vh; min-height: 100dvh; }
.flex            { display: flex; }
.flex-1          { flex: 1 1 0%; }
.flex-col        { flex-direction: column; }
.shrink-0        { flex-shrink: 0; }
.min-w-0         { min-width: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.hidden          { display: none; }
.relative        { position: relative; }
.fixed           { position: fixed; }
.inset-0         { top:0;right:0;bottom:0;left:0; }
.items-center    { align-items: center; }
.justify-center  { justify-content: center; }
.p-6             { padding: 1.5rem; }
.gap-4           { gap: 1rem; }

/* ══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS (CSS Custom Properties)
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand colors ─────────────────────────────────────────────── */
  --tv-color-teal:           #05be9b;
  --tv-color-teal-hover:     #04a888;
  --tv-color-teal-active:    #038a71;
  --tv-color-teal-light:     #2dd4bf;
  --tv-color-teal-lighter:   #5eead4;
  --tv-color-violet:         #664ee5;
  --tv-color-violet-hover:   #5640d0;
  --tv-color-violet-active:  #4533b8;
  --tv-color-violet-light:   #a899f5;

  /* ── Accent (dark = teal, light = violet) ───────────────────── */
  --tv-color-accent:         var(--tv-color-teal);

  /* ── Solid / destructive ────────────────────────────────────── */
  --tv-color-danger:         #ef4444;
  --tv-color-danger-hover:   #dc2626;
  --tv-color-danger-light:   #fca5a5;
  --tv-color-info:           #2596be;
  --tv-color-pink:           #f472b6;
  --tv-color-pink-bg:        rgba(236,72,153,0.10);
  --tv-color-pink-border:    rgba(236,72,153,0.20);
  --tv-text-on-solid:        #ffffff;
  --tv-text-on-brand:        #1a1a2e;   /* always dark — for text on bright brand-colored surfaces */

  /* ── Semantic / state colors ──────────────────────────────────── */
  --tv-color-blue:           #60a5fa;
  --tv-color-blue-bg:        rgba(59,130,246,0.10);
  --tv-color-blue-border:    rgba(59,130,246,0.20);

  --tv-color-teal-badge:     #05be9b;
  --tv-color-teal-bg:        rgba(5,190,155,0.10);
  --tv-color-teal-border:    rgba(5,190,155,0.20);

  --tv-color-green:          #4ade80;
  --tv-color-green-bg:       rgba(34,197,94,0.10);
  --tv-color-green-border:   rgba(34,197,94,0.20);

  --tv-color-red:            #f87171;
  --tv-color-red-bg:         rgba(239,68,68,0.10);
  --tv-color-red-border:     rgba(239,68,68,0.20);

  --tv-color-amber:          #fbbf24;
  --tv-color-amber-bg:       rgba(245,158,11,0.10);
  --tv-color-amber-border:   rgba(245,158,11,0.20);

  --tv-color-violet-badge:   #a78bfa;
  --tv-color-violet-bg:      rgba(139,92,246,0.10);
  --tv-color-violet-border:  rgba(139,92,246,0.20);

  --tv-color-gray-badge:     #9ca3af;
  --tv-color-gray-bg:        rgba(107,114,128,0.12);
  --tv-color-gray-border:    rgba(107,114,128,0.20);

  /* ── Surface / background ─────────────────────────────────────── */
  --tv-surface-page:         #111111;
  --tv-surface-card:         #1e1e1e;
  --tv-surface-elevated:     #2B2B2B;
  --tv-surface-input:        #2B2B2B;
  --tv-surface-hover:        rgba(31,41,55,0.50);
  --tv-surface-inset:        #374151;
  --tv-surface-elevated-rgb: 43,43,43;
  --tv-surface-inset-rgb:    55,65,81;
  --tv-surface-page-rgb:     17,17,17;

  /* ── Border ───────────────────────────────────────────────────── */
  --tv-border-default:       #2B2B2B;
  --tv-border-subtle:        #3a3a3a;
  --tv-border-muted:         #4a4a4a;

  /* ── Text ─────────────────────────────────────────────────────── */
  --tv-text-primary:         #ffffff;
  --tv-text-secondary:       #d1d5db;
  --tv-text-muted:           #9ca3af;
  --tv-text-disabled:        #7d8694;   /* was #6b7280 — bumped for WCAG AA 4.5:1 on dark surfaces */
  --tv-text-placeholder:     #6b7280;

  /* ── Chart tokens (theme-dependent) ───────────────────────────── */
  --tv-chart-label:            #888888;
  --tv-chart-grid:             rgba(255,255,255,0.12);
  --tv-chart-border:           rgba(255,255,255,0.10);
  --tv-chart-tick:             #666666;
  --tv-chart-donut-border:     #1e1e1e;
  --tv-chart-muted:            #9ca3af;

  /* ── Chart accent palette (same in both themes) ─────────────── */
  --tv-chart-teal:             #05be9b;
  --tv-chart-violet:           #664ee5;
  --tv-chart-green:            #22c55e;
  --tv-chart-amber:            #f59e0b;
  --tv-chart-red:              #ef4444;
  --tv-chart-blue:             #3b82f6;
  --tv-chart-pink:             #ec4899;
  --tv-chart-orange:           #f97316;
  --tv-chart-purple:           #8b5cf6;
  --tv-chart-cyan:             #14b8a6;

  /* ── Gradient tokens ──────────────────────────────────────────── */
  --tv-gradient-brand: linear-gradient(135deg, var(--tv-color-teal) 0%, var(--tv-color-violet) 100%);

  /* ── Spacing scale (4px base) ─────────────────────────────────── */
  --tv-space-1:  0.25rem;   /* 4px  */
  --tv-space-2:  0.5rem;    /* 8px  */
  --tv-space-3:  0.75rem;   /* 12px */
  --tv-space-4:  1rem;      /* 16px */
  --tv-space-5:  1.25rem;   /* 20px */
  --tv-space-6:  1.5rem;    /* 24px */
  --tv-space-8:  2rem;      /* 32px */

  /* ── Border radius ────────────────────────────────────────────── */
  --tv-radius-sm:    0.375rem;  /* 6px  — compact buttons */
  --tv-radius-md:    0.5rem;    /* 8px  — standard buttons, inputs */
  --tv-radius-lg:    0.75rem;   /* 12px — cards, modals */
  --tv-radius-full:  9999px;    /* pill / badge */

  /* ── Font sizes ───────────────────────────────────────────────── */
  --tv-font-xs:     0.75rem;    /* 12px */
  --tv-font-sm:     0.8125rem;  /* 13px */
  --tv-font-base:   0.875rem;   /* 14px */
  --tv-font-lg:     1rem;       /* 16px */

  /* ── Font weights ─────────────────────────────────────────────── */
  --tv-font-normal: 400;
  --tv-font-medium: 500;
  --tv-font-semibold: 600;
  --tv-font-bold:   700;

  /* ── Shadows ──────────────────────────────────────────────────── */
  --tv-shadow-toast:  0 4px 24px rgba(0,0,0,0.5);
  --tv-shadow-btn:    0 4px 16px rgba(5,190,155,0.3);

  /* ── Focus ─────────────────────────────────────────────────────── */
  --tv-focus-ring-color:   var(--tv-color-teal);
  --tv-focus-ring-shadow:  rgba(5,190,155,0.25);

  /* ── Transitions ──────────────────────────────────────────────── */
  --tv-transition-fast:  0.15s ease;
  --tv-transition-base:  0.2s ease;
  --tv-transition-slow:  0.25s ease;

  /* ── Sidebar ──────────────────────────────────────────────────── */
  --trivet-sb: 14rem;
}


/* ══════════════════════════════════════════════════════════════════
   2. SIDEBAR LAYOUT
   ══════════════════════════════════════════════════════════════════ */

html.sb-col                  { --trivet-sb: 3.5rem; }
#trivet-sidebar              { width: 14rem; transition: width var(--tv-transition-base); }
html.sb-col #trivet-sidebar  { width: 3.5rem; }

html.sb-col .sb-text  { display: none; }
html.sb-col .sb-label { display: none; }
html.sb-col .sb-div   { display: block; }
.sb-div { display: none; }

html.sb-col .sb-arrow { transform: rotate(180deg); }
.sb-arrow { transition: transform var(--tv-transition-base); }

/* ── Mobile: sidebar overlay ──────────────────────────────────── */
@media (max-width: 767px) {
  #trivet-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 300; width: 14rem !important;
    transform: translateX(-100%);
    transition: transform var(--tv-transition-slow);
  }
  #trivet-sidebar.sb-open { transform: translateX(0); }
  html.sb-col #trivet-sidebar { width: 14rem !important; }
  html.sb-col #trivet-sidebar .sb-text,
  html.sb-col #trivet-sidebar .sb-label { display: revert; }
  html.sb-col #trivet-sidebar .sb-div   { display: none; }
  #sb-backdrop {
    position: fixed; inset: 0; z-index: 299;
    background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    display: none;
  }
  #sb-backdrop.active { display: block; }
  .sb-desktop-only { display: none !important; }
}
@media (min-width: 768px) {
  #sb-backdrop { display: none !important; }
  .sb-mobile-only { display: none !important; }
}

/* ── Mobile: responsive tables & forms ────────────────────────── */
@media (max-width: 767px) {
  .tv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main.flex-1 { padding: var(--tv-space-4) !important; }
  #trivet-header { padding-left: var(--tv-space-4) !important; padding-right: var(--tv-space-4) !important; }
  .grid-cols-2 { grid-template-columns: 1fr !important; }
  .grid-cols-3 { grid-template-columns: 1fr !important; }
  .grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
  .flex-wrap { flex-wrap: wrap; }
  #gs-input { width: 7rem !important; }
  #gs-input:focus { width: 10rem !important; }
  #gs-dropdown { width: 90vw !important; right: -2rem; }
  #trivet-header h1 { font-size: var(--tv-font-base); }
}


/* ══════════════════════════════════════════════════════════════════
   3. SIDEBAR NAV LINKS
   ══════════════════════════════════════════════════════════════════ */

.sidebar-link {
  display: flex; align-items: center; gap: var(--tv-space-3);
  padding: var(--tv-space-2) var(--tv-space-3); border-radius: var(--tv-radius-md);
  font-size: var(--tv-font-base); font-weight: var(--tv-font-medium);
  color: var(--tv-text-muted);
  transition: background-color var(--tv-transition-fast), color var(--tv-transition-fast), border-color var(--tv-transition-fast);
  white-space: nowrap; overflow: hidden;
  border-left: 2px solid transparent;
}
.sidebar-link:hover {
  background: rgba(5, 190, 155, 0.08);
  color: var(--tv-color-teal);
}
.sidebar-link.active {
  background: rgba(102, 78, 229, 0.12);
  color: var(--tv-text-primary);
  border-left-color: var(--tv-color-violet);
}
.sidebar-link.active svg { color: var(--tv-color-violet-light); }
.sidebar-link svg    { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

.nav-section-label {
  padding: 0.625rem var(--tv-space-3) var(--tv-space-1);
  font-size: 0.6rem; font-weight: var(--tv-font-bold);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tv-text-disabled); opacity: 1; user-select: none;
}
.nav-section-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(102,78,229,0.35) 0%, rgba(5,190,155,0.15) 100%);
  margin: 0.375rem 0.625rem;
}


/* ══════════════════════════════════════════════════════════════════
   3b. iOS SAFARI — GLOBAL TOUCH FIX
   ──────────────────────────────────────────────────────────────────
   iOS Safari requiere touch-action:manipulation para que los taps
   se procesen inmediatamente sin esperar 300ms de double-tap delay.
   Sin esto, los botones dentro de scroll containers (overflow-y:auto)
   pueden no responder a toques.
   ══════════════════════════════════════════════════════════════════ */

button, a, input, select, textarea,
[onclick], [role="button"], [role="tab"], [role="link"],
.tv-btn-primary, .tv-btn-cta, .tv-btn-outline, .tv-btn-cancel,
.tv-btn-danger, .tv-btn-danger-solid, .tv-btn-view, .tv-btn-edit,
.tv-btn-clear, .tv-btn-sm {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

/* Scroll containers en iOS Safari necesitan esto para momentum scroll
   y correcto manejo de touch events en hijos */
#main-content {
  overflow-y: auto;              /* fallback — no depender solo de Tailwind */
  -webkit-overflow-scrolling: touch;
}
.overflow-y-auto,
.overflow-auto {
  -webkit-overflow-scrolling: touch;
}


/* ══════════════════════════════════════════════════════════════════
   4. BUTTON SYSTEM
   ══════════════════════════════════════════════════════════════════ */

/* ── Shared base for standard buttons ─────────────────────────── */
.tv-btn-primary, .tv-btn-cta, .tv-btn-outline, .tv-btn-cancel,
.tv-btn-danger, .tv-btn-danger-solid {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.25rem;
  padding: 0 var(--tv-space-5);
  font-size: var(--tv-font-base);
  border-radius: var(--tv-radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tv-transition-fast), box-shadow var(--tv-transition-fast),
              color var(--tv-transition-fast), border-color var(--tv-transition-fast);
}

/* ── Compact buttons (inline row actions) ─────────────────────── */
.tv-btn-view, .tv-btn-edit {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2rem;
  padding: 0 var(--tv-space-3);
  font-size: var(--tv-font-base);
  border-radius: var(--tv-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tv-transition-fast), border-color var(--tv-transition-fast), color var(--tv-transition-fast);
}

/* 1. PRIMARY */
.tv-btn-primary {
  font-weight: var(--tv-font-semibold); border: none;
  background: var(--tv-color-teal);
  color: var(--tv-text-on-solid) !important;
}
.tv-btn-primary:hover { background: var(--tv-color-teal-hover); box-shadow: var(--tv-shadow-btn); }
.tv-btn-primary:active { background: var(--tv-color-teal-active); }
.tv-btn-primary:disabled, .tv-btn-primary[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* 1b. CTA — gradient conversion button (contratar, upsell, registro) */
.tv-btn-cta {
  font-weight: var(--tv-font-semibold); border: none;
  background: linear-gradient(135deg, var(--tv-color-teal) 0%, var(--tv-color-violet) 100%);
  color: #fff !important;
}
.tv-btn-cta:hover {
  background: linear-gradient(135deg, var(--tv-color-teal-hover) 0%, var(--tv-color-violet-hover) 100%);
  box-shadow: var(--tv-shadow-btn);
}
.tv-btn-cta:active {
  background: linear-gradient(135deg, var(--tv-color-teal-active) 0%, var(--tv-color-violet-active) 100%);
}
.tv-btn-cta:disabled, .tv-btn-cta[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* 2. OUTLINE */
.tv-btn-outline {
  font-weight: var(--tv-font-medium);
  border: 1px solid var(--tv-border-muted);
  color: var(--tv-text-muted); background: transparent;
}
.tv-btn-outline:hover {
  color: var(--tv-text-primary); border-color: var(--tv-text-disabled); background: rgba(255,255,255,0.05);
}
.tv-btn-outline:active { background: rgba(255,255,255,0.10); }
.tv-btn-outline:disabled, .tv-btn-outline[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* 3. CANCEL */
.tv-btn-cancel {
  border: 1px solid var(--tv-border-subtle);
  color: var(--tv-text-muted); background: transparent;
}
.tv-btn-cancel:hover {
  color: var(--tv-color-violet-light); border-color: rgba(102,78,229,0.45);
  background: rgba(102,78,229,0.06);
}
.tv-btn-cancel:active { background: rgba(102,78,229,0.12); }
.tv-btn-cancel:disabled, .tv-btn-cancel[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* 4. DANGER */
.tv-btn-danger {
  color: var(--tv-color-red); background: transparent;
  border: 1px solid rgba(239,68,68,0.25);
}
.tv-btn-danger:hover {
  color: var(--tv-color-danger-light); border-color: rgba(239,68,68,0.45);
  background: rgba(239,68,68,0.08);
}
.tv-btn-danger:active { background: rgba(239,68,68,0.14); }
.tv-btn-danger:disabled, .tv-btn-danger[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* 5. DANGER SOLID */
.tv-btn-danger-solid {
  font-weight: var(--tv-font-semibold); border: none;
  background: var(--tv-color-danger); color: var(--tv-text-on-solid) !important;
}
.tv-btn-danger-solid:hover { background: var(--tv-color-danger-hover); }
.tv-btn-danger-solid:active { background: #b91c1c; }
.tv-btn-danger-solid:disabled, .tv-btn-danger-solid[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* 6. VIEW */
.tv-btn-view {
  background: rgba(5,190,155,0.08); color: var(--tv-color-teal);
  border: 1px solid var(--tv-color-teal-border);
}
.tv-btn-view:hover {
  background: rgba(5,190,155,0.16); border-color: rgba(5,190,155,0.40);
}
.tv-btn-view:active { background: rgba(5,190,155,0.22); }
.tv-btn-view:disabled, .tv-btn-view[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* 7. EDIT */
.tv-btn-edit {
  background: rgba(102,78,229,0.08); color: var(--tv-color-violet-light);
  border: 1px solid rgba(102,78,229,0.18);
}
.tv-btn-edit:hover {
  background: rgba(102,78,229,0.16); border-color: rgba(102,78,229,0.40);
}
.tv-btn-edit:active { background: rgba(102,78,229,0.22); }
.tv-btn-edit:disabled, .tv-btn-edit[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* 8. TEXT */
.tv-btn-text {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.375rem var(--tv-space-3); font-size: var(--tv-font-sm); font-weight: var(--tv-font-medium);
  border-radius: var(--tv-radius-sm); border: none; background: transparent;
  color: var(--tv-color-teal-light); text-decoration: none;
  transition: color var(--tv-transition-fast), background var(--tv-transition-fast);
  cursor: pointer;
}
.tv-btn-text:hover { color: var(--tv-color-teal-lighter); background: rgba(5,190,155,0.08); }
.tv-btn-text:active { background: rgba(5,190,155,0.14); }
.tv-btn-text:disabled, .tv-btn-text[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* 9. SECONDARY */
.tv-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2rem; padding: 0 var(--tv-space-5); font-size: var(--tv-font-base);
  border-radius: var(--tv-radius-md);
  color: var(--tv-text-muted); border: 1px solid var(--tv-border-subtle);
  text-decoration: none;
  transition: color var(--tv-transition-fast), border-color var(--tv-transition-fast);
}
.tv-btn-secondary:hover { color: var(--tv-color-teal); border-color: rgba(5,190,155,0.40); }
.tv-btn-secondary:active { border-color: rgba(5,190,155,0.60); }
.tv-btn-secondary:disabled, .tv-btn-secondary[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* ── Button loading state ─────────────────────────────────────── */
.tv-btn-loading {
  pointer-events: none; opacity: 0.65; cursor: wait;
  position: relative;
}
.tv-btn-loading:disabled, .tv-btn-loading[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════
   5. TOOLBAR SYSTEM: Search + Filters + Actions
   ══════════════════════════════════════════════════════════════════ */

.tv-search {
  width: 100%; padding: 0.625rem var(--tv-space-4) 0.625rem 2.5rem;
  font-size: var(--tv-font-base); color: var(--tv-text-primary);
  background: var(--tv-surface-input); border: 1px solid var(--tv-border-subtle);
  border-radius: var(--tv-radius-md);
  outline: none; transition: border-color var(--tv-transition-fast), box-shadow var(--tv-transition-fast);
}
.tv-search::placeholder { color: var(--tv-text-placeholder); }
.tv-search:focus {
  border-color: var(--tv-color-teal);
  box-shadow: 0 0 0 2px rgba(5,190,155,0.25);
}

.tv-search-wrap {
  position: relative; flex: 1; min-width: 12rem;
}
.tv-search-wrap svg {
  position: absolute; left: var(--tv-space-3); top: 50%;
  transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--tv-text-disabled);
  pointer-events: none;
}

.tv-filter-group {
  display: inline-flex; align-items: center; gap: var(--tv-space-1);
  background: var(--tv-surface-card); border: 1px solid var(--tv-surface-elevated);
  border-radius: var(--tv-radius-lg); padding: var(--tv-space-1);
}

.tv-filter-tab {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.375rem var(--tv-space-4); font-size: var(--tv-font-base); font-weight: var(--tv-font-medium);
  border-radius: var(--tv-radius-md); text-decoration: none;
  color: var(--tv-text-muted); background: transparent;
  transition: color var(--tv-transition-fast), background var(--tv-transition-fast);
  white-space: nowrap; cursor: pointer;
}
.tv-filter-tab:hover {
  color: var(--tv-text-primary); background: rgba(255,255,255,0.06);
}
.tv-filter-tab[aria-selected="true"],
.tv-filter-tab.active {
  color: var(--tv-color-accent); background: rgba(255,255,255,0.10);
}

.tv-filter-count {
  margin-left: 0.375rem; font-size: var(--tv-font-xs);
  color: var(--tv-text-disabled);
}
.tv-filter-tab.active .tv-filter-count,
.tv-filter-tab[aria-selected="true"] .tv-filter-count {
  color: rgba(255,255,255,0.5);
}

.tv-btn-clear {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.25rem; padding: 0 var(--tv-space-4);
  font-size: var(--tv-font-sm); font-weight: var(--tv-font-medium);
  border-radius: var(--tv-radius-md);
  color: var(--tv-text-muted); background: var(--tv-border-subtle);
  text-decoration: none;
  transition: color var(--tv-transition-fast), background var(--tv-transition-fast);
}
.tv-btn-clear:hover { color: var(--tv-text-primary); background: var(--tv-border-muted); }
.tv-btn-clear:active { opacity: 0.85; transform: scale(0.97); }
.tv-btn-clear:disabled, .tv-btn-clear[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

.tv-select {
  padding: 0.625rem 2rem 0.625rem var(--tv-space-3);
  font-size: var(--tv-font-base); color: var(--tv-text-primary);
  background: var(--tv-surface-input); border: 1px solid var(--tv-border-subtle);
  border-radius: var(--tv-radius-md);
  outline: none; transition: border-color var(--tv-transition-fast), box-shadow var(--tv-transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--tv-space-3) center;
}
.tv-select:focus {
  border-color: var(--tv-color-teal);
  box-shadow: 0 0 0 2px rgba(5,190,155,0.25);
}


/* ══════════════════════════════════════════════════════════════════
   6. STATUS BADGES
   ══════════════════════════════════════════════════════════════════ */

.tv-badge {
  display: inline-flex; align-items: center; gap: var(--tv-space-1);
  padding: 0.125rem var(--tv-space-2);
  font-size: var(--tv-font-xs); font-weight: var(--tv-font-medium); line-height: 1.25rem;
  border-radius: var(--tv-radius-full); white-space: nowrap;
}
.tv-badge-blue   { background: var(--tv-color-blue-bg);   color: var(--tv-color-blue);        border: 1px solid var(--tv-color-blue-border); }
.tv-badge-teal   { background: var(--tv-color-teal-bg);   color: var(--tv-color-teal-badge);  border: 1px solid var(--tv-color-teal-border); }
.tv-badge-green  { background: var(--tv-color-green-bg);  color: var(--tv-color-green);       border: 1px solid var(--tv-color-green-border); }
.tv-badge-red    { background: var(--tv-color-red-bg);    color: var(--tv-color-red);         border: 1px solid var(--tv-color-red-border); }
.tv-badge-amber  { background: var(--tv-color-amber-bg);  color: var(--tv-color-amber);       border: 1px solid var(--tv-color-amber-border); }
.tv-badge-violet { background: var(--tv-color-violet-bg); color: var(--tv-color-violet-badge); border: 1px solid var(--tv-color-violet-border); }
.tv-badge-gray   { background: var(--tv-color-gray-bg);   color: var(--tv-color-gray-badge);  border: 1px solid var(--tv-color-gray-border); }


/* ══════════════════════════════════════════════════════════════════
   7a. CHART ICON BACKGROUNDS (gradient badges on dashboard cards)
   ══════════════════════════════════════════════════════════════════ */

.tv-icon-bg-violet  { background: linear-gradient(135deg, rgba(102,78,229,0.125), rgba(236,72,153,0.125)); }
.tv-icon-bg-blue    { background: linear-gradient(135deg, rgba(59,130,246,0.125), rgba(96,165,250,0.125)); }
.tv-icon-bg-amber   { background: linear-gradient(135deg, rgba(245,158,11,0.125), rgba(217,119,6,0.125)); }
.tv-icon-bg-green   { background: linear-gradient(135deg, rgba(34,197,94,0.125), rgba(22,163,74,0.125)); }
.tv-icon-bg-teal    { background: linear-gradient(135deg, rgba(5,190,155,0.125), rgba(20,184,166,0.125)); }
.tv-icon-bg-pink    { background: linear-gradient(135deg, rgba(236,72,153,0.125), rgba(244,63,94,0.125)); }
.tv-icon-bg-violet2 { background: linear-gradient(135deg, rgba(102,78,229,0.125), rgba(167,139,250,0.125)); }
.tv-icon-bg-red     { background: linear-gradient(135deg, rgba(239,68,68,0.125), rgba(220,38,38,0.125)); }

/* ══════════════════════════════════════════════════════════════════
   7. CARDS & DETAIL LAYOUT
   ══════════════════════════════════════════════════════════════════ */

.tv-card,
.tv-detail-card {
  background: var(--tv-surface-card); border: 1px solid var(--tv-border-default);
  border-radius: var(--tv-radius-lg);
  width: 100%; min-width: 0;      /* fill grid/flex parent, allow shrink */
  box-sizing: border-box;
  height: auto;                    /* always grow to fit content */
  flex-shrink: 0;                  /* never compress inside flex containers */
}

.tv-card-header,
.tv-detail-card-header {
  padding: var(--tv-space-3) var(--tv-space-5);
  border-bottom: 1px solid var(--tv-border-default);
  font-size: var(--tv-font-base); font-weight: var(--tv-font-semibold); color: var(--tv-text-primary);
  border-radius: var(--tv-radius-lg) var(--tv-radius-lg) 0 0;  /* clip bg to rounded top */
}
.tv-card-body,
.tv-detail-card-body { padding: var(--tv-space-5); }
.tv-row-hover { transition: background 150ms; }
.tv-row-hover:hover { background: var(--tv-surface-hover); }

/* ── Detail grid container ────────────────────────────────────── */
.tv-detail {
  display: grid; gap: var(--tv-space-6);
  grid-template-columns: 1fr;
  max-width: 80rem; margin: 0 auto;
}
.tv-detail > * { min-width: 0; }   /* prevent grid children from overflowing */
@media (min-width: 1024px) {
  .tv-detail {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  }
}

.tv-detail-sidebar {
  display: flex; flex-direction: column; gap: var(--tv-space-4);
}
@media (min-width: 1024px) {
  .tv-detail-sidebar {
    position: -webkit-sticky; position: sticky; top: 5rem;
    align-self: start;
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
  }
}

/* ── Content tabs bar ─────────────────────────────────────────── */
.tv-tabs-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
}
.tv-tabs-arrow {
  display: none;            /* hidden by default, JS shows when needed */
  position: absolute; top: 0; bottom: 0; z-index: 2;
  width: 2rem;
  align-items: center; justify-content: center;
  background: var(--tv-surface-card);
  border: none; cursor: pointer; color: var(--tv-text-secondary);
  font-size: 1rem; padding: 0;
  transition: color var(--tv-transition-fast);
}
.tv-tabs-arrow:hover { color: var(--tv-text-primary); }
.tv-tabs-arrow--left  { left: 0;  border-right: 1px solid var(--tv-border-default); }
.tv-tabs-arrow--right { right: 0; border-left:  1px solid var(--tv-border-default); }
.tv-tabs-arrow.visible { display: flex; }

.tv-detail-tabs {
  display: flex; gap: 0.125rem;
  border-bottom: 1px solid var(--tv-border-default);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1; min-width: 0;
}
.tv-detail-tabs::-webkit-scrollbar { display: none; }

.tv-detail-tab {
  padding: var(--tv-space-3) var(--tv-space-5);
  font-size: var(--tv-font-sm); font-weight: var(--tv-font-medium);
  color: var(--tv-text-disabled); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--tv-transition-fast), border-color var(--tv-transition-fast);
  cursor: pointer; text-decoration: none;
  background: transparent;
  flex-shrink: 0;
}
.tv-detail-tab:hover { color: var(--tv-text-secondary); }
.tv-detail-tab.active {
  color: var(--tv-color-teal);
  border-bottom-color: var(--tv-color-teal);
}

.tv-tab-panel { display: none; }
.tv-tab-panel.active { display: block; }


/* ══════════════════════════════════════════════════════════════════
   8. TOAST NOTIFICATIONS
   ══════════════════════════════════════════════════════════════════ */

#tv-toast-container {
  position: fixed; bottom: var(--tv-space-6); right: var(--tv-space-6); z-index: 9999;
  display: flex; flex-direction: column; gap: var(--tv-space-2);
  pointer-events: none;
}
.tv-toast {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem var(--tv-space-4); border-radius: 0.625rem;
  font-size: var(--tv-font-sm); font-family: inherit;
  box-shadow: var(--tv-shadow-toast);
  border: 1px solid; pointer-events: auto;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--tv-transition-slow), transform var(--tv-transition-slow);
}
.tv-toast.show { opacity: 1; transform: translateY(0); }
.tv-toast-success { background: rgba(5,190,155,0.12); border-color: rgba(5,190,155,0.25); color: var(--tv-color-teal); }
.tv-toast-error   { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); color: var(--tv-color-red); }
.tv-toast-info    { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.25); color: var(--tv-color-blue); }
.tv-toast-warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.25); color: var(--tv-color-amber); }

/* ── Numeric typography (Poppins + tabular alignment) ──────────── */
.tv-numeric {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
}


/* ══════════════════════════════════════════════════════════════════
   9. SPINNER
   ══════════════════════════════════════════════════════════════════ */

.tv-spinner {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: var(--tv-color-teal);
  border-radius: 50%;
  animation: tv-spin 0.6s linear infinite;
}
.tv-spinner-sm { width: 0.875rem; height: 0.875rem; border-width: 1.5px; }
@keyframes tv-spin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════════════════════════════
   10. MISC UTILITIES
   ══════════════════════════════════════════════════════════════════ */

/* Semantic text utilities */
.tv-text-disabled  { color: var(--tv-text-disabled); }
.tv-text-muted     { color: var(--tv-text-muted); }
.tv-text-secondary { color: var(--tv-text-secondary); }
.tv-text-primary   { color: var(--tv-text-primary); }
.tv-text-on-solid  { color: var(--tv-text-on-solid); }

/* Semantic status text — for inline status indicators, counts, labels */
.tv-text-error   { color: var(--tv-color-red); }
.tv-text-success { color: var(--tv-color-green); }
.tv-text-warning { color: var(--tv-color-amber); }
.tv-text-info    { color: var(--tv-color-blue); }
.tv-text-teal    { color: var(--tv-color-teal); }
.tv-text-violet  { color: var(--tv-color-violet-badge); }
.tv-text-pink    { color: var(--tv-color-pink); }

/* Alert components — for inline warnings, errors, info messages */
.tv-alert-warning {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--tv-space-4); border-radius: var(--tv-radius-lg);
  background: var(--tv-color-amber-bg); border: 1px solid var(--tv-color-amber-border);
  color: var(--tv-color-amber); font-size: var(--tv-font-sm);
}
.tv-alert-warning strong,
.tv-alert-warning .tv-alert-title { color: var(--tv-color-amber); font-weight: 600; }
.tv-alert-warning a { color: var(--tv-color-amber); text-decoration: underline; cursor: pointer; }
.tv-alert-error {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--tv-space-4); border-radius: var(--tv-radius-lg);
  background: var(--tv-color-red-bg); border: 1px solid var(--tv-color-red-border);
  color: var(--tv-color-red); font-size: var(--tv-font-sm);
}
.tv-alert-error strong,
.tv-alert-error .tv-alert-title { color: var(--tv-color-red); font-weight: 600; }
.tv-alert-info {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--tv-space-4); border-radius: var(--tv-radius-lg);
  background: var(--tv-color-blue-bg); border: 1px solid var(--tv-color-blue-border);
  color: var(--tv-color-blue); font-size: var(--tv-font-sm);
}
.tv-alert-success {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--tv-space-4); border-radius: var(--tv-radius-lg);
  background: var(--tv-color-green-bg); border: 1px solid var(--tv-color-green-border);
  color: var(--tv-color-green); font-size: var(--tv-font-sm);
}

/* Semantic status backgrounds — pill-style inline indicators */
.tv-bg-error   { background: var(--tv-color-red-bg); }
.tv-bg-success { background: var(--tv-color-green-bg); }
.tv-bg-warning { background: var(--tv-color-amber-bg); }
.tv-bg-info    { background: var(--tv-color-blue-bg); }
.tv-bg-teal    { background: var(--tv-color-teal-bg); }
.tv-bg-violet  { background: var(--tv-color-violet-bg); }
.tv-bg-muted   { background: var(--tv-color-gray-bg); }

/* Semantic border colors — for status-colored borders */
.tv-border-error   { border-color: var(--tv-color-red-border); }
.tv-border-success { border-color: var(--tv-color-green-border); }
.tv-border-warning { border-color: var(--tv-color-amber-border); }
.tv-border-info    { border-color: var(--tv-color-blue-border); }
.tv-border-teal    { border-color: var(--tv-color-teal-border); }
.tv-border-violet  { border-color: var(--tv-color-violet-border); }
.tv-border-muted   { border-color: var(--tv-border-muted); }

/* Solid border variants — for stronger emphasis */
.tv-border-teal-solid    { border-color: var(--tv-color-teal); }
.tv-border-error-solid   { border-color: var(--tv-color-red); }
.tv-border-success-solid { border-color: var(--tv-color-green); }
.tv-border-warning-solid { border-color: var(--tv-color-amber); }
.tv-border-violet-solid  { border-color: var(--tv-color-violet-badge); }

/* Solid background variants — for stronger emphasis (buttons, active states) */
.tv-bg-teal-solid    { background: var(--tv-color-teal); }
.tv-bg-error-solid   { background: var(--tv-color-red); }
.tv-bg-warning-solid { background: var(--tv-color-amber); }
.tv-bg-violet-solid  { background: var(--tv-color-violet); }

/* Hover state utilities — for interactive elements */
.hover\:tv-text-primary:hover   { color: var(--tv-text-primary); }
.hover\:tv-text-secondary:hover { color: var(--tv-text-secondary); }
.focus\:tv-text-on-solid:focus  { color: var(--tv-text-on-solid); }
.hover\:tv-border-accent:hover  { border-color: var(--tv-color-violet-light); }
.hover\:tv-border-violet:hover  { border-color: var(--tv-color-violet-border); }

/* Border default class — for elements needing a neutral border via class (not inline) */
.tv-border-default-class { border-color: var(--tv-border-default); }

/* ── Structural surface utilities ────────────────────────────── */
.tv-surface-page      { background-color: var(--tv-surface-page); }
.tv-surface-card      { background-color: var(--tv-surface-card); }
.tv-surface-card-alt  { background-color: rgba(var(--tv-surface-elevated-rgb), 0.5); }
.tv-surface-elevated  { background-color: var(--tv-surface-elevated); }
.tv-surface-elevated-60 { background-color: rgba(var(--tv-surface-elevated-rgb), 0.6); }
.tv-surface-elevated-50 { background-color: rgba(var(--tv-surface-elevated-rgb), 0.5); }
.tv-surface-elevated-40 { background-color: rgba(var(--tv-surface-elevated-rgb), 0.4); }
.tv-surface-elevated-30 { background-color: rgba(var(--tv-surface-elevated-rgb), 0.3); }
.tv-surface-inset     { background-color: var(--tv-surface-inset); }
.tv-surface-dot       { background-color: var(--tv-text-disabled); }
.tv-surface-dot-dim   { background-color: var(--tv-border-muted); }
.tv-surface-page-dim  { background-color: rgba(var(--tv-surface-page-rgb), 0.4); }

/* ── Structural border color utilities ───────────────────────── */
.tv-divide       { border-color: var(--tv-border-default); }
.tv-divide > :not([hidden]) ~ :not([hidden]) { border-color: var(--tv-border-default); }
.tv-divide-half  { border-color: rgba(var(--tv-surface-elevated-rgb), 0.5); }
.tv-divide-third { border-color: rgba(var(--tv-surface-elevated-rgb), 0.3); }
.tv-divide-faint { border-color: rgba(var(--tv-surface-elevated-rgb), 0.6); }
.tv-divide-subtle { border-color: var(--tv-border-muted); }

/* ── Structural hover utilities ──────────────────────────────── */
.hover\:tv-surface-elevated:hover { background-color: var(--tv-surface-elevated); }
.hover\:tv-elevated-50:hover  { background-color: rgba(var(--tv-surface-elevated-rgb), 0.5); }
.hover\:tv-elevated-30:hover  { background-color: rgba(var(--tv-surface-elevated-rgb), 0.3); }
.hover\:tv-elevated-60:hover  { background-color: rgba(var(--tv-surface-elevated-rgb), 0.6); }
.hover\:tv-surface-inset:hover { background-color: var(--tv-surface-inset); }
.hover\:tv-inset-50:hover     { background-color: rgba(var(--tv-surface-inset-rgb), 0.5); }
.hover\:tv-surface-subtle:hover { background-color: var(--tv-border-muted); }

/* Status dot — small colored circle for status indicators */
.tv-dot {
  display: inline-block; width: 0.5rem; height: 0.5rem;
  border-radius: var(--tv-radius-full); flex-shrink: 0;
}
.tv-dot-blue   { background: var(--tv-color-blue); }
.tv-dot-teal   { background: var(--tv-color-teal); }
.tv-dot-green  { background: var(--tv-color-green); }
.tv-dot-red    { background: var(--tv-color-red); }
.tv-dot-amber  { background: var(--tv-color-amber); }
.tv-dot-violet { background: var(--tv-color-violet-badge); }
.tv-dot-gray   { background: var(--tv-color-gray-badge); }

/* Label text — uppercase, small, muted (for form labels, table headers, section headers) */
.tv-label-text {
  font-size: var(--tv-font-xs); font-weight: var(--tv-font-semibold);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--tv-text-disabled);
}
.tv-table-header {
  font-size: var(--tv-font-xs); font-weight: var(--tv-font-semibold);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--tv-text-disabled); white-space: nowrap;
}

/* Calendar appointment card text styles */
.tv-cal-card-name {
  font-size: 11px; font-weight: 600; color: var(--tv-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3; margin: 0;
}
.tv-cal-card-time {
  font-size: 10px; color: var(--tv-text-muted); margin: 1px 0 0;
}
.tv-cal-card-reason {
  font-size: 10px; color: var(--tv-text-disabled);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 1px 0 0;
}

/* Toast container alias (ID exists, class for flexibility) */
.tv-toast-container {
  position: fixed; bottom: var(--tv-space-6); right: var(--tv-space-6); z-index: 9999;
  display: flex; flex-direction: column; gap: var(--tv-space-2);
  pointer-events: none;
}

/* ── Focus-visible styles (keyboard navigation accessibility) ──── */
/* Global focus-visible outline for interactive elements */
:focus-visible {
  outline: 2px solid var(--tv-focus-ring-color);
  outline-offset: 2px;
}
/* Remove default focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}
/* Restore focus-visible ring on generic inputs even when Tailwind's
   focus:outline-none is present (it sets outline:transparent on :focus
   which would otherwise mask :focus-visible).  */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tv-focus-ring-color) !important;
  outline-offset: 2px;
}
/* Normalize date/time/number inputs across browsers (Safari, Firefox) */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="number"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
/* Specific overrides for inputs that already have ring styles */
.tv-search:focus-visible,
.tv-input:focus-visible,
.tv-textarea:focus-visible,
.tv-form-select:focus-visible,
.tv-select:focus-visible {
  outline: none;
  border-color: var(--tv-focus-ring-color);
  box-shadow: 0 0 0 2px var(--tv-focus-ring-shadow);
}
/* Buttons get a more visible ring */
.tv-btn-primary:focus-visible,
.tv-btn-danger:focus-visible,
.tv-btn-danger-solid:focus-visible,
.tv-btn-text:focus-visible,
.tv-btn-clear:focus-visible,
.tv-btn-view:focus-visible,
.tv-btn-edit:focus-visible,
.tv-btn-outline:focus-visible,
.tv-btn-cancel:focus-visible,
.tv-btn-secondary:focus-visible {
  outline: 2px solid var(--tv-focus-ring-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--tv-focus-ring-shadow);
}
/* Sidebar links */
.sidebar-link:focus-visible {
  outline: 2px solid var(--tv-focus-ring-color);
  outline-offset: -2px;
}

/* Auto-brand border-gray buttons */
a[class*="border-gray-7"]:not(.sidebar-link):hover,
button[class*="border-gray-7"]:not(.sidebar-link):not([onclick]):hover {
  border-color: rgba(102,78,229,0.45) !important;
  color: var(--tv-color-violet-light) !important;
}

/* Header baseline alignment — brand, title, and search share the same text baseline */
#trivet-header {
  align-items: baseline !important;
  padding-top: 0.875rem !important;
}
#trivet-header h1 { line-height: 1; }
#trivet-header > .flex { align-items: baseline; }
#trivet-header #notif-wrap { align-self: center; }

/* Sidebar brand — match header baseline position */
#trivet-brand {
  align-items: baseline !important;
  padding-top: 0.875rem !important;
}

/* Header gradient accent line */
#trivet-hline {
  position: fixed; left: 0; right: 0; height: 1px; z-index: 100;
  background: linear-gradient(90deg,
    rgba(102,78,229,0.5) 0%, rgba(5,190,155,0.5) 50%, rgba(102,78,229,0.2) 100%);
  pointer-events: none;
}

/* Global search brand */
#gs-input {
  transition: width var(--tv-transition-base), border-color var(--tv-transition-base), box-shadow var(--tv-transition-base) !important;
}
#gs-input:focus {
  border-color: var(--tv-color-teal) !important;
  box-shadow: 0 0 0 3px rgba(5,190,155,0.12) !important;
}
#gs-wrap svg { color: var(--tv-color-teal) !important; }

@keyframes gs-beacon {
  0%   { box-shadow: 0 0 0 0   rgba(5,190,155,0.5); border-color: var(--tv-color-teal); }
  50%  { box-shadow: 0 0 0 6px rgba(5,190,155,0.0); border-color: var(--tv-color-violet); }
  100% { box-shadow: 0 0 0 0   rgba(102,78,229,0.0); border-color: var(--tv-border-subtle); }
}
#gs-input.gs-beacon { animation: gs-beacon 1.4s ease-out 0.6s 2; }

/* Notification badge */
.nav-badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 1.1rem; height: 1.1rem;
  border-radius: var(--tv-radius-full);
  background: var(--tv-color-info);
  color: var(--tv-text-on-solid);
  font-size: 0.6rem; font-weight: var(--tv-font-bold);
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--tv-space-1);
  line-height: 1;
  pointer-events: none;
}
html.sb-col .nav-badge { top: 2px; right: 2px; }

/* Scrollbar — Global (misma estética que el nav) */
*::-webkit-scrollbar              { width: 6px; height: 6px; }
*::-webkit-scrollbar-track        { background: transparent; }
*::-webkit-scrollbar-thumb        { background: var(--tv-border-subtle); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover  { background: var(--tv-text-disabled); }
*::-webkit-scrollbar-corner       { background: transparent; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--tv-border-subtle) transparent; }
/* Nav: aún más fino */
nav::-webkit-scrollbar              { width: 4px; }
nav::-webkit-scrollbar-track        { background: transparent; margin-top: 6px; margin-bottom: 6px; }
nav::-webkit-scrollbar-thumb        { background: var(--tv-border-subtle); border-radius: 2px; }

/* Dark mode contrast fix */
html.dark .text-gray-500 { color: #888888; }
html.dark .text-gray-600 { color: #666666; }


/* ══════════════════════════════════════════════════════════════════
   11. LIGHT MODE OVERRIDES
   ══════════════════════════════════════════════════════════════════ */

html.light {
  color-scheme: light;

  /* ── Remap tokens ─────────────────────────────────────────────── */
  --tv-surface-page:       #eef1f5;
  --tv-surface-card:       #fcfcfc;   /* never pure white — #fcfcfc for surfaces */
  --tv-surface-elevated:   #f1f4f8;
  --tv-surface-input:      #f8fafc;
  --tv-surface-hover:      rgba(0,0,0,0.04);
  --tv-surface-inset:      #e2e8f0;
  --tv-surface-elevated-rgb: 241,244,248;
  --tv-surface-inset-rgb:    226,232,240;
  --tv-surface-page-rgb:     238,241,245;

  --tv-border-default:     #e2e8f0;
  --tv-border-subtle:      #d1d5db;
  --tv-border-muted:       #cbd5e1;

  --tv-text-primary:       #0f172a;
  --tv-text-secondary:     #1e293b;
  --tv-text-muted:         #475569;
  --tv-text-disabled:      #57677d;   /* was #64748b — darkened for WCAG AA 4.5:1 on light surfaces */
  --tv-text-placeholder:   #94a3b8;

  /* ── Chart tokens (light) ────────────────────────────────────── */
  --tv-chart-label:        #475569;
  --tv-chart-grid:         rgba(0,0,0,0.12);
  --tv-chart-border:       rgba(0,0,0,0.10);
  --tv-chart-tick:         #64748b;
  --tv-chart-donut-border: #fcfcfc;   /* never pure white — #fcfcfc for surfaces */
  --tv-chart-muted:        #94a3b8;

  /* ── State badge light adjustments ────────────────────────────── */
  --tv-color-blue:         #2563eb;
  --tv-color-blue-bg:      rgba(59,130,246,0.08);
  --tv-color-blue-border:  rgba(59,130,246,0.25);

  --tv-color-teal-badge:   #059669;
  --tv-color-teal-bg:      rgba(5,190,155,0.08);
  --tv-color-teal-border:  rgba(5,190,155,0.25);

  --tv-color-green:        #16a34a;
  --tv-color-green-bg:     rgba(34,197,94,0.08);
  --tv-color-green-border: rgba(34,197,94,0.25);

  --tv-color-red:          #dc2626;
  --tv-color-red-bg:       rgba(239,68,68,0.08);
  --tv-color-red-border:   rgba(239,68,68,0.25);

  --tv-color-amber:        #d97706;
  --tv-color-amber-bg:     rgba(245,158,11,0.08);
  --tv-color-amber-border: rgba(245,158,11,0.25);

  --tv-color-violet-badge: #7c3aed;
  --tv-color-violet-bg:    rgba(139,92,246,0.08);
  --tv-color-violet-border:rgba(139,92,246,0.25);

  --tv-color-gray-badge:   #4b5563;
  --tv-color-gray-bg:      rgba(107,114,128,0.08);
  --tv-color-gray-border:  rgba(107,114,128,0.20);

  /* ── Brand colors (light — darkened for contrast on white) ────── */
  --tv-color-teal:         #059669;
  --tv-color-teal-hover:   #047857;
  --tv-color-teal-active:  #065f46;
  --tv-color-teal-light:   #0d9488;
  --tv-color-teal-lighter: #0f766e;
  --tv-color-violet:       #664ee5;
  --tv-color-violet-hover: #5640d0;
  --tv-color-violet-active:#4533b8;
  --tv-color-violet-light: #7c3aed;

  /* ── Accent (light = violet) ────────────────────────────────── */
  --tv-color-accent:       var(--tv-color-violet);

  /* ── Solid / destructive (light) ────────────────────────────── */
  --tv-color-danger:       #dc2626;
  --tv-color-danger-hover: #b91c1c;
  --tv-color-danger-light: #ef4444;
  --tv-color-info:         #0284c7;
  --tv-color-pink:         #db2777;
  --tv-text-on-solid:      #ffffff;
  --tv-text-on-brand:      #1a1a2e;

  /* ── Shadows (light) ────────────────────────────────────────── */
  --tv-shadow-toast:       0 4px 24px rgba(0,0,0,0.12);
  --tv-shadow-btn:         0 4px 16px rgba(102,78,229,0.25);

  /* ── Focus ring (light — violet for contrast) ───────────────── */
  --tv-focus-ring-color:   var(--tv-color-violet);
  --tv-focus-ring-shadow:  rgba(102,78,229,0.25);
}

/* Logo switching (dark-first: dark-logo visible, light-logo hidden) */
.light-logo { display: none; }
html.light .dark-logo  { display: none !important; }
html.light .light-logo { display: block !important; }

/* Gradient CTA buttons: ensure white text in light mode */
html.light a[style*="gradient"],
html.light button[style*="gradient"] { color: #ffffff !important; }

/* Page & layout backgrounds */
html.light body                   { background-color: #eef1f5; }
html.light .bg-gray-950           { background-color: #eef1f5 !important; }
html.light .bg-gray-900           { background-color: #FCFCFC !important; }
html.light .bg-gray-800           { background-color: #f1f4f8 !important; }
html.light [class*="bg-gray-800"] { background-color: #f1f4f8 !important; }
html.light [class*="bg-gray-900"] { background-color: #FCFCFC !important; }

/* Borders */
html.light .border-gray-800,
html.light [class*="border-gray-8"] { border-color: #e2e8f0 !important; }
html.light .border-gray-700,
html.light [class*="border-gray-7"] { border-color: #d1d5db !important; }

/* Text */
html.light .text-gray-100         { color: #1e293b !important; }
html.light .text-gray-200         { color: #334155 !important; }
html.light .text-gray-300         { color: #1e293b !important; }
html.light .text-gray-400         { color: #475569 !important; }
html.light .text-gray-500         { color: #64748b !important; }
html.light .text-gray-600         { color: #94a3b8 !important; }
html.light .text-gray-700         { color: #cbd5e1 !important; }

/* Hover text */
html.light .hover\:text-gray-200:hover { color: #334155 !important; }
html.light .group:hover .group-hover\:text-gray-500 { color: #94a3b8 !important; }

/* Divide */
/* Sidebar */
html.light #trivet-sidebar              { background-color: var(--tv-surface-card) !important; border-right-color: var(--tv-border-default) !important; }
html.light #trivet-sidebar .border-gray-800 { border-color: var(--tv-border-default) !important; }
html.light .sidebar-link                { color: var(--tv-text-muted) !important; }
html.light .sidebar-link:hover          { background: var(--tv-color-violet-bg) !important; color: var(--tv-color-violet) !important; }
html.light .sidebar-link.active         { background: var(--tv-color-violet-bg) !important; color: var(--tv-color-violet) !important; border-left-color: var(--tv-color-violet) !important; }
html.light .sidebar-link.active svg     { color: var(--tv-color-violet) !important; }
html.light .nav-section-label           { color: var(--tv-text-placeholder) !important; opacity: 1; }
html.light .nav-section-divider         { background: linear-gradient(90deg, rgba(5,190,155,0.2) 0%, rgba(102,78,229,0.1) 100%) !important; }
html.light *::-webkit-scrollbar-thumb { background: var(--tv-border-subtle); }
html.light *::-webkit-scrollbar-thumb:hover { background: var(--tv-text-placeholder); }
html.light * { scrollbar-color: var(--tv-border-subtle) transparent; }
html.light nav::-webkit-scrollbar-thumb { background: var(--tv-border-subtle); }
html.light #trivet-hline {
  background: linear-gradient(90deg, rgba(5,190,155,0.5) 0%, rgba(102,78,229,0.4) 50%, rgba(5,190,155,0.2) 100%);
}

/* Light mode brand buttons — inverted: view=violet, edit=teal */
html.light .tv-btn-view  { background: var(--tv-color-violet-bg) !important; color: var(--tv-color-violet) !important; border-color: var(--tv-color-violet-border) !important; }
html.light .tv-btn-view:hover { background: rgba(102,78,229,0.14) !important; }
html.light .tv-btn-edit  { background: var(--tv-color-teal-bg) !important; color: var(--tv-color-teal) !important; border-color: var(--tv-color-teal-border) !important; }
html.light .tv-btn-edit:hover { background: rgba(5,190,155,0.14) !important; }
html.light .tv-btn-secondary { border-color: var(--tv-border-subtle) !important; color: var(--tv-text-disabled) !important; }
html.light .tv-btn-secondary:hover { color: var(--tv-color-violet) !important; border-color: var(--tv-color-violet-border) !important; }
html.light .tv-btn-cancel { color: var(--tv-text-disabled) !important; border-color: var(--tv-border-subtle) !important; }
html.light .tv-btn-cancel:hover { color: var(--tv-color-teal) !important; border-color: var(--tv-color-teal-border) !important; background: var(--tv-color-teal-bg) !important; }
html.light .tv-btn-outline { color: var(--tv-text-muted) !important; border-color: var(--tv-border-muted) !important; }
html.light .tv-btn-outline:hover { color: var(--tv-text-primary) !important; border-color: var(--tv-text-placeholder) !important; background: var(--tv-surface-hover) !important; }
html.light .tv-btn-primary { background: var(--tv-color-violet) !important; }
html.light .tv-btn-primary:hover { background: var(--tv-color-violet-hover) !important; box-shadow: var(--tv-shadow-btn) !important; }
html.light .tv-btn-primary:active { background: var(--tv-color-violet-active) !important; }
html.light .tv-btn-danger { color: var(--tv-color-danger) !important; border-color: var(--tv-color-red-border) !important; }
html.light .tv-btn-danger:hover { color: var(--tv-color-danger-hover) !important; border-color: rgba(220,38,38,0.5) !important; background: var(--tv-color-red-bg) !important; }
html.light .tv-btn-text { color: var(--tv-color-violet) !important; }
html.light .tv-btn-text:hover { color: var(--tv-color-violet-light) !important; background: var(--tv-color-violet-bg) !important; }
html.light a[class*="border-gray-7"]:not(.sidebar-link):hover { border-color: var(--tv-color-violet-border) !important; color: var(--tv-color-violet) !important; }
html.light .hover\:text-teal-400:hover { color: var(--tv-color-violet) !important; }
html.light #gs-wrap svg { color: var(--tv-color-violet) !important; }

/* Input fields */
html.light input[type="text"],
html.light input[type="password"],
html.light input[type="email"],
html.light input[type="search"],
html.light input[type="number"],
html.light select,
html.light textarea {
  background-color: var(--tv-surface-input) !important;
  border-color: var(--tv-border-default) !important;
  color: var(--tv-text-primary) !important;
}
html.light input::placeholder,
html.light textarea::placeholder { color: var(--tv-text-placeholder) !important; }

/* Table headers */
html.light thead tr { border-color: #e2e8f0 !important; }

/* Flash / toast */
html.light .flash-msg { background-color: #f8fafc !important; }
html.light .tv-toast { box-shadow: 0 4px 24px rgba(0,0,0,0.12); }
html.light .tv-toast-success { background: var(--tv-color-teal-bg); color: var(--tv-color-teal); }
html.light .tv-toast-error   { background: var(--tv-color-red-bg); color: var(--tv-color-red); }
html.light .tv-toast-info    { background: var(--tv-color-blue-bg); color: var(--tv-color-blue); }
html.light .tv-toast-warning { background: var(--tv-color-amber-bg); color: var(--tv-color-amber); }
html.light .tv-spinner { border-color: rgba(0,0,0,0.10); border-top-color: var(--tv-color-violet); }

/* Cards */
html.light .tv-card,
html.light .tv-detail-card {
  background: var(--tv-surface-card) !important; border-color: var(--tv-border-default) !important;
}
html.light .tv-card-header,
html.light .tv-detail-card-header {
  border-bottom-color: var(--tv-border-default) !important; color: var(--tv-text-primary) !important;
}
html.light .tv-card-body,
html.light .tv-detail-card-body { background: transparent; }

/* Tabs */
html.light .tv-detail-tabs { border-bottom-color: var(--tv-border-default) !important; }
html.light .tv-detail-tab  { color: var(--tv-text-disabled); }
html.light .tv-detail-tab.active { color: var(--tv-color-violet); border-bottom-color: var(--tv-color-violet); }
html.light .tv-tabs-arrow { background: var(--tv-surface-card); color: var(--tv-text-disabled); }
html.light .tv-tabs-arrow:hover { color: var(--tv-text-primary); }

/* Row hover */
html.light .tv-row-hover:hover { background: rgba(0,0,0,0.04) !important; }

/* Light: search/filter toolbar */
html.light .tv-search {
  background: var(--tv-surface-input) !important;
  border-color: var(--tv-border-default) !important;
  color: var(--tv-text-primary) !important;
}
html.light .tv-search::placeholder { color: var(--tv-text-placeholder) !important; }
html.light .tv-search:focus {
  border-color: var(--tv-color-violet) !important;
  box-shadow: 0 0 0 2px rgba(102,78,229,0.20) !important;
}
html.light .tv-search-wrap svg { color: var(--tv-text-disabled) !important; }

html.light .tv-filter-group {
  background: var(--tv-surface-elevated) !important; border-color: var(--tv-border-default) !important;
}
html.light .tv-filter-tab { color: var(--tv-text-muted) !important; }
html.light .tv-filter-tab:hover { color: var(--tv-text-primary) !important; background: rgba(0,0,0,0.04) !important; }
html.light .tv-filter-tab.active,
html.light .tv-filter-tab[aria-selected="true"] {
  color: var(--tv-color-accent) !important; background: var(--tv-surface-card) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

html.light .tv-select {
  background-color: var(--tv-surface-input) !important;
  border-color: var(--tv-border-default) !important;
  color: var(--tv-text-primary) !important;
}
html.light .tv-select:focus {
  border-color: var(--tv-color-violet) !important;
  box-shadow: 0 0 0 2px rgba(102,78,229,0.20) !important;
}

html.light .tv-btn-clear { background: var(--tv-surface-inset) !important; color: var(--tv-text-muted) !important; }
html.light .tv-btn-clear:hover { background: var(--tv-border-subtle) !important; color: var(--tv-text-primary) !important; }

/* ── Light mode: accent = violet ──────────────────────────────────
   In dark mode the primary accent is teal; in light mode it flips
   to violet for better contrast and visual consistency with buttons.
   Badge colors (.tv-badge-*) are NOT affected — they keep their
   semantic colours.                                                 */

/* Utility classes: teal accent → violet */
html.light .tv-text-teal:not(.tv-badge-teal)   { color: var(--tv-color-violet) !important; }
html.light .tv-border-teal:not(.tv-badge-teal)  { border-color: var(--tv-color-violet-border) !important; }
html.light .tv-border-teal-solid                 { border-color: var(--tv-color-violet) !important; }
html.light .tv-bg-teal:not(.tv-badge-teal)       { background: var(--tv-color-violet-bg) !important; }
html.light .tv-bg-teal-solid:not(.tv-badge-teal) { background: var(--tv-color-violet) !important; }

/* Hover variants */
html.light .hover\:tv-text-teal:hover                { color: var(--tv-color-violet) !important; }
html.light .group:hover .group-hover\:tv-text-teal    { color: var(--tv-color-violet) !important; }

/* Focus states */
html.light .focus\:tv-border-teal-solid:focus { border-color: var(--tv-color-violet) !important; }

/* Links with teal accent */
html.light a.tv-text-teal:hover { color: var(--tv-color-violet-hover) !important; }

/* Peer-checked variants (Tailwind checkbox/radio toggles) */
html.light .peer:checked ~ .peer-checked\:tv-bg-teal       { background: var(--tv-color-violet-bg) !important; }
html.light .peer:checked ~ .peer-checked\:tv-border-teal-solid { border-color: var(--tv-color-violet) !important; }
html.light .peer:checked ~ .peer-checked\:tv-text-teal     { color: var(--tv-color-violet) !important; }


/* ══════════════════════════════════════════════════════════════════
   12. FORM SYSTEM — Inputs, Labels, Groups, Errors
   ══════════════════════════════════════════════════════════════════ */

/* ── Form Label ───────────────────────────────────────────────── */
.tv-label {
  display: block;
  font-size: var(--tv-font-xs);
  font-weight: var(--tv-font-medium);
  color: var(--tv-text-muted);
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tv-label-required::after {
  content: " *";
  color: var(--tv-color-red);
}

/* ── Text Inputs ──────────────────────────────────────────────── */
.tv-input {
  display: block; width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: var(--tv-font-base);
  color: var(--tv-text-primary);
  background: var(--tv-surface-input);
  border: 1px solid var(--tv-border-subtle);
  border-radius: var(--tv-radius-md);
  outline: none;
  transition: border-color var(--tv-transition-fast), box-shadow var(--tv-transition-fast);
}
.tv-input::placeholder { color: var(--tv-text-placeholder); }
.tv-input:focus {
  border-color: var(--tv-color-teal);
  box-shadow: 0 0 0 2px rgba(5,190,155,0.20);
}
.tv-input:disabled, .tv-input[readonly] {
  opacity: 0.6; cursor: not-allowed;
  background: var(--tv-surface-card);
}

/* ── Textarea ─────────────────────────────────────────────────── */
.tv-textarea {
  display: block; width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: var(--tv-font-base);
  color: var(--tv-text-primary);
  background: var(--tv-surface-input);
  border: 1px solid var(--tv-border-subtle);
  border-radius: var(--tv-radius-md);
  outline: none; resize: vertical;
  min-height: 5rem;
  transition: border-color var(--tv-transition-fast), box-shadow var(--tv-transition-fast);
}
.tv-textarea::placeholder { color: var(--tv-text-placeholder); }
.tv-textarea:focus {
  border-color: var(--tv-color-teal);
  box-shadow: 0 0 0 2px rgba(5,190,155,0.20);
}

/* ── Form Select (extended from existing tv-select) ───────────── */
.tv-form-select {
  display: block; width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: var(--tv-font-base);
  color: var(--tv-text-primary);
  background: var(--tv-surface-input);
  border: 1px solid var(--tv-border-subtle);
  border-radius: var(--tv-radius-md);
  outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  transition: border-color var(--tv-transition-fast), box-shadow var(--tv-transition-fast);
}
.tv-form-select:focus {
  border-color: var(--tv-color-teal);
  box-shadow: 0 0 0 2px rgba(5,190,155,0.20);
}

/* ── Form Group (label + input + error wrapper) ───────────────── */
.tv-form-group {
  display: flex; flex-direction: column;
}
.tv-form-group--span { grid-column: 1 / -1; }

/* ── Error state ──────────────────────────────────────────────── */
.tv-input-error,
.tv-textarea-error,
.tv-form-select-error {
  border-color: var(--tv-color-red) !important;
}
.tv-input-error:focus,
.tv-textarea-error:focus {
  box-shadow: 0 0 0 2px rgba(239,68,68,0.20) !important;
}
.tv-error {
  font-size: var(--tv-font-xs);
  color: var(--tv-color-red);
  margin-top: 0.25rem;
}

/* ── Help text ────────────────────────────────────────────────── */
.tv-help {
  font-size: var(--tv-font-xs);
  color: var(--tv-text-disabled);
  margin-top: 0.25rem;
}

/* ── Form Section Header ──────────────────────────────────────── */
.tv-form-section {
  padding: var(--tv-space-4) var(--tv-space-6);
  border-top: 1px solid var(--tv-border-default);
}
.tv-form-section-title {
  font-size: var(--tv-font-base);
  font-weight: var(--tv-font-semibold);
  color: var(--tv-text-primary);
}
.tv-form-section-sub {
  font-size: var(--tv-font-xs);
  color: var(--tv-text-disabled);
  margin-top: var(--tv-space-1);
}

/* ── Form Grid (standard 2-col layout) ────────────────────────── */
.tv-form-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--tv-space-4);
  padding: var(--tv-space-6);
}
@media (min-width: 640px) {
  .tv-form-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Form Actions (bottom button bar) ─────────────────────────── */
.tv-form-actions {
  display: flex; align-items: center; gap: var(--tv-space-3);
  padding: var(--tv-space-4) var(--tv-space-6);
  border-top: 1px solid var(--tv-border-default);
}
.tv-form-actions--right { justify-content: flex-end; }


/* ══════════════════════════════════════════════════════════════════
   13. TABLE SYSTEM — Headers, Rows, Pagination
   ══════════════════════════════════════════════════════════════════ */

/* ── Table header row ─────────────────────────────────────────── */
.tv-th {
  text-align: left;
  font-size: var(--tv-font-xs);
  font-weight: var(--tv-font-medium);
  color: var(--tv-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--tv-space-3) var(--tv-space-5);
}
.tv-th a {
  display: inline-flex; align-items: center; gap: var(--tv-space-1);
  color: inherit; text-decoration: none;
  transition: color var(--tv-transition-fast);
}
.tv-th a:hover { color: var(--tv-text-secondary); }
.tv-th-sort-indicator { color: var(--tv-color-teal); }

/* ── Table cell ───────────────────────────────────────────────── */
.tv-td {
  padding: var(--tv-space-3) var(--tv-space-5);
  font-size: var(--tv-font-base);
  color: var(--tv-text-secondary);
}

/* ── Table wrapper (card-based) ───────────────────────────────── */
.tv-table-card {
  background: var(--tv-surface-card);
  border: 1px solid var(--tv-border-default);
  border-radius: var(--tv-radius-lg);
  overflow: hidden;
}

/* ── Table header bar (count + columns btn + pagination) ──────── */
.tv-table-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--tv-space-3) var(--tv-space-5);
  border-bottom: 1px solid var(--tv-border-default);
}
.tv-table-count {
  font-size: var(--tv-font-base);
  color: var(--tv-text-muted);
}
.tv-table-count strong {
  color: var(--tv-text-primary);
  font-weight: var(--tv-font-semibold);
}
.tv-table-count em {
  color: var(--tv-color-teal);
  font-style: normal;
}

/* ── Pagination ───────────────────────────────────────────────── */
.tv-pagination {
  font-size: var(--tv-font-xs);
  color: var(--tv-text-disabled);
}

/* ── Row action buttons (opacity transition on group-hover) ──── */
.tv-row-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--tv-space-2);
  opacity: 0;
  transition: opacity var(--tv-transition-fast);
}
.group:hover .tv-row-actions,
tr:hover .tv-row-actions { opacity: 1; }


/* ══════════════════════════════════════════════════════════════════
   14. BREADCRUMB
   ══════════════════════════════════════════════════════════════════ */

.tv-breadcrumb {
  display: flex; align-items: center; gap: var(--tv-space-2);
  font-size: var(--tv-font-base);
  color: var(--tv-text-disabled);
}
.tv-breadcrumb a {
  color: inherit; text-decoration: none;
  transition: color var(--tv-transition-fast);
}
.tv-breadcrumb a:hover { color: var(--tv-text-secondary); }
.tv-breadcrumb-sep {
  color: var(--tv-text-disabled);
  user-select: none;
}
.tv-breadcrumb-current {
  color: var(--tv-text-muted);
}


/* ══════════════════════════════════════════════════════════════════
   15. STAT CARD — Dashboard / Summary Blocks
   ══════════════════════════════════════════════════════════════════ */

.tv-stat {
  background: var(--tv-surface-card);
  border: 1px solid var(--tv-border-default);
  border-radius: var(--tv-radius-lg);
  padding: var(--tv-space-4);
  transition: border-color var(--tv-transition-fast);
}
.tv-stat:hover { border-color: rgba(5,190,155,0.30); }

.tv-stat-icon {
  width: 2rem; height: 2rem;
  border-radius: var(--tv-radius-md);
  display: flex; align-items: center; justify-content: center;
}
.tv-stat-icon svg { width: 1rem; height: 1rem; }

.tv-stat-label {
  font-size: var(--tv-font-xs);
  font-weight: var(--tv-font-medium);
  color: var(--tv-text-disabled);
}
.tv-stat-value {
  font-size: 1.5rem;
  font-weight: var(--tv-font-bold);
  color: var(--tv-text-primary);
}
.tv-stat-sub {
  font-size: var(--tv-font-xs);
  color: var(--tv-text-disabled);
  margin-top: var(--tv-space-1);
}

/* Progress bar */
.tv-progress {
  height: 0.375rem;
  background: var(--tv-surface-elevated);
  border-radius: var(--tv-radius-full);
  overflow: hidden;
}
.tv-progress-bar {
  height: 100%;
  border-radius: var(--tv-radius-full);
  background: linear-gradient(90deg, var(--tv-color-teal), var(--tv-color-violet));
  transition: width 0.3s ease;
}


/* ══════════════════════════════════════════════════════════════════
   16. MODAL / DIALOG
   ══════════════════════════════════════════════════════════════════ */

.tv-modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.60);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.tv-modal {
  background: var(--tv-surface-card);
  border: 1px solid var(--tv-border-default);
  border-radius: var(--tv-radius-lg);
  width: 100%; max-width: 32rem;
  margin: var(--tv-space-4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.40);
  overflow: hidden;
}
.tv-modal-header {
  display: flex; align-items: center; gap: var(--tv-space-4);
  padding: var(--tv-space-5) var(--tv-space-6);
  border-bottom: 1px solid var(--tv-border-default);
}
.tv-modal-body {
  padding: var(--tv-space-5) var(--tv-space-6);
}
.tv-modal-footer {
  display: flex; gap: var(--tv-space-3);
  padding: var(--tv-space-4) var(--tv-space-6);
  border-top: 1px solid var(--tv-border-default);
}

/* Generic modal icon (base) */
.tv-modal-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--tv-radius-full);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--tv-color-gray-bg);
}
.tv-modal-icon svg {
  width: 1.25rem; height: 1.25rem; color: var(--tv-text-muted);
}

/* Danger modal icon */
.tv-modal-icon-danger {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--tv-radius-full);
  background: rgba(239,68,68,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tv-modal-icon-danger svg {
  width: 1.25rem; height: 1.25rem; color: var(--tv-color-red);
}


/* ══════════════════════════════════════════════════════════════════
   17. INFO BLOCK — Key/Value pairs in detail sidebars
   ══════════════════════════════════════════════════════════════════ */

.tv-info-list {
  display: flex; flex-direction: column;
  gap: var(--tv-space-3);
}
.tv-info-item {
  display: flex; flex-direction: column;
  gap: 0.125rem;
}
.tv-info-label {
  font-size: var(--tv-font-xs);
  color: var(--tv-text-disabled);
}
.tv-info-value {
  font-size: var(--tv-font-base);
  color: var(--tv-text-primary);
  word-break: break-word;
}
.tv-info-value a {
  color: var(--tv-color-teal);
  text-decoration: none;
  transition: color var(--tv-transition-fast);
}
.tv-info-value a:hover { color: var(--tv-color-teal-lighter); }
.tv-info-value--mono {
  font-family: monospace;
  font-size: var(--tv-font-xs);
  color: var(--tv-text-muted);
}
.tv-info-divider {
  border-top: 1px solid var(--tv-border-default);
  margin: var(--tv-space-2) 0;
}


/* ══════════════════════════════════════════════════════════════════
   18. TIMELINE — Clinical records, history entries
   ══════════════════════════════════════════════════════════════════ */

.tv-timeline {
  position: relative;
  padding-left: 1.5rem;
}
.tv-timeline::before {
  content: "";
  position: absolute; left: 0.4375rem; top: 0.5rem; bottom: 0.5rem;
  width: 1px;
  background: var(--tv-border-subtle);
}

.tv-timeline-item {
  position: relative;
  padding-bottom: var(--tv-space-6);
}
.tv-timeline-item:last-child { padding-bottom: 0; }

.tv-timeline-dot {
  position: absolute; left: -1.5rem; top: 0.25rem;
  width: 0.625rem; height: 0.625rem;
  border-radius: var(--tv-radius-full);
  background: var(--tv-border-subtle);
  border: 2px solid var(--tv-surface-card);
}
.tv-timeline-dot--active { background: var(--tv-color-teal); }
.tv-timeline-dot--danger { background: var(--tv-color-red); }
.tv-timeline-dot--violet { background: var(--tv-color-violet); }

.tv-timeline-date {
  font-size: var(--tv-font-xs);
  color: var(--tv-text-disabled);
  margin-bottom: var(--tv-space-1);
}
.tv-timeline-content {
  background: var(--tv-surface-card);
  border: 1px solid var(--tv-border-default);
  border-radius: var(--tv-radius-md);
  padding: var(--tv-space-3) var(--tv-space-4);
}
.tv-timeline-title {
  font-size: var(--tv-font-base);
  font-weight: var(--tv-font-semibold);
  color: var(--tv-text-primary);
}
.tv-timeline-body {
  font-size: var(--tv-font-base);
  color: var(--tv-text-muted);
  margin-top: var(--tv-space-1);
}


/* ══════════════════════════════════════════════════════════════════
   19. GRADIENT UTILITIES — Brand gradients
   ══════════════════════════════════════════════════════════════════ */

.tv-gradient-text {
  background: linear-gradient(135deg, var(--tv-color-teal) 0%, var(--tv-color-violet) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tv-gradient-bg {
  background: linear-gradient(135deg, var(--tv-color-teal) 0%, var(--tv-color-violet) 100%);
}
.tv-gradient-line {
  height: 1px;
  background: linear-gradient(90deg,
    rgba(102,78,229,0.35) 0%, rgba(5,190,155,0.35) 50%, rgba(102,78,229,0.15) 100%);
}
.tv-gradient-brand {
  background: var(--tv-gradient-brand);
}


/* ══════════════════════════════════════════════════════════════════
   20. BADGE UTILITIES — Extra variants
   ══════════════════════════════════════════════════════════════════ */

.tv-badge-void {
  background: var(--tv-color-red-bg); color: var(--tv-color-red);
  border: 1px solid var(--tv-color-red-border);
  text-decoration: line-through;
}


/* ══════════════════════════════════════════════════════════════════
   21. ICON WRAPPER — Consistent icon sizing
   ══════════════════════════════════════════════════════════════════ */

.tv-icon {
  width: 1.125rem; height: 1.125rem;
  flex-shrink: 0;
}
.tv-icon-sm { width: 1rem; height: 1rem; }
.tv-icon-lg { width: 1.5rem; height: 1.5rem; }


/* ══════════════════════════════════════════════════════════════════
   22. SECTION HEADER — Page/Card section titles
   ══════════════════════════════════════════════════════════════════ */

.tv-section-title {
  font-size: var(--tv-font-base);
  font-weight: var(--tv-font-semibold);
  color: var(--tv-text-primary);
}
.tv-section-sub {
  font-size: var(--tv-font-xs);
  color: var(--tv-text-disabled);
}


/* ══════════════════════════════════════════════════════════════════
   23. LAYOUT SYSTEM — Containers, Grids, Stacks
   ══════════════════════════════════════════════════════════════════ */

/* ── Layout tokens ─────────────────────────────────────────────── */
:root {
  /* Extended spacing (complement --tv-space-1…8) */
  --tv-space-10:  2.5rem;   /* 40px */
  --tv-space-12:  3rem;     /* 48px */

  /* Extended font sizes (complement xs…lg) */
  --tv-font-xl:   1.125rem; /* 18px */
  --tv-font-2xl:  1.5rem;   /* 24px */

  /* Breakpoints — reference values for media queries */
  --tv-breakpoint-sm:  640px;
  --tv-breakpoint-md:  768px;
  --tv-breakpoint-lg: 1024px;
  --tv-breakpoint-xl: 1280px;

  /* Container paddings — responsive scale */
  --tv-container-pad:     var(--tv-space-4);
  --tv-container-pad-md:  var(--tv-space-6);
  --tv-container-pad-lg:  var(--tv-space-8);

  /* Overflow utilities */
  --tv-text-wrap: break-word;
}

/* ── Container ─────────────────────────────────────────────────── */
.tv-container {
  width: 100%; margin-left: auto; margin-right: auto;
  padding-left: var(--tv-container-pad);
  padding-right: var(--tv-container-pad);
}
@media (min-width: 768px) {
  .tv-container {
    padding-left: var(--tv-container-pad-md);
    padding-right: var(--tv-container-pad-md);
  }
}
@media (min-width: 1024px) {
  .tv-container {
    padding-left: var(--tv-container-pad-lg);
    padding-right: var(--tv-container-pad-lg);
  }
}
.tv-container-sm  { max-width: 640px; }
.tv-container-md  { max-width: 768px; }
.tv-container-lg  { max-width: 1024px; }
.tv-container-xl  { max-width: 1280px; }
.tv-container-full { max-width: 100%; }

/* ── CSS Grid System ───────────────────────────────────────────── */
.tv-grid { display: grid; gap: var(--tv-space-4); }

.tv-grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.tv-grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv-grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tv-grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tv-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Column spans */
.tv-col-span-1  { grid-column: span 1 / span 1; }
.tv-col-span-2  { grid-column: span 2 / span 2; }
.tv-col-span-3  { grid-column: span 3 / span 3; }
.tv-col-span-4  { grid-column: span 4 / span 4; }
.tv-col-span-6  { grid-column: span 6 / span 6; }
.tv-col-span-full { grid-column: 1 / -1; }

/* Responsive grid — sm (640px) */
@media (min-width: 640px) {
  .tv-sm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-sm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tv-sm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Responsive grid — md (768px) */
@media (min-width: 768px) {
  .tv-md-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-md-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tv-md-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Responsive grid — lg (1024px) */
@media (min-width: 1024px) {
  .tv-lg-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-lg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tv-lg-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Gap overrides */
.tv-gap-1  { gap: var(--tv-space-1); }
.tv-gap-2  { gap: var(--tv-space-2); }
.tv-gap-3  { gap: var(--tv-space-3); }
.tv-gap-4  { gap: var(--tv-space-4); }
.tv-gap-6  { gap: var(--tv-space-6); }
.tv-gap-8  { gap: var(--tv-space-8); }

/* ── Stack (vertical) & Row (horizontal) ───────────────────────── */
.tv-stack { display: flex; flex-direction: column; }
.tv-row   { display: flex; flex-direction: row; flex-wrap: wrap; }

.tv-stack-1 { gap: var(--tv-space-1); }
.tv-stack-2 { gap: var(--tv-space-2); }
.tv-stack-3 { gap: var(--tv-space-3); }
.tv-stack-4 { gap: var(--tv-space-4); }
.tv-stack-6 { gap: var(--tv-space-6); }
.tv-stack-8 { gap: var(--tv-space-8); }

.tv-row-2  { gap: var(--tv-space-2); }
.tv-row-3  { gap: var(--tv-space-3); }
.tv-row-4  { gap: var(--tv-space-4); }
.tv-row-6  { gap: var(--tv-space-6); }

/* ── Alignment helpers ─────────────────────────────────────────── */
.tv-items-center   { align-items: center; }
.tv-items-start    { align-items: flex-start; }
.tv-justify-between { justify-content: space-between; }
.tv-justify-center  { justify-content: center; }
.tv-text-center    { text-align: center; }

/* ── Text overflow utilities ───────────────────────────────────── */
.tv-text-wrap {
  overflow-wrap: var(--tv-text-wrap);
  word-break: break-word;
  white-space: normal;
}
.tv-text-truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-text-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.tv-text-clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* Flex children — prevent overflow */
.tv-min-w-0 { min-width: 0; }
.tv-shrink-0 { flex-shrink: 0; }
.tv-flex-1   { flex: 1 1 0%; }


/* ══════════════════════════════════════════════════════════════════
   24. HEADING SYSTEM — Semantic typographic hierarchy
   ══════════════════════════════════════════════════════════════════ */

.tv-h1 {
  font-size: var(--tv-font-2xl); font-weight: var(--tv-font-bold);
  line-height: 1.2; margin-bottom: var(--tv-space-6);
  color: var(--tv-text-primary);
}
.tv-h2 {
  font-size: var(--tv-font-xl); font-weight: var(--tv-font-semibold);
  line-height: 1.3; margin-bottom: var(--tv-space-4);
  color: var(--tv-text-primary);
}
.tv-h3 {
  font-size: var(--tv-font-lg); font-weight: var(--tv-font-semibold);
  line-height: 1.4; margin-bottom: var(--tv-space-2);
  color: var(--tv-text-primary);
}
.tv-h4 {
  font-size: var(--tv-font-base); font-weight: var(--tv-font-semibold);
  line-height: 1.4; margin-bottom: var(--tv-space-1);
  color: var(--tv-text-primary);
  letter-spacing: 0.025em; text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════════
   25. EMPTY STATE — Unified component styles
   ══════════════════════════════════════════════════════════════════ */

.tv-empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--tv-space-12) var(--tv-space-5);
  background: var(--tv-surface-card);
  border-radius: var(--tv-radius-lg);
  border: 1px dashed var(--tv-border-default);
}
.tv-empty-state-compact {
  padding: var(--tv-space-8) var(--tv-space-4);
}
.tv-empty-state-inline {
  background: transparent; border: none;
  padding: var(--tv-space-8) var(--tv-space-5);
}
.tv-empty-state-icon {
  width: 2.5rem; height: 2.5rem;
  margin-bottom: var(--tv-space-3);
  color: var(--tv-text-disabled);
}
.tv-empty-state-title {
  font-size: var(--tv-font-lg); font-weight: var(--tv-font-medium);
  color: var(--tv-text-primary);
  margin-bottom: var(--tv-space-1);
}
.tv-empty-state-message {
  color: var(--tv-text-muted);
  font-size: var(--tv-font-sm);
  margin-bottom: var(--tv-space-4);
  max-width: 28rem;
}
.tv-empty-state-action { margin-top: var(--tv-space-1); }


/* ══════════════════════════════════════════════════════════════════
   26. RESPONSIVE DETAIL ENHANCEMENTS — Sidebar overflow & text
   ══════════════════════════════════════════════════════════════════ */

/* Prevent long text from breaking sidebar cards */
.tv-detail-sidebar .tv-info-value,
.tv-detail-sidebar p,
.tv-detail-sidebar span {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* QR card center */
.tv-detail-card .tv-qr-container {
  display: flex; justify-content: center;
  margin-bottom: var(--tv-space-4);
}
.tv-detail-card .tv-qr-container img {
  border-radius: var(--tv-radius-lg);
  max-width: 100%;
  height: auto;
}

/* Tab panel empty state — inherit card styles, no border */
.tv-tab-panel .tv-empty-state {
  background: transparent; border: none;
  border-radius: 0;
}

/* Responsive: stack sidebar below on mobile */
@media (max-width: 1023px) {
  .tv-detail-sidebar {
    order: -1;
  }
}


/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — New components (sections 12-22)
   ══════════════════════════════════════════════════════════════════ */

/* Forms */
html.light .tv-label { color: var(--tv-text-muted); }
html.light .tv-input,
html.light .tv-textarea,
html.light .tv-form-select {
  background: var(--tv-surface-input) !important;
  border-color: var(--tv-border-default) !important;
  color: var(--tv-text-primary) !important;
}
html.light .tv-input::placeholder,
html.light .tv-textarea::placeholder { color: var(--tv-text-placeholder) !important; }
html.light .tv-input:focus,
html.light .tv-textarea:focus,
html.light .tv-form-select:focus {
  border-color: var(--tv-color-violet) !important;
  box-shadow: 0 0 0 2px rgba(102,78,229,0.20) !important;
}
html.light .tv-form-section { border-top-color: var(--tv-border-default); }
html.light .tv-form-actions { border-top-color: var(--tv-border-default); }

/* Tables */
html.light .tv-th { color: var(--tv-text-disabled); }
html.light .tv-th a:hover { color: var(--tv-text-primary); }
html.light .tv-th-sort-indicator { color: var(--tv-color-violet); }
html.light .tv-td { color: var(--tv-text-secondary); }
html.light .tv-table-header { border-bottom-color: var(--tv-border-default); }

/* Breadcrumb */
html.light .tv-breadcrumb a:hover { color: var(--tv-text-primary); }

/* Stat card */
html.light .tv-stat { background: var(--tv-surface-card); border-color: var(--tv-border-default); }
html.light .tv-stat:hover { border-color: rgba(102,78,229,0.30); }

/* Modal */
html.light .tv-modal-backdrop { background: rgba(0,0,0,0.40); }
html.light .tv-modal { background: var(--tv-surface-card); border-color: var(--tv-border-default); box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
html.light .tv-modal-header { border-bottom-color: var(--tv-border-default); }
html.light .tv-modal-footer { border-top-color: var(--tv-border-default); }

/* Info block */
html.light .tv-info-value a { color: var(--tv-color-violet); }
html.light .tv-info-value a:hover { color: var(--tv-color-violet-hover); }
html.light .tv-info-divider { border-top-color: var(--tv-border-default); }

/* Timeline */
html.light .tv-timeline::before { background: var(--tv-border-default); }
html.light .tv-timeline-dot { border-color: var(--tv-surface-card); background: var(--tv-border-subtle); }
html.light .tv-timeline-content { background: var(--tv-surface-card); border-color: var(--tv-border-default); }

/* Progress */
html.light .tv-progress { background: var(--tv-surface-inset); }

/* Badge void */
html.light .tv-badge-void {
  background: var(--tv-color-red-bg); color: var(--tv-color-red);
  border-color: var(--tv-color-red-border);
}

/* Gradient */
html.light .tv-gradient-line {
  background: linear-gradient(90deg,
    rgba(5,190,155,0.3) 0%, rgba(102,78,229,0.3) 50%, rgba(5,190,155,0.15) 100%);
}

/* ── Layout system (sections 23-26) ── */
html.light .tv-empty-state {
  background: var(--tv-surface-elevated);
  border-color: var(--tv-border-subtle);
}
html.light .tv-empty-state-inline {
  background: transparent; border-color: transparent;
}
html.light .tv-empty-state-icon { color: var(--tv-text-disabled); }
html.light .tv-empty-state-message { color: var(--tv-text-muted); }

html.light .tv-h1,
html.light .tv-h2,
html.light .tv-h3,
html.light .tv-h4 { color: var(--tv-text-primary); }

/* Semantic status text — light mode (use remapped tokens) */
html.light .tv-text-error   { color: var(--tv-color-red); }
html.light .tv-text-success { color: var(--tv-color-green); }
html.light .tv-text-warning { color: var(--tv-color-amber); }
html.light .tv-text-info    { color: var(--tv-color-blue); }
html.light .tv-text-teal    { color: var(--tv-color-teal); }
html.light .tv-text-violet  { color: var(--tv-color-violet-badge); }
html.light .tv-text-pink    { color: var(--tv-color-pink); }

/* Semantic backgrounds — light mode */
html.light .tv-bg-error   { background: rgba(220,38,38,0.08); }
html.light .tv-bg-success { background: rgba(22,163,74,0.08); }
html.light .tv-bg-warning { background: rgba(217,119,6,0.08); }
html.light .tv-bg-info    { background: rgba(37,99,235,0.08); }
html.light .tv-bg-teal    { background: rgba(13,148,136,0.08); }
html.light .tv-bg-violet  { background: rgba(124,58,237,0.08); }

/* Label/table header — light mode */
html.light .tv-label-text   { color: var(--tv-text-disabled); }
html.light .tv-table-header { color: var(--tv-text-disabled); }

/* ── Chart container: auto-sized ───────────────────────────────────── */
/* Used by axis charts (line, bar) so Chart.js calculates the height    */
/* from the container width × aspectRatio, adapting to label rotation.  */
/* Donuts and horizontal bars keep a fixed height instead.              */
.tv-chart-auto { position: relative; }

/* ── Scrollbar hide utility ─────────────────────────────────────────── */
/* Used by tv-period-filter and any horizontally scrollable containers   */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── Period filter (scrollable) ────────────────────────────────────── */
/* Component: _period_filter_tabs.html                                  */
/* Provides scroll arrows + hidden scrollbar for overflow on mobile.    */
/* Usage:                                                                */
/*   {% include "trivet/includes/_period_filter_tabs.html"              */
/*      with current_period=period extra_params="" %}                    */
/* Available periods: semana_actual, semana_anterior, mes_actual,        */
/*   mes_anterior, trimestre_actual, trimestre_anterior,                 */
/*   anio_actual, anio_anterior                                          */
.tv-period-filter {
  /* Wrapper marker — no extra styles needed beyond flex from Tailwind */
}


/* ══════════════════════════════════════════════════════════════════
   27. TOGGLE SWITCH — Unified component
   ══════════════════════════════════════════════════════════════════ */

.tv-toggle {
  position: relative; display: inline-flex; align-items: center;
  width: 2.25rem; height: 1.25rem; cursor: pointer;
}
.tv-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.tv-toggle-track {
  width: 100%; height: 100%;
  background: var(--tv-border-muted);
  border-radius: var(--tv-radius-full);
  transition: background var(--tv-transition-fast);
}
.tv-toggle input:checked + .tv-toggle-track { background: var(--tv-color-teal); }
.tv-toggle-thumb {
  position: absolute; top: 0.125rem; left: 0.125rem;
  width: 1rem; height: 1rem;
  background: var(--tv-text-on-solid);
  border-radius: var(--tv-radius-full);
  transition: transform var(--tv-transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.tv-toggle input:checked ~ .tv-toggle-thumb { transform: translateX(1rem); }
.tv-toggle input:focus-visible + .tv-toggle-track {
  outline: 2px solid var(--tv-focus-ring-color);
  outline-offset: 2px;
}
.tv-toggle input:disabled + .tv-toggle-track { opacity: 0.5; cursor: not-allowed; }
html.light .tv-toggle-track { background: var(--tv-border-subtle); }
html.light .tv-toggle input:checked + .tv-toggle-track { background: var(--tv-color-violet); }


/* ══════════════════════════════════════════════════════════════════
   28. CHECKBOX — DS-compliant
   ══════════════════════════════════════════════════════════════════ */

.tv-checkbox {
  width: 1rem; height: 1rem;
  border-radius: var(--tv-radius-sm);
  border: 1px solid var(--tv-border-muted);
  background: transparent;
  color: var(--tv-color-teal);
  accent-color: var(--tv-color-teal);
  cursor: pointer;
}
.tv-checkbox:focus-visible {
  outline: 2px solid var(--tv-focus-ring-color);
  outline-offset: 2px;
}
html.light .tv-checkbox {
  border-color: var(--tv-border-subtle);
  accent-color: var(--tv-color-violet);
}


/* ══════════════════════════════════════════════════════════════════
   29. PLACEHOLDER — Unified input placeholder color
   ══════════════════════════════════════════════════════════════════ */

.tv-placeholder::placeholder { color: var(--tv-text-placeholder); }


/* ══════════════════════════════════════════════════════════════════
   30. CARD SELECTABLE — Interactive selection cards
   ══════════════════════════════════════════════════════════════════ */

.tv-card-selectable {
  border: 1px solid var(--tv-border-default);
  border-radius: var(--tv-radius-lg);
  cursor: pointer;
  transition: border-color var(--tv-transition-fast), background var(--tv-transition-fast);
}
.tv-card-selectable:hover { border-color: var(--tv-border-muted); }
.tv-card-selectable.selected {
  border-color: var(--tv-color-teal);
  background: var(--tv-color-teal-bg);
}
html.light .tv-card-selectable:hover { border-color: var(--tv-border-subtle); }
html.light .tv-card-selectable.selected {
  border-color: var(--tv-color-violet);
  background: var(--tv-color-violet-bg);
}


/* ══════════════════════════════════════════════════════════════════
   31. GRADIENT BRAND SUBTLE — Auth/welcome page background
   ══════════════════════════════════════════════════════════════════ */

.tv-gradient-brand-subtle {
  background: linear-gradient(135deg,
    rgba(5,190,155,0.13) 0%, rgba(102,78,229,0.13) 100%);
}
html.light .tv-gradient-brand-subtle {
  background: linear-gradient(135deg,
    rgba(5,190,155,0.08) 0%, rgba(102,78,229,0.08) 100%);
}


/* ══════════════════════════════════════════════════════════════════
   32. ALERT BANNER — Warning/info banners (non-badge)
   ══════════════════════════════════════════════════════════════════ */

.tv-alert-banner-warning {
  background: var(--tv-color-amber-bg);
  border: 1px solid var(--tv-color-amber-border);
  color: var(--tv-color-amber);
  border-radius: var(--tv-radius-lg);
  padding: var(--tv-space-3) var(--tv-space-4);
  font-size: var(--tv-font-sm);
}
html.light .tv-alert-banner-warning {
  background: rgba(217,119,6,0.06);
  color: var(--tv-color-amber);
}


/* ══════════════════════════════════════════════════════════════════
   33. NOTIFICATION UNREAD — Accessible indicator
   ══════════════════════════════════════════════════════════════════ */

.tv-notif-unread {
  position: relative;
  background: rgba(var(--tv-surface-elevated-rgb), 0.3);
}
.tv-notif-unread::before {
  content: "";
  position: absolute; left: var(--tv-space-2); top: 50%;
  transform: translateY(-50%);
  width: 0.375rem; height: 0.375rem;
  border-radius: var(--tv-radius-full);
  background: var(--tv-color-teal);
}
html.light .tv-notif-unread {
  background: var(--tv-color-teal-bg);
}
html.light .tv-notif-unread::before {
  background: var(--tv-color-violet);
}


/* ══════════════════════════════════════════════════════════════════
   34. SKIP TO CONTENT — Keyboard navigation
   ══════════════════════════════════════════════════════════════════ */

.tv-skip-to-content {
  position: fixed; top: -100%; left: var(--tv-space-4);
  z-index: 10000;
  padding: var(--tv-space-2) var(--tv-space-4);
  background: var(--tv-color-teal);
  color: var(--tv-text-on-solid);
  font-size: var(--tv-font-sm); font-weight: var(--tv-font-semibold);
  border-radius: 0 0 var(--tv-radius-md) var(--tv-radius-md);
  text-decoration: none;
  transition: top var(--tv-transition-fast);
}
.tv-skip-to-content:focus {
  top: 0;
}


/* ══════════════════════════════════════════════════════════════════
   35. ICON WRAPPER BACKGROUNDS — subtle tinted circles/squares
   ══════════════════════════════════════════════════════════════════ */

.tv-icon-bg-teal      { background: rgba(5,190,155,0.12); }
.tv-icon-bg-violet    { background: rgba(102,78,229,0.12); }
.tv-icon-bg-amber     { background: rgba(251,191,36,0.12); }
.tv-icon-bg-error     { background: rgba(239,68,68,0.15); }
.tv-icon-bg-teal-solid{ background: rgba(5,190,155,0.15); }
.tv-icon-bg-blend     { background: linear-gradient(135deg,rgba(5,190,155,0.12),rgba(102,78,229,0.12)); }
.tv-icon-bg-warning-gradient { background: linear-gradient(135deg,rgba(245,158,11,0.15),rgba(217,119,6,0.15)); }
.tv-icon-bg-error-gradient   { background: linear-gradient(135deg,rgba(239,68,68,0.15),rgba(220,38,38,0.15)); }
.tv-icon-bg-blend-border { background: linear-gradient(135deg,rgba(5,190,155,0.15),rgba(102,78,229,0.15)); border-color: rgba(5,190,155,0.2); }
.tv-donut-inactive    { color: rgba(239,68,68,0.25); }

html.light .tv-icon-bg-teal      { background: rgba(4,168,136,0.10); }
html.light .tv-icon-bg-violet    { background: rgba(86,64,208,0.10); }
html.light .tv-icon-bg-amber     { background: rgba(217,119,6,0.10); }
html.light .tv-icon-bg-error     { background: rgba(220,38,38,0.12); }
html.light .tv-icon-bg-teal-solid{ background: rgba(4,168,136,0.12); }
html.light .tv-icon-bg-blend     { background: linear-gradient(135deg,rgba(4,168,136,0.10),rgba(86,64,208,0.10)); }
html.light .tv-icon-bg-warning-gradient { background: linear-gradient(135deg,rgba(217,119,6,0.12),rgba(180,83,9,0.12)); }
html.light .tv-icon-bg-error-gradient   { background: linear-gradient(135deg,rgba(220,38,38,0.12),rgba(185,28,28,0.12)); }
html.light .tv-icon-bg-blend-border { background: linear-gradient(135deg,rgba(4,168,136,0.12),rgba(86,64,208,0.12)); border-color: rgba(4,168,136,0.15); }
html.light .tv-donut-inactive    { color: rgba(220,38,38,0.20); }

.tv-calendar-time-border { border-right: 1px solid rgba(255,255,255,0.05); }
html.light .tv-calendar-time-border { border-right: 1px solid rgba(0,0,0,0.08); }


/* ══════════════════════════════════════════════════════════════════
   36. RING UTILITIES — selection/focus ring outlines
   ══════════════════════════════════════════════════════════════════ */

.tv-ring-teal    { box-shadow: 0 0 0 1px rgba(5,190,155,0.30); }
.tv-ring-error   { box-shadow: 0 0 0 1px rgba(239,68,68,0.40); }
.tv-ring-warning { box-shadow: 0 0 0 1px rgba(251,191,36,0.40); }
.tv-ring-success { box-shadow: 0 0 0 1px rgba(34,197,94,0.40); }
.tv-ring-surface { box-shadow: 0 0 0 1px var(--tv-border-default); }

html.light .tv-ring-teal    { box-shadow: 0 0 0 1px rgba(4,168,136,0.35); }
html.light .tv-ring-error   { box-shadow: 0 0 0 1px rgba(220,38,38,0.35); }
html.light .tv-ring-warning { box-shadow: 0 0 0 1px rgba(217,119,6,0.35); }
html.light .tv-ring-success { box-shadow: 0 0 0 1px rgba(22,163,74,0.35); }
html.light .tv-ring-surface { box-shadow: 0 0 0 1px var(--tv-border-subtle); }


/* ══════════════════════════════════════════════════════════════════
   36. ACCESSIBILITY — prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   36. AUTO DARK/LIGHT — prefers-color-scheme fallback
   ══════════════════════════════════════════════════════════════════
   When no explicit html.dark/html.light class is set (e.g. first
   visit before JS runs), respect the OS preference.                */

@media (prefers-color-scheme: light) {
  html:not(.dark):not(.light) {
    color-scheme: light;
    --tv-surface-page:       #eef1f5;
    --tv-surface-card:       #fcfcfc;
    --tv-surface-elevated:   #f1f4f8;
    --tv-surface-input:      #f8fafc;
    --tv-surface-hover:      rgba(0,0,0,0.04);
    --tv-surface-inset:      #e2e8f0;
    --tv-surface-elevated-rgb: 241,244,248;
    --tv-surface-inset-rgb:    226,232,240;
    --tv-surface-page-rgb:     238,241,245;
    --tv-border-default:     #e2e8f0;
    --tv-border-subtle:      #d1d5db;
    --tv-border-muted:       #cbd5e1;
    --tv-text-primary:       #0f172a;
    --tv-text-secondary:     #1e293b;
    --tv-text-muted:         #475569;
    --tv-text-disabled:      #57677d;
    --tv-text-placeholder:   #94a3b8;
    --tv-shadow-toast:       0 4px 24px rgba(0,0,0,0.12);
  }
}