/**
 * Componentes — Nós & o Altar
 *
 * Biblioteca completa de componentes de UI.
 * Depende de tokens.css e temas.css.
 *
 * Índice:
 *   01. Reset e base
 *   02. Tipografia
 *   03. Layout e grid
 *   04. Botões
 *   05. Formulários (inputs, select, textarea)
 *   06. Cards
 *   07. Badges e chips
 *   08. Modais
 *   09. Toast
 *   10. Skeleton loading
 *   11. Empty state
 *   12. Navegação (sidebar, topbar, mobile bottom nav)
 *   13. Tabelas (→ cards no mobile)
 *   14. Alertas
 *   15. Dividers e separadores
 *   16. Loaders
 *   17. Tooltips
 *   18. Dropdown
 *   19. Stepper / progresso
 *   20. Avatar
 */

@import './tokens.css';
@import './temas.css';

/* Google Fonts — carregadas com display swap para não bloquear renderização */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* O atributo hidden SEMPRE esconde. O navegador aplica [hidden]{display:none}
   com a menor prioridade possível, e qualquer regra de classe com display
   (form { display: grid }, .aviso { display: flex }…) passa por cima — o
   elemento marcado como escondido aparece. Foi assim que a tela de entrar
   mostrava o formulário de cadastro junto com o de login. */
[hidden] { display: none !important; }

/* ─── 01. RESET E BASE ──────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-ui);
  font-size: var(--texto-base);
  line-height: var(--linha-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--texto-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, video { max-width: 100%; display: block; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--linha-apertada); }

/* Foco visível — acessibilidade sem ser feio */
:focus-visible {
  outline: 2px solid var(--borda-foco);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/* ─── 02. TIPOGRAFIA ────────────────────────────────────────────────────────── */

.display-xl {
  font-family: var(--fonte-display);
  font-size: var(--texto-5xl);
  font-weight: var(--peso-bold);
  line-height: var(--linha-apertada);
  letter-spacing: -0.02em;
}
.display-lg {
  font-family: var(--fonte-display);
  font-size: var(--texto-4xl);
  font-weight: var(--peso-bold);
  line-height: var(--linha-apertada);
  letter-spacing: -0.02em;
}
.display-md {
  font-family: var(--fonte-display);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-semibold);
  line-height: var(--linha-snug);
  letter-spacing: -0.01em;
}
.titulo {
  font-family: var(--fonte-display);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-semibold);
  line-height: var(--linha-snug);
}
.subtitulo {
  font-size: var(--texto-lg);
  font-weight: var(--peso-medio);
  color: var(--texto-soft);
  line-height: var(--linha-relaxed);
}
.rotulo {
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-muted);
}
.caption {
  font-size: var(--texto-sm);
  color: var(--texto-soft);
}
.mono {
  font-family: var(--fonte-mono);
  font-size: 0.875em;
}

/* ─── 03. LAYOUT E GRID ─────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 0 var(--padding-pagina-x);
}
.container-estreito {
  max-width: var(--largura-estreita);
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-6); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--esp-5); }

.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2       { gap: var(--esp-2); }
.gap-3       { gap: var(--esp-3); }
.gap-4       { gap: var(--esp-4); }
.gap-6       { gap: var(--esp-6); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .md\:col-1 { grid-template-columns: 1fr; }
}

/* ─── 04. BOTÕES ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 10px var(--esp-5);
  min-height: 44px;
  border-radius: var(--raio);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition:
    background var(--trans-rapida),
    color var(--trans-rapida),
    border-color var(--trans-rapida),
    transform var(--trans-rapida),
    box-shadow var(--trans-rapida),
    opacity var(--trans-rapida);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow: hidden;
}

/* Estado de loading no botão */
.btn[data-carregando="true"] {
  color: transparent;
  pointer-events: none;
}
.btn[data-carregando="true"]::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

/* Primário */
.btn-primario {
  background: var(--p-500);
  color: var(--p-texto);
  border-color: var(--p-500);
  box-shadow: var(--sombra-primaria);
}
.btn-primario:hover:not(:disabled) {
  background: var(--p-600);
  border-color: var(--p-600);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--p-500) 40%, transparent);
}
.btn-primario:active:not(:disabled) {
  transform: translateY(0);
  background: var(--p-700);
}

