/* =============================================================
   ZPLIN | Sistema de Orçamentos — identidade visual da agência
   Navy #0F1E29 · Dourado #C9A24E · Creme #F6F1E6
   Estrutura de layout espelhada do sistema de referência da casa.
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Oswald:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --navy-deep:#0F1E29; --navy-mid:#17303F; --navy-line:#233F51;
  --gold:#C9A24E; --gold-forte:#A9822F; --gold-soft:#E4CD8E;
  --cream:#F6F1E6; --ink:#16232B; --ink-soft:#66757E;
  --tinta:#0A151E; --superficie:#122430; --superficie2:#17303F; --superficie3:#1E3D50;
  --linha:#233F51; --texto:#F1EEE6; --apagado:#9AAAB6; --apagado2:#6B7D8A;
  --verde:#4FA37A; --verde-escuro:#3A7D5C; --vermelho:#D9694A; --amarelo:#E0B457; --laranja:#D98A4A;
  --ok-green:#4FA37A; --danger:#D9694A;
  --paper:#122430; --line:#233F51;
  --raio:14px; --raio-p:9px; --radius:14px; --radius-sm:9px;
  --sombra:0 18px 40px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 10px 26px rgba(0,0,0,.32);
  --shadow-lg:0 18px 40px rgba(0,0,0,.45);
  --fonte:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Fraunces',Georgia,serif;
  --caps:'Oswald','Arial Narrow',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(201,162,78,.13), transparent 60%),
    radial-gradient(900px 460px at -8% 108%, rgba(35,63,81,.35), transparent 62%),
    var(--tinta);
  color:var(--texto); font-family:var(--fonte); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold-soft);text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.01em}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--superficie3);border-radius:20px}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.label-caps{font-family:var(--caps);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--apagado)}

/* ---------------- LOGIN / TROCA DE SENHA ---------------- */
#login-screen{
  min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1100px 600px at 80% -10%, rgba(201,162,78,.10), transparent 60%), linear-gradient(180deg,#0F1E29,#070F16);
}
.caixa-login{width:100%;max-width:400px}
.caixa-login .marca{text-align:center;margin-bottom:24px}
.caixa-login h1{font-size:20px;margin:0 0 4px}
.caixa-login p.sub{color:var(--apagado);margin:0 0 20px;font-size:13px}
.rodape-login{text-align:center;color:var(--apagado2);font-size:11.5px;margin-top:18px;letter-spacing:.05em;font-family:var(--caps);text-transform:uppercase}
#tela-trocar-senha{display:none;min-height:100vh;min-height:100dvh;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1100px 600px at 80% -10%, rgba(201,162,78,.10), transparent 60%), linear-gradient(180deg,#0F1E29,#070F16)}
#tela-trocar-senha.ativa{display:flex}
.regra-senha{font-size:12px;color:var(--gold-soft);background:rgba(201,162,78,.10);border:1px solid rgba(201,162,78,.30);
  border-radius:var(--raio-p);padding:9px 12px;margin-bottom:14px;line-height:1.45}

/* ---------------- ESTRUTURA ---------------- */
/* dvh: no celular, 100vh inclui a faixa escondida atrás da barra de endereço,
   o que empurrava o fim do conteúdo para fora da tela. */
