/* Sistema de Contratos - Espindola e Machado Advogados
   Paleta herdada do site do Dr. Alisson: marrom escuro, dourado, creme.
   Mobile-first, igual aos outros sistemas do escritorio. */

:root{
  --marrom:#2C1608;
  --marrom-2:#4A2A14;
  --dourado:#C9A84C;
  --dourado-esc:#9C7F2E;
  --creme:#FBF7F2;
  --branco:#fff;
  --texto:#2A2320;
  --texto-2:#6A5F58;
  --linha:#E4DCD1;
  --linha-2:#D3C7B7;
  --verde:#2F7A4F;
  --verde-claro:#E8F4ED;
  --vermelho:#A6342B;
  --vermelho-claro:#FBEBE9;
  --ambar:#9A6708;
  --ambar-claro:#FBF0DC;
  --azul:#2A5A7A;
  --azul-claro:#E9F1F6;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--creme);color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.55;
}
a{color:var(--marrom-2)}
h1,h2,h3{margin:0;line-height:1.25}
h1{font-size:22px}
h2{font-size:18px}
h3{font-size:15px}
p{margin:0}

/* ----- topo ----- */
.topo{background:var(--marrom);color:var(--creme)}
.topo-in{max-width:1180px;margin:0 auto;padding:10px 16px;
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.marca{display:flex;flex-direction:column;text-decoration:none;color:var(--creme)}
.marca-nome{font-size:15px;font-weight:600;letter-spacing:.02em}
.marca-sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dourado)}
.menu{display:flex;flex-wrap:wrap;gap:4px}
.menu a{color:var(--creme);text-decoration:none;padding:6px 11px;border-radius:4px;font-size:14px}
.menu a:hover{background:rgba(255,255,255,.1)}
.menu a.ativo{background:var(--dourado);color:var(--marrom);font-weight:600}
.menu a.sair{color:var(--dourado)}

.pagina{max-width:1180px;margin:0 auto;padding:22px 16px 40px;
  display:flex;flex-direction:column;gap:20px}
.rodape{max-width:1180px;margin:0 auto;padding:0 16px 30px;
  font-size:12px;color:var(--texto-2)}

/* ----- avisos ----- */
.flash{padding:10px 14px;border-radius:4px;border-left:4px solid var(--verde);
  background:var(--verde-claro);font-size:14px}
.flash.erro{border-left-color:var(--vermelho);background:var(--vermelho-claro)}

