/* ---------------------------------------------------------------------------
   Arquivo dos Instantes — base compartilhada: variaveis, reset, tipografia.

   ESTE e o UNICO arquivo do projeto que pode conter hex literal de cor.
   Em publico.css, admin.css e qualquer componente, use var(--cor-*).
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Fontes self-hospedadas.

   PROIBIDO o CDN do Google Fonts: ele envia o IP do visitante para fora do
   pais, o que conflita com a Politica de Privacidade LGPD publicada pela
   cliente. Mesmo motivo pelo qual Alpine e Axios ficam em wwwroot/js/vendor/.

   TODO: colocar os .woff2 em wwwroot/fonts/ e descomentar. Ate la, o fallback
   serif abaixo segura a diagramacao sem quebrar nada.
   --------------------------------------------------------------------------- */

/*
@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  --cor-fundo: #ede5db;
  --cor-fundo-alt: #dcd5cc;
  --cor-texto: #1a1a1a;
  --cor-acento: #d9622b;
  --cor-branco: #ffffff;

  --fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --fonte-corpo: "Source Serif 4", "Iowan Old Style", Georgia, serif;

  --largura-leitura: 68ch;
  /* Largura das telas de coluna unica (folhas de leitura, portfolio, formularios).
     Fica entre a largura de leitura e a do container: cards com mais presenca,
     ainda com margem lateral. O texto corrido continua limitado por
     --largura-leitura nos paragrafos. */
  --largura-conteudo: 66rem;
  --largura-container: 72rem;

  --espaco-1: 0.5rem;
  --espaco-2: 1rem;
  --espaco-3: 2rem;
  --espaco-4: 4rem;

  --raio: 2px;
  --raio-md: 6px;
  --raio-lg: 14px;
  --transicao: 150ms ease;

  /* Profundidade. rgb(0 0 0 / a) nao e hex literal de cor — e sombra neutra. */
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.05), 0 1px 3px rgb(0 0 0 / 0.06);
  --sombra-2: 0 6px 18px rgb(0 0 0 / 0.1);
  --sombra-3: 0 16px 44px rgb(0 0 0 / 0.2);

  --altura-topo: 3.5rem;

  /* Estado de erro de campo. O "vermelho" do projeto e o terracota da marca
     (a paleta nao tem um vermelho proprio); o anel usa color-mix para nao
     escrever um literal de cor. */
  --anel-erro: 0 0 0 3px color-mix(in srgb, var(--cor-acento) 22%, transparent);

  /* Cores semanticas dos toasts (fora da paleta editorial, a pedido): fundo
     solido + texto branco. O amarelo do aviso e um ambar escuro para o branco
     ficar legivel sobre ele. */
  --toast-sucesso: #2e7d32;
  --toast-aviso: #c8900d;
  --toast-erro: #c62828;
  --toast-info: #1565c0;
}

/* --------------------------------------------------------------------------
   Reset enxuto
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img,
picture,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--espaco-2);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
}

h3 {
  font-size: 1.375rem;
}

p {
  margin: 0 0 var(--espaco-2);
  max-width: var(--largura-leitura);
}

a {
  color: var(--cor-acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration: none;
}

blockquote {
  margin: var(--espaco-3) 0;
  padding-left: var(--espaco-2);
  border-left: 2px solid var(--cor-acento);
  font-style: italic;
}

hr {
  border: 0;
  border-top: 1px solid var(--cor-fundo-alt);
  margin: var(--espaco-3) 0;
}

/* --------------------------------------------------------------------------
   Utilitarios compartilhados
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: var(--espaco-2);
}

/* Evita o flash de conteudo controlado por x-show antes de o Alpine assumir.
   O Alpine remove o atributo x-cloak assim que inicializa. */
[x-cloak] {
  display: none !important;
}

/* Visivel para leitor de tela, invisivel na tela. */
.apenas-leitor-tela {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Mensagens do sistema.

   Renderizadas SEMPRE pelo Util.mensagem, no container unico #mensagens que os
   dois layouts declaram. Mensagem vinda do servidor (APP_MENSAGENS) e mensagem
   gerada no cliente usam estas mesmas classes — e o que garante aparencia
   identica nos dois casos.
   -------------------------------------------------------------------------- */

/* Pilha de toasts: fixa no canto superior direito, sobre todo o resto. O
   container nao intercepta cliques (pointer-events:none); cada toast reativa. */
.mensagens {
  position: fixed;
  top: calc(var(--altura-topo) + 0.75rem);
  right: 0.75rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  width: min(24rem, calc(100vw - 1.5rem));
  pointer-events: none;
}

.mensagem {
  pointer-events: auto;
  position: relative;
  padding: var(--espaco-2) var(--espaco-3) var(--espaco-2) var(--espaco-2);
  color: var(--cor-branco);
  background-color: var(--toast-info);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-2);
  animation: toast-entra 180ms ease;
}

