/**
 * ------------------------------------------------------------
 * assets/layout.css
 * ------------------------------------------------------------
 * Shared visual shell for every logged-in page: light sidebar +
 * light main content area + acento morado (ver :root abajo).
 * Include after resetting any page-specific dark-theme vars.
 * ------------------------------------------------------------
 */

/* 21 ago v1 — Tipografía CRM AMIGO: body en Lato, títulos en Calps
   (pedido explícito de Eli). Calps es una tipografía condensada de
   pago (Typesketchbook, fontspring.com/fonts/typesketchbook/calps) —
   no está en Google Fonts, así que no se puede cargar por @import.
   Eli mismo dijo: "si no está disponible usa una parecida de Google
   Fonts" — se usa Oswald, el reemplazo condensado/geométrico más
   cercano en peso y espíritu (misma familia de uso: titulares fuertes
   sobre cuerpo de texto en Lato, combinación muy usada justo por
   eso). Si más adelante compran la licencia de Calps real, solo hay
   que cambiar el nombre acá — el resto de la app ya usa var(--font-*)
   /las reglas de h1-h6 de abajo, no nombres de fuente sueltos. */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&family=Oswald:wght@500;600;700&display=swap');

:root {
  /* Calps (titulos) no está en Google Fonts — Oswald como reemplazo
     hasta que se compre la licencia real (ver nota del @import arriba). */
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Oswald', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* 21 ago v1 — CRM AMIGO Design Tokens (CRM_AMIGO_Guia_de_Color_y_
     Design_Tokens.docx). Sidebar Navy oscuro con pill blanco para el
     ítem activo (igual al mockup de Dashboard de Diana), acento
     principal CRM AMIGO Blue en vez del morado/navy plano de v1-v39
     de app-base. Mismas variables de siempre (--accent, --ink, etc.)
     para no tener que tocar cada página — solo cambian los valores.
     Los nombres de la guía (--brand-primary, --surface-canvas, etc.)
     se agregan como alias más abajo para el código nuevo. */
  --sidebar-bg: #002c5d;              /* color.brand.navy / primary.900 */
  --sidebar-text: #ffffff;
  --sidebar-muted: #9fb3d6;
  --sidebar-active-bg: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-bottom-bg: #002347;
  --sidebar-bottom-border: rgba(255, 255, 255, 0.12);
  --content-bg: #f8fafc;              /* color.neutral.50 (Cloud) */
  --card-bg: #ffffff;
  --card-border: #e2e8f0;             /* color.neutral.200 */
  --ink: #242c33;                     /* color.neutral.900 (Ink) */
  --muted: #64748b;                   /* color.neutral.500 */
  --accent: #0b6eb5;                  /* color.brand.primary / primary.500 */
  --accent-dark: #085c99;             /* color.primary.600 (hover) */
  --accent-soft: #d5e9f8;             /* color.brand.softBlue / primary.100 */
  --error: #dc3f53;                   /* color.danger.500 */
  --success: #45c65a;                 /* color.brand.green / accent.500 */
  --warning: #f4b740;                 /* color.warning.500 */
  --info: #00b4e0;                    /* color.brand.cyan / secondary.500 */
  --navy: #002c5d;
  --input-bg: #ffffff;
  --track-bg: #e2e8f0;
  --card-muted-bg: #f1f5f9;           /* color.neutral.100 */

  /* Alias con los nombres exactos de la guía de tokens, para código
     nuevo (crmamigo-v1) que prefiera nombrarlos así en vez de los
     genéricos de arriba — mismos valores, no duplican significado. */
  --brand-primary: var(--accent);
  --brand-primary-hover: var(--accent-dark);
  --brand-navy: var(--navy);
  --brand-cyan: var(--info);
  --brand-green: var(--success);
  --surface-canvas: var(--content-bg);
  --surface-card: var(--card-bg);
  --text-primary: var(--ink);
  --feedback-success: var(--success);
  --feedback-warning: var(--warning);
  --feedback-danger: var(--error);
  --feedback-info: var(--info);

  /* Colores de etapa de Pipeline (sección 6 de la guía) — para el
     badge/punto de estado de cada etapa, no para pintar la tarjeta
     completa. */
  --pipeline-lead: #94a3b8;
  --pipeline-contacted: #00b4e0;
  --pipeline-qualified: #0b6eb5;
  --pipeline-proposal: #7c5ce7;
  --pipeline-negotiation: #f4b740;
  --pipeline-won: #45c65a;
  --pipeline-lost: #dc3f53;
}

/* Tema oscuro — activado por JS (ver layout.js: applyTheme/initThemeToggle) via
   document.documentElement.setAttribute('data-theme','dark'), guardado en
   localStorage (no toca la BD ni la tabla users). Solo sobreescribe las
   variables; el resto de layout.css ya las usa en cascada, así que la
   mayoría de tarjetas/inputs/menús se adaptan automáticamente.
   ⚠️ Los estilos propios de cada pantalla (dashboard.html, today.html, etc.)
   que usen colores fijos en vez de estas variables NO cambiarán solos —
   revisarlos aparte si hace falta. */
:root[data-theme="dark"] {
  --content-bg: #14151a;
  --card-bg: #1e1f26;
  --card-border: #2c2d35;
  --ink: #e7e8ec;
  --muted: #9a9ca6;
  --accent-soft: rgba(70, 87, 143, 0.22);
  --input-bg: #23242e;
  --track-bg: #2a2b35;
  --card-muted-bg: #242530;
  /* Tema oscuro vuelve a usar el sidebar oscuro clásico (no el claro nuevo
     del :root de arriba) — este era el look por defecto hasta el 19 ago. */
  --sidebar-bg: #17181c;
  --sidebar-text: #d7d8dd;
  --sidebar-muted: #8b8d97;
  --sidebar-active-bg: #2a2b32;
  --sidebar-hover-bg: #2a2b32;
  --sidebar-bottom-bg: #1e1f26;
  --sidebar-bottom-border: #2a2b32;
}