#shell{display:none;flex-direction:column;height:100vh;height:100dvh}
#topbar,.topo{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:10px 20px;
  background:rgba(10,21,30,.92);backdrop-filter:blur(12px);color:var(--cream);
  border-bottom:1px solid var(--linha);position:relative;z-index:50;
}
.topbar-espaco{flex:1}
#topbar img#topbar-logo{height:30px;width:auto;flex:none}
.busca-codigo{display:flex;align-items:center;gap:6px;background:var(--superficie);border:1px solid var(--linha);border-radius:999px;padding:5px 6px 5px 14px}
.busca-codigo input{background:none;border:none;color:var(--texto);font-family:var(--mono);font-size:12px;width:180px;outline:none;letter-spacing:.04em;min-height:0;padding:0}
.busca-codigo input::placeholder{color:var(--apagado2);letter-spacing:normal;font-family:var(--fonte)}
.user-chip-top{display:flex;align-items:center;gap:9px;background:var(--superficie);border:1px solid var(--linha);border-radius:999px;padding:5px 6px 5px 13px;cursor:pointer;transition:filter .15s}
.user-chip-top:hover{filter:brightness(1.25)}
.user-chip-top .nome{font-size:12.5px;font-weight:600;line-height:1.15;white-space:nowrap}
.user-chip-top .perfil-label{font-size:10px;color:var(--gold-soft);text-transform:uppercase;letter-spacing:.08em}
.avatar{
  width:30px;height:30px;border-radius:50%;flex:none;overflow:hidden;
  background:linear-gradient(135deg,var(--gold),var(--gold-forte));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--navy-deep);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.grande{width:76px;height:76px;font-size:26px}

#corpo-shell{display:flex;flex:1;min-height:0}
#sidebar{width:216px;flex:0 0 216px;border-right:1px solid var(--linha);background:linear-gradient(180deg,var(--navy-deep),#08131B);
  color:var(--cream);display:flex;flex-direction:column;padding:14px 10px;overflow-y:auto}
#sidebar .grupo-nav{font-family:var(--caps);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--apagado2);margin:12px 10px 7px;font-weight:600}
.nav-item{
  width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--apagado);
  font-family:var(--fonte);font-size:13.5px;font-weight:500;text-align:left;padding:9px 11px;border-radius:var(--raio-p);cursor:pointer;
}
.nav-item:hover{background:var(--superficie2);color:var(--texto)}
.nav-item.active,.nav-item.ativo{background:linear-gradient(90deg,rgba(201,162,78,.22),rgba(201,162,78,.03));color:#fff;font-weight:600;box-shadow:inset 2px 0 0 var(--gold)}
.nav-item .ic{width:18px;text-align:center;font-size:14px;flex:none}
#content,.conteudo{flex:1;padding:22px 24px 60px;overflow-y:auto;max-width:1500px;width:100%}

/* ---------------- CABEÇALHO DE PÁGINA ---------------- */
.cabecalho-pagina,.content-header{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.cabecalho-pagina h1,.content-header h2{font-family:var(--display);font-size:23px;font-weight:600;margin:0;letter-spacing:-.015em}
.cabecalho-pagina .sub{color:var(--apagado);font-size:13px;margin:4px 0 0;max-width:760px}
.cabecalho-pagina .espaco,.content-header .espaco{flex:1}
.content-header{justify-content:space-between}

/* ---------------- INDICADORES (KPIs) ---------------- */
.indicadores,.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:13px;margin-bottom:18px}
.indicador,.kpi{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:15px 17px;position:relative;overflow:hidden;
  transition:transform .15s,box-shadow .15s}
.indicador::after,.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.indicador.verde::after{background:var(--verde)}
.indicador.amarelo::after{background:var(--amarelo)}
.indicador.vermelho::after{background:var(--vermelho)}
.indicador:hover,.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.indicador .rotulo,.kpi .k{font-family:var(--caps);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-soft);font-weight:500;opacity:.95}
.indicador .valor,.kpi .v{font-family:var(--display);font-size:26px;font-weight:600;line-height:1.15;margin-top:5px;letter-spacing:-.02em}
.indicador .nota{font-size:11.5px;color:var(--apagado);margin-top:3px}

