:root{
    --verde:#1B4332; --escuro:#123026; --folha:#52B788; --dourado:#B08D57;
    --offwhite:#F8F7F2; --grafite:#2D3436; --borda:#E4E2DA;
    --vermelho:#B23A3A; --vermelho-bg:#F7E9E7; --branco:#FFFFFF; --cinza:#8A8A82;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       background:var(--offwhite);color:var(--grafite);line-height:1.5}
  button{font-family:inherit;cursor:pointer;border:none}
  input,select,textarea{font-family:inherit;font-size:14px;width:100%;
       padding:10px 12px;border:1px solid var(--borda);border-radius:8px;
       background:var(--branco);color:var(--grafite)}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--folha)}
  label{font-size:12px;color:var(--cinza);display:block;margin-bottom:4px}
  .campo{margin-bottom:14px}
  textarea{resize:vertical;overflow:hidden;line-height:1.45}
  textarea.auto{min-height:46px}
  .btn{background:var(--verde);color:#fff;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:500}
  .btn:hover{background:var(--escuro)}
  .btn-sec{background:transparent;color:var(--verde);border:1px solid var(--borda)}
  .btn-sec:hover{background:#fff}
  .btn-peq{padding:7px 12px;font-size:13px}
  .link-acao{background:none;color:var(--cinza);font-size:12px;text-decoration:underline;padding:4px 6px}
  .link-acao:hover{color:var(--verde)}
  .link-acao.perigo:hover{color:var(--vermelho)}
  .oculto{display:none !important}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

  /* ---------- LOGIN ---------- */
  #login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
  .login-card{background:#fff;border:1px solid var(--borda);border-radius:16px;
       padding:36px 32px;width:100%;max-width:390px;box-shadow:0 8px 30px rgba(27,67,50,.06)}
  .logo-login{display:block;margin:0 auto 18px;max-width:220px;height:auto}
  .login-card p{font-size:13px;color:var(--cinza);margin-bottom:24px;text-align:center}
  .erro{color:var(--vermelho);font-size:13px;margin-top:10px;min-height:18px}

  /* ---------- HEADER + NAV ---------- */
  header{background:var(--verde);color:#fff;padding:16px 22px;
       display:flex;align-items:center;justify-content:space-between;gap:12px}
  header .marca{display:flex;align-items:center;gap:14px}
  .logo-chip{background:#fff;border-radius:12px;padding:8px 12px;display:flex;align-items:center;height:62px}
  .logo-chip img{height:46px;width:auto;display:block}
  .wordmark b{display:block;font-size:19px;font-weight:600;letter-spacing:.02em;line-height:1.15}
  .wordmark small{display:block;font-size:10px;color:#9FC6B0;letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
  header .dir{display:flex;align-items:center;gap:14px;font-size:13px}
  header .sair{color:#cfe6da;background:none;font-size:13px;text-decoration:underline}
  nav{background:var(--escuro);display:flex;gap:2px;padding:0 16px;overflow-x:auto}
  nav button{background:none;color:#9FC6B0;padding:13px 16px;font-size:12px;
       letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;border-bottom:2px solid transparent}
  nav button:hover{color:#fff}
  nav button.ativo{color:#fff;border-bottom-color:var(--dourado)}
  nav button.soon{opacity:.4}
  main{max-width:760px;margin:0 auto;padding:24px 18px 60px}

  /* ---------- HOJE ---------- */
  .topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .topo h2{font-size:22px;font-weight:500}
  .data{font-size:13px;color:var(--cinza)}
  .saudacao{font-size:14px;color:var(--grafite);margin-bottom:18px}
  .acoes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
  .filtro{display:inline-flex;background:#fff;border:1px solid var(--borda);border-radius:8px;overflow:hidden}
  .filtro button{background:#fff;padding:7px 14px;font-size:13px;color:var(--cinza)}
  .filtro button.ativo{background:var(--verde);color:#fff}
  .metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
  .metrica{background:#fff;border:1px solid var(--borda);border-radius:10px;padding:12px}
  .metrica.alerta{background:var(--vermelho-bg);border-color:#EBD3CF}
  .metrica .lab{font-size:12px;color:var(--cinza)}
  .metrica.alerta .lab{color:var(--vermelho)}
  .metrica .num{font-size:24px;font-weight:500}
  .metrica.alerta .num{color:var(--vermelho)}
  .grupo-tit{font-size:13px;font-weight:600;margin:0 0 8px;color:var(--cinza)}
  .grupo-tit.alerta{color:var(--vermelho)}
  .passo{background:#fff;border:1px solid var(--borda);border-radius:12px;padding:14px 16px;margin-bottom:10px}
  .passo.atrasado{border-left:3px solid var(--vermelho);border-radius:0 12px 12px 0}
  .passo .linha1{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .passo .ref{font-size:12px;color:var(--cinza);margin-bottom:2px}
  .passo .desc{font-size:15px}
  .badge{font-size:12px;padding:3px 8px;border-radius:6px;white-space:nowrap;background:var(--offwhite);color:var(--cinza)}
  .badge.alerta{background:var(--vermelho-bg);color:var(--vermelho)}
  .badge.olho{background:#EAF4EE;color:#2C7A52;margin-left:6px}
  .passo .linha2{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px}
  .passo .resp{font-size:12px;color:var(--cinza)}
  .botoes{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  .btn-duv{background:#fff;color:var(--verde);border:1px solid var(--borda);
       padding:7px 12px;font-size:13px;border-radius:8px;position:relative}
  .btn-duv:hover{background:var(--offwhite)}
  .btn-duv .pin{position:absolute;top:-6px;right:-6px;background:var(--dourado);color:#fff;
       font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
  #toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
    background:var(--verde);color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:500;
    box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:9999;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:90vw;text-align:center}
  #toast.toast-show{opacity:1;transform:translateX(-50%) translateY(0)}
  #toast.toast-erro{background:var(--vermelho)}
  .toast-oculto{opacity:0 !important;transform:translateX(-50%) translateY(20px) !important}
  .vazio{text-align:center;color:var(--cinza);font-size:14px;padding:40px 0}
  .card-recolhe.fechado .corpo-recolhe{display:none}
  .card-recolhe .seta-exp{margin-right:6px}
  .card-recolhe.fechado .seta-exp{transform:rotate(0deg)}
  .card-recolhe:not(.fechado) .seta-exp{transform:rotate(90deg)}
  .cli-hoje{background:#fff;border:1px solid var(--borda);border-radius:12px;margin-bottom:10px;overflow:hidden}
  .cli-hoje .cab{display:flex;justify-content:space-between;align-items:center;
       gap:10px;padding:13px 16px;cursor:pointer;flex-wrap:wrap}
  .cli-hoje .cab:hover{background:var(--offwhite)}
  .cli-hoje .nome{font-size:15px;font-weight:500;display:flex;align-items:center}
  .cli-hoje .selos{display:flex;gap:6px;flex-wrap:wrap}
  .cli-hoje .itens{padding:2px 12px 12px}
  .cli-hoje.fechado .itens{display:none}
  .cli-hoje.fechado .seta-exp{transform:rotate(0deg)}
  .cli-hoje:not(.fechado) .seta-exp{transform:rotate(90deg)}
  .seta-exp{color:var(--cinza);font-size:10px;margin-right:8px;display:inline-block;transition:transform .15s}

  /* ---------- CLIENTES ---------- */
  .busca{margin-bottom:14px}
  .cli-card{background:#fff;border:1px solid var(--borda);border-radius:12px;padding:14px 16px;margin-bottom:10px}
  .cli-card .nome{font-size:16px;font-weight:500}
  .cli-card .meta{font-size:12px;color:var(--cinza);margin-top:2px}
  .cli-card .linha2{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px}
  .status{font-size:11px;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}
  .status.ativo{background:#EAF4EE;color:#2C7A52}
  .status.prospecto{background:#F3ECDD;color:#8A6D3B}
  .status.inativo{background:#EDEBE4;color:#7A756B}
  .status.concluido{background:#EAF4EE;color:#2C7A52}
  .status.suspenso{background:var(--vermelho-bg);color:var(--vermelho)}
  .info-linha{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--borda);font-size:14px}
  .info-linha b{min-width:150px;color:var(--cinza);font-weight:400;font-size:13px}

  /* ---------- MODAL ---------- */
  .overlay{position:fixed;inset:0;background:rgba(45,52,54,.45);
       display:flex;align-items:flex-start;justify-content:center;padding:30px 16px;overflow-y:auto;z-index:50}
  .modal{background:#fff;border-radius:16px;width:100%;max-width:760px;padding:28px 30px;
       box-shadow:0 20px 60px rgba(0,0,0,.2)}
  .modal h3{font-size:18px;color:var(--verde);margin-bottom:4px}
  .modal .sub{font-size:13px;color:var(--cinza);margin-bottom:20px}
  .modal-rodape{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
  .check{display:flex;align-items:center;gap:8px}
  .check input{width:auto}
  .check label{margin:0;color:var(--grafite);font-size:14px}
  .prox-passo{background:var(--offwhite);border:1px solid var(--borda);border-radius:10px;
       padding:14px;margin-bottom:10px;position:relative}
  .prox-passo .rem{position:absolute;top:8px;right:10px;background:none;color:var(--cinza);font-size:18px;line-height:1}
  .divisor{border:none;border-top:1px solid var(--borda);margin:20px 0 16px}
  .chk-inline{display:inline-flex;align-items:center;gap:4px;margin:0 12px 6px 0;font-size:14px}
  .mini-ord{background:none;border:1px solid var(--borda);border-radius:20px;padding:3px 12px;font-size:12px;color:var(--cinza);cursor:pointer}
  .mini-ord.on{background:var(--verde);color:#fff;border-color:var(--verde)}
  .olho-btn{background:none;border:1px solid var(--borda);border-radius:6px;padding:4px 6px;margin-top:6px;cursor:pointer;font-size:14px;line-height:1;opacity:.55}
  .olho-btn.on{opacity:1;border-color:var(--folha);background:#EAF4EE}
  .add-link{background:none;color:var(--verde);font-size:13px;text-decoration:underline;padding:4px 0}
  .nota-interna textarea{background:#FBF3E2;border-color:#E4CE9E}
  .nota-interna label{color:#8A6D3B}
  .nota-aviso{font-size:12px;color:#8A6D3B;margin-top:4px}
  .sec-form{font-size:12px;font-weight:600;color:var(--dourado);text-transform:uppercase;
       letter-spacing:.08em;margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--borda)}

  /* ---------- DOSSIÊ ---------- */
  .dossie-sec{font-size:13px;font-weight:600;color:var(--cinza);margin:20px 0 10px}
  .tl{border-left:2px solid var(--borda);padding-left:14px;margin-left:4px}
  .tl-item{margin-bottom:16px;position:relative}
  .tl-item::before{content:"";position:absolute;left:-21px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--folha)}
  .tl-item.conclui::before{background:var(--dourado)}
  .tl-meta{font-size:12px;color:var(--cinza);margin-bottom:2px}
  .tl-txt{font-size:14px}
  .tag-conclui{font-size:11px;background:#F3ECDD;color:#8A6D3B;padding:1px 7px;border-radius:6px;margin-left:6px}
  .chip{display:inline-flex;align-items:center;gap:5px;background:var(--offwhite);border:1px solid var(--borda);
       border-radius:8px;padding:5px 10px;font-size:12px;margin:6px 6px 0 0;cursor:pointer;color:var(--verde)}
  .chip:hover{border-color:var(--folha)}
  .passo-linha{display:flex;justify-content:space-between;align-items:center;gap:10px;
       padding:9px 12px;border:1px solid var(--borda);border-radius:8px;margin-bottom:6px;font-size:13px}
  .passo-linha.done{opacity:.7}
  .caso-arrasta{cursor:grab;transition:border-color .12s}
  .caso-arrasta:active{cursor:grabbing}
  .caso-arrasta .pega{color:var(--cinza);font-size:14px;letter-spacing:-1px;cursor:grab}
  .caso-arrasta.drop-alvo{border-color:var(--folha);box-shadow:0 -2px 0 var(--folha)}
  .pend-bloco{border:1px solid var(--borda);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:#fff}
  .pend-bloco.done{background:#FBFAF7}
  .pend-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
  .pend-num{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dourado)}
  .pend-titulo{font-size:15px;margin-bottom:2px}
  .pend-sec{font-size:12px;font-weight:600;color:var(--cinza);margin:10px 0 6px}
  .pend-cab{cursor:pointer;user-select:none}
  .pend-mini{display:none;font-size:13px;color:var(--cinza);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
  .pend-bloco.fechado .pend-corpo{display:none}
  .pend-bloco.fechado .pend-mini{display:inline-block}
  .pend-bloco.fechado .seta-exp{transform:rotate(0deg)}
  .pend-bloco .seta-exp{margin-right:6px}
  .pend-bloco:not(.fechado) .seta-exp{transform:rotate(90deg)}
  .duv{background:var(--offwhite);border-radius:10px;padding:10px 12px;margin-bottom:8px}
  .duv.eu{background:#EAF4EE}
  .duv .quem{font-size:12px;color:var(--cinza);margin-bottom:2px}

  /* ---------- LEMBRETES RÁPIDOS ---------- */
  .lemb{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--borda);font-size:14px}
  .lemb:last-child{border-bottom:none}
  .lemb input[type=checkbox]{width:18px;height:18px;min-width:18px;margin-top:2px;padding:0;accent-color:var(--verde)}
  .lemb .txt{flex:1;line-height:1.4}
  .lemb.ok .txt{text-decoration:line-through;color:var(--cinza)}
  .lemb .link-acao{padding:0 4px}
  .lemb-nova{display:flex;gap:6px;margin-top:8px}
  .lemb-nova input{flex:1}
  .sino{font-size:12px;color:#8A6D3B;background:#FBF3E2;border-radius:20px;padding:1px 8px;white-space:nowrap}

  /* ================= CELULAR ================= */
  @media (max-width: 720px){
    main{padding:16px 12px 80px}

    /* cabeçalho empilha e encolhe */
    header{padding:12px 14px;flex-wrap:wrap;gap:8px}
    header .marca{gap:10px}
    .logo-chip{height:48px;padding:6px 9px;border-radius:10px}
    .logo-chip img{height:34px}
    .wordmark b{font-size:15px;line-height:1.2}
    .wordmark small{font-size:9px;letter-spacing:.12em}
    header .dir{font-size:12px;gap:10px;margin-left:auto;text-align:right}

    /* barra de abas: rola de lado sem cortar e sem barra feia */
    nav{padding:0 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    nav::-webkit-scrollbar{display:none}
    nav button{padding:12px 11px;font-size:11px;letter-spacing:.05em}

    /* títulos e ações */
    .topo{flex-wrap:wrap;gap:8px}
    .topo h2{font-size:19px}
    .acoes{gap:6px;margin-bottom:14px}
    .filtro{width:100%;overflow-x:auto;scrollbar-width:none}
    .filtro::-webkit-scrollbar{display:none}
    .filtro button{padding:8px 12px;white-space:nowrap}

    /* cartões de número: um embaixo do outro */
    .metricas{grid-template-columns:1fr;gap:8px;margin-bottom:14px}
    .metrica .num{font-size:20px}

    /* formulários: uma coluna */
    .grid2,.grid3{grid-template-columns:1fr}

    /* cartões de cliente / lançamento: nada mais vaza para fora */
    .cli-card{padding:12px 13px}
    .cli-card .nome{font-size:15px}
    .cli-card .linha2{flex-direction:column;align-items:stretch;gap:8px}
    .cli-card .linha2 .botoes{justify-content:flex-start}
    .passo .linha2{flex-direction:column;align-items:stretch;gap:8px}
    .botoes{flex-wrap:wrap;justify-content:flex-start;row-gap:8px}
    .botoes .btn,.botoes .btn-peq,.botoes .btn-duv{flex:0 0 auto}

    /* alvo de toque decente */
    .btn-peq{padding:9px 13px}
    .link-acao{padding:7px 6px;font-size:12px}

    /* modal ocupa a tela */
    .modal{max-width:100%;padding:20px 16px;border-radius:14px}
    .modal-rodape{flex-direction:column-reverse;gap:8px}
    .modal-rodape .btn,.modal-rodape .btn-sec{width:100%;text-align:center}

    /* evita zoom automático do iPhone ao focar um campo */
    input,select,textarea{font-size:16px}
  }