/* Tema "Coach of Action" — mismo tema claro de siempre (content-bg, card-bg,
   ink, etc. no se tocan, así que se heredan del :root de arriba), solo con
   el sidebar recoloreado al navy de marca en vez del blanco por defecto.
   Nada más cambia — ni el acento morado, ni badges, ni el resto de la app. */
:root[data-theme="coa"] {
  --sidebar-bg: #334172;
  --sidebar-text: #e7e9f5;
  --sidebar-active-bg: #46578f;
  --sidebar-hover-bg: #46578f;
  --sidebar-muted: #aab2d6;
  --sidebar-bottom-bg: #2b3760;
  --sidebar-bottom-border: #46578f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--content-bg);
  color: var(--ink);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.page-title, #pageTitleH1,
.in-hello, .esencial-logo, .in-goal-current, .in-revenue-current {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.app-shell {
  display: flex;
  flex-direction: column; /* navbar arriba, contenido abajo (antes era row: sidebar + main) */
  min-height: 100vh;
  padding-bottom: 64px; /* room for the fixed Win Sprint bar */
}

/* ---------------- Menú (19 ago v5) ----------------
   De columna fija a la izquierda (.app-sidebar, hasta v3) → dropdown único
   colgando de un botón hamburguesa (v4) → navbar horizontal arriba de
   todo con links planos + grupos con su propio dropdown "▾" (v5, a
   pedido explícito de Eli con una referencia visual tipo Systeme.io: "no
   tipo hamburguesa"). Ver topNavHtml()/topNavGroupHtml() en layout.js. */
.app-navbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 28px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-bottom: 1px solid var(--card-border);
  flex-wrap: wrap;
}
.navbar-drawer-toggle {
  background: none; border: none; color: inherit; font-size: 16px; cursor: pointer;
  padding: 4px 6px; border-radius: 6px; line-height: 1;
}
.navbar-drawer-toggle:hover { background: var(--sidebar-hover-bg); }
.navbar-brand-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.navbar-brand-name .accent { color: inherit; } /* en la referencia "amigo" no lleva color aparte */
.navbar-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap; /* pasa a segunda línea en vez de scrollear (19 ago v6 — el scroll horizontal cortaba "More"/los últimos ítems) */
}
.navbar-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.navbar-link:hover { background: var(--sidebar-hover-bg); }
.navbar-link.active { color: var(--accent); box-shadow: inset 0 -2px 0 0 var(--accent); }
.navbar-caret { font-size: 9px; color: var(--sidebar-muted); }
.navbar-group { position: relative; }
/* 19 ago v14 — "Sales"/"Work"/"Marketing" ahora son dos zonas clic
   dentro de la misma píldora: el label navega directo al hub
   (/menu/<grupo>), el caret (▾) abre el dropdown de accesos rápidos.
   El padding se movió del .navbar-link (que ahora es solo el wrapper
   visual) a cada hijo, para que ambos tengan su propio hit-area. */
.navbar-group-btn { padding: 0; gap: 0; }
.navbar-group-label {
  padding: 8px 4px 8px 10px;
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.navbar-group-caret-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px 8px 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.navbar-group-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 8px;
  z-index: 70;
  display: none;
}
.navbar-group-dropdown.open { display: block; }
.navbar-group-dropdown .sidebar-nav { margin-top: 0; }

/* Reutilizado dentro de cada .navbar-group-dropdown (navLinkHtml() en
   layout.js no cambió) — antes vivía también en la columna del sidebar. */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.sidebar-nav a:hover { background: var(--sidebar-hover-bg); }
.sidebar-nav a.active { background: var(--sidebar-active-bg); color: var(--accent); font-weight: 700; }
.sidebar-nav a .icon { font-size: 14px; width: 18px; text-align: center; }

/* ---------------- Sidebar Nivel Esencial (21 ago v1, crmamigo-v1) ----------------
   Sidebar fijo Navy, calcado del mockup de Diana — reemplaza el navbar
   horizontal en las pantallas de Nivel Esencial (ver esencialSidebarHtml()
   en layout.js). Deliberadamente simple: 6 ítems + Ayuda/Configuración,
   sin dropdowns ni grupos. */
.esencial-shell { display: flex; align-items: stretch; min-height: 100vh; }
/* 21 ago v4 — Eli: "agrega la barra azul hasta el final" — min-height
   100vh explícito acá también (no solo en .esencial-shell/stretch) para
   que la barra Navy llegue hasta abajo de la página aunque el contenido
   de #pageContent sea más corto que la pantalla, sin depender solo del
   cálculo de flexbox del contenedor. */
/* 18 sep 2026 — Eli: "esta parte del menu vamos a dejarla fija y que la
   de la derecha se mueva de acuerdo con el contenido" — antes tenía
   solo min-height:100vh, así que en una pantalla más alta que la
   ventana la barra Navy se iba scrolleando junto con todo lo demás.
   position:sticky + height:100vh la clava en su lugar mientras el
   usuario baja por #pageContent/.esencial-main — no requiere volver
   .esencial-shell un contenedor de scroll propio (eso hubiera afectado
   cualquier lógica que dependa del scroll del documento en otras
   pantallas), así que es el cambio menos invasivo para lograrlo.
   overflow-y:auto es solo un colchón por si en una ventana muy baja
   (poca altura) los 8 ítems + Ayuda/Configuración/Admin Panel/Salir no
   caben en 100vh. */
.esencial-sidebar {
  width: 220px; flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text);
  display: flex; flex-direction: column; padding: 22px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.esencial-logo {
  font-weight: 900; font-size: 17px; letter-spacing: 0.02em; color: #fff;
  padding: 4px 10px 26px;
}
.esencial-logo .accent { color: var(--brand-cyan); }
.esencial-nav { display: flex; flex-direction: column; gap: 4px; }
.esencial-nav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--sidebar-text); text-decoration: none;
}
.esencial-nav-item:hover { background: var(--sidebar-hover-bg); }
.esencial-nav-item.active { background: var(--sidebar-active-bg); color: var(--navy); }
/* 21 ago v3 — iconos de línea unicolor (heredan color vía currentColor,
   ver ESENCIAL_ICONS en layout.js) en vez de emoji multicolor. */
