/* ============================================================
   AquaOrb Gestor — Liquid Glass Design System
   Tipografía: Poppins · Estilo: Apple minimalista / liquid glass
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Marca */
  --brand: #1C9BE8;
  --brand-2: #0A6FD6;
  --brand-3: #55C7F2;
  --brand-deep: #084A9E;

  /* Estados */
  --ok: #22C55E;
  --warn: #F59E0B;
  --danger: #EF4444;
  --purple: #8B5CF6;

  /* Superficies liquid glass */
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-soft: rgba(255, 255, 255, 0.42);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-line: rgba(9, 74, 158, 0.09);

  /* Texto */
  --ink: #0B2239;
  --ink-2: #3A5670;
  --ink-3: #7C93A8;

  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 30px;
  --shadow: 0 4px 24px rgba(10, 60, 130, 0.08), 0 1px 3px rgba(10, 40, 80, 0.04);
  --shadow-soft: 0 4px 16px rgba(10, 111, 214, 0.08);
  --shadow-hover: 0 12px 40px rgba(10, 111, 214, 0.16);

  --sidebar-w: 264px;

  /* Superficies sólidas / translúcidas (en modo oscuro cambian; ver html[data-theme="dark"] al final) */
  --surface: #ffffff;
  --surface-2: #f6faff;
  --line-2: #D5E5F4;
  --track: #DDEBF7;
  --w50: rgba(255,255,255,.5); --w55: rgba(255,255,255,.55); --w60: rgba(255,255,255,.6); --w70: rgba(255,255,255,.7);
  --w75: rgba(255,255,255,.75); --w90: rgba(255,255,255,.9); --w92: rgba(255,255,255,.92);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fondo acuático animado */
body {
  background:
    radial-gradient(1200px 800px at 12% -5%, #eaf5ff 0%, transparent 55%),
    radial-gradient(1000px 700px at 105% 10%, #e2f0fe 0%, transparent 50%),
    radial-gradient(900px 900px at 50% 120%, #eef7ff 0%, transparent 60%),
    linear-gradient(160deg, #f3f9ff 0%, #e8f3fd 45%, #f1f8ff 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
}
body::before {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(85,199,242,0.6), transparent 70%);
  top: -160px; right: -120px;
  animation: float1 16s ease-in-out infinite;
}
body::after {
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(28,155,232,0.45), transparent 70%);
  bottom: -160px; left: -100px;
  animation: float2 20s ease-in-out infinite;
}
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,50px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,-40px)} }

/* ---------- utilidades glass ---------- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
}
.glass-soft {
  background: var(--glass-soft);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.5);
}

.hidden { display: none !important; }

/* tamaño base de iconos (las reglas por contexto lo sobrescriben por especificidad) */
svg { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }

/* tamaños de iconos por contexto */
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-sm svg { width: 15px; height: 15px; }
.chip svg { width: 13px; height: 13px; }
.kpi .icon svg { width: 21px; height: 21px; }
.ti { display: grid; place-items: center; }
.ti svg { width: 15px; height: 15px; }
.tl-dot svg { width: 10px; height: 10px; color:#fff; }
.modal-close svg, .logout svg { width: 18px; height: 18px; }
.menu-btn svg { width: 20px; height: 20px; }
.oppo-card > svg { width: 18px; height: 18px; color: var(--ink-3); flex-shrink:0; }
.pf-success .check svg { width: 34px; height: 34px; }
.panel-head .ti svg { width: 16px; height: 16px; }
.sb-logo svg, h3 .ti svg { width:16px; height:16px; }

/* ============================================================
   LOGIN
   ============================================================ */
.auth-wrap {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
}
.auth-card {
  width: 100%; max-width: 420px;
  border-radius: var(--radius-lg);
  padding: 40px 36px 34px;
  text-align: center;
  animation: rise .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes rise { from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)} }
.auth-logo { width: 150px; margin: 0 auto 6px; display:block; }
.auth-card h1 { font-size: 20px; font-weight: 700; letter-spacing:-.3px; }
.auth-card .sub { color: var(--ink-3); font-size: 13.5px; margin-top: 4px; margin-bottom: 26px; font-weight: 400;}

.field { text-align: left; margin-bottom: 16px; }
.field label { display:block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 0 0 7px 4px; }
.input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-line);
  background: var(--w60);
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  transition: .2s;
  outline: none;
}
.input::placeholder { color: var(--ink-3); }
.input:focus {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(28,155,232,0.16);
}

.btn {
  font-family: inherit; font-weight: 600; font-size: 14.5px;
  border: none; cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 14px 22px;
  transition: .2s cubic-bezier(.2,.8,.2,1);
  display: inline-flex; align-items:center; justify-content:center; gap: 8px;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-3), var(--brand) 40%, var(--brand-2));
  box-shadow: 0 8px 24px rgba(10,111,214,0.35);
  width: 100%;
}
.btn-primary.btn-sm, .btn-primary.btn-icon { width: auto; }   /* los botones pequeños no se estiran (en tablas desbordaban la fila) */
.btn-primary:hover { box-shadow: 0 12px 32px rgba(10,111,214,0.5); transform: translateY(-1px); }
.btn-ghost {
  background: var(--w50);
  border: 1px solid var(--glass-line);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--surface); }