/* Secundário */
.btn-secundario {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borda-forte);
  box-shadow: var(--sombra-xs);
}
.btn-secundario:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--p-300);
  transform: translateY(-1px);
}

/* Fantasma */
.btn-fantasma {
  background: transparent;
  color: var(--p-600);
  border-color: transparent;
}
.btn-fantasma:hover:not(:disabled) {
  background: var(--p-100);
  color: var(--p-700);
}

/* Destrutivo */
.btn-destrutivo {
  background: var(--erro-fundo);
  color: var(--erro-texto);
  border-color: color-mix(in srgb, var(--erro) 30%, transparent);
}
.btn-destrutivo:hover:not(:disabled) {
  background: var(--erro);
  color: #fff;
  border-color: var(--erro);
}

/* Tamanhos */
.btn-sm  { padding: 7px var(--esp-4); min-height: 36px; font-size: var(--texto-xs); border-radius: var(--raio-sm); }
.btn-lg  { padding: 14px var(--esp-8); min-height: 52px; font-size: var(--texto-md); border-radius: var(--raio-md); }
.btn-full { width: 100%; }

/* Desabilitado */
.btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
}

/* Botão ícone */
.btn-icone {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--raio);
  background: transparent;
  color: var(--texto-soft);
  border: 1.5px solid transparent;
}
.btn-icone:hover:not(:disabled) {
  background: var(--hover-bg);
  color: var(--texto);
}

/* ─── 05. FORMULÁRIOS ───────────────────────────────────────────────────────── */

.campo {
  display: grid;
  gap: var(--esp-2);
}

.campo-label {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  color: var(--texto-soft);
}

.campo-dica {
  font-size: var(--texto-xs);
  color: var(--texto-muted);
  line-height: var(--linha-relaxed);
}

.campo-erro-texto {
  font-size: var(--texto-xs);
  color: var(--erro-texto);
  font-weight: var(--peso-medio);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--esp-4);
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font-size: var(--texto-base);
  transition:
    border-color var(--trans-rapida),
    box-shadow var(--trans-rapida),
    background var(--trans-rapida);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder,
.textarea::placeholder { color: var(--texto-muted); }

.input:hover:not(:disabled):not(:focus),
.select:hover:not(:disabled):not(:focus),
.textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--borda-forte);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--p-500);
  box-shadow: 0 0 0 3px var(--foco-ring);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--superficie-2);
}

/* Estado de erro */
.campo[data-erro="true"] .input,
.campo[data-erro="true"] .select,
.campo[data-erro="true"] .textarea {
  border-color: var(--erro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--erro) 18%, transparent);
}

/* Textarea */
.textarea {
  min-height: 100px;
  resize: vertical;
  line-height: var(--linha-relaxed);
}

/* Select — seta customizada */
.select-wrapper {
  position: relative;
}
.select-wrapper::after {
  content: '▾';
  position: absolute;
  right: var(--esp-4);
  top: 50%;
  translate: 0 -50%;
  color: var(--texto-muted);
  pointer-events: none;
  font-size: 12px;
}
.select-wrapper .select { padding-right: var(--esp-10); }

/* Switch toggle */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  cursor: pointer;
  user-select: none;
}
/* A caixa fica invisível, mas NÃO some: com display:none ela não recebe foco
   de teclado nem é anunciada pelo leitor de tela, e a chave vira coisa de mouse. */
.switch input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: 0; pointer-events: none;
}
.switch input:focus-visible + .switch-trilho {
  outline: 2px solid var(--p-500); outline-offset: 2px;
}
.switch-trilho {
  width: 44px;
  height: 24px;
  background: var(--n-300);
  border-radius: var(--raio-full);
  position: relative;
  transition: background var(--trans-rapida);
  flex-shrink: 0;
}
.switch-trilho::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--trans-rapida);
  box-shadow: var(--sombra-sm);
}
.switch input:checked + .switch-trilho { background: var(--p-500); }
.switch input:checked + .switch-trilho::after { transform: translateX(20px); }