/* ---------------- ABAS ---------------- */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--linha);margin-bottom:18px;flex-wrap:wrap}
.abas button{background:none;border:none;color:var(--apagado);font-family:var(--fonte);font-size:13.5px;font-weight:600;
  padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.abas button.ativo{color:var(--texto);border-bottom-color:var(--gold)}
.abas button:hover{color:var(--texto)}

/* ---------------- AVISOS ---------------- */
.aviso{border-radius:var(--raio-p);padding:11px 14px;font-size:13px;display:flex;gap:9px;align-items:flex-start;margin-bottom:14px}
.aviso.info{background:rgba(201,162,78,.09);border:1px solid rgba(201,162,78,.28);color:var(--gold-soft)}
.aviso.alerta{background:rgba(224,180,87,.10);border:1px solid rgba(224,180,87,.32);color:#F0D28C}
.aviso.erro{background:rgba(217,105,74,.10);border:1px solid rgba(217,105,74,.35);color:#F0A88F}
.aviso.ok{background:rgba(79,163,122,.10);border:1px solid rgba(79,163,122,.32);color:#8FD9B4}

/* ---------------- FILTROS ---------------- */
.filtros,.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filtros .campo,.filtros .field{margin:0;min-width:150px}
.filtros .campo.cresce,.filtros .field.cresce{flex:1;min-width:210px}
.filter-bar input[type=text],.filter-bar input[type=search]{min-width:230px;flex:1;max-width:420px}

/* ---------------- CARTÕES ---------------- */
.card,.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:18px;margin-bottom:16px}
.card h3,.cartao h3{font-family:var(--display);font-size:15.5px;font-weight:600}
.panel-form{background:var(--superficie2);border:1px solid var(--linha);border-radius:var(--raio);padding:16px;margin-bottom:16px}
.cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.grade{display:grid;gap:13px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
.par{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;border-bottom:1px dashed rgba(35,63,81,.7)}
.par:last-child{border-bottom:none}
.par > span{color:var(--apagado);flex:none}
.par > b{font-weight:600;text-align:right;overflow-wrap:anywhere}
.titulo-bloco{font-family:var(--caps);font-size:11.5px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  color:var(--gold-soft);margin:20px 0 9px;padding-bottom:6px;border-bottom:1px solid var(--linha)}
.titulo-bloco:first-child{margin-top:0}
/* Grade de ações secundárias dentro do corpo do modal — evita rodapé gigante. */
.acoes-bloco{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.acoes-bloco .btn{justify-content:flex-start;width:100%}


/* lista simples com marcador dourado (usada na tela de backup) */
ul.lista-simples{list-style:none;padding:0;margin:0}
ul.lista-simples li{position:relative;padding:6px 0 6px 18px;font-size:13.5px;color:var(--apagado)}
ul.lista-simples li::before{content:'';position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--gold)}


/* bloco de comandos/configuração para copiar */
pre.bloco-codigo{background:var(--tinta);border:1px solid var(--linha);border-left:3px solid var(--gold);
  border-radius:var(--raio-p);padding:14px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.75;
  color:var(--gold-soft);overflow-x:auto;margin:0 0 14px;white-space:pre}


/* barra de progresso e linhas de entrega (acompanhamento) */
.barra-progresso{height:7px;background:var(--tinta);border-radius:999px;overflow:hidden;margin:12px 0 5px}
.barra-progresso span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-forte));border-radius:999px;transition:width .4s}
.entrega-linha{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:10px 0;border-bottom:1px dashed rgba(35,63,81,.7)}
.entrega-linha:last-child{border-bottom:none}
.entrega-linha .entrega-info{flex:1;min-width:0;font-size:13px;overflow-wrap:anywhere}


/* barra de formatação dos campos de texto */
.barra-fmt{display:flex;gap:3px;align-items:center;flex-wrap:wrap;background:var(--superficie2);
  border:1px solid var(--linha);border-bottom:none;border-radius:var(--raio-p) var(--raio-p) 0 0;padding:4px 6px}
.barra-fmt + textarea{border-top-left-radius:0;border-top-right-radius:0}
.barra-fmt button{background:none;border:1px solid transparent;color:var(--apagado);font-family:var(--display);
  font-size:14px;min-width:30px;height:28px;padding:0 8px;border-radius:6px;cursor:pointer;line-height:1}
.barra-fmt button:hover{background:var(--superficie3);color:var(--texto)}
.barra-fmt button[data-previa]{font-family:var(--fonte);font-size:12px;font-weight:600}
.barra-fmt button.ativo{background:rgba(201,162,78,.18);color:var(--gold-soft);border-color:rgba(201,162,78,.35)}
.barra-fmt-sep{width:1px;height:18px;background:var(--linha);margin:0 4px}
.previa-fmt{margin-top:8px;padding:12px 14px;background:var(--tinta);border:1px dashed rgba(201,162,78,.4);
  border-radius:var(--raio-p);font-size:13.5px;line-height:1.7;white-space:pre-wrap;color:var(--texto);max-height:320px;overflow:auto}
.previa-fmt b,.texto-formatado b{color:#fff}
@media(max-width:860px){ .barra-fmt button{min-width:38px;height:36px;font-size:15px} }


/* linha com checkbox, legível e clicável inteira */
label.linha-check{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--texto);
  cursor:pointer;padding:6px 0;line-height:1.5;text-transform:none;letter-spacing:0;font-family:var(--fonte)}
label.linha-check input{margin-top:3px;flex:none}


/* painel das duas assinaturas */
.grade-assin{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:860px){.grade-assin{grid-template-columns:1fr}}
.lado-assin{background:var(--superficie2);border:1px solid var(--linha);border-radius:var(--raio-p);padding:14px;font-size:13.5px}
.lado-assin.pendente{border-style:dashed;opacity:.8}
.caps-assin{font-family:var(--caps);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px}
.rubrica-assin{display:block;max-width:100%;max-height:70px;background:#fff;border-radius:6px;padding:4px 8px;margin-bottom:8px}
.evid-assin{font-family:var(--mono);font-size:11.5px;color:var(--apagado);margin-top:6px;line-height:1.6}
.quadro-zp{position:relative;background:#fff;border:1px dashed var(--gold);border-radius:var(--raio-p);overflow:hidden}
.quadro-zp canvas{display:block;width:100%;height:160px;touch-action:none;cursor:crosshair}
.dica-zp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#B9AE93;pointer-events:none}

/* ---------------- FORMULÁRIOS ---------------- */
.field,.campo{display:block;margin-bottom:13px;flex:1;min-width:0}
.field > label,.campo > label{display:block;font-family:var(--caps);font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.09em;color:var(--apagado);margin-bottom:5px}
.field .ajuda,.campo .ajuda{font-size:11.5px;color:var(--apagado2);margin-top:4px}
.row{display:flex;gap:13px;flex-wrap:wrap}
input:not([type]),input[type=text],input[type=password],input[type=number],input[type=date],
input[type=datetime-local],input[type=email],input[type=search],input[type=tel],input[type=url],
input[type=time],input[type=month],input[type=week],select,textarea{
  width:100%;background:var(--tinta);border:1px solid var(--linha);border-radius:var(--raio-p);
  color:var(--texto);font-family:var(--fonte);font-size:13.5px;padding:9px 11px;outline:none;
}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,78,.18)}
input[readonly]{color:var(--apagado);background:var(--superficie2)}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
textarea{min-height:76px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--apagado) 50%),linear-gradient(135deg,var(--apagado) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
input[type=file]{width:100%;background:var(--tinta);border:1px dashed var(--linha);border-radius:var(--raio-p);color:var(--apagado);font-size:12.5px;padding:8px 10px}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--gold);vertical-align:-3px;margin-right:6px}

