/* efectos.css — efectos visuales sobrios (se carga DESPUÉS de tema.css). Solo estilos: no cambia textos, datos ni estructura.
   · Todo lo decorativo cuelga de html:not([data-efectos="off"]): la opción de la Guía básica (efectos.js) pone data-efectos="off" y vuelve el aspecto de tema.css.
   · El movimiento va además dentro de prefers-reduced-motion: no-preference (con «reducir movimiento» solo queda lo estático) y usa transform/opacity.
   · Ahorro de batería: html.ef-oculta (pestaña oculta) pausa toda animación; en ≤ 900 px no hay grano, desaparecen los pulsos largos y el desenfoque es menor.
   Variables propias --ef-*; los colores salen de las --t-* de tema.css (naranja de marca = acento; verde/rojo solo para sube/baja). */

/* fuente de respaldo con las métricas de Inter: al llegar la fuente real el texto no cambia de alto (sin saltos de diseño) */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
:root { --sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
:root { --ef-rapido: 160ms; --ef-medio: 260ms; --ef-entrada: 420ms; --ef-curva: cubic-bezier(.2, .8, .2, 1); }

/* ---------- pausa con la pestaña oculta ---------- */
html.ef-oculta *, html.ef-oculta *::before, html.ef-oculta *::after { animation-play-state: paused !important; }

/* ---------- B10 · selección y foco (también sin movimiento) ---------- */
html:not([data-efectos="off"]) ::selection { background: rgba(255, 122, 46, .42); color: #fff; }
html:not([data-efectos="off"]) :focus-visible { outline: 2px solid var(--t-naranja-2); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 122, 46, .16); }
html:not([data-efectos="off"]) :is(.cb-cab, .tr, .inf-card, .sa-card, .cs-fila, summary):focus-visible { outline-offset: -3px; box-shadow: none; }
html:not([data-efectos="off"]) :is(input, textarea, select):focus-visible { box-shadow: 0 0 0 4px rgba(255, 122, 46, .16); }

/* ---------- B1 · cristal: cabecera y barra inferior (respaldo sólido si no hay backdrop-filter) ---------- */
html:not([data-efectos="off"]) header { background: rgba(10, 10, 11, .96); border-bottom: 1px solid rgba(255, 255, 255, .07); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not([data-efectos="off"]) header { background: rgba(14, 14, 15, .94); }          /* sin desenfoque: un blur a todo el ancho se recalcula en cada scroll */
}
/* ---------- B2 · fondo: resplandor naranja tras el título y grano finísimo ---------- */
html:not([data-efectos="off"]) .bloque > .seccion-cab { position: relative; isolation: isolate; }
html:not([data-efectos="off"]) .bloque > .seccion-cab::before { content: ""; position: absolute; z-index: -1; left: -12px; top: -46px; width: min(560px, calc(100% + 12px)); height: 190px;
  background: radial-gradient(closest-side, rgba(255, 122, 46, .085), transparent 72%); pointer-events: none; }
/* (grano de fondo ELIMINADO: una capa fija a pantalla completa con un filtro SVG feTurbulence se repinta en cada fotograma de scroll y bloqueaba el escritorio) */
@media (max-width: 900px) { html:not([data-efectos="off"]) body::after { display: none; } }

/* ---------- B3 · tarjetas: borde con degradado en las destacadas (post-evento y noticia de la semana) ---------- */
html:not([data-efectos="off"]) :is(.pe-card, .sa-noticia) { border: 1px solid transparent;
  background: linear-gradient(var(--t-panel), var(--t-panel)) padding-box, linear-gradient(135deg, rgba(255, 154, 92, .9), rgba(255, 122, 46, .10) 42%, rgba(255, 122, 46, .55)) border-box; }

@media (prefers-reduced-motion: no-preference) {
  /* B8 · cambio de página: fundido corto con un desplazamiento mínimo (sin fondo: no hay parpadeo) */
  html:not([data-efectos="off"]) .pagina.entra-pagina { animation: ef-pagina 240ms var(--ef-curva) backwards; }
  @keyframes ef-pagina { from { opacity: 0; transform: translateY(6px); } }

  /* B3 · entrada escalonada (la clase la pone efectos.js: máx. 8, 50 ms entre una y otra) */
  html:not([data-efectos="off"]) .ef-in { animation: ef-tarjeta 340ms var(--ef-curva) backwards; animation-delay: calc(var(--ef-i, 0) * 50ms); }
  @keyframes ef-tarjeta { from { opacity: 0; transform: translateY(8px); } }

  /* B3 · elevación al pasar el cursor y respuesta de pulsación */
  @media (hover: hover) and (pointer: fine) {
    html:not([data-efectos="off"]) :is(.inf-card, .sa-card, .tr, .tarjeta, .val-card, .mt-card, .dv-card, .rl-card):hover { transform: translateY(-2px);
      box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 122, 46, .2); }
  }
  html:not([data-efectos="off"]) :is(.inf-card, .sa-card, .tr, .tarjeta, .cb-cab):active { transform: scale(.98); }
  html:not([data-efectos="off"]) :is(.inf-card, .sa-card, .tr, .tarjeta, .val-card, .mt-card, .dv-card, .rl-card) { transition: transform var(--ef-rapido) var(--ef-curva), box-shadow var(--ef-medio) ease, background-color var(--ef-rapido) ease, border-color var(--ef-rapido) ease; }

  /* B4 · destello breve en VIX / ES / NQ al cambiar (capa con opacity; verde si sube, rojo si baja) */
  html:not([data-efectos="off"]) :is(.ef-sube, .ef-baja) { position: relative; }
  html:not([data-efectos="off"]) :is(.ef-sube, .ef-baja)::after { content: ""; position: absolute; inset: -2px 0; border-radius: 6px; pointer-events: none; opacity: 0; animation: ef-destello 700ms ease-out; }
  html:not([data-efectos="off"]) .ef-sube::after { background: var(--t-sube); }
  html:not([data-efectos="off"]) .ef-baja::after { background: var(--t-baja); }
  @keyframes ef-destello { 0% { opacity: .34; } 100% { opacity: 0; } }

  /* B5 · minigráficos: el trazo se dibuja y el relleno entra con un fundido (efectos.js fija --ef-len) */
  html:not([data-efectos="off"]) svg.ef-trazo polyline, html:not([data-efectos="off"]) svg.ef-trazo path.ef-linea { stroke-dasharray: var(--ef-len); stroke-dashoffset: var(--ef-len); animation: ef-dibujar 720ms var(--ef-curva) 80ms forwards; }
  html:not([data-efectos="off"]) svg.ef-trazo polygon { animation: ef-relleno 600ms ease-out 220ms backwards; }
  @keyframes ef-dibujar { to { stroke-dashoffset: 0; } }
  @keyframes ef-relleno { from { opacity: 0; } }

  /* B6 · punto «en vivo» con pulso suave (transform + opacity) */
  html:not([data-efectos="off"]) .pulso, html:not([data-efectos="off"]) .chip-vivo::before, html:not([data-efectos="off"]) .pag-act:not(.viejo)::before { animation: ef-vivo 2.2s ease-in-out infinite; }
  @keyframes ef-vivo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } }
  /* los pulsos de alto impacto de siempre ya no son infinitos: unos ciclos y se quedan quietos */
  html:not([data-efectos="off"]) :is(.rojo-chip, .alto-impacto, .cb.alto, .agenda-bc .ag.importante) { animation-iteration-count: 4; }

  /* B6 · alertas urgentes: borde que respira; 4 ciclos y se detiene (o al tocar: .ef-quieto) */
  html:not([data-efectos="off"]) :is(.banda-linea.rojo, .alerta-sesgo.rojo, #alertas-movil[data-nivel="rojo"] #alertas-resumen) { position: relative; }
  html:not([data-efectos="off"]) :is(.banda-linea.rojo, .alerta-sesgo.rojo, #alertas-movil[data-nivel="rojo"] #alertas-resumen)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 122, 122, .85); opacity: 0; animation: ef-respira 2.6s ease-in-out 4; }
  html:not([data-efectos="off"]) .ef-quieto::after, html:not([data-efectos="off"]) .ef-quieto *::after { animation: none; }
  @keyframes ef-respira { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }

  /* B7 · desplegables cb: una sola duración y curva, flecha que gira y contenido que se funde al abrir */
  html:not([data-efectos="off"]) .cb-cuerpo { transition: grid-template-rows var(--ef-medio) var(--ef-curva), visibility 0s var(--ef-medio); }
  html:not([data-efectos="off"]) .cb.abierta > .cb-cuerpo { transition: grid-template-rows var(--ef-medio) var(--ef-curva), visibility 0s; }
  html:not([data-efectos="off"]) .cb > .cb-cuerpo > .cb-plie > .cb-in { opacity: 0; transform: translateY(-4px); transition: opacity 180ms ease, transform var(--ef-medio) var(--ef-curva); }
  html:not([data-efectos="off"]) .cb.abierta > .cb-cuerpo > .cb-plie > .cb-in { opacity: 1; transform: none; transition-delay: 60ms; }
  html:not([data-efectos="off"]) :is(.cb-cab, .sa-card, .ie-nar > summary, #alertas-resumen) .chev { transition: transform var(--ef-medio) var(--ef-curva); }

  /* B11 · logo: entrada muy breve al abrir; luego estático */
  html:not([data-efectos="off"]) .marca .logo { animation: ef-logo 420ms var(--ef-curva) backwards; }
  @keyframes ef-logo { from { opacity: 0; transform: scale(.7) rotate(-8deg); } }
}

/* ---------- ahorro en pantallas estrechas: nada de pulsos largos ni elevaciones ---------- */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html:not([data-efectos="off"]) :is(.rojo-chip, .alto-impacto, .cb.alto, .agenda-bc .ag.importante) { animation-iteration-count: 2; }
  html:not([data-efectos="off"]) .chip-vivo::before { animation-iteration-count: 3; }
  html:not([data-efectos="off"]) .ef-in { animation-duration: 280ms; animation-delay: calc(var(--ef-i, 0) * 40ms); }
}

/* ---------- opción de la Guía básica ---------- */
.gl-efectos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gl-efectos label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-weight: 600; color: var(--t-texto); }
.gl-efectos input { width: 18px; height: 18px; accent-color: var(--t-naranja); }

/* con «reducir movimiento» del sistema nada de lo anterior se mueve (tema.css ya recorta duraciones; aquí se quitan las entradas) */
@media (prefers-reduced-motion: reduce) {
  .ef-in, .pagina.entra-pagina, .marca .logo, .ef-sube::after, .ef-baja::after, svg.ef-trazo * { animation: none !important; }
  svg.ef-trazo polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
}