/* ─── 06. CARDS ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
  transition:
    box-shadow var(--trans),
    border-color var(--trans),
    transform var(--trans);
}

.card-hover:hover {
  box-shadow: var(--sombra-md);
  border-color: var(--p-200);
  transform: translateY(-2px);
}

.card-corpo {
  padding: var(--esp-6);
}

.card-header {
  padding: var(--esp-5) var(--esp-6);
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
}

.card-footer {
  padding: var(--esp-4) var(--esp-6);
  border-top: 1px solid var(--borda);
  background: var(--superficie-2);
}

/* Card métrica (dashboard) */
.card-metrica {
  padding: var(--esp-6);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.card-metrica .rotulo { color: var(--texto-muted); }
.card-metrica .valor {
  font-family: var(--fonte-mono);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-bold);
  color: var(--texto);
  line-height: 1;
}
.card-metrica .variacao {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
}
.card-metrica .variacao.positivo { color: var(--sucesso); }
.card-metrica .variacao.negativo { color: var(--erro); }

/* ─── 07. BADGES E CHIPS ────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 3px var(--esp-3);
  border-radius: var(--raio-full);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Ponto indicador */
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge.sem-ponto::before { display: none; }

/* Variantes semânticas */
.badge-neutro    { background: var(--superficie-2); color: var(--texto-soft); }
.badge-primario  { background: var(--p-100); color: var(--p-700); }
.badge-sucesso   { background: var(--sucesso-fundo); color: var(--sucesso-texto); }
.badge-erro      { background: var(--erro-fundo); color: var(--erro-texto); }
.badge-atencao   { background: var(--atencao-fundo); color: var(--atencao-texto); }
.badge-info      { background: var(--info-fundo); color: var(--info-texto); }

/* Status específicos */
.badge-publicado   { background: var(--sucesso-fundo); color: var(--sucesso-texto); }
.badge-rascunho    { background: var(--superficie-2); color: var(--texto-soft); }
.badge-em_analise  { background: var(--atencao-fundo); color: var(--atencao-texto); }
.badge-suspenso    { background: var(--erro-fundo); color: var(--erro-texto); }
.badge-verificado  { background: var(--info-fundo); color: var(--info-texto); }

/* ─── 08. MODAIS ────────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--esp-4);
  animation: fadeIn var(--trans-rapida) ease forwards;
}

.modal {
  background: var(--superficie);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-xl);
  width: min(560px, 100%);
  max-height: calc(100dvh - var(--esp-8));
  display: flex;
  flex-direction: column;
  animation: subirModal var(--trans-suave) forwards;
  border: 1px solid var(--borda);
  overflow: hidden;
}

.modal-grande { width: min(760px, 100%); }
.modal-enorme { width: min(1000px, 100%); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-6);
  border-bottom: 1px solid var(--borda);
  flex-shrink: 0;
}

.modal-titulo {
  font-family: var(--fonte-display);
  font-size: var(--texto-xl);
  font-weight: var(--peso-semibold);
  line-height: var(--linha-snug);
}

.modal-fechar {
  width: 36px;
  height: 36px;
  border-radius: var(--raio);
  color: var(--texto-muted);
  display: grid;
  place-items: center;
  transition: background var(--trans-rapida), color var(--trans-rapida);
  flex-shrink: 0;
}
.modal-fechar:hover { background: var(--hover-bg); color: var(--texto); }

.modal-corpo {
  padding: var(--esp-6);
  overflow-y: auto;
  flex: 1;
  overscroll-behavior: contain;
}

.modal-footer {
  padding: var(--esp-4) var(--esp-6);
  border-top: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-3);
  flex-shrink: 0;
  background: var(--superficie-2);
}

/* Mobile: modal em full-screen */
@media (max-width: 480px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--raio-xl) var(--raio-xl) 0 0;
    animation: subirDrawer var(--trans-suave) forwards;
  }
  .modal-overlay.modal-centro { align-items: center; padding: var(--esp-4); }
  .modal-overlay.modal-centro .modal { border-radius: var(--raio-xl); }
}

