/*
  Identidade visual do Sistema de Encomendas — Condomínio Monterrey.

  As cores reais (--cor-primaria/--cor-escura/--cor-clara/--cor-borda) vêm
  de `core/cores.py`, derivadas da cor escolhida no assistente de
  configuração e injetadas por `base.html` — os valores abaixo são só o
  fallback visto antes de qualquer condomínio existir (paleta neutra da
  BittFlow, ver `PALETA_PADRAO_BITTFLOW`).

  Duas telas fogem do layout padrão de desktop porque o público é outro:
  - Kiosk de retirada (`.tela-kiosk`): sem login, morador qualquer, muitas
    vezes no susto — alvos de toque grandes, texto grande, uma ação só.
  - Portal do morador / login: usado no celular na maior parte das vezes.
*/

:root {
  --cor-primaria: #1F63E8;
  --cor-escura: #081A4B;
  --cor-clara: #EAF1FE;
  --cor-borda: #C6DAFB;

  --vermelho: #B3261E;
  --vermelho-claro: #FDECEA;
  --cinza: #6B7280;
  --cinza-claro: #F4F5F6;
  --borda: #DDE1E3;
  --texto: #1A1D1B;

  --raio: 10px;

  /* Gradiente de marca (Azul Royal → Azul Médio → Ciano) — só a tela de
     boas-vindas usa isso; qualquer condomínio configurado usa a cor sólida
     derivada da paleta dele (ver core/cores.py). */
  --gradiente-bittflow: linear-gradient(135deg, #1F63E8 0%, #2D8CFF 55%, #19D2E8 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--texto);
  background: #FFFFFF;
}

h1, h2, h3 {
  font-weight: 600;
  color: var(--cor-escura);
  margin: 0 0 0.6rem;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; margin-top: 1.75rem; }
h3 { font-size: 1.05rem; }

a { color: var(--cor-primaria); }

/* --- Topo ------------------------------------------------------------- */

.topo {
  background: var(--cor-primaria);
  color: #fff;
  padding: 0.75rem 1rem;
}

.topo-conteudo {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.marca { text-decoration: none; color: #fff; line-height: 1.1; }
.marca-nome { display: block; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; }
.marca-sub { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.85; }

.topo-nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.topo-nav a { color: #fff; text-decoration: none; font-size: 0.92rem; padding: 0.35rem 0; }
.topo-nav a:hover { text-decoration: underline; }
.topo-nav .sair { opacity: 0.8; }

/* --- Layout ------------------------------------------------------------ */

.conteudo {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

/* Telas de tela-cheia (boas-vindas, login BittFlow, kiosk) — o gradiente/
   cor de fundo precisa ir de ponta a ponta, não só nos 960px do `.conteudo`.
   Body vira flex-column e `.conteudo` ganha flex:1 pra empurrar o rodapé
   (`.rodape-sistema`) pro final da viewport sem sobrar nem faltar espaço —
   `.tela-login`/`.tela-boas-vindas`/`.tela-kiosk` (definidas mais abaixo)
   usam `flex: 1` em vez de `min-height: 100vh` por causa disso: preenchem o
   espaço que sobra dentro de `.conteudo`, não a viewport inteira, senão o
   rodapé ficaria abaixo da dobra exigindo rolagem — ruim principalmente no
   kiosk, montado numa tela sem indicação nenhuma de que dá pra rolar. */
body.tela-cheia { min-height: 100vh; display: flex; flex-direction: column; }
body.tela-cheia .conteudo { max-width: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; }

.subtitulo { color: var(--cinza); margin: 0 0 1.5rem; }

/* --- Rodapé -------------------------------------------------------------- */

.rodape-sistema {
  background: #fff;
  border-top: 1px solid var(--borda);
  padding: 1rem;
}

.rodape-conteudo {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--cinza);
}

.rodape-conteudo a { color: var(--cinza); font-weight: 600; }
.rodape-conteudo a:hover { color: var(--cor-primaria); }

.rodape-direitos { margin-left: auto; }

@media (max-width: 480px) {
  .rodape-conteudo { justify-content: center; text-align: center; }
  .rodape-direitos { margin-left: 0; }
}

/* --- Avisos (mensagens do Django) --------------------------------------- */

.avisos { margin-bottom: 1.25rem; }

.aviso {
  padding: 0.75rem 1rem;
  border-radius: var(--raio);
  margin-bottom: 0.5rem;
  border: 1px solid;
}

.aviso-success { background: var(--cor-clara); border-color: var(--cor-borda); color: var(--cor-escura); }
.aviso-error   { background: var(--vermelho-claro); border-color: #F3C4C0; color: var(--vermelho); }
.aviso-info,
.aviso-warning { background: var(--cinza-claro); border-color: var(--borda); color: var(--texto); }

/* --- Botões -------------------------------------------------------------- */

.botao {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  background: var(--cor-primaria);
  color: #fff;
  border: 1px solid var(--cor-primaria);
  border-radius: var(--raio);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

.botao:hover { background: var(--cor-escura); border-color: var(--cor-escura); }
.botao:disabled { background: var(--cinza); border-color: var(--cinza); cursor: not-allowed; opacity: 0.6; }

.botao-secundario {
  background: #fff;
  color: var(--cor-primaria);
}
.botao-secundario:hover { background: var(--cor-clara); }

.botao-perigo { background: #fff; color: var(--vermelho); border-color: #F3C4C0; }
.botao-perigo:hover { background: var(--vermelho-claro); }

.botao-largo { width: 100%; }
.botao-pequeno { padding: 0.45rem 0.85rem; font-size: 0.85rem; }

/* --- Links de ação (listas com "+ Novo X") -------------------------------- */

.link-acao {
  display: inline-block;
  margin-bottom: 1rem;
  font-weight: 600;
  text-decoration: none;
}
.link-acao:hover { text-decoration: underline; }

/* --- Formulários --------------------------------------------------------- */

.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.95rem; }
.campo-checkbox { display: flex; align-items: center; gap: 0.5rem; }
.campo-checkbox label { margin-bottom: 0; font-weight: 500; }
.campo .ajuda { display: block; font-size: 0.85rem; color: var(--cinza); margin-top: 0.25rem; }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="file"], input[type="color"],
input[type="tel"], input[type="number"], select, textarea {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: #fff;
  color: var(--texto);
}

input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 1px;
  border-color: var(--cor-primaria);
}

textarea { min-height: 5rem; resize: vertical; }

.erros,
.errorlist { color: var(--vermelho); font-size: 0.9rem; margin: 0.35rem 0 0; list-style: none; padding: 0; }

/* --- Combobox com busca (quadra/lote, ver static/js/combo_busca.js) ------ */

.combo-busca { position: relative; }

.combo-busca-lista {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  max-height: 14rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.combo-busca-lista li {
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--raio) - 4px);
  cursor: pointer;
}

.combo-busca-lista li:hover,
.combo-busca-lista li.realcado { background: var(--cinza-claro); }

/* --- Login (BittFlow / Administração / Segurança / Morador) -------------- */

.tela-login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--cor-primaria);
}

.caixa-login {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  width: 100%;
  max-width: 380px;
}

.caixa-login h1 { text-align: center; margin-bottom: 0.25rem; font-size: 1.35rem; }
.caixa-login .subtitulo { text-align: center; margin-bottom: 1.5rem; }

input.campo-pin {
  font-size: 1.6rem;
  text-align: center;
  letter-spacing: 0.35em;
  padding: 0.9rem;
}

.link-alternativo {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--cinza);
}