/* ---------------- BOTÕES ---------------- */
.btn,.botao{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linha);background:var(--superficie2);
  color:var(--texto);font-family:var(--fonte);font-size:13px;font-weight:600;padding:9px 15px;border-radius:var(--raio-p);cursor:pointer;
  transition:transform .08s ease,filter .15s ease;white-space:nowrap;text-decoration:none;
}
.btn:hover,.botao:hover{filter:brightness(1.18)}
.btn:active,.botao:active{transform:translateY(1px)}
.btn:disabled,.botao:disabled{opacity:.45;cursor:not-allowed}
.btn-primary,.botao.primario{background:linear-gradient(135deg,var(--gold),var(--gold-forte));border-color:transparent;color:var(--navy-deep)}
.btn-gold,.botao.dourado{background:linear-gradient(135deg,var(--gold-soft),var(--gold));border-color:transparent;color:var(--navy-deep)}
.btn-outline,.botao.fantasma{background:transparent}
.btn-verde,.botao.verde{background:linear-gradient(135deg,var(--verde),var(--verde-escuro));border-color:transparent;color:#04231a}
.btn-danger,.botao.perigo{background:rgba(217,105,74,.14);border-color:rgba(217,105,74,.42);color:#F0A88F}
.btn-sm,.botao.pequeno{padding:6px 11px;font-size:12px}
.btn-bloco,.botao.bloco{width:100%;justify-content:center}

/* ---------------- TABELAS ---------------- */
table{width:100%;border-collapse:collapse;font-size:13px}
table th{text-align:left;font-family:var(--caps);font-size:10.5px;text-transform:uppercase;letter-spacing:.10em;color:var(--apagado2);
  font-weight:500;padding:9px 10px;border-bottom:1px solid var(--linha);white-space:nowrap}
table td{padding:10px;border-bottom:1px solid rgba(35,63,81,.5);vertical-align:middle}
table tr:last-child td{border-bottom:none}
table tbody tr:hover{background:rgba(23,48,63,.55)}
table td.num,table th.num{text-align:right;font-family:var(--mono);font-size:12.5px}
.rolagem{overflow-x:auto;margin:0 -4px;padding:0 4px}

/* ---------------- SELOS / CÓDIGOS ---------------- */
.badge,.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--caps);font-size:10.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.badge.ok,.chip.verde{background:rgba(79,163,122,.16);color:#8FD9B4;border-color:rgba(79,163,122,.35)}
.badge.warn,.chip.amarelo{background:rgba(224,180,87,.15);color:#F0D28C;border-color:rgba(224,180,87,.35)}
.badge.bad,.chip.vermelho{background:rgba(217,105,74,.15);color:#F0A88F;border-color:rgba(217,105,74,.35)}
.badge.off,.chip.cinza{background:var(--superficie2);color:var(--apagado);border-color:var(--linha)}
.badge.lock{background:rgba(217,105,74,.2);color:#F0A88F;border-color:rgba(217,105,74,.45)}

/* Barras do fluxo de caixa: programado (cinza) x recebido (verde) por mês. */
.barra-dupla{display:flex;flex-direction:column;gap:4px;min-width:160px}
.barra-linha{display:flex;align-items:center}
.barra-fundo{display:block;flex:1;height:7px;background:var(--tinta);border-radius:999px;overflow:hidden}
.barra-fundo i{display:block;height:100%;border-radius:999px;transition:width .25s ease}
tr.linha-futura td{opacity:.72}
tr.linha-futura td:first-child{opacity:1}
.chip.dourado{background:rgba(201,162,78,.16);color:var(--gold-soft);border-color:rgba(201,162,78,.38)}
.codigo-pill,.codigo{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--gold-soft);font-weight:600;
  background:rgba(201,162,78,.10);border:1px solid rgba(201,162,78,.28);border-radius:999px;padding:2px 10px;display:inline-block}
.mono{font-family:var(--mono)}
.muted{color:var(--apagado);font-size:12.5px}
.empty-state,.vazio{text-align:center;padding:40px 20px;color:var(--apagado);font-size:13px}

/* seletor de tipo de orçamento */
.tipo-selector{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tipo-selector button{background:var(--superficie2);border:1px solid var(--linha);color:var(--apagado);font-family:var(--fonte);
  font-size:13px;font-weight:600;padding:9px 16px;border-radius:999px;cursor:pointer}
.tipo-selector button.ativo{background:linear-gradient(135deg,var(--gold),var(--gold-forte));border-color:transparent;color:var(--navy-deep)}

/* ---------------- LINHA DO TEMPO ---------------- */
.timeline,.linha-tempo{position:relative;padding-left:28px}
.timeline::before,.linha-tempo::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--linha)}
.timeline-item,.linha-tempo .marco{position:relative;padding:0 0 20px}
.timeline-item::before,.linha-tempo .marco::before{content:'';position:absolute;left:-24px;top:3px;width:14px;height:14px;border-radius:50%;
  background:var(--tinta);border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(201,162,78,.12)}
.timeline-item .evt{font-family:var(--display);font-size:14px;font-weight:600}
.timeline-item .meta{font-family:var(--mono);font-size:11.5px;color:var(--apagado2);margin-top:2px}

/* ---------------- MODAIS (dois níveis) ---------------- */
#fundo-modal,#fundo-modal-2,.fundo-modal{position:fixed;inset:0;background:rgba(4,10,15,.76);backdrop-filter:blur(4px);
  display:none;align-items:flex-start;justify-content:center;padding:34px 16px;overflow:auto}
/* Os modais PRECISAM ficar acima do #sidebar (z-index 900), que no celular
   vira a barra de menu fixa no rodapé. Com z-index menor, essa barra cobria
   os ~88px de baixo do modal — justamente onde ficam os botões do rodapé
   (era por isso que o botão verde de assinar não aparecia no celular). */
#fundo-modal{z-index:1000}
#fundo-modal-2{z-index:1020}
#fundo-modal.aberto,#fundo-modal-2.aberto,.fundo-modal.aberto{display:flex}
/* A caixa é uma COLUNA FLEX com overflow:hidden. Sem isso, um max-height sem
   overflow deixa o rodapé ser desenhado fora da caixa (e fora da tela), sem
   jeito de rolar até ele — porque o #fundo-modal é position:fixed. */
.modal-caixa{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);
  width:100%;max-width:780px;animation:sobe .16s ease;
  display:flex;flex-direction:column;overflow:hidden;max-height:calc(100vh - 68px)}
.modal-caixa.largo{max-width:1060px}
.modal-caixa.estreito{max-width:460px}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal-cabecalho{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--linha);flex:none}
.modal-cabecalho h3{font-family:var(--display);font-size:16.5px;font-weight:600;margin:0;flex:1}
.modal-fechar{background:none;border:none;color:var(--apagado);font-size:22px;cursor:pointer;line-height:1;padding:2px 6px}
.modal-corpo{padding:20px;flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
/* O rodapé nunca engole a caixa inteira: no máximo 46% da altura e, se tiver
   mais botões do que isso, ele mesmo rola. flex:none para não ser esmagado. */
.modal-rodape{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--linha);flex-wrap:wrap;
  flex:none;max-height:46vh;overflow-y:auto;overscroll-behavior:contain;background:var(--superficie)}

