/* ============================================================
   Veero / DAMA — tema escuro
   azul profundo #070E1A · verde de ação #22C55E · branco
   O dourado fica reservado à marca (logo e wordmark), não à interface.
   ============================================================ */
:root{
  color-scheme:dark;
  --veero-blue:#0A1628; --veero-gold:#D4A017; --veero-white:#FFFFFF;
  --marca-ouro:#D4A017;
  --veero-gray:#64748B; --veero-light:#F8FAFC;

  --bg:#070E1A; --surface:#0A1628; --surface-2:#111C2E; --surface-3:#17243A;
  --line:#1E2C44; --line-soft:#182640;
  --ink:#FFFFFF; --muted:#94A3B8; --muted-2:#64748B;

  /* verde = ação, destaque e marca-d'água da interface */
  --amber:#22C55E; --amber-on:#04240F; --amber-soft:rgba(34,197,94,.14);
  --ok:#22C55E; --ok-on:#04240F; --ok-soft:rgba(34,197,94,.14);
  --alerta:#E8A33D; --alerta-soft:rgba(232,163,61,.14);
  --red:#F0616D; --red-soft:rgba(240,97,109,.12);

  --r-lg:15px; --r-md:12px; --r-sm:10px;
  --shadow:0 10px 30px rgba(2,6,14,.6);
  --ouro:linear-gradient(135deg,#3BE07A 0%,#22C55E 52%,#12923B 100%);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--amber)}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---- topo ---- */
.topo{display:flex;align-items:center;gap:16px;padding:14px 22px;
  border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.marca{font-weight:800;letter-spacing:-.02em;font-size:17px;margin:0;flex:none}
.marca span{color:var(--amber)}
.topo .cresc{flex:1 1 auto;min-width:0}
.topo .quem{font-size:12.5px;color:var(--muted-2);text-align:right;line-height:1.35}
.topo .quem b{display:block;color:var(--ink);font-weight:600;font-size:13px}

/* ---- botões ---- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  font:inherit;font-weight:600;font-size:14px;padding:10px 18px;border-radius:var(--r-md);
  text-decoration:none;transition:.14s}
.bt:hover{border-color:var(--line-soft);transform:translateY(-1px)}
.bt.pri{background:var(--ouro);color:#04240F;border-color:#16A34A;font-weight:700}
.bt.ok{background:var(--ok);color:var(--ok-on);border-color:var(--ok)}
.bt.mini{padding:7px 13px;font-size:13px}
.bt.fantasma{background:none}
.bt[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---- formulário ---- */
.campo{display:block;margin-bottom:14px}
.campo .rot{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;padding:12px 14px;font:inherit;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--ink);outline:none}
.campo input:focus,.campo select:focus{border-color:var(--amber)}
.linha2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.linha2{grid-template-columns:1fr}}

/* ---- login ---- */
.entrar{min-height:100dvh;display:grid;place-items:center;padding:24px}
.cxentrar{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px 28px;box-shadow:var(--shadow)}
.cxentrar h1{margin:0 0 6px;font-size:24px;letter-spacing:-.02em}
.cxentrar h1 span{color:var(--amber)}
.cxentrar .sub{margin:0 0 24px;font-size:13.5px;color:var(--muted-2);line-height:1.5}
.aviso{margin-top:14px;padding:11px 13px;border-radius:var(--r-md);font-size:13px;line-height:1.45;display:none}
.aviso.err{display:block;background:var(--red-soft);border:1px solid rgba(240,97,109,.3);color:#FFB3B9}
.aviso.ok{display:block;background:var(--ok-soft);border:1px solid rgba(22,199,132,.3);color:#7BE8BD}

/* ---- painel ---- */
.pagina{max-width:1180px;margin:0 auto;padding:28px 22px 80px}
.pagina h2{font-size:20px;letter-spacing:-.02em;margin:0 0 4px}
.pagina .dep{margin:0 0 22px;color:var(--muted-2);font-size:13.5px}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.cli{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:17px 18px;border-left:3px solid var(--line)}
.cli.viva{border-left-color:var(--ok)}
.cli.morta{border-left-color:var(--muted-2)}
.cli h3{margin:0 0 3px;font-size:16.5px;letter-spacing:-.01em}
.cli .resp{margin:0 0 13px;font-size:12.5px;color:var(--muted-2)}
.selo{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;font-weight:700;float:right}
.selo.viva{background:var(--ok-soft);color:var(--ok)}
.selo.morta{background:var(--surface-3);color:var(--muted-2)}
.cli dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0 0 15px}
.cli dt{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);margin:0}
.cli dd{margin:2px 0 0;font-size:13.5px;font-weight:600}
.cli .acoes{display:flex;gap:8px;flex-wrap:wrap}
.vazio{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-md);
  padding:40px 24px;text-align:center;color:var(--muted-2)}

