/* =====================================================================
   Indicadores Família Gatto — visual inspirado no relatório Power BI
   ===================================================================== */
:root {
  --roxo-1: #1b0d38;
  --roxo-2: #2b1554;
  --roxo-3: #3a1d63;
  --azul-barra: #1e3f8f;
  --azul-barra-2: #2a56b8;
  --verde-1: #98de7c;
  --verde-2: #76d587;
  --verde-card-a: #b6f2ae;
  --verde-card-b: #e3fbdd;
  --verde-texto: #1c3a1a;
  --verde-borda: #8fe28f;
  --branco: #ffffff;
  --cinza: #cfc6e0;
  --rosa: #e044a7;
  --azul: #355999;
  --lilas: #744ec2;
  --amarelo: #d9b300;
  --vermelho: #d64550;
  --raio: 22px;
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte);
  color: var(--branco);
  background: linear-gradient(120deg, var(--roxo-1) 0%, var(--roxo-2) 45%, var(--roxo-3) 100%) fixed;
  min-height: 100vh;
}
a { color: inherit; }

.pagina { max-width: 1440px; margin: 0 auto; padding: 10px 18px 20px; min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- topo ---------- */
.topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 4px 0 8px; }
.topo-esq { display: flex; align-items: center; gap: 10px; }
.topo-dir { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.titulo { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: .3px; text-align: center; }
.logo-topo { height: 40px; }
.btn-home img { height: 40px; display: block; border-radius: 8px; transition: transform .15s; }
.btn-home:hover img { transform: scale(1.06); }
.badge-cliente {
  border: 2px solid var(--verde-2); border-radius: 10px; padding: 4px 22px; font-size: 16px; font-weight: 600;
  background: rgba(0,0,0,.25);
}
.form-cliente { display: inline; }
select.seletor-cliente { font: inherit; font-size: 15px; cursor: pointer; color: var(--branco); padding: 5px 12px; max-width: 260px; }
select.seletor-cliente option { color: #222; }
.sair { font-size: 13px; opacity: .8; text-decoration: none; }
.sair:hover { opacity: 1; text-decoration: underline; }

.conteudo { flex: 1; display: flex; flex-direction: column; gap: 14px; }

/* ---------- rodapé ---------- */
.rodape { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
.rodape img { height: 34px; opacity: .95; }
.rodape-links { display: flex; gap: 16px; }
.link-admin { font-size: 12px; opacity: .55; text-decoration: none; }
.link-admin:hover { opacity: 1; }

/* ---------- barra de filtros (slicers) ---------- */
.filtros {
  background: linear-gradient(180deg, var(--azul-barra-2), var(--azul-barra));
  border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 8px 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.filtro { display: flex; align-items: center; gap: 8px; }
.filtro label { font-size: 13px; font-weight: 600; opacity: .9; white-space: nowrap; }
.filtro select, .filtro input[type=date] {
  font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.92); color: #222; min-width: 120px;
}
.botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.botoes button {
  font: inherit; font-size: 14px; font-weight: 600; padding: 5px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: var(--branco); transition: all .12s;
}
.botoes button:hover { background: rgba(255,255,255,.25); }
.botoes button.ativo { background: var(--verde-1); color: #163214; border-color: var(--verde-1); }
.btn-limpar {
  margin-left: auto; font: inherit; font-size: 12px; padding: 5px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--branco);
}
.btn-limpar:hover { background: rgba(255,255,255,.15); }

/* ---------- cards ---------- */
.card {
  background: radial-gradient(ellipse at center, var(--verde-card-a) 0%, var(--verde-card-b) 75%);
  border: 1px solid var(--verde-borda); border-radius: var(--raio); color: var(--verde-texto);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
  padding: 14px 18px; display: flex; flex-direction: column; min-height: 100px; min-width: 0;
}
.card .rotulo { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; opacity: .8; text-align: center; }
.card .valor { font-size: 34px; font-weight: 700; text-align: center; margin: auto 0; line-height: 1.1; word-break: break-word; }
.card .valor.grande { font-size: 56px; }
.card .valor small { font-size: .45em; font-weight: 600; opacity: .8; margin-left: 4px; }
.card .sub { font-size: 12px; text-align: center; opacity: .75; }
.card.grafico { padding: 12px 14px 10px; }
.card.grafico .rotulo { margin-bottom: 4px; }
.card .area-grafico { position: relative; flex: 1; min-height: 0; }
.card .area-grafico canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* lista de seleção (slicer vertical) */
.card.lista { padding: 12px 10px; }
.card.lista .rotulo { margin-bottom: 8px; }
.lista-itens { overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.lista-itens label {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 500;
}
.lista-itens label:hover { background: rgba(0,0,0,.06); }
.lista-itens label.ativo { background: var(--verde-1); font-weight: 700; }
.lista-itens input { display: none; }
.lista-acoes { display: flex; justify-content: center; margin-top: 8px; }
.lista-acoes button { font: inherit; font-size: 12px; background: none; border: 1px solid rgba(0,0,0,.25); border-radius: 6px; padding: 3px 10px; cursor: pointer; color: var(--verde-texto); }

/* tabela */
.card.tabela { padding: 12px 10px; }
.tabela-wrap { overflow: auto; flex: 1; min-height: 0; }
table.dados { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dados th, table.dados td { padding: 5px 8px; text-align: left; white-space: nowrap; }
table.dados th { position: sticky; top: 0; background: #a9e9a0; font-weight: 700; border-bottom: 2px solid #6cc76c; z-index: 1; }
table.dados td.num, table.dados th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dados tbody tr:nth-child(even) { background: rgba(0,0,0,.04); }
table.dados tbody tr:hover { background: rgba(0,0,0,.09); }
table.dados tfoot td { font-weight: 700; border-top: 2px solid #6cc76c; background: #b9efb0; position: sticky; bottom: 0; }
td.neg { color: #b3261e; }
td.pos { color: #1b6e1b; }
.vazio { text-align: center; opacity: .6; padding: 30px; }

/* ---------- grades por página ---------- */
.grid { display: grid; gap: 14px; }

.grid-producao {
  grid-template-areas:
    "area area area ton ton ton ton minatr minatr minatr medatr medatr medatr"
    "tch tch tch ton ton ton ton maxatr maxatr maxatr medatr medatr medatr"
    "mes mes mes mes mes mes mes mes mes meta meta meta meta";
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: 118px 118px 320px;
}
.grid-producao .a-area { grid-area: area; }   .grid-producao .a-tch { grid-area: tch; }
.grid-producao .a-ton { grid-area: ton; }     .grid-producao .a-minatr { grid-area: minatr; }
.grid-producao .a-maxatr { grid-area: maxatr; } .grid-producao .a-medatr { grid-area: medatr; }
.grid-producao .a-mes { grid-area: mes; } .grid-producao .a-meta { grid-area: meta; }

.grid-talhao {
  grid-template-columns: 240px repeat(4, 1fr) 240px;
  grid-template-areas:
    "lista area ton ton ton min"
    "lista tch ton ton ton max"
    "lista graf graf graf graf graf";
  grid-template-rows: 112px 112px 340px;
}
.grid-talhao .a-lista { grid-area: lista; } .grid-talhao .a-area { grid-area: area; }
.grid-talhao .a-tch { grid-area: tch; } .grid-talhao .a-ton { grid-area: ton; }
.grid-talhao .a-min { grid-area: min; } .grid-talhao .a-max { grid-area: max; }
.grid-talhao .a-graf { grid-area: graf; }

.grid-caixa {
  grid-template-columns: repeat(2, 1fr) 1.1fr 1fr;
  grid-template-areas:
    "fcat ftipo rec desp"
    "tab tab rec desp"
    "linha linha linha linha";
  grid-template-rows: auto 330px 290px;
}
.grid-caixa .a-fcat { grid-area: fcat; min-height: 0; } .grid-caixa .a-ftipo { grid-area: ftipo; min-height: 0; }
.grid-caixa .a-tab { grid-area: tab; } .grid-caixa .a-rec { grid-area: rec; }
.grid-caixa .a-desp { grid-area: desp; } .grid-caixa .a-linha { grid-area: linha; }
.card.seletor { padding: 10px 14px; }
.card.seletor select { width: 100%; font: inherit; font-size: 14px; padding: 6px 8px; border-radius: 8px; border: 1px solid #8fc58f; background: #fff; color: #222; margin-top: 6px; }
.card .saldo-flutuante { position: absolute; right: 18px; top: 10px; background: rgba(255,255,255,.75); border-radius: 10px; padding: 4px 12px; font-size: 13px; font-weight: 700; }

.grid-folha {
  grid-template-columns: 230px repeat(3, 1fr);
  grid-template-areas:
    "lista bruto desc liq"
    "lista tab tab tab";
  grid-template-rows: 118px 420px;
}
.grid-folha .a-lista { grid-area: lista; } .grid-folha .a-bruto { grid-area: bruto; }
.grid-folha .a-desc { grid-area: desc; } .grid-folha .a-liq { grid-area: liq; }
.grid-folha .a-tab { grid-area: tab; }

.grid-acerto {
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    "ton pago prov rec saldo"
    "graf graf graf graf graf"
    "tab tab tab tab tab";
  grid-template-rows: 118px 300px 260px;
}
.grid-acerto .a-ton { grid-area: ton; } .grid-acerto .a-pago { grid-area: pago; } .grid-acerto .a-prov { grid-area: prov; }
.grid-acerto .a-rec { grid-area: rec; } .grid-acerto .a-saldo { grid-area: saldo; }
.grid-acerto .a-graf { grid-area: graf; } .grid-acerto .a-tab { grid-area: tab; }
.grid-acerto .card .valor { font-size: 26px; }

/* ---------- menu ---------- */
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 30px 10px; }
.menu h2 { font-size: 54px; font-weight: 700; margin: 0 0 18px; letter-spacing: -1px; }
.menu-lista { display: flex; flex-direction: column; gap: 10px; }
.menu-item {
  display: flex; align-items: center; gap: 16px; text-decoration: none; padding: 10px 16px; border-radius: 14px;
  font-size: 22px; font-weight: 500; transition: background .15s, transform .15s;
}
.menu-item img { height: 46px; width: auto; border-radius: 8px; }
.menu-item:hover { background: rgba(255,255,255,.1); transform: translateX(6px); }
.menu-item.desabilitado { opacity: .5; }

/* ---------- login ---------- */
body.login {
  background: url('../img/fundo-login.jpg') center / cover no-repeat fixed, var(--roxo-2);
}
.login-box { position: absolute; right: 12%; top: 52%; transform: translateY(-50%); width: 360px; }
.login-box form { display: grid; grid-template-columns: auto 1fr; gap: 14px 12px; align-items: center; }
.login-box label { font-weight: 700; font-size: 16px; text-align: right; }
.login-box input {
  font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--verde-2);
  background: rgba(20,10,40,.6); color: #fff; outline: none;
}
.login-box input:focus { box-shadow: 0 0 0 3px rgba(118,213,135,.35); }
.login-box button {
  grid-column: 2; justify-self: start; font: inherit; font-size: 20px; padding: 6px 18px; border-radius: 6px;
  border: 1px solid #ccc; background: #f2f2f2; color: #222; cursor: pointer;
}
.login-box button:hover { background: #fff; }
.login-erro { grid-column: 1 / -1; background: rgba(214,69,80,.85); padding: 8px 12px; border-radius: 8px; font-size: 14px; }

/* ---------- admin ---------- */
.painel { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 20px 24px; max-width: 900px; }
.painel h2 { margin: 0 0 12px; font-size: 22px; }
.painel p { line-height: 1.5; }
.painel form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.painel input[type=file], .painel input[type=text], .painel input[type=password], .painel input[type=number] {
  font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.92); color: #222;
}
.painel button, .btn {
  font: inherit; font-weight: 600; padding: 8px 18px; border-radius: 8px; cursor: pointer; border: none;
  background: var(--verde-1); color: #163214; text-decoration: none; display: inline-block;
}
.painel button:hover, .btn:hover { background: var(--verde-2); }
.msg-ok { background: rgba(118,213,135,.25); border: 1px solid var(--verde-2); padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; }
.msg-erro { background: rgba(214,69,80,.3); border: 1px solid var(--vermelho); padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; }
table.simples { border-collapse: collapse; width: 100%; font-size: 14px; }
table.simples th, table.simples td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.15); text-align: left; vertical-align: middle; }
.painel button.btn-link, .painel .link-acao { background: none; border: none; color: #fff; opacity: .75; padding: 2px 8px; cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; }
.painel button.btn-link:hover, .painel .link-acao:hover { opacity: 1; background: none; }
.painel label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.painel select { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.92); color: #222; }
.abas { display: flex; gap: 8px; margin-bottom: 14px; }
.abas a { padding: 6px 14px; border-radius: 8px; text-decoration: none; background: rgba(255,255,255,.1); font-size: 14px; }
.abas a.ativo { background: var(--verde-1); color: #163214; font-weight: 600; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .grid-producao { grid-template-columns: 1fr 1fr; grid-template-areas:
    "ton ton" "area tch" "minatr maxatr" "medatr medatr" "mes mes" "meta meta"; }
  .grid-talhao { grid-template-columns: 1fr 1fr; grid-template-areas:
    "ton ton" "area tch" "min max" "lista lista" "graf graf"; }
  .grid-acerto { grid-template-columns: 1fr 1fr; grid-template-areas: "ton pago" "prov rec" "saldo saldo" "graf graf" "tab tab"; }
  .grid-producao, .grid-talhao, .grid-caixa, .grid-folha, .grid-acerto { grid-template-rows: none; }
  .card { min-height: 110px; }
  .card.grafico, .card.tabela { height: 340px; }
  .card.lista { height: 240px; }
  .grid-caixa { grid-template-columns: 1fr 1fr; grid-template-areas:
    "fcat ftipo" "rec desp" "tab tab" "linha linha"; }
  .grid-folha { grid-template-columns: 1fr 1fr 1fr; grid-template-areas:
    "bruto desc liq" "lista lista lista" "tab tab tab"; }
  .menu { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* cabeçalho em duas linhas: logo + cliente/sair em cima, título embaixo */
  .topo { grid-template-columns: auto 1fr; grid-template-areas: "esq dir" "tit tit"; row-gap: 4px; }
  .topo-esq { grid-area: esq; }
  .topo-dir { grid-area: dir; flex-wrap: wrap; row-gap: 4px; }
  .titulo { grid-area: tit; font-size: 22px; }
  .badge-cliente { padding: 3px 10px; font-size: 13px; }
  select.seletor-cliente { font-size: 13px; max-width: 200px; padding: 4px 8px; }
  .pagina { padding: 8px 12px 16px; }
  /* tabelas administrativas rolam dentro do painel */
  .painel { padding: 16px 14px; }
  .painel table.simples { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .painel form { gap: 8px; }
  .painel input[type=text], .painel input[type=password], .painel input[type=number], .painel select, .painel input[type=file] { max-width: 100%; }
  .abas { flex-wrap: wrap; }
  .grid-producao, .grid-talhao, .grid-caixa, .grid-folha, .grid-acerto { grid-template-columns: 1fr; grid-template-areas: none; }
  .grid > * { grid-area: auto !important; }
  .card .valor.grande { font-size: 40px; }
  .login-box { position: static; transform: none; width: auto; margin: 40vh 20px 0; }
  .menu h2 { font-size: 36px; }
  .menu-item { font-size: 18px; }
}