@charset "utf-8";
/* ==========================================================================
   Tabelas de valores (#/valores) — so o visual do que o valores.js monta.
   Cor so por token (o paleta.py mede o contraste antes de publicar): nenhum
   HEX aqui. Pensado para o celular em pe (390 px): a tabela de preco de 5
   colunas cabe sem rolar de lado, com numero em tabular-nums para as
   colunas alinharem de cima a baixo.
   ========================================================================== */

/* ---------------------------------------------------------------- abas */
/* quebra de linha em vez de rolar: a 390 px a 3a aba ("O que cada seguro
   paga") ficava cortada, e aba escondida e aba que ninguem acha */
.val-abas { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e5); }
.val-aba {
  flex: 0 0 auto; min-height: 44px; padding: 0 var(--e4);
  font: inherit; font-size: .875rem; font-weight: 600; white-space: nowrap;
  color: var(--ink-700); background: var(--branco);
  border: 1px solid var(--ink-200); border-radius: var(--r-tudo); cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.val-aba:hover { border-color: var(--blue-600); background: var(--blue-100); }
.val-aba[aria-selected="true"] { color: var(--branco); background: var(--ink-900); border-color: var(--ink-900); }
.val-aba:focus-visible,
.val-seg button:focus-visible,
.val-select:focus-visible,
.val-antiga > summary:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }

/* ----------------------------------------------------------- controles */
.val-controles { display: grid; gap: var(--e4); margin: 0 0 var(--e5); }
@media (min-width: 820px) {
  .val-controles { grid-template-columns: repeat(auto-fit, minmax(220px, max-content)); align-items: end; }
}
.val-campo { display: grid; gap: var(--e2); min-width: 0; }
.val-rot {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-500);
}
.val-select {
  min-height: 48px; width: 100%; max-width: 360px; padding: 0 var(--e3);
  font: inherit; font-size: 1rem; color: var(--ink-900);
  background: var(--branco); border: 1px solid var(--ink-200); border-radius: var(--r-m);
}
.val-seg {
  display: flex; flex-wrap: wrap; gap: var(--e1); padding: var(--e1);
  width: fit-content; max-width: 100%;
  background: var(--ink-50); border: 1px solid var(--ink-100); border-radius: var(--r-m);
}
.val-seg button {
  min-height: 44px; min-width: 44px; padding: 0 var(--e3);
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink-600);
  font-variant-numeric: tabular-nums;
  background: transparent; border: 0; border-radius: var(--r-p); cursor: pointer;
}
.val-seg button:hover { color: var(--ink-900); background: var(--branco); }
.val-seg button[aria-pressed="true"] { color: var(--ink-900); background: var(--branco); box-shadow: var(--sombra-1); }

/* -------------------------------------------------------------- cartao
   24/09: virou <details> — fechado nao mostra tabela nenhuma, so o titulo.
   Pedido do Samuel: muita informacao aberta de uma vez confunde. */
