/* ==========================================================================
   DUM Core — "skin" de los plugins propios (dum-loteria, dum-deportes, dum-videos,
   dum-finanzas, dum-cine, dum-vuelos, dum-calculadora, dum-cambio, elecciones).
   Objetivo: que su salida adopte los tokens del design system sin tocar su código.
   Se irá completando en la fase 2 al revisar cada plugin (ver docs/03 §Fase 2).
   ========================================================================== */

/* Selector de idioma de dum-auto-translate (solo si el widget se usa en modo "shortcode"): el plugin
   imprime estilos inline (fondo blanco, píldora, bandera redonda con borde), de ahí los !important. */
.dum-lang-switch--plugin .dum-lang-switcher {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important; gap: 6px !important;
  font-family: var(--dum-font-sans, sans-serif) !important; font-size: var(--dum-fs-label-sm, 14px) !important;
}
.dum-lang-switch--plugin .dum-lang-switcher > span:first-child {
  width: 25px !important; height: 16px !important; border-radius: 0 !important; border: 0 !important;
}
.dum-lang-switch--plugin .dum-lang-switcher a { color: var(--dum-gray-disabled, #8D8D8D) !important; }
.dum-lang-switch--plugin .dum-lang-switcher a[href$="/"], .dum-lang-switch--plugin .dum-lang-switcher a[style*="a80000"] { color: var(--dum-primary, #A80000) !important; }
html[data-theme="dark"] .dum-lang-switch--plugin .dum-lang-switcher a[style*="a80000"] { color: var(--dum-text, #F4F4F4) !important; }

/* Contenedores genéricos de los plugins: tipografía y color base */
[class*="dum-loteria"], [class*="dum-deportes"], [class*="dum-videos"],
[class*="dum-finanzas"], [class*="dum-cine"], [class*="dum-movies"], [class*="dum-series"],
[class*="dum-vuelos"], [class*="dum-flights"], [class*="dum-calculator"], [class*="dum-cambio"],
[class*="elecciones-"] {
  font-family: var(--dum-font-sans, sans-serif);
  color: var(--dum-text, #161616);
}

/* Botones y pestañas de los plugins → botón DUM (rojo, esquinas rectas) */
[class*="dum-"] button:not(.dum-dark-toggle),
[class*="dum-"] .btn,
[class*="dum-"] [class*="tab"].active {
  border-radius: var(--dum-radius, 0);
}

/* Campos de formulario de los plugins */
[class*="dum-"] input:not([type="checkbox"]):not([type="radio"]),
[class*="dum-"] select {
  background: var(--dum-field-bg, #F4F4F4);
  color: var(--dum-text, #161616);
  border-color: transparent;
  border-radius: var(--dum-radius, 0);
  font-family: var(--dum-font-sans, sans-serif);
}

/* Modo oscuro: fondos claros de los plugins pasan al gris de capa */
html[data-theme="dark"] [class*="dum-"] [style*="background:#fff"],
html[data-theme="dark"] [class*="dum-"] [style*="background: #fff"],
html[data-theme="dark"] [class*="dum-"] [style*="background:#ffffff"] {
  background: var(--dum-bg-subtle, #262626) !important;
  color: var(--dum-text, #F4F4F4) !important;
}