.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: 11px; }
.btn-danger { color:#fff; background: linear-gradient(135deg,#f87171,var(--danger)); }
.btn-block { width: 100%; }

.auth-hint {
  margin-top: 22px; font-size: 11.5px; color: var(--ink-3);
  line-height: 1.7; padding-top: 16px; border-top: 1px solid var(--glass-line);
}
.auth-hint b { color: var(--ink-2); }
.auth-error {
  color: var(--danger); font-size: 12.5px; font-weight: 500;
  margin-top: -6px; margin-bottom: 14px; min-height: 16px;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app { position: relative; z-index: 2; display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  padding: 22px 16px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow: hidden;   /* el que se desplaza es .nav; logo y usuario quedan fijos */
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  border-left: none;
  margin: 0;
}
.sb-logo { display:flex; align-items:center; gap:10px; padding: 6px 10px 20px; flex-shrink: 0; }
.sb-logo img { width: 118px; }
.sb-role {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  font-weight: 700; color: var(--brand-2);
  background: rgba(28,155,232,0.12);
  padding: 3px 9px; border-radius: 8px; margin-left: 2px;
}
.nav { display:flex; flex-direction:column; gap:4px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(124,147,168,.45) transparent; }
.nav::-webkit-scrollbar { width: 6px; } .nav::-webkit-scrollbar-thumb { background: rgba(124,147,168,.4); border-radius: 6px; } .nav::-webkit-scrollbar-thumb:hover { background: rgba(124,147,168,.65); }
.nav-item {
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px; border-radius: 13px;
  color: var(--ink-2); font-weight: 500; font-size: 14px;
  cursor: pointer; transition: .18s; border: 1px solid transparent;
}
.nav-item svg { width: 19px; height: 19px; flex-shrink:0; opacity:.85; }
.nav-item:hover { background: var(--w55); color: var(--ink); }
.nav-item.active {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff; font-weight: 600;
  box-shadow: 0 8px 20px rgba(10,111,214,0.28);
  border-color: rgba(255,255,255,.25);
}
.nav-item.active svg { opacity: 1; }
.nav-badge { margin-left:auto; font-size:11px; font-weight:700; background:rgba(255,255,255,.35); padding:1px 8px; border-radius:20px; }
.nav-item.active .nav-badge { background: rgba(255,255,255,.28); }

.sb-user {
  display:flex; align-items:center; gap:11px;
  padding: 12px; border-radius: 15px; margin-top: 10px; flex-shrink: 0;
  background: var(--w50); border:1px solid var(--glass-line);
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px;
  background: linear-gradient(135deg, var(--brand-3), var(--brand-2));
  flex-shrink:0;
}
.sb-user .meta { line-height: 1.25; overflow:hidden; }
.sb-user .meta b { font-size: 13px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user .meta span { font-size: 11px; color: var(--ink-3); }
.sb-user .avatar { position:relative; }
.g-dot { position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%; background:#22C55E; border:2px solid #fff; }
.sb-user .logout { margin-left:auto; cursor:pointer; color:var(--ink-3); display:grid; place-items:center; }
.sb-user .logout:hover { color: var(--danger); }

/* ---------- main ---------- */
.main { flex: 1; padding: 28px 34px 60px; min-width: 0; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.topbar h2 { font-size: 25px; font-weight: 700; letter-spacing: -.5px; }
.topbar .crumb { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-top: 2px; }
.topbar-actions { display:flex; gap:10px; align-items:center; flex-wrap: wrap; }

/* ---------- KPI cards ---------- */
.kpi-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 16px; margin-bottom: 22px; }
.kpi {
  border-radius: var(--radius);
  padding: 20px 22px;
  position: relative; overflow: hidden;
  transition: .25s;
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.kpi .icon {
  width: 42px; height: 42px; border-radius: 13px; display:grid; place-items:center;
  color:#fff; margin-bottom: 14px;
}
.kpi .val { font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height:1; }
.kpi .lbl { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; font-weight: 500; }
.kpi .trend { position:absolute; top:20px; right:22px; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:20px; }
.trend.up { color: var(--ok); background: rgba(34,197,94,.12); }
.trend.down { color: var(--danger); background: rgba(239,68,68,.12); }

.bg-brand { background: linear-gradient(135deg, var(--brand-3), var(--brand-2)); }
.bg-ok { background: linear-gradient(135deg, #4ade80, var(--ok)); }
.bg-warn { background: linear-gradient(135deg, #fbbf24, var(--warn)); }
.bg-purple { background: linear-gradient(135deg, #a78bfa, var(--purple)); }
.bg-danger { background: linear-gradient(135deg, #f87171, var(--danger)); }

/* ---------- cards / panels ---------- */
.panel { border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap;}
.panel-head h3 { font-size: 16.5px; font-weight: 650; letter-spacing:-.2px; }
.panel-head .hint { font-size:12px; color:var(--ink-3); }

.grid-2 { display:grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items:start; }
@media (max-width: 1080px){ .grid-2 { grid-template-columns: 1fr; } }

/* ---------- tabla ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; }
th {
  text-align: left; font-weight: 600; color: var(--ink-3); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .5px; padding: 10px 14px;
  border-bottom: 1px solid var(--glass-line);
}
td { padding: 13px 14px; border-bottom: 1px solid rgba(9,74,158,0.06); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: .15s; cursor: pointer; }
tbody tr:hover { background: var(--w50); }

.cell-name { font-weight: 600; color: var(--ink); }
.cell-sub { font-size: 11.5px; color: var(--ink-3); }

/* ---------- chips / badges ---------- */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 8px;
  white-space: nowrap; letter-spacing: .1px;
}
.chip .dot { width:7px; height:7px; border-radius:50%; }
.chip-blue { color: var(--brand-2); background: rgba(28,155,232,.13); }
.chip-green { color: #16a34a; background: rgba(34,197,94,.14); }
.chip-amber { color: #b45309; background: rgba(245,158,11,.16); }
.chip-red { color: #dc2626; background: rgba(239,68,68,.13); }
.chip-purple { color: #7c3aed; background: rgba(139,92,246,.14); }
.chip-gray { color: var(--ink-2); background: rgba(124,147,168,.16); }

.src-badge { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; }
.src-badge svg { width:15px; height:15px; }

/* ---------- pipeline / kanban ---------- */
.pipeline { display:grid; grid-auto-flow: column; grid-auto-columns: minmax(255px, 1fr); gap:16px; overflow-x:auto; padding-bottom: 12px; }
.pipe-col { border-radius: var(--radius); padding: 14px; min-height: 200px; }
.pipe-col-head { display:flex; align-items:center; gap:8px; margin-bottom: 14px; padding: 0 4px; }
.pipe-col-head .bar { width: 26px; height: 4px; border-radius: 3px; }
.pipe-col-head h4 { font-size: 13px; font-weight: 650; }
.pipe-col-head .count { margin-left:auto; font-size:12px; font-weight:700; color:var(--ink-3); background:var(--w60); padding:1px 9px; border-radius:20px; }
.lead-card {
  background: var(--w70);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 13px 14px; margin-bottom: 10px; cursor: pointer;
  transition: .2s; box-shadow: 0 2px 10px rgba(10,40,80,.05);
}
.lead-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--brand-3); }
.lead-card .lc-name { font-weight: 650; font-size: 13.5px; margin-bottom: 3px; }
.lead-card .lc-meta { font-size: 11.5px; color: var(--ink-3); display:flex; align-items:center; gap: 6px; flex-wrap:wrap; }
.lead-card .lc-foot { display:flex; align-items:center; justify-content:space-between; margin-top: 10px; }
.lead-card .lc-val { font-weight: 700; font-size: 13px; color: var(--brand-2); }

/* ---------- progress / bars ---------- */
.bar-row { display:flex; align-items:center; gap:12px; margin-bottom: 14px; }
.bar-row .bl { width: 130px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); flex-shrink:0; }
.bar-track { flex:1; height: 10px; border-radius: 20px; background: rgba(9,74,158,.08); overflow:hidden; }
.bar-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--brand-3), var(--brand-2)); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.bar-row .bv { width: 42px; text-align:right; font-size: 12.5px; font-weight: 700; }

/* ---------- timeline / trazabilidad ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content:""; position:absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--brand-3), rgba(28,155,232,.15)); }
.tl-item { position: relative; padding-bottom: 20px; }
.tl-item:last-child { padding-bottom: 4px; }
.tl-dot { position:absolute; left: -26px; top: 2px; width: 18px; height: 18px; border-radius:50%; background:var(--surface); border: 3px solid var(--brand); display:grid; place-items:center; }
.tl-dot.done { background: var(--brand); }
.tl-item .tl-title { font-weight: 600; font-size: 13.5px; }
.tl-item .tl-time { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.tl-item .tl-note { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; background: var(--w50); padding: 8px 11px; border-radius: 10px; }

/* ---------- switch (liquid) ---------- */
.switch { position: relative; display:inline-block; width: 46px; height: 27px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.switch .track {
  position:absolute; inset:0; border-radius: 20px; cursor:pointer;
  background: rgba(124,147,168,.3); transition: .3s;
  backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.4);
}
.switch .track::before {
  content:""; position:absolute; height: 21px; width: 21px; left: 3px; top: 2px;
  border-radius: 50%; background: #fff; transition: .3s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.switch input:checked + .track { background: linear-gradient(135deg, var(--brand-3), var(--brand-2)); }
.switch input:checked + .track::before { transform: translateX(19px); }

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;   /* por encima del editor de propuestas (400) */
  background: rgba(9,40,70,0.28);
  backdrop-filter: blur(8px);
  display:grid; place-items:center; padding: 24px;
  animation: fade .2s;
}
@keyframes fade { from{opacity:0} to{opacity:1} }
.modal {
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  border-radius: var(--radius-lg); padding: 28px 30px;
  animation: rise .35s cubic-bezier(.2,.8,.2,1);
}
.modal.wide { max-width: 720px; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom: 22px; }
.modal-head h3 { font-size: 20px; font-weight: 700; letter-spacing:-.4px; }
.modal-head .mh-sub { font-size: 12.5px; color: var(--ink-3); margin-top:2px; }
.modal-close { cursor:pointer; color: var(--ink-3); width:30px;height:30px; display:grid;place-items:center; border-radius:10px; }
.modal-close:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.modal-foot { display:flex; gap: 10px; justify-content:flex-end; margin-top: 24px; }

.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
select.input { appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C93A8' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 16px center; padding-right: 40px; }
textarea.input { resize: vertical; min-height: 78px; }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; bottom: 26px; right: 26px; z-index: 200; display:flex; flex-direction:column; gap:10px; }
.toast {
  background: var(--w90); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border); border-radius: 15px;
  padding: 13px 18px; box-shadow: var(--shadow); font-size: 13.5px; font-weight: 500;
  display:flex; align-items:center; gap:11px; min-width: 260px;
  animation: toastIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes toastIn { from{opacity:0; transform: translateX(40px)} to{opacity:1; transform:translateX(0)} }
.toast .ti { width:22px;height:22px; border-radius:7px; display:grid;place-items:center; color:#fff; flex-shrink:0; }

/* ---------- misc ---------- */
.empty { text-align:center; padding: 40px 20px; color: var(--ink-3); }
.empty svg { width: 46px; height: 46px; opacity:.4; margin-bottom: 12px; }
.empty p { font-size: 13.5px; }
.search {
  position: relative; display:flex; align-items:center;
}
.search svg { position:absolute; left: 13px; width:16px; height:16px; color: var(--ink-3); }
.search input { padding-left: 38px; min-width: 240px; }

.donut-wrap { display:flex; align-items:center; gap: 26px; }
.legend { display:flex; flex-direction:column; gap: 11px; }
.legend-item { display:flex; align-items:center; gap:9px; font-size: 12.5px; }
.legend-item .sw { width:11px; height:11px; border-radius:4px; }
.legend-item b { margin-left:auto; }

.tag-mini { font-size: 10.5px; font-weight:600; padding:2px 7px; border-radius:6px; background: rgba(28,155,232,.1); color: var(--brand-2); }

.oppo-card {
  border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 12px;
  background: var(--w60); border:1px solid var(--glass-border);
  display:flex; align-items:center; gap: 14px; flex-wrap: wrap;
}
.oppo-card .oc-body { flex:1 1 150px; min-width: 150px; }
.oppo-card .btn { flex-shrink: 0; }
.oppo-card .oc-body b { font-size:14px; }
.oppo-card .oc-body p { font-size:12.5px; color:var(--ink-2); margin-top:3px; }
.oppo-card .oc-body .sugg { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }

.detail-head { display:flex; align-items:center; gap:16px; margin-bottom: 20px; }
.detail-head .avatar { width: 52px; height: 52px; font-size:18px; }
.detail-head h3 { font-size: 20px; font-weight: 700; }
.detail-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 18px 0; }
.dg-item .k { font-size:11px; color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.dg-item .v { font-size:14px; font-weight:500; margin-top:2px; }

.stage-actions { display:flex; gap:8px; flex-wrap:wrap; margin: 12px 0 6px; }
.stage-interp { font-size:13px; color:var(--ink-2); line-height:1.6; background:rgba(28,155,232,.07); border:1px solid rgba(28,155,232,.18); border-radius:12px; padding:11px 14px; margin-bottom:4px; }

hr.sep { border:none; border-top:1px solid var(--glass-line); margin: 18px 0; }

/* puerta de requisitos (criterios de etapa) */
.crit-list { display:flex; flex-direction:column; gap:9px; }
.crit { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:13px; border:1px solid var(--glass-line); background:var(--w50); cursor:default; }
.crit b { font-size:13.5px; }
.crit .crit-check { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; color:#fff; }
.crit.ok .crit-check { background:#22C55E; }
.crit.no .crit-check { background:#F59E0B; }
.crit.no { opacity:.85; }
.crit.manual { cursor:pointer; }
.crit.manual input { width:20px; height:20px; margin-top:1px; accent-color:var(--brand); flex-shrink:0; cursor:pointer; }

/* bandeja whatsapp */
.inbox-row { display:flex; align-items:flex-start; gap:14px; padding:15px 16px; border-radius: var(--radius-sm); background: var(--w55); border:1px solid var(--glass-border); margin-bottom:11px; }
.ib-avatar { width:42px; height:42px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; color:#fff; background: linear-gradient(135deg,#4ade80,#22C55E); }
.ib-avatar svg { width:20px; height:20px; }
.ib-body { flex:1; min-width:0; }
.ib-head { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:14px; }
.ib-msg { font-size:13.5px; color:var(--ink-2); margin-top:5px; font-style:italic; }
.ib-actions { display:flex; flex-direction:column; gap:7px; flex-shrink:0; align-items:flex-end; }
@media (max-width:640px){ .inbox-row { flex-wrap:wrap; } .ib-actions { flex-direction:row; width:100%; } }

.section-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-3); margin-bottom:12px; }

/* pill selector */
.pill-row { display:flex; gap:8px; flex-wrap:wrap; }
.pill {
  padding: 8px 15px; border-radius: 20px; font-size: 13px; font-weight: 500;
  background: var(--w50); border:1px solid var(--glass-line); cursor:pointer; transition:.18s;
}
.pill:hover { background:var(--surface); }
.pill.active { background: linear-gradient(135deg,var(--brand-3),var(--brand-2)); color:#fff; border-color:transparent; font-weight:600; }

/* responsive */
@media (max-width: 860px){
  .sidebar { position: fixed; left: -300px; z-index: 50; transition: left .3s; }
  .sidebar.open { left: 0; }
  .main { padding: 20px 18px 50px; }
  .menu-btn { display:grid !important; }
  .form-grid { grid-template-columns: 1fr; }
}
.menu-btn { display:none; width:42px;height:42px; border-radius:13px; place-items:center; cursor:pointer; }

/* public form */
.pf-wrap { position:relative; z-index:2; min-height:100vh; display:grid; place-items:center; padding:24px; }
.pf-card { width:100%; max-width: 520px; border-radius: var(--radius-lg); padding: 38px 36px; animation: rise .5s; }
.pf-card .pf-logo { width: 140px; display:block; margin: 0 auto 20px; }
.pf-card h1 { text-align:center; font-size: 22px; font-weight:700; }
.pf-card .pf-sub { text-align:center; color:var(--ink-3); font-size:13.5px; margin: 6px 0 26px; }
.pf-success { text-align:center; padding: 20px 0; }
.pf-success .check { width:76px;height:76px;border-radius:50%; margin:0 auto 18px; background:linear-gradient(135deg,#4ade80,var(--ok)); display:grid;place-items:center; color:#fff; animation: pop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from{transform:scale(0)} to{transform:scale(1)} }

/* ============================================================
   BANDEJA DE CHATS DE WHATSAPP (estilo WhatsApp Web)
   ============================================================ */
.chat {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 14px;
  height: calc(100vh - 150px);
  min-height: 460px;
}

/* ---- Lista de conversaciones ---- */
.chat-list { display:flex; flex-direction:column; border-radius: var(--radius-sm); overflow:hidden; padding:0; }
.chat-search { display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--glass-line); }
.chat-search svg { width:17px; height:17px; color:var(--ink-3); flex-shrink:0; }
.chat-search .input { border:none; background:transparent; padding:4px 0; box-shadow:none; }
.chat-tabs { display:flex; gap:5px; padding:10px 12px; border-bottom:1px solid var(--glass-line); overflow-x:auto; }
.chat-tab { font-size:12px; font-weight:600; padding:6px 12px; border-radius:16px; border:1px solid var(--glass-line); background:var(--w50); color:var(--ink-2); cursor:pointer; white-space:nowrap; transition:.15s; }
.chat-tab.active { background:linear-gradient(135deg,var(--brand-3),var(--brand-2)); color:#fff; border-color:transparent; }
.chat-items { flex:1; overflow-y:auto; padding:6px; }

.conv-item { display:flex; gap:11px; padding:11px 12px; border-radius:13px; cursor:pointer; transition:.15s; border:1px solid transparent; }
.conv-item:hover { background:var(--w60); }
.conv-item.active { background:rgba(28,155,232,.12); border-color:rgba(28,155,232,.25); }
.conv-item.unread .conv-prev { color:var(--ink); font-weight:600; }
.conv-avatar { width:44px; height:44px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#4ade80,#22C55E); }
.conv-avatar svg { width:21px; height:21px; }
.conv-avatar.lg { width:42px; height:42px; }
.conv-body { flex:1; min-width:0; }
.conv-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.conv-top b { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-time { font-size:11px; color:var(--ink-3); flex-shrink:0; }
.conv-bottom { display:flex; align-items:center; gap:6px; margin-top:2px; }
.conv-prev { font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.conv-dot { width:9px; height:9px; border-radius:50%; background:var(--ok); flex-shrink:0; }
.conv-tagline { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.conv-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:12px; text-transform:uppercase; letter-spacing:.3px; }
.conv-badge.amber { background:rgba(245,158,11,.16); color:#b45309; }
.conv-badge.gray { background:rgba(124,147,168,.18); color:var(--ink-3); }
.conv-badge.blue { background:rgba(28,155,232,.14); color:var(--brand-2); }

/* ---- Panel de la conversación ---- */
.chat-main { display:flex; flex-direction:column; border-radius: var(--radius-sm); overflow:hidden; padding:0; }
.chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--ink-3); text-align:center; padding:40px; }
.chat-empty svg { width:48px; height:48px; opacity:.5; }

.chat-head { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--glass-line); background:var(--w50); }
.chat-back { display:none; width:36px; height:36px; border-radius:10px; border:none; background:transparent; cursor:pointer; color:var(--ink-2); place-items:center; }
.chat-back svg { width:20px; height:20px; }
.ch-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.ch-info b { font-size:14.5px; font-weight:600; }
.ch-info span { font-size:12px; color:var(--ink-3); }
.ch-actions { display:flex; gap:7px; flex-shrink:0; }
.chat-tagbar { display:flex; gap:6px; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--glass-line); }

.chat-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 16px; background:rgba(245,158,11,.1); border-bottom:1px solid rgba(245,158,11,.25); }
.chat-banner.gray { background:rgba(124,147,168,.12); border-bottom-color:rgba(124,147,168,.2); }
.chat-banner b { font-size:13.5px; }
.chat-banner p { font-size:12px; color:var(--ink-2); margin-top:1px; }
.cb-actions { display:flex; gap:8px; }

.chat-thread { flex:1; overflow-y:auto; padding:18px 18px 8px; display:flex; flex-direction:column; gap:3px;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(28,155,232,.05), transparent 60%),
    rgba(240,247,255,.4); }
.chat-day { text-align:center; margin:12px 0; }
.chat-day span { font-size:11px; font-weight:600; color:var(--ink-3); background:var(--w75); padding:4px 12px; border-radius:12px; }
.msg { display:flex; margin-bottom:2px; }
.msg.out { justify-content:flex-end; }
.bubble { max-width:72%; padding:9px 13px 7px; border-radius:16px; font-size:13.5px; line-height:1.45; position:relative; box-shadow:0 1px 2px rgba(10,40,80,.06); word-wrap:break-word; }
.msg.in .bubble { background:var(--surface); border-top-left-radius:5px; color:var(--ink); }
.msg.out .bubble { background:linear-gradient(135deg,var(--brand-3),var(--brand-2)); color:#fff; border-top-right-radius:5px; }
.btime { display:inline-block; font-size:10px; opacity:.7; margin-left:9px; vertical-align:bottom; }
.btime svg { width:13px; height:13px; vertical-align:-2px; }

.chat-composer { display:flex; align-items:flex-end; gap:10px; padding:12px 14px 6px; border-top:1px solid var(--glass-line); background:var(--w50); }
.chat-input { flex:1; resize:none; max-height:120px; border:1px solid var(--glass-line); border-radius:20px; padding:11px 16px; font-family:inherit; font-size:13.5px; background:var(--surface); outline:none; color:var(--ink); }
.chat-input:focus { border-color:var(--brand-3); }
.chat-send { width:44px; height:44px; border-radius:50%; border:none; flex-shrink:0; cursor:pointer; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--brand-3),var(--brand-2)); box-shadow:var(--shadow-soft); transition:.15s; }
.chat-send:hover { transform:scale(1.05); }
.chat-send svg { width:19px; height:19px; }
.chat-note { font-size:10.5px; color:var(--ink-3); text-align:center; padding:5px 14px 10px; background:var(--w50); display:flex; align-items:center; justify-content:center; gap:5px; }
.chat-note svg { width:12px; height:12px; }

/* Responsive: una sola columna en móvil */
@media (max-width:860px){
  .chat { grid-template-columns:1fr; height:calc(100vh - 130px); }
  .chat .chat-main { display:none; }
  .chat.has-active .chat-list { display:none; }
  .chat.has-active .chat-main { display:flex; }
  .chat-back { display:grid; }
}

/* Selector de estado de cotización (tabla de Cotizaciones) */
select.input.q-status { width:auto; min-width:112px; padding:5px 26px 5px 12px; font-size:12px; font-weight:600; border-radius:999px; border-color:transparent; background-position:right 9px center; cursor:pointer; }

/* ---------- Catálogo de productos ---------- */
.cg-panel { padding:16px 18px; margin-bottom:18px; }
.cg-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.cg-row .search { flex:1 1 280px; } .cg-row .search input { width:100%; }
.cg-sub { width:auto; min-width:230px; }
.cg-chk { display:flex; gap:7px; align-items:center; font-size:13px; color:var(--ink-2); cursor:pointer; }
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:18px; }
.prod-card { padding:0; overflow:hidden; cursor:pointer; transition:transform .18s, box-shadow .18s; }
.prod-card:hover { transform:translateY(-3px); }
.prod-photo { position:relative; aspect-ratio:4/3; background:linear-gradient(135deg,rgba(28,155,232,.10),rgba(85,199,242,.16)); display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:var(--radius-sm); }
.prod-card .prod-photo { border-radius:0; }
.prod-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.prod-photo.big { max-height:340px; margin:14px 0; }
.prod-ph svg { width:44px; height:44px; opacity:.35; color:var(--brand-2); }
.prod-off { position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:rgba(15,23,42,.72); color:#fff; }
.prod-body { padding:13px 16px 16px; }
.prod-ref { font-size:11px; font-weight:700; color:var(--ink-3); letter-spacing:.4px; }
.prod-name { font-weight:700; font-size:15px; margin:2px 0 3px; line-height:1.3; }
.prod-sub { font-size:12px; color:var(--brand-2); font-weight:600; }
.prod-meta { font-size:12px; color:var(--ink-3); margin-top:6px; min-height:16px; }
.prod-price { font-weight:800; font-size:17px; margin-top:8px; }
.prod-price.big { font-size:24px; margin:4px 0 8px; }
.prod-desc { font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:6px 0 0; white-space:pre-wrap; }
.photo-edit { display:flex; gap:16px; align-items:center; flex-wrap:wrap; } .photo-edit .prod-photo { width:150px; }
.spec-row { display:grid; grid-template-columns:1fr 1.3fr auto; gap:8px; margin-bottom:8px; }
@media (max-width:640px){ .spec-row { grid-template-columns:1fr; } .cg-sub { width:100%; } }
.topbar-actions .btn { width:auto; }
.prod-card .prod-photo { aspect-ratio:3/2; }

/* ============================================================
   Editor de propuestas (proposal-editor.js)
   ============================================================ */
body.pe-open { overflow: hidden; }
.pe-root { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: var(--surface-2); }
.pe-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--w92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--glass-line); flex-wrap: wrap; }
.pe-top > div:first-child { flex: 1; min-width: 160px; } .pe-top b { display: block; font-size: 14px; } .pe-top small { color: var(--ink-3); }
.pe-dirty { font-size: 12px; color: var(--ink-3); }
.pe-dev { display: flex; gap: 2px; background: rgba(124,147,168,.15); padding: 3px; border-radius: 10px; } .pe-dev button { border: 0; background: none; padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; } .pe-dev button.on { background: #fff; box-shadow: var(--shadow-soft); }
.pe-main { flex: 1; display: grid; grid-template-columns: minmax(340px, 470px) 1fr; min-height: 0; }
.pe-side { overflow-y: auto; padding: 14px; background: var(--w70); border-right: 1px solid var(--glass-line); }
.pe-prev { display: flex; justify-content: center; align-items: stretch; padding: 14px; min-width: 0; background: repeating-linear-gradient(45deg, #e6eef8, #e6eef8 10px, var(--surface-2) 10px, var(--surface-2) 20px); }
.pe-frame-wrap { width: 100%; max-width: 100%; transition: width .3s; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-hover); } .pe-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.pe-sec { background: var(--surface); border: 1px solid var(--glass-line); border-radius: 14px; margin-bottom: 8px; overflow: hidden; } .pe-sec > summary { cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: 13.5px; list-style: none; display: flex; justify-content: space-between; } .pe-sec > summary::after { content: '＋'; color: var(--brand); } .pe-sec[open] > summary::after { content: '－'; }
.pe-body { padding: 4px 14px 14px; } .pe-body h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-deep); margin: 14px 0 6px; }
.pe-f { margin-bottom: 10px; min-width: 0; } .pe-f .input { width: 100%; } .pe-f small { color: var(--ink-3); font-size: 11.5px; display: block; margin-top: 3px; } .pe-f textarea.input { resize: vertical; }
.pe-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pe-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pe-row { display: grid; gap: 6px; align-items: end; margin-bottom: 2px; } .pe-row .pe-f { margin-bottom: 4px; } .pe-x { border: 0; background: rgba(239,68,68,.12); color: #dc2626; border-radius: 8px; height: 38px; cursor: pointer; font-size: 18px; margin-bottom: 4px; }
.pe-chk { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; cursor: pointer; } .pe-chk.strong { font-weight: 600; font-size: 14px; }
.pe-hint { font-size: 12px; color: var(--ink-2); margin: 6px 0 10px; line-height: 1.5; }
.pe-clauses { margin: 4px 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.pe-total { margin-top: 12px; padding: 10px 12px; background: rgba(28,155,232,.1); border-radius: 12px; font-size: 12.5px; line-height: 1.6; }
.pe-fin .pe-frow { display: grid; grid-template-columns: 1fr 96px 130px; gap: 6px; align-items: center; margin-bottom: 4px; } .pe-frow label { font-size: 12px; line-height: 1.3; } .pe-frow label small { display: block; color: var(--ink-3); } .pe-frow .pe-f { margin: 0; }
.pe-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; } .pe-thumbs label { position: relative; border: 2px solid var(--glass-line); border-radius: 10px; padding: 3px; background: var(--surface-2); cursor: pointer; } .pe-thumbs img { width: 100%; height: 56px; object-fit: contain; } .pe-thumbs input { position: absolute; top: 4px; left: 4px; }
.pe-pub { background: var(--surface); border: 1px solid var(--glass-line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.pe-st { font-weight: 700; font-size: 13px; color: var(--ink-3); margin-bottom: 8px; } .pe-st.on { color: #16a34a; }
.pe-link { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; } .pe-link .input { flex: 1; min-width: 0; font-size: 12px; }
.pe-metrics { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); margin-bottom: 8px; } .pe-metrics .hot { color: #b45309; font-weight: 700; }
.pe-pend { font-size: 12px; margin: 6px 0; } .pe-pend summary { cursor: pointer; font-weight: 600; color: #b45309; } .pe-pend ul { padding: 6px 0 0 18px; color: var(--ink-2); } .pe-ok { font-size: 12.5px; color: #16a34a; margin: 6px 0; }
.pe-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 900px) { .pe-main { grid-template-columns: 1fr; grid-template-rows: 1fr 46%; } .pe-side { border-right: 0; border-bottom: 1px solid var(--glass-line); } .pe-g3 { grid-template-columns: 1fr 1fr; } }
.pe-root .btn { width: auto; flex: none; } .pe-pub .btn, .pe-acts .btn { width: auto; }
.pe-f .k, .pe-body label.k { font-size: 12px; font-weight: 500; margin-bottom: 4px; display: block; color: var(--ink-2); }
.pe-f .input { font-size: 13px; padding: 9px 11px; }
.pe-top { padding: 8px 14px; }

[hidden] { display: none !important; }

/* Página de nueva cotización */
.qp-thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: #EAF3FB; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--ink-3); }
.qp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qp-thumb svg { width: 20px; height: 20px; }
.qp-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--surface); border: 1px solid rgba(10,108,210,.18); border-radius: 12px; box-shadow: 0 12px 32px rgba(10,60,110,.16); max-height: 360px; overflow: auto; }
.qp-res { display: flex; gap: 12px; align-items: center; padding: 8px 12px; cursor: pointer; }
.qp-res[data-pid]:hover { background: #EAF3FB; }
.qp-actions { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; }
.qp-actions .k { margin-bottom: 6px; }
.qp-actions .btn { margin-right: 6px; }
.qp-frame { width: 100%; height: 70vh; border: 1px solid rgba(10,108,210,.15); border-radius: 12px; background: #fff; }

/* Galería de producto para propuestas */
.gal-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gal-item { border: 1px solid rgba(10,108,210,.15); border-radius: 12px; padding: 6px; background: var(--surface); display: grid; gap: 6px; }
.gal-item img { width: 100%; height: 96px; object-fit: contain; border-radius: 8px; background: linear-gradient(180deg, #e9f6ff, #8fd0ff); }
.gal-item .input { padding: 4px 26px 4px 8px; min-height: 0; font-size: 12px; }
.pe-sync { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #EAF3FB; border: 1px solid rgba(10,108,210,.2); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.pe-sync small { display: block; color: var(--ink-3); font-size: 11.5px; }

.pe-csim { background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 12px; padding: 8px 12px; margin: 8px 0; font-size: 12.5px; } .pe-csim summary { cursor: pointer; font-weight: 600; color: #166534; } .pe-csim ul { padding-left: 16px; margin-top: 6px; }

/* Configuración: pestañas y cabeceras de subsección */
.cfg-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.cfg-tab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--glass-line); background: var(--w60); color: var(--ink-2); font: 600 13px inherit; font-family: inherit; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: .2s; }
.cfg-tab svg { width: 16px; height: 16px; } .cfg-tab:hover { background: var(--surface); color: var(--brand); }
.cfg-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(10,108,210,.25); }
.cfg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 2px 0 14px; }
.cfg-head h3 { font-size: 18px; font-weight: 700; color: var(--ink); } .cfg-head .crumb { font-size: 12.5px; color: var(--ink-3); }

/* Menú: grupo desplegable (Configuración) */
.nav-group .caret { margin-left: auto; display: inline-flex; transition: transform .2s; } .nav-group .caret svg { width: 15px; height: 15px; }
.nav-group.open .caret { transform: rotate(180deg); }
.nav-sub { display: none; margin: 2px 0 6px 30px; border-left: 2px solid var(--glass-line); padding-left: 8px; } .nav-sub.open { display: block; }
.nav-subitem { font-size: 13px; color: var(--ink-2); padding: 7px 12px; border-radius: 10px; cursor: pointer; transition: .15s; }
.nav-subitem:hover { background: var(--w55); color: var(--ink); } .nav-subitem.active { background: rgba(28,155,232,.14); color: var(--brand-2); font-weight: 600; }

/* Editor de texto enriquecido */
.rte { border: 1px solid var(--glass-line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rte-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--glass-line); background: var(--surface-2); }
.rte-bar button { border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 4px 9px; font: 13px inherit; font-family: inherit; color: var(--ink-2); cursor: pointer; }
.rte-bar button:hover { background: var(--surface); border-color: var(--glass-line); color: var(--ink); } .rte-bar .sep { width: 1px; background: var(--glass-line); margin: 2px 4px; }
.rte-area { padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--ink); outline: none; overflow: auto; max-height: 420px; }
.rte-area p { margin: 0 0 8px; } .rte-area ul, .rte-area ol { padding-left: 22px; margin: 0 0 8px; } .rte-area a { color: var(--brand-2); }
.rte.ro .rte-area { background: var(--surface-2); }
.mail-frame { width: 100%; border: 1px solid var(--glass-line); border-radius: 12px; background: #fff; }
.att-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--glass-line); border-radius: 10px; margin-bottom: 6px; background: var(--surface); font-size: 13px; }
.att-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .att-row small { color: var(--ink-3); }
/* Firmas */
.sig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sig-prev { background: #fff; border: 1px solid var(--glass-line); border-radius: 12px; padding: 12px 14px; font-family: Arial, Helvetica, sans-serif; font-size: 13.5px; line-height: 1.5; }
.sig-prev p { margin: 0; } .sig-prev a { color: var(--brand-2); }

/* ---------- actividad del cliente en la propuesta (editor) ---------- */
.pe-act { background: #F2F7FC; border: 1px solid var(--line-2); border-radius: 12px; padding: 8px 12px; margin: 8px 0; font-size: 12.5px; } .pe-act summary { cursor: pointer; font-weight: 600; color: var(--brand-2, #0A6CD2); }
.pe-bars { display: grid; gap: 5px; margin-top: 8px; } .pe-bars > div { display: grid; grid-template-columns: 120px 1fr 62px; gap: 8px; align-items: center; } .pe-bars span { color: var(--ink-2); } .pe-bars em { font-style: normal; text-align: right; color: var(--ink-3); }
.pe-bars i { display: block; height: 8px; background: var(--track); border-radius: 99px; overflow: hidden; } .pe-bars b { display: block; height: 100%; background: linear-gradient(90deg, #0A6CD2, #0090E8); }
.pe-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .pe-chips span { background: var(--surface); border: 1px solid var(--line-2); border-radius: 99px; padding: 2px 9px; font-size: 11.5px; }
.pe-vis { padding-left: 16px; margin-top: 8px; color: var(--ink-2); }

/* ---------- plantillas de correo en recuadros (masonry) ---------- */
.tpl-masonry { column-count: 3; column-gap: 18px; }
@media (max-width: 1180px) { .tpl-masonry { column-count: 2; } }
@media (max-width: 720px) { .tpl-masonry { column-count: 1; } }
.tpl-card { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 18px; padding: 18px 20px 14px; border-radius: var(--radius); border-top: 4px solid var(--tc, #1C9BE8); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.tpl-card:hover, .tpl-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(9, 40, 70, .14); outline: none; }
.tpl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.tpl-type { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tc, #1C9BE8); }
.tpl-card h4 { font-size: 16px; margin: 0 0 4px; color: var(--ink); }
.tpl-uso { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 12px; }
.tpl-subj { background: rgba(124, 147, 168, .12); border-radius: 10px; padding: 7px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.tpl-subj small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.tpl-body { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.tpl-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.tpl-lang { font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: .06em; }

/* ---------- embudo de ventas (pipeline): minimalista e interactivo ---------- */
.funnel { position: relative; margin-bottom: 18px; }
.fn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.fn-head h3 { font-size: 16px; margin: 0 0 2px; } .fn-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fn-body { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 28px; align-items: start; }
.fn-col { display: flex; flex-direction: column; }
.fn-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 92px; align-items: center; gap: 12px; width: 100%; padding: 4px 8px; border: 0; border-radius: 12px; background: transparent; font: inherit; color: var(--ink); cursor: pointer; text-align: left; transition: background .18s; }
.fn-row:hover, .fn-row:focus-visible, .fn-row.on { background: rgba(28, 155, 232, .08); outline: none; }
.fn-row.on { box-shadow: inset 3px 0 0 var(--c); }
.fn-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.fn-track { display: flex; justify-content: center; height: 26px; }
.fn-bar { display: block; height: 100%; width: var(--w); border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); transform-origin: center; animation: fnGrow .55s cubic-bezier(.2,.8,.2,1) both; transition: filter .18s, transform .18s; }
.fn-row:hover .fn-bar, .fn-row.on .fn-bar { filter: saturate(1.15) brightness(1.04); transform: scaleY(1.12); }
@keyframes fnGrow { from { width: 0; opacity: 0; } }
.fn-n { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .fn-n b { font-size: 17px; } .fn-n small { font-size: 10.5px; color: var(--ink-3); }
.fn-conv { display: grid; grid-template-columns: 150px minmax(0, 1fr) 92px; gap: 12px; font-size: 11px; color: var(--ink-3); padding: 0 8px; } .fn-conv span { grid-column: 2; text-align: center; }
.fn-side { display: grid; gap: 10px; }
.fn-kpi { background: rgba(28, 155, 232, .08); border-radius: 14px; padding: 14px 16px; } .fn-kpi small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.fn-kpi b { display: block; font-size: 30px; line-height: 1.1; color: var(--brand-2, #0A6CD2); } .fn-kpi span { font-size: 11.5px; color: var(--ink-3); }
.fn-exit { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 1px solid rgba(124,147,168,.25); background: transparent; border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: background .18s, border-color .18s; }
.fn-exit b { color: var(--c); font-size: 16px; } .fn-exit:hover, .fn-exit.on { background: color-mix(in srgb, var(--c) 10%, transparent); border-color: var(--c); }
.fn-tip { position: absolute; z-index: 5; background: #0F2A44; color: #fff; padding: 9px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5; pointer-events: none; box-shadow: 0 10px 24px rgba(9,40,70,.3); white-space: nowrap; }
.fn-tip b { color: #fff; }
.pipe-col { transition: opacity .25s, transform .25s; } .pipe-col.dim { opacity: .3; } .pipe-col.focus { box-shadow: 0 0 0 2px rgba(28,155,232,.45); }
@media (max-width: 860px) { .fn-body { grid-template-columns: 1fr; } .fn-row, .fn-conv { grid-template-columns: 96px minmax(0, 1fr) 70px; } }
@media (prefers-reduced-motion: reduce) { .fn-bar { animation: none; } }

/* ---------- temperatura del lead + asistente de IA ---------- */
.temp { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.temp b { font-weight: 800; } .temp.big { font-size: 14px; padding: 4px 12px; }
.temp.t-caliente { color: #dc2626; background: rgba(239, 68, 68, .12); } .temp.t-tibio { color: #b45309; background: rgba(245, 158, 11, .16); } .temp.t-frio { color: #0284c7; background: rgba(56, 189, 248, .17); }
.ai-panel { border: 1px solid rgba(28, 155, 232, .25); background: linear-gradient(180deg, rgba(28,155,232,.06), transparent); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; }
.ai-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ai-note { background: rgba(245, 158, 11, .12); border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: 13px; }
.ai-sum { margin: 12px 0 6px; line-height: 1.55; font-size: 13.5px; }
.ai-sig { list-style: none; padding: 0; margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; } .ai-sig .positiva { color: #15803d; } .ai-sig .negativa { color: #b91c1c; } .ai-sig .neutra { color: var(--ink-2); }
.ai-act { background: var(--surface); border: 1px solid rgba(124,147,168,.25); border-radius: 12px; padding: 12px 14px; margin-top: 12px; font-size: 13.5px; }
.ai-act-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.ai-msg { background: rgba(124,147,168,.1); border-left: 3px solid var(--brand-2, #0A6CD2); border-radius: 8px; padding: 9px 12px; margin-top: 10px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.ai-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ai-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

/* ---------- botón de tema (claro / oscuro) ---------- */
.theme-btn { cursor: pointer; color: var(--ink-3); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; transition: .15s; margin-left: auto; }
.theme-btn:hover { color: var(--brand-2); background: var(--w60); }
.theme-btn + .logout { margin-left: 0 !important; }
.theme-btn svg { width: 18px; height: 18px; }

/* ============================================================
   MODO OSCURO — se activa con html[data-theme="dark"] (preferencia guardada o la del sistema)
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;
  --brand: #2AA6F0; --brand-2: #5AAEFF; --brand-3: #6FD0F7; --brand-deep: #9CCBFF;
  --glass: rgba(20, 36, 56, .68); --glass-strong: rgba(20, 36, 56, .84); --glass-soft: rgba(20, 36, 56, .46);
  --glass-border: rgba(255, 255, 255, .08); --glass-line: rgba(255, 255, 255, .09);
  --ink: #E8F1FA; --ink-2: #B1C4D6; --ink-3: #8196AA;
  --shadow: 0 6px 28px rgba(0, 0, 0, .38), 0 1px 3px rgba(0, 0, 0, .3); --shadow-soft: 0 4px 16px rgba(0, 0, 0, .32); --shadow-hover: 0 14px 40px rgba(0, 0, 0, .5);
  --surface: #16283e; --surface-2: #0f2034; --line-2: rgba(255, 255, 255, .13); --track: rgba(255, 255, 255, .12);
  --w50: rgba(255,255,255,.05); --w55: rgba(255,255,255,.06); --w60: rgba(255,255,255,.07); --w70: rgba(14,27,43,.72);
  --w75: rgba(14,27,43,.78); --w90: rgba(14,27,43,.92); --w92: rgba(14,27,43,.94);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 800px at 12% -5%, #10294a 0%, transparent 55%),
    radial-gradient(1000px 700px at 105% 10%, #0d2744 0%, transparent 50%),
    radial-gradient(900px 900px at 50% 120%, #0b2038 0%, transparent 60%),
    linear-gradient(160deg, #08121f 0%, #0a1a2d 45%, #08111d 100%);
  background-attachment: fixed;
}
html[data-theme="dark"] body::before, html[data-theme="dark"] body::after { opacity: .16; }
html[data-theme="dark"] .glass-soft { border-color: rgba(255,255,255,.07); }
/* logo azul → blanco */
html[data-theme="dark"] img[src$="logo-azul.png"] { filter: brightness(0) invert(1); }
/* chips y etiquetas con colores legibles sobre fondo oscuro */
html[data-theme="dark"] .chip-green, html[data-theme="dark"] .temp.t-frio { }
html[data-theme="dark"] .chip-green { color: #4ade80; } html[data-theme="dark"] .chip-amber { color: #fbbf24; } html[data-theme="dark"] .chip-red { color: #f87171; }
html[data-theme="dark"] .chip-purple { color: #a78bfa; } html[data-theme="dark"] .chip-blue { color: #7cc4ff; }
html[data-theme="dark"] .temp.t-caliente { color: #f87171; } html[data-theme="dark"] .temp.t-tibio { color: #fbbf24; } html[data-theme="dark"] .temp.t-frio { color: #7dd3fc; }
html[data-theme="dark"] .ai-sig .positiva { color: #4ade80; } html[data-theme="dark"] .ai-sig .negativa { color: #f87171; }
/* degradados de acción más profundos para que el texto blanco tenga contraste */
html[data-theme="dark"] .nav-item.active, html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .pill.active { color: #fff; background: linear-gradient(135deg, #1E8FE0 0%, #0A62C8 100%); }
html[data-theme="dark"] .avatar { background: linear-gradient(135deg, #2AA6F0, #0A62C8); }
html[data-theme="dark"] .pill.active { border-color: transparent; }
html[data-theme="dark"] .modal-overlay { background: rgba(2, 8, 16, .62); }
html[data-theme="dark"] .input:focus { box-shadow: 0 0 0 3px rgba(90, 174, 255, .22); }
html[data-theme="dark"] .rte-bar button { color: var(--ink-2); }
/* el contenido que simula un correo (vistas previas, firma) conserva fondo blanco y texto oscuro */
html[data-theme="dark"] .sig-prev { color: #222; }
html[data-theme="dark"] .pe-frame-wrap { background: #fff; }
html[data-theme="dark"] .fn-tip { background: #e8f1fa; color: #0b2239; } html[data-theme="dark"] .fn-tip b { color: #0b2239; }
html[data-theme="dark"] .gal-item img { background: linear-gradient(180deg, #17304d, #0e2036); }
html[data-theme="dark"] ::selection { background: rgba(90, 174, 255, .35); }
html[data-theme="dark"] .pe-prev { background: repeating-linear-gradient(45deg, #0d1c2f, #0d1c2f 10px, #11243a 10px, #11243a 20px); }

/* ---------- tabla de cotizaciones compacta + botones de icono ---------- */
.btn-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--glass-line); background: var(--w50); color: var(--ink-2); cursor: pointer; transition: .15s; padding: 0; }
.btn-icon svg { width: 17px; height: 17px; } .btn-icon:hover { background: var(--surface); color: var(--brand-2); transform: translateY(-1px); }
.btn-icon.primary { background: rgba(28, 155, 232, .14); color: var(--brand-2); border-color: transparent; } .btn-icon.primary:hover { background: var(--brand-2); color: #fff; }
.qtable { min-width: 0; } .qtable td { padding: 11px 10px; }
.q-web { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .q-acts { display: flex; gap: 6px; white-space: nowrap; }

/* ---------- menú lateral colapsable ---------- */
.nav-toggle { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--ink-3); cursor: pointer; transition: .15s; flex-shrink: 0; }
.nav-toggle:hover { background: var(--w60); color: var(--brand-2); } .nav-toggle svg { width: 18px; height: 18px; }
.sidebar { transition: width .22s cubic-bezier(.2,.8,.2,1), padding .22s; }
@media (min-width: 861px) {
.app.nav-collapsed .sidebar { width: 78px; padding: 22px 10px; }
.app.nav-collapsed .sb-logo { flex-direction: column; gap: 10px; padding: 4px 0 16px; }
.app.nav-collapsed .sb-logo img, .app.nav-collapsed .sb-role { display: none; }
.app.nav-collapsed .sb-logo::before { content: "AQ"; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .5px; background: linear-gradient(135deg, var(--brand-3), var(--brand-2)); }
.app.nav-collapsed .nav-toggle { margin-left: 0; }
.app.nav-collapsed .nav-item { justify-content: center; padding: 12px 0; position: relative; }
.app.nav-collapsed .nav-item > span:not(.nav-badge), .app.nav-collapsed .nav-item .caret, .app.nav-collapsed .nav-sub { display: none !important; }
.app.nav-collapsed .nav-badge { position: absolute; top: 4px; right: 6px; margin: 0; padding: 0 5px; font-size: 10px; line-height: 16px; background: var(--brand-2); color: #fff; }
.app.nav-collapsed .sb-user { flex-direction: column; padding: 10px 4px; gap: 8px; }
.app.nav-collapsed .sb-user .meta { display: none; } .app.nav-collapsed .theme-btn, .app.nav-collapsed .sb-user .logout { margin-left: 0; }
}
@media (max-width: 860px) { .nav-toggle { display: none; } }

/* ---------- pipeline: embudo colapsable, arrastrar y acciones en la tarjeta ---------- */
.fn-fold { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--glass-line); background: var(--w50); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: .15s; }
.fn-fold:hover { background: var(--surface); color: var(--brand-2); } .fn-fold svg { width: 16px; height: 16px; transition: transform .2s; transform: rotate(-90deg); } .fn-fold.open svg { transform: rotate(0deg); }
.funnel.collapsed { padding: 12px 18px; }
.lead-card[draggable="true"] { cursor: grab; } .lead-card.dragging { opacity: .45; transform: rotate(1.5deg); cursor: grabbing; }
.pipe-col { transition: opacity .25s, transform .25s, box-shadow .15s, background .15s; } .pipe-col.drop-ok { box-shadow: 0 0 0 2px var(--brand-2); background: rgba(28, 155, 232, .1); }
body.dragging-lead .pipe-col.dim { opacity: .75; }
.lc-acts { display: flex; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--glass-line); }
.lc-act { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--glass-line); background: var(--w60); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: .15s; padding: 0; }
.lc-act svg { width: 15px; height: 15px; } .lc-act:hover { background: var(--surface); color: var(--brand-2); transform: translateY(-1px); }
.lc-act.primary { background: rgba(28, 155, 232, .14); color: var(--brand-2); border-color: transparent; } .lc-act.primary:hover { background: var(--brand-2); color: #fff; }

/* ---------- configurador de etapas ---------- */
.st-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--glass-line); } .st-row:last-child { border-bottom: 0; }
.st-row.off { opacity: .55; } .st-move { display: flex; flex-direction: column; gap: 3px; } .st-move .btn-icon { width: 26px; height: 22px; border-radius: 7px; } .st-move .btn-icon svg { width: 13px; height: 13px; transform: rotate(90deg); }
.st-move .btn-icon:disabled, .btn-icon:disabled { opacity: .35; cursor: not-allowed; }
.st-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(124,147,168,.18); } .st-name { flex: 1; min-width: 0; }

/* ---- Agenda y tareas: lista agrupada + calendario ---- */
.ag-bar { display:flex; gap:10px 14px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.ag-seg { display:inline-flex; background:var(--w60); border:1px solid var(--glass-border); border-radius:12px; padding:3px; }
.ag-seg button { border:0; background:transparent; font:inherit; font-size:13px; font-weight:600; color:var(--ink-2); padding:7px 14px; border-radius:9px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.ag-seg button svg { width:15px; height:15px; }
.ag-seg button.on { background:linear-gradient(135deg,var(--brand-3),var(--brand-2)); color:#fff; }
.ag-owner { width:auto; min-width:190px; padding:8px 12px; font-size:13px; }
.ag-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.ag-stat { text-align:left; font:inherit; cursor:pointer; background:var(--w60); border:1px solid var(--glass-border); border-left:4px solid var(--c); border-radius:var(--radius-sm); padding:10px 14px; display:flex; align-items:baseline; gap:8px; color:var(--ink); }
.ag-stat b { font-size:22px; } .ag-stat span { font-size:12px; color:var(--ink-2); font-weight:500; }
.ag-stat.on { background:var(--surface); box-shadow:var(--shadow-soft); outline:2px solid var(--c); }
.ag-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start; }
.ag-layout.one { grid-template-columns:minmax(0,1fr); } .ag-listcol, .ag-side { min-width:0; }
.ag-group, .ag-sidep { margin-bottom:12px; }
.ag-sidep { padding:12px 14px; }
.ag-ghead { width:100%; display:flex; align-items:center; gap:8px; background:transparent; border:0; font:inherit; color:var(--ink); cursor:pointer; padding:4px 2px; text-align:left; }
.ag-ghead b { font-size:14px; flex:1; } .ag-ghead .dot { width:10px; height:10px; border-radius:50%; }
.ag-chev { display:inline-block; transition:transform .15s; color:var(--ink-3); font-weight:700; width:12px; } .ag-chev.open { transform:rotate(90deg); }
.ag-gbody { margin-top:6px; }
.ag-row { display:flex; align-items:center; gap:12px; padding:9px 12px; margin-bottom:6px; background:var(--w60); border:1px solid var(--glass-border); border-radius:var(--radius-sm); }
.ag-row.late { border-left:3px solid var(--danger); } .ag-row.done { opacity:.6; } .ag-row.done .ag-title { text-decoration:line-through; }
.ag-ic { width:32px; height:32px; border-radius:10px; flex-shrink:0; } .ag-ic svg { width:16px; height:16px; }
.ag-main { flex:1; min-width:0; }
.ag-title { display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ag-sub { display:flex; gap:4px 10px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-top:2px; }
.ag-sub .tag-mini { cursor:pointer; } .ag-late { color:var(--danger); font-weight:600; }
.ag-act { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; flex-shrink:0; }
.ag-more-btn { width:auto; margin:2px 0 4px; }
.ag-mini { display:flex; align-items:center; gap:10px; padding:7px 4px; border-top:1px solid var(--glass-line); }
.ag-mini:first-of-type { border-top:0; }
.ag-calp { padding:14px 16px; }
.ag-nav { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; } .ag-nav h3 { font-size:17px; flex:1; } .ag-nav .btn { width:auto; margin-right:4px; }
.ag-cal { border:1px solid var(--glass-line); border-radius:12px; overflow:hidden; background:var(--surface); }
.ag-dow, .ag-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.ag-dow span { text-align:center; font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; padding:7px 0; background:var(--surface-2); }
.ag-cell { position:relative; min-height:104px; padding:6px 6px 4px; border-top:1px solid var(--glass-line); border-left:1px solid var(--glass-line); cursor:pointer; overflow:hidden; }
.ag-cell:nth-child(7n+1) { border-left:0; } .ag-cell:hover { background:var(--surface-2); }
.ag-cell.out { background:var(--surface-2); } .ag-cell.out .ag-dn { color:var(--ink-3); opacity:.6; }
.ag-dn { font-size:12px; font-weight:600; }
.ag-cell.today .ag-dn { background:var(--brand-2); color:#fff; border-radius:50%; display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; }
.ag-cell.sel { outline:2px solid var(--brand); outline-offset:-2px; }
.ag-cnt { display:none; position:absolute; top:6px; right:6px; font-size:10px; font-weight:700; background:var(--track); color:var(--ink-2); border-radius:8px; padding:1px 6px; }
.ag-pills { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.ag-pill { display:flex; align-items:center; gap:5px; font-size:11px; line-height:1.3; padding:2px 5px; border-radius:6px; background:color-mix(in srgb,var(--c) 14%,transparent); color:var(--ink); white-space:nowrap; overflow:hidden; }
.ag-pill i { width:7px; height:7px; border-radius:50%; background:var(--c); flex-shrink:0; } .ag-pill .pt { overflow:hidden; text-overflow:ellipsis; } .ag-pill em { font-style:normal; font-weight:700; }
.ag-pill.late { box-shadow:inset 0 0 0 1px var(--danger); } .ag-pill.done { opacity:.5; text-decoration:line-through; }
.ag-more { font-size:11px; color:var(--brand-2); font-weight:600; padding-left:4px; }
.ag-wk { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.ag-wcol { background:var(--surface); border:1px solid var(--glass-line); border-radius:12px; padding:8px; min-height:170px; cursor:pointer; display:flex; flex-direction:column; gap:6px; min-width:0; }
.ag-wcol.today { border-color:var(--brand-2); } .ag-wcol.sel { outline:2px solid var(--brand); }
.ag-whead { display:flex; align-items:baseline; gap:6px; font-size:12px; color:var(--ink-2); } .ag-whead b { font-size:18px; color:var(--ink); }
.ag-card { border-left:3px solid var(--c); background:color-mix(in srgb,var(--c) 10%,transparent); border-radius:6px; padding:4px 6px; font-size:11.5px; display:flex; flex-direction:column; min-width:0; }
.ag-card em { font-style:normal; font-weight:700; } .ag-card b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ag-card small { color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-card.late { box-shadow:inset 0 0 0 1px var(--danger); } .ag-card.done { opacity:.5; text-decoration:line-through; } .ag-none { color:var(--ink-3); font-size:12px; }
.ag-day { margin-top:14px; }
@media (max-width:1100px) { .ag-layout { grid-template-columns:1fr; } }
@media (max-width:860px) {
  .ag-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ag-wk { grid-template-columns:1fr; } .ag-wcol { min-height:0; }
}
@media (max-width:700px) {
  .ag-cell { min-height:56px; padding:4px 3px; } .ag-pills { flex-direction:row; flex-wrap:wrap; gap:3px; }
  .ag-pill { padding:0; background:transparent; } .ag-pill .pt, .ag-more { display:none; } .ag-pill i { width:8px; height:8px; }
  .ag-cnt { display:block; }
  .ag-row { flex-wrap:wrap; } .ag-act { width:100%; justify-content:flex-start; }
}

/* ---- Upsell y Oportunidades (BETA) ---- */
.kpi-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.kpi { background:var(--w60); border:1px solid var(--glass-border); border-left:4px solid var(--brand); border-radius:var(--radius-sm); padding:10px 14px; display:flex; align-items:baseline; gap:8px; }
.kpi b { font-size:22px; } .kpi span { font-size:12px; color:var(--ink-2); font-weight:500; }
.beta-tag { font-size:10px; font-weight:700; letter-spacing:.6px; vertical-align:middle; margin-left:8px; padding:2px 8px; border-radius:20px; background:rgba(139,92,246,.15); color:var(--purple); }
.nav-beta { background:rgba(139,92,246,.28) !important; font-size:9px !important; letter-spacing:.5px; }
.mk-beta { border:1px solid rgba(139,92,246,.35); font-size:13px; line-height:1.55; color:var(--ink-2); }
.mk-form { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto; gap:12px; align-items:end; }
.mk-go .btn { width:auto; }
.mk-recent { margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.mk-sum { font-size:14px; line-height:1.6; margin-bottom:8px; }
.mk-warn { margin:0 0 10px 18px; font-size:12.5px; color:var(--ink-2); line-height:1.5; }
.mk-card { margin-bottom:14px; }
.mk-head { display:flex; gap:10px 14px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
.mk-head h3 { font-size:16px; flex:1; min-width:220px; }
.mk-chips { display:flex; gap:6px; flex-wrap:wrap; }
.mk-where { font-size:13px; color:var(--ink-2); margin:4px 0 10px; }
.mk-months { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:3px; margin-bottom:12px; }
.mk-months span { text-align:center; font-size:10.5px; font-weight:600; padding:4px 0; border-radius:6px; background:var(--track); color:var(--ink-3); text-transform:capitalize; }
.mk-months span.on { background:linear-gradient(135deg,var(--brand-3),var(--brand-2)); color:#fff; }
.mk-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:10px; font-size:13px; }
.mk-grid .k { font-size:11px; color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px; }
.mk-why { font-size:13.5px; line-height:1.6; margin-bottom:8px; }
.mk-act { font-size:13.5px; line-height:1.55; margin:10px 0 6px; padding:9px 12px; border-radius:10px; background:var(--w60); border:1px solid var(--glass-line); }
.mk-msg { margin-top:6px; font-size:13px; } .mk-msg summary { cursor:pointer; color:var(--brand-2); font-weight:600; }
.mk-msg p { margin:8px 0; line-height:1.55; white-space:normal; } .mk-msg ul { margin:8px 0 0 18px; line-height:1.5; color:var(--ink-2); }
.mk-crm { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12.5px; color:var(--ink-2); } .mk-crm svg { width:15px; height:15px; }
@media (max-width:860px) { .mk-form { grid-template-columns:1fr; } .mk-grid { grid-template-columns:1fr; } .kpi-strip { grid-template-columns:1fr; } .mk-months span { font-size:9px; } }

/* ---- WhatsApp: ventana de 24 h, estados de entrega, plantillas ---- */
.wa-win { display:flex; justify-content:space-between; align-items:center; gap:8px 14px; flex-wrap:wrap; padding:7px 16px; font-size:12px; border-top:1px solid var(--glass-line); }
.wa-win svg { width:13px; height:13px; vertical-align:-2px; }
.wa-win.open { background:rgba(34,197,94,.09); color:var(--ink-2); } .wa-win.closed { background:rgba(245,158,11,.13); color:var(--ink); }
.wa-pill { font:inherit; font-size:11.5px; font-weight:600; padding:2px 10px; border-radius:20px; border:0; background:var(--track); color:var(--ink-2); }
.wa-pill.ok { background:rgba(34,197,94,.16); color:#15803d; } .wa-pill.bad { background:rgba(239,68,68,.15); color:var(--danger); } .wa-pill.warn { background:rgba(245,158,11,.2); color:#b45309; cursor:pointer; }
.chat-composer .wa-tplbtn { width:auto; flex-shrink:0; align-self:center; }
.chat-input:disabled, .chat-send:disabled { opacity:.5; cursor:not-allowed; }
.tick { font-size:11px; letter-spacing:-2px; margin-left:3px; } .tick.rd { color:#bff3ff; font-weight:700; } .tick.fl { color:#ffd0d0; letter-spacing:0; }
.msg-tag { font-size:10.5px; font-weight:600; opacity:.8; margin-bottom:3px; }
.msg-err { margin-top:4px; font-size:11px; color:#ffe1e1; }
.msg.in .msg-err { color:var(--danger); }

/* ---- WhatsApp: administración y plantillas ---- */
.wt-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr); gap:20px; }
.wt-side { position:sticky; top:0; align-self:start; }
.wt-btn { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:6px; } .wt-btn .input { flex:1; min-width:140px; }
.wt-errs { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3); border-radius:10px; padding:9px 12px; font-size:12.5px; color:var(--ink); }
.wt-errs ul, .wt-warns ul { margin:4px 0 0 18px; line-height:1.5; }
.wt-warns { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.35); border-radius:10px; padding:9px 12px; font-size:12.5px; margin-top:8px; }
.wt-ok { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); border-radius:10px; padding:9px 12px; font-size:12.5px; font-weight:600; color:#15803d; }
.wa-prev { background:#e5ddd5; border-radius:12px; padding:12px; } html[data-theme="dark"] .wa-prev { background:#0b141a; }
.wa-bub { background:#fff; color:#111; border-radius:4px 12px 12px 12px; padding:8px 11px; font-size:13.5px; line-height:1.45; max-width:92%; box-shadow:0 1px 1px rgba(0,0,0,.12); word-wrap:break-word; }
html[data-theme="dark"] .wa-bub { background:#202c33; color:#e9edef; }
.wa-btns { margin-top:4px; display:flex; flex-direction:column; gap:3px; max-width:92%; }
.wa-btns div { background:#fff; color:#0a6cd2; text-align:center; font-size:13px; font-weight:600; padding:7px; border-radius:8px; box-shadow:0 1px 1px rgba(0,0,0,.12); }
html[data-theme="dark"] .wa-btns div { background:#202c33; color:#53bdeb; }
.wa-tpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; margin-bottom:14px; }
.wa-tpl { margin:0; display:flex; flex-direction:column; gap:10px; } .wa-tpl-head { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.wa-tpl-act { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; } .wa-tpl-act .btn { width:auto; }
.wa-rej { background:rgba(239,68,68,.08); border-radius:8px; padding:7px 10px; font-size:12.5px; }
.wa-check h4 { margin:12px 0 4px; font-size:13.5px; } .wa-check ul { margin:0 0 4px 18px; font-size:13px; line-height:1.65; color:var(--ink-2); }
@media (max-width:860px) { .wt-grid { grid-template-columns:1fr; } .wt-side { position:static; } }
.msg-btns { display:flex; gap:5px; flex-wrap:wrap; margin:6px 0 2px; } .msg-btns span { background:rgba(255,255,255,.22); border-radius:8px; padding:3px 10px; font-size:12px; font-weight:600; }
.msg.in .msg-btns span { background:var(--track); }
.msg-foot { font-size:11.5px; opacity:.85; }
.wa-ai { padding:7px 16px; font-size:12.5px; line-height:1.55; background:rgba(139,92,246,.09); border-top:1px solid rgba(139,92,246,.2); color:var(--ink-2); }
.wa-ai b { color:var(--ink); }
.wb-range { display:inline-flex; gap:6px; align-items:center; margin:0 10px 4px 0; } .wb-range .input { width:122px; padding:6px 8px; } .wb-range .btn { width:auto; }
.wb-opt { border:1px solid var(--glass-line); border-radius:12px; padding:10px 12px; margin-bottom:10px; background:var(--w50); } .wb-opt-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; } .wb-opt-h .btn { width:auto; padding:4px 9px; }
.wb-test { max-height:300px; overflow:auto; background:var(--surface-2); border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:6px; }
.wb-m { display:flex; } .wb-m.in { justify-content:flex-end; } .wb-m > div { max-width:80%; padding:7px 11px; border-radius:12px; font-size:13px; line-height:1.45; white-space:pre-wrap; } .wb-m.in > div { background:linear-gradient(135deg,var(--brand-3),var(--brand-2)); color:#fff; } .wb-m.out > div { background:var(--surface); border:1px solid var(--glass-line); }
.wa-beta { border:1px solid rgba(139,92,246,.35); font-size:13px; line-height:1.6; color:var(--ink-2); }

/* ---- Inicio de sesión con Google ---- */
.btn-google { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:var(--surface); color:var(--ink); border:1px solid var(--line-2); font-weight:600; }
.btn-google:hover { box-shadow:var(--shadow-soft); }
.auth-note { font-size:12px; color:var(--ink-3); margin:8px 0 14px; } .auth-note b { color:var(--ink-2); }
.auth-alt { text-align:left; margin-top:4px; } .auth-alt summary { cursor:pointer; font-size:12.5px; color:var(--ink-3); text-align:center; margin-bottom:12px; list-style:none; } .auth-alt summary:hover { color:var(--brand-2); }
.auth-alt[open] summary { margin-bottom:14px; }