/* ============================================================
   TRIBULARS · DESIGN SYSTEM  (theme.css)
   Fundación visual: tokens + microinteracciones + modo oscuro real.
   Identidad de marca: morado #A230AB (flechas) + navy del capricornio.
   Filosofía: minimalismo, jerarquía, espacio, velocidad (Linear/Vercel/Stripe).
   Se carga DESPUÉS del <style> inline → redefine los mismos tokens que ya
   consumen los componentes, sin tocar la lógica.
   ============================================================ */

/* ---------- TOKENS · LIGHT ---------- */
:root{
  /* Superficies y neutros (fríos, mucho aire) */
  --bg:#FAFAFB; --card:#FFFFFF; --surface-2:#F4F4F7;
  --border:#EAEAEF; --border2:#DEDEE6;
  --text:#17161C; --muted:#6B6A76; --hint:#A2A1AE;

  /* Marca (morado Tribulars) */
  --accent:#A230AB; --accent-hover:#8E2996; --accent-mid:#C061C9;
  --accent-light:#F7EAF8; --accent-contrast:#FFFFFF;
  --navy:#0B1B3C;

  /* Semánticos */
  --teal:#0F766E; --teal-light:#E3F5F1;
  --green:#15803D; --green-light:#E7F6EC; --success:#16A34A;
  --amber:#B45309; --amber-light:#FBF0DE; --warning:#F59E0B;
  --red:#B42318;  --red-light:#FCEBEA;    --danger:#EF4444;
  --purple:#A230AB; --purple-light:#F7EAF8;

  /* Gradientes muy sutiles */
  --grad-brand:linear-gradient(135deg,#A230AB,#7C3AED);
  --grad-surface:linear-gradient(180deg,#FFFFFF,#FBFAFC);

  /* Sombras en capas (suaves) */
  --shadow:0 1px 2px rgba(16,16,29,.04),0 1px 3px rgba(16,16,29,.05);
  --shadow-md:0 4px 14px rgba(16,16,29,.07);
  --shadow-lg:0 14px 38px rgba(16,16,29,.12);
  --ring:rgba(162,48,171,.32);

  /* Tipografía */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --head:"Inter",-apple-system,sans-serif;
  --mono:"DM Mono","SF Mono",ui-monospace,monospace;

  /* Radios / motion */
  --r:12px; --r-sm:8px; --r-lg:16px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.18s;
}

/* ---------- TOKENS · DARK (profundidad real, no inversión) ---------- */
[data-theme="dark"]{
  --bg:#0A0C12; --card:#13151D; --surface-2:#1A1D27;
  --border:#242833; --border2:#2F3441;
  --text:#E7E9EE; --muted:#9AA0AC; --hint:#6B7180;

  --accent:#C061C9; --accent-hover:#CE74D6; --accent-mid:#9E3AA8;
  --accent-light:#241528; --accent-contrast:#FFFFFF;

  --teal-light:#0E2A27; --green-light:#132A1C; --amber-light:#2A2110; --red-light:#2C1615;
  --purple-light:#241528;

  --grad-surface:linear-gradient(180deg,#15171F,#111319);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 6px 20px rgba(0,0,0,.5);
  --shadow-lg:0 18px 44px rgba(0,0,0,.6);
  --ring:rgba(192,97,201,.45);
}

/* ---------- BASE ---------- */
html{ background:var(--bg); }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:var(--bg); color:var(--text); transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
::selection{ background:var(--accent-light); color:var(--accent); }

/* Jerarquía tipográfica: títulos apretados, pesos correctos */
.page-title,.logo-name,.modal-title,.dash-card-title,.cod-h1,.client-name,.card-title{
  font-family:var(--head); letter-spacing:-.02em; font-weight:650;
}
.nav-section,.cod-clabel,.dash-card-title{ letter-spacing:.02em; }

/* Foco accesible y consistente */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
a,button{ -webkit-tap-highlight-color:transparent; }

/* Scrollbars finos */
*{ scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--border2); border-radius:20px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--hint); background-clip:content-box; }

/* ---------- MICROINTERACCIONES ---------- */
.nav-item,.btn,.task-card,.dash-card,.team-card,.client-row,.cod-card,.cod-btn,.theme-toggle,
.k-cards>*,.tab,.status-badge{ transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
  background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }

/* Elevación sutil al pasar el cursor */
.task-card{ border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); }
.task-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--accent-mid); }
.dash-card{ border-radius:var(--r-lg); box-shadow:var(--shadow); }
.dash-card:hover{ box-shadow:var(--shadow-md); }
.cod-card{ border-radius:var(--r-lg); }

