/* simulador.tvdedriver.pt — a identidade do tvdedriver.pt (web/site/estilo.css):
   azul-escuro #14224A, amarelo #FFB81C, branco; contrastes medidos lá (AA).
   Telemóvel primeiro. Sem estilos inline nem fontes externas: o CSP é style-src 'self'. */

:root {
  --azul: #14224A;
  --azul-2: #1D2F63;
  --azul-3: #2A3F7A;
  --amarelo: #FFB81C;
  --amarelo-claro: #FFF3D6;
  --branco: #FFFFFF;
  --texto: #1B2233;
  --texto-2: #4A5368;
  --texto-sobre-azul: #C9D1E6;
  --fundo: #F6F7FA;
  --campo: #F1F3F8;
  --linha: #DDE1EA;
  --verde: #1E7A46;
  --vermelho: #B3261E;
  --aviso: #8A4B00;
  --c-energia: #C77C00;
  --c-carro: #2A5DB0;
  --c-motorista: #1E7A46;
  --c-empresa: #6E4AA8;
  --raio: 16px;
  --sombra: 0 1px 2px rgba(20, 34, 74, .06), 0 8px 24px rgba(20, 34, 74, .08);
  --largura: 46rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.55;
  color: var(--texto); background: var(--fundo);
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; }
a { color: var(--azul-2); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.saltar { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--amarelo); color: var(--azul); padding: .5rem 1rem; font-weight: 600; }
.saltar:focus { left: 1rem; top: 1rem; }
.dentro { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 1rem; }

/* ── Topo ── */
.topo { background: var(--azul); color: var(--branco); padding-top: env(safe-area-inset-top, 0); }
.topo-dentro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; flex-wrap: wrap; }
.marca img { width: 9rem; height: auto; }
.abas { display: flex; gap: .25rem; }
.abas a { color: var(--texto-sobre-azul); text-decoration: none; font-weight: 600; font-size: .9375rem; padding: .5rem .75rem; border-radius: 999px; }
.abas a[aria-current="page"] { background: var(--azul-3); color: var(--branco); }

main { flex: 1; padding-top: 1.5rem; padding-bottom: 3rem; }
.cabeca h1 { font-size: clamp(1.75rem, 6vw, 2.375rem); font-weight: 800; color: var(--azul); margin: 0 0 .5rem; text-wrap: balance; }
.lede { color: var(--texto-2); margin: 0 0 1.25rem; }

/* ── Progresso ── */
.progresso { margin: 0 0 1rem; }
.progresso-texto { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; color: var(--texto-2); margin-bottom: .375rem; }
.progresso-texto span:first-child { font-weight: 700; color: var(--azul); }
.progresso-barra { height: .5rem; background: var(--linha); border-radius: 999px; overflow: hidden; }
.progresso-barra div { height: 100%; background: var(--amarelo); border-radius: 999px; transition: width .25s; }

/* ── Cartões e perguntas ── */
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.25rem; display: grid; gap: 1.125rem; }
@media (min-width: 40rem) { .cartao { padding: 1.75rem; } }
.cartao h2 { margin: 0; font-size: 1.375rem; color: var(--azul); }
.cartao > p.intro { margin: -.5rem 0 0; color: var(--texto-2); font-size: .9375rem; }
.pergunta { display: grid; gap: .375rem; min-width: 0; }
.pergunta > label, .pergunta > .rotulo { font-weight: 600; font-size: 1rem; }
.pergunta small { color: var(--texto-2); font-size: .875rem; line-height: 1.4; }
.grelha { display: grid; gap: 1.125rem; }
@media (min-width: 40rem) { .grelha.duas { grid-template-columns: 1fr 1fr; } }
.entrada { display: flex; align-items: stretch; border: 1px solid var(--linha); border-radius: 10px; background: var(--campo); overflow: hidden; }
.entrada:focus-within { border-color: var(--azul-3); box-shadow: 0 0 0 3px rgba(42, 63, 122, .2); }
.entrada input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.0625rem; font-variant-numeric: tabular-nums; padding: .75rem .875rem; color: var(--texto); outline: none; }
.entrada .unidade { padding: .75rem .875rem .75rem 0; color: var(--texto-2); font-size: .9375rem; white-space: nowrap; align-self: center; }
.pergunta.erro .entrada { border-color: var(--vermelho); }
.mensagem-erro { color: var(--vermelho); font-size: .875rem; font-weight: 600; }

.escolha { display: flex; flex-wrap: wrap; gap: .5rem; }
.escolha button { font: inherit; font-size: .9375rem; font-weight: 600; border: 1px solid var(--linha); background: var(--branco); color: var(--texto); border-radius: 999px; padding: .5rem 1rem; cursor: pointer; min-height: 2.75rem; }
.escolha button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--branco); }

