/* ==========================================================================
   AdminLTE 3.2.0 – Theme Terrain (custom)
   - 18 tonos (light/base/dark) derivados de paleta corporativa
   - Mapeo por similitud a colores estándar de AdminLTE
   - Sobrescribe helpers: .bg-*, .text-*, .border-*, .btn-*, .badge-*, .alert-*
   - No rompe nada: solo añade/override suave
   ========================================================================== */

/* -----------------------------
   1) Paleta Terrain (variables)
   ----------------------------- */
/* Terracotta */
:root {
  --terracotta-light: #E78A6E;
  --terracotta:       #D95D39;
  --terracotta-dark:  #9E4026;

  /* Oliva */
  --oliva-light: #A0B268;
  --oliva:       #7B8D42;
  --oliva-dark:  #55662D;

  /* Arena */
  --arena-light: #F8F2EC;
  --arena:       #F0E4D7;
  --arena-dark:  #CBBFB1;

  /* Azul grisáceo */
  --azulgris-light: #6A8AA1;
  --azulgris:       #496A81;
  --azulgris-dark:  #2E4557;

  /* Mostaza */
  --mostaza-light: #E0B933;
  --mostaza:       #C99700;
  --mostaza-dark:  #8F6B00;

  /* Arcilla */
  --arcilla-light: #A78F8A;
  --arcilla:       #8A716A;
  --arcilla-dark:  #604D47;
}

/* ------------------------------------------
   2) Mapeo por similitud a AdminLTE (core)
   ------------------------------------------
   primary   ↔ Azul grisáceo (base)
   secondary ↔ Arcilla (base)
   success   ↔ Oliva (base)
   info      ↔ Azul grisáceo (light)    [tono informativo]
   warning   ↔ Mostaza (base)
   danger    ↔ Terracotta (dark)        [rojo/alarma]
   light     ↔ Arena (light)
   dark      ↔ Azul grisáceo (dark)
------------------------------------------- */
:root {
  --primary:   var(--azulgris);
  --secondary: var(--arcilla);
  --success:   var(--oliva);
  --info:      var(--azulgris-light);
  --warning:   var(--mostaza);
  --danger:    var(--terracotta-dark);
  --light:     var(--arena-light);
  --dark:      var(--azulgris-dark);

  /* tonalidades auxiliares (hover/border) */
  --primary-contrast: #fff;
  --secondary-contrast: #fff;
  --success-contrast: #fff;
  --info-contrast: #fff;
  --warning-contrast: #212529;
  --danger-contrast: #fff;
  --light-contrast: #212529;
  --dark-contrast: #fff;
}

/* ----------------------------------------------------
   3) Overrides de helpers estándar de AdminLTE/Bootstrap
   ---------------------------------------------------- */

/* Backgrounds */
.bg-primary    { background-color: var(--primary)   !important; color: var(--primary-contrast) !important; }
.bg-secondary  { background-color: var(--secondary) !important; color: var(--secondary-contrast) !important; }
.bg-success    { background-color: var(--success)   !important; color: var(--success-contrast) !important; }
.bg-info       { background-color: var(--info)      !important; color: var(--info-contrast) !important; }
.bg-warning    { background-color: var(--warning)   !important; color: var(--warning-contrast) !important; }
.bg-danger     { background-color: var(--danger)    !important; color: var(--danger-contrast) !important; }
.bg-light      { background-color: var(--light)     !important; color: var(--light-contrast) !important; }
.bg-dark       { background-color: var(--dark)      !important; color: var(--dark-contrast) !important; }