/* ─── 09. TOAST ─────────────────────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  bottom: calc(var(--altura-nav-mobile) + var(--esp-4));
  right: var(--esp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  pointer-events: none;
  max-width: min(380px, calc(100vw - var(--esp-8)));
}

@media (min-width: 769px) {
  .toast-container { bottom: var(--esp-6); right: var(--esp-6); }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  background: var(--n-900);
  color: var(--n-50);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-lg);
  font-size: var(--texto-sm);
  line-height: var(--linha-relaxed);
  pointer-events: auto;
  animation: entrarToast var(--trans-suave) forwards;
  border-left: 3px solid var(--p-500);
  max-width: 100%;
}

.toast[data-tipo="sucesso"] { border-left-color: var(--sucesso); }
.toast[data-tipo="erro"]    { border-left-color: var(--erro); }
.toast[data-tipo="atencao"] { border-left-color: var(--atencao); }

.toast.saindo { animation: sairToast var(--trans) forwards; }

.toast-icone { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.toast-texto { flex: 1; }
.toast-fechar {
  flex-shrink: 0;
  color: var(--n-400);
  padding: 2px;
  border-radius: var(--raio-sm);
  line-height: 1;
  transition: color var(--trans-rapida);
}
.toast-fechar:hover { color: var(--n-50); }

/* ─── 10. SKELETON LOADING ──────────────────────────────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--superficie-2) 25%,
    var(--superficie-3) 50%,
    var(--superficie-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--raio);
  display: block;
}

.skeleton-texto  { height: 14px; width: 80%; border-radius: var(--raio-sm); }
.skeleton-titulo { height: 24px; width: 55%; border-radius: var(--raio-sm); }
.skeleton-card   { height: 120px; border-radius: var(--raio-lg); }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-btn    { height: 44px; border-radius: var(--raio); }

/* ─── 11. EMPTY STATE ───────────────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
  padding: var(--esp-16) var(--esp-8);
  text-align: center;
}

.empty-state-icone {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--p-100);
  color: var(--p-500);
  border-radius: var(--raio-xl);
  font-size: 28px;
}

.empty-state h3 {
  font-family: var(--fonte-display);
  font-size: var(--texto-xl);
  font-weight: var(--peso-semibold);
  color: var(--texto);
}

.empty-state p {
  font-size: var(--texto-sm);
  color: var(--texto-soft);
  max-width: 36ch;
  line-height: var(--linha-relaxed);
}

/* ─── 12. NAVEGAÇÃO ─────────────────────────────────────────────────────────── */

/* Topbar */
.topbar {
  height: var(--altura-topbar);
  padding: 0 var(--padding-pagina-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Marca / logo */
.marca {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  font-family: var(--fonte-display);
  font-size: var(--texto-lg);
  font-weight: var(--peso-semibold);
  color: var(--texto);
  text-decoration: none;
  flex-shrink: 0;
}
.marca-selo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--p-400);
  color: var(--p-500);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-family: var(--fonte-display);
  flex-shrink: 0;
}
.marca-texto { color: var(--texto); }

/* Links da topbar */
.topo-links {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
}
.topo-link {
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio);
  color: var(--texto-soft);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  transition: background var(--trans-rapida), color var(--trans-rapida);
  text-decoration: none;
}
.topo-link:hover { background: var(--hover-bg); color: var(--texto); text-decoration: none; }
.topo-link.ativo { background: var(--p-100); color: var(--p-700); }

/* Sidebar da área interna */
.sidebar {
  width: var(--largura-sidebar);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--n-900);
  color: var(--n-100);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--z-sidebar);
  transition: transform var(--trans-suave);
}

[data-modo="dark"] .sidebar,
[data-modo="auto"] .sidebar { background: var(--n-950); }

.sidebar-marca {
  padding: var(--esp-6) var(--esp-5) var(--esp-5);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sidebar-marca .marca { color: var(--n-100); }
.sidebar-marca .marca-texto { color: var(--n-100); }
.sidebar-marca .marca-selo { border-color: var(--p-400); color: var(--p-400); }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--esp-4) var(--esp-3);
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.sidebar-grupo {
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  padding: var(--esp-5) var(--esp-3) var(--esp-2);
}
.sidebar-grupo:first-child { padding-top: var(--esp-2); }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 10px var(--esp-3);
  border-radius: var(--raio);
  color: rgba(255,255,255,0.6);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background var(--trans-rapida), color var(--trans-rapida);
  position: relative;
}
.sidebar-link:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); text-decoration: none; }
.sidebar-link.ativo {
  background: color-mix(in srgb, var(--p-500) 20%, transparent);
  color: var(--p-300);
  font-weight: var(--peso-semibold);
}
.sidebar-link.ativo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 3px;
  height: 60%;
  background: var(--p-400);
  border-radius: 0 2px 2px 0;
}

.sidebar-icone {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  opacity: 0.7;
}
.sidebar-link.ativo .sidebar-icone { opacity: 1; color: var(--p-300); }