.perfis { display: grid; gap: .625rem; }
.perfis button { font: inherit; text-align: left; border: 1px solid var(--linha); background: var(--branco); color: var(--texto); border-radius: 12px; padding: .875rem 1rem; cursor: pointer; display: grid; gap: .125rem; }
.perfis button b { font-size: 1.0625rem; color: var(--azul); }
.perfis button span { font-size: .875rem; color: var(--texto-2); line-height: 1.4; }
.perfis button[aria-pressed="true"] { border-color: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); background: var(--amarelo-claro); }
.pergunta.erro .perfis button { border-color: var(--vermelho); }

.caixa { display: flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; cursor: pointer; }
.caixa input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--azul); flex: none; }
.nota { margin: 0; color: var(--texto-2); font-size: .875rem; }

.botoes { display: flex; gap: .75rem; justify-content: space-between; flex-wrap: wrap; margin-top: .25rem; }
.botao { font: inherit; font-weight: 700; font-size: 1rem; border-radius: 999px; padding: .75rem 1.5rem; cursor: pointer; border: 2px solid var(--azul); min-height: 3rem; }
.botao-principal { background: var(--amarelo); border-color: var(--amarelo); color: var(--azul); margin-left: auto; }
.botao-principal:hover { background: #F5AB00; border-color: #F5AB00; }
.botao-contorno { background: transparent; color: var(--azul); }
.botao-ligacao { font: inherit; background: none; border: 0; padding: 0; color: var(--azul-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }

/* ── Resultado ── */
#resultado { display: grid; gap: 1rem; }
.destaque { background: var(--azul); color: var(--branco); border-radius: var(--raio); padding: 1.25rem; display: grid; gap: .375rem; box-shadow: var(--sombra); }
@media (min-width: 40rem) { .destaque { padding: 1.75rem; } }
.destaque .k { color: var(--texto-sobre-azul); }
.destaque .grande { font-size: clamp(2.75rem, 12vw, 3.75rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--amarelo); }
.destaque .grande span { font-size: 1.25rem; font-weight: 600; color: var(--texto-sobre-azul); margin-left: .25rem; }
.destaque p { margin: .25rem 0 0; color: var(--texto-sobre-azul); font-size: .9375rem; }
.destaque p b { color: var(--branco); }
.k { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.numeros div { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: .875rem 1rem; display: grid; gap: .125rem; }
.numeros b { font-size: 1.375rem; font-variant-numeric: tabular-nums; color: var(--azul); }
.numeros .todo { grid-column: 1 / -1; }
.envio { background: var(--amarelo-claro); border-radius: 12px; padding: .875rem 1rem; font-size: .9375rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.envio.erro { background: #FCE8E6; }
.barra { display: flex; height: .875rem; border-radius: 6px; overflow: hidden; background: var(--linha); }
.barra div { height: 100%; }
.cor-energia { background: var(--c-energia); } .cor-carro { background: var(--c-carro); }
.cor-motorista { background: var(--c-motorista); } .cor-empresa { background: var(--c-empresa); }
.tabela { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9375rem; }
th, td { padding: .5rem .375rem; text-align: right; border-bottom: 1px solid var(--linha); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; white-space: normal; }
thead th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); font-weight: 700; }
tfoot td, tr.forte td { font-weight: 700; }
tr.sec td { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); padding-top: 1rem; text-align: left; }
.ponto { display: inline-block; width: .625rem; height: .625rem; border-radius: 3px; margin-right: .5rem; }
.pos { color: var(--verde); } .neg { color: var(--vermelho); }
.avisos { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.avisos li { font-size: .9375rem; border-left: 4px solid var(--amarelo); background: var(--amarelo-claro); padding: .5rem .75rem; border-radius: 0 8px 8px 0; color: var(--aviso); }
.dados { display: grid; gap: .75rem; }
.bloco { border: 1px solid var(--linha); border-radius: 12px; padding: .875rem 1rem; display: grid; gap: .5rem; background: var(--branco); }
.bloco-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.bloco-topo h3 { margin: 0; font-size: 1rem; color: var(--azul); }
.bloco dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; font-size: .9375rem; }
.bloco dt { color: var(--texto-2); }
.bloco dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── Como se calcula ── */
.explica { display: block; }
.explica h2 { color: var(--azul); font-size: 1.375rem; margin: 2rem 0 .5rem; }
.explica h2:first-child { margin-top: 0; }
.explica ul, .explica ol { padding-left: 1.25rem; }
.explica li { margin: .25rem 0; }
.explica .tbl { overflow-x: auto; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; margin: .75rem 0; }
.explica th, .explica td { white-space: normal; text-align: left; vertical-align: top; padding: .5rem .75rem; }
.explica thead th { background: var(--campo); }

/* ── Rodapé ── */
.rodape { background: var(--azul); color: var(--texto-sobre-azul); padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom, 0)); font-size: .875rem; }
.rodape-dentro { display: grid; gap: .75rem; }
.rodape p { margin: 0; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.rodape a { color: var(--branco); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.assinatura { display: inline-flex; align-items: center; gap: .4em; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-sobre-azul) !important; justify-self: start; }

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