/* Text */
.text-primary   { color: var(--primary)   !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success   { color: var(--success)   !important; }
.text-info      { color: var(--info)      !important; }
.text-warning   { color: var(--warning)   !important; }
.text-danger    { color: var(--danger)    !important; }
.text-light     { color: var(--light)     !important; }
.text-dark      { color: var(--dark)      !important; }

/* Borders */
.border-primary   { border-color: var(--primary)   !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-success   { border-color: var(--success)   !important; }
.border-info      { border-color: var(--info)      !important; }
.border-warning   { border-color: var(--warning)   !important; }
.border-danger    { border-color: var(--danger)    !important; }
.border-light     { border-color: var(--light)     !important; }
.border-dark      { border-color: var(--dark)      !important; }

/* Buttons */
.btn-primary   { background-color: var(--primary)   !important; border-color: var(--primary)   !important; color: var(--primary-contrast) !important; }
.btn-secondary { background-color: var(--secondary) !important; border-color: var(--secondary) !important; color: var(--secondary-contrast) !important; }
.btn-success   { background-color: var(--success)   !important; border-color: var(--success)   !important; color: var(--success-contrast) !important; }
.btn-info      { background-color: var(--info)      !important; border-color: var(--info)      !important; color: var(--info-contrast) !important; }
.btn-warning   { background-color: var(--warning)   !important; border-color: var(--warning)   !important; color: var(--warning-contrast) !important; }
.btn-danger    { background-color: var(--danger)    !important; border-color: var(--danger)    !important; color: var(--danger-contrast) !important; }
.btn-light     { background-color: var(--light)     !important; border-color: var(--light)     !important; color: var(--light-contrast) !important; }
.btn-dark      { background-color: var(--dark)      !important; border-color: var(--dark)      !important; color: var(--dark-contrast) !important; }

/* Hovers suaves */
.btn-primary:hover   { filter: brightness(1.06); }
.btn-secondary:hover { filter: brightness(1.06); }
.btn-success:hover   { filter: brightness(1.06); }
.btn-info:hover      { filter: brightness(1.06); }
.btn-warning:hover   { filter: brightness(1.04); }
.btn-danger:hover    { filter: brightness(1.06); }
.btn-light:hover     { filter: brightness(0.98); }
.btn-dark:hover      { filter: brightness(1.08); }

/* Badges */
.badge-primary   { background-color: var(--primary)   !important; color: var(--primary-contrast) !important; }
.badge-secondary { background-color: var(--secondary) !important; color: var(--secondary-contrast) !important; }
.badge-success   { background-color: var(--success)   !important; color: var(--success-contrast) !important; }
.badge-info      { background-color: var(--info)      !important; color: var(--info-contrast) !important; }
.badge-warning   { background-color: var(--warning)   !important; color: var(--warning-contrast) !important; }
.badge-danger    { background-color: var(--danger)    !important; color: var(--danger-contrast) !important; }
.badge-light     { background-color: var(--light)     !important; color: var(--light-contrast) !important; }
.badge-dark      { background-color: var(--dark)      !important; color: var(--dark-contrast) !important; }

/* Alerts (tono ligeramente más claro en fondo) */
.alert-primary   { color: var(--primary);   background-color: rgba(73,106,129,.10);  border-color: rgba(73,106,129,.25); }
.alert-secondary { color: var(--secondary); background-color: rgba(138,113,106,.10); border-color: rgba(138,113,106,.25); }
.alert-success   { color: var(--success);   background-color: rgba(123,141,66,.10);  border-color: rgba(123,141,66,.25); }
.alert-info      { color: var(--info);      background-color: rgba(106,138,161,.10); border-color: rgba(106,138,161,.25); }
.alert-warning   { color: #6b5200;          background-color: rgba(201,151,0,.15);   border-color: rgba(201,151,0,.32); }
.alert-danger    { color: var(--terracotta-dark); background-color: rgba(217,93,57,.12); border-color: rgba(217,93,57,.30); }
.alert-light     { color: #4b4f56;          background-color: var(--arena-light);     border-color: var(--arena-dark); }
.alert-dark      { color: #fff;             background-color: var(--dark);            border-color: var(--azulgris); }

/* ------------------------------------------------------------
   4) Utilidades Terrain (para usar los 18 tonos directamente)
   ------------------------------------------------------------ */
/* Backgrounds */
.bg-terra-light  { background-color: var(--terracotta-light) !important; color:#1f1f1f !important; }
.bg-terra        { background-color: var(--terracotta)       !important; color:#fff !important; }
.bg-terra-dark   { background-color: var(--terracotta-dark)  !important; color:#fff !important; }

.bg-oliva-light  { background-color: var(--oliva-light) !important; color:#1f1f1f !important; }
.bg-oliva        { background-color: var(--oliva)       !important; color:#fff !important; }
.bg-oliva-dark   { background-color: var(--oliva-dark)  !important; color:#fff !important; }

.bg-arena-light  { background-color: var(--arena-light) !important; color:#212529 !important; }
.bg-arena        { background-color: var(--arena)       !important; color:#212529 !important; }
.bg-arena-dark   { background-color: var(--arena-dark)  !important; color:#212529 !important; }

.bg-azg-light    { background-color: var(--azulgris-light) !important; color:#fff !important; }
.bg-azg          { background-color: var(--azulgris)       !important; color:#fff !important; }
.bg-azg-dark     { background-color: var(--azulgris-dark)  !important; color:#fff !important; }

.bg-mostaza-light{ background-color: var(--mostaza-light) !important; color:#212529 !important; }
.bg-mostaza      { background-color: var(--mostaza)       !important; color:#212529 !important; }
.bg-mostaza-dark { background-color: var(--mostaza-dark)  !important; color:#fff !important; }

.bg-arcilla-light{ background-color: var(--arcilla-light) !important; color:#212529 !important; }
.bg-arcilla      { background-color: var(--arcilla)       !important; color:#fff !important; }
.bg-arcilla-dark { background-color: var(--arcilla-dark)  !important; color:#fff !important; }

/* Text */
.text-terra-light   { color: var(--terracotta-light) !important; }
.text-terra         { color: var(--terracotta)       !important; }
.text-terra-dark    { color: var(--terracotta-dark)  !important; }

.text-oliva-light   { color: var(--oliva-light) !important; }
.text-oliva         { color: var(--oliva)       !important; }
.text-oliva-dark    { color: var(--oliva-dark)  !important; }

.text-arena-light   { color: var(--arena-light) !important; }
.text-arena         { color: var(--arena)       !important; }
.text-arena-dark    { color: var(--arena-dark)  !important; }

.text-azg-light     { color: var(--azulgris-light) !important; }
.text-azg           { color: var(--azulgris)       !important; }
.text-azg-dark      { color: var(--azulgris-dark)  !important; }

.text-mostaza-light { color: var(--mostaza-light) !important; }
.text-mostaza       { color: var(--mostaza)       !important; }
.text-mostaza-dark  { color: var(--mostaza-dark)  !important; }

.text-arcilla-light { color: var(--arcilla-light) !important; }
.text-arcilla       { color: var(--arcilla)       !important; }
.text-arcilla-dark  { color: var(--arcilla-dark)  !important; }

/* Borders */
.border-terra-light   { border-color: var(--terracotta-light) !important; }
.border-terra         { border-color: var(--terracotta)       !important; }
.border-terra-dark    { border-color: var(--terracotta-dark)  !important; }

.border-oliva-light   { border-color: var(--oliva-light) !important; }
.border-oliva         { border-color: var(--oliva)       !important; }
.border-oliva-dark    { border-color: var(--oliva-dark)  !important; }

.border-arena-light   { border-color: var(--arena-light) !important; }
.border-arena         { border-color: var(--arena)       !important; }
.border-arena-dark    { border-color: var(--arena-dark)  !important; }

.border-azg-light     { border-color: var(--azulgris-light) !important; }
.border-azg           { border-color: var(--azulgris)       !important; }
.border-azg-dark      { border-color: var(--azulgris-dark)  !important; }

.border-mostaza-light { border-color: var(--mostaza-light) !important; }
.border-mostaza       { border-color: var(--mostaza)       !important; }
.border-mostaza-dark  { border-color: var(--mostaza-dark)  !important; }

.border-arcilla-light { border-color: var(--arcilla-light) !important; }
.border-arcilla       { border-color: var(--arcilla)       !important; }
.border-arcilla-dark  { border-color: var(--arcilla-dark)  !important; }

/* -----------------------------------------------
   5) Mapeo opcional de "extended colors" AdminLTE
   ----------------------------------------------- */
.bg-navy, .btn-navy, .badge-navy     { background-color: var(--azulgris-dark) !important; color:#fff !important; }
.bg-orange, .btn-orange, .badge-orange { background-color: var(--terracotta) !important; color:#fff !important; }
.bg-olive, .btn-olive, .badge-olive  { background-color: var(--oliva) !important; color:#fff !important; }
.bg-teal, .btn-teal, .badge-teal     { background-color: var(--oliva-light) !important; color:#1f1f1f !important; }
.bg-maroon, .btn-maroon, .badge-maroon { background-color: var(--arcilla-dark) !important; color:#fff !important; }
.bg-gray, .btn-gray, .badge-gray     { background-color: var(--arena-dark) !important; color:#212529 !important; }
.bg-gray-dark, .btn-gray-dark, .badge-gray-dark { background-color: var(--azulgris-dark) !important; color:#fff !important; }
.bg-lightblue, .btn-lightblue, .badge-lightblue { background-color: var(--azulgris-light) !important; color:#fff !important; }