/* ============================================================
   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);
}

/* ============================================================
   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;
}

/* ============================================================
   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; }