/* Auris Reader - Overrides de widgets Elementor
 *
 * Asegura que los widgets nativos de Elementor (botones, headings,
 * iconos) respeten la paleta corporativa cuando se usen visualmente
 * desde el editor en lugar de HTML custom.
 *
 * Estrategia: !important solo donde Elementor inyecta inline styles.
 * En el resto, especificidad CSS normal.
 */

/* ============================================================
   Botones nativos de Elementor
   ============================================================ */

.elementor-button-link,
.elementor-button {
  font-family: var(--font-display);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-sm {
  font-family: var(--font-display);
}

/* Primary = amarillo brand */
.elementor-button.elementor-button-primary,
a.elementor-button.elementor-button-primary {
  background-color: var(--color-yellow-brand);
  color: var(--color-black-pure);
  font-weight: 700;
}

.elementor-button.elementor-button-primary:hover,
a.elementor-button.elementor-button-primary:hover {
  background-color: var(--color-yellow-dim);
  color: var(--color-black-pure);
}

/* Secondary = outline gris claro */
.elementor-button.elementor-button-secondary,
a.elementor-button.elementor-button-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--color-gray-700);
}

.elementor-button.elementor-button-secondary:hover {
  background-color: var(--bg-secondary);
  border-color: var(--color-gray-500);
}

/* ============================================================
   Headings de Elementor
   ============================================================ */

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ============================================================
   Backgrounds y secciones
   ============================================================ */

.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container-max);
}

/* ============================================================
   Iconos
   ============================================================ */

.elementor-icon {
  color: var(--accent);
}

.elementor-icon i,
.elementor-icon svg {
  color: inherit;
  fill: currentColor;
}

/* ============================================================
   Formularios Elementor (cuando los usemos)
   ============================================================ */

.elementor-field-textual {
  font-family: var(--font-display) !important;
  border: 1px solid var(--border-default) !important;
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
}

.elementor-field-textual:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--color-yellow-brand-rgb), 0.2) !important;
}

/* ============================================================
   Hello Elementor: ajustes mínimos del parent
   ============================================================ */

/* Hello pinta body con color blanco por defecto; lo sobreescribimos
   con nuestra paleta dark-first. */
body.elementor-default {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Link colors heredados del parent → nuestros */
a, a:visited {
  color: var(--link);
}