/* ══════════════════════════════════════════
   DESIGN TOKENS — LIGHT / DARK
══════════════════════════════════════════ */
:root {
  --brand:       #2563eb;
  --brand-dark:  #1d4ed8;
  --brand-light: #eff6ff;
  --brand-glow:  rgba(37,99,235,.12);

  --bg:          #f0f4f9;
  --surface:     #ffffff;
  --surface2:    #f7f9fc;
  --border:      #e2e8f0;
  --border2:     #cbd5e1;

  --sidebar-bg:  #0c1628;
  --sidebar-txt: #7c95b5;
  --sidebar-act: #ffffff;

  --text:        #0f172a;
  --text2:       #475569;
  --text3:       #94a3b8;

  --green:  #059669; --green-bg:  #ecfdf5;
  --red:    #dc2626; --red-bg:    #fef2f2;
  --amber:  #d97706; --amber-bg:  #fffbeb;
  --violet: #7c3aed; --violet-bg: #f5f3ff;
  --cyan:   #0891b2; --cyan-bg:   #ecfeff;

  --radius:    12px;
  --radius-sm: 8px;
  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --sidebar-w: 232px;
  --topbar-h:  58px;
}
[data-theme="dark"] {
  --bg:          #080f1e;
  --surface:     #0d1625;
  --surface2:    #121d30;
  --border:      #1a2840;
  --border2:     #243450;
  --text:        #f0f4ff;
  --text2:       #8da0bd;
  --text3:       #4a6080;
  --brand-light: #1a3060;
  --brand-glow:  rgba(37,99,235,.2);
  --green-bg:  #052e16; --red-bg:    #450a0a;
  --amber-bg:  #451a03; --violet-bg: #2e1065;
  --cyan-bg:   #082f49;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
}

/* ══════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  display:flex;height:100vh;overflow:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
::selection{background:rgba(37,99,235,.22)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.kpi-value,.ck-value,.pc-value,.ac-stat-v,.cc-value,tbody td,.renewal-table td{font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
#sidebar{
  width:var(--sidebar-w);background:var(--sidebar-bg);
  display:flex;flex-direction:column;flex-shrink:0;
  overflow-y:auto;z-index:10;
  box-shadow:2px 0 24px rgba(0,0,0,.15);
}
.logo-area{
  padding:20px 16px 16px;
  display:flex;align-items:center;gap:11px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.logo-mark{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
  box-shadow:0 0 16px rgba(37,99,235,.4);
}
.logo-mark img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.logo-mark .logo-initials{font-size:.82rem;font-weight:800;color:#fff;letter-spacing:-.5px}
.logo-text{overflow:hidden}
.logo-text h1{font-size:.88rem;font-weight:700;color:#fff;white-space:nowrap}
.logo-text span{font-size:.68rem;color:var(--sidebar-txt);display:block;margin-top:1px}

.nav-section{padding:8px 0 2px}
.nav-label{
  font-size:.6rem;font-weight:700;letter-spacing:.1em;
  color:#3d5270;padding:8px 16px 4px;text-transform:uppercase
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px;cursor:pointer;
  color:var(--sidebar-txt);font-size:.8rem;font-weight:500;
  border-left:2px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
  margin:1px 6px;border-radius:var(--radius-sm);
}
.nav-item:hover{color:#c8d8ec;background:rgba(255,255,255,.05);border-left-color:transparent}
.nav-item.active{
  color:#fff;
  background:rgba(37,99,235,.18);
  border-left-color:var(--brand);
  border-left-width:2px;
}
.nav-item .ni-icon{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:.7}
.nav-item.active .ni-icon{opacity:1}
.nav-item:hover .ni-icon{opacity:.9}
.nav-item .ni-icon svg{width:15px;height:15px;stroke:currentColor}
.nav-badge{
  margin-left:auto;background:var(--red);color:#fff;
  font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:999px;
  min-width:18px;text-align:center;
}
.sidebar-footer{
  margin-top:auto;padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:.72rem;color:#3d5270;
}
.logout-btn{
  display:flex;align-items:center;gap:7px;margin-top:8px;
  cursor:pointer;color:#4a6080;transition:color .15s;padding:6px 0;
  font-size:.78rem;font-weight:500;
}
.logout-btn:hover{color:#f87171}

/* ══════════════════════════════════════════
   MAIN LAYOUT
══════════════════════════════════════════ */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#topbar{
  height:var(--topbar-h);
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:0 22px;display:flex;align-items:center;gap:10px;flex-shrink:0;
  box-shadow:var(--shadow-xs);
}
#topbar h2{font-size:.95rem;font-weight:700;flex:1;color:var(--text)}
.search-wrap{
  display:flex;align-items:center;gap:7px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px 12px;min-width:200px;
  transition:border-color .15s,box-shadow .15s;
}
.search-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.search-wrap input{
  border:none;background:transparent;outline:none;
  font-size:.8rem;color:var(--text);width:100%;
}
.search-wrap input::placeholder{color:var(--text3)}
.dark-toggle{
  width:32px;height:32px;border:1px solid var(--border);
  background:var(--surface2);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.9rem;flex-shrink:0;color:var(--text2);
  transition:background .14s ease,color .14s ease,transform .12s var(--ease-out);
}
.dark-toggle:hover{background:var(--border);color:var(--text)}
.dark-toggle:active{transform:scale(.94)}

#content{flex:1;overflow-y:auto;padding:20px 22px}