/* ----- blocos ----- */
.card{background:var(--branco);border:1px solid var(--linha);border-radius:6px;padding:16px}
.card h2{margin-bottom:10px}
.secao{display:flex;flex-direction:column;gap:12px}
.cab{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.sub{color:var(--texto-2);font-size:13.5px}

.numeros{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.num{background:var(--branco);border:1px solid var(--linha);border-radius:6px;padding:14px 16px}
.num .v{font-size:28px;font-weight:600;color:var(--marrom);line-height:1.1}
.num .r{font-size:12.5px;color:var(--texto-2);text-transform:uppercase;letter-spacing:.06em}
.num.alerta{border-left:4px solid var(--vermelho)}
.num.atencao{border-left:4px solid var(--ambar)}
.num.ok{border-left:4px solid var(--verde)}

/* ----- tabelas ----- */
.tabela-rol{overflow-x:auto;border:1px solid var(--linha);border-radius:6px;background:var(--branco)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--linha)}
th{background:#F6F1E9;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--texto-2);font-weight:600;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FCFAF6}
td.num-col,th.num-col{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.vazio{padding:18px;color:var(--texto-2);font-size:14px}

/* ----- etiquetas ----- */
.tag{display:inline-block;font-size:11px;padding:2px 7px;border-radius:3px;
  border:1px solid var(--linha-2);color:var(--texto-2);white-space:nowrap}
.tag.p{background:var(--azul-claro);border-color:var(--azul);color:var(--azul)}
.tag.g{background:var(--ambar-claro);border-color:var(--ambar);color:var(--ambar)}
.tag.obr{background:var(--marrom);border-color:var(--marrom);color:var(--creme)}
.tag.ok{background:var(--verde-claro);border-color:var(--verde);color:var(--verde)}
.tag.pend{background:#F1EDE7}
.tag.ress{background:var(--ambar-claro);border-color:var(--ambar);color:var(--ambar);font-weight:600}
.tag.disp{background:#EFEFEF;color:#777}
.tag.ruim{background:var(--vermelho-claro);border-color:var(--vermelho);color:var(--vermelho)}
.tag.bloco{background:#F3EDE2;border-color:var(--dourado-esc);color:var(--marrom-2);
  font-family:ui-monospace,Menlo,Consolas,monospace}

/* ----- barra de completude ----- */
.barra{height:7px;background:var(--linha);border-radius:4px;overflow:hidden;min-width:70px}
.barra span{display:block;height:100%;background:var(--verde)}
.barra.baixa span{background:var(--vermelho)}
.barra.media span{background:var(--ambar)}

/* ----- formularios ----- */
form.grade{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.campo{display:flex;flex-direction:column;gap:4px}
.campo.largo{grid-column:1/-1}
label{font-size:12.5px;color:var(--texto-2);font-weight:600}
input,select,textarea{
  font:inherit;padding:8px 10px;border:1px solid var(--linha-2);border-radius:4px;
  background:var(--branco);color:var(--texto);width:100%;
}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--dourado);outline-offset:1px;border-color:var(--dourado-esc)}
.acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.botao{display:inline-block;background:var(--marrom);color:var(--creme);border:1px solid var(--marrom);
  padding:8px 16px;border-radius:4px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.botao:hover{background:var(--marrom-2)}
.botao.ouro{background:var(--dourado);border-color:var(--dourado-esc);color:var(--marrom)}
.botao.fraco{background:transparent;color:var(--marrom-2);border-color:var(--linha-2);font-weight:500}
.botao.perigo{background:transparent;color:var(--vermelho);border-color:var(--vermelho)}
.botao.mini{padding:4px 10px;font-size:13px}

/* ----- abas ----- */
.abas{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--linha)}
.abas a{padding:8px 14px;text-decoration:none;color:var(--texto-2);font-size:14px;
  border-bottom:3px solid transparent;margin-bottom:-2px}
.abas a.ativo{color:var(--marrom);font-weight:600;border-bottom-color:var(--dourado)}

/* ----- ficha ----- */
.dados{display:grid;gap:10px 22px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.dado .r{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-2)}
.dado .v{font-size:15px}
.aviso{border-left:4px solid var(--ambar);background:var(--ambar-claro);
  padding:11px 14px;border-radius:4px;font-size:14px}
.aviso.ruim{border-left-color:var(--vermelho);background:var(--vermelho-claro)}
.aviso.bom{border-left-color:var(--verde);background:var(--verde-claro)}
.aviso ul{margin:6px 0 0;padding-left:18px}

.grupo-bloco{border:1px solid var(--linha);border-radius:6px;background:var(--branco);overflow:hidden}
.grupo-bloco > h3{background:#F6F1E9;padding:9px 12px;border-bottom:1px solid var(--linha);
  display:flex;gap:8px;align-items:center;font-size:14px}
.item-doc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;
  padding:9px 12px;border-bottom:1px solid var(--linha)}
.item-doc:last-child{border-bottom:none}
.item-doc .nome{flex:1 1 260px;min-width:0}
.item-doc .nome small{display:block;color:var(--texto-2);font-size:12.5px}
.item-doc form{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.item-doc select,.item-doc input{width:auto;min-width:118px;padding:5px 8px;font-size:13.5px}

/* ----- login ----- */
.tela-login{min-height:78vh;display:flex;align-items:center;justify-content:center;padding:20px}
.caixa-login{width:100%;max-width:370px;background:var(--branco);border:1px solid var(--linha);
  border-radius:8px;padding:26px;display:flex;flex-direction:column;gap:14px}
.caixa-login .marca-nome{color:var(--marrom);font-size:19px;font-weight:600}
.caixa-login .marca-sub{color:var(--dourado-esc);font-size:11px;letter-spacing:.18em;text-transform:uppercase}

@media (max-width:620px){
  .topo-in{flex-direction:column;align-items:flex-start}
  .menu{width:100%}
  h1{font-size:19px}
}