/* Direction: sobrio, corporativo y analítico — papel gris frío, azul acero, IBM Plex Sans */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #e7e9ec;
  --border: #dde2ea;
  --border-strong: #abafb3;
  --ink: #17202c;
  --muted: #5b6676;
  --accent: #1e4a7a;
  --accent-hover: #1a3f68;
  --accent-ink: #ffffff;
  --accent-text: #1e4a7a;
  --accent-strong: #1e4a7a;
  --accent-soft: #d5dde6;
  --accent-border: #93a8bf;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #d8e7e2;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ebe2db;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #ecdbde;
  --danger-strong: #b91c1c;
  --chart-1: #1e4a7a;
  --chart-2: #7b4895;
  --chart-3: #852539;
  --chart-4: #7e5100;
  --chart-5: #075d2b;
  --chart-6: #00817f;

  --font-display: "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --radius-card: 10px;
  --radius-btn: 8px;
  --radius-input: 8px;
  --card-pad: 1rem;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #040a11;
  --surface: #1d2329;
  --surface-2: #11161d;
  --border: #272c32;
  --border-strong: #4f5458;
  --ink: #f3f5f8;
  --muted: #93979c;
  --accent: #1e4a7a;
  --accent-hover: #40658e;
  --accent-ink: #ffffff;
  --accent-text: #7790af;
  --accent-strong: #6b86a8;
  --accent-soft: #0a1828;
  --accent-border: #102740;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #08241b;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2b1a0f;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2c0e13;
  --danger-strong: #d16969;
  --chart-1: #4672a5;
  --chart-2: #a571c2;
  --chart-3: #c15c6a;
  --chart-4: #b27602;
  --chart-5: #609038;
  --chart-6: #1c9a98;
}

.kpi-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.kpi { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.tabs-bar { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.ptab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; font-size: 0.875rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ptab:hover { color: var(--ink); }
.ptab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.ptab[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.ptab .count { font-size: 0.6875rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-variant-numeric: tabular-nums; }
.ptab .icon { width: 1rem; height: 1rem; }

.ptable { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.75rem; min-width: 980px; }
.ptable th { padding: 0.5rem 0.4rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: var(--surface-2); text-align: left; border-bottom: 1px solid var(--border); }
.ptable th.text-right { text-align: right; } .ptable th.text-center { text-align: center; }
.ptable td { padding: 0.5rem 0.4rem; vertical-align: top; border-bottom: 1px solid var(--border); }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ptable thead th:first-child, .ptable td:first-child { padding-left: 0.6rem; }

.dot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 999px; margin-top: 0.2rem; }
.dot-red { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.dot-yellow { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent); }
.dot-green { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }

.st { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.st-urgent { background: var(--danger-soft); color: var(--danger-strong); }
.st-review { background: var(--warning-soft); color: var(--warning-strong); }
.st-ok { background: var(--success-soft); color: var(--success-strong); }
.st-standby { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.tag-new { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 4px; font-size: 0.625rem; font-weight: 700; background: var(--accent-soft); color: var(--accent-strong); }

.goal-input { width: 3.4rem; padding: 0.2rem 0.25rem; text-align: center; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong, var(--border)); border-radius: 6px; }
.goal-input:hover { border-color: var(--accent); }
.goal-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.goal-input.saving { opacity: 0.6; }

.live-dot { display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--success); vertical-align: middle; animation: pulse-live 2s ease-in-out infinite; }
.is-fallback .live-dot { background: var(--warning); animation: none; }
@keyframes pulse-live { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } }
html.reduced-motion .live-dot { animation: none; }
[data-live].loading { color: var(--muted); }