/* Tangerina Language Institute | estilo do site (segue o Guia de marca) */
:root {
  --azul: #00247D; --azul-fundo: #E8EDF8; --roxo: #251952;
  --laranja: #FF6A00; --laranja-escuro: #993E00; --amarelo: #FFB600;
  --cinza: #F4F4F4; --texto: #1F2A44; --apoio: #5B6477; --linha: #E5E8F0;
  --sucesso: #1B7F3B; --sucesso-fundo: #E8F6EC; --aviso-fundo: #FFF4CC;
  --erro: #C0262D; --erro-fundo: #FDECEC;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cinza); color: var(--texto); font: 500 16px/1.5 "Montserrat", Arial, sans-serif; }
img { max-width: 100%; height: auto; }
a { color: var(--laranja-escuro); font-weight: 600; }
a:hover { color: var(--azul); }
h1, h2, h3 { color: var(--azul); margin: 0; line-height: 1.25; }
h1 { font-size: 24px; font-weight: 800; }
h2 { font-size: 17px; font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Estrutura */
.app { min-height: 100vh; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.topo { position: sticky; top: 0; z-index: 5; height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 20px 0; background: #fff; display: flex; align-items: center; justify-content: space-between; }
.topo__logo { height: 36px; width: auto; }
.conteudo { padding: 24px 20px; max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.conteudo:focus { outline: none; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 8px; top: 8px; z-index: 20; background: #fff; padding: 8px 12px; }

/* Menu: barra de baixo no celular, lateral no computador */
.menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: #fff; border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); }
.menu__marca, .menu__rodape { display: none; }
.menu__lista { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around; }
.menu__lista li { flex: 1; }
.menu__lista a { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 4px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--apoio); text-align: center; }
.menu__lista a.ativo { color: var(--azul); font-weight: 800; box-shadow: inset 0 3px 0 var(--laranja); }

@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 240px 1fr; padding-bottom: 0; }
  .topo { display: none; }
  .conteudo { padding: 32px 40px; width: 100%; }
  .menu { position: sticky; top: 0; height: 100vh; border: 0; background: var(--azul); padding: 28px 20px; display: flex; flex-direction: column; gap: 28px; }
  .menu__marca { display: block; }
  .menu__marca img { width: 170px; }
  .menu__lista { flex-direction: column; justify-content: flex-start; gap: 4px; }
  .menu__lista a { justify-content: flex-start; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 15px; color: #fff; text-align: left; }
  .menu__lista a:hover { background: rgba(255,255,255,.1); color: #fff; }
  .menu__lista a.ativo { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
  .menu :focus-visible { outline-color: #fff; }
  .menu__rodape { display: flex; flex-direction: column; gap: 8px; margin-top: auto; color: #fff; font-size: 14px; }
}

/* Botões e links */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 0; border-radius: 12px; font: 700 16px "Montserrat", Arial, sans-serif; text-decoration: none; cursor: pointer; text-align: center; }
.botao--primario { background: var(--azul); color: #fff; }
.botao--primario:hover { background: var(--roxo); color: #fff; }
.botao--destaque { background: var(--laranja); color: var(--azul); }
.botao--destaque:hover { background: #E65F00; color: var(--azul); }
.botao--secundario { background: #fff; color: var(--azul); border: 2px solid var(--azul); }
.botao--perigo { background: var(--erro); color: #fff; }
.botao[disabled] { opacity: .6; cursor: not-allowed; }
.link-botao { background: none; border: 0; padding: 12px 4px; min-height: 44px; font: 600 14px "Montserrat", Arial, sans-serif; color: var(--laranja-escuro); cursor: pointer; text-decoration: underline; }
.link-botao--claro { color: #fff; text-align: left; }

/* Cartões */
.cartao { background: #fff; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.balao { border-radius: 24px 24px 24px 4px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.balao--azul { background: var(--azul); color: #fff; }
.balao--azul .botao { margin-top: 10px; align-self: stretch; }
.balao--branco { background: #fff; }
.balao__titulo { color: inherit; font-size: 20px; font-weight: 700; }
.rotulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--laranja); }
.apoio { font-size: 14px; color: var(--apoio); }
.destaque-valor { font-size: 28px; font-weight: 800; }
.linha-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.item + .item { border-top: 1px solid var(--linha); padding-top: 12px; }
.item__titulo { font-weight: 600; }
.coluna { display: flex; flex-direction: column; gap: 20px; }
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.numero { font-size: 32px; font-weight: 800; color: var(--azul); }

/* Selos */
.chip { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.chip--azul { background: var(--azul-fundo); color: var(--azul); }
.chip--verde { background: var(--sucesso-fundo); color: var(--sucesso); }
.chip--amarelo { background: var(--aviso-fundo); color: var(--azul); }
.chip--vermelho { background: var(--erro-fundo); color: var(--erro); }

/* Abas e barra */
.abas { display: flex; gap: 10px; flex-wrap: wrap; }
.aba { flex: 1; min-width: 140px; min-height: 48px; border: 2px solid var(--azul); border-radius: 12px; background: #fff; color: var(--azul); font: 700 15px "Montserrat", Arial, sans-serif; cursor: pointer; }
.aba[aria-selected="true"] { background: var(--azul); color: #fff; }
.barra { height: 10px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.barra__cheia { height: 10px; background: var(--azul); }

/* Formulários */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 600; }
.campo input, .campo select { width: 100%; height: 48px; border: 1px solid var(--apoio); border-radius: 12px; padding: 0 14px; background: #fff; color: var(--texto); font: 500 16px "Montserrat", Arial, sans-serif; }
.campo input:focus-visible, .campo select:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }
.form-cartao { background: #fff; border-radius: 16px; padding: 20px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.form-cartao .largo { grid-column: 1 / -1; }
.msg { font-size: 14px; font-weight: 600; min-height: 20px; }
.msg--erro { color: var(--erro); }
.msg--ok { color: var(--sucesso); }
.erro-caixa { background: var(--erro-fundo); color: var(--erro); border-radius: 12px; padding: 14px 16px; font-weight: 600; }
.vazio { background: #fff; border-radius: 16px; padding: 18px 20px; color: var(--apoio); }

/* Tabelas */
.tabela-rolagem { background: #fff; border-radius: 16px; overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.tabela th { text-align: left; font-size: 12px; font-weight: 700; color: var(--apoio); padding: 14px 16px; text-transform: uppercase; letter-spacing: .04em; }
.tabela td { padding: 14px 16px; border-top: 1px solid var(--linha); }

/* Entrar */
.login { min-height: 100vh; padding: calc(40px + env(safe-area-inset-top)) 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.login__logo { width: 210px; }
.login__cartao { width: 100%; max-width: 420px; background: #fff; border-radius: 20px 20px 20px 4px; padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 2px 12px rgba(0,36,125,.08); }
.login__nota { max-width: 300px; text-align: center; font-size: 13px; color: var(--apoio); }
.carregando { color: var(--apoio); padding: 20px; }
.carregando--tela { text-align: center; padding-top: 40vh; }