/* --- Boas-vindas (antes de qualquer condomínio existir) ------------------ */

.tela-boas-vindas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background: var(--gradiente-bittflow);
}

.caixa-boas-vindas {
  background: #fff;
  border-radius: 20px;
  padding: 2.75rem 2.25rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 48px -20px rgba(8, 26, 75, 0.45);
}

.logo-bittflow { width: 168px; max-width: 60%; margin: 0 auto 1.75rem; display: block; }

/* A logo já traz o nome "BittFlow" visualmente — o h1 continua no HTML
   (título da página pra leitor de tela), só não é exibido de novo. */
.somente-leitor-de-tela {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.caixa-boas-vindas .subtitulo { margin-bottom: 1.75rem; }

/* --- Login BittFlow (manutenção) — mesma casa de cores da tela de boas-vindas --- */

.caixa-boas-vindas form { text-align: left; }
.caixa-boas-vindas .campo:last-of-type { margin-bottom: 1.5rem; }

/* --- Painéis / cards ------------------------------------------------------ */

.painel {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.1rem;
  margin-bottom: 1.25rem;
}

.painel-destaque { background: var(--cor-clara); border-color: var(--cor-borda); }

.grade-atalhos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 1.25rem; }

.card-atalho {
  display: block;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.1rem;
  text-decoration: none;
  color: var(--texto);
}
.card-atalho:hover { border-color: var(--cor-primaria); background: var(--cor-clara); }
.card-atalho h3 { margin-bottom: 0.3rem; color: var(--cor-escura); }
.card-atalho p { margin: 0; font-size: 0.88rem; color: var(--cinza); }

