/* ============================================================
   THEME v1 — Sistema de diseño de la App Gestión (núcleo)
   Referencias: dashboards SaaS limpios (lienzo gris claro, tarjetas
   blancas redondeadas con borde fino, etiquetas en mayúsculas pequeñas,
   cifras grandes, iconos en baldosa suave, píldoras de estado, botones
   sobrios). Marca 2026: Inter · tinta #0a141c (acción) + verde #3cc1a0 (realce) · gris #f5f5f7.
   Orden de carga: <style> index.html → shell.css → theme.css →
   theme-parts/*.css (módulos) → mobile.css.
   ============================================================ */

:root {
  /* Superficies */
  --canvas: #f5f5f7;          /* lienzo de la página */
  --card: #ffffff;            /* tarjetas y paneles */
  --card-soft: #F7F8FA;       /* zonas internas suaves (cabeceras de tabla, celdas kpi) */
  --line: #E3E6EC;            /* borde estándar */
  --line-soft: #EEF0F4;       /* separadores internos */
  --line-strong: #CDD2DC;

  --bg-subtle: #F7F8FA;
  --bg-hover: #EDEFF3;
  --bg-folder: #F0F2F6;
  --bg-folder-hover: #E7EAF0;
  --border: var(--line);
  --border-strong: var(--line-strong);

  /* Radios */
  --r-xs: 4px;
  --r-sm: 5px;
  --r-md: 5px;
  --r-lg: 5px;
  --r-xl: 6px;
  --r-pill: 999px;
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --radius-lg: var(--r-lg);

  /* Sombras (muy suaves: el borde manda, la sombra solo despega) */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 10px 30px rgba(10, 20, 28, 0.10);
  --shadow-pop: 0 10px 30px rgba(10, 20, 28, 0.12);
  --shadow-panel: -8px 0 24px rgba(10, 20, 28, 0.06);
  --shadow-card: none;
  --ring: 0 0 0 3px rgba(58, 90, 168, 0.18);

  /* Controles */
  --h-ctl: 36px;
  --h-ctl-sm: 30px;
  --fs-ctl: 13px;

  /* Semánticos (texto sobre fondo suave) */
  --ok: #15803D;        --ok-soft: #E7F3EA;      --ok-line: #C6E3CF;
  --warn: #B45309;      --warn-soft: #FBF0E2;    --warn-line: #EDD4AE;
  --bad: #B4232A;       --bad-soft: #FBE9E9;     --bad-line: #EFC7C8;
  --info: #3A5AA8;      --info-soft: #E9EDF7;    --info-line: #C6D0E8;
  --violet: #5B4BB0;    --violet-soft: #ECEAF7;
  --pink: #A3306B;      --pink-soft: #F8EAF1;
  --cyan: #16697A;      --cyan-soft: #E4F1F4;
  --gray: #545B69;      --gray-soft: #EDEFF3;

  --accent-green: #15803D;  --accent-green-soft: #E7F3EA;
  --accent-red: #B4232A;    --accent-red-soft: #FBE9E9;
  --accent-orange: #B45309; --accent-orange-soft: #FBF0E2;
  --accent-purple: #5B4BB0; --accent-purple-soft: #ECEAF7;
  --accent-pink: #A3306B;   --accent-pink-soft: #F8EAF1;
  --accent-cyan: #16697A;   --accent-cyan-soft: #E4F1F4;

  /* Tipografía */
  --fs-label: 10px;     /* etiquetas en mayúsculas (van en mono) */
  --ls-label: .09em;
  --fs-title: 24px;     /* título de página */
  --fs-h2: 15px;        /* título de tarjeta/sección */
  --fs-big: 27px;       /* cifra grande de KPI */
}

/* ---------- Scroll quieto al editar (09-10-2026) ----------
   Las vistas se repintan enteras con cada cambio. El «anclaje del scroll»
   del navegador intenta seguir un trozo de lo que había, no lo encuentra y
   mueve la página (en Contabilidad subía 300 px con cada cambio; en el
   Resumen, 260). Apagado en toda la app: el scroll se queda donde estaba. */
*, *::before, *::after { overflow-anchor: none; }

/* ---------- Lienzo ---------- */
.content { background: var(--canvas); }
.content.scroll-y { scrollbar-gutter: stable; }
.content::-webkit-scrollbar { width: 10px; height: 10px; }
.content::-webkit-scrollbar-thumb { background: #cfd8d5; border: 3px solid var(--canvas); border-radius: 5px; }
.content::-webkit-scrollbar-thumb:hover { background: #b9c5c1; }
.content::-webkit-scrollbar-track { background: transparent; }

/* ---------- Utilidades del sistema (las usan los módulos) ---------- */
.t-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.t-label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-muted);
}
.t-big { font-size: var(--fs-big); font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.1; }
.t-tile {
  width: 36px; height: 36px; border-radius: var(--r-md); display: inline-grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); flex-shrink: 0;
}
.t-tile svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Botones genéricos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--h-ctl); padding: 0 14px; border-radius: var(--r-md);
  font-size: var(--fs-ctl); font-weight: 600; font-family: inherit; line-height: 1;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-xs);
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .08s;
}
.btn:hover { background: var(--bg-subtle); border-color: var(--line-strong); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn svg, .btn .icon { width: 15px; height: 15px; }
.btn.btn-primary, .btn.primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: none;
}
.btn.btn-primary:hover, .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.btn-secondary { background: var(--card); }
.btn.danger { color: var(--bad); border-color: var(--bad-line); background: #fff; }
.btn.danger:hover { background: var(--bad-soft); }
.btn.lg { height: 40px; padding: 0 18px; font-size: 14px; }
.btn.mini, .btn.sm { height: var(--h-ctl-sm); padding: 0 10px; font-size: 12px; border-radius: var(--r-sm); }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; }
.icon-btn { border-radius: var(--r-sm); }
.icon-btn:hover { background: var(--bg-hover); }

