/* ============================================================
   IMMA CRM — app theme.
   SAME visual identity as the commercial site (immacrm.com):
   green on black, super tech · glassmorphism · glowing edges ·
   charts WITH body, never flat. Amber survives ONLY as a
   semantic accent (notepad, confirmation cards, due-today),
   red only for alerts — exactly like the site.
   ============================================================ */
:root{
  color-scheme:dark;
  --bg0:#010302; --bg1:#030604; --bg2:#06110b;
  --ink:#edf7f1; --muted:#9db8ab; --muted2:#6d8a7c;
  --green:#00d47e; --green2:#00a862; --mint:#2ee6a8; --mint-soft:#5ff2b6; --deep:#045c38;
  --amber:#ffb84d; --red:#ff6b81;
  --line:rgba(110,255,190,.16); --line-soft:rgba(255,255,255,.08);
  --glass:linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  --glass-brd:rgba(255,255,255,.10);
  --field:rgba(0,0,0,.35);
  --shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
  --shadow-sm:0 10px 24px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  --grad:linear-gradient(92deg, #00a862 0%, #00d47e 42%, #2ee6a8 78%, #8affd1 112%);
  --grad-mint:linear-gradient(92deg, #17c78f, #2ee6a8);
  --radius:16px;
  --font-b:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-d:'Space Grotesk', 'Inter', -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-b);
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(0,212,126,.17), rgba(0,212,126,0) 62%),
    radial-gradient(820px 520px at 88% 0%, rgba(46,230,168,.10), rgba(46,230,168,0) 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 340px, var(--bg0));
  background-color:var(--bg0); background-attachment:fixed;
  color:var(--ink); min-height:100vh; padding-bottom:env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased}
::selection{background:rgba(46,230,168,.35)}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--muted2)}
input[type=checkbox]{accent-color:var(--green2);width:17px;height:17px}
a{color:var(--mint-soft)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(46,230,168,.30);border-radius:99px;border:2px solid var(--bg0)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- auth ---------- */
.auth-wrap{max-width:430px;margin:0 auto;padding:34px 18px 40px}
.brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:6px}
.tagline{text-align:center;color:var(--muted);margin:2px 0 22px}
.card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px}
.card h2{margin:0 0 14px;font-size:20px;color:#fff;font-family:var(--font-d);letter-spacing:-.01em}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1.5px solid var(--line);
  border-radius:11px;background:var(--field);outline:none;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--mint);
  box-shadow:0 0 0 3px rgba(46,230,168,.18)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:12px;
  padding:11px 18px;font-weight:700;background:var(--grad);
  color:#03130c;box-shadow:0 8px 26px rgba(0,212,126,.38), inset 0 1px 0 rgba(255,255,255,.35);text-decoration:none;transition:.18s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.indigo{background:linear-gradient(165deg, rgba(0,212,126,.30), rgba(0,168,98,.13));
  color:#c9ffe9;border-color:rgba(110,255,190,.42);box-shadow:var(--shadow-sm)}
