/* ============================================================================
   Ganem AI Studio — Shell (sidebar + topbar)
   ============================================================================ */
/* Fonts del design system (handoff Hub Home 1a): Space Grotesk (display/números),
   IBM Plex Sans (cuerpo/UI), IBM Plex Mono (labels/kickers). Cargadas globalmente
   aquí para que todas las páginas del shell compartan la misma tipografía. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --shell-sidebar-w: 248px;
  --shell-topbar-h: 64px;
  /* Familias tipográficas del design system */
  --shell-font: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --shell-font-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --shell-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* Paleta alineada al handoff 1a (modo claro) */
  --shell-accent: #37394c;       /* brand navy (--brand) */
  --shell-accent-deep: #2b2d3c;  /* topbar (--barbg) */
  --shell-accent-soft: #eef0f4;  /* light tint (--chip) */
  --shell-ink: #191b26;          /* --ink */
  --shell-ink-soft: #3a3d4d;     /* intermedio ink/muted */
  --shell-muted: #6a6f80;        /* --muted */
  --shell-line: rgba(20, 22, 34, 0.09); /* --line */
  --shell-bg: #eceef2;           /* --bg */
  --shell-surface: #ffffff;      /* --surf */
  --shell-surface-soft: #f6f7f9; /* --surf2 */
  --shell-hover: #eef0f4;        /* --chip */
  --shell-shadow: 0 24px 60px -16px rgba(15, 23, 42, 0.35);
}

/* Dark theme — se activa cuando <html data-theme="dark"> (el script init en
   cada <head> lo aplica antes del paint para evitar flash blanco). Los tokens
   se redefinen pero la estructura del shell no cambia. */
html[data-theme="dark"] {
  --shell-accent: #6366f1;       /* indigo más vivo para contrastar en oscuro */
  --shell-accent-deep: #0a0b11;  /* topbar casi negro (--barbg dark) */
  --shell-accent-soft: #232634;  /* tint oscuro (--chip dark) */
  --shell-ink: #e9ebf2;          /* --ink dark */
  --shell-ink-soft: #c3c7d4;     /* texto secundario */
  --shell-muted: #8f94a8;        /* --muted dark */
  --shell-line: rgba(255, 255, 255, 0.09); /* --line dark */
  --shell-bg: #0e0f16;           /* --bg dark */
  --shell-surface: #181a23;      /* --surf dark */
  --shell-surface-soft: #20222e; /* --surf2 dark */
  --shell-hover: #232634;        /* --chip dark */
  --shell-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* Cuando estamos en dark, sobreescribir las clases Tailwind y los colores
   hardcoded más comunes en el HTML de las herramientas. Esto evita tener que
   tocar cada página individualmente. */
html[data-theme="dark"] body.shell-body {
  color: var(--shell-ink);
}
html[data-theme="dark"] .bg-white { background-color: var(--shell-surface) !important; }
html[data-theme="dark"] .bg-slate-50 { background-color: var(--shell-surface-soft) !important; }
html[data-theme="dark"] .bg-slate-100 { background-color: var(--shell-hover) !important; }
html[data-theme="dark"] .bg-slate-50\/40,
html[data-theme="dark"] .bg-slate-50\/80,
html[data-theme="dark"] .bg-white\/80,
html[data-theme="dark"] .bg-white\/90 { background-color: var(--shell-surface) !important; }
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-slate-700 { color: var(--shell-ink) !important; }
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500 { color: var(--shell-ink-soft) !important; }
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-slate-300 { color: var(--shell-muted) !important; }
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300 { border-color: var(--shell-line) !important; }
html[data-theme="dark"] table { color: var(--shell-ink); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--shell-surface-soft);
  color: var(--shell-ink);
  border-color: var(--shell-line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--shell-muted); }