/* ---- modal ---- */
.fundo{position:fixed;inset:0;background:rgba(3,6,12,.72);display:none;
  place-items:center;padding:22px;z-index:50;overflow-y:auto}
.fundo.on{display:grid}
.modal{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);margin:auto}
.modal h3{margin:0 0 4px;font-size:19px;letter-spacing:-.02em}
.modal .dep{margin:0 0 20px;font-size:13px;color:var(--muted-2)}
.modal .rodape{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.credencial{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px;margin-top:14px;font-family:"JetBrains Mono",monospace;font-size:13px;line-height:1.9}
.credencial b{color:var(--amber)}
.carregando{padding:60px 20px;text-align:center;color:var(--muted-2)}

/* ============================================================
   Tela de acesso — Metodo DAMA
   Painel esquerdo = a arte do cliente, exatamente como ele entregou.
   Nada e redesenhado: o HTML de marca existe so para leitores de tela.
   ============================================================ */
.acesso{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr}

.painelmarca{position:relative;overflow:hidden;background:var(--bg)
  url("https://azyrbuxvecbohdwrjaqe.supabase.co/storage/v1/object/public/motor/marca/dama-login-esq.jpg") center center/cover no-repeat}
.painelmarca .foto,.painelmarca .veu{display:none}
.painelmarca>.dentro{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.painelform{display:grid;align-content:center;justify-items:center;
  padding:40px 30px;background:var(--bg)}
.cartao{width:100%;max-width:455px}
.cartao h1{margin:0 0 9px;font-size:28px;font-weight:700;letter-spacing:-.02em;text-align:center}
.cartao .sub{margin:0 0 30px;font-size:14px;color:var(--muted);line-height:1.5;text-align:center}
.cartao .campo{margin-bottom:17px}
.cartao .campo .rot{font-size:13.5px;color:#E2E8F0;margin-bottom:8px}
.cartao .campo .rot b{color:#F0616D;font-weight:700;margin-right:5px}
.cartao .campo input{padding:14px 16px;font-size:14.5px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;color:#fff}
.cartao .campo input::placeholder{color:var(--muted-2)}
.cartao .campo input:focus{border-color:var(--ok);outline:none}

.segredo{position:relative}
.segredo input{padding-right:48px}
.olho{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:32px;height:32px;padding:0;
  background:none;border:none;border-radius:8px;cursor:pointer;color:var(--muted)}
.olho:hover{color:#fff}
.olho:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.olho svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.olho .fechado{display:none}
.olho.on .aberto{display:none}
.olho.on .fechado{display:block}

.cartao .bt{width:100%;margin-top:10px;padding:14px 18px;font-size:15px;
  font-weight:700;border-radius:10px}
.esqueci{display:block;margin-top:17px;text-align:center;color:var(--muted);
  text-decoration:none;cursor:pointer;background:none;border:none;font:inherit;
  font-size:13.5px;width:100%}
.esqueci:hover{color:var(--ok)}
.rodapeacesso{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  text-align:center;font-size:12px;color:var(--muted-2)}
.rodapeacesso a{color:inherit;text-decoration:none}
.rodapeacesso a:hover{color:var(--ok)}

@media(max-width:940px){
  .acesso{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .painelmarca{min-height:340px;background-position:center 24%}
  .painelform{padding:34px 22px 52px}
}

/* ============================================================
   Painel — avisos, pagamentos e convites
   ============================================================ */
.avisos{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--alerta);
  border-radius:var(--r-md);padding:15px 18px;margin:0 0 18px}
.avisos.vazio-ok{border-left-color:var(--ok)}
.avisos .ak{display:block;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--alerta);font-weight:700;margin-bottom:9px}
.avisos.vazio-ok .ak{color:var(--ok)}
.avisos p{margin:0;font-size:13.5px;color:var(--muted-2)}
.avisos ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.avisos li{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:baseline;gap:7px}
.avisos li:before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--muted-2)}
.avisos li.av-pag:before{background:var(--red)}
.avisos li.av-contrato:before{background:var(--alerta)}
.avisos li.av-convite:before{background:#6BA8E8}
.avisos li.av-parado:before{background:#B08CE8}
.avisos li b{color:var(--ink);font-weight:600}

.linkbt{background:none;border:none;padding:0;font:inherit;font-size:12.5px;
  color:var(--amber);cursor:pointer;text-decoration:underline}
.linkbt:hover{color:#4ADE80}
.linkbt.del{color:var(--muted-2)}
.linkbt.del:hover{color:var(--red)}

.selo.espera{background:rgba(107,168,232,.16);color:#8FC0F0}
.cli.pisca{box-shadow:0 0 0 2px var(--ok)}

.pagbox{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;margin:0 0 14px}
.pagbox.atraso{border-color:rgba(240,97,109,.45)}
.pagbox.nada{background:none;border-style:dashed}
.pagbox .pk{display:block;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:4px}
.pagbox b{font-size:16px;font-weight:700;letter-spacing:-.01em;display:block}
.pagbox .pd{font-size:12px;color:var(--muted-2);display:block;margin-top:2px}
.pagbox .pd em{font-style:normal;color:#FFB3B9;font-weight:600}

.linha3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
@media(max-width:620px){.linha3{grid-template-columns:1fr}}
.secdep{margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2)}

.cobl{display:grid;gap:8px;margin-bottom:18px;max-height:34vh;overflow-y:auto}
.cob{display:grid;grid-template-columns:1fr auto;gap:3px 14px;align-items:center;
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:var(--r-sm);padding:10px 13px;font-size:13px}
.cob .ca{grid-column:2;grid-row:1/3;display:flex;gap:10px;align-items:center;justify-self:end}
.cob .bt.mini{padding:6px 12px}
.cob.pago{border-left-color:var(--ok);opacity:.72}
.cob.atrasado{border-left-color:var(--red)}
.cob .cd{font-weight:600;grid-column:1}
.cob .cv{font-family:"JetBrains Mono",monospace;font-weight:600;grid-column:1;justify-self:start;font-size:14px}
.cob .cx{font-size:11.5px;color:var(--muted-2);grid-column:1}
@media(max-width:560px){.cob .ca{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}}

.credencial .quebra{word-break:break-all;font-size:11.5px;line-height:1.7;display:block;margin-top:5px}

.bt.perigo{border-color:rgba(240,97,109,.45);color:#FFB3B9;background:rgba(240,97,109,.10)}
.bt.perigo:hover{border-color:var(--red);background:rgba(240,97,109,.18)}
.pagbox.free{border-color:rgba(22,199,132,.4);background:rgba(22,199,132,.08)}
.pagbox.free b{color:var(--ok)}
.campo select{width:100%;padding:12px 14px;font:inherit;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);outline:none}