/* Sidebar / navegación */
.sidebar{ background:var(--card); border-right:1px solid var(--border); }
.nav-item{ border-radius:10px; font-weight:500; }
.nav-item:hover{ background:var(--surface-2); }
.nav-item.active{ background:var(--accent-light); color:var(--accent); position:relative; }
.nav-item.active::before{ content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; background:var(--accent); border-radius:0 3px 3px 0; }
.logo-mark{ background:var(--grad-brand)!important; box-shadow:0 4px 12px rgba(162,48,171,.35); }

/* Topbar translúcida y pegajosa */
.topbar{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border); }

/* Botones premium */
.btn{ border-radius:10px; font-weight:550; border:1px solid var(--border); background:var(--card);
  box-shadow:var(--shadow); }
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:var(--border2); background:var(--card); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn-primary{ background:var(--accent); border-color:transparent; color:var(--accent-contrast);
  box-shadow:0 2px 10px rgba(162,48,171,.28); }
.btn-primary:hover{ background:var(--accent-hover); box-shadow:0 6px 18px rgba(162,48,171,.36); }
.cod-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }

/* Inputs / selects con foco de marca */
.form-input,.form-select,.form-textarea{ border-radius:10px; transition:border-color var(--dur), box-shadow var(--dur); }
.form-input:focus,.form-select:focus,.form-textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }

/* Kanban: columnas como superficies suaves */
.kanban-board .k-col{ background:var(--surface-2); border-radius:var(--r-lg); padding:6px; }
.k-col-header{ padding:10px 12px; }

/* Tags / badges redondeados */
.tag{ border-radius:999px; }

/* Toast elegante */
.toast{ border-radius:12px; box-shadow:var(--shadow-lg); font-weight:500; }

/* ---------- ANIMACIONES ---------- */
@keyframes tl-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.page.active > *{ animation:tl-rise .32s var(--ease) both; }
.page.active > *:nth-child(2){ animation-delay:.04s; }
.page.active > *:nth-child(3){ animation-delay:.08s; }
.page.active > *:nth-child(4){ animation-delay:.12s; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* Completar tarea: pulso suave */
@keyframes tl-pop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.05);} 100%{ transform:scale(1);} }
.task-card.done{ animation:tl-pop .4s var(--ease); }

/* ---------- SKELETONS ---------- */
.skeleton{ position:relative; overflow:hidden; background:var(--surface-2); border-radius:8px; }
.skeleton::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card) 60%,transparent),transparent);
  transform:translateX(-100%); animation:tl-shimmer 1.3s infinite; }
@keyframes tl-shimmer{ 100%{ transform:translateX(100%); } }

/* ---------- THEME TOGGLE ---------- */
.theme-toggle{ margin-left:auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--border);
  background:var(--card); cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center;
  justify-content:center; color:var(--text); flex-shrink:0; }
.theme-toggle:hover{ background:var(--surface-2); transform:translateY(-1px); box-shadow:var(--shadow); }