.esencial-nav-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.esencial-nav-icon svg { width: 18px; height: 18px; }
.esencial-nav-item-btn {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: inherit;
}
.esencial-sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); }
.esencial-sidebar-separator { height: 1px; background: rgba(255,255,255,0.12); margin: 6px 10px; }

/* 21 ago v7 — esencialSettingsSidebarHtml() (Settings/Admin Panel dentro
   de la barra Navy, ver layout.js): encabezados de grupo (versión oscura
   de .menu-hub-group-label, que está pensada para fondo claro) y el link
   "Volver" arriba de la lista. */
.esencial-nav-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.esencial-return-link { color: rgba(255,255,255,0.75); margin-bottom: 4px; }
.esencial-group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); padding: 14px 14px 6px; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.esencial-group-label.first { border-top: none; margin-top: 0; padding-top: 0; }

/* 21 ago v9 — .project-tabs/.project-tab: pestañas horizontales subrayadas
   (no píldoras), ya usadas localmente en billing.html y admin/panel.html —
   se promueven a global acá para que growthTabsHtml() (Metas/Reportes
   fusionados bajo "Crecimiento", ver layout.js) las reuse sin duplicar la
   regla en cada pantalla. Funciona igual para <button> y <a>. */
.project-tabs {
  display: flex; gap: 6px; border-bottom: 0.5px solid var(--card-border);
  overflow-x: auto;
}
.project-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--muted);
  cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block;
}
.project-tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }
.project-tab:hover { color: var(--ink); }
/* 21 ago v2 — usado por initLayout() para las pantallas de Nivel Esencial
   que aún reusan topbarHtml()/#pageContent (Personas/Ventas/Metas/Tareas/
   Reportes); mismo padding que .app-main para que el contenido de cada
   pantalla (sin cambios) no quede pegado a los bordes. dashboard.html
   arma su propio topbar a mano y no usa esta clase para el padding. */
.esencial-main { flex: 1; min-width: 0; padding: 28px 36px; background: var(--content-bg); min-height: 100vh; }
@media (max-width: 900px) { .esencial-main { padding: 20px; } }

/* ---------------- Drawer "Momentum" (20 ago v38) ----------------
   Barra lateral colapsable, disponible en toda la app (nació como
   sidebar fijo de dashboard.html, ver momentumDrawerHtml()/
   wireMomentumDrawer() en layout.js). Es un overlay (position: fixed),
   no empuja el contenido — así no hay que ajustar el layout de cada
   pantalla existente. Arranca siempre cerrada. */
.mo-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 900;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.mo-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.mo-drawer {
  position: fixed; top: 0; left: 0; height: 100vh; width: 220px;
  background: var(--card-bg); border-right: 1px solid var(--card-border);
  z-index: 901; transform: translateX(-100%); transition: transform 0.22s ease;
  display: flex; flex-direction: column; padding: 20px 14px; overflow-y: auto;
}
.mo-drawer.open { transform: translateX(0); }
.mo-profile { display: flex; align-items: center; gap: 10px; padding: 6px 6px 20px; }
.mo-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.mo-profile-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.mo-profile-tag { font-size: 11px; color: var(--muted); margin-top: 1px; }
.mo-nav { display: flex; flex-direction: column; gap: 2px; }
.mo-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none;
}
.mo-nav-item:hover { background: var(--content-bg); }
.mo-nav-item.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.mo-sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.mo-new-goal-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; padding: 11px 14px;
  border-radius: 24px; margin-bottom: 12px;
}
.mo-new-goal-btn:hover { background: var(--accent-dark); }
.mo-drawer-separator { height: 1px; background: var(--card-border); margin: 8px 6px; }
.mo-nav-item-btn {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.mo-nav-item-btn:hover { color: var(--error); }

/* ---------------- Main content ---------------- */
.app-main {
  flex: 1;
  padding: 28px 36px;
  min-width: 0;
}

.app-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}
.app-topbar h1 { font-size: 24px; margin: 0; }
.app-topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  position: relative;
}

/* 3 sep (noche) — variante breadcrumb del topbar, SOLO para Tareas/
   Proyectos/Estrategia (WORK_HUB_BREADCRUMB_PAGES en layout.js) sobre
   el modelo que pasó Eli — "CRMamigo › Proyectos" en vez del título
   grande. Ningún elemento de la derecha se quita (botón de acción,
   campana, idioma, selector de cuenta, nombre, menú ⚙) — solo se ven
   más chicos/discretos vía .topbar-right-compact. El resto de la app
   (20+ pantallas) sigue usando <h1> normal, sin cambios. */
.app-topbar-breadcrumb { align-items: center; }
.topbar-breadcrumb {
  display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); font-weight: 500;
}
.topbar-breadcrumb .tb-sep { color: var(--card-border); }
.topbar-breadcrumb .tb-current { color: var(--ink); font-weight: 700; }
.topbar-right-compact { gap: 7px; }
.topbar-right-compact .menu-btn { padding: 6px 12px; font-size: 12px; }
.topbar-right-compact .topbar-username { font-size: 12px; }

/* Pills horizontales "Tareas/Proyectos/Estrategia" — reemplazan al panel
   vertical .menu-hub-nav SOLO en esas 3 pantallas (ver comentario de
   sectionTabsHtml() en layout.js). El resto de la app que sigue usando
   .menu-hub/.menu-hub-nav (Configuración, Ventas, Marketing) no se toca:
   .menu-hub-tab se reusa tal cual, solo se le agrega un look de pill
   acá adentro, sin tocar su definición base más abajo. */
