/*
  Kayru by Eikon — Páginas fora da área autenticada e utilitários de conteúdo.

  A landing, o login, o onboarding e a tela de espaço restrito não têm sidebar: são páginas
  centradas, de coluna única. Este arquivo dá o esqueleto delas usando os mesmos tokens do
  restante do sistema — nada de valor solto.
*/

/* ---------------------------------------------------------------
   1. Página centrada (login, onboarding, landing, espaço restrito)
   --------------------------------------------------------------- */
.pagina-simples {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  background-color: var(--color-canvas);
}

.pagina-simples__caixa {
  width: 100%;
  max-width: 30rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* A assinatura fica FORA da caixa branca, sobre o canvas.

   Motivo concreto, medido nos arquivos: nenhum PNG horizontal tem fundo transparente
   colorido. O `principal` traz o cinza-gelo (#E9EDF0) chapado nos quatro cantos, e só a
   versão monocromática é transparente — mas ela perde o azul-safira. Sobre a superfície
   branca do card, o `principal` viraria um retângulo cinza visível. Sobre o canvas, que é o
   mesmo cinza-gelo, ele encaixa sem emenda.

   Nunca recortada nem esticada: contain preserva a proporção e o endosso "by Eikon". O manual
   pede 120 px de largura mínima no digital — 180 px fica com folga. */
.pagina-simples__marca {
  margin-bottom: var(--space-5);
}

.pagina-simples__marca img {
  display: block;
  width: 180px;
  height: auto;
  object-fit: contain;
}

.pagina-simples h1 {
  font-size: var(--font-size-title-lg);
  line-height: var(--line-height-tight);
  margin: 0;
}

.pagina-simples p {
  margin: 0;
  color: var(--color-text-secondary);
}

.pagina-simples__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

@media (min-width: 768px) {
  .pagina-simples__caixa {
    padding: var(--space-7);
  }
}

/* ---------------------------------------------------------------
   2. Aviso de página inteira
   O estado nunca é só cor: cada variante leva um rótulo textual antes da mensagem, para quem
   não distingue as cores e para quem usa leitor de tela.
   --------------------------------------------------------------- */
.aviso {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-primary);
}

.aviso__rotulo {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.aviso--erro {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}

.aviso--erro .aviso__rotulo {
  color: var(--color-danger);
}

/* Sucesso existia nos tokens e não tinha variante de aviso: toda confirmação saía como
   "Atenção", que lê como alerta. Dizer "Retorno marcado" com cara de problema treina a pessoa
   a ignorar os avisos que importam. */
.aviso--sucesso {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
}

.aviso--sucesso .aviso__rotulo {
  color: var(--color-success);
}

.aviso--info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
}

.aviso--info .aviso__rotulo {
  color: var(--color-info);
}

/* ---------------------------------------------------------------
   3. Nota de rodapé de bloco: texto de apoio, menor e mais discreto
   --------------------------------------------------------------- */
.nota {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------
   4. Formulário empilhado
   --------------------------------------------------------------- */
.form-empilhado {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-empilhado code {
  font-size: var(--font-size-sm);
  word-break: break-all;
}

/* ---------------------------------------------------------------
   5. A marca dentro da sidebar
   A sidebar é superfície branca, e o PNG principal tem o cinza-gelo chapado no fundo. Em vez
   de aceitar um retângulo cinza solto sobre o branco, a área da marca recebe o mesmo gelo e
   vira uma faixa deliberada — o logo encaixa sem emenda e continua íntegro, com o endosso.
   Alternativa descartada: usar a versão monocromática transparente, que apagaria o
   azul-safira da assinatura.
   --------------------------------------------------------------- */
.sidebar__brand {
  background-color: var(--color-canvas);
  border-radius: var(--radius-control);
  padding: var(--space-3);
}

.sidebar__brand img {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------
   6. Rodapé da sidebar
   O rodapé original era uma linha horizontal, e com três itens — Suporte, Reportar bug e
   Sair — o último saía da largura de 240 px e ficava cortado. Empilhado, cada item ganha a
   largura toda e o alvo de toque mínimo, igual aos destinos de cima.
   --------------------------------------------------------------- */
.sidebar__footer {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}

.sidebar__footer form {
  display: block;
  width: 100%;
}

.sidebar__footer .btn {
  width: 100%;
  justify-content: flex-start;
  min-height: var(--layout-touch-target-min);
}

/* ---------------------------------------------------------------
   7. Estado vazio com texto corrido
   O componente centraliza tudo, o que funciona para uma frase curta e atrapalha numa lista de
   marcadores. Dentro de um card de conteúdo, o texto volta a ser alinhado à esquerda.
   --------------------------------------------------------------- */
.card .empty-state {
  align-items: flex-start;
  text-align: left;
  padding: var(--space-4);
  color: var(--color-text-primary);
}

.card .empty-state p,
.card .empty-state li {
  color: var(--color-text-secondary);
  max-width: 60ch;
}

/* O reset zera list-style em todo ul. Aqui os marcadores voltam: sem eles a lista vira um
   bloco de texto indentado, e o leitor perde onde cada item começa. */
.card .empty-state ul {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: disc outside;
}

/* ---------------------------------------------------------------
   8. Board
   No desktop, colunas lado a lado com rolagem horizontal PRÓPRIA — o corpo da página nunca
   rola de lado. No celular vira uma coluna só, empilhada, e o modo lista existe porque
   nenhuma ação pode depender de arrastar.
   --------------------------------------------------------------- */
.board {
  display: grid;
  grid-auto-flow: row;
  gap: var(--space-4);
}

.board__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.board__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  margin: 0;
}

.board__cartao .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.board__mover {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
}

.board__mover .field__control {
  flex: 1;
  min-width: 0;
}

@media (min-width: 1024px) {
  .board:not(.board--lista) {
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 1fr);
    overflow-x: auto;
    padding-bottom: var(--space-3);
  }
}

/* ---------------------------------------------------------------
   9. Indicadores
   Números com rótulo, sempre. Um número sozinho não diz nada, e o rótulo é o que impede a
   tela de virar um painel bonito e ilegível.
   --------------------------------------------------------------- */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.indicador {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  min-height: var(--layout-touch-target-min);
  text-decoration: none;
  color: inherit;
}

a.indicador:hover {
  border-color: var(--color-border-safira);
}

.indicador__numero {
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.indicador__rotulo {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Marcar como perdida — o <summary> é a única porta para o motivo de perda no celular, e
   nascia com 24px de altura, cursor "auto" e o triângulo padrão do navegador: fora do design
   system e abaixo do alvo mínimo. Ele é uma ação, e passa a ter o tratamento de ação. */
.board__perder {
  margin-top: var(--space-3);
}

.board__perder > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--layout-touch-target-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  list-style: none;
}

.board__perder > summary::-webkit-details-marker {
  display: none;
}

/* A seta é desenhada aqui porque o marcador nativo foi removido; ela gira ao abrir, que é o
   sinal de estado que o triângulo dava. */
.board__perder > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 120ms ease;
}

.board__perder[open] > summary::before {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .board__perder > summary::before {
    transition: none;
  }
}

.board__perder > summary:hover {
  border-color: var(--color-border-safira);
}

.board__perder > summary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}

.board__perder[open] > summary {
  margin-bottom: var(--space-3);
}

/* Um bloco de texto explicativo antes de um formulário precisa de ar; encostado no primeiro
   rótulo ele lê como parte do campo. */
.form-empilhado__nota {
  margin-bottom: var(--space-4);
}

/* O seletor de mensagem vive num <form> próprio e a prévia fica fora dele, então o
   espaçamento do form-empilhado não alcança o bloco seguinte. */
.previa-mensagem {
  margin-top: var(--space-4);
}

/* Editor de perguntas do formulário. Cada pergunta é um grupo de verdade — <fieldset> com
   <legend> — e não um bloco de campos soltos: quem usa leitor de tela precisa saber onde uma
   pergunta termina e a próxima começa. */
.pergunta {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.pergunta__legenda {
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.pergunta__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.field--inline label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--layout-touch-target-min);
}

/* Barra de filtros do Board. Em coluna no celular, em linha quando cabe — os campos ficam
   largos demais lado a lado em 390px, e o alvo de toque some. */
.filtros {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

@media (min-width: 768px) {
  .filtros {
    grid-template-columns: 2fr 1fr 1fr auto;
    align-items: end;
  }
}

.filtros__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.board__retorno {
  margin-top: var(--space-3);
}

.board__retorno > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--layout-touch-target-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  list-style: none;
}

.board__retorno > summary::-webkit-details-marker {
  display: none;
}

.board__retorno[open] > summary {
  margin-bottom: var(--space-3);
}

.nota--alerta {
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}

/* Abas da ficha do cliente. Rolam de lado quando não cabem, em vez de quebrar em duas linhas
   e empurrar o conteúdo — e o contêiner rola, nunca o corpo da página. */
.abas {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.abas__item {
  display: flex;
  align-items: center;
  min-height: var(--layout-touch-target-min);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.abas__item:hover {
  color: var(--color-text-primary);
}

.abas__item--ativa {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  border-bottom-color: var(--brand-safira);
}

.dados {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0;
}

.dados dt {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.linha-do-tempo {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-4);
}

.referencias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

/* Proporção fixa e recorte: sem isso uma foto em retrato (300x900) virava um bloco de
   291x869 no celular — uma referência ocupando a tela toda e a grade desalinhada. O link abre
   a imagem inteira, então nada se perde no recorte. */
.referencias__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border);
}

/* O <summary> de retorno tem o mesmo tratamento do de perder — inclusive a seta que gira,
   que é o único sinal de aberto/fechado depois de remover o marcador nativo. */
.board__retorno > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 120ms ease;
}

