/* Zampier Acompanha — identidade: papel quente, tinta verde-escura, a trilha que não se perde. */
:root {
  --papel: #F5F1E8;
  --cartao: #FFFDF8;
  --tinta: #1C2A27;
  --tinta-2: #44524D;
  --tinta-3: #6B746F;
  --linha: #DAD5C8;
  --linha-2: #E9E4D8;
  --verde: #1F6B4F;
  --verde-forte: #17523D;
  --verde-claro: #DCEBE2;
  --urgente: #B83A27;
  --urgente-bg: #F8E1DC;
  --importante: #9A6408;
  --importante-bg: #F6EAD0;
  --circ: #3F5A7A;
  --circ-bg: #E0E7F0;
  --ok: #1F6B4F;
  --serie-a: #2A8C63;
  --serie-b: #A8650F;
  --sombra: 0 1px 2px rgba(28, 42, 39, .06), 0 6px 18px rgba(28, 42, 39, .06);
  --raio: 14px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lateral: 252px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--tinta); background: var(--papel); font-size: 16px; line-height: 1.45; overflow-x: hidden; }
img { max-width: 100%; }
a { color: var(--verde); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 1.65rem; line-height: 1.15; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: .3rem 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid #E0A93B; outline-offset: 2px; }
#conteudo:focus, #conteudo:focus-visible { outline: none; }

/* ---------- Marca ---------- */
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.marca svg { flex: none; }
.marca b { font-family: var(--serif); font-size: 1.12rem; display: block; line-height: 1.1; }
.marca small { display: block; font-size: .72rem; opacity: .75; letter-spacing: .02em; }

/* ---------- Estrutura ---------- */
.layout { min-height: 100vh; }
.lateral { display: none; }
.topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .65rem 1rem; background: var(--tinta); color: #F2EEE3; }
.topo .botao-menu { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 10px; padding: .45rem .7rem; display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.principal { padding: 1rem 1rem 5rem; max-width: 1180px; margin: 0 auto; min-width: 0; }
.gaveta-fundo { position: fixed; inset: 0; background: rgba(15, 24, 22, .5); z-index: 40; display: none; }
.gaveta { position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 320px); background: var(--tinta); color: #EDE8DC; z-index: 41;
  transform: translateX(-102%); transition: transform .2s ease; display: flex; flex-direction: column; padding: 1rem; overflow-y: auto; }
body.menu-aberto .gaveta { transform: none; }
body.menu-aberto .gaveta-fundo { display: block; }
.nav { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: .7rem; padding: .62rem .75rem; border-radius: 10px; color: #E6E1D4; text-decoration: none; font-size: .97rem; }
.nav a:hover { background: rgba(255,255,255,.07); }
.nav a.ativo { background: #F2EEE3; color: var(--tinta); font-weight: 600; }
.nav a .cont { margin-left: auto; font-size: .75rem; background: rgba(255,255,255,.14); padding: .05rem .5rem; border-radius: 99px; }
.nav a.ativo .cont { background: var(--tinta); color: #fff; }
.nav svg { flex: none; opacity: .9; }
.quem { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding-top: .9rem; font-size: .88rem; }
.quem b { display: block; }
.quem span { opacity: .75; font-size: .8rem; }
.quem button { margin-top: .6rem; background: transparent; color: #F2EEE3; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; padding: .4rem .8rem; cursor: pointer; }

@media (min-width: 1000px) {
  .layout { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr);
    /* coluna pintada no fundo do grid: a lateral nunca parece cortada em página longa */
    background: linear-gradient(to right, var(--tinta) 0, var(--tinta) var(--lateral), var(--papel) var(--lateral)); }
  .lateral { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--tinta); color: #EDE8DC; padding: 1.2rem 1rem; }
  .topo, .gaveta, .gaveta-fundo { display: none !important; }
  .principal { padding: 2rem 2.2rem 4rem; width: 100%; }
}

/* ---------- Cabeçalho de página ---------- */
.cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem; margin-bottom: 1.1rem; }
.cab .sub { color: var(--tinta-3); font-size: .95rem; margin-top: .25rem; }
.cab .acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.sobretitulo { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--tinta-3); font-weight: 700; margin-bottom: .25rem; }

/* ---------- Botões ---------- */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border-radius: 10px; border: 1px solid var(--linha);
  background: var(--cartao); padding: .55rem .9rem; cursor: pointer; text-decoration: none; color: var(--tinta); font-weight: 600; font-size: .92rem; min-height: 42px; line-height: 1.15; text-align: center; }
.bt:hover { border-color: #BFB8A7; }
.bt.prim { background: var(--verde); border-color: var(--verde); color: #fff; }
.bt.prim:hover { background: var(--verde-forte); }
.bt.perigo { color: var(--urgente); border-color: #E7B9AF; }
.bt.zap { background: #E7F4EC; border-color: #A9D3B9; color: #135A3A; }
.bt.peq { padding: .35rem .65rem; min-height: 36px; font-size: .85rem; }
.bt.fant { background: transparent; border-color: transparent; color: var(--verde); padding-left: .4rem; padding-right: .4rem; }
.bt[disabled] { opacity: .55; cursor: not-allowed; }
.bt-linha { display: flex; flex-wrap: wrap; gap: .45rem; }

/* ---------- Cartões e blocos ---------- */
.cartao { background: var(--cartao); border: 1px solid var(--linha-2); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem; min-width: 0; }
.cartao + .cartao { margin-top: .75rem; }
.grade { display: grid; gap: .75rem; }
@media (min-width: 720px) { .grade.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grade.g3x { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.secao { margin-top: 1.6rem; }
.secao > h2 { margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.muted { color: var(--tinta-3); }
.peq { font-size: .85rem; }
.vazio { text-align: center; color: var(--tinta-3); padding: 1.6rem 1rem; border: 1.5px dashed var(--linha); border-radius: var(--raio); background: rgba(255,255,255,.4); }

/* ---------- Números do dia ---------- */
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 720px) { .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.num { background: var(--cartao); border: 1px solid var(--linha-2); border-radius: var(--raio); padding: .8rem .9rem; text-decoration: none; color: inherit; display: block; }
.num b { font-family: var(--serif); font-size: 2rem; line-height: 1; display: block; }
.num span { font-size: .84rem; color: var(--tinta-2); }
.num.alerta b { color: var(--urgente); }
.num.morto { background: #2B3532; color: #EDE8DC; border-color: #2B3532; }
.num.morto span { color: #C9C3B4; }

/* ---------- Blocos de decisão ---------- */
.bloco { border-radius: var(--raio); padding: .2rem 0 0; }
.bloco-cab { display: flex; align-items: center; gap: .55rem; margin: 1.4rem 0 .6rem; }
.bloco-cab h2 { font-size: 1.2rem; }
.bloco-cab .qtd { font-size: .8rem; font-weight: 700; padding: .1rem .55rem; border-radius: 99px; }
.selo { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.b-urgente .selo, .b-urgente .qtd { background: var(--urgente); color: #fff; }
.b-importante .selo, .b-importante .qtd { background: var(--importante); color: #fff; }
.b-circunstancial .selo, .b-circunstancial .qtd { background: var(--circ); color: #fff; }
.decisao { border-left: 5px solid var(--linha); }
.decisao.urgente { border-left-color: var(--urgente); }
.decisao.importante { border-left-color: var(--importante); }
.decisao.circunstancial { border-left-color: var(--circ); }
.decisao h3 { font-size: 1.08rem; margin-bottom: .15rem; }
.decisao .ctx { margin: .5rem 0 .6rem; color: var(--tinta); }
.decisao .bt-linha { margin-top: .75rem; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; padding: .16rem .55rem; border-radius: 99px; background: #EFEBE1; color: var(--tinta-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip.urgente { background: var(--urgente-bg); color: #8E2B1C; }
.chip.importante { background: var(--importante-bg); color: #6E4805; }
.chip.circunstancial { background: var(--circ-bg); color: #2E4560; }
.chip.ok { background: var(--verde-claro); color: #164F3A; }
.chip.morto { background: #2B3532; color: #EDE8DC; }
.chip.azul { background: #E3ECF6; color: #2B4A6E; }
.chip.d1 { background: #EEF2EA; color: #3D5A2E; }
.chip.d2 { background: var(--importante-bg); color: #6E4805; }
.chip.d3 { background: #F7DCCB; color: #8A3B12; }
.chip.d4 { background: var(--urgente); color: #fff; }
.chip.d5 { background: #E6E0F2; color: #4A3A73; }

/* ---------- Listas de tarefas ---------- */
.tarefas { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.tarefas li { display: flex; gap: .55rem; align-items: flex-start; padding: .5rem .6rem; border-radius: 10px; background: #F7F4EC; font-size: .92rem; }
.tarefas li .t { flex: 1; min-width: 0; }
.tarefas li .t b { font-weight: 600; display: block; overflow-wrap: anywhere; }
.ponto { width: 10px; height: 10px; border-radius: 50%; margin-top: .4rem; flex: none; background: var(--linha); }
.ponto.aberta { background: #8FA39A; } .ponto.atrasada { background: var(--urgente); } .ponto.entregue { background: #D9A441; }
.ponto.verificada { background: var(--verde); } .ponto.sem_prova { background: #2B3532; } .ponto.cancelada { background: #BDB6A6; }

.item-tarefa { display: grid; gap: .5rem; }
.item-tarefa .linha1 { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.item-tarefa h3 { font-family: var(--sans); font-size: 1rem; font-weight: 650; overflow-wrap: anywhere; }
.prazo { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.prazo.atrasada { color: var(--urgente); } .prazo.hoje { color: var(--importante); } .prazo.ok { color: var(--verde); }
.aviso { border-radius: 10px; padding: .6rem .75rem; font-size: .9rem; background: var(--importante-bg); color: #5E3E05; }
.aviso.erro { background: var(--urgente-bg); color: #7E2516; }
.aviso.info { background: var(--circ-bg); color: #263D57; }
.aviso.ok { background: var(--verde-claro); color: #164F3A; }

/* ---------- Barra de progresso do plano ---------- */
.barra { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #EDE9DF; gap: 2px; }
.barra span { display: block; height: 100%; }
.barra .v { background: var(--verde); } .barra .e { background: #D9A441; } .barra .a { background: #9DB0A7; } .barra .x { background: var(--urgente); } .barra .s { background: #2B3532; }
.legenda { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .78rem; color: var(--tinta-2); margin-top: .45rem; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }

/* ---------- Formulários ---------- */
.campo { display: grid; gap: .3rem; margin-bottom: .8rem; min-width: 0; }
.campo label, .rotulo { font-weight: 600; font-size: .88rem; }
.campo .ajuda { font-size: .8rem; color: var(--tinta-3); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=tel], select, textarea, .campo-data {
  width: 100%; min-width: 0; border: 1px solid #CFC8B8; background: #fff; border-radius: 10px; padding: .6rem .7rem; min-height: 44px; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--verde); outline-offset: 0; border-color: var(--verde); }
.linha-campos { display: grid; gap: .7rem; }
@media (min-width: 640px) { .linha-campos.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .linha-campos.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opcoes-radio { display: flex; flex-wrap: wrap; gap: .4rem; }
.opcoes-radio label { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .7rem; border: 1px solid #CFC8B8; border-radius: 10px; background: #fff; cursor: pointer; font-weight: 600; font-size: .88rem; }
.opcoes-radio input { accent-color: var(--verde); }
.opcoes-radio label:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); }
fieldset { border: 0; margin: 0 0 .8rem; padding: 0; min-width: 0; }
legend { font-weight: 600; font-size: .88rem; margin-bottom: .35rem; padding: 0; }

/* Campo de data: rótulo dd/mm/aaaa visível, input nativo transparente por cima. */
.campo-data { position: relative; display: flex; align-items: center; gap: .5rem; padding-right: 2.4rem; cursor: pointer; }
.campo-data .rotulo-data { pointer-events: none; }
.campo-data .rotulo-data.vazio { color: #8D9590; }
.campo-data svg { position: absolute; right: .7rem; pointer-events: none; color: var(--tinta-3); }
.campo-data input[type=date] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.campo-data:focus-within { outline: 2px solid var(--verde); border-color: var(--verde); }

.tarefa-linha { border: 1px solid var(--linha); border-radius: 12px; padding: .75rem; background: #FBF9F3; margin-bottom: .6rem; }
.tarefa-linha .cab-t { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; font-weight: 700; font-size: .85rem; color: var(--tinta-2); }

/* ---------- Modelos rápidos ---------- */
.modelos { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; max-width: 100%; }
.modelos button { flex: none; border: 1px solid var(--linha); background: var(--cartao); border-radius: 12px; padding: .55rem .75rem; text-align: left; cursor: pointer; max-width: 230px; }
.modelos button b { display: block; font-size: .88rem; }
.modelos button span { font-size: .76rem; color: var(--tinta-3); }

/* ---------- Abas e filtros ---------- */
.abas { display: flex; gap: .35rem; overflow-x: auto; margin-bottom: .9rem; padding-bottom: 2px; max-width: 100%; }
.abas button, .abas a { flex: none; border: 1px solid var(--linha); background: var(--cartao); padding: .45rem .8rem; border-radius: 99px; cursor: pointer; font-weight: 600; font-size: .86rem; color: var(--tinta-2); text-decoration: none; }
.abas .ativa { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.filtros { display: grid; gap: .5rem; margin-bottom: .9rem; }
@media (min-width: 720px) { .filtros { grid-template-columns: 2fr 1fr 1fr; } }

/* ---------- Cobrança ---------- */
.pessoa-cab { display: flex; justify-content: space-between; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .4rem; }
.pessoa-cab .ini { width: 38px; height: 38px; border-radius: 50%; background: var(--verde-claro); color: var(--verde-forte); display: grid; place-items: center; font-weight: 800; flex: none; }
.pessoa-cab .nm { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.msg { background: #F1F7F2; border: 1px solid #D3E6D9; border-radius: 12px 12px 12px 4px; padding: .65rem .75rem; font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.cobranca + .cobranca { border-top: 1px solid var(--linha-2); margin-top: .8rem; padding-top: .8rem; }
.escada { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
@media (min-width: 720px) { .escada { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.degrau { border-radius: 12px; padding: .6rem .7rem; background: var(--cartao); border: 1px solid var(--linha-2); }
.degrau b { font-family: var(--serif); font-size: 1.5rem; display: block; line-height: 1.1; }
.degrau span { font-size: .8rem; color: var(--tinta-2); }

/* ---------- Provas ---------- */
.prova { display: grid; gap: .5rem; background: #F7F4EC; border-radius: 12px; padding: .7rem; }
.prova img { border-radius: 10px; max-height: 260px; object-fit: cover; width: 100%; cursor: zoom-in; background: #eee; }
.prova .num-prova { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; }
.miniatura { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }

/* ---------- WhatsApp ---------- */
.conversa { background: #EFE9DD; border-radius: var(--raio); padding: .8rem; display: grid; gap: .4rem; max-height: 70vh; overflow-y: auto; }
.bolha { max-width: 88%; background: #fff; border-radius: 12px; padding: .45rem .65rem; font-size: .9rem; box-shadow: 0 1px 1px rgba(0,0,0,.06); overflow-wrap: anywhere; }
.bolha.destaque { outline: 2px solid #D9A441; }
.bolha .au { font-weight: 700; font-size: .78rem; color: var(--verde); }
.bolha .hr { font-size: .7rem; color: var(--tinta-3); text-align: right; }
.bolha img { display: block; border-radius: 8px; margin: .3rem 0; max-height: 220px; }
.bolha.sis { justify-self: center; background: #E2F0F6; font-size: .78rem; color: #3B5160; text-align: center; }
.data-sep { justify-self: center; font-size: .74rem; background: #DDE7EA; padding: .15rem .6rem; border-radius: 8px; color: #3B5160; }

/* ---------- Tabelas ---------- */
.tabela-wrap { overflow-x: auto; max-width: 100%; border-radius: var(--raio); border: 1px solid var(--linha-2); background: var(--cartao); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: .55rem .7rem; border-bottom: 1px solid var(--linha-2); text-align: left; vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); background: #F7F4EC; white-space: nowrap; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Mapa ---------- */
.unidade h3 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: .6rem 0; }
.metricas div { background: #F7F4EC; border-radius: 10px; padding: .45rem .5rem; }
.metricas b { display: block; font-family: var(--serif); font-size: 1.3rem; line-height: 1.1; }
.metricas span { font-size: .72rem; color: var(--tinta-2); }
.metricas .ruim b { color: var(--urgente); }

/* ---------- Gráfico ---------- */
.grafico { position: relative; }
.grafico svg { display: block; width: 100%; max-width: 720px; height: auto; overflow: visible; }
.grafico .eixo { stroke: #E4DFD3; stroke-width: 1; }
.grafico text { fill: var(--tinta-3); font-size: 11px; font-family: var(--sans); }
.grafico .alvo { fill: transparent; cursor: default; }
.grafico .alvo:hover { fill: rgba(28, 42, 39, .05); }
.dica { position: absolute; pointer-events: none; background: var(--tinta); color: #fff; font-size: .8rem; padding: .45rem .6rem; border-radius: 8px; white-space: nowrap; z-index: 5; transform: translate(-50%, -110%); display: none; }
.dica i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .35rem; }
details.tabela-ver summary { cursor: pointer; font-size: .85rem; color: var(--verde); font-weight: 600; margin-top: .4rem; }

/* ---------- Histórico ---------- */
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { position: relative; padding: 0 0 .9rem 1.2rem; border-left: 2px solid var(--linha); margin-left: .3rem; font-size: .9rem; overflow-wrap: anywhere; }
.linha-tempo li::before { content: ""; position: absolute; left: -6px; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--cartao); border: 2px solid var(--verde); }
.linha-tempo li.t-cobranca::before, .linha-tempo li.t-cobranca_enviada::before { border-color: var(--importante); }
.linha-tempo li.t-escalonamento::before, .linha-tempo li.t-bloqueio::before { border-color: var(--urgente); }
.linha-tempo li.t-enterrada::before { border-color: #2B3532; background: #2B3532; }
.linha-tempo .q { font-size: .76rem; color: var(--tinta-3); display: block; }

/* ---------- Modal e avisos ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(15, 24, 22, .55); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 720px) { .modal-fundo { align-items: center; padding: 1rem; } }
.modal { background: var(--cartao); width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 1.1rem 1.1rem 1.4rem; box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
@media (min-width: 720px) { .modal { border-radius: 18px; } }
.modal.largo { max-width: 860px; }
.modal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .8rem; }
.modal-cab button { background: transparent; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--tinta-3); padding: .1rem .4rem; }
.modal .rodape { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: .7rem 1rem; border-radius: 12px; z-index: 80; box-shadow: var(--sombra); max-width: calc(100vw - 2rem); font-size: .92rem; }
.toast.erro { background: var(--urgente); }
.carregando { padding: 2rem; text-align: center; color: var(--tinta-3); }

/* ---------- Tela de entrada ---------- */
.entrada { min-height: 100vh; display: grid; }
@media (min-width: 960px) { .entrada { grid-template-columns: 1.05fr 1fr; } }
.entrada-arte { background: var(--tinta); color: #EDE8DC; padding: 1.4rem 1.2rem 1.6rem; position: relative; overflow: hidden; }
.entrada-arte h1 { font-size: 1.9rem; margin: 1.6rem 0 .6rem; color: #fff; max-width: 15ch; }
.entrada-arte p { color: #CFC9BA; max-width: 46ch; }
.trilha { margin-top: 1.4rem; display: grid; gap: .5rem; max-width: 420px; }
.trilha div { display: flex; gap: .7rem; align-items: center; font-size: .92rem; }
.trilha i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #6FAF92; display: grid; place-items: center; font-style: normal; font-size: .78rem; font-weight: 800; color: #9FD3BA; flex: none; }
@media (min-width: 960px) { .entrada-arte { padding: 3rem; display: flex; flex-direction: column; justify-content: center; } .entrada-arte h1 { font-size: 2.8rem; } }
.entrada-form { padding: 1.4rem 1.2rem 2.5rem; display: flex; flex-direction: column; justify-content: center; max-width: 520px; width: 100%; margin: 0 auto; }
.papeis { display: grid; gap: .5rem; margin: .8rem 0 1.4rem; }
.papeis button { display: flex; align-items: center; gap: .8rem; text-align: left; border: 1px solid var(--linha); background: var(--cartao); border-radius: 14px; padding: .75rem .9rem; cursor: pointer; }
.papeis button:hover { border-color: var(--verde); }
.papeis button b { display: block; }
.papeis button span { font-size: .82rem; color: var(--tinta-3); }
.papeis .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--verde-claro); color: var(--verde-forte); flex: none; font-weight: 800; }
.divisor { display: flex; align-items: center; gap: .6rem; color: var(--tinta-3); font-size: .85rem; margin: .4rem 0 1rem; }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.rodape-demo { margin-top: 1.2rem; font-size: .8rem; color: var(--tinta-3); }

@media print { .lateral, .topo, .bt { display: none !important; } .layout { display: block; background: none; } }
@media (forced-colors: active) { .barra span, .selo, .ponto { forced-color-adjust: none; } }

/* Campo de arquivo em português: o input nativo fica transparente por cima. */
.campo-arquivo { position: relative; display: flex; align-items: center; gap: .6rem; border: 1.5px dashed #CFC8B8; background: #fff; border-radius: 10px; padding: .5rem .6rem; min-height: 50px; min-width: 0; }
.campo-arquivo .nome-arq { font-size: .88rem; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.campo-arquivo input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.campo-arquivo:focus-within { outline: 2px solid var(--verde); }
.campo-arquivo .bt { flex: none; white-space: nowrap; pointer-events: none; }