/* ===================================================================
   Painel ML · Casa & Vida
   Verde #8DC63F · Laranja #F26F21 (principal) · Dourado #F8A823
   Display: Fraunces · Texto: Outfit
   =================================================================== */
:root{
  --verde:#8DC63F; --verde-esc:#6fa12c;
  --laranja:#F26F21; --laranja-esc:#d65a12;
  --dourado:#F8A823;
  --tinta:#241a12;          /* texto principal (marrom-quase-preto) */
  --tinta-fraca:#8a7b6c;    /* texto secundário */
  --papel:#faf6f0;          /* fundo da página (off-white quente) */
  --cartao:#ffffff;
  --borda:#ece3d8;
  --escuro:#1b1510;         /* cabeçalho */
  --sombra:0 1px 2px rgba(36,26,18,.04), 0 8px 24px rgba(36,26,18,.06);
  --raio:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Outfit',system-ui,sans-serif;
  color:var(--tinta); background:var(--papel);
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em}
a{color:inherit}

/* ───────── LOGIN ───────── */
.tela-login{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(242,111,33,.22), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(141,198,63,.18), transparent 55%),
    var(--escuro);
}
.login-card{
  width:100%; max-width:380px; background:var(--cartao);
  border-radius:22px; padding:40px 34px; text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  animation:sobe .5s cubic-bezier(.2,.8,.2,1) both;
}
.login-logo{width:190px;height:auto;margin-bottom:18px}
.login-titulo{font-size:24px}
.login-sub{color:var(--tinta-fraca);font-size:14px;margin:4px 0 26px}
.login-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.login-form label{font-size:13px;font-weight:600;color:var(--tinta-fraca);display:flex;flex-direction:column;gap:6px}
.login-form input{
  font:inherit;padding:12px 14px;border:1.5px solid var(--borda);
  border-radius:11px;background:#fff;color:var(--tinta);transition:border-color .15s,box-shadow .15s;
}
.login-form input:focus{outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(242,111,33,.15)}
.login-form button{
  margin-top:6px;font:inherit;font-weight:700;color:#fff;cursor:pointer;
  padding:13px;border:none;border-radius:11px;
  background:linear-gradient(135deg,var(--laranja),var(--laranja-esc));
  transition:transform .12s, filter .12s;
}
.login-form button:hover{filter:brightness(1.05)}
.login-form button:active{transform:scale(.985)}
.alerta{
  background:#fdecea;color:#b42318;border:1px solid #f6c9c2;
  padding:10px 14px;border-radius:10px;font-size:13.5px;margin-bottom:18px;
}
.login-rodape{margin-top:26px;font-size:12px;color:var(--tinta-fraca)}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ───────── PAINEL ───────── */
.topo{
  background:var(--escuro);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;gap:16px;position:sticky;top:0;z-index:10;
  box-shadow:0 2px 18px rgba(0,0,0,.18);
}
.topo-marca{display:flex;align-items:center;gap:16px}
.topo-logo{height:42px;width:auto}
.topo h1{font-size:19px;line-height:1.1;color:#fff;font-weight:600}
.topo-data{font-size:12.5px;color:#b9aa9b}
.btn-sair{
  font-weight:600;font-size:13.5px;color:#fff;text-decoration:none;
  border:1.5px solid rgba(255,255,255,.25);padding:8px 16px;border-radius:10px;
  transition:background .15s,border-color .15s;
}
.btn-sair:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}

.conteudo{max-width:1240px;margin:0 auto;padding:28px 24px 60px;display:flex;flex-direction:column;gap:24px}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media(max-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{
  background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio);
  padding:18px 18px 16px;box-shadow:var(--sombra);position:relative;overflow:hidden;
  animation:sobe .45s both;
}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--cor,var(--laranja))}
.card .rotulo{font-size:12.5px;color:var(--tinta-fraca);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.card .valor{font-family:'Fraunces',serif;font-size:34px;font-weight:600;line-height:1.05;margin-top:8px}
.card .nota{font-size:12.5px;color:var(--tinta-fraca);margin-top:4px}
.card.skeleton{height:104px;background:linear-gradient(100deg,#f3ece3 30%,#faf4ec 50%,#f3ece3 70%);background-size:200% 100%;animation:brilho 1.2s infinite}
@keyframes brilho{to{background-position:-200% 0}}

/* GRÁFICOS */
.graficos{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:900px){.graficos{grid-template-columns:1fr}}
.painel-box{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio);padding:22px 24px;box-shadow:var(--sombra)}
.painel-box h2{font-size:17px;margin-bottom:16px}
.grafico-wrap{position:relative;height:260px}

/* TABELA */
.tabela-cabecalho{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  border:1.5px solid var(--borda);background:#fff;color:var(--tinta-fraca);
  padding:7px 14px;border-radius:999px;transition:all .15s;
}
.chip:hover{border-color:var(--laranja)}
.chip.ativo{background:var(--laranja);border-color:var(--laranja);color:#fff}
#busca{
  font:inherit;font-size:14px;padding:9px 14px;border:1.5px solid var(--borda);
  border-radius:10px;min-width:230px;
}
#busca:focus{outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(242,111,33,.13)}

.tabela-rolagem{overflow-x:auto;border:1px solid var(--borda);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  background:#f4ece2;color:var(--tinta-fraca);font-weight:700;text-align:left;
  padding:12px 14px;white-space:nowrap;position:sticky;top:0;
}
th.num,td.num{text-align:right}
tbody td{padding:11px 14px;border-top:1px solid var(--borda);vertical-align:middle}
tbody tr:hover{background:#fbf6ef}
.titulo-cel{max-width:330px;font-weight:600}
.atrib-cel{max-width:260px;color:var(--tinta-fraca);font-size:12.5px}

.badge{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.b-ativo{background:#e8f5d8;color:#4e7d12}
.b-pausado{background:#fde7d3;color:#b85410}
.b-revisao{background:#fff3cf;color:#8a6608}
.b-fechado{background:#eee;color:#777}

.acao{font-weight:600;font-size:12.5px}
.a-reativar{color:var(--laranja-esc)}
.a-excluir{color:#b42318}
.a-ficha{color:#8a6608}
.a-revisao{color:var(--tinta-fraca)}
.a-ok{color:var(--verde-esc)}

.qual{font-weight:700}
.q-bom{color:var(--verde-esc)} .q-medio{color:var(--dourado)} .q-ruim{color:#b42318} .q-na{color:#bcae9e}

.link-ml{color:var(--laranja);font-weight:700;text-decoration:none;font-size:16px}
.link-ml:hover{color:var(--laranja-esc)}
.contagem{margin-top:12px;font-size:13px;color:var(--tinta-fraca)}