/* =====================================================================
   Controle de Cobrança — estilo
   Paleta tirada do pátio da Porteira Aberta: serragem, pinus, ferro e zarcão.
   Números e datas sempre em fonte monoespaçada (leitura de caderneta).
   ===================================================================== */

:root {
    --serragem:  #E7E0D2;   /* fundo */
    --papel:     #FBF8F2;   /* cartões e tabelas */
    --tinta:     #201C17;   /* texto */
    --tinta-2:   #6B6154;   /* texto de apoio */
    --pinus:     #2F4A3C;   /* cor principal */
    --pinus-c:   #3E6350;   /* hover */
    --zarcao:    #A83A22;   /* atraso */
    --ocre:      #B8791A;   /* vence hoje / atenção */
    --musgo:     #4A6B36;   /* pago / confirmação */
    --whats:     #1E7A4A;   /* botão de WhatsApp */
    --risca:     #D6CDBB;   /* linhas e bordas */

    --fonte: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --mono:  Consolas, "Cascadia Mono", "SF Mono", Menlo, monospace;
    --raio: 4px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--serragem);
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.45;
}

a { color: var(--pinus); }

h1 { font-size: 1.55rem; letter-spacing: -.015em; margin: .1rem 0 0; }
h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .09em;
     color: var(--tinta-2); margin: 0 0 .9rem; font-weight: 700; }