/* Botones tonos azules/celestes en light se ven mal en dark — neutralizar fondos */
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-indigo-50,
html[data-theme="dark"] .bg-purple-50,
html[data-theme="dark"] .bg-yellow-50 { background-color: var(--shell-hover) !important; }
/* Imágenes de logo del topbar ya van invertidas (filter:brightness(0) invert(1));
   en dark mode están bien igual. */

body.shell-body {
  --shell-rail-w: 64px;
  margin: 0;
  padding-top: var(--shell-topbar-h);
  padding-left: var(--shell-sidebar-w);
  background: var(--shell-bg);
  color: var(--shell-ink);
  font-family: var(--shell-font);
  box-sizing: border-box;
  min-height: 100vh;
  transition: padding-left 0.2s ease;
}
body.shell-body.shell-sidebar-collapsed { padding-left: var(--shell-rail-w); }
.shell-sidebar { transition: width 0.2s ease; }
body.shell-body.shell-sidebar-collapsed .shell-sidebar { width: var(--shell-rail-w); padding: 14px 8px; }

/* Hamburger DENTRO del sidebar (siempre en el top, no en el topbar) */
.shell-sidebar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin: 0 0 18px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--shell-ink-soft);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.shell-sidebar__toggle:hover {
  background: var(--shell-accent-soft);
  color: var(--shell-accent);
  border-color: rgba(55, 57, 76, 0.18);
}
.shell-sidebar__toggle svg { width: 20px; height: 20px; }
/* En modo rail, centrar el botón */
body.shell-body.shell-sidebar-collapsed .shell-sidebar__toggle { margin: 0 auto 14px; display: flex; }

/* Rail mode: ocultar labels, badges y headings; solo iconos centrados */
body.shell-body.shell-sidebar-collapsed .shell-sidebar__heading { display: none; }
body.shell-body.shell-sidebar-collapsed .shell-sidebar__label,
body.shell-body.shell-sidebar-collapsed .shell-sidebar__badge,
body.shell-body.shell-sidebar-collapsed .shell-sidebar__ai { display: none; }
body.shell-body.shell-sidebar-collapsed .shell-sidebar a.shell-sidebar__item {
  justify-content: center;
  padding: 12px 0;
  gap: 0;
}
body.shell-body.shell-sidebar-collapsed .shell-sidebar__item svg { width: 20px; height: 20px; opacity: 0.95; }
body.shell-body.shell-sidebar-collapsed .shell-sidebar__section { margin-bottom: 10px; }

/* ---------- Topbar ---------- */
.shell-topbar {
  position: fixed;
  top: 0;
  left: var(--shell-sidebar-w);        /* empieza a la derecha del sidebar */
  right: 0;
  height: var(--shell-topbar-h);
  background: var(--shell-accent-deep);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 90;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: left 0.2s ease;
}
body.shell-body.shell-sidebar-collapsed .shell-topbar { left: var(--shell-rail-w); }
.shell-topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 24px;
  margin-right: 8px;
  box-sizing: border-box;
}
.shell-topbar__brand-img {
  height: 28px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.shell-topbar__search {
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}
.shell-topbar__search input {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 9px 14px 9px 38px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: background 0.15s, border-color 0.15s;
}
.shell-topbar__search input::placeholder { color: rgba(255,255,255,0.45); }
.shell-topbar__search input:focus {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.4);
}
.shell-topbar__search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,0.5);
}
.shell-topbar__search kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
}

.shell-topbar__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.shell-topbar__icon-btn {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.7);
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.shell-topbar__icon-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.shell-topbar__icon-btn svg { width: 18px; height: 18px; }

