/* ============================================================================
   QSALUD REBRAND · OVERRIDES v1.1
   Neutraliza estilos hardcodeados que las variables no cubren.
   !important solo donde hace falta para ganar a CSS por página (Yellow Pencil),
   a estilos compilados de elementos o a estilos inline inyectados por JS.
   ============================================================================ */

/* ── 1. Botones Bricks (formularios y elementos botón) → pastilla azul ───── */
.brxe-form .bricks-button,
.bricks-button.bricks-background-primary,
.brxe-button .bricks-button{
  background-color: var(--qs-blue) !important;
  color: #fff !important;
  border-radius: var(--qs-radius-pill) !important;
  font-family: var(--qs-font-body) !important;
  font-weight: var(--qs-w-semibold) !important;
  transition: transform .2s ease, background .2s ease;
}
.brxe-form .bricks-button:hover,
.bricks-button.bricks-background-primary:hover,
.brxe-button .bricks-button:hover{
  background-color: var(--qs-blue-deep) !important;
  transform: translateY(-2px);
}

/* ── 2. WooCommerce → botones pastilla azul ─────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order{
  background-color: var(--qs-blue) !important;
  color: #fff !important;
  border-radius: var(--qs-radius-pill) !important;
  font-family: var(--qs-font-body) !important;
  font-weight: var(--qs-w-semibold) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover{
  background-color: var(--qs-blue-deep) !important;
}

/* ── 3. Elementos Bricks con color compilado en duro ─────────────────────── */
/* Botón rojo de aviso (global-elements: .brxe-sgrdbs #e93a3a) → error token */
.brxe-sgrdbs{
  background-color: var(--qs-error) !important;
}
/* Barra/elemento con fondo azul marca en duro (#22577e) */
.brxe-lblbxt{
  background-color: var(--qs-blue-deep) !important;
}

/* ── 4. Amelia (reservas): es UI de aplicación → sin serif en sus títulos ── */
#amelia h1, #amelia h2, #amelia h3, #amelia h4, #amelia h5, #amelia h6,
.amelia-v2-booking h1, .amelia-v2-booking h2, .amelia-v2-booking h3,
.amelia-v2-booking h4, .amelia-v2-booking h5, .amelia-v2-booking h6,
[class*="amelia-app"] h1, [class*="amelia-app"] h2, [class*="amelia-app"] h3{
  font-family: var(--qs-font-body);
  letter-spacing: normal;
}

/* ── 5. Amelia (step form v3 + paneles): paleta y tipografía de marca ─────
   Amelia inyecta sus variables --am-c-* INLINE desde su app Vue (valores del
   panel Customize, en BD). Las declaraciones !important de hoja ganan a los
   estilos inline no-important → puente de respaldo independiente de la BD.   */
.amelia-v2-booking,
.amelia-booking,
#amelia-app-booking,
[id^="amelia-app-booking"],
[class*="amelia-app"]{
  /* acento principal y botones */
  --am-c-primary: #2E6FB5 !important;
  --am-c-btn-bgr: #2E6FB5 !important;
  --am-c-btn-border: #2E6FB5 !important;
  --am-c-btn-text: #FFFFFF !important;
  --am-c-btn-first: #2E6FB5 !important;
  --am-c-btn-first-op: rgba(46,111,181,.65) !important;
  /* texto */
  --am-c-main-text: #0E1B2A !important;
  --am-c-main-bgr: #FFFFFF !important;
  /* inputs y bordes */
  --am-c-inp-border: #D9E2EC !important;
  --am-c-input-border: #D9E2EC !important;
  --am-c-inp-bgr: #FFFFFF !important;
  --am-c-inp-text: #0E1B2A !important;
  /* sidebar / panel resumen */
  --am-c-sb-bgr: #1C4E86 !important;
  --am-c-sb-text: #FFFFFF !important;
  --am-c-sb-text-op: rgba(255,255,255,.65) !important;
  --am-c-sb-bgr-atc: #2E6FB5 !important;
  --am-c-sb-checker-border: rgba(255,255,255,.35) !important;
}

/* Tipografía Amelia: "Amelia Roboto" → Inter (se excluyen las fuentes de
   iconos, que tienen su propio !important con mayor especificidad). */
.amelia-v2-booking,
.amelia-booking,
#amelia-app-booking,
[id^="amelia-app-booking"],
[class*="amelia-app"]{
  font-family: var(--qs-font-body) !important;
}
.amelia-v2-booking *:not([class*="am-icon"]):not([class*="icon-"]):not(i),
[id^="amelia-app-booking"] *:not([class*="am-icon"]):not([class*="icon-"]):not(i),
[class*="amelia-app"] *:not([class*="am-icon"]):not([class*="icon-"]):not(i){
  font-family: var(--qs-font-body) !important;
}

/* ── 6. Detalles globales de marca ───────────────────────────────────────── */
::selection{
  background: rgba(46,111,181,.18);
  color: var(--qs-ink);
}

/* Enlaces dentro de contenido de texto (no navegación) */
.brxe-text a:not(.bricks-button):not(.btn),
.brxe-text-basic a:not(.bricks-button):not(.btn),
.brxe-post-content a:not(.bricks-button){
  color: var(--qs-blue-deep);
  text-underline-offset: 3px;
}
.brxe-text a:not(.bricks-button):not(.btn):hover,
.brxe-text-basic a:not(.bricks-button):not(.btn):hover{
  color: var(--qs-blue);
}

@media (prefers-reduced-motion: reduce){
  .brxe-form .bricks-button,
  .bricks-button.bricks-background-primary{
    transition: none;
  }
}