@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  src: url('../fonts/bricolage-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  src: url('../fonts/bricolage-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/atkinson-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/atkinson-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== Tokens ===== */
:root {
  --bg: #f5f6fb; --c1: #ffffff; --c2: #eceef7; --tinta: #15172e; --tinta2: #585d7a; --linha: #dadceb;
  --primaria: #3a4bdb; --primaria-tinta: #ffffff; --primaria-fundo: #e1e5ff; --primaria-fundo-tinta: #1b2479;
  --marcador: #d7f46a; --marcador-op: 1;
  --foco: #3a4bdb;
  --bom: #0ca30c; --aviso: #fab219; --serio: #ec835a; --critico: #d03b3b;
  --bom-fundo: #dcf3dc; --aviso-fundo: #fff1cf; --serio-fundo: #fde6dc; --critico-fundo: #fbe3e3;
  --papel: #ffffff; --papel-tinta: #15172e; --papel-tinta2: #585d7a; --papel-linha: #c9cce0;
  --elev: 0 12px 28px -10px rgba(40, 52, 160, .35), 0 2px 6px rgba(40, 52, 160, .08);
  --sombra-papel: rgba(40, 52, 160, .22);
  --r-destaque: 28px; --r-cartao: 20px; --r-linha: 14px;
  --nav-alt: 72px;
  --f-titulo: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --f-texto: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light dark;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --mola: linear(0, .2 4%, .64 9%, .97 15%, 1.08 20%, 1.09 24%, 1.04 31%, 1.005 39%, .995 48%, 1); }
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1022; --c1: #191b33; --c2: #22253f; --tinta: #ecedf7; --tinta2: #a9adc8; --linha: #2e3150;
    --primaria: #9aa6ff; --primaria-tinta: #10124a; --primaria-fundo: #2a3170; --primaria-fundo-tinta: #dde1ff;
    --marcador: #c3e25a; --marcador-op: .28;
    --foco: #b9c1ff;
    --bom-fundo: #17331f; --aviso-fundo: #3a2f14; --serio-fundo: #3c2419; --critico-fundo: #3d1b22;
    --papel: #eef0f8; --papel-linha: #b4b8d0;
    --elev: 0 12px 28px -10px rgba(0, 0, 12, .8), 0 0 0 1px rgba(154, 166, 255, .08);
    --sombra-papel: rgba(0, 0, 10, .6);
  }
}
/* A câmara é sempre escura, mesmo no modo claro. */
body[data-ecra="fotografar"] {
  --bg: #0f1022; --c1: #191b33; --c2: #22253f; --tinta: #ecedf7; --tinta2: #a9adc8; --linha: #2e3150;
  --primaria: #9aa6ff; --primaria-tinta: #10124a; --primaria-fundo: #2a3170; --primaria-fundo-tinta: #dde1ff;
  --marcador: #c3e25a; --marcador-op: .28; --foco: #b9c1ff;
  --bom-fundo: #17331f; --aviso-fundo: #3a2f14; --serio-fundo: #3c2419; --critico-fundo: #3d1b22;
  --papel: #eef0f8; --papel-linha: #b4b8d0;
  --elev: 0 12px 28px -10px rgba(0, 0, 12, .8), 0 0 0 1px rgba(154, 166, 255, .08);
  --sombra-papel: rgba(0, 0, 10, .6);
  color-scheme: dark;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tinta);
  font: 17px/1.45 var(--f-texto);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--f-titulo); margin: 0; text-wrap: balance; }