/* ---------------- TOASTS ---------------- */
.toast{position:fixed;right:18px;bottom:18px;z-index:1100;background:var(--superficie2);border:1px solid var(--linha);
  border-left:3px solid var(--gold);border-radius:var(--raio-p);padding:12px 16px;font-size:13px;box-shadow:var(--sombra);
  max-width:380px;animation:sobe .16s ease}

/* ---------------- IMPRESSÃO ---------------- */
@media print{
  body{background:#fff;color:#000}
  #topbar,#sidebar,.abas,.filtros,.filter-bar,.btn,.botao,.toast{display:none !important}
  #shell,#content,#corpo-shell{display:block !important;padding:0}
  .card,.cartao{background:#fff;border:1px solid #ccc;color:#000}
  @page{margin:14mm}
}

/* ===================== MOBILE ===================== */
@media(max-width:860px){
  #corpo-shell{flex-direction:column}
  #topbar{padding:0 12px;height:54px;gap:9px}
  #topbar img#topbar-logo{height:24px}
  .busca-codigo{display:none}
  .user-chip-top{padding:4px;border:none;background:none}
  .user-chip-top .nome,.user-chip-top .perfil-label{display:none}

  /* menu vira barra inferior */
  /* Os botões ficam dentro de #nav-items, então é ELE que precisa virar a
     barra horizontal — e o flex-direction:column do desktop precisa ser
     revertido, senão o menu empilha e toma metade da tela. */
  #sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;flex:none;height:auto;z-index:900;
    border-right:none;border-top:1px solid var(--linha);background:var(--tinta);
    display:block;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:4px 6px;
    padding-bottom:calc(4px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(0,0,0,.4)}
  #sidebar::-webkit-scrollbar{display:none}
  #nav-items{display:flex;flex-direction:row;align-items:stretch;gap:2px;min-width:100%}
  #sidebar .grupo-nav{display:none}
  .nav-item{width:auto;min-width:64px;flex:1 1 0;flex-direction:column;justify-content:center;gap:3px;
    padding:6px 3px;font-size:9.5px;line-height:1.1;text-align:center;border-radius:11px;box-shadow:none;
    white-space:normal;overflow-wrap:anywhere;hyphens:auto}
  .nav-item.active,.nav-item.ativo{background:rgba(201,162,78,.16);box-shadow:none;color:#fff}
  .nav-item .ic{width:auto;font-size:17px;line-height:1}
  #content{padding:14px 13px calc(92px + env(safe-area-inset-bottom))}
  .cabecalho-pagina h1,.content-header h2{font-size:20px}
  .cabecalho-pagina .espaco{display:none}
  .btn,.botao{min-height:42px;padding:9px 14px}
  .btn-sm,.botao.pequeno{min-height:36px;padding:7px 11px;font-size:12.5px}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;min-height:44px}
  .filtros,.filter-bar{flex-direction:column;align-items:stretch;gap:8px}
  .filtros .campo,.filtros .field,.filter-bar input[type=text],.filter-bar input[type=search]{width:100%;min-width:0;max-width:none}
  .indicadores,.kpi-grid{grid-template-columns:1fr 1fr !important;gap:9px}
  .indicador,.kpi{padding:12px}
  .indicador .valor,.kpi .v{font-size:23px}
  .abas{overflow-x:auto;flex-wrap:nowrap;margin-bottom:12px}
  .abas::-webkit-scrollbar{display:none}
  .abas button{white-space:nowrap;flex:none;min-height:40px}
  .row{flex-direction:column;gap:0}
  table{font-size:12.5px}
  table th,table td{padding:8px 9px;white-space:nowrap}
  .card,.cartao{padding:14px}
  .cartoes,.grade.g2,.grade.g3,.grade.g4{grid-template-columns:1fr}
  #fundo-modal,#fundo-modal-2{align-items:flex-end;padding:0;overflow:hidden}
  /* 93dvh em vez de 93vh: no celular o 100vh conta a área que fica ESCONDIDA
     atrás da barra de endereço do navegador, então o fundo da caixa caía fora
     da tela. O dvh usa só a altura realmente visível. */
  .modal-caixa,.modal-caixa.largo,.modal-caixa.estreito{max-width:100%;width:100%;
    max-height:93vh;max-height:93dvh;
    border-radius:16px 16px 0 0;border-bottom:none}
  .modal-corpo{padding:16px}
  .modal-rodape{padding:12px 16px;max-height:52vh;max-height:52dvh;
    padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .modal-rodape .btn{flex:1 1 42%;justify-content:center}
  .toast{left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));max-width:none;z-index:1100}
}
@media(max-width:400px){
  .indicadores,.kpi-grid{grid-template-columns:1fr !important}
  .cabecalho-pagina h1,.content-header h2{font-size:18px}
}