.board__retorno[open] > summary::before {
  transform: rotate(90deg);
}

.board__retorno > summary:hover {
  border-color: var(--color-border-safira);
}

.board__retorno > summary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .board__retorno > summary::before {
    transition: none;
  }
}

/* Em 390 as abas rolavam e a ativa ficava fora da vista: quem tocava em "Referências" não via
   nada marcado. Quebrar em duas linhas cabe melhor que rolar uma barra sem indício de que ela
   rola. */
@media (max-width: 600px) {
  .abas {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .abas__item {
    padding: var(--space-2) var(--space-3);
  }
}

/* Campos dentro do fieldset de pergunta precisam do mesmo ritmo do form-empilhado; sem isso o
   input encosta no rótulo do campo seguinte. */
.pergunta .field + .field {
  margin-top: var(--space-4);
}

.pergunta .field:first-of-type {
  margin-top: var(--space-3);
}

.referencias__remover > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--layout-touch-target-min);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  list-style: none;
}

.referencias__remover > summary::-webkit-details-marker {
  display: none;
}

.referencias__remover > summary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}

.referencias__origem {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Ações que são formulários (um botão por <form>, porque cada um faz um POST diferente)
   precisam do mesmo arranjo lado a lado que os links de ação já têm. */
.pagina-simples__acoes form {
  display: inline-block;
  margin: 0;
}

/* Configurações — conexões com o Google: um bloco por conta, separados por linha. */
.conexao {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}
.conexao:first-of-type {
  border-top: 0;
  padding-top: var(--space-2);
}
.conexao__titulo {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}
.conexao form {
  margin-top: var(--space-2);
}

/* Páginas de texto público (política, termos): coluna de leitura, sem sidebar. */
.pagina-texto {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-6);
  color: var(--color-text-secondary);
}
.pagina-texto h1 {
  color: var(--color-text-primary);
  font-size: var(--font-size-title-sm);
  margin: var(--space-4) 0 var(--space-2);
}
.pagina-texto h2 {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  margin: var(--space-5) 0 var(--space-2);
}
.pagina-texto p,
.pagina-texto li {
  line-height: 1.6;
}
.pagina-texto__marca img {
  width: 160px;
}
.pagina-texto__rodape {
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
}