.etiqueta {
    font-family: var(--mono);
    font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--tinta-2); margin: 0;
}
.apoio { color: var(--tinta-2); font-size: .88rem; }
.numero { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.destaque { font-size: 1.1rem; font-weight: 700; }
.direita { text-align: right; }

/* ---------- Topo ---------- */
.topo { background: var(--pinus); color: #F3EFE6; }
.topo-interno {
    max-width: 1180px; margin: 0 auto; padding: .8rem 1.2rem;
    display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
}
.marca { display: flex; flex-direction: column; line-height: 1.1; }
.marca-nome { font-weight: 700; letter-spacing: -.01em; }
.marca-sub { font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
             letter-spacing: .14em; color: #A9C0B1; }
.menu { display: flex; gap: .3rem; margin-right: auto; flex-wrap: wrap; }
.menu a {
    color: #D8E3DA; text-decoration: none; padding: .35rem .75rem;
    border-radius: var(--raio); font-size: .92rem;
}
.menu a:hover { background: var(--pinus-c); color: #fff; }
.menu a.ativo { background: #F3EFE6; color: var(--pinus); font-weight: 600; }
.usuario { display: flex; align-items: center; gap: .8rem; font-size: .85rem; color: #C6D4C9; }
.sair { color: #F3EFE6; text-decoration: underline; }

.conteudo { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }

.rodape {
    max-width: 1180px; margin: 0 auto; padding: 1rem 1.2rem 2rem;
    display: flex; justify-content: space-between;
    color: var(--tinta-2); font-size: .78rem; border-top: 1px solid var(--risca);
}
.rodape-data { font-family: var(--mono); }

/* ---------- Cabeçalho de página ---------- */
.cabecalho-pagina {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem;
}

/* ---------- Indicadores ---------- */
.painel-resumo {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .8rem; margin-bottom: 1.4rem;
}
.indicador {
    background: var(--papel); border: 1px solid var(--risca);
    border-left: 5px solid var(--risca); border-radius: var(--raio);
    padding: .85rem 1rem; text-decoration: none; color: inherit; display: block;
}
.indicador-numero { display: block; font-family: var(--mono); font-size: 1.7rem;
                    font-weight: 700; line-height: 1.1; }
.indicador-rotulo { display: block; font-size: .82rem; color: var(--tinta-2); }
.indicador-valor  { display: block; font-family: var(--mono); font-size: .85rem; color: var(--tinta-2); }
.indicador-vencida { border-left-color: var(--zarcao); }
.indicador-vencida .indicador-numero { color: var(--zarcao); }
.indicador-hoje    { border-left-color: var(--ocre); }
.indicador-proxima { border-left-color: var(--pinus); }
.indicador-retorno { border-left-color: var(--tinta-2); }

/* ---------- Filtros ---------- */
.barra-filtros {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem;
}
.abas { display: flex; gap: .2rem; flex-wrap: wrap; }
.aba {
    padding: .4rem .85rem; text-decoration: none; color: var(--tinta-2);
    border: 1px solid transparent; border-radius: var(--raio); font-size: .9rem;
}
.aba:hover { background: #DDD5C4; }
.aba.ativa { background: var(--papel); border-color: var(--risca); color: var(--tinta); font-weight: 600; }
.busca { display: flex; gap: .4rem; }
.busca-topo { margin-bottom: 1rem; }
.busca input { min-width: 210px; }

/* ---------- Tabela ---------- */
.tabela {
    width: 100%; border-collapse: separate; border-spacing: 0 4px;
    font-size: .92rem;
}
.tabela th {
    text-align: left; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .1em; color: var(--tinta-2); padding: .2rem .7rem .4rem;
    font-weight: 700;
}
.tabela td { background: var(--papel); padding: .65rem .7rem; vertical-align: top;
             border-top: 1px solid var(--risca); border-bottom: 1px solid var(--risca); }
.tabela td:first-child { border-left: 1px solid var(--risca); border-radius: var(--raio) 0 0 var(--raio); }
.tabela td:last-child  { border-right: 1px solid var(--risca); border-radius: 0 var(--raio) var(--raio) 0; }
.tabela-simples { font-size: .9rem; }
.sub { display: block; font-size: .78rem; color: var(--tinta-2); }
.sub-alerta { color: var(--zarcao); font-weight: 600; }
.link-forte { color: var(--tinta); font-weight: 600; text-decoration: none; }
.link-forte:hover { text-decoration: underline; }
.link-discreto { color: var(--tinta-2); font-size: .8rem; background: none; border: 0;
                 cursor: pointer; text-decoration: underline; padding: 0; font-family: inherit; }

/* A coluna de prazo é o sinal principal do painel */
.col-prazo { width: 92px; }
.prazo-numero { display: block; font-family: var(--mono); font-size: 1.45rem;
                font-weight: 700; line-height: 1; }
.prazo-texto  { display: block; font-size: .7rem; text-transform: uppercase;
                letter-spacing: .06em; color: var(--tinta-2); }

.linha td:first-child { border-left: 5px solid var(--risca); }
.situacao-vencida td:first-child   { border-left-color: var(--zarcao); }
.situacao-vencida .prazo-numero    { color: var(--zarcao); }
.situacao-hoje td:first-child      { border-left-color: var(--ocre); }
.situacao-hoje .prazo-numero       { color: var(--ocre); }
.situacao-proxima td:first-child   { border-left-color: var(--pinus); }
.situacao-paga td:first-child      { border-left-color: var(--musgo); }
.situacao-paga td                  { opacity: .72; }
.situacao-cancelada td             { opacity: .55; }

.acoes { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.em-linha { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.em-linha-fim { display: flex; gap: .6rem; align-items: flex-end; }

/* ---------- Selos ---------- */
.selo {
    display: inline-block; font-size: .72rem; font-weight: 700; padding: .12rem .5rem;
    border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.selo-vencida   { color: var(--zarcao); border-color: var(--zarcao); background: #F7E8E3; }
.selo-hoje      { color: var(--ocre);   border-color: var(--ocre);   background: #FAF0DC; }
.selo-proxima,
.selo-aberta    { color: var(--pinus);  border-color: var(--pinus);  background: #E7EFE9; }
.selo-paga      { color: var(--musgo);  border-color: var(--musgo);  background: #EAF0E3; }
.selo-cancelada { color: var(--tinta-2); border-color: var(--risca); background: #EFEAE0; }

/* ---------- Cartões ---------- */
.grade-detalhe {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem;
    align-items: start;
}
.cartao {
    background: var(--papel); border: 1px solid var(--risca);
    border-radius: var(--raio); padding: 1.1rem 1.2rem;
}
.cartao-acao { border-top: 4px solid var(--pinus); }

.ficha { display: grid; grid-template-columns: 150px 1fr; gap: .35rem 1rem; margin: 0; }
.ficha dt { color: var(--tinta-2); font-size: .85rem; }
.ficha dd { margin: 0; }

.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li {
    display: grid; grid-template-columns: 118px 1fr; gap: .8rem;
    padding: .55rem 0; border-bottom: 1px solid var(--risca);
}
.linha-tempo li:last-child { border-bottom: 0; }
.linha-tempo-data { color: var(--tinta-2); font-size: .8rem; }

.divisor { border: 0; border-top: 1px solid var(--risca); margin: 1.1rem 0; }

/* ---------- Formulários ---------- */
.formulario { display: flex; flex-direction: column; gap: .7rem; }
.formulario label { display: flex; flex-direction: column; gap: .25rem;
                    font-size: .85rem; color: var(--tinta-2); }
input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], input[type=search], select, textarea {
    font-family: var(--fonte); font-size: .95rem; color: var(--tinta);
    padding: .5rem .6rem; border: 1px solid var(--risca); border-radius: var(--raio);
    background: #fff; width: 100%;
}
input[type=date], input[type=number], input[type=search] { font-family: var(--mono); }
textarea { resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus, .botao:focus-visible, a:focus-visible {
    outline: 2px solid var(--pinus); outline-offset: 1px;
}
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.caixa-marcar { flex-direction: row !important; align-items: center; gap: .5rem !important;
                color: var(--tinta) !important; font-size: .9rem !important; }
.caixa-marcar input { width: auto; }

/* ---------- Botões ---------- */
.botao {
    display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
    font-family: var(--fonte); font-size: .88rem; font-weight: 600;
    padding: .5rem .9rem; border-radius: var(--raio); border: 1px solid transparent;
}
.botao-primario { background: var(--pinus); color: #F3EFE6; }
.botao-primario:hover { background: var(--pinus-c); }
.botao-neutro { background: transparent; color: var(--tinta); border-color: var(--risca); }
.botao-neutro:hover { background: #EFEAE0; }
.botao-whats { background: var(--whats); color: #fff; }
.botao-whats:hover { background: #17663D; }
.largura-total { width: 100%; }

/* ---------- Avisos e vazios ---------- */
.aviso { border-radius: var(--raio); padding: .8rem 1rem; margin-bottom: 1rem;
         border-left: 5px solid; background: var(--papel); font-size: .9rem; }
.aviso p { margin: .4rem 0 0; }
.aviso-ok       { border-color: var(--musgo); }
.aviso-erro     { border-color: var(--zarcao); }
.aviso-atencao  { border-color: var(--ocre); }
.aviso-neutro   { border-color: var(--risca); }

.vazio {
    background: var(--papel); border: 1px dashed var(--risca); border-radius: var(--raio);
    padding: 2rem; text-align: center; color: var(--tinta-2);
}
.vazio p { margin: .3rem 0; }

/* ---------- Telas de login e instalação ---------- */
.tela-simples { display: flex; align-items: center; justify-content: center;
                min-height: 100vh; padding: 1.5rem; }
.cartao-central {
    background: var(--papel); border: 1px solid var(--risca); border-top: 5px solid var(--pinus);
    border-radius: var(--raio); padding: 2rem; width: 100%; max-width: 400px;
}
.cartao-central h1 { margin-bottom: .3rem; }
.cartao-central .formulario { margin-top: 1.2rem; }
.lista-passos { padding-left: 1.1rem; font-size: .9rem; }
.lista-passos li { margin-bottom: .4rem; }

/* ---------- Telas pequenas ---------- */
@media (max-width: 900px) {
    .grade-detalhe, .duas-colunas { grid-template-columns: 1fr; }
    .ficha { grid-template-columns: 1fr; }
    .ficha dd { margin-bottom: .4rem; }
    .tabela { display: block; overflow-x: auto; white-space: nowrap; }
    .acoes { justify-content: flex-start; }
    .cabecalho-pagina { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Itens da venda ---------- */
#itens input, #itens select { padding: .35rem .45rem; font-size: .88rem; }
#itens td { padding: .35rem .4rem; }
.rodape-itens {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap; margin: .8rem 0 1rem;
    padding-top: .8rem; border-top: 1px solid var(--risca);
}
.totais { text-align: right; font-size: .9rem; color: var(--tinta-2); }
.totais b { color: var(--tinta); }
#bloco-valor-manual { max-width: 320px; margin-bottom: 1rem; }
.link-perigo { color: var(--zarcao); font-weight: 600; }
.campo-alerta { border-color: var(--zarcao) !important; background: #FBEDE9 !important; }

/* ---------- Prévia de estoque no painel ---------- */
.alerta-estoque-topo {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.lista-estoque {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .3rem .9rem;
}
.lista-estoque li {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .25rem 0; border-bottom: 1px dotted var(--risca);
}
.item-nome   { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-saldo  { font-weight: 700; }
.item-minimo { font-size: .75rem; color: var(--tinta-2); white-space: nowrap; }

/* ---------- Blocos do painel (Estoque / Cobrança) ---------- */
.bloco { margin-bottom: 2.4rem; }
.bloco-titulo {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; flex-wrap: wrap;
    padding-bottom: .4rem; margin-bottom: 1rem;
    border-bottom: 2px solid var(--risca);
}
.bloco-titulo h2 { margin: 0; }
.bloco-estoque  { border-bottom-color: var(--ocre); }
.bloco-estoque h2 { color: var(--ocre); }
.bloco-cobranca { border-bottom-color: var(--pinus); }
.bloco-cobranca h2 { color: var(--pinus); }
.link-bloco { font-size: .82rem; white-space: nowrap; }

.cartao-estoque { border-left: 4px solid var(--ocre); padding: .9rem 1.1rem; }
.lista-estoque { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .1rem 1.4rem; }
.lista-estoque li { padding: .35rem 0; }
.item-nome { white-space: normal; overflow: visible; text-overflow: clip; }
/* botão dentro da faixa de título do bloco */
.bloco-titulo { align-items: center; padding-bottom: .55rem; }
.bloco-titulo .botao { padding: .38rem .8rem; font-size: .84rem; }

/* ---------- Auditoria ---------- */
.filtros-auditoria {
    display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.filtros-auditoria label { display: flex; flex-direction: column; gap: .25rem;
                           font-size: .8rem; color: var(--tinta-2); }
.filtros-auditoria input, .filtros-auditoria select { width: auto; min-width: 140px; }
.paginacao { display: flex; align-items: center; gap: 1rem; justify-content: center; margin: 1rem 0; }
.campo-produto { width: 100%; }
.campo-produto.produto-ok { border-color: var(--musgo); background: #F3F7EE; }
.dica-produto { display: block; font-size: .74rem; color: var(--tinta-2); padding: .15rem .1rem 0; }
.selo-link { text-decoration: none; cursor: pointer; }
.selo-link:hover { filter: brightness(.94); text-decoration: underline; }

/* ---------- Cabeçalho de cartão com filtro ---------- */
.cabecalho-cartao {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.cabecalho-cartao h2 { margin: 0; }
.abas-mini .aba { padding: .22rem .6rem; font-size: .78rem; }
.botao-atencao { background: var(--ocre); color: #fff; }
.botao-atencao:hover { background: #A06914; }

/* Texto pequeno dentro de célula de tabela (sem quebrar o alinhamento) */
.texto-miudo { font-size: .78rem; color: var(--tinta-2); }
.tabela td.numero, .tabela th.direita { white-space: nowrap; }
.filtros-saldo { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.filtros-saldo .busca input { min-width: 170px; }
.bloco-largo { display: block; margin-bottom: 1.2rem; }
.bloco-largo .cartao { width: 100%; }

/* ---------- Financeiro: barras ---------- */
.barra-linha { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; font-size: .85rem; }
.barra-rotulo  { width: 68px; color: var(--tinta-2); flex-shrink: 0; }
.barra-legenda { width: 68px; color: var(--tinta-2); font-size: .78rem; flex-shrink: 0; }
.barra-trilho  { flex: 1; height: 14px; background: #E4DDCD; border-radius: 2px; overflow: hidden; min-width: 40px; }
.barra-preenchida { display: block; height: 100%; background: var(--pinus); }
.barra-paga    { background: var(--musgo); }
.barra-vencida { background: var(--zarcao); }
.barra-valor   { width: 110px; text-align: right; flex-shrink: 0; }
.mes-bloco { padding: .5rem 0; border-bottom: 1px dotted var(--risca); }
.mes-bloco:last-child { border-bottom: 0; }
.mes-rotulo { font-weight: 700; font-size: .82rem; margin-bottom: .25rem; }
.indicador-paga { border-left-color: var(--musgo); }
.indicador-paga .indicador-numero { color: var(--musgo); }
.texto-alerta { color: var(--zarcao); }
.selo-legado { color: #6B4A9E; border-color: #6B4A9E; background: #F0EBF8; }
.botao-perigo { background: var(--zarcao); color: #fff; }
.botao-perigo:hover { background: #8E2E1B; }
.eco-moeda { display: block; font-size: .78rem; color: var(--musgo); padding-top: .2rem; font-style: italic; }
.tres-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
@media (max-width: 900px) { .tres-colunas { grid-template-columns: 1fr; } }
.botoes-salvar { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.botoes-salvar .botao { flex: 1; min-width: 200px; }
.ajuste-vencimento summary { cursor: pointer; font-size: .85rem; color: var(--tinta-2);
                             padding: .3rem 0; font-weight: 600; }
.ajuste-vencimento[open] summary { margin-bottom: .5rem; }
.marca-login { font-size: 2rem; line-height: 1.15; letter-spacing: -.025em; margin: 0 0 .4rem; }

/* ---------- Tela de entrada com foto de fundo ---------- */
.tela-login {
    position: relative;
    background-image: url('fundo-login.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.tela-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(28, 24, 18, .38);
}
.cartao-login {
    position: relative;
    background: rgba(251, 248, 242, .78);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border: 1px solid rgba(255, 255, 255, .55);
    border-top: 5px solid var(--pinus);
    box-shadow: 0 8px 34px rgba(0, 0, 0, .38);
}
.cartao-login .marca-login { text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.cartao-login input { background: rgba(255, 255, 255, .92); }