/* ============================================================================
   TEMA DE COLORES DE LA MARCA
   ----------------------------------------------------------------------------
   👉 PARA CAMBIAR LOS COLORES DEL SITIO edita ÚNICAMENTE el bloque de "PALETA"
      que está justo abajo. El resto del archivo solo conecta esa paleta con
      Bootstrap y normalmente NO necesitas tocarlo.

   Cada color de marca tiene DOS líneas que deben coincidir:
     --brand-xxx      -> el color en hexadecimal (#rrggbb)
     --brand-xxx-rgb  -> el MISMO color como "r, g, b" (tres números de 0 a 255)
   Bootstrap usa la versión "-rgb" para los fondos semitransparentes, así que si
   cambias un hex tienes que actualizar también su línea "-rgb".
   (Truco: busca el hex en Google y te muestra el valor RGB al instante.)
   ========================================================================== */
:root {
  /* ------------------------------------------------------------------------ */
  /* ------------------------------ PALETA ---------------------------------- */
  /* ------------------------- (EDITA SOLO ESTO) ---------------------------- */

  --brand-primary:        #51A4A4;        /* Principal: botones, navbar, enlaces */
  --brand-primary-rgb:    81, 164, 164;

  --brand-secondary:      #E58A8A;        /* Secundario */
  --brand-secondary-rgb:  229, 138, 138;

  --brand-detalle:        #390050;        /* Detalles / acentos */
  --brand-detalle-rgb:    57, 0, 80;

  --brand-detalle-2:      #707078;        /* Detalles secundarios */
  --brand-detalle-2-rgb:  112, 112, 120;

  --brand-bg:             #ffffff;        /* Fondo del sitio */
  --brand-text:           #212529;        /* Texto (casi negro; usa #000 para negro puro) */

  /* ------------------------- FIN DE LA PALETA ----------------------------- */
  /* ------------------------------------------------------------------------ */
}


/* ==========================================================================
   CABLEADO CON BOOTSTRAP  (normalmente no hace falta editar debajo de aquí)
   ========================================================================== */
:root {
  /* Fondo y texto base */
  --bs-body-bg: var(--brand-bg);
  --bs-body-color: var(--brand-text);

  /* Colores semánticos de Bootstrap -> paleta de marca */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-secondary: var(--brand-secondary);
  --bs-secondary-rgb: var(--brand-secondary-rgb);

  /* Enlaces */
  --bs-link-color: var(--brand-primary);
  --bs-link-color-rgb: var(--brand-primary-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--brand-primary) 80%, #000);
  --bs-link-hover-color-rgb: var(--brand-primary-rgb);
}

/* --- Botones sólidos (Brite trae el color "escrito a mano", hay que remapear) --- */
.btn-primary {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-primary) 85%, #000);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-primary) 82%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-primary) 80%, #000);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-secondary {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-secondary) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-secondary) 85%, #000);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-secondary) 82%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-secondary) 80%, #000);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--brand-secondary);
  --bs-btn-disabled-border-color: var(--brand-secondary);
}

/* --- Botones "outline" --- */
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
  --bs-btn-disabled-color: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--brand-secondary);
  --bs-btn-hover-border-color: var(--brand-secondary);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--brand-secondary);
  --bs-btn-active-border-color: var(--brand-secondary);
  --bs-btn-disabled-color: var(--brand-secondary);
  --bs-btn-disabled-border-color: var(--brand-secondary);
}


/* ==========================================================================
   COLORES DE "DETALLES"  (no existen en Bootstrap; los agregamos como clases
   utilitarias para poder usarlos en cualquier template)

   Uso en los templates:
     texto:   <span class="text-detalle">…</span>   /  text-detalle-2
     fondo:   <div  class="bg-detalle">…</div>       /  bg-detalle-2
     borde:   <div  class="border border-detalle">…</div>
     botón:   <button class="btn btn-detalle">…</button>
   ========================================================================== */
.text-detalle    { color: var(--brand-detalle) !important; }
.text-detalle-2  { color: var(--brand-detalle-2) !important; }

.bg-detalle      { background-color: var(--brand-detalle) !important; color: #fff !important; }
.bg-detalle-2    { background-color: var(--brand-detalle-2) !important; color: #fff !important; }

.border-detalle   { border-color: var(--brand-detalle) !important; }
.border-detalle-2 { border-color: var(--brand-detalle-2) !important; }

.btn-detalle {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-detalle);
  --bs-btn-border-color: var(--brand-detalle);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-detalle) 85%, #fff);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-detalle) 85%, #fff);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-detalle) 80%, #fff);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-detalle) 80%, #fff);
}

.btn-detalle-2 {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-detalle-2);
  --bs-btn-border-color: var(--brand-detalle-2);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-detalle-2) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-detalle-2) 85%, #000);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-detalle-2) 78%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-detalle-2) 78%, #000);
}