/* Badge de contagem na nav */
.nav-badge {
  margin-left: auto;
  background: var(--p-500);
  color: var(--p-texto);
  font-size: 10px;
  font-weight: var(--peso-bold);
  min-width: 18px;
  height: 18px;
  border-radius: var(--raio-full);
  display: grid;
  place-items: center;
  padding: 0 5px;
}

.sidebar-footer {
  padding: var(--esp-4) var(--esp-5);
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

/* Shell da área interna (sidebar + conteúdo) */
.app-shell {
  display: grid;
  grid-template-columns: var(--largura-sidebar) 1fr;
  min-height: 100vh;
}

.app-conteudo {
  padding-left: var(--largura-sidebar);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
  padding: var(--esp-8) var(--padding-pagina-x);
  max-width: 100%;
}

/* Navegação inferior mobile */
.nav-mobile {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--altura-nav-mobile);
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  z-index: var(--z-topbar);
  padding: 0 var(--esp-2);
  align-items: stretch;
}

.nav-mobile-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--texto-muted);
  font-size: 10px;
  font-weight: var(--peso-medio);
  text-decoration: none;
  padding: var(--esp-2) var(--esp-1);
  border-radius: var(--raio);
  transition: color var(--trans-rapida), background var(--trans-rapida);
  position: relative;
}
.nav-mobile-item.ativo { color: var(--p-500); }
.nav-mobile-item:hover { background: var(--hover-bg); text-decoration: none; }
.nav-mobile-item svg, .nav-mobile-icone { font-size: 22px; }

/* Ponto de notificação */
.nav-mobile-item .ponto {
  position: absolute;
  top: var(--esp-2);
  right: calc(50% - 12px);
  width: 7px;
  height: 7px;
  background: var(--p-500);
  border-radius: 50%;
  border: 2px solid var(--superficie);
}

/* Botão hambúrguer (mobile) */
.btn-menu {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--raio);
  color: var(--texto-soft);
  border: 1px solid var(--borda);
  align-items: center;
  justify-content: center;
}

/* Overlay da sidebar no mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: calc(var(--z-sidebar) - 1);
  animation: fadeIn var(--trans-rapida) ease;
}

@media (max-width: 1024px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-conteudo { padding-left: 0; padding-bottom: var(--altura-nav-mobile); }

  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.aberta {
    transform: translateX(0);
    box-shadow: var(--sombra-xl);
  }
  .sidebar-overlay.visivel { display: block; }

  .nav-mobile { display: flex; }
  .btn-menu { display: flex; }

  .topbar { padding: 0 var(--esp-4); }
  .app-main { padding: var(--esp-5) var(--esp-4); }
}

/* ─── 13. TABELAS ───────────────────────────────────────────────────────────── */

.tabela-wrapper { overflow-x: auto; border-radius: var(--raio-lg); border: 1px solid var(--borda); }

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.tabela th {
  padding: var(--esp-3) var(--esp-5);
  text-align: left;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-muted);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

.tabela td {
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
  vertical-align: middle;
}

.tabela tr:last-child td { border-bottom: none; }
.tabela tr:hover td { background: var(--hover-bg); }

/* Tabela → cards no mobile */
@media (max-width: 640px) {
  .tabela-wrapper { border: none; border-radius: 0; overflow: visible; }
  .tabela thead { display: none; }
  .tabela tbody { display: flex; flex-direction: column; gap: var(--esp-3); }
  .tabela tr {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    padding: var(--esp-4);
    gap: var(--esp-2);
    box-shadow: var(--sombra-sm);
  }
  .tabela td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border: none;
    font-size: var(--texto-sm);
  }
  .tabela td::before {
    content: attr(data-rotulo);
    font-size: var(--texto-xs);
    font-weight: var(--peso-semibold);
    color: var(--texto-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* ─── 14. ALERTAS ───────────────────────────────────────────────────────────── */

.alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-md);
  font-size: var(--texto-sm);
  line-height: var(--linha-relaxed);
  border-left: 3px solid currentColor;
}
.alerta-icone { flex-shrink: 0; margin-top: 1px; }

.alerta-info     { background: var(--info-fundo); color: var(--info-texto); }
.alerta-sucesso  { background: var(--sucesso-fundo); color: var(--sucesso-texto); }
.alerta-atencao  { background: var(--atencao-fundo); color: var(--atencao-texto); }
.alerta-erro     { background: var(--erro-fundo); color: var(--erro-texto); }
.alerta-primario { background: var(--p-100); color: var(--p-700); border-left-color: var(--p-400); }

