/* ============================================================================
 * PANTHALASSA — COMPONENTES
 *
 * A VERDADE VISUAL. React e Astro só penduram classe daqui: nenhuma das duas
 * ligações contém uma linha de estilo. Mudar a aparência de um componente é
 * editar uma regra deste arquivo, e as duas mudam juntas.
 *
 * Regras que este arquivo obedece e que o gate verifica:
 *   - nenhuma cor literal: tudo sai de token
 *   - card não tem sombra (elevação é escala de borda)
 *   - acento chapado é proibido em botão primário
 *   - foco sempre visível
 *
 * Depende de: @panthalassa/tokens (estrutura.css + a pele da venture).
 * ========================================================================== */

@layer panthalassa.componentes {
  /* ==========================================================================
   * BASE
   * ======================================================================== */

  /* Caixa por borda, não por conteúdo.
     Sem isto, `width: 100%` mais padding mais borda somam MAIS que 100%, e todo
     campo de formulário transborda a própria coluna. Foi o primeiro defeito que
     apareceu ao renderizar o exemplo: o campo de e-mail invadia o campo ao lado. */
  .pt-raiz,
  .pt-raiz *,
  .pt-raiz *::before,
  .pt-raiz *::after {
    box-sizing: border-box;
  }

  .pt-raiz {
    background: var(--pt-fundo);
    color: var(--pt-tinta);
    font-family: var(--pt-fonte);
    font-size: var(--pt-txt-base);
    line-height: var(--pt-altura-linha);
    font-weight: var(--pt-peso-normal);
    -webkit-font-smoothing: antialiased;
  }

  /* Foco: um só desenho no sistema inteiro. Nunca remova sem substituir. */
  .pt-raiz :focus-visible {
    outline: 2px solid var(--pt-acento);
    outline-offset: 2px;
    border-radius: var(--pt-raio-p);
  }

  /* ==========================================================================
   * COMPOSIÇÃO
   * ======================================================================== */

  .pt-pilha {
    display: flex;
    flex-direction: column;
    gap: var(--pt-pilha-gap, var(--pt-esp-4));
  }
  .pt-pilha[data-gap="p"] { --pt-pilha-gap: var(--pt-esp-2); }
  .pt-pilha[data-gap="g"] { --pt-pilha-gap: var(--pt-esp-6); }

  /* Item flex estica no eixo cruzado por padrão, e numa pilha em coluna isso
     faz um selo ocupar a largura inteira do card. Componentes que são
     intrinsecamente do tamanho do conteúdo não esticam.
     Escopo em filho direto de propósito: dentro de .pt-linha o alinhamento é
     centralizado e não pode ser sobrescrito por isto. */
  .pt-pilha > .pt-selo,
  .pt-pilha > .pt-ponto,
  .pt-pilha > .pt-btn,
  .pt-pilha > .pt-avatar,
  .pt-pilha > .pt-tecla {
    align-self: flex-start;
  }

  .pt-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pt-linha-gap, var(--pt-esp-3));
  }
  .pt-linha[data-alinhar="topo"] { align-items: flex-start; }
  .pt-linha[data-justificar="entre"] { justify-content: space-between; }

  .pt-grade {
    display: grid;
    gap: var(--pt-esp-4);
    grid-template-columns: repeat(auto-fit, minmax(var(--pt-grade-min, 240px), 1fr));
  }

  .pt-container {
    width: 100%;
    max-width: var(--pt-largura-conteudo);
    margin-inline: auto;
    padding-inline: var(--pt-esp-4);
  }

  .pt-secao { padding-block: var(--pt-esp-8); }

  .pt-divisor {
    border: 0;
    border-top: 1px solid var(--pt-traco);
    margin-block: var(--pt-esp-5);
  }

  /* ==========================================================================
   * SUPERFÍCIE
   * Card SOBE em relação ao fundo. Campo e lista DESCEM para o recuado.
   * Não existe sombra em card: a elevação é a escala de borda 8/13/20%.
   * ======================================================================== */

  .pt-card {
    background: var(--pt-superficie);
    border: 1px solid var(--pt-traco);
    border-radius: var(--pt-raio);
    padding: var(--pt-esp-5);
  }
  .pt-card[data-interativo] {
    transition: background var(--pt-dur) var(--pt-ease), border-color var(--pt-dur) var(--pt-ease);
    cursor: pointer;
  }
  .pt-card[data-interativo]:hover {
    background: var(--pt-superficie-hover);
    border-color: var(--pt-traco-forte);
  }
  /* O fio de acento marca o item ativo. Use com parcimônia: o método limita
     o acento a 5% da tela, e "aceso" é exceção, não estado padrão. */
  .pt-card[data-aceso] {
    border-color: var(--pt-acento-traco);
    box-shadow: inset 2px 0 0 0 var(--pt-acento);
  }

  .pt-painel {
    background: var(--pt-recuado);
    border: 1px solid var(--pt-traco);
    border-radius: var(--pt-raio-p);
    padding: var(--pt-esp-4);
  }

  /* Fundo da aplicação: UM radial estático, quase invisível, derivado do acento.
     O método já sanciona exatamente isto e proíbe o resto (blob animado, aurora,
     mesh, partícula). Veio de um componente que se chamava BackgroundBlobs e não
     tinha blob nenhum: o nome mentia, a coisa estava certa. */
  .pt-fundo-sinal {
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    background: radial-gradient(80% 52% at 70% -12%, var(--pt-acento-tinta), transparent 60%);
  }
  .pt-fundo-sinal[data-intensidade="sutil"] {
    background: radial-gradient(80% 52% at 70% -12%, var(--pt-acento-tinta), transparent 55%);
    opacity: 0.6;
  }

  /* Só o que FLUTUA de verdade ganha sombra. */
  .pt-flutuante {
    background: var(--pt-superficie);
    border: 1px solid var(--pt-traco-forte);
    border-radius: var(--pt-raio);
    box-shadow: var(--pt-sombra-flutuante);
    padding: var(--pt-esp-4);
  }

  /* ==========================================================================
   * TIPOGRAFIA
   * ======================================================================== */

  .pt-titulo {
    font-family: var(--pt-fonte-titulo);
    font-weight: var(--pt-peso-forte);
    letter-spacing: var(--pt-tracking-titulo);
    line-height: var(--pt-altura-linha-titulo);
    color: var(--pt-tinta);
    margin: 0;
  }
  .pt-titulo[data-nivel="hero"] { font-size: var(--pt-txt-hero); font-weight: var(--pt-peso-max); }
  .pt-titulo[data-nivel="1"] { font-size: var(--pt-txt-h1); }
  .pt-titulo[data-nivel="2"] { font-size: var(--pt-txt-h2); }
  .pt-titulo[data-nivel="3"] { font-size: var(--pt-txt-h3); }
  /* Registro denso: título dentro de painel de aplicação. */
  .pt-titulo[data-nivel="app"] { font-size: var(--pt-txt-titulo); font-weight: var(--pt-peso-forte); }

  .pt-eyebrow {
    font-family: var(--pt-fonte-mono);
    font-size: var(--pt-txt-eyebrow);
    font-weight: var(--pt-peso-medio);
    letter-spacing: var(--pt-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--pt-tinta-fraca);
  }

  .pt-prosa {
    max-width: var(--pt-largura-leitura);
    color: var(--pt-tinta-media);
  }
  .pt-prosa > * + * { margin-top: var(--pt-esp-4); }
  .pt-prosa strong { color: var(--pt-tinta); font-weight: var(--pt-peso-forte); }

  .pt-meta {
    font-size: var(--pt-txt-meta);
    color: var(--pt-tinta-fraca);
  }

  /* Número: mono e tabular, para a coluna não dançar entre linhas. */
  .pt-num {
    font-family: var(--pt-fonte-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  .pt-link {
    color: var(--pt-acento-suave);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--pt-acento-traco);
    transition: text-decoration-color var(--pt-dur) var(--pt-ease);
  }
  .pt-link:hover { text-decoration-color: var(--pt-acento); }

  .pt-tecla {
    font-family: var(--pt-fonte-mono);
    font-size: var(--pt-txt-micro);
    padding: 2px 6px;
    border: 1px solid var(--pt-traco-forte);
    border-radius: var(--pt-raio-p);
    background: var(--pt-recuado);
    color: var(--pt-tinta-media);
  }

  .pt-codigo {
    font-family: var(--pt-fonte-mono);
    font-size: var(--pt-txt-compacto);
    background: var(--pt-recuado);
    border: 1px solid var(--pt-traco);
    border-radius: var(--pt-raio-p);
    padding: var(--pt-esp-3);
    overflow-x: auto;
  }

  /* ==========================================================================
   * AÇÃO
   * O primário NÃO é acento chapado: é profundidade. Regra da referência.
   * ======================================================================== */

  .pt-btn {
    --pt-btn-h: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pt-esp-2);
    height: var(--pt-btn-h);
    padding-inline: var(--pt-esp-4);
    border: 1px solid transparent;
    border-radius: var(--pt-raio-p);
    font-family: inherit;
    font-size: var(--pt-txt-corpo);
    font-weight: var(--pt-peso-forte);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--pt-dur) var(--pt-ease), border-color var(--pt-dur) var(--pt-ease),
      opacity var(--pt-dur) var(--pt-ease);
  }
  .pt-btn[data-tamanho="p"] { --pt-btn-h: 28px; font-size: var(--pt-txt-compacto); padding-inline: var(--pt-esp-3); }
  .pt-btn[data-tamanho="g"] { --pt-btn-h: 44px; font-size: var(--pt-txt-titulo); padding-inline: var(--pt-esp-5); }
  .pt-btn:disabled { opacity: 0.45; cursor: not-allowed; }

  .pt-btn--primario {
    background: linear-gradient(180deg, var(--pt-acento-hover), var(--pt-acento));
    color: var(--pt-acento-contraste);
    border-color: var(--pt-acento);
  }
  .pt-btn--primario:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--pt-acento-hover), var(--pt-acento-hover));
  }

  .pt-btn--secundario {
    background: var(--pt-superficie-hover);
    color: var(--pt-tinta);
    border-color: var(--pt-traco-forte);
  }
  .pt-btn--secundario:hover:not(:disabled) {
    background: var(--pt-superficie-ativa);
    border-color: var(--pt-traco-ativo);
  }

  .pt-btn--fantasma {
    background: transparent;
    color: var(--pt-tinta-media);
  }
  .pt-btn--fantasma:hover:not(:disabled) {
    background: var(--pt-superficie-hover);
    color: var(--pt-tinta);
  }

  .pt-btn--perigo {
    background: transparent;
    color: var(--pt-perigo);
    border-color: var(--pt-perigo);
  }
  .pt-btn--perigo:hover:not(:disabled) { background: var(--pt-perigo-tinta); }

  /* ==========================================================================
   * FORMULÁRIO
   * ======================================================================== */

  .pt-grupo { display: flex; flex-direction: column; gap: var(--pt-esp-2); }

  .pt-rotulo {
    font-size: var(--pt-txt-compacto);
    font-weight: var(--pt-peso-medio);
    color: var(--pt-tinta-media);
  }

  .pt-campo {
    width: 100%;
    min-height: 36px;
    padding: var(--pt-esp-2) var(--pt-esp-3);
    background: var(--pt-recuado);
    color: var(--pt-tinta);
    border: 1px solid var(--pt-traco-forte);
    border-radius: var(--pt-raio-p);
    font-family: inherit;
    font-size: var(--pt-txt-corpo);
    transition: border-color var(--pt-dur) var(--pt-ease);
  }
  .pt-campo::placeholder { color: var(--pt-tinta-fraca); }
  .pt-campo:hover:not(:disabled) { border-color: var(--pt-traco-ativo); }
  .pt-campo:disabled { opacity: 0.45; cursor: not-allowed; }
  .pt-campo[aria-invalid="true"] { border-color: var(--pt-perigo); }
  textarea.pt-campo { min-height: 88px; resize: vertical; line-height: var(--pt-altura-linha); }

  .pt-ajuda { font-size: var(--pt-txt-meta); color: var(--pt-tinta-fraca); }
  .pt-erro { font-size: var(--pt-txt-meta); color: var(--pt-perigo); }

  /* ==========================================================================
   * ESTADO E SINAL
   * Estado nunca depende só de cor: selo e aviso sempre carregam texto.
   * ======================================================================== */

  .pt-selo {
    display: inline-flex;
    align-items: center;
    gap: var(--pt-esp-1);
    padding: 2px var(--pt-esp-2);
    border-radius: var(--pt-raio-pilula);
    border: 1px solid var(--pt-traco-forte);
    background: var(--pt-superficie-hover);
    color: var(--pt-tinta-media);
    font-size: var(--pt-txt-eyebrow);
    font-weight: var(--pt-peso-medio);
    white-space: nowrap;
  }
  .pt-selo[data-estado="sucesso"] { color: var(--pt-sucesso); background: var(--pt-sucesso-tinta); border-color: transparent; }
  .pt-selo[data-estado="atencao"] { color: var(--pt-atencao); background: var(--pt-atencao-tinta); border-color: transparent; }
  .pt-selo[data-estado="perigo"] { color: var(--pt-perigo); background: var(--pt-perigo-tinta); border-color: transparent; }
  .pt-selo[data-estado="info"] { color: var(--pt-info); background: var(--pt-info-tinta); border-color: transparent; }

  .pt-ponto {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--pt-raio-pilula);
    background: var(--pt-tinta-fraca);
    flex: none;
  }
  .pt-ponto[data-estado="sucesso"] { background: var(--pt-sucesso); }
  .pt-ponto[data-estado="atencao"] { background: var(--pt-atencao); }
  .pt-ponto[data-estado="perigo"] { background: var(--pt-perigo); }
  .pt-ponto[data-estado="info"] { background: var(--pt-info); }

  .pt-aviso {
    display: flex;
    gap: var(--pt-esp-3);
    padding: var(--pt-esp-4);
    border: 1px solid var(--pt-traco-forte);
    border-radius: var(--pt-raio-p);
    background: var(--pt-recuado);
    font-size: var(--pt-txt-corpo);
    color: var(--pt-tinta-media);
  }
  .pt-aviso[data-estado="atencao"] { border-color: var(--pt-atencao); background: var(--pt-atencao-tinta); }
  .pt-aviso[data-estado="perigo"] { border-color: var(--pt-perigo); background: var(--pt-perigo-tinta); }

  .pt-esqueleto {
    background: var(--pt-superficie-hover);
    border-radius: var(--pt-raio-p);
    min-height: 1em;
    animation: pt-respira 1.6s var(--pt-ease) infinite;
  }
  @keyframes pt-respira {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }

  .pt-vazio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pt-esp-3);
    padding: var(--pt-esp-6) var(--pt-esp-5);
    border: 1px dashed var(--pt-traco-forte);
    border-radius: var(--pt-raio);
    color: var(--pt-tinta-media);
    font-size: var(--pt-txt-corpo);
  }

  /* ==========================================================================
   * DADO
   * ======================================================================== */

  .pt-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pt-txt-corpo);
  }
  .pt-tabela th {
    text-align: left;
    font-family: var(--pt-fonte-mono);
    font-size: var(--pt-txt-eyebrow);
    font-weight: var(--pt-peso-medio);
    letter-spacing: var(--pt-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--pt-tinta-fraca);
    padding: var(--pt-esp-2) var(--pt-esp-3);
    border-bottom: 1px solid var(--pt-traco-forte);
  }
  .pt-tabela td {
    padding: var(--pt-esp-3);
    border-bottom: 1px solid var(--pt-traco);
    color: var(--pt-tinta-media);
  }
  .pt-tabela tr:last-child td { border-bottom: 0; }
  .pt-tabela td[data-numero] {
    text-align: right;
    font-family: var(--pt-fonte-mono);
    font-variant-numeric: tabular-nums;
    color: var(--pt-tinta);
  }

  /* Indicador. O valor ausente é um travessão mais uma nota, nunca zero e
     nunca "N/A": zero é um dado, e este não existe. */
  .pt-kpi { display: flex; flex-direction: column; gap: var(--pt-esp-2); }
  .pt-kpi__valor {
    font-family: var(--pt-fonte-titulo);
    font-size: var(--pt-txt-h2);
    font-weight: var(--pt-peso-max);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--pt-tracking-titulo);
    line-height: 1;
    color: var(--pt-tinta);
  }
  .pt-kpi__valor[data-vazio] { color: var(--pt-tinta-fraca); font-weight: var(--pt-peso-normal); }
  .pt-kpi__nota { font-size: var(--pt-txt-meta); color: var(--pt-tinta-fraca); }

  /* Legenda de série. A cor entra como marca ao lado do texto; o texto
     continua vestindo token de tinta, nunca a cor da série. */
  .pt-legenda { display: flex; flex-wrap: wrap; gap: var(--pt-esp-4); }
  .pt-legenda__item {
    display: inline-flex;
    align-items: center;
    gap: var(--pt-esp-2);
    font-size: var(--pt-txt-meta);
    color: var(--pt-tinta-media);
  }
  .pt-legenda__marca {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: none;
    background: var(--pt-serie-1);
  }
  .pt-legenda__item[data-serie="2"] .pt-legenda__marca { background: var(--pt-serie-2); }
  .pt-legenda__item[data-serie="3"] .pt-legenda__marca { background: var(--pt-serie-3); }
  .pt-legenda__item[data-serie="4"] .pt-legenda__marca { background: var(--pt-serie-4); }
  .pt-legenda__item[data-serie="5"] .pt-legenda__marca { background: var(--pt-serie-5); }
  .pt-legenda__item[data-serie="6"] .pt-legenda__marca { background: var(--pt-serie-6); }
  .pt-legenda__item[data-serie="7"] .pt-legenda__marca { background: var(--pt-serie-7); }
  .pt-legenda__item[data-serie="8"] .pt-legenda__marca { background: var(--pt-serie-8); }

  .pt-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--pt-raio-pilula);
    background: var(--pt-superficie-ativa);
    border: 1px solid var(--pt-traco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pt-txt-meta);
    font-weight: var(--pt-peso-forte);
    color: var(--pt-tinta-media);
    flex: none;
    overflow: hidden;
  }
}