/* Padrão Danlex (igual ao Contratos): vermelho ED3237 + escala de cinza neutra.
   Sem escolha, segue o tema do sistema; o botão do topo grava data-theme no <html> (localStorage "inicio.tema"). */
:root{
  color-scheme:light;
  --brand:#ED3237; --brand-ink:#c21f24; --brand-soft:rgba(237,50,55,.10);
  --bg:#ededed; --surface:#ffffff; --surface-2:#f5f5f5; --line:#d9d9d9;
  --ink:#1f1f1f; --ink-2:#404040; --ink-3:#676969;
  --ok:#2e7d32; --ok-soft:rgba(46,125,50,.12);
  --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.05);
  --shadow-hover:0 2px 4px rgba(0,0,0,.06),0 10px 26px rgba(0,0,0,.09);
  --logo-filter:brightness(0) opacity(.78);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --brand-soft:rgba(237,50,55,.16);
    --bg:#121212; --surface:#1b1b1b; --surface-2:#242424; --line:#2f2f2f;
    --ink:#f2f2f2; --ink-2:#c4c4c4; --ink-3:#8f8f8f;
    --ok:#81c784; --ok-soft:rgba(129,199,132,.14);
    --shadow:none; --shadow-hover:none; --logo-filter:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --brand-soft:rgba(237,50,55,.16);
  --bg:#121212; --surface:#1b1b1b; --surface-2:#242424; --line:#2f2f2f;
  --ink:#f2f2f2; --ink-2:#c4c4c4; --ink-3:#8f8f8f;
  --ok:#81c784; --ok-soft:rgba(129,199,132,.14);
  --shadow:none; --shadow-hover:none; --logo-filter:none;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  font:14px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit; color:inherit}

/* topo */
.top{
  display:flex; align-items:center; gap:14px;
  padding:14px 24px; background:var(--surface);
  border-top:3px solid var(--brand); border-bottom:1px solid var(--line);
}
.top a.home{display:block}
.logo{height:24px; width:auto; display:block; filter:var(--logo-filter)}
.sep{width:1px; height:28px; background:var(--line)}
.top h1{font-size:17px; font-weight:400; margin:0}
.top h1 b{font-weight:700}
.top .acts{margin-left:auto; display:flex; align-items:center; gap:8px}
.icon-btn{
  width:36px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:9px; background:var(--surface);
  color:var(--ink-2); cursor:pointer; padding:0;
}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn svg{width:17px; height:17px}
.user-btn{
  display:flex; align-items:center; gap:8px; height:34px; padding:0 10px 0 4px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface); cursor:pointer;
}
.user-btn:hover{background:var(--surface-2)}
.avatar{width:26px; height:26px; border-radius:7px; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700}
.menu-wrap{position:relative}
.menu{
  position:absolute; right:0; top:calc(100% + 6px); min-width:220px; z-index:20;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-hover); padding:6px;
}
.menu .who{padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; font-size:12.5px; color:var(--ink-3); word-break:break-all}
.menu .who b{display:block; color:var(--ink); font-size:13.5px}
.menu button,.menu a{display:block; width:100%; text-align:left; padding:8px 10px; border:0; background:none; border-radius:7px; cursor:pointer; text-decoration:none; color:var(--ink)}
.menu button:hover,.menu a:hover{background:var(--surface-2)}

main{flex:1; width:100%; max-width:980px; margin:0 auto; padding:48px 24px 40px}
main.wide{max-width:1180px; padding-top:28px}
.eyebrow{margin:0 0 6px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
h2{margin:0 0 6px; font-size:clamp(24px,5vw,30px); line-height:1.15; letter-spacing:-.015em; font-weight:700}
.lead{margin:0 0 28px; color:var(--ink-3); font-size:14.5px}

/* cards da página inicial */
/* 290px: com 5–6 cards fica 3 por linha no main de 980px; no celular, 1 coluna */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:16px}
a.card{
  position:relative; display:flex; flex-direction:column; gap:16px;
  text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:22px 22px 20px; box-shadow:var(--shadow); overflow:hidden;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
a.card::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--brand); transform:scaleY(0); transform-origin:top; transition:transform .2s}
a.card:hover{border-color:var(--brand); box-shadow:var(--shadow-hover); transform:translateY(-2px)}
a.card:hover::before{transform:scaleY(1)}
.ico{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--brand); color:#fff}
.ico.alt{background:var(--ink-2)}
.ico svg{width:24px; height:24px}
.card strong{display:block; font-size:18px; font-weight:700; letter-spacing:-.01em}
.card .desc{display:block; margin-top:4px; color:var(--ink-3); font-size:13.5px; line-height:1.45}
.go{margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--brand)}
.go svg{width:14px; height:14px; transition:transform .18s}
a.card:hover .go svg{transform:translateX(3px)}
.vazio{background:var(--surface); border:1px dashed var(--line); border-radius:14px; padding:28px; color:var(--ink-3); text-align:center}

/* formulários */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 14px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); cursor:pointer; font-weight:600; font-size:13.5px; text-decoration:none;
}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-ink)}
.btn.danger{color:var(--brand); border-color:var(--brand)}
.btn.ghost{border-color:transparent; background:none}
.btn:disabled{opacity:.55; cursor:default}
.f{display:flex; flex-direction:column; gap:5px; margin-bottom:12px}
.f label{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.f input,.f select{height:38px; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:var(--surface)}
.f input:focus,.f select:focus{outline:2px solid var(--brand); outline-offset:0; border-color:var(--brand)}
.erro{color:var(--brand); font-size:13px; min-height:18px; margin:2px 0 8px}
.muted{color:var(--ink-3)}

/* tela de login */
.login{flex:1; display:grid; place-items:center; padding:32px 16px}
.login form{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--brand);
  border-radius:14px; padding:28px 26px 24px; box-shadow:var(--shadow);
}
.login .logo{height:30px; margin:0 0 18px}
.login h1{font-size:21px; margin:0 0 4px}
.login p{margin:0 0 20px; color:var(--ink-3)}
.login .btn{width:100%; height:40px}

/* modal */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.42); display:grid; place-items:center; padding:16px; z-index:50}
.modal{width:100%; max-width:440px; max-height:calc(100vh - 32px); display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-hover)}
.modal.big{max-width:860px}
.modal header{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line)}
.modal header h3{margin:0; font-size:16px; flex:1}
.modal section{padding:16px 18px; overflow:auto}
.modal footer{display:flex; gap:8px; align-items:center; padding:12px 18px; border-top:1px solid var(--line)}
.modal footer .sp{flex:1}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--surface); padding:10px 16px; border-radius:9px; z-index:60; font-size:13.5px}

footer.rod{padding:18px 24px 26px; text-align:center; font-size:12px; color:var(--ink-3)}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
@media (max-width:520px){
  .top{padding:12px 16px}
  .top h1{font-size:15px}
  .user-btn .nome{display:none}
  main{padding:32px 16px 32px}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}