/* ─── 15. DIVISORES ─────────────────────────────────────────────────────────── */

.divisor {
  height: 1px;
  background: var(--borda);
  border: none;
  margin: 0;
}

.divisor-texto {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  color: var(--texto-muted);
  font-size: var(--texto-sm);
}
.divisor-texto::before,
.divisor-texto::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--borda);
}

/* ─── 16. LOADERS ───────────────────────────────────────────────────────────── */

.loader {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--borda);
  border-top-color: var(--p-500);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
.loader-sm { width: 14px; height: 14px; border-width: 1.5px; }
.loader-lg { width: 32px; height: 32px; border-width: 3px; }

.pagina-carregando {
  display: grid;
  place-items: center;
  min-height: 300px;
  gap: var(--esp-4);
  color: var(--texto-soft);
}

/* ─── 17. TOOLTIP ───────────────────────────────────────────────────────────── */

[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  background: var(--n-800);
  color: var(--n-50);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  padding: 5px var(--esp-3);
  border-radius: var(--raio-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--trans-rapida);
  z-index: var(--z-tooltip);
}
[data-tooltip]:hover::after { opacity: 1; }

/* ─── 18. DROPDOWN ──────────────────────────────────────────────────────────── */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--esp-2));
  right: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-md);
  min-width: 180px;
  z-index: var(--z-dropdown);
  overflow: hidden;
  animation: fadeSlideDown var(--trans-rapida) ease;
}
.dropdown-menu[hidden] { display: none; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 10px var(--esp-4);
  font-size: var(--texto-sm);
  color: var(--texto);
  cursor: pointer;
  transition: background var(--trans-rapida);
  text-decoration: none;
  border: none;
  width: 100%;
  background: none;
  text-align: left;
}
.dropdown-item:hover { background: var(--hover-bg); text-decoration: none; }
.dropdown-item.destrutivo { color: var(--erro); }
.dropdown-item.destrutivo:hover { background: var(--erro-fundo); }
.dropdown-divisor { height: 1px; background: var(--borda); margin: var(--esp-1) 0; }

/* ─── 19. BARRA DE PROGRESSO ────────────────────────────────────────────────── */

.progresso {
  height: 6px;
  background: var(--superficie-2);
  border-radius: var(--raio-full);
  overflow: hidden;
}

.progresso-barra {
  height: 100%;
  background: var(--p-500);
  border-radius: var(--raio-full);
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  min-width: 3px;
}

.progresso-barra.sucesso { background: var(--sucesso); }
.progresso-barra.erro    { background: var(--erro); }
.progresso-barra.atencao { background: var(--atencao); }

.progresso-lg { height: 10px; }
.progresso-xl { height: 16px; border-radius: var(--raio); }

/* ─── 20. AVATAR ────────────────────────────────────────────────────────────── */

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--p-200);
  color: var(--p-700);
  display: grid;
  place-items: center;
  font-weight: var(--peso-semibold);
  font-size: var(--texto-sm);
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--borda);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 56px; height: 56px; font-size: var(--texto-md); }
.avatar-xl { width: 80px; height: 80px; font-size: var(--texto-xl); }

/* ─── ANIMAÇÕES ─────────────────────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes subirModal {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes subirDrawer {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes entrarToast {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes sairToast {
  from { opacity: 1; transform: translateX(0); max-height: 100px; }
  to   { opacity: 0; transform: translateX(20px); max-height: 0; padding: 0; margin: 0; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

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

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ─── UTILITÁRIOS GERAIS ────────────────────────────────────────────────────── */

.oculto   { display: none !important; }
.invisivel { visibility: hidden; }
.truncar  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quebrar  { overflow-wrap: break-word; word-break: break-word; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Margem de respiro na parte inferior (evitar nav mobile) */
.espaco-nav { height: var(--altura-nav-mobile); }
@media (min-width: 1025px) { .espaco-nav { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   IDENTIDADE — "Matrimonial Luxury & Planning System" (telas do Stitch)

   As cores, fontes, raios e sombras vêm dos tokens. Esta seção só aplica os
   detalhes de acabamento que o guia descreve e que não cabem num token:
   o botão secundário com borda dourada, o foco com aura dourada, o filete de
   ouro nos cartões de destaque, os rótulos de catálogo em maiúsculas.
   Fica no fim de propósito: vence as regras genéricas acima sem !important.
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--fonte-ui);
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .titulo, .display-lg, .display-md, .display-xl, .card-titulo, .modal-titulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Rótulo de catálogo: maiúsculas espaçadas, como nas fichas de papelaria */
.rotulo, .sidebar-grupo, .tabela th, .card-metrica .rotulo {
  font-family: var(--fonte-ui);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Foco: anel duplo — contorno bordô por dentro, aura dourada por fora */
.btn:focus-visible,
.input:focus, .select:focus, .textarea:focus,
a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--foco-ring);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--p-500); }