.btn.ghost{background:rgba(255,255,255,.05);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:rgba(120,255,205,.5)}
.btn.small{padding:7px 12px;font-size:13.5px;border-radius:10px}
.btn.block{width:100%}
.btn.danger{background:linear-gradient(180deg,#e5485f,#a12338);color:#fff;
  box-shadow:0 8px 22px rgba(229,72,95,.32), inset 0 1px 0 rgba(255,255,255,.25)}
.linkish{background:none;border:none;color:var(--mint);font-weight:600;padding:4px}
.err{background:rgba(255,107,129,.10);border:1px solid rgba(255,107,129,.45);color:#ffb3c0;border-radius:11px;padding:10px 12px;margin-bottom:12px;font-size:14px}
.okmsg{background:rgba(46,230,168,.10);border:1px solid rgba(46,230,168,.42);color:#a9f2cd;border-radius:11px;padding:10px 12px;margin-bottom:12px;font-size:14px}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.codes code{background:rgba(0,0,0,.35);border:1.5px dashed rgba(46,230,168,.55);border-radius:10px;padding:9px;text-align:center;font-size:15px;font-weight:700;letter-spacing:1px;color:#eafff5}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center}

/* ---------- shell ---------- */
header.top{position:sticky;top:0;z-index:30;background:rgba(2,4,3,.85);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(110,255,190,.13);padding:calc(8px + env(safe-area-inset-top)) 14px 8px}
.top-row{display:flex;align-items:center;gap:10px;max-width:1180px;margin:0 auto}
.top .brand{margin:0;justify-content:flex-start}
.top .spacer{flex:1}
.company-chip{font-size:12.5px;color:var(--muted);text-align:right;line-height:1.25}
.company-chip b{color:#fff;font-size:13.5px}
#country-btn{white-space:nowrap}
#signout-btn{white-space:nowrap}
@media(max-width:560px){.top-row{flex-wrap:wrap}}
/* Fase 7: greeting quick options + working-country picker */
.ask-greet-opts{display:flex;gap:6px;flex-wrap:wrap}
/* Fase 7.1: the assistant's card at the top of the home screen —
   the same glass body as the app's panels, with the mint accent
   line of the brand. It asks the daily country question right
   there; afterwards it is a one-line status with a change shortcut. */
.ai-home{display:flex;align-items:flex-start;gap:12px;
  border-color:rgba(46,230,168,.35);
  background:linear-gradient(165deg, rgba(46,230,168,.10), rgba(255,255,255,.02))}
.ai-home-clover{width:40px;height:40px;flex:0 0 auto;border-radius:10px}
.ai-home-main{flex:1 1 auto;min-width:0}
.ai-home-name{font-family:var(--font-d);font-weight:700;color:#fff;font-size:15px;letter-spacing:.01em}
.ai-home-msg{margin:3px 0 10px;color:#dff7ea;font-size:14.5px;line-height:1.45}
.ai-home-msg.confirm{color:#c9f5df}
.ai-home.status{align-items:center}
.ai-home.status .ai-home-msg{margin-bottom:0}
.ai-home-skip{flex:0 0 auto;background:none;border:none;color:var(--muted);font-size:13px;
  font-weight:700;cursor:pointer;padding:4px 2px;text-decoration:underline}
.ai-home-skip:hover{color:#fff}
.country-list{max-height:52vh;overflow-y:auto;margin-top:4px}
.country-row{cursor:pointer}
.country-row:hover{border-color:rgba(120,255,205,.5)}
nav.tabs{display:flex;gap:6px;overflow-x:auto;max-width:1180px;margin:10px auto 2px;padding-bottom:4px;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{flex:0 0 auto;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:999px;
  padding:8px 15px;font-weight:700;color:#cfe9dc;box-shadow:var(--shadow-sm);transition:.18s}
nav.tabs button:hover{border-color:rgba(120,255,205,.5);color:#fff}
nav.tabs button.active{background:var(--grad);color:#03130c;border-color:transparent;
  box-shadow:0 8px 22px rgba(0,212,126,.42), inset 0 1px 0 rgba(255,255,255,.35)}
/* v0.11.14 (E29): sign-out left the tab bar entirely — it lives
   only inside the header Profile panel, in its own zone at the
   bottom of the sheet, set apart from the profile form. The
   profile button keeps the user's name on one line in the corner. */
.profile-logout-zone{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
#profile-btn{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main{max-width:1180px;margin:0 auto;padding:16px 14px 44px}
/* v0.11.3: home-screen quick access — the ☰ menu's destinations as
   big touch pills on the Dashboard itself, in the tab bar's own pill
   language (glass body, green gradient on the active one). An added
   zone only: the layout around it does not change. */
.quick-access{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 14px}
.quick-access .qa-btn{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:999px;
  padding:13px 15px;font:inherit;font-weight:700;font-size:15.5px;color:#cfe9dc;box-shadow:var(--shadow-sm);transition:.18s;cursor:pointer}
.quick-access .qa-btn:hover{border-color:rgba(120,255,205,.5);color:#fff}
.quick-access .qa-btn.active{background:var(--grad);color:#03130c;border-color:transparent;
  box-shadow:0 8px 22px rgba(0,212,126,.42), inset 0 1px 0 rgba(255,255,255,.35)}
@media(min-width:761px){.quick-access{grid-template-columns:repeat(4,1fr)}}
/* Fase 8: free-period banner — same glass body as the app's cards.
   "soon" is discreet (mint line); "expired" carries the amber
   semantic accent and stays until the account is activated. */
#trial-slot{max-width:1180px;margin:0 auto;padding:0 14px}
.trial-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding:13px 16px;border-radius:14px;font-size:14px;line-height:1.45;
  background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.trial-banner.soon{color:#c9f5df;border-color:rgba(46,230,168,.35)}
.trial-banner.expired{border-color:rgba(255,184,77,.55);background:linear-gradient(165deg, rgba(255,184,77,.10), rgba(255,255,255,.02))}
.trial-banner.expired b{color:var(--amber);font-family:var(--font-d);letter-spacing:.01em}
.trial-banner .trial-banner-text{flex:1 1 260px}
.trial-banner.flash{animation:trialflash 1.1s ease}
@keyframes trialflash{0%,100%{box-shadow:var(--shadow-sm)}30%{box-shadow:0 0 0 3px rgba(255,184,77,.55), var(--shadow-sm)}}
h2.view{margin:4px 0 14px;color:#fff;font-size:22px;font-family:var(--font-d);letter-spacing:-.01em}

/* ---------- stat cards + charts (with body) ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.stat{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 16px}
.stat .num{font-family:var(--font-d);font-size:31px;font-weight:700;line-height:1.05;
  background:linear-gradient(180deg,#fff,#b8ffd9);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{font-size:13px;color:var(--muted);font-weight:600}
.stat.alert .num{background:none;color:var(--red);-webkit-text-fill-color:var(--red)}
.stat.today .num{background:none;color:var(--amber);-webkit-text-fill-color:var(--amber)}
.panel{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.panel h3{margin:0 0 12px;color:#fff;font-size:16.5px;font-family:var(--font-d)}
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:minmax(90px,150px) 1fr auto;align-items:center;gap:10px;font-size:13.5px}
.bar-track{height:22px;background:rgba(0,0,0,.42);border-radius:8px;border:1px solid var(--line-soft);overflow:hidden}
.bar-fill{height:100%;border-radius:7px;background:linear-gradient(180deg,#6ff7c4 0%,var(--green) 55%,#045c38 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset -5px 0 9px rgba(0,0,0,.28), inset 0 -3px 5px rgba(0,0,0,.25);min-width:2px}
.bar-val{font-weight:800;color:#eafff5;white-space:nowrap}
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut{width:128px;height:128px;border-radius:50%;box-shadow:0 16px 34px rgba(0,0,0,.5), inset 0 3px 8px rgba(255,255,255,.35), inset 0 -8px 12px rgba(0,0,0,.45);position:relative;flex:0 0 auto}
.donut::after{content:"";position:absolute;inset:26px;background:#050a07;border-radius:50%;box-shadow:inset 0 2px 8px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06)}
.legend{display:flex;flex-direction:column;gap:6px;font-size:14px}
.legend .dot{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:8px;box-shadow:inset 0 -2px 3px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.35)}

/* ---------- notepad (amber semantic accent, like the site) ---------- */
.notepad{border:1px solid rgba(255,184,77,.34);background:linear-gradient(165deg, rgba(255,184,77,.10), rgba(255,184,77,.028));box-shadow:var(--shadow)}
.notepad-head{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.notepad-head .np-icon{font-size:22px}
.notepad-head h3{margin:0;flex:1}
.np-preview{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.np-chev{font-size:19px;color:var(--amber);transition:transform .18s}
.notepad.open .np-chev{transform:rotate(180deg)}
.notepad-body{display:none;margin-top:13px}
.notepad.open .notepad-body{display:block}
.np-list{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.np-chip{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink)}
.np-chip.active{border-color:rgba(46,230,168,.6);background:rgba(46,230,168,.14);color:#a9f2cd}
.np-chip.pinned::before{content:"📌 "}
.notepad textarea{width:100%;min-height:120px;border:1.5px solid rgba(255,184,77,.30);border-radius:12px;
  padding:11px;background:rgba(0,0,0,.30);resize:vertical;color:var(--ink);outline:none}
.notepad textarea:focus{border-color:var(--amber)}
.np-actions{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.np-save{margin-left:auto;font-size:13px;color:var(--muted2)}
.np-title{width:100%;border:1.5px solid rgba(255,184,77,.30);border-radius:11px;padding:9px 11px;margin-bottom:8px;background:rgba(0,0,0,.30);color:var(--ink);outline:none}
.np-title:focus{border-color:var(--amber)}

/* ---------- tables / lists ---------- */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.toolbar input[type=search]{flex:1;min-width:150px;padding:10px 12px;border:1.5px solid var(--line);border-radius:11px;background:var(--field);color:var(--ink);outline:none}
.toolbar input[type=search]:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(46,230,168,.16)}
.toolbar select{padding:10px;border:1.5px solid var(--line);border-radius:11px;background:var(--field);color:var(--ink);outline:none}
table.list{width:100%;border-collapse:collapse;background:rgba(255,255,255,.03);border:1px solid var(--glass-brd);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
table.list th{background:rgba(255,255,255,.05);text-align:left;font-size:12.5px;color:var(--muted);padding:10px 12px}
table.list td{padding:10px 12px;border-top:1px solid rgba(255,255,255,.06);font-size:14.5px;vertical-align:top}
table.list tr[data-id]{cursor:pointer}
table.list tr[data-id]:hover{background:rgba(46,230,168,.06)}
.prio{font-weight:800;border-radius:8px;padding:2px 8px;font-size:12.5px;background:rgba(255,255,255,.07);color:#cfe9dc;border:1px solid rgba(255,255,255,.10)}
.prio.hot{background:rgba(255,107,129,.16);color:#ff9fb0;border-color:rgba(255,107,129,.40)}
.prio.warm{background:rgba(255,184,77,.15);color:var(--amber);border-color:rgba(255,184,77,.40)}
.chip{display:inline-block;border-radius:999px;padding:2.5px 10px;font-size:12.5px;font-weight:700;background:rgba(0,212,126,.14);color:#a9f2cd;border:1px solid rgba(110,255,190,.35)}
.chip.red{background:rgba(255,107,129,.12);color:#ff9fb0;border-color:rgba(255,107,129,.42)}
.chip.amber{background:rgba(255,184,77,.12);color:#ffd9a0;border-color:rgba(255,184,77,.42)}
@media (max-width:640px){ .hide-sm{display:none} }

/* ---------- pipeline ---------- */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(225px,255px);gap:12px;overflow-x:auto;padding-bottom:10px}
.col{background:rgba(255,255,255,.028);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:11px;min-height:120px}
.col h4{margin:0 0 2px;color:#fff;font-size:14.5px;font-family:var(--font-d)}
.col .sum{font-size:12.5px;color:var(--muted);margin-bottom:9px}
.pcard{background:linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.11);border-radius:12px;padding:9px 11px;margin-bottom:8px;box-shadow:0 9px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.13)}
.pcard b{display:block;font-size:14.5px}
.pcard .meta{font-size:12.5px;color:var(--muted)}
.pcard select{width:100%;margin-top:7px;padding:6px;border:1.5px solid var(--line);border-radius:8px;background:var(--field);color:var(--ink)}

/* ---------- drawer / modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(1,3,2,.68);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:linear-gradient(180deg,#071009,#040705);border:1px solid rgba(110,255,190,.20);width:100%;max-width:640px;max-height:92vh;overflow-y:auto;border-radius:20px 20px 0 0;padding:20px;box-shadow:var(--shadow);color:var(--ink)}
@media(min-width:700px){.overlay{align-items:center}.sheet{border-radius:20px}}
.sheet h3{margin:0 0 12px;color:#fff;font-family:var(--font-d)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
footer.foot{max-width:1180px;margin:0 auto;padding:0 14px 30px;color:var(--muted2);font-size:12.5px}
footer.foot b{color:var(--muted)}
.task-row{display:flex;gap:10px;align-items:center;background:linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.025));border:1px solid var(--glass-brd);border-radius:12px;padding:10px 12px;margin-bottom:8px;box-shadow:var(--shadow-sm)}
.task-row .t{flex:1}.task-row.done .t{text-decoration:line-through;color:var(--muted2)}
.rowline{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.rowline .grow{flex:1}

/* ---------- Ask IMMA CRM chat (Fase 2) — same language as the site chat ---------- */
/* z-index 40: BELOW the modal sheets (.overlay = 50). The launcher
   must never sit on top of an open sheet — on the phone it covered
   the sheet's Cancel button almost entirely and left it untappable
   (responsive audit, 2026-10-29). The panel itself stays at 60. */
.ask-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;
  display:flex;align-items:center;gap:7px;padding:12px 18px;border:none;border-radius:999px;cursor:pointer;
  font-weight:800;font-size:15px;color:#04150d;background:var(--grad-mint);
  box-shadow:0 10px 28px rgba(46,230,168,.45), inset 0 1px 0 rgba(255,255,255,.35)}
.ask-fab:active{transform:scale(.97)}
.ask-panel{position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:60;
  width:min(400px,94vw);height:min(580px,76vh);display:none;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#050a07,#030503);border:1px solid rgba(110,255,190,.28);border-radius:20px;box-shadow:var(--shadow)}
.ask-panel.open{display:flex}
.ask-head{display:flex;align-items:center;gap:9px;padding:12px 14px;color:var(--ink);
  background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.07)}
.ask-head .clover{font-size:20px}
.ask-head b{font-size:16px}
.ask-sub{font-size:11.5px;opacity:.85;color:var(--muted)}
.ask-x{margin-left:auto;background:rgba(255,255,255,.10);border:none;color:#fff;width:30px;height:30px;
  border-radius:50%;cursor:pointer;font-size:14px}
.ask-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:rgba(0,0,0,.25)}
.ask-msg{max-width:86%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;white-space:normal;
  background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.10);box-shadow:var(--shadow-sm);align-self:flex-start;color:var(--ink)}
.ask-msg.user{align-self:flex-end;background:linear-gradient(150deg, var(--green2), #045c38);border-color:rgba(110,255,190,.35);color:#eafff5;
  box-shadow:0 10px 22px rgba(0,90,55,.4)}
.ask-cardbox{width:86%;max-width:86%;background:linear-gradient(165deg, rgba(255,184,77,.13), rgba(255,184,77,.04));
  border:1px solid rgba(255,184,77,.45);box-shadow:0 16px 34px rgba(0,0,0,.4)}
.ask-card-title{font-weight:800;color:var(--amber);margin-bottom:8px;font-size:13.5px}
.ask-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.13);font-size:13.5px}
.ask-row span{color:var(--muted)}
.ask-row b{color:var(--ink);text-align:right}
.ask-note-body{white-space:pre-wrap;font-size:14px;background:rgba(0,0,0,.30);border:1px dashed rgba(255,184,77,.38);border-radius:10px;padding:8px 10px;color:var(--ink)}
.ask-card-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ask-cands{display:flex;gap:6px;flex-wrap:wrap}
.ask-form{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.ask-form input{flex:1;padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;font-size:14.5px;background:var(--field);color:var(--ink)}
.ask-form input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(46,230,168,.16)}
@media(max-width:560px){.ask-panel{right:3vw;left:3vw;width:auto}}

/* ---------- logo oficial (trébol original + Órbita) ---------- */
.brand-logo{height:64px;width:auto}
.top .brand-logo-sm{height:29px;width:auto}
.ask-logo{height:23px;width:auto}
.ask-name{font-weight:800;font-size:15.5px;margin-left:9px}
.fab-clover{width:19px;height:19px}
.ask-card-clover{width:15px;height:15px;vertical-align:-2px}

/* ---------- Fase 9: language/country zone (top left) + RTL ---------- */
.top-left-zone{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
[dir="rtl"] .company-chip{text-align:left}
[dir="rtl"] .ask-fab{right:auto;left:16px}
[dir="rtl"] .ask-panel{right:auto;left:16px}
@media(max-width:560px){[dir="rtl"] .ask-panel{left:3vw;right:3vw}}
[dir="rtl"] .trial-banner{direction:rtl}
[dir="rtl"] input,[dir="rtl"] textarea{text-align:right}
[dir="rtl"] input[type="search"],[dir="rtl"] input[type="email"],[dir="rtl"] input[type="password"]{text-align:right}

/* Team Activity (v0.9.0) */
.act-row{align-items:flex-start}
.act-row .grow{line-height:1.45}
.act-instr{margin-top:4px;font-size:13px}
.act-when{white-space:nowrap;padding-top:2px}

/* Per-prospect notes (v0.9.1) */
.pnote{border-bottom:1px solid rgba(255,255,255,.07);padding:8px 0}
.pnote-body{white-space:pre-wrap;line-height:1.45}
.pnote-meta{margin-top:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ---------- v0.10.0 (QA round 2) ---------- */
/* B1: long unbroken names wrap inside cards and activity rows
   instead of pushing the layout sideways. */
.pcard{max-width:100%}
.pcard b{overflow-wrap:anywhere}
.act-row .grow{overflow-wrap:anywhere;min-width:0}
.rowline .grow{min-width:0}
/* M7: hamburger menu on narrow screens — the tab bar never gets
   cut mid-word ("Follow-u…") again; it becomes a vertical menu.
   v0.11.13 (E28) SUPERSEDES the hiding half of M7 — Emman's
   navigation rule (2026-11-02): the section bar stays ALWAYS
   visible under the header on every screen and device, so going
   anywhere is one tap and never a hunt through the ☰ menu. The
   row keeps its full-word pills and scrolls sideways; the ☰
   button still expands the same bar into the vertical menu. */
#menu-btn{display:none}
@media(max-width:860px){
  #menu-btn{display:inline-flex}
  nav.tabs.open{display:flex;flex-direction:column;align-items:stretch;overflow:visible;gap:7px}
  nav.tabs.open button{text-align:left;flex:0 0 auto}
}
/* B10: compact header + one-column forms on small screens, and
   tables that scroll horizontally instead of hiding columns. */
@media(max-width:760px){
  .grid2{grid-template-columns:1fr}
}
@media(max-width:560px){
  header.top{padding:calc(6px + env(safe-area-inset-top)) 10px 6px}
  .top .brand-logo-sm{height:24px}
  .top-row{gap:6px}
  .company-chip .chip-email{display:none}
  .company-chip{font-size:11.5px}
}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table.list{min-width:600px}
/* M4: follow-up row actions */
.fu-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.fu-resched{display:none;gap:6px;align-items:center;margin-top:7px}
.fu-resched.open{display:flex}
.fu-resched input[type=date]{padding:7px 9px;border:1.5px solid var(--line);border-radius:9px;background:var(--field);color:var(--ink)}
/* M5: finder progress */
.fd-progress{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fd-spinner{width:16px;height:16px;flex:0 0 auto;border:2.5px solid rgba(46,230,168,.25);border-top-color:var(--mint);border-radius:50%;animation:fdspin .8s linear infinite}
@keyframes fdspin{to{transform:rotate(360deg)}}
.fd-term{margin-top:6px}
/* Drag & drop pipeline (suggested improvement) */
.pcard[draggable="true"]{cursor:grab}
.pcard[draggable="true"]:active{cursor:grabbing}
.col.dragover{border-color:rgba(46,230,168,.65);background:rgba(46,230,168,.06)}
/* Toast (import + restore results stay visible across re-renders) */
#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(16px);bottom:calc(84px + env(safe-area-inset-bottom));z-index:70;
  max-width:min(520px,92vw);background:linear-gradient(165deg, rgba(0,60,35,.97), rgba(2,20,12,.97));
  border:1px solid rgba(46,230,168,.55);color:#eafff5;border-radius:13px;padding:12px 16px;font-size:14.5px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Settings: plan / about / restore dialog */
.plan-line{font-size:14.5px;line-height:1.5}
.whatsnew{white-space:pre-line;font-size:14px;line-height:1.55;color:var(--ink)}
.restore-counts{width:100%;border-collapse:collapse;margin:10px 0}
.restore-counts th,.restore-counts td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;font-size:14px}
.sortable{cursor:pointer;user-select:none}
.sortable:hover{color:#fff}
/* v0.11.0: data-authorization gate + platform owner panel */
.consent-wrap{max-width:680px}
.consent-text{white-space:pre-wrap;max-height:300px;overflow-y:auto;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.55;background:rgba(255,255,255,.03);margin:10px 0}
.consent-text.reg{max-height:170px}
.consent-check{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;margin:10px 0;cursor:pointer}
.consent-check input{margin-top:3px;width:17px;height:17px;flex:0 0 auto}
.owner-view-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,184,77,.55);background:linear-gradient(165deg, rgba(255,184,77,.12), rgba(255,255,255,.02));font-size:14px}
.owner-view-banner .grow{flex:1 1 240px}
.owner-company{border-bottom:1px solid rgba(255,255,255,.08);padding:10px 0}
.owner-company:last-child{border-bottom:none}

/* v0.14.0 — ERP integrations section */
.erp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.erp-card{border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px;background:rgba(255,255,255,.03)}
.erp-card-name{font-weight:700;margin-bottom:6px}
.erp-conn{border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px;margin-bottom:10px;background:rgba(255,255,255,.03)}
.erp-togs{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0}
.erp-tog{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.erp-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* ===== IMMA FRM prototype: warm theme + mode switch ===== */
.mode-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-left:10px}
.mode-switch button{background:transparent;color:var(--muted);border:0;padding:6px 14px;font-weight:700;cursor:pointer}
.mode-switch button.on{background:var(--grad);color:#041;}
.mode-name{margin-left:8px;font-weight:800;background:var(--grad);-webkit-background-clip:text;color:transparent}
html.mode-frm{
  --bg0:#0d0504; --bg1:#140806; --bg2:#1f0e0a;
  --ink:#fff3ee; --muted:#e0b9a8; --muted2:#a07c6c;
  --green:#ff7a59; --green2:#e85d3f; --mint:#ffb38a; --mint-soft:#ffc9a8; --deep:#7a2e1c;
  --line:rgba(255,160,120,.18);
  --grad:linear-gradient(92deg,#e85d3f 0%,#ff7a59 42%,#ffb38a 78%,#ffd9c2 112%);
  --grad-mint:linear-gradient(92deg,#ff8a65,#ffb38a);
}
html.mode-frm .mode-switch button.on{color:#3a1208}
.fechas{list-style:none;padding:0}.fechas li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
/* IMMA FRM views */
.frm-date{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line,#2a3a33)}
.frm-date .grow{flex:1}
.frm-ic{font-size:1.2em}
.frm-late{color:#ff8a6b;font-weight:600}
.chip.red{background:#ff6b5f33;color:#ff8a6b;padding:2px 8px;border-radius:10px}
.chip.amber{background:#ffb84d33;color:#ffb84d;padding:2px 8px;border-radius:10px}
html.mode-frm .bar-fill{background:linear-gradient(180deg,#ffc2a1 0%,#ff7a62 55%,#b8432f 100%)}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
.frm-people-pills{display:flex;flex-wrap:wrap;gap:8px}
.frm-people-pills .qa-btn{width:auto;padding:8px 16px;border:1px solid var(--line);background:rgba(255,255,255,.05);
  border-radius:999px;font:inherit;font-weight:700;font-size:14.5px;color:var(--ink);cursor:pointer;transition:.18s}
.frm-people-pills .qa-btn:hover{border-color:var(--mint);color:#fff}
.frm-people-pills .qa-btn.active{background:var(--grad);color:#1a0b05;border-color:transparent}
.frm-mem-add textarea{width:100%;min-height:70px;padding:10px 12px;border:1.5px solid var(--line);border-radius:11px;
  background:var(--field);color:var(--ink);outline:none;resize:vertical}
.frm-mem-add textarea:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(255,140,90,.16)}
.frm-mem-add .row-actions{margin-top:8px}
.frm-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:12px 0}
.frm-photos figure{margin:0}.frm-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.frm-mem{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}