/* =========================================================
   Trackly · tema "Limpio" (para usar todo el día)
   Blanco, bordes finos, sin sombras duras. Naranja solo como acento.
   Para volver al tema anterior: cargar theme-trackly.css en su lugar.
   ========================================================= */
:root {
  --bg: #FFFFFF;
  --panel: #FFFFFF;
  --side: #FAFAFA;
  --hover: #F4F4F5;
  --line: #EDEDEF;
  --line-2: #E0E0E4;
  --ink: #18181B;
  --ink-2: #52525B;
  --muted: #8A8A93;
  --accent: #FF5A1F;
  --accent-ink: #FFFFFF;
  --accent-soft: #FFF1EA;
  --danger: #E5484D;
  --warn: #E58A00;
  --ok: #30A46C;
  --shadow: 0 1px 2px rgba(24,24,27,.04), 0 8px 28px rgba(24,24,27,.08);
  --radius: 8px;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111113; --panel: #18181B; --side: #141416; --hover: #222226;
    --line: #26262B; --line-2: #33333A; --ink: #EDEDEF; --ink-2: #B4B4BC; --muted: #85858F;
    --accent: #FF6A33; --accent-ink: #FFFFFF; --accent-soft: #2A1A12;
  }
}
body { font-size: 14px; letter-spacing: -.005em; }
h1, h2, h3, h4 { letter-spacing: -.02em; }

/* Marca: círculo + línea naranja (logo Trackly en versión fina) */
.brand { font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.brand-mark { width: 22px; height: 22px; border-radius: 50%; background: transparent; border: 2px solid var(--ink); position: relative; }
.brand-mark::after { left: 3px; right: 3px; top: 8px; height: 2px; background: var(--accent); box-shadow: none; border-radius: 2px; }

/* Botones e inputs */
.btn { border-radius: 8px; border-color: var(--line-2); font-weight: 500; box-shadow: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { filter: none; background: #F04E14; }
input:not([type=checkbox]):not([type=radio]), select, textarea { border-radius: 8px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }

/* Sidebar sereno */
.sidebar { background: var(--side); border-right: 1px solid var(--line); }
.side-link { color: var(--ink-2); border-radius: 6px; }
.side-link.active { background: var(--accent-soft); color: var(--ink); box-shadow: none; font-weight: 600; }
.side-link.active svg { color: var(--accent); }

/* Superficies planas */
.home-hero { background: var(--panel); border: 0; padding: 8px 4px 4px; border-radius: 0; }
.home-hero h2 { font-size: 28px; font-weight: 600; }
.hh-kicker { color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 500; }
.hc-time { font-weight: 500; color: var(--ink-2); font-size: 34px; }
.hk, .home-card { border-radius: 12px; border-color: var(--line); box-shadow: none; }
.hk b { font-family: var(--font); font-weight: 600; }
.card, .col, .board-col { box-shadow: none !important; }
.card { border-color: var(--line) !important; border-radius: 8px !important; }
.card:hover { box-shadow: 0 2px 8px rgba(24,24,27,.06) !important; }
.menu, .modal, .drawer, .toast { box-shadow: var(--shadow); }

/* Etiquetas de sección: sin mayúsculas gritonas */
.hc-sub, .side-title, .side-section > h4 { letter-spacing: .02em; color: var(--muted); }

/* Fechas y contadores en la misma tipografía, con números tabulares */
:root { --mono: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.mono, .hk b, .count { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.list-head, .col-head, thead th { color: var(--muted); font-weight: 500; letter-spacing: .02em; }