.input, .select, .textarea {
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  min-height: 44px;
}

/* Botões */
.btn { border-radius: var(--raio-sm); font-weight: 600; letter-spacing: 0.01em; }
.btn-primario { box-shadow: none; }
.btn-primario:hover:not(:disabled) { box-shadow: var(--sombra-md); }
/* Secundário "de luxo": texto bordô, filete dourado, fundo blush no hover */
.btn-secundario {
  background: transparent;
  color: var(--p-500);
  border: 1px solid var(--ouro-500);
}
.btn-secundario:hover:not(:disabled) { background: var(--p-200); color: var(--p-600); border-color: var(--ouro-500); }
.btn-fantasma { color: var(--texto-soft); }
.btn-fantasma:hover:not(:disabled) { color: var(--p-500); background: color-mix(in srgb, var(--p-200) 50%, transparent); }

/* Cartões: branco sobre off-white, borda finíssima; ao passar o mouse a borda
   vira dourada e o cartão sobe um pouco */
.card { border-radius: var(--raio-md); }
.card-hover:hover { border-color: var(--ouro-500); box-shadow: var(--sombra-md); transform: translateY(-2px); }
/* Destaque (fornecedor em evidência, contrato importante): filete de ouro no topo */
.card-destaque, .admin-metricas .destaque { position: relative; border-top: 0; }
.card-destaque::before, .admin-metricas .destaque::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--filete-ouro);
}

/* KPI: número grande em algarismos tabulares, na fonte da interface */
.card-metrica .valor {
  font-family: var(--fonte-ui);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  letter-spacing: -0.01em;
}

/* Barra de progresso: bordô sobre trilho blush */
.progresso { background: var(--p-200); }
.progresso-barra { background: var(--p-500); }

/* Selos em pílula — só para status, verificação e contagem */
.badge { border-radius: var(--raio-full); font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.04em; padding: 2px 10px; }
.badge-sucesso, .badge-publicado { background: #EAF5EA; color: #1B6E32; border: 1px solid rgba(27, 110, 50, 0.2); }
.badge-atencao, .badge-em, .badge-rascunho { background: #FFF7E6; color: #8C5800; border: 1px solid rgba(197, 155, 39, 0.3); }
.badge-erro, .badge-suspenso { background: #FDE8E9; color: #800020; border: 1px solid rgba(128, 0, 32, 0.2); }
.badge-primario { background: var(--p-200); color: var(--p-600); border: 1px solid rgba(128, 0, 32, 0.15); }
.badge-verificado { background: #FFF7E6; color: #775A00; border: 1px solid rgba(197, 155, 39, 0.4); }

/* Marca: selo com aro dourado */
.marca-selo { border: 1px solid var(--ouro-500); color: var(--p-500); }
.marca-texto { font-family: var(--fonte-display); }

/* Barra lateral: item ativo com fio bordô à esquerda */
.sidebar-link.ativo {
  background: var(--superficie);
  color: var(--p-500);
  box-shadow: inset 2px 0 0 var(--p-500);
  font-weight: 600;
}

/* Janelas sobre vidro fosco claro */
.modal-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal { border-radius: var(--raio-md); box-shadow: var(--sombra-lg); }

/* Caixas de marcar: quadradinho de 18px com borda bordô */
input[type="checkbox"], input[type="radio"] { accent-color: var(--p-500); width: 18px; height: 18px; }

/* Imagem de fornecedor: moldura de museu — raio de 8px com borda interna */
.moldura { border-radius: var(--raio-md); box-shadow: inset 0 0 0 1px rgba(35, 31, 32, 0.08); overflow: hidden; }

dialog.modal-overlay:not([open]) { display: none !important; }