h1 { font-size: 34px; line-height: 1.05; font-weight: 700; font-stretch: 88%; letter-spacing: -.015em; margin: 4px 0 16px; }
h2 { font-size: 20px; line-height: 1.2; font-weight: 650; font-stretch: 92%; letter-spacing: -.005em; margin: 28px 0 12px; }
h3 { font-size: 17px; line-height: 1.3; font-weight: 650; margin: 12px 0 4px; }
.cartao h2, .hero h2 { margin-top: 0; }
p { margin: 3px 0; }
a { color: var(--primaria); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 8px; }
main:focus { outline: none; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--c1); padding: 12px 20px; z-index: 100; border-radius: 0 0 14px 0; }
.saltar:focus { left: 0; top: 0; }
.suave { color: var(--tinta2); }
.pequeno { font-size: 15px; }
.micro { font-size: 13px; }
.forte { font-weight: 700; }
.mau { color: var(--tinta); background: var(--critico-fundo); border-left: 4px solid var(--critico); padding: 8px 12px; border-radius: 4px 12px 12px 4px; }
.num { font-variant-numeric: tabular-nums; }
.grande.xl { font-size: 48px; }
.grande { font-family: var(--f-titulo); font-size: 34px; font-weight: 800; font-stretch: 75%; line-height: 1.05; letter-spacing: -.01em; margin: 2px 0; }
.texto-livre { white-space: pre-line; overflow-wrap: anywhere; }
.carregando { color: var(--tinta2); padding: 24px 0; }

/* O traço de marcador: a assinatura. Só por trás de números e datas que importam. */
.marca { position: relative; display: inline-block; isolation: isolate; padding: 0 .08em; }
.marca::before, .marca::after { content: ""; position: absolute; z-index: -1; background: var(--marcador); opacity: var(--marcador-op); }
.marca::before { left: -.14em; right: -.2em; top: 38%; bottom: 2%; border-radius: .55em .14em .5em .2em / .4em .18em .32em .22em; transform: rotate(-1.8deg) skewX(-8deg); }
.marca::after { left: .05em; right: -.3em; top: 52%; bottom: -.08em; border-radius: .2em .5em .15em .45em / .2em .3em .25em .4em; transform: rotate(.9deg); opacity: calc(var(--marcador-op) * .8); }

/* ===== Topo ===== */
.topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px;
  padding: env(safe-area-inset-top) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  min-height: calc(64px + env(safe-area-inset-top)); background: var(--bg);
}
.marca-app { display: flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; color: var(--tinta); font-family: var(--f-titulo); font-weight: 750; font-stretch: 85%; font-size: 20px; letter-spacing: -.01em; margin-right: auto; }
.marca-app img { border-radius: 9px; }
.quem { position: relative; }
.quem-botao { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; background: var(--primaria-fundo); color: var(--primaria-fundo-tinta); border: 0; border-radius: 50%; font: 750 20px/1 var(--f-titulo); cursor: pointer; transition: border-radius .4s var(--mola), transform .3s var(--mola); }
.quem-botao:active { border-radius: 16px; transform: scale(.94); }
.menu-painel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 15rem; padding: 18px; background: var(--c1); border-radius: var(--r-cartao); box-shadow: var(--elev); z-index: 30; }
.menu-painel .botao { margin-top: 12px; width: 100%; }
.btn-icone { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: var(--tinta); background: var(--c2); border: 0; text-decoration: none; flex: none; cursor: pointer; transition: border-radius .4s var(--mola), transform .3s var(--mola), background .2s; }
.btn-icone:active { border-radius: 16px; transform: scale(.94); }
.btn-icone[aria-current="page"] { background: var(--primaria-fundo); color: var(--primaria-fundo-tinta); }

.avisos-topo { padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)); }
.avisos-topo .faixa { display: flex; gap: 10px; align-items: center; padding: 12px 16px; margin-bottom: 8px; background: var(--primaria-fundo); color: var(--primaria-fundo-tinta); font-size: 15px; text-decoration: none; border-radius: var(--r-linha); }
.faixa-fila { font-weight: 700; min-height: 48px; }
.faixa-ok { background: var(--bom-fundo); color: var(--tinta); }