.val-cartao {
  margin: 0 0 var(--e5); padding: 0;
  background: var(--branco); border: 1px solid var(--ink-100); border-radius: var(--r-g);
  box-shadow: var(--sombra-1); scroll-margin-top: calc(var(--topo-h) + var(--e4));
}
.val-cartao-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  min-height: 44px; padding: var(--e3); cursor: pointer; list-style: none;
}
.val-cartao-cabeca::-webkit-details-marker { display: none; }
.val-cartao-cabeca:hover h2 { color: var(--ink-900); }
.val-cartao-cabeca:focus-visible { outline: 3px solid var(--blue-600); outline-offset: -3px; }
.val-cartao-cabeca > h2 { font-size: 1.05rem; margin: 0; }
.val-cartao-seta {
  width: 20px; height: 20px; flex: 0 0 auto; transition: transform .15s;
  background: no-repeat center / 20px 20px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
.val-cartao[open] .val-cartao-seta { transform: rotate(180deg); }
.val-cartao > *:not(.val-cartao-cabeca) { margin-left: var(--e3); margin-right: var(--e3); }
.val-cartao > .val-fonte, .val-cartao > .val-antiga { margin-bottom: var(--e3); }
.val-cartao > .val-explica:last-of-type,
.val-cartao > .val-sub:last-child { margin-bottom: var(--e3); }
@media (min-width: 600px) {
  .val-cartao-cabeca { padding: var(--e4) var(--e5); }
  .val-cartao > *:not(.val-cartao-cabeca) { margin-left: var(--e5); margin-right: var(--e5); }
}
.val-explica {
  font-size: .875rem; color: var(--ink-700); margin: 0 0 var(--e3); max-width: var(--leitura);
  padding: var(--e2) var(--e3); background: var(--ink-50); border-radius: var(--r-m);
}
.val-sub { font-size: .8125rem; color: var(--ink-500); margin: 0 0 var(--e4); max-width: var(--leitura); }
.val-bloco { display: grid; gap: var(--e3); }
.val-nota { font-size: .8125rem; color: var(--ink-500); margin: var(--e3) 0 0; max-width: var(--leitura); }
.val-vazio { font-size: .875rem; color: var(--ink-500); font-style: italic; margin: 0; }
.val-notas:empty { display: none; }
.val-notas .etq, .val-cartao > .etq { margin: var(--e3) 0 0; }
.val-conteudo > .etq { margin: 0 0 var(--e4); }
.val-fonte { font-size: .75rem; color: var(--ink-400); margin: var(--e2) 0 var(--e6); }
.val-cartao .val-fonte { margin: var(--e3) 0 0; }

/* -------------------------------------------------------------- tabela */
.val-rolagem { margin: 0; }
.val-tab { min-width: 0; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.val-tab th, .val-tab td { padding: var(--e2) 6px; }
.val-tab thead th {
  font-size: .7rem; font-weight: 700; line-height: 1.25; white-space: normal;
  vertical-align: bottom; text-align: right;
}
.val-tab thead th:first-child { text-align: left; }
.val-tab tbody th { text-align: left; font-weight: 600; color: var(--ink-900); white-space: normal; }
.val-tab td { text-align: right; white-space: nowrap; color: var(--ink-800); }
.val-tab .val-nada { color: var(--ink-300); }
.val-tab .val-suspeito { background: var(--warn-100); color: var(--warn-700); font-weight: 700; }
.val-tab .val-suspeito::after { content: ' ⚠'; }
@media (min-width: 600px) {
  .val-tab { font-size: .875rem; }
  .val-tab th, .val-tab td { padding: var(--e2) var(--e3); }
  .val-tab thead th { font-size: .75rem; }
}

/* tabelas de cobertura: a 1a coluna e frase longa, o valor fica em negrito */
.val-tab-b tbody th { font-weight: 400; color: var(--ink-700); min-width: 140px; }
.val-tab-b td { font-weight: 600; color: var(--ink-900); }
.val-multi td { white-space: normal; min-width: 64px; }
.val-q { display: block; font-size: .7rem; font-weight: 400; color: var(--ink-500); white-space: normal; }
.val-tab .val-grupo th {
  background: var(--ink-50); color: var(--ink-900); font-weight: 700; font-size: .8rem; text-align: left;
}
.val-tab .val-subgrupo th {
  font-weight: 700; color: var(--ink-600); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .05em; text-align: left; padding-top: var(--e3);
}
.val-tab .val-destaque th, .val-tab .val-destaque td { background: var(--warn-100); }
.val-tab .val-soma th, .val-tab .val-soma td { border-top: 1px solid var(--ink-200); }
.val-tab .val-total th, .val-tab .val-total td { font-weight: 700; color: var(--ink-900); background: var(--ink-50); }

/* celular: tabela de cobertura com 3-4 colunas vira "beneficio em cima,
   valores embaixo". Sem isto ela rolava de lado dentro da caixa (medido a
   390 px: Protetor, United e Cigna). Cabecalho e linhas usam a MESMA grade
   (--n = colunas de valor, posto pelo valores.js), entao cada valor continua
   embaixo do nome do plano. O valores.js escreve os papeis de tabela (role)
   porque display:grid apaga essa semantica em alguns leitores de tela. */
/* O mesmo vale para a tabela do dental (val-empilha): o rotulo "100
   Disappearing" nao quebra e a tabela pedia 342-350 px numa caixa de 330
   (medido a 390 px). Empilhada, o dedutivel vai numa faixa e os 4 precos
   ficam embaixo, cada um sob o nome da composicao familiar. */
@media (max-width: 599px) {
  .val-multi, .val-multi thead, .val-multi tbody,
  .val-empilha, .val-empilha thead, .val-empilha tbody { display: block; }
  .val-multi tr, .val-empilha tr {
    display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  }
  .val-multi thead th:first-child, .val-empilha thead th:first-child { display: none; }
  .val-multi thead th { text-align: left; }
  .val-multi tbody th[scope="row"], .val-empilha tbody th[scope="row"],
  .val-multi .val-grupo th,
  .val-multi .val-subgrupo th { grid-column: 1 / -1; min-width: 0; }
  .val-multi tbody th[scope="row"] { border-bottom: 0; padding-bottom: 2px; }
  .val-empilha tbody th[scope="row"] { background: var(--ink-50); border-bottom: 0; }
  .val-empilha tbody th[scope="row"] .val-q { display: inline; }
  .val-multi td { min-width: 0; text-align: left; white-space: normal; }
  .val-empilha td { min-width: 0; }
  .val-multi tbody tr:hover, .val-empilha tbody tr:hover { background: transparent; }
}

/* -------------------------------------------- tabela anterior / exemplo */
details.val-antiga {
  margin: var(--e4) 0 0; padding: 0;
  background: var(--ink-50); border: 1px solid var(--ink-100); border-radius: var(--r-m);
}
details.val-antiga > summary {
  display: flex; align-items: center; min-height: 44px; padding: var(--e2) var(--e4);
  font-size: .85rem; font-weight: 600; color: var(--ink-600); cursor: pointer;
}
details.val-antiga > summary:hover { color: var(--ink-900); }
details.val-antiga > .val-bloco,
details.val-antiga > .rolagem-tabela,
details.val-antiga > .val-nota { margin: 0 var(--e3) var(--e3); }