/* ---------- DARK MODE · arreglos de componentes con color fijo ---------- */
[data-theme="dark"] .logo-mark span{ color:#fff; }
[data-theme="dark"] .notif-panel{ background:var(--card)!important; border-color:var(--border)!important; }
[data-theme="dark"] .notif-head{ background:var(--card)!important; border-color:var(--border)!important; color:var(--text)!important; }
[data-theme="dark"] .notif-item{ border-color:var(--border)!important; }
[data-theme="dark"] .notif-item:hover{ background:var(--surface-2)!important; }
[data-theme="dark"] .notif-item.unread{ background:color-mix(in srgb,var(--accent) 14%, var(--card))!important; }
[data-theme="dark"] .notif-title{ color:var(--text)!important; }
[data-theme="dark"] .notif-body{ color:var(--muted)!important; }
[data-theme="dark"] .notif-bell{ color:var(--muted); }
[data-theme="dark"] .notif-bell:hover{ background:var(--surface-2); }
[data-theme="dark"] .modal{ background:var(--card); color:var(--text); }
[data-theme="dark"] .modal-overlay{ background:rgba(0,0,0,.6); }
[data-theme="dark"] .exp-drawer{ background:var(--card); }
[data-theme="dark"] .exp-tab.on{ background:var(--accent); }
[data-theme="dark"] .btn{ background:var(--card); }
[data-theme="dark"] img.icon-invert{ filter:none; }

/* ============================================================
   CENTRO OPERATIVO · dashboard rediseñado
   ============================================================ */
.cod-hero{ margin-bottom:22px; }
.cod-hello{ font-family:var(--head); font-size:clamp(22px,3vw,30px); font-weight:650; letter-spacing:-.025em; }
.cod-hero .cod-obj{ margin-top:6px; font-size:14px; }

.cod-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.cod-kpi{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:16px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow); }
.cod-kpi:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.cod-kpi-ic{ width:42px; height:42px; border-radius:12px; background:var(--accent-light); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.cod-kpi-label{ font-size:10.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.cod-kpi-val{ font-family:var(--mono); font-size:21px; font-weight:600; color:var(--text); margin-top:3px; line-height:1; }

.cod-columns{ display:grid; grid-template-columns:1.55fr 1fr; gap:16px; align-items:start; }
.cod-col-main,.cod-col-side{ display:flex; flex-direction:column; gap:16px; min-width:0; }

/* Tarjeta de tarea activa: hero con gradiente de marca cuando está en curso */
.cod-activa-wrap.is-active{ background:var(--grad-brand); color:#fff; border:none;
  box-shadow:0 14px 34px rgba(162,48,171,.38); }
.cod-activa-name{ font-size:18px; font-weight:600; margin:6px 0 12px; }
.cod-activa-timer{ font-family:var(--mono); font-size:34px; font-weight:600; letter-spacing:.02em; color:#fff; }
.cod-activa-wrap.is-active .cod-btn-pause{ background:rgba(255,255,255,.22); color:#fff; }
.cod-activa-wrap.is-active .cod-btn-stop{ background:rgba(0,0,0,.2); color:#fff; }

/* Barras de tiempo por cliente */
.cod-cli-bar-row{ margin:14px 0; }
.cod-cli-bar-row:first-child{ margin-top:4px; }
.cod-cli-bar-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; margin-bottom:7px; font-weight:500; }
.cod-cli-bar-track{ height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.cod-cli-bar-fill{ height:100%; background:var(--grad-brand); border-radius:999px; transition:width .6s var(--ease); }

/* Timeline conectada */
.cod-tl{ position:relative; padding-left:20px; }
.cod-tl::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--border); }
.cod-tl-node{ position:relative; padding:7px 0; font-size:13px; }
.cod-tl-node::before{ content:""; position:absolute; left:-19px; top:11px; width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.cod-tl-node .h{ font-family:var(--mono); color:var(--muted); font-size:10.5px; margin-bottom:1px; }

.cod-empty{ color:var(--muted); font-size:13px; padding:6px 0; }

@media(max-width:900px){ .cod-kpis{ grid-template-columns:repeat(2,1fr); } .cod-columns{ grid-template-columns:1fr; } }

/* ---------- CENTRO DE MANDO (admin) ---------- */
.adm-row{ display:grid; grid-template-columns:1fr 210px; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--border); }
.adm-row:last-child{ border-bottom:none; }
.adm-person{ display:flex; align-items:center; gap:12px; min-width:0; }
.adm-av{ width:38px; height:38px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; flex-shrink:0; }
.adm-name{ font-weight:600; font-size:14px; }
.adm-status{ font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-status.on{ color:var(--success); }
.adm-status.off{ color:var(--hint); }
.adm-bar-top{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:13px; margin-bottom:6px; }
.adm-sub{ font-family:var(--font); font-size:11px; color:var(--muted); }
.adm-bar-track{ height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.adm-bar-fill{ height:100%; background:var(--grad-brand); border-radius:999px; transition:width .6s var(--ease); }
@media(max-width:700px){ .adm-row{ grid-template-columns:1fr; gap:8px; } }