/* Clipboard: folha de marca do sistema.
   Leia docs/marca/guia-de-marca.md antes de mexer.

   Esta folha é de transição. Ela entra DEPOIS de app.css, componentes.css e paginas.css e
   troca cores, fontes e formas herdadas da base pelo visual do Clipboard, sem tocar nos
   arquivos originais. O destino final é fundir estes valores nos três arquivos e apagar esta folha
   (guia, seção 9, etapa 3).

   Cópia em uso de docs/marca/clipboard.css: ao mudar uma, mude a outra. */

/* ---------- 1. Cores, formas e fontes da marca ---------- */
:root {
  /* Paleta */
  --lima: #B8F23A;
  --lima-claro: #D4FF70;
  --lima-sombra: #86B81C;
  --grafite: #0B0F0E;
  --carvao: #151B19;
  --carvao-2: #1E2623;
  --gelo: #F2F5F3;
  --ambar: #FFB020;

  /* Papéis (use estes nomes em código novo) */
  --fundo: var(--grafite);
  --superficie: var(--carvao);
  --superficie-2: var(--carvao-2);
  --acento: var(--lima);            /* ação, ativo, confirmado */
  --acento-hover: var(--lima-claro);
  --sobre-acento: var(--grafite);   /* texto e ícone em cima do lima */
  --aviso: var(--ambar);            /* atenção, pendente, alterado pelo guia */
  --raio-painel: 16px;
  --raio-campo: 12px;
  --raio-mini: 8px;
  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Apelidos: nomes de variável herdados da base. Saem quando as variáveis forem renomeadas (guia, seção 9, etapa 3). */
  --preto: var(--fundo);
  --painel: var(--superficie);
  --painel-2: var(--superficie-2);
  --texto: var(--gelo);
  --texto-2: rgba(242, 245, 243, 0.64);
  --texto-3: rgba(242, 245, 243, 0.54);
  --menta: var(--acento);
  --amarelo: var(--aviso);
  --erro: #FF7A63;                  /* o selo preenchido precisa de contraste 4,5:1 */
  --serif: var(--fonte);

  color-scheme: dark;
}

body { background: var(--fundo); font-family: var(--fonte); font-weight: 500; }

/* ---------- 2. Marca no topo ---------- */
.marca { gap: 10px; color: var(--texto); }
.marca-rotulo { color: var(--texto-2); }
.marca-nome { font-size: 20px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--texto); }
.pub-topo, .barra-movel { background: color-mix(in srgb, var(--fundo) 82%, transparent); }
.abas { background: color-mix(in srgb, var(--superficie) 96%, transparent); }