.credenciais {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--cor-escura);
  background: var(--cor-clara);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 0.6rem 0.9rem;
  display: inline-block;
}

/* --- Listas ---------------------------------------------------------------- */

.lista-limpa { list-style: none; padding: 0; margin: 0 0 1rem; }
.lista-limpa > li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--borda);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.lista-limpa > li:last-child { border-bottom: none; }
.lista-limpa a { text-decoration: none; font-weight: 600; }
.lista-limpa a:hover { text-decoration: underline; }
.lista-limpa .meta { font-size: 0.85rem; color: var(--cinza); }

.vazio { color: var(--cinza); font-style: italic; padding: 1.5rem 0; text-align: center; }

/* --- Tabelas / filtros ------------------------------------------------------ */

.filtros {
  background: var(--cinza-claro);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1rem;
  margin-bottom: 1.25rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: end;
}
.filtros .campo { margin-bottom: 0; min-width: 160px; }

/* --- Etiquetas de status --------------------------------------------------- */

.etiqueta {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.etiqueta-aguardando { background: var(--cinza-claro); color: var(--cinza); }
.etiqueta-disponivel { background: var(--cor-clara); color: var(--cor-escura); }
.etiqueta-retirado   { background: #E8F3EC; color: #164F2C; }

/* --- Estado de notificação push do morador (ver static/js/push_morador.js) */
.push-estado-ativo   { color: #164F2C; }
.push-estado-inativo { color: var(--cinza); }

/* --- Kiosk de retirada (sem login, público, alvos grandes) ---------------- */

.tela-kiosk {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-primaria);
  padding: 1.5rem;
}

.caixa-kiosk {
  background: #fff;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 460px;
  text-align: center;
}

.caixa-kiosk h1 { font-size: 1.7rem; margin-bottom: 1.5rem; }

.caixa-kiosk input[type="text"] {
  font-size: 1.5rem;
  text-align: center;
  padding: 1.1rem;
  letter-spacing: 0.05em;
}

.caixa-kiosk .botao {
  font-size: 1.15rem;
  padding: 1.1rem;
  margin-top: 1rem;
}

.confirmacao { padding: 1rem 0 1.5rem; }
.confirmacao .icone { font-size: 3.5rem; line-height: 1; margin-bottom: 0.75rem; }
.confirmacao-sucesso { color: var(--cor-escura); }
.confirmacao-erro { color: var(--vermelho); }

/* --- Utilidades ------------------------------------------------------------ */

.acoes-linha { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.acoes-linha[hidden] { display: none; } /* display:flex acima venceria o [hidden] nativo sem isso */
.foto-item { max-width: 320px; width: 100%; border-radius: var(--raio); border: 1px solid var(--borda); margin-top: 0.6rem; }
.foto-etiqueta-nome { display: block; color: var(--cinza); font-size: 0.9rem; margin-top: 0.3rem; }

/* Miniatura da foto da etiqueta nas listas de histórico (morador e
   administração) — check visual rápido sem precisar entrar no detalhe. */
.item-com-foto { display: flex; align-items: center; gap: 0.6rem; }
.foto-miniatura {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  flex-shrink: 0;
}

/* --- Câmera ao vivo (leitura de etiqueta) --------------------------------- */

.camera-wrapper { position: relative; margin-bottom: 0.5rem; }

.camera-video {
  display: block;
  width: 100%;
  max-height: 70vh;
  /* `cover` (não `contain`): o stream da câmera do celular quase nunca
     bate exatamente com a proporção da caixa (limitada por `max-height`
     acima) — com `contain`, a diferença de proporção sobrava como barra
     preta nas laterais (parecia "olhar por uma lente"). `cover` preenche a
     caixa inteira cortando o excesso, mesmo padrão de app de câmera/foto —
     sem barra preta, à custa de perder um pouco das bordas do quadro. */
  object-fit: cover;
  background: #000;
  border-radius: var(--raio);
}

.camera-overlay[hidden] { display: none; }

.camera-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: 600;
  border-radius: var(--raio);
}

.camera-overlay .spinner {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

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

/* position:fixed + tamanho zero em vez de display:none — alguns navegadores
   não imprimem o conteúdo de um iframe que estiver com display:none. */
.iframe-impressao { position: fixed; width: 0; height: 0; border: 0; }

.camera-dica { color: var(--cinza); font-size: 0.9rem; margin: 0.4rem 0 0; }

#fallback-manual {
  margin-top: 1.25rem;
  color: var(--cinza);
  font-size: 0.9rem;
}
#fallback-manual summary { cursor: pointer; padding: 0.5rem 0; }
#fallback-manual .painel { margin-top: 0.75rem; }