@keyframes toast-entra {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fundo solido por tipo, sempre com texto branco. */
.mensagem--sucesso { background-color: var(--toast-sucesso); }
.mensagem--erro    { background-color: var(--toast-erro); }
.mensagem--aviso   { background-color: var(--toast-aviso); }
.mensagem--info    { background-color: var(--toast-info); }

.mensagem__texto {
  font-weight: 600;
}

.mensagem__lista {
  margin: var(--espaco-1) 0 0;
  padding-left: var(--espaco-2);
  list-style: disc;
  font-weight: 400;
}

.mensagem__fechar {
  position: absolute;
  top: var(--espaco-1);
  right: var(--espaco-1);
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--espaco-1);
}

/* --------------------------------------------------------------------------
   Modal de confirmacao — construido por Util.mensagem.confirmar(). Substitui o
   window.confirm nativo. Compartilhado (site e admin), por isso vive aqui.
   -------------------------------------------------------------------------- */

.confirmacao {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-2);
}

.confirmacao__fundo {
  position: absolute;
  inset: 0;
  background-color: var(--cor-texto);
  opacity: 0.45;
}

.confirmacao__caixa {
  position: relative;
  width: min(28rem, 100%);
  background-color: var(--cor-branco);
  color: var(--cor-texto);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-3);
  padding: var(--espaco-3);
  animation: toast-entra 150ms ease;
}

.confirmacao__titulo {
  margin: 0 0 var(--espaco-1);
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
}

.confirmacao__texto {
  margin: 0 0 var(--espaco-3);
  max-width: none;
}

.confirmacao__acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--espaco-1);
}

.confirmacao__botao {
  padding: 0.5rem 1rem;
  border: 1px solid var(--cor-acento);
  border-radius: var(--raio-md);
  background-color: var(--cor-acento);
  color: var(--cor-branco);
  font-weight: 600;
  cursor: pointer;
}

.confirmacao__botao--secundario {
  background-color: var(--cor-branco);
  color: var(--cor-texto);
  border-color: var(--cor-fundo-alt);
  font-weight: 500;
}

.confirmacao__botao--perigo {
  background-color: var(--toast-erro);
  border-color: var(--toast-erro);
}

/* --------------------------------------------------------------------------
   Bloqueio global de carregamento — spinner que trava a tela enquanto o
   servidor processa uma gravacao (salvar, excluir, publicar). Mostrado e
   escondido pelo Util.http, contando as requisicoes em andamento. Uma unica
   barreira para todo o projeto.
   -------------------------------------------------------------------------- */

.bloqueio-global {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--cor-texto) 22%, transparent);
}

/* display:flex acima sobrepoe o [hidden]{display:none} do navegador — sem esta
   regra o overlay NUNCA some, mesmo com hidden=true. */
.bloqueio-global[hidden] {
  display: none;
}

.bloqueio-global__caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-3) var(--espaco-4);
  background-color: var(--cor-branco);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-3);
}

.bloqueio-global__spinner {
  width: 2.75rem;
  height: 2.75rem;
  border: 4px solid var(--cor-fundo-alt);
  border-top-color: var(--cor-acento);
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

.bloqueio-global__texto {
  font-size: 0.9375rem;
  color: var(--cor-texto);
}

/* Spinner pequeno, para carregamentos que NAO travam a tela (buscas, listagens).
   Reaproveita a animacao 'girar' do bloqueio global. */
.spinner-inline {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  border: 3px solid var(--cor-fundo-alt);
  border-top-color: var(--cor-acento);
  border-radius: 50%;
  animation: girar 700ms linear infinite;
  vertical-align: -0.2em;
}

.carregando-linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
}

/* Erro junto ao campo, escrito por Util.mensagem.campo().
   Nao usamos jquery-validation: nao existe asp-validation-for no projeto. */
.erro-campo {
  color: var(--cor-acento);
  font-size: 0.9375rem;
  margin-top: var(--espaco-1);
}

/* Campo com erro: borda terracota + anel. Vale para qualquer controle de
   formulario do projeto (o admin reforca em admin.css). */
[aria-invalid="true"] {
  border-color: var(--cor-acento);
  box-shadow: var(--anel-erro);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}