.work-hub-pills { display: flex; margin-bottom: 18px; }
.work-hub-pills .menu-hub-tabs { display: flex; flex-direction: row; gap: 6px; flex-wrap: wrap; }
.work-hub-pills .menu-hub-tab {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; flex: 0 0 auto;
  padding: 7px 15px; border-radius: 20px; font-size: 13px; font-weight: 500;
  color: var(--muted); background: var(--card-bg); border: 1px solid var(--card-border);
  text-decoration: none; white-space: nowrap; border-left: none;
}
.work-hub-pills .menu-hub-tab:hover { border-color: var(--accent); color: var(--ink); background: var(--card-bg); }
.work-hub-pills .menu-hub-tab.active {
  background: var(--ink); color: var(--card-bg); border-color: var(--ink); font-weight: 600;
}
.menu-btn {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--ink);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap; /* always show icon + "Menu" label together, never collapse to icon-only */
}
.topbar-username {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
/* 21 ago v4 — Eli: sesión guardada en español aunque su navegador esté en
   inglés (una vez logueado, la preferencia guardada de la cuenta manda
   sobre el idioma del navegador — resolveLanguage() en i18n.js). Antes
   solo se podía cambiar en Configuración; este botón (mismo que ya usa
   login.html, mismo data-lang-toggle) lo deja a mano en cualquier
   pantalla. */
.topbar-lang-toggle {
  background: var(--card-bg); border: 1px solid var(--card-border); color: var(--muted);
  font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 20px; cursor: pointer;
}
.topbar-lang-toggle:hover { color: var(--ink); border-color: var(--brand-primary); }
/* 3 sep — selector de cuenta para un usuario con acceso a más de una
   (ver initAccountSwitcher() en layout.js / user_account_access) —
   solo aparece en el topbar cuando aplica, mismo estilo del toggle de
   idioma de al lado para que no desentone. */
.topbar-account-switcher {
  background: var(--card-bg); border: 1px solid var(--card-border); color: var(--ink);
  font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 20px; cursor: pointer;
  max-width: 160px;
}
.topbar-account-switcher:hover { border-color: var(--brand-primary); }
@media (max-width: 480px) {
  .topbar-username { display: none; } /* only hidden on very small phones to save space; the Menu button itself never loses its label */
}
.menu-dropdown {
  position: absolute;
  top: 40px;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 180px;
  padding: 6px;
  display: none;
  z-index: 20;
}
.menu-dropdown.open { display: block; }
.menu-dropdown a, .menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.menu-dropdown a:hover, .menu-dropdown button:hover { background: var(--content-bg); }
.menu-dropdown a.active {
  background: var(--accent-soft, rgba(232,163,61,0.15));
  color: var(--accent-dark, var(--ink));
  font-weight: 600;
}
.menu-dropdown .menu-group { margin-bottom: 2px; }
.menu-dropdown .menu-group-collapsible {
  margin-bottom: 2px;
}
.menu-dropdown .menu-group-collapsible summary {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  list-style: none; /* hide the default disclosure triangle, we add our own */
}
.menu-dropdown .menu-group-collapsible summary::-webkit-details-marker { display: none; }
.menu-dropdown .menu-group-collapsible summary::after {
  content: '›';
  float: right;
  transition: transform 0.15s ease;
}
.menu-dropdown .menu-group-collapsible[open] summary::after { transform: rotate(90deg); }
.menu-dropdown .menu-group-collapsible summary:hover { background: var(--content-bg); }
.menu-dropdown .menu-group-collapsible a { padding-left: 20px; } /* indent so items read as nested under the group */
/* Separator between the top-level items (Ver saludo / Brain Dump) and the
   first collapsible group, and between Help and Log out — a thin line
   instead of extra empty space, since the dropdown is already dense. */
.menu-dropdown .menu-group + .menu-group-collapsible,
.menu-dropdown .menu-group-collapsible + .menu-group,
.menu-dropdown .menu-group-collapsible:last-of-type + #menuLogoutBtn {
  border-top: 1px solid var(--card-border);
  padding-top: 4px;
  margin-top: 4px;
}

/* ---------------- Campanita / inbox interno (29 ago c) ---------------- */
.notif-bell-wrap { position: relative; }
.notif-bell-btn {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--ink);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e0432b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 3px;
  display: none;
  align-items: center;
  justify-content: center;
}
.notif-dropdown {
  position: absolute;
  top: 40px;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  width: 320px;
  max-width: calc(100vw - 24px);
  display: none;
  z-index: 20;
}
.notif-dropdown.open { display: block; }
.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.notif-dropdown-header button {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.notif-dropdown-list { max-height: 360px; overflow-y: auto; }
.notif-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
  cursor: pointer;
  font-size: 13px;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--content-bg); }
.notif-item.unread { background: var(--accent-soft, rgba(232,163,61,0.08)); }
.notif-item-title { font-weight: 600; color: var(--ink); }
.notif-item-body { color: var(--muted); margin-top: 2px; }
.notif-item-time { color: var(--muted); font-size: 11px; margin-top: 4px; }
.notif-empty { padding: 20px 12px; text-align: center; color: var(--muted); font-size: 13px; }

.page-subtitle { color: var(--muted); font-size: 13px; margin: 6px 0 20px; }

