/* =========================================================
   Brasil Software · CRM Leads — Redesign visual (2026)
   Paleta, tipografia e layout: modernos, minimalistas, AA
   Mobile-first · todos os seletores preservados
   ========================================================= */

:root{
  /* —— Paleta base (marca verde Brasil Software) —— */
  --green:#15803D;
  --green-dark:#166534;
  --green-light:#86EFAC;
  --green-bg:#F0FDF4;

  --whatsapp:#25D366;
  --whatsapp-dark:#1EBE5B;

  --ink:#0F172A;
  --muted:#64748B;
  --line:#E2E8F0;
  --bg:#F8FAFC;
  --card:#FFFFFF;

  --red:#DC2626;
  --red-bg:#FEE2E2;
  --orange:#D97706;
  --orange-bg:#FEF3C7;
  --amber-dark:#92400E;
  --amber-light:#FCD34D;

  /* —— Cores de status (badges + cards de métrica) —— */
  --st-novo:#2563EB;        --st-novo-bg:#DBEAFE;
  --st-contato:#4F46E5;     --st-contato-bg:#E0E7FF;
  --st-prosp:#D97706;       --st-prosp-bg:#FEF3C7;
  --st-enviada:#7C3AED;     --st-enviada-bg:#EDE9FE;
  --st-convertido:#15803D;  --st-convertido-bg:#D1FAE5;
  --st-perdido:#DC2626;     --st-perdido-bg:#FEE2E2;
  --st-cancelado:#374151;   --st-cancelado-bg:#F3F4F6;

  --blue:#2563EB; --blue-bg:#DBEAFE;
  --purple:#7C3AED;

  /* —— Tipografia —— */
  --font-sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;

  /* —— Sombras & cantos —— */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px 0 rgba(15,23,42,.05);
  --shadow:0 1px 3px 0 rgba(15,23,42,.08),0 1px 2px -1px rgba(15,23,42,.06);
  --shadow-md:0 4px 10px -2px rgba(15,23,42,.08),0 2px 6px -3px rgba(15,23,42,.06);
  --shadow-lg:0 10px 30px -10px rgba(15,23,42,.15),0 4px 12px -4px rgba(15,23,42,.1);
}

*{ box-sizing:border-box; }
html,body{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-feature-settings:"cv11","ss01","ss03";
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--green); }
a:hover{ color:var(--green-dark); }

*:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
  border-radius:4px;
}

/* =========================================================
   Tela de Autenticação
   ========================================================= */
.auth-body{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(21,128,61,.08), transparent 60%),
    radial-gradient(800px 500px at 110% 10%, rgba(124,58,237,.06), transparent 60%),
    var(--bg);
  padding:16px;
}
.auth-wrapper{ width:100%; max-width:420px; }
.auth-card{
  background:var(--card); border-radius:var(--radius-lg);
  padding:32px 28px;
  box-shadow:var(--shadow-lg);
  border-top:4px solid var(--green);
}
.auth-brand{ text-align:center; margin-bottom:20px; }
.auth-brand img{ height:48px; margin-bottom:12px; max-width:80vw; object-fit:contain; }
.auth-brand h1{ color:var(--green); font-size:20px; margin:4px 0 2px; font-weight:700; letter-spacing:-.01em; }
.auth-brand p{ color:var(--muted); font-size:13px; margin:0; }
.auth-form{ margin-top:4px; }
.auth-hint{ margin-top:18px; font-size:12px; color:var(--muted); text-align:center; line-height:1.7; }