main { max-width: 40rem; margin: 0 auto; padding: 8px calc(16px + env(safe-area-inset-right)) calc(var(--nav-alt) + 48px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
.cabeca-ecra { display: flex; align-items: center; justify-content: space-between; }
.data-hoje { margin-top: -10px; }

/* ===== Navegação flutuante ===== */
.separadores {
  position: fixed; left: 0; right: 0; margin-inline: auto; width: min(calc(100% - 24px), 30rem);
  bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 25; height: var(--nav-alt);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 0 6px 8px;
  background: var(--c1); border-radius: 36px; box-shadow: var(--elev);
}
.sep { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; padding-bottom: 0; color: var(--tinta2); text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1.1; }
.sep-icone { display: grid; place-items: center; width: 56px; height: 32px; border-radius: 16px; transition: background .25s, color .25s, transform .3s var(--mola); }
.sep:active .sep-icone { transform: scale(.92); }
.sep[aria-current="page"] { color: var(--tinta); font-weight: 750; }
.sep[aria-current="page"] .sep-icone { background: var(--primaria-fundo); color: var(--primaria-fundo-tinta); }
.sep-camara { color: var(--tinta); }
.sep-camara .sep-icone { width: 64px; height: 64px; margin-top: -28px; border-radius: 24px; background: var(--primaria); color: var(--primaria-tinta); box-shadow: 0 10px 20px -8px var(--primaria);
  transition: border-radius .55s var(--mola), transform .55s var(--mola), box-shadow .3s; }
.sep-camara:active .sep-icone { border-radius: 50%; transform: scale(.9) rotate(-6deg); }
.sep-camara[aria-current="page"] .sep-icone { border-radius: 50%; background: var(--primaria); color: var(--primaria-tinta); }
@media (min-width: 720px) { :root { --nav-alt: 76px; } }

/* ===== Cartões e listas ===== */
.cartao { display: block; background: var(--c1); border-radius: var(--r-cartao); padding: 18px 20px; margin: 0 0 12px; color: var(--tinta); text-decoration: none; }
a.cartao { transition: background .2s; }
a.cartao:active, .linha-link:active { background: var(--c2); }
.cartao.vazio { text-align: center; padding: 28px 24px; display: grid; justify-items: center; gap: 6px; }
.cartao.vazio .botao { margin-top: 10px; }
.vazio-icone { display: grid; place-items: center; width: 64px; height: 56px; margin-bottom: 4px; border-radius: 28px 20px 26px 18px; background: var(--primaria-fundo); color: var(--primaria-fundo-tinta); }
.cartao.destaque { display: flex; gap: 12px; align-items: center; background: var(--primaria-fundo); color: var(--primaria-fundo-tinta); }
.cartao.realce { box-shadow: 0 0 0 3px var(--primaria); }
.cartao.entrada { display: flex; gap: 14px; }
.cartao.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.erro-cartao { display: flex; gap: 14px; background: var(--critico-fundo); }
ul { list-style: none; margin: 0; padding: 0; }
.lista-cartoes > li { margin: 0; }
.lista-simples > li { padding: 10px 0; border-top: 1px solid var(--linha); }
.lista-simples > li:first-child { border-top: 0; padding-top: 0; }
.lista-simples > li:last-child { padding-bottom: 0; }
.com-icone { display: flex; gap: 10px; align-items: flex-start; }
.com-icone > .ic { flex: none; margin-top: 2px; }
.linha-spread { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

/* Listas como linhas contínuas dentro de um contentor */
.painel, .lista-links { background: var(--c1); border-radius: var(--r-cartao); overflow: hidden; margin-bottom: 12px; padding: 0 0; }
.painel > li + li, .lista-links > li + li { border-top: 1px solid var(--linha); }
.linha-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 16px; color: var(--tinta); text-decoration: none; transition: background .2s; }
.linha-link > :first-child { flex: 1; min-width: 0; }
.linha-link .ic, .painel .seta { color: var(--tinta2); flex: none; }
.linha-bloco { padding: 14px 16px; }
.painel .estado-curto { padding: 0; }
.taloes { margin-top: 8px; }
.sec-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 28px 0 12px; }
.sec-cab h2 { margin: 0; }

/* Destaque do Início */
.saudacao { margin: 8px 0 20px; }
.saudacao h1 { font-size: 34px; margin: 0 0 4px; }
.hero { display: block; background: var(--primaria-fundo); color: var(--primaria-fundo-tinta); border-radius: var(--r-destaque); padding: 22px 24px 22px; margin-bottom: 14px; text-decoration: none; transition: transform .3s var(--mola); }
a.hero:active { transform: scale(.985); }
.hero .rotulo { font-size: 17px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hero .rotulo .ic { opacity: .8; }
.hero .valor { font-family: var(--f-titulo); font-size: 56px; font-weight: 800; font-stretch: 75%; line-height: 1.1; letter-spacing: -.02em; margin: 10px 0 6px; }
.hero .valor .marca { padding: 0 .1em; }
.hero p { margin: 4px 0; }
.hero .orc { margin-top: 14px; }
.hero .barra { background: rgba(255, 255, 255, .55); }
.hero .etiqueta { color: var(--primaria-fundo-tinta); }
@media (prefers-color-scheme: dark) { .hero .barra { background: rgba(0, 0, 12, .35); } }
.hero .botao { margin-top: 12px; background: var(--primaria); color: var(--primaria-tinta); }

.chips-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.chip-resumo { display: inline-flex; align-items: baseline; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 24px; background: var(--c2); color: var(--tinta); text-decoration: none; font-size: 15px; align-items: center; transition: transform .3s var(--mola), background .2s; }
.chip-resumo b { font-family: var(--f-titulo); font-size: 22px; font-weight: 800; font-stretch: 75%; color: var(--primaria); }
.chip-resumo:active { transform: scale(.94); background: var(--primaria-fundo); }

/* Carimbo de data */
.carimbo { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; min-height: 62px; padding: 4px 0 5px; border: 2px solid var(--primaria); border-radius: 12px; background: var(--primaria-fundo); color: var(--primaria-fundo-tinta); transform: rotate(-3deg); line-height: 1; }
.carimbo b { font-family: var(--f-titulo); font-size: 28px; font-weight: 800; font-stretch: 75%; letter-spacing: -.01em; }
.carimbo span { font-size: 13px; font-weight: 700; margin-top: 3px; }
.carimbo-critico { border-color: var(--critico); background: var(--critico-fundo); color: var(--tinta); }
.carimbo-aviso { border-color: var(--aviso); background: var(--aviso-fundo); color: var(--tinta); }
.carimbo-serio { border-color: var(--serio); background: var(--serio-fundo); color: var(--tinta); }
.carimbo-bom { border-color: var(--bom); background: var(--bom-fundo); color: var(--tinta); }
.carimbo-neutro { border-color: var(--tinta2); background: var(--c2); color: var(--tinta); }
.linha-link > .carimbo { flex: none; }
.linha-carimbo { display: flex; gap: 16px; align-items: center; }
.linha-carimbo > .corpo { flex: 1; min-width: 0; }
.corpo p { margin: 2px 0; }
.titulo-linha { font-weight: 700; }

/* ===== Estados: selo + texto ===== */
.aviso { border-left: 0; }
.etiqueta { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.selo { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; color: #15172e; }
.selo-bom { background: var(--bom); } .selo-aviso { background: var(--aviso); } .selo-serio { background: var(--serio); }
.selo-critico { background: var(--critico); color: #fff; } .selo-info { background: var(--primaria); color: var(--primaria-tinta); }
.erro-cartao .selo, .entrada .selo { width: 40px; height: 40px; }
.selo .ic { color: inherit; } /* os ícones dos selos seguem sempre a cor do selo, mesmo dentro de linhas com ícones suaves */

/* Barras */
.orc { margin: 6px 0 2px; }
.barra { height: 10px; background: var(--c2); border-radius: 5px; overflow: hidden; margin-bottom: 8px; }
.barra > span { display: block; height: 100%; border-radius: 5px; transition: width .6s var(--mola); }
.barra-bom { background: var(--bom); } .barra-aviso { background: var(--aviso); } .barra-critico { background: var(--critico); }
.barra-fina { height: 6px; margin: 8px 0 6px; }

/* ===== Botões e formulários ===== */
.botao, button.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 24px; border: 0; background: var(--primaria-fundo); color: var(--primaria-fundo-tinta); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .3s var(--mola), border-radius .4s var(--mola), background .2s; }
.botao:active { transform: scale(.95); }
.botao.primario { background: var(--primaria); color: var(--primaria-tinta); }
.botao:disabled { opacity: .55; cursor: default; }
.botao-texto { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; background: none; border: 0; border-radius: 24px; color: var(--primaria); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.botao-texto:active { background: var(--primaria-fundo); }
.botao.grande-btn { width: 100%; min-height: 56px; font-size: 17px; }
input[type=text], input[type=search], input[type=date], select, textarea {
  width: 100%; min-height: 52px; padding: 10px 16px; font: inherit; font-size: 17px; color: var(--tinta);
  background: var(--c2); border: 2px solid transparent; border-radius: var(--r-linha);
}
input::placeholder, textarea::placeholder { color: var(--tinta2); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; border-color: var(--primaria); }
textarea { resize: vertical; }
label { display: block; margin: 14px 0 6px; font-weight: 700; font-size: 15px; }
form .botao { margin-top: 16px; }
.campo-linha { margin: 0; display: block; }
.campo-linha select { min-height: 48px; width: auto; border-radius: 24px; padding: 0 16px; font-size: 15px; font-weight: 600; }
.pesquisa-campo { position: relative; margin-bottom: 14px; }
.pesquisa-campo .ic { position: absolute; left: 16px; top: 16px; color: var(--tinta2); }
.pesquisa-campo input { padding-left: 46px; border-radius: 26px; }
.estado-curto { min-height: 20px; font-size: 15px; color: var(--tinta2); margin: 4px 0 0; }
.estado-curto.mau { color: var(--tinta); }
.interruptor { display: flex; gap: 12px; align-items: center; min-height: 48px; font-weight: 500; font-size: 15px; margin: 0 0 8px; }
.interruptor input { width: 24px; height: 24px; accent-color: var(--primaria); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip { min-height: 48px; padding: 0 18px; border-radius: 24px; border: 0; background: var(--c2); color: var(--tinta); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .3s var(--mola), background .2s; }
.chip:active { transform: scale(.94); }
.chip[aria-pressed="true"] { background: var(--primaria); color: var(--primaria-tinta); font-weight: 700; }
.chips-rolar { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 4px 16px; scrollbar-width: none; }
.chips-rolar .chip { flex: none; }

/* Filtros e segmentados */
.filtros-fixos { margin-bottom: 14px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.segmentado { display: inline-flex; padding: 4px; border-radius: 28px; background: var(--c2); flex: none; max-width: 100%; }
.segmentado button { min-height: 48px; padding: 0 18px; border: 0; border-radius: 24px; background: none; color: var(--tinta); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s, transform .3s var(--mola); }
.segmentado button:active { transform: scale(.95); }
.segmentado button[aria-pressed="true"] { background: var(--primaria); color: var(--primaria-tinta); font-weight: 700; }

/* Separadores de Papéis */
.separadores-topo { display: flex; padding: 4px; margin-bottom: 18px; border-radius: 28px; background: var(--c2); }
.separadores-topo a { flex: 1; display: grid; place-items: center; min-height: 48px; border-radius: 24px; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 15px; transition: background .25s, color .25s, transform .3s var(--mola); }
.separadores-topo a:active { transform: scale(.96); }
.separadores-topo a[aria-selected="true"] { background: var(--primaria); color: var(--primaria-tinta); font-weight: 700; }

/* ===== Gráficos ===== */
.cartao.grafico { padding: 20px 20px 16px; margin-bottom: 14px; }
.grafico-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.grafico-cab h2 { margin: 0; font-size: 20px; }
.grafico-area { position: relative; width: 100%; margin-top: 8px; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 12px; font-size: 13px; color: var(--tinta2); }
.legenda li { display: flex; align-items: center; gap: 6px; }
.amostra { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.tabela-rolar { overflow-x: auto; }
.tabela { border-collapse: collapse; width: 100%; font-size: 15px; }
.tabela th, .tabela td { padding: 10px 10px; border-bottom: 1px solid var(--linha); text-align: left; white-space: nowrap; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela thead th { color: var(--tinta2); font-weight: 600; }
.tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }

/* ===== Linhas expansíveis (garantias, faturas) ===== */
.painel details > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; cursor: pointer; list-style: none; }
.painel details > summary::-webkit-details-marker { display: none; }
.painel details > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2.5px solid var(--tinta2); border-bottom: 2.5px solid var(--tinta2); transform: rotate(45deg); margin: -3px 4px 0 0; transition: transform .3s var(--mola); }
.painel details[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.painel details > summary > :first-child { flex: 1; min-width: 0; }
.painel details > summary:active { background: var(--c2); }
.painel details > .extra { padding: 0 16px 16px; }
.painel li.realce { box-shadow: inset 0 0 0 3px var(--primaria); }
.detalhes { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 4px 0 8px; font-size: 15px; }
.detalhes dt { color: var(--tinta2); } .detalhes dd { margin: 0; }
.explicacao { margin: 12px 0; padding: 14px 16px; background: var(--primaria-fundo); color: var(--primaria-fundo-tinta); border-radius: var(--r-linha); }
.explicacao .etiqueta { color: var(--primaria-fundo-tinta); }
.original { margin: 12px 0; }
.original img { max-width: 100%; border-radius: var(--r-linha); display: block; }
.voltar { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding-right: 12px; text-decoration: none; font-weight: 700; }
.rascunho { margin-top: 16px; padding: 14px 16px; background: var(--c2); border-radius: var(--r-linha); }

/* Garantias: tempo que falta */
.tempo { margin-top: 8px; }
.tempo-texto { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--tinta2); }

/* ===== Talão (papel com bordo serrilhado) ===== */
.talao-sombra { filter: drop-shadow(0 10px 14px var(--sombra-papel)); }
.talao-papel {
  background: var(--papel); color: var(--papel-tinta); padding: 26px 24px 34px;
  --dente: 16px;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--dente) + 1px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--dente) var(--dente) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--dente) + 1px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--dente) var(--dente) repeat-x;
  border-radius: 6px 6px 0 0;
}
.talao-papel { --marcador: #d7f46a; --marcador-op: 1; }
.talao-papel .suave { color: var(--papel-tinta2); }
.avisos-talao { margin: 0 0 12px; display: grid; gap: 8px; }
.avisos-talao .aviso-linha { margin: 0; }
.talao-papel a { color: #2a37b0; }
.talao-papel .etiqueta { color: var(--papel-tinta); }
.talao-papel .botao { background: var(--primaria); color: var(--primaria-tinta); }
body[data-ecra] .talao-papel .botao, .talao-papel .botao.primario { background: #3a4bdb; color: #fff; }
.talao-papel .lista-simples > li { border-top: 1px dashed var(--papel-linha); }
.talao-papel .lista-simples > li:first-child { border-top: 0; }
.talao-doc { max-width: 24rem; margin: 8px auto 24px; }
.talao-cab { text-align: center; padding-bottom: 14px; border-bottom: 2px dashed var(--papel-linha); margin-bottom: 14px; }
.talao-cab h1 { font-size: 34px; margin: 4px 0 6px; overflow-wrap: anywhere; }
.talao-cab p { margin: 2px 0; }
.linhas-talao > li { padding: 10px 0; }
.linhas-talao .produto { font-weight: 700; overflow-wrap: anywhere; }
.talao-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; margin-top: 6px; border-top: 2px dashed var(--papel-linha); }
.talao-total span:first-child { font-family: var(--f-titulo); font-size: 20px; font-weight: 700; }
.talao-total .grande { margin: 0; font-size: 48px; }
.talao-papel .aviso-linha { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--aviso-fundo); color: var(--tinta); font-size: 15px; }
body .talao-papel .aviso-linha { color: #15172e; background: #fff1cf; }
.cat-select { appearance: none; -webkit-appearance: none; width: auto; max-width: 100%; min-height: 48px; margin-top: 2px; padding: 0 36px 0 6px; border: 6px solid transparent; background: var(--primaria-fundo) padding-box; border-radius: 30px; color: var(--primaria-fundo-tinta); font-size: 15px; font-weight: 700;
  background-image: none; position: relative; }
.cat-select:focus-visible { outline: 3px solid var(--foco); outline-offset: -2px; border-color: transparent; }
.cat-caixa { position: relative; display: inline-block; max-width: 100%; }
.cat-caixa::after { content: ""; position: absolute; right: 18px; top: calc(50% - 5px); width: 8px; height: 8px; border-right: 2.5px solid #1b2479; border-bottom: 2.5px solid #1b2479; transform: rotate(45deg); pointer-events: none; }
.talao-papel .cat-select { background: #e1e5ff; color: #1b2479; }
.talao-papel .estado-curto { color: var(--papel-tinta2); min-height: 0; margin: 0; }
.talao-papel .estado-curto:empty { display: none; }

/* ===== Fotografar (sempre escuro) ===== */
.camara-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.camara-cab h1 { font-size: 26px; margin: 0 0 12px; }
.visor { position: relative; display: grid; place-items: center; align-content: center; gap: 10px; min-height: 280px; padding: 32px; margin-bottom: 16px; border-radius: var(--r-destaque); background: var(--c1); text-align: center; }
.visor p { margin: 0; max-width: 18rem; }
.visor .visor-icone { color: var(--primaria); }
.canto { position: absolute; width: 34px; height: 34px; border: 0 solid var(--tinta); opacity: .9; }
.canto-a { top: 18px; left: 18px; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 14px; }
.canto-b { top: 18px; right: 18px; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 14px; }
.canto-c { bottom: 18px; left: 18px; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 14px; }
.canto-d { bottom: 18px; right: 18px; border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 14px; }
.fila-miniaturas { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; margin: 0 0 4px; scrollbar-width: none; }
.miniatura { position: relative; flex: none; }
.miniatura .mini { width: 72px; height: 88px; border-radius: 14px; object-fit: cover; background: var(--c2); display: grid; place-items: center; }
.miniatura .tirar { position: absolute; top: -8px; right: -8px; width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--tinta); }
.miniatura .tirar i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tinta); color: var(--bg); }
.miniatura .num-pag { position: absolute; left: 6px; bottom: 6px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; background: var(--bg); color: var(--tinta); font-size: 13px; font-weight: 700; }
.comandos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 8px 0 20px; }
.comando-lado { justify-self: start; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: var(--tinta); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-width: 64px; padding: 0; }
.comando-lado .ic-caixa { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 20px; background: var(--c2); transition: border-radius .4s var(--mola), transform .3s var(--mola); }
.comando-lado:active .ic-caixa { border-radius: 50%; transform: scale(.92); }
.disparador { position: relative; width: 96px; height: 96px; padding: 0; border: 4px solid var(--tinta); border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.disparador .miolo { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--primaria); color: var(--primaria-tinta); transition: transform .45s var(--mola), border-radius .45s var(--mola); }
.disparador:active .miolo { transform: scale(.82); border-radius: 30px; }
.cartao-envio { background: var(--c1); border-radius: var(--r-cartao); padding: 18px 20px 20px; margin-bottom: 16px; }
.cartao-envio label { margin-top: 0; }
.cartao-envio .botao { margin-top: 14px; }
.mini.pdf svg { color: var(--tinta2); }
.qr { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 2px 0; }
.qr-mau { color: var(--tinta2); }
.nome-ficheiro { overflow-wrap: anywhere; }

/* A impressora de talões: o único momento orquestrado */
.impressora { margin: 4px 0 16px; }
.ranhura { position: relative; z-index: 2; height: 14px; border-radius: 7px; background: var(--c2); box-shadow: inset 0 3px 4px rgba(0, 0, 12, .55), 0 0 0 1px var(--linha); }
.talao-saida { position: relative; z-index: 1; overflow: hidden; padding: 0 10px 18px; margin: 0 8px; }
.talao-saida .talao-papel { margin-top: -2px; }
.talao-saida.sai .talao-sombra { animation: imprimir 1.3s cubic-bezier(.25, .8, .3, 1) both; }
@keyframes imprimir { from { transform: translateY(-101%); } to { transform: translateY(0); } }
.resultado { display: grid; gap: 8px; justify-items: start; }
.resultado .botao { margin-top: 6px; }
.nome-talao { font-family: var(--f-titulo); font-weight: 700; font-size: 20px; overflow-wrap: anywhere; margin: 0 0 6px; }
.estado-envio { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r-linha); background: var(--c1); margin-bottom: 8px; }
.estado-envio .ic { flex: none; color: var(--primaria); }
.estado-envio p { margin: 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.estado-curto:empty { display: none; }
.resultado > ul { justify-self: stretch; }
.lista-passos { margin: 12px 0; padding-left: 22px; display: grid; gap: 8px; } .lista-passos li::marker { font-weight: 700; color: var(--primaria); }