/* ---------------- Cards ---------------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 20px;
}
.card-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.card-value { font-size: 26px; font-weight: 700; }

.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.priority-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.priority-bar-row .label { width: 60px; color: var(--muted); }
.priority-bar-track { flex: 1; height: 8px; border-radius: 20px; background: var(--track-bg); overflow: hidden; }
.priority-bar-fill { height: 100%; border-radius: 20px; }
.priority-bar-fill.high { background: var(--error); }
.priority-bar-fill.medium { background: var(--accent); }
.priority-bar-fill.low { background: #b7b9c2; }
.priority-bar-row .count { width: 24px; text-align: right; font-weight: 600; }

.hours-chart { display: flex; align-items: flex-end; gap: 8px; height: 90px; }
.hours-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.hours-bar { width: 100%; max-width: 26px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 3px; }
.hours-bar-label { font-size: 10px; color: var(--muted); margin-top: 4px; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--card-border); }
table.data-table td { padding: 10px; border-bottom: 1px solid var(--card-border); }
table.data-table tr:last-child td { border-bottom: none; }

.badge { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600; }
.badge.high { background: rgba(217,83,79,0.14); color: var(--error); }
.badge.medium { background: var(--accent-soft); color: var(--accent-dark); }
.badge.low { background: #eee; color: var(--muted); }
.date-chip { background: #f0f0eb; color: var(--muted); font-size: 11px; padding: 3px 8px; border-radius: 6px; }

/* ----------------------------------------------------------
   Panel "Enfoque" (19 ago) — antes el Enfoque vivía arriba del
   sidebar y el Win Sprint era una barra fija abajo de toda la
   pantalla; ahora ambos viven juntos detrás del botón "⏱ Enfoque"
   del topbar, colapsados por defecto (pedido explícito: liberar
   espacio de pantalla fijo). Mismo patrón visual que .menu-dropdown,
   solo más ancho para acomodar los controles del Win Sprint.
   ---------------------------------------------------------- */
.focus-dropdown {
  /* Mismo `right: 0` que .menu-dropdown a propósito — nunca están abiertos
     los dos a la vez (ver wireSidebarAndSprintBar en layout.js, cada uno
     cierra al otro al abrirse), así que no hay colisión visual aunque el
     botón que lo dispara viva más a la izquierda en el topbar. */
  position: absolute;
  top: 40px;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  width: 360px;
  max-width: calc(100vw - 24px);
  z-index: 70;
  display: none;
  overflow: hidden;
}
.focus-dropdown.open { display: block; }
@media (max-width: 860px) {
  .focus-dropdown { right: 8px; }
}

/* ---------------- Pantalla de Enfoque (21 ago v39) ----------------
   focus/focus.html mueve este MISMO elemento #focusDropdown (con todo
   su wiring ya montado por wireSidebarAndSprintBar()) del popover del
   navbar hacia el cuerpo de la página — se le agrega esta clase para
   que deje de comportarse como overlay flotante y se vea como una
   sección grande de la pantalla, en vez de duplicar el markup/IDs. */
.focus-dropdown.focus-embedded {
  position: static; display: block; width: 100%; max-width: none;
  box-shadow: none; z-index: auto;
}
.focus-embedded .sprint-time { font-size: 48px; min-width: 0; }
.focus-embedded .sprint-status { font-size: 14px; }
.focus-embedded .sprint-bar { padding: 26px 22px; }
.focus-embedded .sprint-mode-pill { font-size: 12px; padding: 6px 14px; }

.focus-toggle-time { font-size: 11.5px; font-variant-numeric: tabular-nums; }
#focusToggleBtn.focus-btn-work { background: #1f7a4d; color: #fff; border-color: #1f7a4d; }
#focusToggleBtn.focus-btn-break { background: #e0a92e; color: #241a02; border-color: #e0a92e; }

.focus-context-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--card-border);
}
.focus-context-row select {
  padding: 6px 9px; border-radius: 7px; border: 1px solid var(--card-border);
  background: var(--card-bg); color: var(--ink); font-size: 13px;
}