/* ---------- 3. Títulos e números: Plus Jakarta Sans 800, sem serifa ---------- */
:is(
  .pub-hero h1, .painel-acesso h2, .pagina-topo h1, .destaque h3, .tour-passo h2,
  .convite h2, .form-secoes legend, .poltrona-info h3, .dialogo h2,
  .cadastro-titulo, .calendario-topo h2
) { font-weight: 800; letter-spacing: -0.03em; }
:is(
  .destaque-data strong, .pendencias .num, .numero-grande, .pub-recursos .num,
  .lv-data strong, .horarios strong, .lp-contadores strong, .lp-contadores strong b,
  .resumo-financeiro strong b, .financeiro-valor strong, .faq-num, .resumo-checkin strong
) { font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ---------- 4. Rótulos: caixa alta só nos pequenos, com espaçamento curto ---------- */
:is(
  .sobretitulo, .rotulo, .campo > span:first-child, .marca-rotulo, .pub-rodape,
  .barra-movel-id span, .lateral-perfil .codigo, .bloco-titulo h2, .destaque-data span,
  .feed-data, .tabela th, .tour-contagem, .subtitulo, .lv-data, .ficha dt,
  .carro-frente span, .legal h2, .cal-semana
) { letter-spacing: 0.08em; }
.lp-tabela td[data-rotulo]::before,
.tabela td[data-rotulo]::before { letter-spacing: 0.08em; }
.abas a, .abas button { letter-spacing: 0.02em; text-transform: none; font-size: 11px; }

/* Códigos (viagem, guia) ficam neutros: o lima é reservado para ação e confirmação. */
:is(.codigo, code, .lateral-perfil .codigo, .barra-movel-id span) { color: var(--texto-2); }

/* ---------- 5. Botões, links e marcações: frase normal, pílula ---------- */
a:hover { color: var(--acento-hover); }
.btn { min-height: 48px; font-size: 15px; letter-spacing: 0; text-transform: none; }
.btn-p { min-height: 40px; font-size: 13.5px; }
.btn-primario:hover { background: var(--acento-hover); }
:is(.link-sublinhado, .recusar summary, .adicionar summary, .importar summary) { font-size: 14px; letter-spacing: 0; text-transform: none; }
.filtros a { font-size: 13px; letter-spacing: 0; }
.marcacao { font-size: 13px; letter-spacing: 0; text-transform: none; }
.marcacao.marca-noshow { font-size: 12px; }
.lp-simples .marcacao.marcacao-principal { font-size: 15px; }
.marcacao.feita:hover { background: var(--acento-hover); border-color: var(--acento-hover); }
.campo input[type="file"]::file-selector-button { font-size: 13px; }

/* ---------- 6. Selos: etiqueta preenchida (na base são contornadas) ---------- */
.selo { border: none; padding: 5px 11px; font-size: 12px; letter-spacing: 0; text-transform: none; background: color-mix(in srgb, currentColor 16%, transparent); }
.selo-sucesso { background: var(--acento); color: var(--sobre-acento); }
.selo-neutro { color: var(--texto-2); }

/* ---------- 7. Cantos arredondados (na base são retos) ---------- */
:is(
  .painel, .painel-acesso, .destaque, .convite, .vazio, .em-construcao, .poltrona-info,
  .dialogo, .tour-caixa, .dia-cartao, .atalho-lista, .opcao-destaque, .contato-linha,
  .opcao-cartao, .doc-item, .financeiro-item, .msg, .video-quadro, .folha, .log-erros,
  .acao-motivo[open] > form, .adicionar[open] > form, .importar[open] > form
) { border-radius: var(--raio-painel); }
/* Blocos com divisórias internas: recorte sem criar área de rolagem (o cabeçalho fixo da lista continua funcionando). */
:is(.lp-contadores, .horarios, .passos, .lp-tabela-rolagem, .video-quadro) { border-radius: var(--raio-painel); overflow: clip; }
:is(
  .campo input, .campo select, .campo textarea, .busca input, .lp-ferramentas input,
  .lp-ferramentas select, .origem-remover, .busca-faq, .filtros-form input, .filtros-form select
) { border-radius: var(--raio-campo); }
:is(.alerta, .alerta-mini, .erro-form, .info-embarque, .toast, .nf-instrucoes, .relatorio-texto, .cal-dia) { border-radius: var(--raio-mini); }
:is(.marca-guia, .leg-cal) { border-radius: 4px; }
.folha { border-radius: var(--raio-painel) var(--raio-painel) 0 0; }
@media (max-width: 1199px) {
  .lp-tabela-rolagem { border-radius: 0; overflow: visible; }
  .lp-tabela tr { border-radius: var(--raio-painel); overflow: clip; }
}
@media (max-width: 699px) {
  .tabela tr { border-radius: var(--raio-painel); overflow: clip; }
}

/* Faixas laterais de 3 px viram borda inteira e fina (cantos arredondados não combinam com faixa). */
.alerta { border-left-width: 1px; }
.alerta-sucesso { border-color: color-mix(in srgb, var(--acento) 40%, transparent); background: color-mix(in srgb, var(--acento) 8%, var(--superficie)); }
.alerta-aviso { border-color: color-mix(in srgb, var(--aviso) 40%, transparent); background: color-mix(in srgb, var(--aviso) 8%, var(--superficie)); }
.alerta-erro { background: color-mix(in srgb, var(--erro) 8%, var(--superficie)); }
.convite { border: 1px solid color-mix(in srgb, var(--aviso) 50%, transparent); }
:is(.dialogo, .tour-caixa) { border-top: 1px solid var(--linha-forte); }
:is(.alerta-mini, .erro-form, .info-embarque, .nf-instrucoes, .relatorio-texto) { border-left-width: 0; }
.lp-simples tr.lp-detalhe td { border-left-width: 0; }

/* ---------- 8. Tons de fundo que na base estão fixos em rgba() verde e amarelo ---------- */
.destaque { background: var(--superficie); }
.lateral-nav a.ativo { background: color-mix(in srgb, var(--acento) 8%, transparent); }
.atalho-lista { background: color-mix(in srgb, var(--acento) 8%, transparent); }
.atalho-lista:hover { background: color-mix(in srgb, var(--acento) 14%, transparent); }
:is(.poltrona.ocupada, .leg-ocupada) { background: color-mix(in srgb, var(--acento) 16%, transparent); border-color: color-mix(in srgb, var(--acento) 60%, transparent); }
.info-embarque { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.info-embarque.ed-guia { background: color-mix(in srgb, var(--aviso) 16%, var(--fundo)) !important; }
.opcao-cartao:has(input:checked) { background: color-mix(in srgb, var(--acento) 6%, transparent); }
:is(.cal-dia.m-disponivel, .leg-cal.disp) { background: color-mix(in srgb, var(--acento) 14%, transparent); border-color: color-mix(in srgb, var(--acento) 50%, transparent); }
.msg-equipe { border-color: color-mix(in srgb, var(--acento) 50%, transparent); background: color-mix(in srgb, var(--acento) 8%, transparent); }
.marca-guia { background: color-mix(in srgb, var(--aviso) 18%, transparent); }
.lp-tabela td.ed-guia, .ed-guia { background: color-mix(in srgb, var(--aviso) 16%, var(--fundo)) !important; }
.poltrona-info h3.ed-guia { background: none !important; }
.alerta-mini.reserva { background: color-mix(in srgb, var(--aviso) 10%, transparent); }
.nf-instrucoes { background: color-mix(in srgb, var(--aviso) 8%, transparent); }
@media (min-width: 1200px) {
  .lp-tabela tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--gelo) 3%, var(--fundo)); }
}

/* ---------- 9. Tema claro (uso sob sol). NÃO ATIVAR antes da etapa 3 do guia:
   a base tem "color: #fff" fixo em dezenas de regras, que some no fundo claro. ---------- */
:root[data-tema="claro"] {
  --fundo: var(--gelo);
  --superficie: #FFFFFF;
  --superficie-2: #E6EBE8;
  --texto: var(--grafite);
  --texto-2: #55615C;
  --texto-3: #5F6B66;
  --linha: rgba(11, 15, 14, 0.12);
  --linha-forte: rgba(11, 15, 14, 0.28);
  --acento-texto: #3F6B00;  /* lima não serve como cor de letra no claro */
  --aviso-texto: #8A5A00;
  --erro: #B93A26;
  --info: #2C5CC5;
  color-scheme: light;
}