/*
 * Colores del tema para los botones de la plataforma.
 * Se carga DESPUES del resto de hojas (Styles*.jspf, Libro) para que tenga
 * prioridad. Los botones ya no dependen de --brand-color (color por
 * empresa que pone Colores.js), usan siempre el color primario del tema.
 */
:root {
  --tp-theme-primary: #F0344D;
  --tp-theme-secondary: #0B3A58;
  --tp-theme-primary-gradient: linear-gradient(to right, var(--tp-theme-primary), var(--tp-theme-secondary));
  --tp-theme-secondary-hover: #082C43;
  --tp-theme-focus-ring: 0 0 0 0.2rem rgba(240, 52, 77, .35);
}

/*
 * Color de marca de los contenedores (.banner-client .content-text-client,
 * footer, badges, pestañas de categorias, cupon, etc. -- todo lo que usa
 * --brand-color / --typography-color en main_int.css).
 * !important porque Colores.js y Perfiles.js escriben estas variables como
 * estilo inline en <html> con el color de cada empresa; una declaracion
 * !important de hoja de estilos gana sobre un estilo inline normal.
 */
:root {
  --brand-color: var(--tp-theme-primary) !important;
  --typography-color: #FFFFFF !important;
}

/*
 * Footer (Comun/Footer.jspf): mismo color que el home en todas las paginas.
 * Las paginas con main.css (Acceso, OTP, etc.) lo tenian en amarillo fijo,
 * no usan --brand-color, por eso se fija aqui explicitamente.
 */
.footer-main,
.list-group-footer .list-group-item {
  background-color: var(--tp-theme-primary);
}

.list-group-footer h2,
.list-group-footer .list-group-item,
.list-group-footer .list-group-item a,
.list-group-footer .list-group-item a:hover {
  color: #FFFFFF;
}

/* ---- Boton principal: degradado del tema ---- */
.btn-primario,
.btn-primary,
.btn-primary-bee {
  color: #FFFFFF;
  background-color: var(--tp-theme-primary);
  background-image: var(--tp-theme-primary-gradient);
  border-color: transparent;
  transition: opacity .2s ease;
}

.btn-primario:hover,
.btn-primary:hover,
.btn-primary-bee:hover,
.btn-primario:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary-bee:not(:disabled):not(.disabled):active {
  color: #FFFFFF;
  background-color: var(--tp-theme-primary);
  background-image: var(--tp-theme-primary-gradient);
  border-color: transparent;
  opacity: .9;
}

.btn-primario:focus,
.btn-primary:focus,
.btn-primary-bee:focus {
  color: #FFFFFF;
  outline: 0;
  box-shadow: var(--tp-theme-focus-ring);
}

/* Productos no disponibles ("Comprar" con btn-primario + btn-disabled):
   el estado deshabilitado tiene que seguir mandando sobre el color primario. */
.btn-primario.btn-disabled,
.btn-primario.btn-disabled:hover,
.btn-primario.btn-disabled:focus {
  color: var(--Gray4);
  background-color: var(--Gray2);
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Boton secundario (borde primario) ---- */
.btn-secundario,
.btn-outline-primary {
  color: var(--tp-theme-primary);
  background-color: #FFFFFF;
  border: 1px solid var(--tp-theme-primary);
}

.btn-secundario:hover,
.btn-outline-primary:hover,
.btn-secundario:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  color: #FFFFFF;
  background-color: var(--tp-theme-primary);
  border-color: var(--tp-theme-primary);
}

.btn-secundario:focus,
.btn-outline-primary:focus {
  outline: 0;
  box-shadow: var(--tp-theme-focus-ring);
}

/* ---- Boton "Cerrar" de los modales (Bootstrap btn-secondary) ---- */
.btn-secondary {
  color: #FFFFFF;
  background-color: var(--tp-theme-secondary);
  border-color: var(--tp-theme-secondary);
}

.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active {
  color: #FFFFFF;
  background-color: var(--tp-theme-secondary-hover);
  border-color: var(--tp-theme-secondary-hover);
}

.btn-secondary:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(11, 58, 88, .35);
}