.alert{
  padding:12px 14px; border-radius:var(--radius-sm); font-size:13.5px;
  margin-bottom:14px; border:1px solid transparent; font-weight:500;
}
.alert-error{ background:var(--red-bg); border-color:#FECACA; color:var(--red); }
.alert-success{ background:var(--green-bg); border-color:#BBF7D0; color:var(--green-dark); }

/* =========================================================
   App Shell + Sidebar
   ========================================================= */
.app-shell{ min-height:100dvh; display:flex; flex-direction:column; position:relative; }

.hamburger{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:20px; line-height:1;
  cursor:pointer;
  position:fixed; top:12px; left:12px; z-index:25;
  box-shadow:var(--shadow-sm);
  transition:background-color .15s ease, border-color .15s ease, transform .08s ease;
}
.hamburger:hover{ background:#F1F5F9; border-color:#CBD5E1; }
.hamburger:active{ transform:translateY(1px); }

.sidebar{
  position:fixed; top:0; left:-300px;
  width:280px; height:100dvh; z-index:30;
  background:var(--card);
  border-right:1px solid var(--line);
  box-shadow:var(--shadow-md);
  display:flex; flex-direction:column;
  transition:left .24s cubic-bezier(.4,0,.2,1);
}
.sidebar.open{ left:0; }

.sidebar-head{
  padding:18px 18px 14px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--line);
  background:var(--card);
}
.sidebar-logo{ height:38px; object-fit:contain; flex:1 1 auto; min-width:0; }
.sidebar-close{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm);
  width:38px; height:38px; font-size:22px; line-height:1;
  cursor:pointer; color:var(--muted); flex:none;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar-close:hover{ background:var(--red-bg); border-color:#FECACA; color:var(--red); }

.sidebar-nav{
  flex:1 1 auto; padding:12px 10px;
  display:flex; flex-direction:column; gap:4px;
  overflow:auto;
}
.side-item{
  background:none; border:none;
  padding:11px 12px;
  font-size:14px; font-weight:600;
  color:var(--ink);
  cursor:pointer;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; gap:11px;
  text-align:left;
  width:100%;
  font-family:inherit;
  transition:background-color .14s ease, color .14s ease;
}
.side-item:hover{ background:#F1F5F9; color:var(--green-dark); }
.side-item.active{
  background:var(--green);
  color:#fff;
  box-shadow:0 1px 2px rgba(21,128,61,.25), inset 0 -1px 0 rgba(0,0,0,.1);
}
.side-ico{
  font-size:17px; width:22px; text-align:center; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
}

.sidebar-agenda{
  flex:0 1 auto;
  padding:10px 12px 12px;
  border-top:1px solid var(--line);
  background:#FAFBFC;
  max-height:48vh;
  display:flex; flex-direction:column;
  min-height:0;
}
.sidebar-agenda-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 4px 8px;
}
.sidebar-agenda-head h3{
  margin:0; font-size:13px; font-weight:700; color:var(--ink);
  letter-spacing:.01em;
  display:flex; align-items:center; gap:6px;
}
.agenda-novo{
  background:var(--green); color:#fff; border:none; border-radius:8px;
  width:28px; height:28px; font-size:18px; line-height:1; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:0;
  transition:background-color .15s ease, transform .08s ease;
}
.agenda-novo:hover{ background:var(--green-dark); }
.agenda-novo:active{ transform:translateY(1px); }

.sidebar-agenda-lista{
  overflow:auto; padding-right:2px;
  display:flex; flex-direction:column; gap:6px;
}
.sidebar-comp-item{
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  border-radius:var(--radius-sm);
  padding:8px 10px;
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.sidebar-comp-item:hover{
  background:var(--green-bg);
  border-color:#BBF7D0;
  border-left-color:var(--green);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.sidebar-comp-item.status-pendente   { border-left-color:var(--blue); }
.sidebar-comp-item.status-realizado  { border-left-color:#10B981; background:#F0FDF4; }
.sidebar-comp-item.status-cancelado  { border-left-color:#F87171; background:#FEF2F2; opacity:.78; }
.sc-data{
  font-size:11px; color:var(--green-dark); font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.sc-resto{ min-width:0; }
.sc-titulo{ font-size:12.5px; color:var(--ink); font-weight:600; line-height:1.35; word-break:break-word; }
.sc-rel{ font-size:11px; color:var(--muted); margin-top:2px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

.sidebar-foot{
  padding:14px 16px 16px;
  border-top:1px solid var(--line);
  background:#FAFBFC;
}
.sidebar-foot .who{
  font-size:13px; color:var(--ink); font-weight:600; line-height:1.4;
  margin-bottom:12px; word-break:break-word;
}
.sidebar-foot .who b{ display:block; font-size:14px; }
.sidebar-foot .who small{
  display:block; color:var(--muted); font-weight:500;
  word-break:break-word; margin-top:2px; font-size:11.5px;
}
.sidebar-foot a.logout{
  display:block; text-align:center; font-size:13px;
  background:var(--card);
  color:var(--red);
  border:1px solid #FECACA;
  padding:10px 12px; border-radius:var(--radius-sm);
  text-decoration:none; font-weight:700;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar-foot a.logout:hover{ background:var(--red); color:#fff; border-color:var(--red); }

.sidebar-mask{
  display:none; position:fixed; inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(2px);
  z-index:28;
  animation:fadeInMask .2s ease;
}
.sidebar-mask.show{ display:block; }
@keyframes fadeInMask{ from{ opacity:0;} to{ opacity:1;} }

/* =========================================================
   Main / layout geral
   ========================================================= */
main{
  padding:68px 16px 24px;
  max-width:1280px; margin:0 auto;
  flex:1 1 auto; width:100%;
}
@media(min-width:768px){ main{ padding:76px 24px 32px; } }
@media(min-width:1024px){
  .app-shell{ flex-direction:row; }
  .hamburger{ display:none; }
  .sidebar-close{ display:none; }
  .sidebar{
    position:sticky; top:0; left:0; height:100dvh; flex:none;
    border-right:1px solid var(--line);
    box-shadow:none;
  }
  .sidebar-mask{ display:none !important; }
  main{ padding:28px 32px 40px; }
}

.tabpane{ display:none; animation:fadeIn .22s ease; }
.tabpane.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }

.grid{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
@media(min-width:1024px){ .grid{ grid-template-columns:1fr 1fr; gap:22px; } }

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:20px 22px;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.card h2{
  font-size:17px; margin:0 0 16px; color:var(--ink);
  font-weight:700; letter-spacing:-.01em;
  display:flex; align-items:center; gap:8px;
}
.card h3{
  font-size:12px; margin:20px 0 8px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
.hint{ font-size:12.5px; color:var(--muted); margin:2px 0 10px; line-height:1.6; }

/* =========================================================
   Forms / inputs
   ========================================================= */
label{
  display:block;
  font-size:12.5px; color:var(--muted); font-weight:600;
  margin:12px 0 4px;
  letter-spacing:.01em;
}
input:not([type=checkbox]):not([type=radio]),
select,textarea{
  width:100%;
  padding:10.5px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:14px;
  font-family:inherit;
  background:var(--card);
  color:var(--ink);
  min-height:42px;
  -webkit-appearance:none; appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input:not([type=checkbox]):not([type=radio]):hover,
select:hover,textarea:hover{ border-color:#CBD5E1; }
input:not([type=checkbox]):not([type=radio]):focus,
select:focus,textarea:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(21,128,61,.15);
  background:var(--card);
}
input::placeholder, textarea::placeholder{ color:#94A3B8; }

select{
  padding-right:38px;
  background-image:
    linear-gradient(45deg,transparent 50%,#64748B 50%),
    linear-gradient(135deg,#64748B 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px; background-repeat:no-repeat;
  cursor:pointer;
}

textarea{ resize:vertical; min-height:80px; padding-top:10px; line-height:1.55; }

input[type=checkbox],input[type=radio]{
  width:20px; height:20px; min-width:20px; min-height:20px;
  padding:0; margin:0; flex:none;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  border:1.5px solid #CBD5E1; border-radius:6px;
  background:var(--card);
  position:relative; display:inline-block;
  vertical-align:middle;
  transition:all .15s ease;
}
input[type=checkbox]:checked,input[type=radio]:checked{
  background:var(--green);
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(21,128,61,.15);
}
input[type=checkbox]:checked::after{
  content:""; position:absolute; left:6px; top:2px;
  width:5px; height:10px;
  border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}
input[type=radio]{ border-radius:50%; }
input[type=radio]:checked::after{
  content:""; position:absolute; left:50%; top:50%;
  width:8px; height:8px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%);
}

.two,.three{ display:flex; flex-direction:column; gap:12px; }
.two>div,.three>div{ flex:1 1 100%; min-width:0; }
@media(min-width:640px){
  .two,.three{ flex-direction:row; gap:14px; }
  .two>div{ flex:1 1 50%; }
  .three>div{ flex:1 1 33.333%; }
}

.ck{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; color:var(--ink); font-weight:500;
  margin:10px 0; flex-wrap:wrap;
  user-select:none;
  padding:8px 10px; border-radius:var(--radius-sm);
  transition:background-color .15s ease;
}
.ck:hover{ background:#F8FAFC; }
.ck label{
  flex:1 1 auto; margin:0;
  font-size:13.5px; font-weight:500; color:var(--ink);
  cursor:pointer; padding:1px 0;
  word-break:break-word; min-width:0; line-height:1.45;
}
.ck input[type=checkbox],.ck input[type=radio]{ margin-top:1px; flex:none; align-self:flex-start; }
.ck .inline{
  width:100% !important; max-width:150px;
  padding:7px 9px; min-height:36px; font-size:13px;
  margin-top:0; flex:0 0 auto; cursor:text;
}
.ck .inline:hover{ background:var(--card); }
@media(min-width:560px){
  .ck{ flex-wrap:nowrap; align-items:center; }
  .ck input[type=checkbox],.ck input[type=radio]{ align-self:center; margin-top:0; }
  .ck .inline{ margin-left:auto; }
}

/* =========================================================
   Botões
   ========================================================= */
button.primary{
  background:var(--green); color:#fff;
  border:1px solid var(--green);
  border-radius:var(--radius-sm);
  padding:12px 18px;
  font-size:14px; font-weight:700;
  cursor:pointer; margin-top:14px;
  width:100%; min-height:46px;
  box-shadow:0 1px 2px rgba(15,23,42,.08), inset 0 -1px 0 rgba(0,0,0,.12);
  font-family:inherit;
  transition:background-color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
button.primary:hover{
  background:var(--green-dark); border-color:var(--green-dark);
  box-shadow:0 3px 10px rgba(21,128,61,.28), inset 0 -1px 0 rgba(0,0,0,.12);
}
button.primary:active{ background:var(--green-dark); transform:translateY(1px); }
button.primary:disabled{ opacity:.55; cursor:not-allowed; }
button.primary.slim{
  width:auto; margin-top:0;
  padding:9.5px 16px; font-size:13px;
  min-height:40px; white-space:nowrap;
  border:1px solid var(--green);
}

a.whatsapp{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 15px; min-height:40px;
  font-size:13px; font-weight:700; color:#fff;
  background:var(--whatsapp);
  border:1px solid var(--whatsapp);
  border-radius:var(--radius-sm);
  text-decoration:none;
  box-shadow:0 1px 2px rgba(15,23,42,.08), inset 0 -1px 0 rgba(0,0,0,.1);
  cursor:pointer; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
a.whatsapp:hover{
  background:var(--whatsapp-dark); color:#fff; border-color:var(--whatsapp-dark);
  box-shadow:0 3px 10px rgba(37,211,102,.32), inset 0 -1px 0 rgba(0,0,0,.1);
}
a.whatsapp:active{ background:var(--whatsapp-dark); transform:translateY(1px); }
a.whatsapp .wa-ico{ font-size:15px; line-height:1; display:inline-flex; }

button.ghost{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:11px 15px;
  font-size:13px; font-weight:600;
  color:var(--ink);
  cursor:pointer; margin-top:8px;
  width:100%; min-height:44px;
  font-family:inherit;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
button.ghost:hover{ background:#F1F5F9; border-color:#CBD5E1; }

button.add{
  background:var(--green-bg);
  color:var(--green-dark);
  border:1px dashed #86EFAC;
  border-radius:var(--radius-sm);
  padding:10.5px; font-size:13.5px; font-weight:600;
  cursor:pointer; width:100%; margin-top:6px; min-height:42px;
  font-family:inherit;
  transition:background-color .15s ease, border-color .15s ease;
}
button.add:hover{ background:#DCFCE7; border-color:var(--green-light); }

/* Generic del button (inline in app.js templates) */
button.del{
  background:var(--card);
  border:1px solid #FECACA;
  color:var(--red);
  border-radius:var(--radius-sm);
  padding:9px 14px;
  font-size:13px; font-weight:600;
  cursor:pointer;
  min-height:40px;
  font-family:inherit;
  transition:background-color .15s ease, border-color .15s ease;
}
button.del:hover{ background:var(--red-bg); border-color:#FCA5A5; color:var(--red); }

/* Generic "x" close used inline in some modals */
button.x, .x{
  background:#F1F5F9; border:1px solid var(--line); border-radius:8px;
  width:38px; height:38px; font-size:22px; line-height:1;
  cursor:pointer; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  font-family:inherit;
}
button.x:hover, .x:hover{ background:var(--red-bg); border-color:#FECACA; color:var(--red); }

/* =========================================================
   Itens da proposta
   ========================================================= */
.item{
  display:grid; grid-template-columns:1fr;
  gap:10px; margin:10px 0; align-items:center;
}
.item select,.item input{ min-height:42px; width:100%; }
.item > button{
  min-height:42px; width:100%; max-width:100%;
  background:#F8FAFC;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 10px; cursor:pointer;
  font-size:16px; font-weight:700; color:var(--muted);
  font-family:inherit;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.item > button:hover{ background:var(--red-bg); border-color:#FECACA; color:var(--red); }
@media(min-width:560px){
  .item{ grid-template-columns:1.6fr 1fr 1fr 1fr auto; gap:8px; }
  .item select.srv{ grid-column:auto; }
  .item > button{ width:42px; padding:8px; }
}
@media(min-width:900px){
  .item{ grid-template-columns:1.1fr 1.4fr .55fr .8fr .7fr auto; gap:8px; }
}

/* =========================================================
   Listas genéricas (clientes, serviços, usuários, propostas)
   ========================================================= */
.list{ display:flex; flex-direction:column; gap:10px; }
.li{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  display:flex; flex-direction:column; gap:12px;
  align-items:stretch;
  background:var(--card);
  transition:border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.li:hover{ border-color:#CBD5E1; box-shadow:var(--shadow-sm); }
.li .info{ font-size:13.5px; min-width:0; flex:1; line-height:1.55; }
.li .info b{ display:block; color:var(--ink); word-break:break-word; font-size:14.5px; font-weight:700; }
.li .info span{ color:var(--muted); font-size:12.5px; word-break:break-word; display:block; margin-top:2px; }
.li .acts{
  display:flex; gap:8px; flex-wrap:wrap;
}
.li .acts button{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:9px 13px;
  font-size:13px; font-weight:600;
  cursor:pointer;
  flex:1 1 auto; min-height:40px;
  white-space:nowrap;
  color:var(--ink);
  font-family:inherit;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.li .acts button:hover{ background:#F1F5F9; border-color:#CBD5E1; }
.li .acts button.primary,
.li .acts button.primary.slim{
  background:var(--green); color:#fff;
  border:1px solid var(--green);
  font-weight:700; padding:9px 16px; min-height:40px;
  box-shadow:0 1px 2px rgba(15,23,42,.08), inset 0 -1px 0 rgba(0,0,0,.12);
}
.li .acts button.primary:hover,
.li .acts button.primary.slim:hover{
  background:var(--green-dark); border-color:var(--green-dark);
  box-shadow:0 3px 10px rgba(21,128,61,.25), inset 0 -1px 0 rgba(0,0,0,.12);
}
.li .acts button.primary:active,
.li .acts button.primary.slim:active{ background:var(--green-dark); transform:translateY(1px); }
.li .acts button.del:hover{ background:var(--red-bg); border-color:#FECACA; color:var(--red); }
.li .acts a{ text-decoration:none; flex:1 1 auto; }
.li .acts a button{ width:100%; }
@media(min-width:600px){
  .li{ flex-direction:row; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; }
  .li .acts{ flex:none; justify-content:flex-end; }
  .li .acts button{ flex:none; padding:7.5px 13px; min-height:36px; font-size:12.5px; }
}

/* =========================================================
   Badges (base + especiais)
   ========================================================= */
.badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  background:var(--green-bg);
  color:var(--green-dark);
  border:1px solid #BBF7D0;
  margin-right:4px; margin-top:2px;
  line-height:1.3;
  letter-spacing:.01em;
}
.badge.admin{ background:var(--orange-bg); color:var(--amber-dark); border-color:#FCD34D; }
.badge.off{ background:var(--red-bg); color:var(--red); border-color:#FECACA; }
.badge-indicador{ background:var(--blue-bg); color:var(--blue); border-color:#93C5FD; }
.badge-new{ background:#FFF7ED; color:#9A3412; border-color:#FDBA74; }

/* Badges de status do lead (pill tom claro + texto saturado) */
.badge.status-novo             { background:var(--st-novo-bg);      color:var(--st-novo);      border-color:#93C5FD; }
.badge.status-em_contato       { background:var(--st-contato-bg);   color:var(--st-contato);   border-color:#A5B4FC; }
.badge.status-em_prospeccao    { background:var(--st-prosp-bg);     color:var(--st-prosp);     border-color:#FCD34D; }
.badge.status-proposta_enviada { background:var(--st-enviada-bg);   color:var(--st-enviada);   border-color:#C4B5FD; }
.badge.status-convertido       { background:var(--st-convertido-bg);color:var(--st-convertido);border-color:#6EE7B7; }
.badge.status-perdido          { background:var(--st-perdido-bg);   color:var(--st-perdido);   border-color:#FCA5A5; }
.badge.status-cancelado        {
  background:var(--st-cancelado-bg); color:var(--st-cancelado);
  border-color:#D1D5DB;
  text-decoration:line-through; opacity:.92;
}

.badge-green{ background:var(--st-convertido-bg); color:var(--st-convertido); border-color:#6EE7B7; }
.badge-red  { background:var(--st-perdido-bg);    color:var(--st-perdido);    border-color:#FCA5A5; }
.badge-blue { background:var(--st-novo-bg);       color:var(--st-novo);       border-color:#93C5FD; }

/* Cores de texto por status */
.text-novo              { color:var(--st-novo); }
.text-em_contato        { color:var(--st-contato); }
.text-em_prospeccao     { color:var(--st-prosp); }
.text-proposta_enviada  { color:var(--st-enviada); }
.text-convertido        { color:var(--st-convertido); }
.text-perdido           { color:var(--st-perdido); }
.text-cancelado         { color:var(--st-cancelado); }

/* =========================================================
   Cards de lead (específicos)
   ========================================================= */
.li-lead.is-new{
  border-left:4px solid var(--st-prosp);
  background:linear-gradient(180deg, #FFFBEB 0%, var(--card) 60%);
}
.li-lead.lead-cancelado{
  border-left:4px solid #9CA3AF;
  background:#FAFAFA;
  opacity:.9;
}
.li-lead.lead-cancelado b{ color:#4B5563; }
.li-lead .acts button{ flex:1 1 auto; }
@media(min-width:600px){
  .li-lead .acts{ min-width:220px; flex:0 0 auto; }
}

/* =========================================================
   Timeline (histórico do lead)
   ========================================================= */
.timeline{ position:relative; padding-left:6px; }
.tl-item{ position:relative; padding:0 0 18px 26px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:7px; top:6px; bottom:-10px;
  width:2px; background:var(--line); border-radius:2px;
}
.tl-item:last-child::before{ display:none; }
.tl-dot{
  position:absolute; left:0; top:3px;
  width:16px; height:16px; border-radius:50%;
  background:var(--green);
  border:3px solid var(--card);
  box-shadow:0 0 0 1.5px var(--green-light);
}
.tl-body{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 14px;
}
.tl-head{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 12px;
  font-size:13px; color:var(--ink);
}
.tl-head b{ font-weight:700; color:var(--ink); }
.tl-head small{
  color:var(--muted); margin-left:auto;
  font-size:11.5px; font-weight:500;
}
.tl-coment{
  margin-top:8px; font-size:13.5px; color:var(--ink);
  line-height:1.6; white-space:pre-wrap; word-break:break-word;
}

/* =========================================================
   Resumo Admin / Dashboard — 9 cards de métricas
   ========================================================= */
.resumo-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
@media(min-width:560px){ .resumo-grid{ grid-template-columns:repeat(3, 1fr); gap:14px; } }
@media(min-width:1024px){ .resumo-grid{ grid-template-columns:repeat(3, 1fr); gap:16px; } }

.resumo-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 16px 15px;
  background:var(--card);
  display:flex; flex-direction:column; gap:4px;
  position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  min-height:88px;
}
.resumo-item::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--green);
  opacity:.85;
}
.resumo-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:#CBD5E1;
}
.resumo-item b{
  font-size:24px; color:var(--ink);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.02em;
  margin-top:2px;
}
.resumo-item small{
  font-size:12px; color:var(--muted);
  font-weight:600;
  letter-spacing:.01em;
}

/* —— faixas de cor por status (cores alinhadas aos badges) —— */
.resumo-item:nth-of-type(1)::before{ background:var(--ink); opacity:.85; }
.resumo-item:nth-of-type(2)::before{ background:var(--st-novo); }
.resumo-item:nth-of-type(3)::before{ background:var(--st-contato); }
.resumo-item:nth-of-type(4)::before{ background:var(--st-prosp); }
.resumo-item:nth-of-type(5)::before{ background:var(--st-enviada); }
.resumo-item:nth-of-type(6)::before{ background:var(--st-convertido); }
.resumo-item:nth-of-type(7)::before{ background:var(--st-perdido); }
.resumo-item:nth-of-type(8)::before{ background:var(--orange); }
.resumo-item:nth-of-type(9)::before{ background:var(--green); }

.resumo-item:nth-of-type(1) b{ color:var(--ink); }
.resumo-item:nth-of-type(2) b{ color:var(--st-novo); }
.resumo-item:nth-of-type(3) b{ color:var(--st-contato); }
.resumo-item:nth-of-type(4) b{ color:var(--st-prosp); }
.resumo-item:nth-of-type(5) b{ color:var(--st-enviada); }
.resumo-item:nth-of-type(6) b{ color:var(--st-convertido); }
.resumo-item:nth-of-type(7) b{ color:var(--st-perdido); }

.resumo-item.destaque{
  background:linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
  border-color:#FCD34D;
}
.resumo-item.destaque b{ color:var(--amber-dark); }
.resumo-item.destaque::before{ background:var(--orange); }

.resumo-item.destaque.green{
  background:linear-gradient(135deg, var(--green-bg) 0%, #DCFCE7 100%);
  border-color:#86EFAC;
}
.resumo-item.destaque.green b{ color:var(--green-dark); }
.resumo-item.destaque.green::before{ background:var(--green); }

/* =========================================================
   Cards de compromisso (sidebar + detalhe lead/cliente)
   ========================================================= */
.list-compromissos{
  display:flex; flex-direction:column; gap:12px; margin-top:6px;
}
.compromisso-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  display:flex; flex-direction:column; gap:12px;
  cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease, transform .08s ease;
  border-left:4px solid var(--blue);
}
.compromisso-card:hover{
  border-color:#BBF7D0;
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}
.compromisso-card.status-realizado {
  border-left-color:#10B981;
  background:linear-gradient(180deg, #F0FDF4 0%, var(--card) 60%);
}
.compromisso-card.status-cancelado {
  border-left-color:#F87171;
  background:linear-gradient(180deg, #FEF2F2 0%, var(--card) 60%);
  opacity:.8;
}
.compromisso-data{
  flex:none;
  font-weight:800; font-size:13px;
  color:var(--green-dark);
  background:var(--green-bg);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  min-width:130px;
  text-align:center;
  line-height:1.3;
  align-self:flex-start;
  border:1px solid #BBF7D0;
}
.compromisso-corpo{ flex:1 1 auto; min-width:0; }
.compromisso-top{
  display:flex; gap:8px; align-items:center; justify-content:space-between;
  margin-bottom:4px; flex-wrap:wrap;
}
.compromisso-titulo{ font-size:15px; color:var(--ink); font-weight:700; }
.compromisso-meta{
  display:flex; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted);
  margin-bottom:6px;
}
.compromisso-tipo{ font-weight:600; color:var(--ink); }
.compromisso-desc{
  font-size:13px; color:#334155;
  background:#FAFBFC;
  border-radius:var(--radius-sm);
  padding:8px 10px;
  border-left:3px solid var(--line);
  line-height:1.55;
}
@media(min-width:600px){
  .compromisso-card{ flex-direction:row; gap:14px; }
  .compromisso-data{ min-width:130px; align-self:flex-start; }
}

/* =========================================================
   Modal (e-mail + compromissos + proposta rápida)
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  padding:14px;
}
.modal.open{ display:flex; animation:fadeInMask .18s ease; }
.modal-mask{
  position:absolute; inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(3px);
}
.modal-card{
  position:relative;
  background:var(--card);
  border-radius:var(--radius-lg);
  width:100%; max-width:640px;
  max-height:calc(100dvh - 28px);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 20px 60px -15px rgba(15,23,42,.3);
  border-top:4px solid var(--green);
  animation:modalIn .22s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:none; }
}
.modal-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  background:var(--card);
}
.modal-head h3{
  margin:0; font-size:17px; color:var(--ink);
  font-weight:700; letter-spacing:-.01em;
}
.modal-close{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  width:38px; height:38px;
  font-size:22px; line-height:1;
  cursor:pointer; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
  font-family:inherit;
}
.modal-close:hover{ background:var(--red-bg); border-color:#FECACA; color:var(--red); }
.modal-body{
  padding:18px 22px; overflow:auto;
  flex:1 1 auto;
}
.modal-foot{
  padding:14px 22px;
  border-top:1px solid var(--line);
  display:flex; gap:10px;
  justify-content:flex-end; flex-wrap:wrap;
  background:#FAFBFC;
}
.modal-foot .ghost{ margin:0; width:auto; min-width:120px; min-height:44px; }
.modal-foot .primary{ margin:0; min-width:220px; }
.modal-resumo{
  background:var(--green-bg);
  border-left:4px solid var(--green);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:12px 14px;
  margin-bottom:8px;
  font-size:13px; line-height:1.7;
  border:1px solid #BBF7D0;
}
.modal-resumo b{ color:var(--green-dark); }
.modal-resumo .spacer{ margin:0 10px; color:#94A3B8; }
@media(max-width:480px){
  .modal-head{ padding:14px 16px; }
  .modal-body{ padding:14px 16px; }
  .modal-foot{ padding:12px 16px; flex-direction:column-reverse; }
  .modal-foot .ghost, .modal-foot .primary{ width:100%; min-width:0; }
}

/* =========================================================
   Ajustes mobile finais
   ========================================================= */
@media(max-width:480px){
  .auth-card{ padding:24px 20px; border-radius:var(--radius); }
  .card{ border-radius:var(--radius); padding:16px 17px; }
  button.primary{ font-size:13.5px; }
  .sidebar-logo{ height:34px; }
  .sidebar-foot .who{ font-size:12.5px; }
  .resumo-item{ padding:14px 13px 13px; min-height:80px; }
  .resumo-item b{ font-size:20px; }
  .resumo-item small{ font-size:11.5px; }
  .resumo-grid{ gap:10px; }
  .tl-head small{ width:100%; margin-left:0; }
  .compromisso-card{ flex-direction:column; gap:10px; padding:12px 14px; }
  .compromisso-data{ min-width:0; align-self:stretch; }
  .sidebar-agenda{ max-height:38vh; }
}

/* Garante alvos de toque ≥ 44px em mobile para inputs/buttons que ainda possam estar abaixo */
@media(max-width:767px){
  button, a.whatsapp, .agenda-novo, .sidebar-close, .hamburger, .modal-close, button.x, .x{
    min-height:44px;
  }
  input:not([type=checkbox]):not([type=radio]), select, textarea{
    min-height:44px;
    font-size:16px; /* evita zoom automático do iOS */
  }
  /* previne overflow horizontal em qualquer viewport */
  .app-shell, main, .card, .grid, .resumo-grid, .list, .li, .li-lead{
    max-width:100%;
    overflow-x:hidden;
  }
}