.focus-panel-body { background: #101114; color: #fff; }

/* ---------------- Win Sprint (dentro del panel "Enfoque") ---------------- */
.sprint-bar {
  background: #101114;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.sprint-mode-pill {
  background: var(--error);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}
/* Win Sprint bar states: green while an active work sprint is running, yellow during a break. Idle keeps the default dark background above. */
.sprint-bar.mode-work {
  background: #1f7a4d;
  border-top-color: #1f7a4d;
}
.sprint-bar.mode-work .sprint-status { color: #d7f0e1; }
.sprint-bar.mode-break {
  background: #e0a92e;
  color: #241a02;
  border-top-color: #e0a92e;
}
.sprint-bar.mode-break .sprint-status { color: #4a3a12; }
.sprint-bar.mode-break .sprint-controls button {
  background: rgba(0,0,0,0.15);
  color: #241a02;
}
.sprint-bar.mode-break .sprint-controls button.primary { background: #241a02; color: #fff; }
.sprint-bar.mode-daypause {
  background: #5a5fc7;
  color: #fff;
  border-top-color: #5a5fc7;
}
.sprint-bar.mode-daypause .sprint-status { color: #e4e4fb; }
.sprint-bar.mode-daypause .sprint-controls button.primary { background: #fff; color: #35398f; }
.sprint-time { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 78px; }
.sprint-status { font-size: 12px; color: #9a9ba3; flex: 1; }
.sprint-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sprint-controls button {
  background: #2a2b32;
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}
.sprint-controls button.primary.sprint-start-btn {
  font-size: 14px;
  padding: 11px 22px;
}
.sprint-controls button.primary { background: var(--accent); color:#fff; font-weight: 700; }
.sprint-controls button:hover { opacity: 0.85; }

.bar-popover {
  /* `top`/`left` se calculan en JS (togglePopover(), layout.js) relativo
     al botón que lo abre — ya no hay una barra fija abajo de la pantalla
     de la cual colgar un `bottom` fijo (19 ago, ver panel "Enfoque"). */
  position: fixed;
  background: #1b1e27;
  border: 1px solid #2a2e3a;
  border-radius: 12px;
  padding: 16px;
  width: 280px;
  z-index: 80;
  color: #e9e9ee;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.bar-popover label { font-size: 13px; font-weight: 700; display: block; margin-bottom: 6px; }
.popover-hint { font-size: 11px; color: #8b90a0; line-height: 1.5; margin: 0 0 10px; }
.popover-row { display: flex; gap: 8px; }
.popover-field { flex: 1; }
.popover-field label { font-size: 11px; color: #8b90a0; font-weight: 500; margin-bottom: 3px; }
.popover-field input, .bar-popover input[type="text"] {
  width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid #2a2e3a;
  background: #10121a; color: #e9e9ee; font-size: 13px; outline: none;
}
.music-playlists { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.music-playlist-chip {
  background: #10121a; border: 1px solid #2a2e3a; color: #e9e9ee;
  padding: 6px 10px; border-radius: 20px; font-size: 11px; cursor: pointer;
}
.music-playlist-chip:hover { border-color: var(--accent); color: var(--accent); }
.ct-display {
  text-align: center; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
  margin: 12px 0; color: var(--accent);
}
.popover-btn {
  flex: 1; background: transparent; border: 1px solid #2a2e3a; color: #e9e9ee;
  padding: 8px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.popover-btn.primary { background: var(--accent); color:#fff; border-color: var(--accent); }
.popover-btn:hover { opacity: 0.88; }
@media (max-width: 640px) {
  .bar-popover { width: calc(100vw - 20px); left: 10px !important; }
}

/* ---------------- Hub de secciones / Configuración (19 ago v7-v9) ----------------
   Compartido por /menu/menu.html, /menu/account.html, y las 8 pantallas
   de Configuración (Mi horario, Mi cuenta, Mi equipo, Invitaciones,
   Backup, Templates, Admin Panel, Help) — todas envuelven su contenido
   en `.menu-hub` con `#menuHubNav` a la izquierda. Vivía duplicado en el
   <style> de cada página; se centralizó acá para no mantener 3+ copias. */
.menu-hub { display: flex; gap: 28px; align-items: flex-start; }
.menu-hub-nav {
  width: 240px;
  flex-shrink: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 8px;
  position: sticky;
  top: 20px;
}
.menu-hub-page { flex: 1; min-width: 0; } /* wrapper del contenido real de cada pantalla de Configuración, a la derecha de los tabs */

.menu-hub-tabs { display: flex; flex-direction: column; }
.menu-hub-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.menu-hub-tab.tab-section-break { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.menu-hub-tab:hover { background: var(--content-bg); }
.menu-hub-tab.active { background: var(--accent-soft); color: var(--accent-dark); border-left-color: var(--accent); font-weight: 700; }

/* 20 ago v34 — encabezados de grupo en el menú de Configuración (Eli:
   "ponle nombres a los grupos que ya tenemos", referencia TidyCal con
   títulos en mayúsculas tipo SCHEDULING/REVENUE/MARKETING). */
.menu-hub-group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 12px 6px;
  margin-top: 8px;
  border-top: 1px solid var(--card-border);
}
.menu-hub-group-label.first { border-top: none; margin-top: 0; padding-top: 0; }

/* Grid de tarjetas — solo lo usan menu.html/account.html (los hubs de
   directorio); las 8 pantallas de Configuración no lo necesitan porque
   ya muestran su propio contenido real en `.menu-hub-page`. */
.menu-hub-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.menu-hub-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.menu-hub-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.menu-hub-card-icon {
  font-size: 20px;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border-radius: 10px;
}
.menu-hub-card-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.menu-hub-card-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }

@media (max-width: 760px) {
  .menu-hub { flex-direction: column; }
  .menu-hub-nav { width: 100%; position: static; }
}

@media (max-width: 860px) {
  .app-main { padding: 20px; }
  .app-navbar { padding: 10px 16px; gap: 14px; }
  .navbar-group-dropdown { min-width: 180px; }
}
@media (max-width: 640px) {
  .sprint-bar { gap: 8px; padding: 0 10px; overflow-x: auto; }
  .sprint-status { display: none; } /* the free-text status doesn't fit small screens; time + controls still show */
  .sprint-controls button span { display: none; } /* icon-only buttons to save space */
  .metrics-row { grid-template-columns: repeat(2, 1fr); }

  .app-main { padding: 16px; }
  .app-topbar h1 { font-size: 19px; }
  .card { padding: 14px 16px; }

  /* Tables (Dashboard's missions list, etc.) scroll horizontally
     instead of squeezing columns unreadably narrow. */
  table.data-table { display: block; }
  table.data-table thead, table.data-table tbody { display: block; }
  .card:has(table.data-table) { overflow-x: auto; }
  table.data-table tr { display: table; width: 100%; table-layout: fixed; }

  .td-overlay { padding: 0; align-items: stretch; }
  .td-modal { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; padding: 18px 16px; }
  .td-fields-row select, .td-fields-row input { flex: 1 1 100%; max-width: none !important; }
  .td-main-actions { flex-direction: column; }
}

/* ---------------- Task detail modal ---------------- */
.td-overlay {
  position: fixed; inset: 0; background: rgba(20,21,25,0.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; z-index: 900; overflow-y: auto;
  /* 28 ago — appAlert/appConfirm (layout.js) usan este overlay como
     reemplazo del alert()/confirm() nativo del navegador: por diseño
     tienen que quedar SIEMPRE por encima de cualquier otro modal de la
     app (pe-modal-overlay/deal-modal-overlay usan z-index:500), no solo
     por encima del fondo de la página. Antes estaba en 100 y el aviso de
     validación quedaba escondido detrás del modal que lo disparó (ej.
     "Give the pipeline a name." detrás de "Create pipeline"). */
}
.td-modal {
  background: var(--card-bg); border-radius: 14px; width: 100%; max-width: 640px;
  padding: 26px 28px; max-height: calc(100vh - 80px); overflow-y: auto;
}
.td-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.td-title-input {
  flex: 1; font-size: 18px; font-weight: 700; border: none; outline: none; background: none;
  color: var(--ink); padding: 4px 0; border-bottom: 1px solid transparent;
}
.td-title-input:focus { border-bottom: 1px solid var(--accent); }
.td-close-btn { background: none; border: none; font-size: 18px; color: var(--muted); cursor: pointer; line-height: 1; }
.td-close-btn:hover { color: var(--ink); }
.td-description {
  width: 100%; min-height: 60px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--card-border);
  background: var(--input-bg); color: var(--ink); font-size: 13px; outline: none; resize: vertical; font-family: inherit; margin-bottom: 10px;
}
.td-fields-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.td-fields-row select, .td-fields-row input {
  padding: 8px 10px; border-radius: 7px; border: 1px solid var(--card-border);
  background: var(--input-bg); color: var(--ink); font-size: 12px; outline: none;
}
.td-save-btn {
  background: var(--accent); color:#fff; border: none; font-weight: 700;
  padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; margin-bottom: 20px;
}
.td-section-title { font-size: 13px; font-weight: 700; margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.td-subtask-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.td-subtask-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--success); cursor: pointer; flex-shrink: 0; }
.td-subtask-row .st-fraction {
  font-size: 10.5px; font-weight: 700; color: var(--muted); background: #eee; border-radius: 10px;
  padding: 2px 7px; flex-shrink: 0; min-width: 15px; text-align: center;
}
.td-subtask-row .st-title { flex: 1; font-size: 13px; }
.td-subtask-row.st-done .st-title { text-decoration: line-through; color: var(--muted); }
.td-subtask-row .st-actions { display: flex; gap: 2px; flex-shrink: 0; }
.td-subtask-row .st-actions button {
  background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer;
  padding: 4px 6px; border-radius: 6px; line-height: 1;
}
.td-subtask-row .st-actions button:hover { background: var(--accent-soft); color: var(--accent-dark); }
.td-subtask-row .st-actions button[data-action="sprint-subtask"] { color: var(--error); font-weight: 700; }
.td-subtask-row .st-actions button[data-action="sprint-subtask"]:hover { background: rgba(217,83,79,0.1); }
.td-subtask-row .st-actions button[data-action="delete-subtask"]:hover { background: rgba(217,83,79,0.1); color: var(--error); }
.st-menu { margin-bottom: 4px; }
.st-menu button {
  background: none; border: none; color: var(--accent-dark); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 0;
}
.st-menu button:hover { text-decoration: underline; }
.st-add-row { margin-bottom: 6px; }
.st-add-row input {
  width: 100%; max-width: 280px; border: 1px dashed var(--card-border); background: #fafaf7; color: var(--ink);
  font-size: 11.5px; padding: 5px 9px; border-radius: 6px; outline: none; box-sizing: border-box;
}
.st-add-row input::placeholder { color: var(--muted); font-style: italic; }
.st-add-row input:focus { border-color: var(--accent); border-style: solid; background: #fff; }
.st-add-row input:hover { border-color: var(--accent); }
.td-link-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.td-link-row a { color: var(--accent-dark); text-decoration: none; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.td-link-row a:hover { text-decoration: underline; }
.td-link-row button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.td-link-row button:hover { background: rgba(217,83,79,0.1); color: var(--error); }
.td-add-link-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.td-add-link-row input {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--card-border); font-size: 12.5px; outline: none;
}
.td-add-link-row input:focus { border-color: var(--accent); }
.td-add-link-row input#tdLinkName { flex: 0 0 130px; }
.td-add-link-row input#tdLinkUrl { flex: 1; min-width: 160px; }
.td-add-link-row button {
  background: var(--accent); color:#fff; border: none; font-weight: 600; font-size: 12.5px;
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
}
.td-add-subtask-row input {
  flex: 1; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--card-border);
  background: var(--input-bg); color: var(--ink); font-size: 13px; outline: none;
}
.td-add-subtask-row button {
  background: var(--accent); color:#fff; border: none; font-weight: 600; font-size: 12px;
  padding: 0 14px; border-radius: 7px; cursor: pointer;
}
.td-meeting-card { border: 1px solid var(--card-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 12px; }
.td-meeting-card .m-title { font-weight: 600; margin-bottom: 3px; }
.td-meeting-card .m-meta { color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.td-add-meeting-form { display: none; flex-direction: column; gap: 6px; margin-top: 8px; }
.td-add-meeting-form input, .td-add-meeting-form textarea {
  padding: 8px 10px; border-radius: 7px; border: 1px solid var(--card-border);
  background: var(--input-bg); color: var(--ink); font-size: 12px; outline: none; font-family: inherit;
}
.td-empty { color: var(--muted); font-size: 12px; padding: 6px 0; }

/* 3 sep — Modal de detalle para tareas de PROYECTO (no-WYD): reemplaza por
   completo el modal clásico de Win Your Day para cualquier tarea con
   project_id. Layout de dos columnas basado en los modelos que pasó Eli
   (task.html / Project.html) — sin Win Sprints ni timers, con comentarios,
   checklist con barra de avance, y un panel de propiedades a la derecha. */
.ptd-modal { max-width: 920px; padding: 22px 26px; }
.ptd-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.ptd-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ptd-breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.ptd-title-input {
  width: 100%; border: none; outline: none; background: transparent; color: var(--ink);
  font-size: 20px; font-weight: 700; padding: 4px 0; margin-bottom: 14px; border-bottom: 1px solid transparent;
}
.ptd-title-input:focus { border-bottom: 1px solid var(--accent); }
.ptd-body { display: flex; gap: 26px; align-items: flex-start; }
.ptd-col-main { flex: 1; min-width: 0; }
.ptd-col-side {
  width: 250px; flex-shrink: 0; border-left: 1px solid var(--card-border);
  padding-left: 22px; display: flex; flex-direction: column;
}
.ptd-prop-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--muted); margin: 16px 0 6px;
}
.ptd-prop-label:first-child { margin-top: 0; }
.ptd-col-side select, .ptd-col-side input[type="text"], .ptd-col-side input[type="date"], .ptd-col-side input[type="time"] {
  width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--card-border);
  background: var(--input-bg); color: var(--ink); font-size: 13px; box-sizing: border-box; font-family: inherit;
}
.ptd-progress-track { height: 6px; background: var(--card-border); border-radius: 3px; overflow: hidden; margin: 4px 0 12px; }
.ptd-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.2s; }
.ptd-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--card-border); }
@media (max-width: 760px) {
  .ptd-body { flex-direction: column; }
  .ptd-col-side { width: 100%; border-left: none; border-top: 1px solid var(--card-border); padding-left: 0; padding-top: 16px; }
}

.cal-modal { max-width: 480px; }
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cal-nav button { background: none; border: none; color: var(--accent-dark); font-size: 16px; cursor: pointer; padding: 4px 10px; }
.cal-month-label { font-size: 17px; font-weight: 700; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: #f2f3ee; border-radius: 8px; font-size: 13px; cursor: pointer; border: 2px solid transparent;
}
.cal-cell.empty { background: none; cursor: default; }
.cal-cell:hover:not(.empty) { background: #e8e9e2; }
.cal-cell.is-today { border-color: var(--accent); font-weight: 700; }
.cal-cell.selected { background: var(--accent-soft); }
.cal-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--error); }
.cal-count { position: absolute; bottom: 2px; font-size: 9px; color: var(--muted); }
.cal-day-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.cal-day-label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.03em; margin-bottom: 10px; }
.cal-task-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-left: 3px solid var(--error);
  background: #fff; border-radius: 8px; margin-bottom: 6px;
}
.cal-task-row.done { border-left-color: var(--success); opacity: 0.6; }
.cal-task-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--success); cursor: pointer; flex-shrink: 0; }
.cal-task-main { flex: 1; min-width: 0; cursor: pointer; }
.cal-task-title { font-size: 13px; font-weight: 600; }
.cal-task-row.done .cal-task-title { text-decoration: line-through; }
.cal-task-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.cal-sprint-btn { background: var(--error); color: #fff; border: none; font-weight: 700; font-size: 11px; padding: 6px 12px; border-radius: 7px; cursor: pointer; }

/* ---------------- "Log an interruption" modal — shared so it looks right from any page ---------------- */
.li-modal-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.li-modal-hint { font-size: 13px; color: var(--muted); margin-bottom: 18px; line-height: 1.5; }
.li-field-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; display: block; margin-top: 14px; }
.li-modal input, .li-modal textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--card-border);
  font-size: 14px; outline: none; font-family: inherit; box-sizing: border-box;
}
.li-modal input:focus, .li-modal textarea:focus { border-color: var(--accent); }
.li-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.li-modal-actions button {
  border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.li-cancel-btn { background: transparent; border: 1px solid var(--card-border) !important; color: var(--muted); }
.li-save-btn { background: var(--ink); color: #fff; }

.app-dialog { max-width: 380px; text-align: center; }
.app-dialog-message { font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-line; }
.app-dialog-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.app-dialog-input {
  width: 100%; margin-top: 14px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--card-border);
  background: var(--input-bg); color: var(--ink); font-size: 14px; outline: none; box-sizing: border-box;
}

/* ---------------- Guide modal ("🧙 Guíame") ---------------- */
.guide-modal { max-width: 440px; text-align: center; }
.guide-modal-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.guide-step-label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; }
.guide-step-icon { font-size: 34px; margin-bottom: 8px; }
.guide-step-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.guide-step-body { font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.guide-modal-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 8px; }

.td-main-actions { display: flex; gap: 10px; margin-bottom: 6px; }
.td-action-sprint, .td-action-complete {
  flex: 1; border: none; border-radius: 8px; padding: 10px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.td-action-sprint { background: var(--error); color: #fff; }
.td-action-sprint:hover { opacity: 0.88; }
.td-action-complete { background: #4caf7d; color: #fff; }
.td-action-complete.is-reopen { background: transparent; border: 1px solid var(--card-border); color: var(--muted); }
.td-sprint-count-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.td-delete-task-link { background: none; border: none; color: var(--error); font-size: 12px; cursor: pointer; padding: 0; }
.td-delete-task-link:hover { text-decoration: underline; }

.td-attachment-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px;
  background: var(--accent-soft); border: 1px solid var(--card-border); border-radius: 8px;
}
.td-attachment-icon { font-size: 18px; flex-shrink: 0; }
.td-attachment-info { flex: 1; min-width: 0; }
.td-attachment-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.td-attachment-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.td-attachment-actions a { color: var(--accent-dark); text-decoration: none; font-size: 12px; font-weight: 600; }
.td-attachment-actions a:hover { text-decoration: underline; }
.td-attachment-actions button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0; }
.td-attachment-actions button:hover { color: var(--error); }

.attachment-preview-body { max-height: 70vh; overflow: auto; text-align: center; background: #f2f3ee; border-radius: 10px; }
.attachment-preview-body img { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }
.attachment-preview-body iframe { width: 100%; height: 70vh; border: none; }

/* ---- Day recap card — fixed brand colors (Coach of Action navy/coral),
   never CSS variables: html2canvas silently fails on linear-gradient
   declarations that use custom properties, and this card must always
   look the same regardless of the app's light/dark theme, since it's
   meant to be shared outside the app. Lives here (not just in
   stats.html's own <style>) so openDayRecapModal() renders correctly
   no matter which page it's opened from — e.g. the sidebar's
   "End my day" button. ---- */
.day-recap-card {
  width: 100%; box-sizing: border-box; padding: 32px 24px;
  background: #334172; color: #fff; border-radius: 18px; text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.drc-brand { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.drc-brand .drc-accent { color: #F87144; }
.drc-date { font-size: 12px; color: #c7cce0; text-transform: capitalize; margin-bottom: 24px; }
.drc-hero-value { font-size: 46px; font-weight: 800; line-height: 1; }
.drc-hero-label { font-size: 13px; color: #c7cce0; margin-top: 4px; margin-bottom: 24px; }
.drc-stats-row { display: flex; justify-content: space-around; margin-bottom: 24px; }
.drc-stat-value { font-size: 18px; font-weight: 700; }
.drc-stat-label { font-size: 11px; color: #c7cce0; margin-top: 2px; }
.drc-goal-track { height: 8px; border-radius: 20px; background: #4a578e; overflow: hidden; margin-bottom: 6px; }
.drc-goal-fill { height: 100%; background: #F87144; border-radius: 20px; }
.drc-goal-label { font-size: 11px; color: #c7cce0; margin-bottom: 20px; }
.drc-message { font-size: 14px; font-weight: 600; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.15); }