/* Campana de notificaciones */
.shell-notif-wrap { position: relative; display: flex; }
.shell-notif-wrap .shell-topbar__icon-btn { position: relative; }
.shell-notif__badge {
  position: absolute; top: 0; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #e11d48; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  box-sizing: border-box; pointer-events: none;
}
.shell-notif {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 344px; background: var(--shell-surface);
  border: 1px solid var(--shell-line); border-radius: 14px;
  box-shadow: var(--shell-shadow); z-index: 200; display: none; overflow: hidden;
}
.shell-notif.is-open { display: block; }
.shell-notif__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--shell-line);
  font-size: 12px; font-weight: 700; color: var(--shell-ink);
}
.shell-notif__markall { background: none; border: 0; color: var(--shell-accent); font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; }
.shell-notif__markall:hover { text-decoration: underline; }
.shell-notif__list { max-height: 420px; overflow-y: auto; }
.shell-notif__empty { padding: 26px 16px; text-align: center; color: var(--shell-muted); font-size: 12.5px; }
.shell-notif__item {
  display: flex; gap: 10px; width: 100%; text-align: left;
  padding: 12px 16px; background: none; border: 0;
  border-bottom: 1px solid var(--shell-line); cursor: pointer; font-family: inherit;
}
.shell-notif__item:last-child { border-bottom: 0; }
.shell-notif__item:hover { background: var(--shell-hover); }
.shell-notif__item.is-unread { background: var(--shell-accent-soft); }
.shell-notif__dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; margin-top: 5px; flex-shrink: 0; }
.shell-notif__item.is-unread .shell-notif__dot { background: var(--shell-accent); }
.shell-notif__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shell-notif__title { font-size: 12.5px; font-weight: 600; color: var(--shell-ink); }
.shell-notif__text { font-size: 11.5px; color: var(--shell-muted); }
.shell-notif__time { font-size: 10.5px; color: var(--shell-muted); margin-top: 2px; }

