/* ============================================================
   TEMA CENTRAL — Short Stay
   ------------------------------------------------------------
   Pra mudar cores, raios ou espaçamentos do painel inteiro
   (operador + limpeza), edite as variáveis no :root abaixo.
   As classes (.btn-primario, .alerta-sucesso, etc) usam essas
   variáveis, então uma mudança aqui propaga pro site todo.
   ============================================================ */

:root {
  /* --- Cores principais --- */
  --cor-primaria:         #0f172a;  /* slate-900 — botão primário, pill ativo, header */
  --cor-primaria-hover:   #1e293b;  /* slate-800 */
  --cor-primaria-suave:   #f1f5f9;  /* slate-100 — hover de pill inativa */

  --cor-sucesso:          #047857;  /* emerald-700 — texto/borda de sucesso */
  --cor-sucesso-fundo:    #ecfdf5;  /* emerald-50 */
  --cor-sucesso-borda:    #a7f3d0;  /* emerald-200 */
  --cor-sucesso-botao:    #059669;  /* emerald-600 — botão de sucesso */
  --cor-sucesso-botao-hv: #047857;  /* emerald-700 */

  --cor-erro:             #b91c1c;  /* red-700 */
  --cor-erro-fundo:       #fef2f2;  /* red-50 */
  --cor-erro-borda:       #fecaca;  /* red-200 */
  --cor-erro-botao:       #dc2626;  /* red-600 */
  --cor-erro-botao-hv:    #b91c1c;  /* red-700 */

  --cor-info-botao:       #0284c7;  /* sky-600 */
  --cor-info-botao-hv:    #0369a1;  /* sky-700 */

  --cor-borda:            #cbd5e1;  /* slate-300 */
  --cor-borda-suave:      #e2e8f0;  /* slate-200 */
  --cor-texto:            #0f172a;  /* slate-900 */
  --cor-texto-suave:      #475569;  /* slate-600 */
  --cor-fundo:            #f8fafc;  /* slate-50 */

  /* --- Raios --- */
  --raio-padrao:    0.75rem;  /* 12px — rounded-xl */
  --raio-pequeno:   0.5rem;   /* 8px  — rounded-lg */
  --raio-grande:    1rem;     /* 16px — rounded-2xl */

  /* --- Transição padrão --- */
  --transicao: 150ms ease;
}

/* ============================================================
   Base — usadas pelos dois base.html
   ============================================================ */
html { font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   Botões
   ------------------------------------------------------------
   `.btn-grande` define só forma/tamanho. Combine com a variante
   de cor (`.btn-primario`, `.btn-sucesso`, etc) pra cor de
   fundo + texto.
   Ex: <button class="btn-grande btn-primario">Salvar</button>
   ============================================================ */
.btn-grande {
  min-height: 48px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--raio-padrao);
  transition: background-color var(--transicao);
}