/* ---------- Campos genéricos ---------- */
.form-input, .form-select, .form-textarea,
.settings-field input, .settings-field select, .settings-field textarea {
  width: 100%; height: var(--h-ctl); padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  font: inherit; font-size: var(--fs-ctl); color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.form-textarea, .settings-field textarea { height: auto; padding: 10px 12px; line-height: 1.45; }
.form-input:hover, .form-select:hover { border-color: var(--line-strong); }
.form-input:focus, .form-select:focus, .form-textarea:focus,
.settings-field input:focus, .settings-field select:focus, .settings-field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
.form-input::placeholder { color: var(--text-faint); }
.form-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px;
}
.form-group { margin-bottom: 14px; }
/* Selects nativos: flecha propia y sin relieve */
select.form-select, .settings-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237f8f91' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;
}

/* ---------- Píldoras / chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: nowrap;
  border: 1px solid transparent;
}
.pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; flex-shrink: 0;
}
.pill-status-done     { background: var(--ok-soft);   color: var(--ok); }
.pill-status-progress { background: var(--info-soft); color: var(--info); }
.pill-status-review   { background: var(--violet-soft); color: var(--violet); }
.pill-status-blocked  { background: var(--bad-soft);  color: var(--bad); }
.pill-status-todo     { background: var(--gray-soft); color: var(--gray); }
.pill-priority-high   { background: var(--bad-soft);  color: var(--bad); }
.pill-priority-med    { background: var(--warn-soft); color: var(--warn); }
.pill-priority-low    { background: var(--ok-soft);   color: var(--ok); }
/* Tipos de fila: color por tipo con fondo suave (sin punto: ya llevan icono) */
.pill-folder, .pill-goal, .pill-objective, .pill-strategy, .pill-task, .pill-other,
.pill-lead, .pill-cliente, .pill-servicio, .pill-proyecto, .pill-captacion { gap: 5px; }
.pill-folder::before, .pill-goal::before, .pill-objective::before, .pill-strategy::before, .pill-task::before,
.pill-other::before, .pill-lead::before, .pill-cliente::before, .pill-servicio::before, .pill-proyecto::before,
.pill-captacion::before { display: none; }

/* ---------- Modales ---------- */
.modal-overlay {
  background: rgba(17, 30, 33, 0.42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.modal, .modal-box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.modal-header { padding: 20px 24px 0; border-bottom: 0; }
.modal-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.modal-body { padding: 16px 24px 20px; }
.modal-footer {
  padding: 14px 24px 18px; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: flex-end; gap: 8px; background: var(--card-soft);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* Confirmación (cnf-*) y candado de vista */
.cnf-box, .view-locked-modal, .acct-gate-modal {
  border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.cnf-overlay, .view-locked-overlay, .acct-gate-overlay { background: rgba(17, 30, 33, 0.42); backdrop-filter: blur(2px); }

/* ---------- Menús contextuales / desplegables ---------- */
.context-menu, #projectMenu, .dropdown, .inline-dropdown, .ms-dropdown, .date-picker {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); padding: 6px;
}
.context-item, .dropdown-item {
  border-radius: var(--r-sm); padding: 8px 10px; font-size: 13px; font-weight: 500; color: var(--text);
  display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.context-item:hover, .dropdown-item:hover { background: var(--bg-hover); }
.context-item.danger, .dropdown-item.danger { color: var(--bad); }
.context-item.danger:hover { background: var(--bad-soft); }
.context-divider { height: 1px; background: var(--line-soft); margin: 6px 4px; }
.context-header {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-faint); padding: 8px 10px 4px;
}
.context-shortcut { margin-left: auto; font-size: 11px; color: var(--text-faint); }

/* ---------- Toasts ---------- */
.toast {
  background: #142b2f; color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  font-size: 13px; font-weight: 500; padding: 11px 16px; border: 1px solid rgba(255, 255, 255, .06);
}
.toast.toast-error { background: #7f1d1d; }
.toast.success { background: #0f5132; }

/* ---------- Cabecera de página (patrón común) ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-title { font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.2; }
.page-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }

/* ---------- Tabla base (data-table) ---------- */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.data-table th {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-muted); background: var(--card-soft); padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.data-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); color: var(--text); vertical-align: middle; }
.data-table tbody tr:hover td { background: var(--bg-subtle); }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Checkbox / progreso ---------- */
.progress-track { background: var(--line-soft); border-radius: var(--r-pill); height: 6px; overflow: hidden; }
.progress-fill { background: var(--primary); border-radius: var(--r-pill); }
.progress-text { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }

/* ---------- Estados vacíos ---------- */
.tabla-vacia, .crm-empty-state, .templates-empty, .planner-empty, .gantt-empty {
  color: var(--text-muted); font-size: 13px;
}

/* ---------- Iframe Equipo IA ---------- */
#agentesFrame { background: var(--canvas) !important; }

/* ---------- Scrollbars finos en paneles internos ---------- */
.notes-panel::-webkit-scrollbar, .sidebar-body::-webkit-scrollbar, .crm-board::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar { width: 8px; height: 8px; }
.notes-panel::-webkit-scrollbar-thumb, .crm-board::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb { background: #d3dbd8; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }