/* =============================================================================
   Come Aí — tema.css : identidade visual central (design system)
   -----------------------------------------------------------------------------
   Fonte unica da verdade do visual (analogo ao prompts.py da IA): muda a marca
   em UM lugar e vale para todas as telas (chat, restaurante, login, painel).
   Estetica: xilogravura/cordel nordestino -- creme terroso, contornos marrom
   grossos e sombra "carimbo" deslocada, tipografia de titulo pesada (slab).
   Paleta extraida do logo do "Come Ai".
   ============================================================================= */

:root {
  /* Paleta oficial do Guia Visual (CLAUDE.md, secao "Guia Visual"): tons mais profundos e
     sobrios que a paleta original do logo — direcao editorial adotada em 2026-07-20. */
  --creme:        #F2E5CC;  /* fundo/base */
  --creme-claro:  #FBF4E4;  /* superficie de cartao (creme mais claro) */
  --marrom:       #1F1310;  /* texto/titulos principais e contornos */
  --cinza:        #4A4A4A;  /* texto de apoio/legendas (neutro do guia) */
  --dourado:      #B8791A;  /* destaques, acoes, hairlines */
  --terracota:    #B0472B;  /* subtitulos, enfase secundaria, links de texto */

  /* Papeis semanticos -- os NOMES que as paginas ja consomem em var(--...) */
  --bg:           var(--creme);
  --card:         var(--creme-claro);
  --texto:        var(--marrom);
  --suave:        var(--cinza);
  --acento:       var(--dourado);      /* acao/botao */
  --acento-2:     var(--terracota);    /* link de texto / destaque 2 (contraste AA em texto pequeno) */
  --acento-suave: #E9D9B9;             /* fundo de chip/tag (dourado bem claro) */
  --borda:        #DBC6A0;             /* linhas suaves terrosas */
  --borda-forte:  var(--marrom);       /* contorno de gravura */
  --estrela:      var(--dourado);      /* estrelas de avaliacao */
  --zebra:        #F3E9D0;             /* linha alternada de tabela (creme suave do guia) */

  /* Assinaturas visuais reutilizaveis */
  --sombra-bloco: 3px 3px 0 var(--marrom);  /* offset "carimbo" de xilogravura (acoes/marca) */
  /* Profundidade ambiente sutil para cartoes (redesign): moderno sem perder o traco de gravura.
     Convive com a sombra-bloco -- esta fica reservada a botoes/marca; cartoes usam a ambiente. */
  --sombra-card: 0 12px 30px -14px rgba(46, 29, 16, .28);
  --raio: 16px;       /* cartoes */
  --raio-sm: 12px;    /* botoes, inputs */
  --raio-pill: 999px; /* chips, tags, botoes-pilula */
  --transicao: .18s ease;  /* duracao/curva padrao das micro-interacoes */
  /* Slab serif robusto p/ titulos (cordel), com fallbacks de sistema -- sem web font */
  --fonte-titulo: "Rockwell", "Bookman Old Style", "Roboto Slab", Georgia, serif;
  --fonte-corpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Modo escuro: mesma identidade em tons noturnos (marrom profundo + creme). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #1E1206;
    --card:         #2A1B0E;
    --texto:        #F2E5CC;
    --suave:        #B8AEA3;  /* apoio neutro legivel no escuro (par do --cinza do guia) */
    --acento:       #D29A3A;  /* dourado do guia clareado p/ contraste no fundo escuro */
    --acento-2:     #D2734C;  /* terracota do guia clareada idem */
    --acento-suave: #3A2A16;
    --borda:        #5C4526;
    --borda-forte:  #E6D2A8;
    --estrela:      #D29A3A;
    --zebra:        #241708;  /* linha alternada de tabela no escuro */
    --sombra-bloco: 3px 3px 0 #000;
    --sombra-card:  0 14px 34px -14px rgba(0, 0, 0, .62);  /* sombra ambiente mais densa no escuro */
  }
}

/* Titulos em slab pesado (cordel). As paginas so definem tamanho/margem, entao a
   familia e o peso vem daqui e valem em todo o app. */
h1, h2, h3, .titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  letter-spacing: .01em;
}

/* Lockup da marca (logo + textos) reutilizavel nos cabecalhos. */
.marca { display: flex; align-items: center; gap: 12px; }
.marca .logo {
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  border: 2px solid var(--borda-forte);
  box-shadow: var(--sombra-bloco);
  background: var(--creme);   /* medalhao: garante fundo claro atras do emblema tb no dark */
}
.marca .nome {
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.3rem;
  color: var(--texto); line-height: 1; letter-spacing: .02em;
}
.marca .tagline { color: var(--suave); font-size: .82rem; margin-top: 2px; }

/* Botao no estilo gravura: dourado, texto/contorno marrom e sombra carimbo, com
   "prensa" ao clicar. Classe utilitaria para quem quiser reusar. */
.btn-cordel {
  background: var(--acento); color: var(--marrom);
  border: 2px solid var(--borda-forte); border-radius: var(--raio-sm);
  box-shadow: var(--sombra-bloco);
  font-weight: 800; text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
  transition: filter var(--transicao), transform .12s, box-shadow .12s;
}
.btn-cordel:hover { filter: brightness(1.05); }
.btn-cordel:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--marrom); }
.btn-cordel:disabled { opacity: .55; cursor: default; box-shadow: none; transform: none; filter: none; }

/* Foco visível consistente em todo o app (acessibilidade): contorno terracota destacado.
   Só no foco por teclado (:focus-visible) para não poluir o clique com mouse. */
:focus-visible { outline: 3px solid var(--acento-2); outline-offset: 2px; border-radius: 2px; }

/* ── Padrões editoriais do Guia Visual (CLAUDE.md) ──────────────────────────── */

/* Hairline dourada: divisória fina entre seções — usar com parcimônia. */
.hairline { border: 0; border-top: 1px solid var(--acento); opacity: .55; margin: 20px 0; }

/* Subtítulo/kicker editorial: terracota bold (ênfase secundária da hierarquia). */
.subtitulo { color: var(--acento-2); font-weight: 800; }

/* Tabela canônica: cabeçalho marrom escuro com texto creme + linhas alternadas em creme
   suave (--zebra). Vale para toda tabela dentro de .tabela-wrap (admin e telas futuras);
   as páginas só ajustam padding/tamanho, nunca as cores. */
.tabela-wrap thead th {
  background: var(--marrom);
  color: var(--creme);
  font-weight: 700;
}
.tabela-wrap tbody tr:nth-child(even) td { background: var(--zebra); }

/* Utilitário de entrada suave de conteúdo (micro-interação do redesign). Aplique .surge num
   elemento (opcional: animation-delay inline para escalonar). Desligado em reduce-motion. */
@media (prefers-reduced-motion: no-preference) {
  .surge { animation: surge-in .45s ease both; }
  @keyframes surge-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ── Galeria de fotos (grade) e lightbox (ampliar) — usados na pagina publica e no painel ── */
/* Grade responsiva: minmax(140px) rende 2 colunas no celular e ate 4 nos containers
   das paginas (perfil ~700px, modal do admin ~620px). gap consistente entre as fotos. */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.galeria .foto { position: relative; }
/* Proporcao fixa 4:3 + object-fit cover: corta mantendo o enquadramento, sem esticar/distorcer.
   aspect-ratio (em vez de altura fixa) mantem a proporcao seja qual for a largura da coluna. */
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px;
  border: 2px solid var(--borda-forte); cursor: zoom-in; display: block;
  transition: transform var(--transicao), box-shadow var(--transicao); }
.galeria img:hover { transform: scale(1.04); box-shadow: var(--sombra-card); }
/* botao de apagar sobre a foto (so no painel admin). */
.galeria .apagar { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 8px;
  background: var(--card); color: var(--terracota); border: 2px solid var(--borda-forte); cursor: pointer;
  font-size: .8rem; line-height: 1; display: flex; align-items: center; justify-content: center; }

.lightbox { position: fixed; inset: 0; background: rgba(46,29,16,.82); display: none;
  align-items: center; justify-content: center; z-index: 100; }
.lightbox.aberto { display: flex; }
.lightbox .lb-img { max-width: 90vw; max-height: 82vh; border: 3px solid var(--borda-forte);
  border-radius: 10px; box-shadow: var(--sombra-bloco); background: var(--creme); }
.lightbox button { background: var(--acento); color: var(--marrom); border: 2px solid var(--borda-forte);
  border-radius: 10px; cursor: pointer; font-weight: 800; box-shadow: var(--sombra-bloco);
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.lightbox .lb-fechar { position: absolute; top: 14px; right: 16px; font-size: 1.1rem; }
.lightbox .lb-nav { font-size: 2rem; }
.lightbox .lb-prev { position: absolute; left: 10px; }
.lightbox .lb-next { position: absolute; right: 10px; }
.lightbox .lb-contador { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--marrom); color: var(--creme); border: 2px solid var(--borda-forte);
  border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .85rem; }