.shell-topbar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
.shell-topbar__user:hover { background: rgba(255,255,255,0.12); }
.shell-topbar__avatar {
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.shell-topbar__user-info { line-height: 1.1; }
.shell-topbar__user-name { font-size: 12px; font-weight: 700; color: #fff; }
.shell-topbar__user-role { font-size: 10px; color: rgba(255,255,255,0.55); }
.shell-topbar__user-chevron { color: rgba(255,255,255,0.55); margin-left: 4px; }
.shell-topbar__user-wrap { position: relative; }

/* Dropdown del usuario en el topbar */
.shell-userdrop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--shell-surface);
  border: 1px solid var(--shell-line);
  border-radius: 14px;
  box-shadow: var(--shell-shadow);
  z-index: 200;
  display: none;
  overflow: hidden;
}
.shell-userdrop.is-open { display: block; }
.shell-userdrop__header {
  padding: 12px 16px 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--shell-muted);
}
.shell-userdrop__list {
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
}
.shell-userdrop__loading, .shell-userdrop__error {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--shell-muted);
}
.shell-userdrop__error { color: #dc2626; }
.shell-userdrop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s;
}
.shell-userdrop__item:hover { background: var(--shell-hover); }
.shell-userdrop__item.is-current { background: var(--shell-accent-soft); }
.shell-userdrop__avatar {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--shell-accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  flex-shrink: 0;
}
.shell-userdrop__info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.shell-userdrop__name { font-size: 12px; font-weight: 700; color: var(--shell-ink); }
.shell-userdrop__role {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--shell-muted);
}
.shell-userdrop__role--cuentas { color: #2563eb; }
.shell-userdrop__role--diseno { color: #a855f7; }
.shell-userdrop__role--admin { color: #dc2626; }
.shell-userdrop__role--finanzas { color: #15803d; }
.shell-userdrop__role--compras { color: #b45309; }
.shell-userdrop__check { color: var(--shell-accent); font-weight: 800; }
.shell-userdrop__link {
  display: block;
  padding: 12px 16px;
  border-top: 1px solid var(--shell-line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--shell-ink-soft);
  text-decoration: none;
  transition: background 0.12s;
}
.shell-userdrop__link:hover { background: var(--shell-hover); color: var(--shell-ink); }

.shell-userdrop__logout {
  width: 100%;
  padding: 12px 16px;
  background: var(--shell-surface-soft);
  border: 0;
  border-top: 1px solid var(--shell-line);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ef4444;
  transition: background 0.12s;
}
.shell-userdrop__logout:hover { background: var(--shell-hover); }

/* ---------- Sidebar ---------- */
.shell-sidebar {
  position: fixed;
  top: 0;                              /* full-height, estilo Gemini */
  left: 0;
  bottom: 0;
  width: var(--shell-sidebar-w);
  background: var(--shell-surface);
  border-right: 1px solid var(--shell-line);
  padding: 14px 14px;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 95;                         /* arriba de topbar (que tiene z=90) */
}

.shell-sidebar__section {
  margin-bottom: 24px;
}
.shell-sidebar__heading {
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 14px 10px;
}
.shell-sidebar a.shell-sidebar__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--shell-ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.shell-sidebar a.shell-sidebar__item:hover {
  background: var(--shell-hover);
}
.shell-sidebar a.shell-sidebar__item.is-active {
  background: var(--shell-accent);
  color: #fff;
}
.shell-sidebar a.shell-sidebar__item.is-active .shell-sidebar__badge {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.shell-sidebar__item svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  opacity: 0.95;
}
.shell-sidebar__label { flex: 1; }
.shell-sidebar__badge {
  font-size: 10px;
  font-weight: 800;
  background: var(--shell-line);
  color: var(--shell-muted);
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.shell-sidebar__ai {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  color: #fff;
  padding: 3px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px -1px rgba(168, 85, 247, 0.45);
}
.shell-sidebar a.shell-sidebar__item.is-active .shell-sidebar__ai {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 2px 6px -1px rgba(0,0,0,0.3);
}

/* ---------- Layout helper (only when page wants default padding, e.g. home) ---------- */
.shell-main {
  padding: 32px 40px 80px;
  box-sizing: border-box;
  /* El contenido tiene tope y lo que sobra se reparte a los lados.
     A pantalla completa en un monitor ancho, una columna de texto se estira
     sin freno y un párrafo de dos renglones queda como una línea de punta a
     punta — que es justo lo que cuesta leer. El blanco de los lados no es
     desperdicio, es el margen.
     Quien de verdad usa el ancho —un lienzo, un tablero, un editor— se sale
     con `.shell-main--ancho`: ahí achicar no es cuestión de gusto, es quitarle
     superficie de trabajo a la herramienta. */
  max-width: 1400px;
  margin-inline: auto;
}
.shell-main--flush { padding: 0; }
.shell-main--ancho { max-width: none; }

/* Older tool pages use sticky in-page headers — neutralize them when nested in shell */
.shell-body header.bg-white\/80 { display: none !important; }

@media (max-width: 900px) {
  body.shell-body { padding-left: 0; }
  .shell-sidebar { display: none; }
  .shell-main { padding: 24px 16px 80px; }
}

/* ---------- Folio picker / context bar (Templates Studio & Smart Adapt) ---------- */
/* ---------- Medidas de la tarea, plegadas ----------
   El conteo siempre a la vista; la lista completa solo si se pide. */
.folio-medidas { background: var(--shell-surface); border: 1px solid var(--shell-line);
                 border-radius: 14px; margin-bottom: 14px; overflow: hidden; }
.folio-medidas__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                       padding: 12px 16px; cursor: pointer; list-style: none; user-select: none; }
.folio-medidas__head::-webkit-details-marker { display: none; }
.folio-medidas__head:hover { background: var(--shell-surface-soft); }
.folio-medidas__t { font-family: var(--shell-font-mono); font-size: 10px; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--shell-muted); }
.folio-medidas__n { font-size: 12.5px; color: var(--shell-ink-soft); }
.folio-medidas__n b { color: var(--shell-ink); font-weight: 700; }
.folio-medidas__v { margin-left: auto; font-size: 11px; color: var(--shell-accent); font-weight: 600; }
.folio-medidas[open] .folio-medidas__v::after { content: " ▴"; }
.folio-medidas__v::after { content: " ▾"; }
.folio-medidas__chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 16px 12px; }
.folio-medidas__chip { font-family: var(--shell-font-mono); font-size: 10.5px; color: var(--shell-ink-soft);
                       background: var(--shell-surface-soft); border: 1px solid var(--shell-line);
                       border-radius: 6px; padding: 3px 7px; }
.folio-medidas__tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.folio-medidas__tabla td { padding: 7px 16px; border-top: 1px solid var(--shell-line); vertical-align: baseline; }
.folio-medidas__dim { font-family: var(--shell-font-mono); font-weight: 700; color: var(--shell-ink); white-space: nowrap; width: 1%; }
.folio-medidas__mat { color: var(--shell-ink-soft); }
.folio-medidas__nota { color: var(--shell-muted); font-size: 11px; text-align: right; }

/* ---------- Encabezado de la bandeja de las herramientas ----------
   Mismo tono que el de Mis tareas, que lo trae en su propio <style>. */
.fp-kicker { font-family: var(--shell-font-mono); font-size: 11px; letter-spacing: .16em;
             text-transform: uppercase; color: var(--shell-muted); display: inline-flex;
             align-items: center; gap: 10px; }
.fp-kicker::before { content: ""; width: 20px; height: 3px; border-radius: 2px; background: var(--shell-accent); }
.fp-h1 { font-family: var(--shell-font-display); font-weight: 700; letter-spacing: -.02em;
         font-size: 30px; margin: 12px 0 6px; color: var(--shell-ink); }
.fp-sub { color: var(--shell-muted); font-size: 14px; margin: 0 0 20px; max-width: 74ch; }
.fp-sub b { color: var(--shell-ink); }

/* ---------- Resumen por estatus ----------
   Los cuadros de arriba del tablero. Vivían en mis-tareas.html; subieron aquí
   cuando la bandeja de las herramientas internas los empezó a usar también. */
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 22px; }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
/* Cuando los cuadros no son ocho sino seis, la rejilla de cinco deja al último
   solo en un segundo renglón. Esta se acomoda a cuantos haya. */
.kpi-grid--auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 900px) { .kpi-grid--auto { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: var(--shell-surface); border: 1px solid var(--shell-line); border-radius: 14px; padding: 15px 16px; cursor: pointer; transition: border-color .15s, transform .12s; }
.kpi:hover { border-color: var(--shell-accent); transform: translateY(-2px); }
.kpi.on { border-color: var(--shell-accent); box-shadow: inset 0 0 0 1px var(--shell-accent); }
.kpi__label { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--shell-muted); text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.kpi__label i { width: 8px; height: 8px; border-radius: 50%; }
.kpi__value { font-family: var(--shell-font-display); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--shell-ink); }
.kpi__hint { font-size: 11px; color: var(--shell-muted); margin-top: 6px; }
.kpi--alert { background: rgba(225,29,72,.05); border-color: rgba(225,29,72,.25); }
.kpi--alert .kpi__value { color: #e11d48; }

/* El marco de la lista. Mis tareas usa su propia clase .card, que vive en su
   <style>; aquí se escribe completa para no depender de ella. */
.fp-lista { background: var(--shell-surface); border: 1px solid var(--shell-line);
            border-radius: 16px; padding: 8px 4px; overflow-x: auto; }

/* ---------- Lista de tareas ----------
   La vista de renglones. Igual que el tablero y los cuadros de estatus: vivía
   en mis-tareas.html y subió aquí cuando la bandeja de las herramientas
   internas la empezó a usar. */
.tk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tk-table th { text-align: left; font-family: var(--shell-font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--shell-muted); font-weight: 600; padding: 10px; border-bottom: 1px solid var(--shell-line); white-space: nowrap; }
.tk-table td { padding: 10px; border-bottom: 1px solid var(--shell-line); color: var(--shell-ink); }
.tk-table tr { cursor: pointer; }
.tk-table tr:hover td { background: var(--shell-surface-soft); }
.tk-pill { font-family: var(--shell-font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; }
.tk-pill--por-hacer { color: #6b7280; background: rgba(107,114,128,.14); }
.tk-pill--en-proceso { color: #2563eb; background: rgba(37,99,235,.12); }
.tk-pill--revision { color: #b45309; background: rgba(180,83,9,.12); }
.tk-pill--ajustes { color: #0e7490; background: rgba(14,116,144,.12); }
.tk-pill--revision-cliente { color: #7c3aed; background: rgba(124,58,237,.12); }
.tk-pill--aprobado-cliente { color: #059669; background: rgba(5,150,105,.12); }
.tk-pill--hecho { color: #15803d; background: rgba(22,163,74,.14); }
.tk-row-who { display: inline-flex; align-items: center; gap: 7px; }
/* La clave, como liga a la tarea. El acento de marca es un navy oscuro que
   solo no se distingue del texto, así que lleva subrayado punteado: es lo que
   dice "esto se pica" sin meter un color nuevo a la paleta. */
.fp-clave { font-family: var(--shell-font-mono); font-size: 11.5px; font-weight: 700;
            color: var(--shell-accent); white-space: nowrap;
            text-decoration: underline; text-decoration-style: dotted;
            text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fp-clave:hover { text-decoration-style: solid; }
.tk-vd { color: #e11d48; font-weight: 600; }
.tk-fecha { font-variant-numeric: tabular-nums; color: var(--shell-muted); white-space: nowrap; font-size: 12.5px; }
.tk-vence { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-empty { color: var(--shell-muted); font-size: 13px; text-align: center; padding: 40px; }

/* ---------- Tablero de tareas ----------
   Vivía dentro de mis-tareas.html. Se subió aquí cuando la bandeja de las
   herramientas internas pasó a ser el mismo tablero: una sola definición, para
   que no se separen con el tiempo. */
.tk-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
@media (max-width: 980px) { .tk-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .tk-board { grid-template-columns: 1fr; } }
.tk-col { background: var(--shell-surface-soft); border: 1px solid var(--shell-line); border-radius: 14px; padding: 10px; min-height: 120px; }
.tk-col.drag-over { border-color: var(--shell-accent); box-shadow: inset 0 0 0 2px rgba(124,58,237,.25); }
.tk-col__head { display: flex; align-items: center; gap: 8px; padding: 4px 8px 10px; }
.tk-col__dot { width: 8px; height: 8px; border-radius: 50%; }
.tk-col__t { font-family: var(--shell-font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--shell-ink-soft); font-weight: 600; }
.tk-col__n { margin-left: auto; font-size: 11px; color: var(--shell-muted); background: var(--shell-surface); border: 1px solid var(--shell-line); border-radius: 20px; padding: 1px 8px; }
.tk-card { background: var(--shell-surface); border: 1px solid var(--shell-line); border-radius: 11px; padding: 12px; margin-bottom: 9px; cursor: pointer; }
.tk-card:hover { border-color: var(--shell-accent); }
.tk-card.dragging { opacity: .5; }
.tk-card__top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.tk-card__t { font-size: 13.5px; font-weight: 600; color: var(--shell-ink); line-height: 1.35; margin-bottom: 10px; }
.tk-card__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
/* En el tablero la fecha contesta la pregunta de siempre: ¿cuánto lleva esta
   tarjeta parada en esta columna? Por eso va arriba, no en el pie. */
.tk-card__fecha { margin-left: auto; font-size: 11px; color: var(--shell-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-key { font-family: var(--shell-font-mono); font-size: 10.5px; color: var(--shell-muted); font-weight: 600; }
.tk-type { font-family: var(--shell-font-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--shell-surface-soft); color: var(--shell-muted); }
.tk-prio { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; }
.tk-prio--urgente { color: #e11d48; background: rgba(225,29,72,.12); }
.tk-prio--alta { color: #b45309; background: rgba(180,83,9,.12); }
.tk-prio--media { color: #2563eb; background: rgba(37,99,235,.10); }
.tk-prio--baja { color: #6b7280; background: rgba(107,114,128,.12); }
.tk-cchips { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--shell-muted); }
/* Nadie la ha abierto desde que se asignó. Va en ámbar y no en rojo a
   propósito: es un aviso de que algo se está enfriando, no un error. */
.tk-sinabrir { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600;
  letter-spacing: .02em; padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  color: #92400e; background: rgba(217,119,6,.14); border: 1px solid rgba(217,119,6,.28); }
@media (prefers-color-scheme: dark) { .tk-sinabrir { color: #fcd34d; background: rgba(217,119,6,.18); } }
.tk-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.tk-av--none { background: var(--shell-surface-soft) !important; color: var(--shell-muted); border: 1px dashed var(--shell-line); }
.tk-empty-col { font-size: 11.5px; color: var(--shell-muted); text-align: center; padding: 14px 6px; }

.folio-picker {
  background: var(--shell-surface);
  border: 1px solid var(--shell-line);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 32px;
}
.folio-picker__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
}
.folio-picker__title {
  font-family: 'univia-pro', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shell-ink);
  margin: 0 0 4px;
}
.folio-picker__sub { font-size: 12px; color: var(--shell-muted); }
.folio-picker__count {
  background: var(--shell-accent-soft);
  color: var(--shell-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 999px;
}
.folio-picker__list { display: flex; flex-direction: column; gap: 8px; }
.folio-card {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--shell-line);
  border-radius: 12px;
  background: var(--shell-surface-soft);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.folio-card:hover { border-color: var(--shell-accent); background: var(--shell-surface); }
.folio-card__folio { font-size: 14px; font-weight: 800; color: var(--shell-ink); }
.folio-card__dealer { font-size: 13px; font-weight: 700; color: var(--shell-ink-soft); }
.folio-card__product { font-size: 12px; color: var(--shell-muted); margin-top: 3px; }
.folio-card__time {
  font-size: 11px;
  color: var(--shell-muted);
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600;
}
.folio-card__time svg { width: 12px; height: 12px; }
.folio-card__cta {
  background: var(--shell-accent);
  color: #fff;
  border: 0;
  padding: 9px 18px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.folio-card__cta:hover { background: var(--shell-accent-deep); }

.folio-context-bar {
  background: var(--shell-accent);
  color: #fff;
  border-radius: 14px;
  padding: 14px 22px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.folio-context-bar__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.folio-context-bar__main {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.folio-context-bar__folio { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.folio-context-bar__meta { font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 600; }
.folio-context-bar__urgent {
  background: #dc2626;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.folio-context-bar.is-urgent { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.4); }
.folio-context-bar__change {
  margin-left: auto;
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.folio-context-bar__change:hover { background: rgba(255,255,255,0.22); }

.folio-brief {
  background: var(--shell-surface);
  border: 1px solid var(--shell-line);
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: -18px;
  margin-bottom: 32px;
}
.folio-brief__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.folio-brief__title {
  font-family: 'univia-pro', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--shell-muted);
}
.folio-brief__source {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shell-accent);
  background: var(--shell-accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
}
.folio-brief__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.folio-brief__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--shell-ink-soft);
  line-height: 1.5;
}
.folio-brief__bullet {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--shell-accent);
  margin-top: 8px;
  flex-shrink: 0;
}

/* Hide tool content until a folio has been picked */
body[data-folio-tool]:not(.folio-active) main > *:not(#folioMount) {
  display: none !important;
}