:root {
  --verde: #1f4a1d;
  --verde-2: #2e6b2a;
  --verde-claro: #e6efd9;
  --laranja: #e8621c;
  --laranja-2: #c94f10;
  --laranja-claro: #fdeadf;
  --amarelo: #f5c21b;
  --creme: #f7f3e8;
  --papel: #fffdf7;
  --tinta: #22261f;
  --tinta-2: #5b6355;
  --borda: #ddd6c3;
  --perigo: #c0392b;
  --raio: 18px;
  --sombra: 0 10px 30px rgba(31, 74, 29, .12);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--tinta);
  background: var(--creme);
  line-height: 1.45;
}
h1, h2, h3, .cartao-titulo, legend { font-family: 'Lilita One', 'Nunito', sans-serif; font-weight: 400; letter-spacing: .5px; }
a { color: inherit; }
.hidden { display: none !important; }
.so-print { display: none; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 10px 20px;
  font: 700 15px 'Nunito', sans-serif; cursor: pointer; text-decoration: none;
  transition: transform .1s, background .15s, opacity .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover:not(:disabled) { background: var(--verde-2); }
.btn-laranja { background: var(--laranja); color: #fff; }
.btn-laranja:hover { background: var(--laranja-2); }
.btn-claro { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-claro:hover { background: rgba(255,255,255,.25); }
.btn-claro-borda { background: transparent; color: var(--tinta); border: 1.5px solid var(--borda); }
.btn-perigo { background: var(--perigo); color: #fff; }
.btn-perigo-claro { background: #fff; color: var(--perigo); border: 1.5px solid #e9b8b1; }
.btn-grande { padding: 14px 28px; font-size: 17px; width: 100%; max-width: 380px; }
.btn-mini { padding: 6px 12px; font-size: 13px; }

/* ---------- Topo ---------- */
.topo {
  background: var(--verde);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px clamp(16px, 4vw, 40px);
  position: sticky; top: 0; z-index: 10;
}
.topo-marca img { height: 54px; display: block; background: #fff; border-radius: 12px; padding: 3px 6px; }
.topo-acoes { display: flex; gap: 8px; }

/* ---------- Início ---------- */
.hero {
  background: radial-gradient(circle at 80% 0%, #3b7a33 0%, var(--verde) 60%);
  color: #fff; text-align: center;
  padding: clamp(36px, 7vw, 72px) 16px clamp(48px, 8vw, 80px);
}
.hero-sub { margin: 0; color: var(--amarelo); font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; }
.hero h1 { margin: 6px 0 12px; font-size: clamp(34px, 7vw, 60px); line-height: 1.05; }
.hero-txt { max-width: 560px; margin: 0 auto; opacity: .9; font-size: 17px; }
.rasgo {
  height: 34px; margin-top: -34px; position: relative;
  background: var(--creme);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V14l12 6 10-9 14 7 9-8 16 10 8-12 13 9 11-6 15 8 10-10 12 7 14-5 9 9 13-11 11 8 16-6 8 9 15-10 10 6 13-8 12 10 9-7 16 6 11-9 14 8 10-6 12 9 15-11 9 8 13-6 11 9 14-8 10 7V34Z'/%3E%3C/svg%3E") center/100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V14l12 6 10-9 14 7 9-8 16 10 8-12 13 9 11-6 15 8 10-10 12 7 14-5 9 9 13-11 11 8 16-6 8 9 15-10 10 6 13-8 12 10 9-7 16 6 11-9 14 8 10-6 12 9 15-11 9 8 13-6 11 9 14-8 10 7V34Z'/%3E%3C/svg%3E") center/100% 100%;
}
.cartoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 3vw, 32px);
  max-width: 900px; margin: 12px auto 60px; padding: 0 16px;
}
.cartao {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  aspect-ratio: 1 / 1; min-height: 260px;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 26px; text-decoration: none;
  background: var(--papel); box-shadow: var(--sombra);
  border: 3px solid transparent;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cartao:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 18px 40px rgba(31,74,29,.18); }
.cartao::after {
  content: ""; position: absolute; right: -60px; bottom: -60px;
  width: 200px; height: 200px; border-radius: 50%; opacity: .14;
}
.cartao-verde:hover { border-color: var(--verde-2); }
.cartao-verde::after { background: var(--verde-2); }
.cartao-laranja:hover { border-color: var(--laranja); }
.cartao-laranja::after { background: var(--laranja); }
.cartao-icone {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.cartao-verde .cartao-icone { background: var(--verde-2); }
.cartao-laranja .cartao-icone { background: var(--laranja); }
.cartao-titulo { font-size: clamp(30px, 5vw, 40px); line-height: 1; margin-top: auto; }
.cartao-verde .cartao-titulo { color: var(--verde); }
.cartao-laranja .cartao-titulo { color: var(--laranja); }
.cartao-titulo b { font-weight: 400; font-size: 1.25em; }
.cartao-txt { color: var(--tinta-2); font-weight: 600; }
.cartao-cta { font-weight: 800; }
.cartao-verde .cartao-cta { color: var(--verde-2); }
.cartao-laranja .cartao-cta { color: var(--laranja); }

/* ---------- Formulários ---------- */
.ficha { max-width: 860px; margin: 24px auto 60px; padding: 0 16px; }
.ficha-cab { margin-bottom: 18px; }
.ficha-cab h2 { font-size: clamp(30px, 6vw, 42px); margin: 6px 0 0; color: var(--verde); }
#formMedica .ficha-cab h2 { color: var(--laranja); }
.ficha-intro { margin: 4px 0 0; color: var(--tinta-2); font-weight: 600; }
.voltar { text-decoration: none; font-weight: 700; color: var(--tinta-2); }
.voltar:hover { color: var(--tinta); }

fieldset {
  border: 0; margin: 0 0 18px; padding: clamp(18px, 3vw, 26px);
  background: var(--papel); border-radius: var(--raio); box-shadow: 0 2px 10px rgba(0,0,0,.04);
  border-left: 6px solid var(--verde-2);
}
#formMedica fieldset { border-left-color: var(--laranja); }
legend { float: left; width: 100%; font-size: 22px; color: var(--verde); margin-bottom: 12px; padding: 0; }
#formMedica legend { color: var(--laranja-2); }
legend.sub { font-size: 16px; margin-top: 16px; color: var(--tinta-2); font-family: 'Nunito'; font-weight: 800; }
.obg { font: 700 12px 'Nunito'; background: var(--amarelo); color: var(--tinta); padding: 2px 8px; border-radius: 99px; vertical-align: middle; margin-left: 6px; }
fieldset > *:not(legend) { clear: both; }

.grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 16px; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; }
.c6 { grid-column: span 6; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; } .c12 { grid-column: span 12; }
@media (max-width: 640px) {
  .grade > * { grid-column: span 12 !important; }
  .grade > .c2 { grid-column: span 6 !important; }
  .grade > .c4:has(input[name="nascimento"]) { grid-column: span 6 !important; }
}

label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; color: var(--tinta-2); }
label small { font-weight: 600; color: var(--laranja-2); }
input, textarea, select {
  font: 600 16px 'Nunito', sans-serif; color: var(--tinta);
  border: 1.5px solid var(--borda); border-radius: 12px; padding: 11px 13px;
  background: #fff; width: 100%; min-width: 0;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--verde-2); box-shadow: 0 0 0 3px rgba(46,107,42,.15); }
#formMedica input:focus, #formMedica textarea:focus { border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(232,98,28,.15); }
input.calc { background: var(--verde-claro); border-color: transparent; text-align: center; font-weight: 800; }
.invalido, .invalido input { border-color: var(--perigo) !important; }
.opcoes.invalido { outline: 2px solid var(--perigo); outline-offset: 4px; border-radius: 14px; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { flex-direction: row; cursor: pointer; position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.chip span {
  display: inline-block; padding: 9px 16px; border-radius: 99px;
  border: 1.5px solid var(--borda); background: #fff; color: var(--tinta); font-weight: 700;
  transition: all .12s;
}
.chip span::before { content: "○ "; color: var(--borda); }
.chip input[type=checkbox] + span::before { content: "☐ "; }
.chip input:checked + span { background: var(--verde-2); border-color: var(--verde-2); color: #fff; }
.chip input:checked + span::before { content: "✓ "; color: var(--amarelo); }
#formMedica .chip input:checked + span { background: var(--laranja); border-color: var(--laranja); }
#formMedica .chip input:checked + span::before { color: #fff; }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(46,107,42,.3); }
.pergunta { display: flex; flex-direction: column; gap: 8px; font-weight: 700; font-size: 14px; color: var(--tinta-2); }

.aviso { background: #fff7d6; border-radius: 10px; padding: 10px 14px; margin: 14px 0 0; font-weight: 600; font-size: 14px; }
.termo { margin-top: 16px; background: var(--creme); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: var(--tinta-2); }
.termo b { color: var(--tinta); }
.aceite { flex-direction: row; align-items: center; gap: 10px; margin-top: 14px; color: var(--tinta); cursor: pointer; }
.aceite input { width: 22px; height: 22px; accent-color: var(--verde-2); flex: none; }
#formMedica .aceite input { accent-color: var(--laranja); }

.ficha-rodape { text-align: center; margin-top: 8px; }
.erro-form { color: var(--perigo); font-weight: 700; min-height: 1.2em; margin: 0 0 10px; }

/* ---------- Sucesso ---------- */
.ok-box { max-width: 520px; margin: 60px auto; padding: 36px 24px; text-align: center; background: var(--papel); border-radius: 26px; box-shadow: var(--sombra); }
.ok-icone { width: 80px; height: 80px; border-radius: 50%; background: var(--verde-2); color: #fff; font-size: 44px; display: grid; place-items: center; margin: 0 auto; }
.ok-box h2 { color: var(--verde); font-size: 36px; margin: 14px 0 4px; }
.ok-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---------- Painel ---------- */
.painel { max-width: 1100px; margin: 24px auto 60px; padding: 0 16px; }
.painel-cab { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.painel-cab h2 { color: var(--verde); font-size: 36px; margin: 0; }
.resumo { margin: 0; font-weight: 700; color: var(--tinta-2); }
.filtros { background: var(--papel); border-radius: var(--raio); padding: 16px; margin: 16px 0; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.busca { position: relative; }
.busca svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tinta-2); }
.busca input { padding-left: 44px; font-size: 17px; }
.filtros-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.alerta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #fdecea; border: 1.5px solid #f2c1bb; color: #7d2117; border-radius: 14px;
  padding: 12px 16px; margin-bottom: 14px; font-weight: 700;
}
.barra-sel { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sel-todos { flex-direction: row; align-items: center; gap: 8px; color: var(--tinta); cursor: pointer; }
.sel-todos input, .item-sel { width: 20px; height: 20px; accent-color: var(--verde-2); }
.barra-sel-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  background: var(--papel); border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04); border-left: 6px solid var(--verde-2);
}
.item.medica { border-left-color: var(--laranja); }
.item.velho { background: #fff6f4; }
.item-nome { font-weight: 800; font-size: 17px; }
.item-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--tinta-2); font-size: 14px; font-weight: 600; margin-top: 2px; }
.tag { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: .4px; }
.tag-insc { background: var(--verde-claro); color: var(--verde); }
.tag-med { background: var(--laranja-claro); color: var(--laranja-2); }
.tag-19 { background: var(--perigo); color: #fff; }
.tag-alerta { background: #fff1c2; color: #7a5a00; }
.item-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .item { grid-template-columns: auto 1fr; }
  .item-acoes { grid-column: 1 / -1; justify-content: stretch; }
  .item-acoes .btn { flex: 1; }
}
mark { background: #ffe680; border-radius: 3px; padding: 0 1px; }
.vazio { text-align: center; color: var(--tinta-2); font-weight: 700; padding: 40px 0; }

/* ---------- Modais ---------- */
.dlg {
  border: 0; border-radius: 22px; padding: 24px; width: min(420px, calc(100vw - 32px));
  box-shadow: 0 30px 80px rgba(0,0,0,.3); background: var(--papel); color: var(--tinta);
}
.dlg::backdrop { background: rgba(20, 35, 18, .55); }
.dlg h3 { margin: 0 0 14px; color: var(--verde); font-size: 26px; }
.dlg form { display: grid; gap: 12px; }
.dlg-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.dlg-grande { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 40px); }

/* ---------- Visualização da ficha (tela e impressão) ---------- */
.doc { font-family: 'Nunito', Arial, sans-serif; color: #111; }
.doc-cab { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid #222; padding-bottom: 8px; margin-bottom: 10px; }
.doc-cab img { height: 64px; }
.doc-cab h1 { font-family: 'Lilita One', sans-serif; font-size: 24px; margin: 0; flex: 1; text-align: center; }
.doc-cab .doc-data { font-size: 11px; text-align: right; color: #444; }
.doc-sec { margin: 10px 0 0; break-inside: avoid; }
.doc-sec h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; background: #eee; padding: 3px 8px; border-radius: 4px; }
.doc-campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 18px; }
.doc-campo { font-size: 13px; padding: 3px 0; border-bottom: 1px dotted #bbb; display: flex; gap: 6px; }
.doc-campo.full { grid-column: 1 / -1; }
.doc-campo span { color: #555; white-space: nowrap; }
.doc-campo b { font-weight: 700; word-break: break-word; }
.doc-termo { font-size: 12px; text-align: justify; margin-top: 8px; }
.doc-ass { margin-top: 36px; display: flex; justify-content: space-between; gap: 30px; font-size: 13px; }
.doc-ass div { flex: 1; text-align: center; border-top: 1px solid #222; padding-top: 4px; }
.doc-rodape { margin-top: 18px; font-size: 11px; text-align: center; color: #444; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120px);
  background: var(--tinta); color: #fff; padding: 12px 20px; border-radius: 99px; font-weight: 700;
  transition: transform .25s; z-index: 50; max-width: calc(100vw - 32px);
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- Impressão ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; }
  body > *:not(#areaImpressao) { display: none !important; }
  #areaImpressao { display: block !important; }
  .pagina { break-after: page; }
  .pagina:last-child { break-after: auto; }
}

/* Celular: quadrados mais baixos para os dois caberem na tela */
@media (max-width: 640px) {
  .cartao { aspect-ratio: auto; min-height: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 4px; padding: 20px; }
  .cartao-icone { width: 60px; height: 60px; grid-row: span 3; align-self: center; }
  .cartao-icone svg { width: 34px; height: 34px; }
  .cartao-titulo { font-size: 28px; margin: 0; }
  .cartao-titulo br { display: none; }
  .cartao-titulo b { font-size: 1em; }
  .cartao-txt { font-size: 14px; }
  .topo-marca img { height: 46px; }
}
@media (max-width: 640px) {
  .filtros-linha { grid-template-columns: 1fr 1fr; }
  .filtros-linha select { font-size: 14px; padding: 9px 10px; }
  .painel-cab h2 { font-size: 30px; }
}

/* ---------- Anexos (fotos RG / convênio) ---------- */
.anexos { display: flex; flex-direction: column; gap: 10px; font-weight: 700; font-size: 14px; color: var(--tinta-2); }
.anexos small { font-weight: 600; color: var(--tinta-2); }
.anexos small.erro { color: var(--perigo); }
.btn-anexo {
  flex-direction: row; align-items: center; justify-content: center; gap: 8px; align-self: flex-start;
  border: 2px dashed var(--laranja); color: var(--laranja-2); background: var(--laranja-claro);
  border-radius: 14px; padding: 12px 18px; cursor: pointer; font-size: 15px;
}
.btn-anexo:hover { background: #fbdcc9; }
.btn-anexo input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.btn-anexo.hidden { display: none; }
.anexos-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.anexos-lista:empty { display: none; }
.anexo-mini { position: relative; width: 104px; height: 104px; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--borda); background: #fff; }
.anexo-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anexo-mini button {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}
.doc-anexos { display: grid; gap: 10px; margin-top: 6px; }
.doc-anexos img { max-width: 100%; max-height: 120mm; object-fit: contain; border: 1px solid #ccc; border-radius: 4px; break-inside: avoid; justify-self: start; }
.tag-anexo { background: #e8eefc; color: #2c4a9a; }

/* ---------- Fase 2: login, minhas fichas, edição ---------- */
.carregando { text-align: center; padding: 80px 16px; font-weight: 700; color: var(--tinta-2); }
.topo-usuario { color: #fff; opacity: .85; font-weight: 700; font-size: 14px; align-self: center; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-login { padding-bottom: clamp(56px, 9vw, 90px); }
.login-box {
  max-width: 420px; margin: -10px auto 60px; padding: 24px; position: relative;
  background: var(--papel); border-radius: 24px; box-shadow: var(--sombra);
}
.login-box form { display: grid; gap: 14px; justify-items: stretch; }
.login-box .btn-grande { max-width: none; }
.abas { display: grid; grid-template-columns: 1fr 1fr; background: var(--creme); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.aba { border: 0; background: transparent; border-radius: 999px; padding: 10px; font: 800 15px 'Nunito'; color: var(--tinta-2); cursor: pointer; }
.aba.ativa { background: var(--verde); color: #fff; }
.link { background: none; border: 0; color: var(--verde-2); font: 700 14px 'Nunito'; cursor: pointer; text-decoration: underline; justify-self: center; }
.login-dica { margin: 0; font-size: 13px; color: var(--tinta-2); text-align: center; }
.login-box .erro-form.ok { color: var(--verde-2); }

.minhas { max-width: 900px; margin: 0 auto 60px; padding: 0 16px; }
.minhas h2 { color: var(--verde); font-size: 26px; margin: 0 0 12px; }
.minhas .vazio { padding: 16px 0; text-align: left; }
.minhas .item { grid-template-columns: 1fr auto; }

.ficha-modo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ficha-modo:has(.modo-txt:empty):has([data-antigos].hidden) { display: none; }
.modo-txt { margin: 0; font-weight: 700; color: var(--tinta-2); }
.modo-txt:empty { display: none; }
.modo-txt.editando { background: #fff1c2; color: #6b4e00; padding: 6px 12px; border-radius: 10px; }

.dlg-txt { margin: 0 0 14px; color: var(--tinta-2); }
.antigos-lista { display: grid; gap: 8px; }
.antigo {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  background: #fff; border: 1.5px solid var(--borda); border-radius: 14px; padding: 12px 14px;
  font: 700 15px 'Nunito'; color: var(--tinta); cursor: pointer; text-align: left;
}
.antigo:hover { border-color: var(--verde-2); background: var(--verde-claro); }
.antigo small { color: var(--tinta-2); font-weight: 600; }
.tag-recebido { background: var(--verde-2); color: #fff; }
.tag-pendente { background: #eee; color: var(--tinta-2); }
.btn-receber { background: #fff; color: var(--verde-2); border: 1.5px solid var(--verde-2); }
.btn-recebido { background: var(--verde-2); color: #fff; border: 1.5px solid var(--verde-2); }
.item.recebido { border-left-color: #8a8f86; }
.item.velho { background: #fff6f4; }
.tag-19 { background: var(--perigo); color: #fff; }
.antigo:disabled { opacity: .55; cursor: not-allowed; background: #f3f3f3; }
.config-whats { background: var(--papel); border-radius: var(--raio); margin: 16px 0 0; box-shadow: 0 2px 10px rgba(0,0,0,.04); border-left: 6px solid #25a35a; }
.config-whats summary { cursor: pointer; padding: 14px 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; color: #1d7a45; list-style: none; }
.config-whats summary::-webkit-details-marker { display: none; }
.config-whats summary::after { content: "▾"; margin-left: auto; color: var(--tinta-2); }
.config-whats[open] summary::after { content: "▴"; }
.whats-form { padding: 0 16px 16px; }
.whats-ajuda { margin: 0 0 14px; font-size: 14px; color: var(--tinta-2); }
.whats-ajuda code { background: var(--creme); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
.whats-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.whats-form .erro-form.ok { color: var(--verde-2); }
.tag-ligado { background: #25a35a; color: #fff; }

/* ---------- Celular: ficha aberta em "Ver" e painel do monitor ---------- */
.doc-campo b { min-width: 0; overflow-wrap: anywhere; }
.doc img { max-width: 100%; }
@media screen and (max-width: 640px) {
  .dlg { padding: 16px; width: calc(100vw - 16px); max-width: none; }
  .dlg-grande { max-height: calc(100dvh - 16px); }
  .dlg-acoes { position: sticky; bottom: -16px; background: var(--papel); margin: 10px -16px -16px; padding: 10px 16px; border-top: 1px solid var(--borda); }
  .dlg-acoes .btn { flex: 1; }
  .doc-cab { flex-wrap: wrap; gap: 8px; }
  .doc-cab img { height: 44px; }
  .doc-cab h1 { font-size: 20px; text-align: left; }
  .doc-cab .doc-data { width: 100%; text-align: left; }
  .doc-cab .doc-data br { display: none; }
  .doc-campos { grid-template-columns: 1fr; }
  .doc-campo { flex-direction: column; gap: 0; padding: 6px 0; font-size: 14px; }
  .doc-campo span { white-space: normal; font-size: 12px; }
  .doc-termo { text-align: left; font-size: 13px; }
  .doc-ass { flex-direction: column; gap: 28px; }
  .doc-anexos img { max-height: none; }

  .item-meta { font-size: 13px; }
  .item-acoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .item-acoes .btn { padding: 8px 4px; }
  .minhas .item { grid-template-columns: 1fr; }
  .minhas .item-acoes { grid-template-columns: 1fr 1fr; }
  .topo-usuario { max-width: 34vw; font-size: 12px; }
}
.btn-whats { background: #25a35a; color: #fff; margin: 14px auto 0; display: flex; max-width: 380px; }
.btn-whats:hover { background: #1d8a4b; }

/* ---------- Assinatura digital ---------- */
.assinatura { margin-top: 16px; }
.ass-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; font-size: 14px; color: var(--tinta-2); }
.ass-area {
  position: relative; height: 180px; background: #fff; border: 2px dashed var(--borda); border-radius: 14px; overflow: hidden;
}
.ass-area::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 38px; border-bottom: 1.5px solid #c9c2ad; pointer-events: none; }
.assinatura.invalido .ass-area { border-color: var(--perigo); }
.ass-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }
.ass-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ass-dica { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 13px; color: #a39d8c; pointer-events: none; }
.assinatura.assinado .ass-dica { display: none; }
.ass-info { display: block; margin-top: 4px; font-weight: 600; color: var(--tinta-2); }
.ass-info:empty { display: none; }
.doc-assinatura { display: block; max-width: 220px; max-height: 70px; margin: 0 auto -6px; object-fit: contain; }
.doc-ass-data { display: block; font-size: 10px; color: #555; }

/* ---------- BAIXAR APP ---------- */
.btn-app { display: flex; margin: 24px auto 0; letter-spacing: 1px; font-weight: 800; }
.passos { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 8px; color: var(--tinta); }

/* ---------- Avisos (substitui a faixa preta) ---------- */
.toast {
  background: var(--papel); color: var(--tinta); border: 2px solid var(--verde-2);
  box-shadow: 0 10px 30px rgba(31, 74, 29, .18); border-radius: 14px;
  padding: 12px 18px; font-weight: 700; text-align: center;
  bottom: calc(16px + env(safe-area-inset-bottom));
  visibility: hidden; opacity: 0; transform: translate(-50%, 20px);
  transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.toast.show { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity .2s, transform .2s; }
.toast:empty { display: none; }

/* ---------- Sem datas de embarque: pais não fazem ficha nova ---------- */
.aviso-bloqueio { max-width: 868px; margin: 16px auto 0; background: #fdeaea; color: #8a1f1f; text-align: center; }
@media (max-width: 900px) { .aviso-bloqueio { margin: 16px 16px 0; } }
.cartoes.bloqueado .cartao { opacity: .45; pointer-events: none; filter: grayscale(.6); }

/* ---------- Assinatura gov.br ---------- */
.aviso-gov { background: #e8eefc; color: #1c3a7a; }
.gov-passos { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 16px; }
.gov-passos li { display: grid; gap: 8px; justify-items: start; }
.gov-passos span { color: var(--tinta-2); font-size: 14px; }
.btn-gov { background: #1351b4; color: #fff; }
.btn-gov:hover { background: #0c3c8a; }
.btn-arquivo { position: relative; cursor: pointer; }
.btn-arquivo input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tag-gov { background: #1351b4; color: #fff; }
.tag-semgov { background: #fde2e1; color: #9b2c22; }
.btn-gov-mini { background: #1351b4; color: #fff; }
.doc-gov { font-size: 12px; text-align: center; margin-top: 10px; color: #1c3a7a; }

/* ---------- Painel: cartões de resumo e ferramentas ---------- */
.cards-resumo { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 0; }
.card-resumo {
  text-align: left; border: 2px solid transparent; background: var(--papel); border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04); cursor: pointer; font: inherit; color: var(--tinta);
  display: grid; gap: 2px; transition: border-color .15s, transform .1s;
}
.card-resumo:hover { border-color: var(--borda); }
.card-resumo:active { transform: scale(.98); }
.card-resumo.ativo { border-color: var(--verde-2); background: var(--verde-claro); }
.card-resumo.info { cursor: default; }
.card-resumo .num { font-family: 'Lilita One', sans-serif; font-size: 30px; line-height: 1; }
.card-resumo .rot { font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.card-resumo.c-alerta .num { color: var(--laranja-2); }
.card-resumo.perigo .num { color: var(--perigo); }
.card-resumo.ok .num { color: var(--verde-2); }
.card-resumo:disabled { opacity: .55; cursor: default; }
.ferramentas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 640px) {
  .cards-resumo { grid-template-columns: 1fr 1fr; }
  .ferramentas .btn { flex: 1 1 100%; }
}
/* listas impressas */
.lista-print h1 { font-family: 'Lilita One', sans-serif; font-size: 22px; margin: 0; }
.lista-print .sub { font-size: 11px; color: #444; margin: 2px 0 10px; }
.lista-print h2 { font-size: 15px; margin: 14px 0 4px; background: #eee; padding: 4px 8px; border-radius: 4px; break-after: avoid; }
.lista-print table { width: 100%; border-collapse: collapse; font-size: 11px; }
.lista-print th, .lista-print td { border: 1px solid #bbb; padding: 4px 5px; text-align: left; vertical-align: top; }
.lista-print th { background: #f3f3f3; }
.lista-print tr { break-inside: avoid; }
.lista-print .chk { width: 22px; text-align: center; font-size: 14px; }
.lista-print .cuidado { color: #9b2c22; font-weight: 700; }
@media (max-width: 640px) {
  .card-resumo { padding: 8px 12px; }
  .card-resumo .num { font-size: 24px; }
  .card-resumo .rot { font-size: 12px; }
  .ferramentas .btn { flex: 1 1 calc(50% - 8px); padding: 9px 10px; font-size: 14px; }
}
.cards-resumo { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .cards-resumo { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
.lista-print td.sn { width: 70px; white-space: nowrap; text-align: center; }

/* Listas impressas: tabela sempre dentro da folha */
.lista-print { width: 100%; max-width: 100%; overflow: hidden; }
.lista-print table { table-layout: fixed; width: 100%; max-width: 100%; }
.lista-print th, .lista-print td { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.lista-print th.chk, .lista-print td.chk { width: 24px; }
.lista-print td.sn { width: auto; white-space: normal; }
@media print {
  html, body { width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  #areaImpressao { width: 100% !important; margin: 0 !important; padding: 0 !important; }
}