/* Landing pública (fase 8): uma coluna, seções em cartões, sem sidebar. */
.landing {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
  color: var(--color-text-secondary);
}
.landing__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.landing__topo img { width: 160px; }
.landing__hero { text-align: center; padding: var(--space-6) 0; }
.landing__hero h1 {
  color: var(--color-text-primary);
  font-size: var(--font-size-title-lg);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}
.landing__hero p { max-width: 38rem; margin: 0 auto var(--space-4); font-size: var(--font-size-lg); }
.landing__hero .nota { margin-top: var(--space-3); }
.landing__secao { margin-top: var(--space-6); }
.landing__secao h2 {
  color: var(--color-text-primary);
  font-size: var(--font-size-title-sm);
  margin: 0 0 var(--space-4);
}
.landing__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}
.landing__bloco h3 {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  margin: 0 0 var(--space-1);
}
.landing__bloco p { margin: 0; line-height: 1.55; }
.landing__preco { text-align: center; }
.landing__preco .landing__valor {
  color: var(--color-text-primary);
  font-size: var(--font-size-title-lg);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-2) 0;
}
.landing__preco ul { text-align: left; max-width: 28rem; margin: var(--space-4) auto; padding-left: 1.2em; }
.landing__faq details { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.landing__faq summary { cursor: pointer; color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.landing__faq p { margin: var(--space-2) 0 0; }
.landing__rodape {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}