.btn-primario { background-color: var(--cor-primaria);    color: #fff; }
.btn-primario:hover { background-color: var(--cor-primaria-hover); }

.btn-sucesso { background-color: var(--cor-sucesso-botao); color: #fff; }
.btn-sucesso:hover { background-color: var(--cor-sucesso-botao-hv); }

.btn-perigo  { background-color: var(--cor-erro-botao);    color: #fff; }
.btn-perigo:hover  { background-color: var(--cor-erro-botao-hv); }

.btn-info    { background-color: var(--cor-info-botao);    color: #fff; }
.btn-info:hover    { background-color: var(--cor-info-botao-hv); }

/* ============================================================
   Alertas (banners de feedback)
   ------------------------------------------------------------
   Ex: <div class="alerta-sucesso">Alterações salvas</div>
   ============================================================ */
.alerta-sucesso,
.alerta-erro {
  border-radius: var(--raio-padrao);
  border-width: 1px;
  border-style: solid;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.alerta-sucesso {
  background-color: var(--cor-sucesso-fundo);
  border-color: var(--cor-sucesso-borda);
  color: #064e3b;  /* emerald-900 */
}

.alerta-erro {
  background-color: var(--cor-erro-fundo);
  border-color: var(--cor-erro-borda);
  color: #7f1d1d;  /* red-900 */
}

/* ============================================================
   Inputs de formulário
   ------------------------------------------------------------
   Ex: <input class="input-padrao" type="text" />
   ============================================================ */
.input-padrao {
  border-radius: var(--raio-padrao);
  border: 1px solid var(--cor-borda);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  width: 100%;
  background-color: #fff;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.input-padrao:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.15);
}

/* Campo reprovado na validacao. Usa a vermelha forte (--cor-erro-botao), nao a
   --cor-erro-borda, que e' clara demais pra destacar num campo branco. A cor
   sozinha nao comunica pra quem nao distingue vermelho — vem sempre
   acompanhada da frase de erro embaixo do campo. */
.input-padrao.input-erro {
  border-color: var(--cor-erro-botao);
  background-color: var(--cor-erro-fundo);
}

.input-padrao.input-erro:focus {
  border-color: var(--cor-erro-botao);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

/* O Safari do iPhone amplia a pagina sozinho quando o dedo toca num campo com
   fonte menor que 16px — e nao volta ao normal depois. O sintoma e' a pagina
   "cortada nas bordas" quando ela re-renderiza (caso do portal do hospede ao
   cadastrar alguem). 16px e' o limiar exato que desarma o zoom. So' em tela de
   toque: no desktop a fonte continua 14px e nada muda de aparencia. */
@media (pointer: coarse) {
  .input-padrao { font-size: 16px; }
}

/* ============================================================
   Pill nav (abas em formato de pílula preto/branco)
   ------------------------------------------------------------
   Ex:
     <nav class="pill-nav">
       <a class="pill-nav-item pill-nav-item-ativo">Ativos</a>
       <a class="pill-nav-item">Inativos</a>
     </nav>
   ============================================================ */
.pill-nav {
  display: inline-flex;
  border-radius: var(--raio-padrao);
  border: 1px solid var(--cor-borda);
  background-color: #fff;
  padding: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.pill-nav-item {
  padding: 0.375rem 1rem;
  border-radius: var(--raio-pequeno);
  white-space: nowrap;
  color: var(--cor-texto-suave);
  transition: background-color var(--transicao), color var(--transicao);
}

.pill-nav-item:hover {
  background-color: var(--cor-primaria-suave);
}

.pill-nav-item-ativo,
.pill-nav-item-ativo:hover {
  background-color: var(--cor-primaria);
  color: #fff;
}

/* ------------------------------------------------------------
   Dica de rolagem: quando a pill-nav estoura a largura (celular)
   e sobram abas escondidas, mostra um degradê + seta na borda pra
   sinalizar que dá pra rolar. Envolva a <nav class="pill-nav ...
   overflow-x-auto"> num <div class="pill-nav-scroll">; o JS liga
   as classes .tem-mais-dir / .tem-mais-esq conforme a rolagem.
   ------------------------------------------------------------ */
.pill-nav-scroll { position: relative; }

.pill-nav-scroll::before,
.pill-nav-scroll::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 2.75rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transicao);
  z-index: 1;
}

.pill-nav-scroll::after {
  right: 1px;
  border-radius: 0 var(--raio-padrao) var(--raio-padrao) 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") right 0.55rem center / 0.85rem no-repeat,
    linear-gradient(to right, rgba(255, 255, 255, 0), #fff 62%);
}

.pill-nav-scroll::before {
  left: 1px;
  border-radius: var(--raio-padrao) 0 0 var(--raio-padrao);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E") left 0.55rem center / 0.85rem no-repeat,
    linear-gradient(to left, rgba(255, 255, 255, 0), #fff 62%);
}

.pill-nav-scroll.tem-mais-dir::after { opacity: 1; }
.pill-nav-scroll.tem-mais-esq::before { opacity: 1; }

/* ============================================================
   Paginação (web/static/js/paginacao.js)
   ------------------------------------------------------------
   Controles gerados pelo JS pra listas com data-paginar.
   .pg-fora esconde os itens fora da página atual.
   ============================================================ */
.pg-fora { display: none !important; }

.pg-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.875rem 0.5rem 0.375rem;
}

.pg-controles button {
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.625rem;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cor-borda-suave);
  background-color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--transicao), color var(--transicao);
}

.pg-controles button:hover:not(:disabled):not(.pg-num-ativo) {
  background-color: var(--cor-primaria-suave);
  color: var(--cor-texto);
}

.pg-controles button:disabled {
  opacity: 0.35;
  cursor: default;
}

.pg-controles .pg-num-ativo {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
}

.pg-controles .pg-elipse {
  padding: 0 0.25rem;
  color: var(--cor-texto-suave);
  font-size: 0.8125rem;
}

.pg-controles .pg-info {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
  margin-top: 0.25rem;
}

/* ============================================================
   Animação de entrada (usada no painel do operador)
   ============================================================ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fade-up 0.45s ease-out both; }