/*
 * Tema de marca CAJA 87 sobre Metronic (tema claro).
 * Verde #258e4f = color principal (botones, enlaces, estados activos).
 * Rojo   #d61900 = "danger" de Bootstrap (borrar, cerrar sesión, errores) + acento puntual de marca.
 * Cargar SIEMPRE después de assets/css/style.bundle.css.
 */

:root,
[data-bs-theme="light"] {
  /* -- Verde: sustituye al morado (#7239EA) por defecto de Metronic -- */
  --bs-primary: #258e4f;
  --bs-primary-active: #1e723f;
  --bs-primary-light: #e9fff2;
  --bs-primary-rgb: 37, 142, 79;
  --bs-primary-inverse: #ffffff;
  --bs-primary-text-emphasis: #0f5c30;
  --bs-primary-bg-subtle: #d7f2e1;
  --bs-primary-border-subtle: #a8dfbc;
  --bs-primary-clarity: rgba(37, 142, 79, 0.2);
  --bs-text-primary: #258e4f;
  --bs-link-color: #258e4f;
  --bs-link-color-rgb: 37, 142, 79;
  --bs-link-hover-color: #1e723f;
  --bs-link-hover-color-rgb: 30, 114, 63;

  /* Estados "activo/hover" genéricos de Metronic (paginación, menús, switches...) */
  --bs-component-active-bg: #258e4f;
  --bs-component-active-color: #ffffff;
  --bs-component-hover-color: #258e4f;
  --bs-component-checked-bg: #258e4f;
  --bs-menu-link-color-active: #258e4f;
  --bs-menu-link-color-here: #258e4f;
  --bs-menu-link-color-hover: #258e4f;
  --bs-menu-link-color-show: #258e4f;
  --bs-nav-pills-link-active-bg: #258e4f;
  --bs-progress-bar-bg: #258e4f;
  --bs-ribbon-label-bg: #258e4f;

  /* -- Rojo: "danger" de Bootstrap/Metronic pasa de #F8285A a la marca -- */
  --bs-danger: #d61900;
  --bs-danger-active: #ab1400;
  --bs-danger-light: #fbe9e6;
  --bs-danger-rgb: 214, 25, 0;
  --bs-danger-inverse: #ffffff;
  --bs-danger-text-emphasis: #6b0f00;
  --bs-danger-bg-subtle: #f8d6d0;
  --bs-danger-border-subtle: #eda99b;
  --bs-danger-clarity: rgba(214, 25, 0, 0.2);
  --bs-text-danger: #d61900;
  --bs-form-invalid-color: #d61900;
  --bs-form-invalid-border-color: #d61900;

  /* Botones .btn-primary/.btn-danger "planos" de Bootstrap (Metronic los pisa con
     var(--bs-primary) en la mayoría de casos, pero se dejan coherentes por si acaso). */
  --bs-btn-bg: #258e4f;
  --bs-btn-border-color: #258e4f;
  --bs-btn-hover-bg: #1e723f;
  --bs-btn-hover-border-color: #1e723f;
  --bs-btn-active-bg: #1a6636;
  --bs-btn-active-border-color: #1a6636;
}

/*
 * Metronic no deriva TODO de las variables de arriba: unos pocos componentes traen el
 * morado grabado como hex literal en el CSS compilado (style.bundle.css). Se parchean
 * aquí uno a uno para que no se cuele el morado en checkboxes, sliders o el foco de los
 * inputs. Si en el futuro se recompila el Sass de Metronic con _variables.custom.scss
 * en verde, este bloque deja de hacer falta.
 */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate,
.form-check.form-check-solid .form-check-input[type="checkbox"]:indeterminate {
  background-color: #258e4f;
  border-color: #258e4f;
}
.form-range::-webkit-slider-thumb {
  background-color: #258e4f;
}
.form-range::-webkit-slider-thumb:active {
  background-color: #b9e4c8;
}
.form-range::-moz-range-thumb {
  background-color: #258e4f;
}
.form-range::-moz-range-thumb:active {
  background-color: #b9e4c8;
}
.link-primary:focus,
.link-primary:hover {
  color: #1e723f !important;
  text-decoration-color: #1e723f !important;
}
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(37, 142, 79, 0.25) !important;
}

/* -------------------------------------------------------------------- */
/* Cabecera / marca                                                      */
/* -------------------------------------------------------------------- */

.caja87-navbar {
  border-bottom: 3px solid #d61900;
}

.caja87-brand img {
  height: 42px;
  width: auto;
}

.caja87-guest-logo img {
  height: 64px;
  width: auto;
}