/* ══════════════════════════════════════════
   CARDS & KPIs
══════════════════════════════════════════ */
.card{
  background:var(--surface);border-radius:var(--radius);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  transition:background .25s,border .25s;
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 10px;border-bottom:1px solid var(--border);
}
.card-title{font-size:.84rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px}
.card-body{padding:14px 18px}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.kpi{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 18px 14px;
  box-shadow:var(--shadow-xs);position:relative;overflow:hidden;
  transition:box-shadow .2s,transform .2s,background .25s;
}
.kpi:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.kpi-click{cursor:pointer}
.kpi-click:active{transform:translateY(0);box-shadow:var(--shadow-xs)}
.kpi::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
}
.kpi::after{
  content:'';position:absolute;top:0;right:0;width:80px;height:80px;
  border-radius:50%;opacity:.07;pointer-events:none;
  transform:translate(30%,-30%);
}
.kpi.k-blue::before{background:linear-gradient(90deg,#2563eb,#6366f1)}
.kpi.k-blue::after{background:#2563eb}
.kpi.k-green::before{background:linear-gradient(90deg,#059669,#10b981)}
.kpi.k-green::after{background:#059669}
.kpi.k-amber::before{background:linear-gradient(90deg,#d97706,#f59e0b)}
.kpi.k-amber::after{background:#d97706}
.kpi.k-red::before{background:linear-gradient(90deg,#dc2626,#f43f5e)}
.kpi.k-red::after{background:#dc2626}
.kpi.k-violet::before{background:linear-gradient(90deg,#7c3aed,#a855f7)}
.kpi.k-violet::after{background:#7c3aed}
.kpi-row{display:flex;align-items:flex-start;justify-content:space-between}
.kpi-label{font-size:.68rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px}
.kpi-value{font-size:1.8rem;font-weight:800;color:var(--text);line-height:1}
.kpi-sub{font-size:.73rem;color:var(--text3);margin-top:6px}
.kpi-icon-circle{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  flex-shrink:0;margin-top:2px;
}

/* ══════════════════════════════════════════
   ALERTS
══════════════════════════════════════════ */
.alert-strip{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-xs);
  margin-bottom:18px;overflow:hidden;
}
.alert-strip-header{
  padding:10px 14px;font-size:.8rem;font-weight:700;
  background:var(--surface2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:6px;color:var(--text);
}
.alert-row{
  display:flex;align-items:center;gap:10px;padding:9px 14px;
  cursor:pointer;font-size:.8rem;border-bottom:1px solid var(--border);
  transition:background .12s;
}
.alert-row:last-child{border-bottom:none}
.alert-row:hover{background:var(--surface2)}
.alert-row.type-followup{border-left:3px solid var(--brand)}
.alert-row.type-birthday{border-left:3px solid var(--amber)}
.alert-row.type-urgent{border-left:3px solid var(--red)}
.alert-arrow{margin-left:auto;color:var(--text3);font-size:.78rem}

/* ══════════════════════════════════════════
   TAGS & BADGES
══════════════════════════════════════════ */
.tag{
  display:inline-flex;align-items:center;gap:3px;
  font-size:.66rem;font-weight:600;padding:2px 8px;border-radius:999px;
  white-space:nowrap;
}
.tag-vida{background:#fce7f3;color:#be185d}
.tag-auto{background:#e0f2fe;color:#0369a1}
.tag-salud{background:#d1fae5;color:#065f46}
.tag-hogar{background:#ede9fe;color:#5b21b6}
.tag-empresarial{background:#fef9c3;color:#854d0e}
.tag-arriendo{background:#f0fdf4;color:#166534}
.tag-viaje{background:#e0f2fe;color:#0369a1}
.tag-accidentes{background:#fff7ed;color:#c2410c}
.tag-otro{background:var(--surface2);color:var(--text2)}
[data-theme="dark"] .tag-vida{background:#500724;color:#f9a8d4}
[data-theme="dark"] .tag-auto{background:#082f49;color:#7dd3fc}
[data-theme="dark"] .tag-salud{background:#052e16;color:#6ee7b7}
[data-theme="dark"] .tag-hogar{background:#2e1065;color:#c4b5fd}
[data-theme="dark"] .tag-empresarial{background:#451a03;color:#fcd34d}
[data-theme="dark"] .tag-arriendo{background:#052e16;color:#86efac}
[data-theme="dark"] .tag-viaje{background:#082f49;color:#7dd3fc}
[data-theme="dark"] .tag-accidentes{background:#431407;color:#fdba74}

.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.7rem;font-weight:600}
.badge-prospecto{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
.badge-contactado{background:var(--brand-light);color:var(--brand)}
.badge-cotizacion{background:var(--amber-bg);color:var(--amber)}
.badge-cerrado{background:var(--green-bg);color:var(--green)}
.badge-perdido{background:var(--red-bg);color:var(--red)}

/* ══════════════════════════════════════════
   KANBAN
══════════════════════════════════════════ */
.kanban-wrap{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px}
.k-col{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
  min-width:210px;flex-shrink:0;padding:12px;
  border-top:3px solid var(--border2);
}
.k-col[data-s="prospecto"]{border-top-color:#64748b}
.k-col[data-s="contactado"]{border-top-color:var(--brand)}
.k-col[data-s="cotizacion"]{border-top-color:var(--amber)}
.k-col[data-s="cerrado"]{border-top-color:var(--green)}
.k-col[data-s="perdido"]{border-top-color:var(--red)}
.k-col-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.k-col-head-title{font-size:.72rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.07em}
.k-count{background:var(--border2);color:var(--text2);font-size:.66rem;font-weight:700;padding:1px 7px;border-radius:999px}
.k-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 11px;margin-bottom:7px;cursor:pointer;
  transition:box-shadow .15s,transform .12s,border-color .15s;
  border-left:3px solid transparent;
}
.k-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:var(--border2)}
.k-card.has-alert{border-left-color:var(--amber)}
.k-card-name{font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:3px}
.k-card-meta{font-size:.72rem;color:var(--text3)}
.k-card-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.k-card-alert{font-size:.7rem;color:var(--amber);margin-top:5px;font-weight:500}
.k-card-followup{font-size:.7rem;color:var(--cyan);margin-top:3px}

/* ══════════════════════════════════════════
   TABLE
══════════════════════════════════════════ */
.toolbar{display:flex;gap:7px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.filter-chip{
  padding:5px 13px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);font-size:.76rem;cursor:pointer;color:var(--text2);
  font-weight:500;
  transition:background .13s ease,color .13s ease,border-color .13s ease,transform .12s var(--ease-out);
}
.filter-chip:active{transform:scale(.96)}
.filter-chip:hover{border-color:var(--brand);color:var(--brand)}
.filter-chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.view-toggle{
  margin-left:auto;display:flex;border:1px solid var(--border);
  border-radius:var(--radius-sm);overflow:hidden;
}
.view-btn{
  padding:5px 10px;background:var(--surface);border:none;cursor:pointer;
  font-size:.85rem;color:var(--text3);transition:background .13s ease,color .13s ease;
}
.view-btn.active{background:var(--brand);color:#fff}

table{width:100%;border-collapse:collapse;font-size:.8rem}
thead th{
  padding:8px 12px;text-align:left;font-size:.67rem;font-weight:700;
  color:var(--text3);border-bottom:2px solid var(--border);
  text-transform:uppercase;letter-spacing:.06em;background:var(--surface2);
  white-space:nowrap;
}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
tbody tr:hover{background:var(--surface2)}
tbody td{padding:8px 12px;color:var(--text2)}
tbody td.td-name{color:var(--text);font-weight:600}
.td-actions{display:flex;gap:4px}
.act-btn{
  background:none;border:none;cursor:pointer;
  color:var(--text3);font-size:.9rem;padding:3px 5px;
  border-radius:6px;
  transition:background .11s ease,color .11s ease,transform .1s var(--ease-out);
}
.act-btn:active{transform:scale(.9)}
.act-btn:hover{background:var(--brand-light);color:var(--brand)}
.act-btn.danger:hover{background:var(--red-bg);color:var(--red)}
.act-btn.green:hover{background:var(--green-bg);color:var(--green)}

/* ── CARD GRID VIEW ── */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.client-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;cursor:pointer;transition:box-shadow .18s,transform .15s,border-color .15s;
  border-top:3px solid transparent;
}
.client-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--border2)}
.cc-avatar{
  width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--violet));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.88rem;font-weight:700;margin-bottom:10px;
}
.cc-name{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:2px}
.cc-phone{font-size:.74rem;color:var(--text3);margin-bottom:8px}
.cc-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.cc-value{font-size:.74rem;font-weight:600;color:var(--green)}

/* ══════════════════════════════════════════
   REMINDERS
══════════════════════════════════════════ */
.rem-section{margin-bottom:20px}
.rem-section h4{
  font-size:.7rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px;
  display:flex;align-items:center;gap:6px;
}
.rem-card{
  display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:6px;
  cursor:pointer;transition:box-shadow .14s,border-color .14s;
}
.rem-card:hover{box-shadow:var(--shadow-md);border-color:var(--border2)}
.rem-icon{font-size:1.25rem;flex-shrink:0}
.rem-info{flex:1;min-width:0}
.rem-name{font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rem-detail{font-size:.73rem;color:var(--text3);margin-top:2px}
.rem-pill{font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.rem-today{background:var(--red-bg);color:var(--red)}
.rem-soon{background:var(--amber-bg);color:var(--amber)}
.rem-upcoming{background:var(--brand-light);color:var(--brand)}
.rem-payment{background:var(--violet-bg);color:var(--violet)}

/* ══════════════════════════════════════════
   PÓLIZAS PAGE
══════════════════════════════════════════ */
.poliza-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.poliza-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;transition:box-shadow .18s,transform .15s;
  border-left:4px solid var(--green);position:relative;overflow:hidden;
}
.poliza-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.poliza-card.payment-alert{border-left-color:var(--amber)}
.poliza-card.payment-urgent{border-left-color:var(--red)}
.pc-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.pc-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--green),#34d399);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.84rem;font-weight:800;flex-shrink:0;
}
.pc-name{font-size:.9rem;font-weight:700;color:var(--text)}
.pc-phone{font-size:.74rem;color:var(--text3);margin-top:1px}
.pc-value{font-size:1.25rem;font-weight:800;color:var(--green);margin:10px 0 6px}
.pc-divider{height:1px;background:var(--border);margin:10px 0}
.pc-row{display:flex;justify-content:space-between;align-items:center;font-size:.77rem;margin-bottom:5px}
.pc-label{color:var(--text3);font-weight:500}
.pc-val{color:var(--text);font-weight:600}
.payment-countdown{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;
  margin-top:8px;
}
.pc-vencido{background:var(--red-bg);color:var(--red)}
.pc-urgente{background:var(--amber-bg);color:var(--amber)}
.pc-pronto{background:var(--violet-bg);color:var(--violet)}
.pc-ok{background:var(--green-bg);color:var(--green)}
.payment-overdue{background:var(--red-bg);color:var(--red)}
.payment-today{background:var(--amber-bg);color:var(--amber)}
.payment-urgent{background:var(--amber-bg);color:var(--amber)}
.payment-soon{background:var(--violet-bg);color:var(--violet)}
.payment-ok{background:var(--green-bg);color:var(--green)}

/* ══════════════════════════════════════════
   DOCUMENTOS
══════════════════════════════════════════ */
.docs-section-header{display:flex;justify-content:space-between;align-items:center;margin:18px 0 9px}
.docs-section-header strong{font-size:.84rem;color:var(--text)}
.doc-item{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:5px;transition:background .15s,border-color .15s}
.doc-item:hover{background:var(--brand-light);border-color:var(--brand)}
[data-theme=dark] .doc-item:hover{background:#1e2d45;border-color:var(--brand)}
.doc-icon{font-size:1.4rem;flex-shrink:0;line-height:1}
.doc-info{flex:1;min-width:0}
.doc-name{font-size:.8rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-meta{font-size:.7rem;color:var(--text3);margin-top:2px}
.doc-actions{display:flex;gap:4px;flex-shrink:0}
.doc-upload-area{border:2px dashed var(--border2);border-radius:var(--radius-sm);padding:14px;text-align:center;color:var(--text3);font-size:.78rem;margin-top:4px;cursor:pointer;transition:border-color .15s,background .15s}
.doc-upload-area:hover{border-color:var(--brand);background:var(--brand-light);color:var(--brand)}

/* ══════════════════════════════════════════
   CIERRE DEL MES
══════════════════════════════════════════ */
.cierre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.cierre-kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;border-top:3px solid var(--border);
  transition:box-shadow .18s;
}
.cierre-kpi:hover{box-shadow:var(--shadow-sm)}
.cierre-kpi.ck-green{border-top-color:var(--green)}
.cierre-kpi.ck-blue{border-top-color:var(--brand)}
.cierre-kpi.ck-amber{border-top-color:var(--amber)}
.cierre-kpi.ck-violet{border-top-color:var(--violet)}
.cierre-kpi.ck-red{border-top-color:var(--red)}
.ck-label{font-size:.68rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.ck-value{font-size:1.5rem;font-weight:800;color:var(--text)}
.ck-sub{font-size:.73rem;color:var(--text3);margin-top:3px}
.month-bar{height:7px;background:var(--border);border-radius:4px;overflow:hidden;margin:6px 0 3px}
.month-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--green),#34d399);transition:width .5s}

/* ══════════════════════════════════════════
   WHATSAPP PAGE
══════════════════════════════════════════ */
.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px}
.template-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:15px;transition:border .15s,box-shadow .15s;cursor:pointer;
}
.template-card:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.template-card.selected{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.tc-header{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.tc-icon{font-size:1.3rem}
.tc-title{font-size:.85rem;font-weight:700;color:var(--text)}
.tc-body{font-size:.78rem;color:var(--text2);line-height:1.5;background:var(--surface2);border-radius:8px;padding:9px;font-style:italic}
.wa-preview{
  background:#e7ffd9;border-radius:10px;padding:11px 14px;
  font-size:.84rem;color:#075e54;line-height:1.6;white-space:pre-wrap;
  font-family:'Segoe UI',sans-serif;position:relative;
}
[data-theme="dark"] .wa-preview{background:#1a3a22;color:#a7f3d0}
.wa-preview::after{
  content:'';position:absolute;bottom:-7px;left:14px;
  border-left:7px solid transparent;border-right:0px solid transparent;
  border-top:7px solid #e7ffd9;
}
[data-theme="dark"] .wa-preview::after{border-top-color:#1a3a22}

/* ══════════════════════════════════════════
   CONFIG PAGE
══════════════════════════════════════════ */
.config-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:18px}
.config-section-header{
  padding:12px 18px;border-bottom:1px solid var(--border);
  font-size:.85rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;
}
.config-section-body{padding:16px 18px}
.config-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.config-row:last-child{border-bottom:none}
.config-key{font-size:.82rem;color:var(--text2);font-weight:500}
.config-val{font-size:.78rem;color:var(--text3)}
.api-status{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:600;padding:3px 10px;border-radius:999px}
.api-ok{background:var(--green-bg);color:var(--green)}
.api-no{background:var(--red-bg);color:var(--red)}

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(2px);
}
.overlay.hidden{display:none}
.modal{
  background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);
  box-shadow:var(--shadow-lg);width:100%;max-width:620px;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
}
.modal.modal-lg{max-width:760px}
.modal-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.modal-head h3{font-size:.95rem;font-weight:700;color:var(--text)}
.modal-close{
  background:none;border:none;font-size:1.2rem;cursor:pointer;
  color:var(--text3);line-height:1;padding:3px 6px;border-radius:6px;
  transition:background .12s ease,color .12s ease,transform .1s var(--ease-out);
}
.modal-close:active{transform:scale(.9)}
.modal-close:hover{background:var(--surface2);color:var(--text)}
.modal-body{padding:16px 20px;overflow-y:auto;flex:1}
.modal-foot{
  padding:12px 20px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;
}

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:0}
.fg label{font-size:.72rem;font-weight:600;color:var(--text2);letter-spacing:.02em}
.fg input,.fg select,.fg textarea{
  border:1px solid var(--border2);border-radius:var(--radius-sm);
  padding:7px 11px;font-size:.82rem;color:var(--text);
  background:var(--surface);outline:none;transition:border .14s,box-shadow .14s;width:100%;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow);
}
.fg textarea{resize:vertical;min-height:70px}
[data-theme="dark"] .fg input,[data-theme="dark"] .fg select,[data-theme="dark"] .fg textarea{
  background:var(--surface2);color:var(--text);border-color:var(--border2);
}
[data-theme="dark"] .fg input::placeholder,[data-theme="dark"] .fg textarea::placeholder{color:var(--text3)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-grid .full{grid-column:1/-1}
.section-label{
  font-size:.7rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.08em;
  margin:13px 0 7px;padding-bottom:5px;border-bottom:1px solid var(--border);
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:var(--radius-sm);border:none;
  cursor:pointer;font-size:.8rem;font-weight:600;
  transition:background .14s ease,color .14s ease,border-color .14s ease,
             box-shadow .14s ease,opacity .14s ease,transform .12s var(--ease-out);
  font-family:inherit;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);box-shadow:0 4px 14px rgba(37,99,235,.35)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface2);border-color:var(--border2)}
.btn-sm{padding:5px 12px;font-size:.76rem}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{opacity:.88}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{opacity:.88}

/* ══════════════════════════════════════════
   HISTORY
══════════════════════════════════════════ */
.history-item{
  padding:10px 12px;border-left:3px solid var(--border2);margin-bottom:8px;
  transition:border-color .14s;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--surface2);
}
.history-item:hover{border-left-color:var(--brand)}
.hi-top{display:flex;justify-content:space-between;margin-bottom:4px}
.hi-type{font-size:.7rem;font-weight:700;color:var(--text2);text-transform:uppercase}
.hi-date{font-size:.7rem;color:var(--text3)}
.hi-text{font-size:.8rem;color:var(--text);line-height:1.5}
.hi-next{font-size:.71rem;color:var(--cyan);margin-top:4px}

/* ══════════════════════════════════════════
   MISC
══════════════════════════════════════════ */
.empty{text-align:center;padding:36px 20px;color:var(--text3)}
.empty .ei{font-size:2.2rem;margin-bottom:10px}
.empty p{font-size:.83rem}
.fab{
  position:fixed;bottom:24px;right:24px;z-index:50;
  width:48px;height:48px;border-radius:50%;background:var(--brand);
  color:#fff;font-size:1.4rem;border:none;cursor:pointer;
  box-shadow:0 4px 16px rgba(37,99,235,.45);
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .16s ease,transform .16s var(--ease-out);
}
.fab:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(37,99,235,.55)}
.fab:active{transform:scale(.95)}
/* Botones flotantes de ayuda/soporte — abajo-izquierda, apilados, no compiten con el FAB */
.help-fab{
  position:fixed;bottom:24px;left:24px;z-index:49;
  width:44px;height:44px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:1.25rem;font-weight:700;
  border:none;cursor:pointer;
  box-shadow:0 4px 16px rgba(37,99,235,.4);
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .16s ease,transform .16s ease;
}
.help-fab:hover{transform:scale(1.08);box-shadow:0 6px 22px rgba(37,99,235,.5)}
.help-fab:active{transform:scale(.95)}
.help-fab:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.bug-fab{
  position:fixed;bottom:76px;left:24px;z-index:49;
  width:38px;height:38px;border-radius:50%;
  background:var(--surface);color:var(--text2);font-size:1rem;
  border:1px solid var(--border);cursor:pointer;opacity:.5;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .16s ease,transform .16s ease;
}
.bug-fab:hover{opacity:1;transform:scale(1.08)}
.bug-fab:active{transform:scale(.95)}
.bug-fab:focus-visible{opacity:1;outline:2px solid var(--brand);outline-offset:2px}
.page{display:none}.page.active{display:block}
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.chart-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:15px 17px;
  box-shadow:var(--shadow-xs);transition:background .25s;
}
.chart-title{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:11px;display:flex;align-items:center;gap:6px}
canvas{max-height:220px}
.import-zone{
  border:2px dashed var(--border2);border-radius:var(--radius);
  padding:28px;text-align:center;cursor:pointer;transition:all .14s;
  background:var(--surface2);
}
.import-zone:hover{border-color:var(--brand);background:var(--brand-light)}
.import-zone input{display:none}
.import-zone p{font-size:.83rem;color:var(--text3);margin-top:8px}
.spin{display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(16px);
  opacity:0;
  background:var(--text);color:var(--surface);padding:9px 18px;border-radius:var(--radius-sm);
  font-size:.82rem;font-weight:500;z-index:999;box-shadow:var(--shadow-lg);
  transition:transform .3s var(--ease-drawer),opacity .3s var(--ease-drawer);
  pointer-events:none;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
@media(max-width:900px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .charts-row{grid-template-columns:1fr}
}
#mob-menu-btn{
  display:none;width:34px;height:34px;flex-shrink:0;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-sm);align-items:center;justify-content:center;
  font-size:1.1rem;cursor:pointer;color:var(--text2);transition:background .14s;
}
#mob-menu-btn:hover{background:var(--border)}
#mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:199}
#mob-overlay.show{display:block}
@media(max-width:768px){
  #sidebar{
    position:fixed;left:0;top:0;bottom:0;
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    z-index:200;width:240px;
  }
  #sidebar.open{transform:translateX(0)}
  #mob-menu-btn{display:flex !important}
  #content{padding:12px 11px}
  .search-wrap{min-width:0;flex:1}
  .income-kpi-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr}
  .income-kpi-grid{grid-template-columns:1fr}
  .search-wrap{display:none}
  #topbar{padding-left:11px;padding-right:11px;gap:8px}
  #topbar h2{font-size:.85rem}
}

/* ══ INGRESOS / COMISIONES ══ */
.income-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.persist-bar{height:9px;background:var(--border);border-radius:5px;overflow:hidden;margin-top:6px}
.persist-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,#059669,#10b981);transition:width .5s}
.renewal-table{width:100%;border-collapse:collapse;font-size:.8rem}
.renewal-table th{padding:7px 12px;text-align:left;font-size:.68rem;font-weight:700;color:var(--text3);border-bottom:2px solid var(--border);text-transform:uppercase;letter-spacing:.06em}
.renewal-table td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--text2)}
.renewal-table tr:last-child td{border-bottom:none}
.renewal-table tr:hover td{background:var(--surface2);cursor:pointer}
.cobro-row{display:flex;align-items:center;gap:11px;padding:9px 15px;border-bottom:1px solid var(--border);font-size:.8rem;transition:background .12s}
.cobro-row:last-child{border-bottom:none}
.cobro-row:hover{background:var(--surface2)}
.cobro-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cobro-dot.cobrado{background:var(--green)}
.cobro-dot.pendiente{background:var(--amber)}
.cdown{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.68rem;font-weight:700}
.cdown-urgente{background:var(--red-bg);color:var(--red)}
.cdown-pronto{background:var(--amber-bg);color:var(--amber)}
.cdown-ok{background:var(--green-bg);color:var(--green)}

/* ══ AGENTS ══ */
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.agent-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;cursor:pointer;position:relative;
  transition:box-shadow .18s,transform .15s,border-color .15s;
}
.agent-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:var(--border2)}
.ac-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.ac-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.88rem;font-weight:700;flex-shrink:0}
.ac-info{flex:1;min-width:0}
.ac-name{font-size:.88rem;font-weight:700;color:var(--text)}
.ac-email{font-size:.72rem;color:var(--text3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:1px}
.ac-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}
.ac-stat{background:var(--surface2);border-radius:8px;padding:8px 6px;text-align:center}
.ac-stat-v{font-size:.88rem;font-weight:700;color:var(--text)}
.ac-stat-l{font-size:.62rem;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
.ac-footer{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text3);border-top:1px solid var(--border);padding-top:8px}
.ac-split{font-weight:600}
.ac-quota{color:var(--brand);font-weight:600}
.ac-edit-btn{
  position:absolute;top:10px;right:10px;display:none;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:6px;padding:4px 6px;cursor:pointer;
  color:var(--text3);transition:background .12s ease,color .12s ease;
  align-items:center;justify-content:center;
}
.agent-card:hover .ac-edit-btn{display:flex}
.ac-edit-btn:hover{background:var(--brand-light);color:var(--brand)}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.page-header h2{font-size:1.1rem;font-weight:700;color:var(--text)}

/* ══ LOADING SCREEN ══ */
#loading-screen{
  position:fixed;inset:0;background:var(--bg);z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:opacity .3s;
}
#loading-screen.hidden{opacity:0;pointer-events:none}
.loader-ring{
  width:44px;height:44px;border:4px solid var(--border);
  border-top-color:var(--brand);border-radius:50%;
  animation:spin .8s linear infinite;
}
.loader-text{font-size:.88rem;color:var(--text2);font-weight:500}

/* ══ SUPABASE ALERT ══ */
.supa-alert{
  background:var(--amber-bg);border:1px solid var(--amber);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:16px;font-size:.82rem;color:var(--text);
  display:flex;align-items:flex-start;gap:10px;
}
.supa-alert.hidden{display:none}

/* ══ LOGIN SCREEN ══ */
#login-screen{
  position:fixed;inset:0;z-index:9998;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(135deg,#04080f 0%,#0c1628 60%,#0e1a36 100%);
}
#login-screen.hidden{display:none}
.login-box{
  background:rgba(13,22,37,.9);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px);
  border-radius:var(--radius);box-shadow:0 24px 64px rgba(0,0,0,.6);
  padding:40px 36px;width:100%;max-width:360px;
}
.login-logo{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;font-size:1.3rem;font-weight:800;color:#fff;
  box-shadow:0 0 24px rgba(37,99,235,.5);
}
.login-title{font-size:1.2rem;font-weight:800;color:#f0f4ff;text-align:center;margin-bottom:3px}
.login-sub{font-size:.8rem;color:#4a6080;text-align:center;margin-bottom:26px}
.login-field{margin-bottom:14px}
.login-field label{display:block;font-size:.75rem;font-weight:600;color:#8da0bd;margin-bottom:5px}
.login-field input{
  width:100%;padding:9px 13px;
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);color:#f0f4ff;
  font-size:.88rem;outline:none;transition:border .15s,box-shadow .15s;
}
.login-field input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.login-btn{
  width:100%;padding:10px;
  background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;
  border:none;border-radius:var(--radius-sm);cursor:pointer;
  font-size:.88rem;font-weight:700;margin-top:4px;
  transition:opacity .15s,box-shadow .15s;
  box-shadow:0 4px 16px rgba(37,99,235,.4);
}
.login-btn:hover{opacity:.9;box-shadow:0 6px 24px rgba(37,99,235,.5)}
.login-btn:active{transform:scale(.98)}
.login-box{animation:login-in .5s var(--ease-out) backwards}
@keyframes login-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.login-error{
  color:#f87171;font-size:.78rem;text-align:center;
  margin-top:10px;display:none;
}
.login-error.show{display:block}

/* ══ BIENVENIDA GUIADA ══ */
.wc-hero{background:linear-gradient(135deg,#0c1628 0%,#1a2d50 100%);padding:30px 28px 24px;text-align:center}
.wc-hero-icon{width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,#2563eb,#7c3aed);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.6rem;box-shadow:0 0 26px rgba(37,99,235,.5)}
.wc-hero h2{color:#f0f4ff;font-size:1.3rem;font-weight:800;margin-bottom:5px}
.wc-hero p{color:#8da0bd;font-size:.86rem;max-width:460px;margin:0 auto;line-height:1.5}
.wc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.wc-feature{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 15px;display:flex;flex-direction:column;gap:2px}
.wc-feature .wc-emoji{font-size:1.3rem;margin-bottom:2px}
.wc-feature b{font-size:.86rem;color:var(--text)}
.wc-feature span:not(.wc-emoji){font-size:.76rem;color:var(--text3);line-height:1.45}
.wc-steps-label{font-size:.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.wc-cta{display:flex;gap:10px;flex-wrap:wrap}
.wc-cta .btn{flex:1;min-width:190px;justify-content:center;padding:11px 16px}
@media(max-width:560px){.wc-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════
   MOTION & POLISH (2026-07)
══════════════════════════════════════════ */
/* Entrada de modales: overlay hace fade, el modal escala desde 97% (centro).
   Navegadores sin @starting-style muestran el modal al instante, como antes. */
.overlay{transition:opacity .2s var(--ease-out)}
.modal{transition:transform .22s var(--ease-out),opacity .22s var(--ease-out)}
@starting-style{
  .overlay:not(.hidden){opacity:0}
  .overlay:not(.hidden) .modal{opacity:0;transform:scale(.97) translateY(8px)}
}

/* Cambio de página: fade corto, solo opacidad (sin movimiento — se navega decenas de veces al día) */
.page.active{animation:page-in .15s ease-out}
@keyframes page-in{from{opacity:0}}

/* KPIs del dashboard: fade-up escalonado muy sutil */
.kpi{animation:rise-in .3s var(--ease-out) backwards}
.kpi:nth-child(2){animation-delay:35ms}
.kpi:nth-child(3){animation-delay:70ms}
.kpi:nth-child(4){animation-delay:105ms}
@keyframes rise-in{from{opacity:0;transform:translateY(5px)}}

/* En táctil, :hover se dispara al tocar y el transform se queda pegado — se desactiva */
@media(hover:none){
  .kpi:hover,.k-card:hover,.client-card:hover,.poliza-card:hover,
  .agent-card:hover,.rem-card:hover{transform:none;box-shadow:var(--shadow-xs)}
  .fab:hover{transform:none}
}

/* Objetivos táctiles más generosos en móvil */
@media(max-width:768px){
  .act-btn{padding:7px 9px}
  .nav-item{padding:11px 16px}
  .filter-chip{padding:8px 14px}
  .modal-close{padding:7px 10px}
}

/* Movimiento reducido: se conservan los fades, se elimina el desplazamiento */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .loader-ring{animation-duration:.8s !important;animation-iteration-count:infinite !important}
}

/* ═══ AGENDA / CALENDARIO ═══════════════════════════════════════════ */
/* Lista del día (hoy) */
.ag-today{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;box-shadow:var(--shadow-xs)}
.ag-today-head{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:10px}
.ag-empty-today{font-size:.82rem;color:var(--text3)}
.ag-empty-today a{color:var(--brand);cursor:pointer;font-weight:600}
.ag-row{display:flex;gap:12px;align-items:stretch;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);border-left:3px solid var(--ag-c,var(--brand));background:var(--surface2);margin-bottom:6px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.ag-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ag-row-time{font-size:.7rem;font-weight:700;color:var(--text2);text-align:center;min-width:42px;line-height:1.25;align-self:center;font-variant-numeric:tabular-nums}
.ag-row-title{font-size:.86rem;font-weight:600;color:var(--text)}
.ag-row-sub{font-size:.72rem;color:var(--text3);margin-top:2px}

/* Barra de navegación de semana */
.ag-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ag-range{font-size:.9rem;font-weight:700;color:var(--text)}
.ag-nav{display:flex;gap:6px}

/* Rejilla semanal */
.ag-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.ag-day{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);min-height:120px;display:flex;flex-direction:column;overflow:hidden}
.ag-day.today{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.ag-day-head{display:flex;align-items:center;gap:5px;padding:7px 9px;border-bottom:1px solid var(--border);background:var(--surface2)}
.ag-day.today .ag-day-head{background:var(--brand-light)}
.ag-dow{font-size:.66rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.ag-dnum{font-size:.86rem;font-weight:700;color:var(--text)}
.ag-day.today .ag-dnum{color:var(--brand)}
.ag-add{margin-left:auto;width:20px;height:20px;border:none;border-radius:6px;background:transparent;color:var(--text3);font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.ag-add:hover{background:var(--brand);color:#fff}
.ag-day-body{flex:1;padding:6px;display:flex;flex-direction:column;gap:5px}
.ag-day-empty{flex:1;min-height:40px;cursor:pointer;border-radius:6px;transition:background .12s}
.ag-day-empty:hover{background:var(--surface2)}

/* Chip de evento */
.ag-ev{border-left:3px solid var(--ag-c,var(--brand));background:var(--surface2);border-radius:6px;padding:5px 7px;cursor:pointer;transition:transform .12s,box-shadow .12s;overflow:hidden}
.ag-ev:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ag-ev-time{display:block;font-size:.64rem;font-weight:700;color:var(--text3);font-variant-numeric:tabular-nums}
.ag-ev-title{display:block;font-size:.74rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-ev-owner{display:block;font-size:.62rem;color:var(--text3);margin-top:1px}

/* Eventos AUTOMÁTICOS derivados del CRM (seguimientos/vencimientos) */
.ag-ev.ag-auto,.ag-mev.ag-auto{border-left-style:dashed;background:transparent}
.ag-row.ag-auto{border-left-style:dashed;background:transparent}
.ag-ev.ag-auto .ag-ev-title{color:var(--text2);font-weight:500}
.ag-autotog{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--text2);cursor:pointer;user-select:none}
.ag-autotog input{width:auto;margin:0}

/* Selector de vista (segmentado) */
.ag-switch{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px}
.ag-vbtn{border:none;background:transparent;color:var(--text2);font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:6px;cursor:pointer;transition:background .12s,color .12s}
.ag-vbtn:hover{color:var(--text)}
.ag-vbtn.active{background:var(--brand);color:#fff}

/* Vista MES */
.ag-month{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ag-mhead{font-size:.66rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;text-align:center;padding:2px 0}
.ag-mcell{min-height:94px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 5px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.ag-mcell.out{opacity:.45}
.ag-mcell.today{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.ag-mday{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;font-weight:700;color:var(--text)}
.ag-mcell.today .ag-mday{color:var(--brand)}
.ag-mday .ag-add{width:18px;height:18px;opacity:0;transition:opacity .12s}
.ag-mcell:hover .ag-add{opacity:1}
.ag-mev{font-size:.68rem;line-height:1.3;padding:2px 5px;border-left:2px solid var(--ag-c,var(--brand));background:var(--surface2);border-radius:4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s}
.ag-mev:hover{background:var(--brand-light)}
.ag-more{font-size:.64rem;color:var(--brand);font-weight:600;cursor:pointer;padding-left:3px}

/* Vista AÑO (12 mini-meses) */
.ag-year{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.ag-mini{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px}
.ag-mini-h{font-size:.8rem;font-weight:700;color:var(--text);margin-bottom:6px;cursor:pointer}
.ag-mini-h:hover{color:var(--brand)}
.ag-mini-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ag-yd{font-size:.62rem;text-align:center;padding:3px 0;color:var(--text2);border-radius:4px;font-variant-numeric:tabular-nums}
.ag-yd.hd{color:var(--text3);font-weight:700}
.ag-yd.out{visibility:hidden}
.ag-yd:not(.hd):not(.out){cursor:pointer}
.ag-yd:not(.hd):not(.out):hover{background:var(--surface2)}
.ag-yd.has{font-weight:700;color:var(--brand);background:var(--brand-light)}
.ag-yd.today{outline:1.5px solid var(--brand);color:var(--brand);font-weight:700}

/* Móvil */
@media(max-width:720px){
  .ag-week{grid-template-columns:repeat(7,minmax(150px,1fr));overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .ag-month{gap:3px}
  .ag-mcell{min-height:58px;padding:3px}
  .ag-mev{font-size:.6rem;padding:1px 3px}
  .ag-mday .ag-add{display:none}
  .ag-year{grid-template-columns:repeat(2,1fr);gap:10px}
  .ag-toolbar{gap:8px}
}

/* ═══ iOS PWA — SAFE AREA (notch / barra de estado / home indicator) ═══ */
/* La app instalada usa viewport-fit=cover, así que el contenido llega al
   borde del iPhone. Sin estos insets, la barra superior con el menú (☰)
   queda BAJO el notch/barra de estado y no se alcanza a tocar. La barra
   crece para llenar esa zona y su contenido baja debajo de ella. En Android
   y escritorio env(safe-area-inset-*) = 0, así que no cambia nada allí. */
#topbar{
  height:calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
}
#sidebar{ padding-top:env(safe-area-inset-top); }
.sidebar-footer{ padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
#login-screen{
  padding-top:max(20px, env(safe-area-inset-top));
  padding-bottom:max(20px, env(safe-area-inset-bottom));
}
/* Botones flotantes y toast: por encima del home indicator */
.fab{ bottom:calc(24px + env(safe-area-inset-bottom)); }
.help-fab{ bottom:calc(24px + env(safe-area-inset-bottom)); }
.bug-fab{ bottom:calc(76px + env(safe-area-inset-bottom)); }
.toast{ bottom:calc(22px + env(safe-area-inset-bottom)); }