/* ═══════════ Guía visual «Naranja Piedra» — único archivo de tokens ═══════════
   Cambiar la marca = tocar la rampa --brand-* aquí. Prohibido hex sueltos en vistas. */
:root {
  --brand-50: #FEF3EE; --brand-100: #FDE3D5; --brand-200: #FAC4AA; --brand-300: #F69B74;
  --brand-400: #F1673D; --brand-500: #E8490C; --brand-600: #D0390A; --brand-700: #AC2A0B;
  --brand-800: #892411; --brand-900: #6F2011; --brand-950: #3C0D06;
  --surface-page: #F2F1EE; --surface-card: #FFFFFF; --surface-line: #E1DED9; --surface-muted: #EBE9E5;
  --surface-ink: #201E1C; --surface-sub: #6B6660;
  --btn-solid-bg: #201E1C; --btn-solid-fg: #FFFFFF;
  --ok-bg: rgba(22,163,74,.15); --ok-fg: #15612F; --warn-bg: rgba(217,119,6,.16); --warn-fg: #8A4A04;
  --info-bg: rgba(37,99,235,.14); --info-fg: #1E40AF; --neutral-bg: rgba(107,102,96,.15); --neutral-fg: #4A4540;
  --danger-bg: rgba(220,38,38,.13); --danger-fg: #9B1C1C; --danger-solid: #C81E1E;
  --chart-a: #E8490C; --chart-b: #3D5FA8; --chart-cost: #0D9488;
  --stack-stt: #3D5FA8; --stack-llm: #E8490C; --stack-tts: #0D9488; --stack-fee: #A8A29E;
  --stripe: rgba(32,30,28,.06);
  --focus: var(--brand-500);
}
.dark {
  --surface-page: #151413; --surface-card: #1E1C1A; --surface-line: #34302C; --surface-muted: #2A2724;
  --surface-ink: #F2F1EE; --surface-sub: #A8A29E;
  --btn-solid-bg: #FFFFFF; --btn-solid-fg: #201E1C;
  --ok-bg: rgba(34,197,94,.18); --ok-fg: #86EFAC; --warn-bg: rgba(245,158,11,.18); --warn-fg: #FCD34D;
  --info-bg: rgba(96,165,250,.18); --info-fg: #BFDBFE; --neutral-bg: rgba(168,162,158,.18); --neutral-fg: #D6D3D1;
  --danger-bg: rgba(248,113,113,.18); --danger-fg: #FECACA; --danger-solid: #DC2626;
  --chart-a: #F0561D; --chart-b: #6781D9; --chart-cost: #2FA8A8;
  --stack-stt: #6781D9; --stack-llm: #F0561D; --stack-tts: #2FA8A8; --stack-fee: #78716C;
  --stripe: rgba(242,241,238,.06);
}
html { font-feature-settings: "cv11", "ss01"; }
.tabular { font-variant-numeric: tabular-nums; }
.card { background: var(--surface-card); border: 1px solid var(--surface-line); border-radius: 1.25rem; }
.floating { background: var(--surface-card); border: 1px solid var(--surface-line); border-radius: 1rem; box-shadow: 0 20px 50px -12px rgba(0,0,0,.25); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; padding: .55rem .95rem; font-size: .875rem; font-weight: 500; transition: background-color .15s, border-color .15s, opacity .15s, transform .15s; border: 1px solid transparent; white-space: nowrap; cursor: pointer; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, .field:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-primary { background: var(--btn-solid-bg); color: var(--btn-solid-fg); }
.btn-primary:hover:not(:disabled) { opacity: .88; }
.btn-secondary { background: var(--surface-card); border-color: var(--surface-line); color: var(--surface-ink); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-muted); }
.btn-subtle { background: transparent; color: var(--surface-ink); }
.btn-subtle:hover:not(:disabled) { background: var(--surface-muted); }
.btn-danger { background: var(--danger-solid); color: #fff; }
.btn-sm { padding: .35rem .65rem; font-size: .8rem; border-radius: .6rem; }
.field { width: 100%; background: var(--surface-card); border: 1px solid var(--surface-line); border-radius: .75rem; padding: .55rem .8rem; font-size: .875rem; color: var(--surface-ink); transition: border-color .15s, box-shadow .15s; }
.field:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 22%, transparent); outline: none; }
textarea.field { min-height: 90px; line-height: 1.5; }
.label { display: block; font-size: .78rem; font-weight: 500; color: var(--surface-sub); margin-bottom: .3rem; }
.seg { display: inline-flex; background: var(--surface-muted); border-radius: 9999px; padding: .2rem; gap: .15rem; }
.seg button { border-radius: 9999px; padding: .3rem .8rem; font-size: .8rem; color: var(--surface-sub); transition: background-color .15s, color .15s; }
.seg button[aria-pressed="true"] { background: var(--surface-card); color: var(--surface-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.badge { display: inline-flex; align-items: center; gap: .3rem; border-radius: 9999px; padding: .12rem .6rem; font-size: .74rem; font-weight: 500; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok-fg); } .badge-warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge-info { background: var(--info-bg); color: var(--info-fg); } .badge-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
.badge-danger { background: var(--danger-bg); color: var(--danger-fg); } .badge-brand { background: color-mix(in srgb, var(--brand-500) 15%, transparent); color: var(--brand-700); }
.dark .badge-brand { color: var(--brand-300); }
.texture-stripes { background-image: repeating-linear-gradient(45deg, var(--stripe) 0 1px, transparent 1px 9px); }
.nav-item { position: relative; display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: .75rem; color: var(--surface-sub); font-size: .875rem; font-weight: 500; transition: background-color .15s, color .15s; }
.nav-item:hover { background: var(--surface-muted); color: var(--surface-ink); }
.nav-item[aria-current="page"] { background: color-mix(in srgb, var(--brand-500) 12%, transparent); color: var(--brand-700); }
.dark .nav-item[aria-current="page"] { color: var(--brand-300); }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -.75rem; top: .45rem; bottom: .45rem; width: 3px; border-radius: 3px; background: var(--brand-500); }
.link { color: var(--brand-600); } .link:hover { text-decoration: underline; } .dark .link { color: var(--brand-400); }
.accent { color: var(--brand-500); }
.skeleton { border-radius: .75rem; background-color: var(--surface-muted); background-image: repeating-linear-gradient(45deg, var(--stripe) 0 1px, transparent 1px 9px); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55 } }
.live-dot { width: .55rem; height: .55rem; border-radius: 9999px; background: #16A34A; box-shadow: 0 0 0 0 rgba(22,163,74,.6); animation: ping 1.6s infinite; display: inline-block; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55) } 80% { box-shadow: 0 0 0 8px rgba(22,163,74,0) } }
table.data { width: 100%; font-size: .85rem; border-collapse: separate; border-spacing: 0; }
table.data th { text-align: left; font-weight: 500; color: var(--surface-sub); font-size: .76rem; padding: .6rem .75rem; border-bottom: 1px solid var(--surface-line); white-space: nowrap; }
table.data td { padding: .65rem .75rem; border-bottom: 1px solid var(--surface-line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--surface-muted) 55%, transparent); }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(15,14,13,.45); z-index: 60; animation: fade .18s; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); z-index: 61; background: var(--surface-card); border-left: 1px solid var(--surface-line); box-shadow: -20px 0 50px -20px rgba(0,0,0,.3); display: flex; flex-direction: column; animation: slide .2s ease-out; border-radius: 1rem 0 0 1rem; }
.dialog { position: fixed; left: 50%; top: 12vh; transform: translateX(-50%); z-index: 62; width: min(560px, calc(100vw - 2rem)); max-height: 76vh; overflow: auto; animation: fade .18s; }
@keyframes fade { from { opacity: 0 } } @keyframes slide { from { transform: translateX(30px); opacity: 0 } }
.toast { animation: fade .2s; }
.sidebar-collapsed .nav-text { display: none; }
.cal-cell { min-height: 108px; }
.cal-closed { background-image: repeating-linear-gradient(45deg, var(--stripe) 0 1px, transparent 1px 7px); }
.appt-chip { border-left: 3px solid var(--brand-500); background: color-mix(in srgb, var(--brand-500) 12%, transparent); border-radius: .5rem; }
.busy-chip { border-left: 3px solid var(--chart-b); background: color-mix(in srgb, var(--chart-b) 12%, transparent); border-radius: .5rem; }
.bubble-agent { background: var(--surface-muted); border-radius: 1rem 1rem 1rem .3rem; }
.bubble-user { background: color-mix(in srgb, var(--brand-500) 14%, transparent); border-radius: 1rem 1rem .3rem 1rem; }
.stack-bar { display: flex; gap: 2px; height: 12px; }
.stack-bar > span { display: block; height: 100%; border-radius: 4px; }
kbd { font-family: inherit; font-size: .7rem; padding: .05rem .35rem; border: 1px solid var(--surface-line); border-radius: .35rem; color: var(--surface-sub); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }