/* O painel da telecom. Copiado do admin do CRM dos stands: assenta na base comum (/comum/base.css)
   e no tema Grafite (/comum/temas.css, data-paleta no <html>). */
:root {
  --suave: var(--texto-leve); --destaque: var(--stand-texto);
  --ok: var(--relogio-verde); --erro: var(--relogio-vermelho); --aviso: var(--relogio-ambar);
}

/* ── topo e coluna ── */
.topo { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-left)) 12px max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--linha); background: var(--fundo); }
.marca { font: 800 16px/1.2 var(--fonte); letter-spacing: -0.01em; color: var(--texto); text-decoration: none; }
.sair { display: flex; align-items: center; gap: 8px; color: var(--texto-leve); font-size: 14px; }
.topo form.sair .campo { margin: 0; display: flex; align-items: center; gap: 8px; }
.topo form.sair .campo .rotulo { margin: 0; }
.topo form.sair select { width: auto; min-height: 38px; padding: 0 10px; }
main { max-width: 1120px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 16px; align-content: start; }
.cartao > p, .cartao form { max-width: 820px; }   /* texto e formulários legíveis; as tabelas usam a largura toda */
h1 { font: 800 26px/1.2 var(--fonte); letter-spacing: -0.02em; margin: 8px 0 4px; text-wrap: balance; }
h2 { font: 700 18px/1.3 var(--fonte); margin: 0 0 12px; }
.estreito { width: 100%; max-width: 460px; margin: 32px auto; }
.nota { color: var(--texto-leve); font-size: 14px; }

/* ── botões (os da base são para o telemóvel: aqui ficam do tamanho do texto) ── */
.botao, .botao-leve { width: auto; }
.botao { padding: 0 20px; }
.botao:disabled { opacity: .6; cursor: wait; }
.botao-leve { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: var(--raio-pilula); border: 1px solid var(--linha-forte); background: var(--cartao); color: var(--texto);
  font: 600 14px var(--fonte); cursor: pointer; text-decoration: none; transition: background-color .18s ease; }
.botao-leve:hover { background: var(--cartao-2); }
.linha-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── campos e balões ── */
.campo { margin-bottom: 16px; display: grid; gap: 6px; }
.rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rotulo label { font: 700 14px var(--fonte); }
.obrigatorio { color: var(--erro); }
.campo input:not([type=checkbox]):not([type=radio]), .campo select, .campo textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: 12px;
  font: 500 15px var(--fonte); background: var(--cartao); color: var(--texto); }
.campo textarea { min-height: 96px; }
.com-erro input, .com-erro select, .com-erro textarea { border-color: var(--erro); }
.ajuda summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cartao-2); color: var(--texto); font: 700 12px/1 var(--fonte); }
.ajuda summary::-webkit-details-marker { display: none; }
.ajuda[open] { flex-basis: 100%; }
.ajuda-texto { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--cartao-2); font-size: 14px; }
.ajuda-texto p { margin: 0 0 6px; }

/* ── estados e mensagens (nunca o vermelho como decoração: só no erro) ── */
.erro { color: var(--erro); margin: 6px 0 0; }
.aviso { color: var(--aviso); }
.ok { color: var(--ok); }
.estado-feito { color: var(--ok); } .estado-falhou { color: var(--erro); }
.estado-a_correr, .estado-pendente, .estado-em_falta { color: var(--aviso); }

/* ── tabelas, passos e o texto técnico ── */
table, .tabela { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th { text-align: left; font: 700 11px/14px var(--fonte); letter-spacing: .09em; text-transform: uppercase; color: var(--texto-leve);
  padding: 0 8px 8px 0; vertical-align: bottom; }
td { text-align: left; padding: 10px 8px 10px 0; border-top: 1px solid var(--linha); vertical-align: top; }
.tabela .linha-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.tabela td.quando, .tabela td.quem, .sem-quebra { white-space: nowrap; }
.passos { list-style: none; padding: 0; margin: 0; }
.passos li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.passos li:first-child { border-top: 0; }
pre { white-space: pre-wrap; word-break: break-word; background: var(--cartao-2); padding: 12px; border-radius: 12px; font-size: 13px; }
.cartao { overflow-x: auto; }   /* uma tabela larga rola dentro do cartão, nunca a página */

/* Achados na prova no navegador (2026-11-04): o cartão da base não traz margem interna (o app põe-na no
   conteúdo); o .rotulo da base é o título pequeno em maiúsculas, e no admin é o rótulo do campo; a caixa de
   seleção ficava ao centro da grelha do campo. */
.cartao { padding: 18px 20px; }
.campo .rotulo { text-transform: none; letter-spacing: 0; color: var(--texto); font: 700 14px/1.3 var(--fonte); }
.campo input[type=checkbox], .campo input[type=radio] { justify-self: start; width: 20px; height: 20px; margin: 0; accent-color: var(--texto); }

/* ── painel da telecom ── */
.menu { display: flex; flex-wrap: wrap; gap: 8px; }
.menu a[aria-current="page"] { background: var(--cartao-2); border-color: var(--texto); }
.ofertas { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.oferta { border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.oferta-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.oferta-nome { font: 700 16px/1.3 var(--fonte); }
.oferta-preco { font: 800 18px/1.2 var(--fonte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.oferta-preco s { color: var(--texto-leve); font-weight: 500; font-size: 14px; margin-right: 6px; }
.oferta-detalhe { color: var(--texto-leve); font-size: 14px; margin: 0; }
.selo { display: inline-block; padding: 2px 10px; border-radius: var(--raio-pilula); font: 700 12px/18px var(--fonte);
  border: 1px solid var(--linha-forte); }
.selo-ativa { color: var(--ok); border-color: var(--ok); }
.selo-expirada, .selo-desativada { color: var(--texto-leve); }
.selo-futura, .selo-a-expirar { color: var(--aviso); border-color: var(--aviso); }
.oferta-inativa { opacity: .65; }
.grelha-2 { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.opcao { display: grid; gap: 0 12px; grid-template-columns: 2fr 1fr; align-items: start; }
fieldset > .ajuda { margin: 0 0 12px; }
fieldset { border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px 0; margin: 0 0 16px; min-width: 0; }
legend { font: 700 14px var(--fonte); padding: 0 6px; }
.botao-perigo { color: var(--erro); }
/* Cores e Sair no rodapé: no celular o topo fixo ficava com um quarto da tela (prova de 2026-11-04). */
.rodape { max-width: 1120px; margin: 0 auto; padding: 0 16px 32px; display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between; border-top: 1px solid var(--linha); padding-top: 16px; }
.rodape .campo { margin: 0; display: flex; align-items: center; gap: 8px; }
.rodape .campo .rotulo { margin: 0; }
.rodape select { width: auto; min-height: 38px; padding: 0 10px; }
.rodape form { display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) { .topo { position: static; } }
.ofertas + .linha-acoes { margin-top: 12px; }