/* =====================================================================
   Hoja y Fogón — Branding (§5)
   Paleta oficial. Variables CSS para todo el theming. El asistente de
   setup (§6.0 paso 2) puede sobreescribir estos valores en línea.
   ===================================================================== */
:root{
  --brand-verde-selva: #1E2E14;  /* color de marca principal */
  --brand-fuego:       #C7601A;  /* acento y acciones */
  --brand-crema:       #F4EFE3;  /* crema para acentos/cards/tema oscuro */
  --brand-bg-page:     #f4efe38a;  /* fondo de página aclarado (con transparencia) */
  --brand-negro:       #000000;
  --brand-blanco:      #FFFFFF;

  /* Estados (derivados, cálidos/orgánicos) */
  --ok:#3E7D2C; --warn:#C7601A; --danger:#9A2A1E; --info:#5B6B4A;

  /* Derivados utilitarios */
  --fuego-700:#A44E13;
  --verde-700:#16210E;
  --verde-300:#5B6B4A;
  --crema-200:#EAE2D0;
  --linea:#D9D0BE;

  /* Mapeo a Bootstrap */
  --bs-primary: var(--brand-fuego);
  --bs-primary-rgb: 199,96,26;
  --bs-body-bg: #ffffff;                 /* sólido: lo heredan cards/modales */
  --bs-card-bg: #ffffff;                 /* cards SIEMPRE sólidas */
  --bs-modal-bg: #ffffff;                /* modales SIEMPRE sólidos (sin transparencia) */
  --bs-body-color: #20160c;
  --bs-link-color: var(--fuego-700);
  --bs-link-hover-color: var(--brand-fuego);

  /* Tipografías (§5): display artesanal para títulos, sans legible para cuerpo */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: .65rem;
  --shadow-sm: 0 1px 2px rgba(30,46,20,.08);
  --shadow: 0 6px 20px rgba(30,46,20,.12);
}

/* Fuentes vía Google Fonts (cargadas en el layout). Fallbacks robustos arriba. */

body{
  font-family: var(--font-body);
  background: var(--brand-bg-page, #f4efe38a);
  color: var(--bs-body-color);
}

h1,h2,h3,h4,.display-title,.navbar-brand{
  font-family: var(--font-display);
  letter-spacing: .2px;
}

/* Botones primarios = fuego (§5) */
.btn-primary{
  --bs-btn-bg: var(--brand-fuego);
  --bs-btn-border-color: var(--brand-fuego);
  --bs-btn-hover-bg: var(--fuego-700);
  --bs-btn-hover-border-color: var(--fuego-700);
  --bs-btn-active-bg: var(--fuego-700);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
}
.btn-outline-primary{
  --bs-btn-color: var(--fuego-700);
  --bs-btn-border-color: var(--brand-fuego);
  --bs-btn-hover-bg: var(--brand-fuego);
  --bs-btn-hover-border-color: var(--brand-fuego);
  --bs-btn-hover-color:#fff;
}
.btn-success{ --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); }

/* Botones de marca (alias usados en algunas vistas). Sin estas reglas se
   veían como texto plano sin fondo. */
.btn-fuego, .btn-fire{
  --bs-btn-bg: var(--brand-fuego);
  --bs-btn-border-color: var(--brand-fuego);
  --bs-btn-hover-bg: var(--fuego-700);
  --bs-btn-hover-border-color: var(--fuego-700);
  --bs-btn-active-bg: var(--fuego-700);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
  background-color: var(--brand-fuego); border:1px solid var(--brand-fuego); color:#fff;
}
.btn-fuego:hover, .btn-fire:hover{ background-color: var(--fuego-700); border-color: var(--fuego-700); color:#fff; }
.btn-selva, .btn-jungle{
  --bs-btn-bg: var(--brand-verde-selva);
  --bs-btn-border-color: var(--brand-verde-selva);
  --bs-btn-hover-bg: var(--verde-700);
  --bs-btn-hover-border-color: var(--verde-700);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
  background-color: var(--brand-verde-selva); border:1px solid var(--brand-verde-selva); color:#fff;
}
.btn-selva:hover, .btn-jungle:hover{ background-color: var(--verde-700); border-color: var(--verde-700); color:#fff; }
.btn-danger{ --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); }

a{ color: var(--fuego-700); }
.text-brand{ color: var(--brand-fuego)!important; }
.text-verde{ color: var(--brand-verde-selva)!important; }
.bg-verde{ background: var(--brand-verde-selva)!important; color:#fff; }
.bg-fuego{ background: var(--brand-fuego)!important; color:#fff; }
.bg-crema{ background: var(--brand-crema)!important; }

/* Navegación / encabezados = verde selva (§5) */
.app-sidebar, .app-topbar{
  background: var(--brand-verde-selva);
  color: #f3efe4;
}
.badge-fuego{ background: var(--brand-fuego); color:#fff; }

.card{
  border:1px solid var(--linea);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-header{ background: var(--crema-200); border-bottom:1px solid var(--linea); font-weight:600; }