/* Standalone interface: rem units use the browser's accessible 16px baseline. */
:root {
  color-scheme: light;
  /* Paleta del Figma «Chatbot - RTVE» (página Styles): neutros y coral. */
  --bg-main: #fff;
  --bg-subtle: #f3f3f3;
  --bg-hover: #ebebeb;
  --surface: #fff;
  --text-primary: #1a1a1a;
  --text-secondary: #666;
  --text-muted: #666;
  --text-soft: #4d4d4d;
  --heading: #393637;
  --reading-width: 760px;
  --border-color: #ccc;
  --border-subtle: #e6e6e6;
  --border-field: #b3b3b3;
  --border-button: #999;
  /* Redondez común del campo de pregunta, los botones (i, enviar, nueva conversación) y las tarjetas. */
  --radius: 4px;
  --rule-strong: #4f4c4d;
  /* Color del bot, #d25000 (4,3:1 sobre blanco): títulos, iconos y el botón de enviar; el
     oscuro (5,6:1), en texto pequeño y bajo texto blanco; el claro, fondo de la pregunta. */
  --accent: #b24400;
  --accent-bright: #d25000;
  --accent-soft: #fbefe8;
  --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Noto Serif', Georgia, serif;
  --font-header: 'Noto Serif', Georgia, serif;
  --party-pp: #2563b0;
  --party-psoe: #c71c29;
  --party-vox: #417d16;
  --party-podemos: #713887;
  --party-chunta: #077783;
  --party-par: #986209;
  --party-teruel-existe: #526475;
  --party-iu-sumar: #a52a64;
}
* { box-sizing: border-box; }
html { height: 100%; font-size: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg-main); color: var(--text-primary); font: 400 16px/1.6 var(--font-body); }
/* El lector conserva su panel a toda altura, con scroll propio. */
button, input, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
button, a, summary, [contenteditable] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button { -webkit-appearance: none; appearance: none; }
[hidden], .ghost, .useful.ghost { display: none !important; }
.sr-only, legend.ghost { display: block !important; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 1; }
svg { width: 24px; height: 24px; flex-shrink: 0; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 10; padding: 10px 18px; background: white; }
.skip-link:focus { top: 10px; }

/* Botones con borde fino y redondos, como el campo de pregunta: el de icono, círculo; el de texto, píldora. */
.answer-logo { width: 43px; height: auto; }
.icon-button { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--surface); }
.icon-button:hover { border-color: var(--border-button); background: var(--bg-subtle); }
.outline-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px 10px 16px; border: 1px solid var(--border-field); border-radius: var(--radius); background: var(--surface); font: 500 18px/1.2 var(--font-body); color: var(--text-primary); text-align: center; }
.outline-button:hover:not(:disabled) { background: var(--bg-subtle); }
.outline-button:disabled { opacity: .45; }
.outline-button img { width: 20px; height: 20px; flex-shrink: 0; }
.mainbodier { min-height: 0; flex: 1; display: flex; flex-direction: column; width: 100%; }
.election-context { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; flex-shrink: 0; width: min(1040px, calc(100% - 48px)); margin: 0 auto; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.election-context p { margin: 0; }
.election-context__date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.election-context__date > span { font-size: 12px; color: var(--text-secondary); }
.election-context__date strong { font: 500 18px/1.4 var(--font-header); }
.election-context__programs { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.container { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #c9c9bf transparent; scroll-padding: 24px; padding: 0 max(24px, calc((100% - 1040px) / 2)); }
.welcome { padding: 48px 0 28px; animation: welcome-in .55s ease-out both; }
.welcome__intro { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 64px; }
.eyebrow__line { width: 24px; height: 2px; background: var(--accent-bright); }
.welcome h1 { font: 400 clamp(40px, 4.9vw, 65px)/1.08 var(--font-display); letter-spacing: -1.9px; margin: 24px 0 20px; }
.welcome h1 em { color: var(--accent); font-weight: 400; }
.welcome__lead { max-width: 445px; margin: 0; font-size: 15px; line-height: 1.75; color: var(--text-secondary); }
.entry-points { position: relative; display: grid; gap: 12px; }
.entry-points::before { content: ''; position: absolute; inset: -22px -24px; z-index: -1; background-image: radial-gradient(#c5c4b8 .7px, transparent .7px); background-size: 8px 8px; mask-image: linear-gradient(to right, transparent, black); opacity: .6; }
.entry-point { display: flex; align-items: center; text-align: left; gap: 16px; border: 1px solid var(--border-color); background: var(--surface); padding: 22px; border-radius: 12px; transition: border-color .18s, transform .18s; }
.entry-point:hover { border-color: var(--accent); transform: translateY(-2px); }
.entry-point__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--bg-subtle); }
.entry-point--news .entry-point__icon { background: var(--accent-soft); color: var(--accent); }
.entry-point__text { display: grid; gap: 3px; }
.entry-point__text strong { font-size: 15px; font-weight: 600; }
.entry-point__text > span { font-size: 12px; color: var(--text-secondary); }
.entry-point__arrow { margin-left: auto; color: var(--text-secondary); font-size: 20px; }
.entry-points__note { text-align: right; color: var(--text-muted); font-size: 11px; margin: 0 4px; }

/* Editorial questions remain driven by suggested_questions.json. */
.slideBox { margin-top: 44px; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.section-heading h2 { font-size: 15px; font-weight: 500; margin: 0; }
.section-heading > span { font-size: 11px; color: var(--text-muted); }
.slideOptions ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; counter-reset: topics; }
.slideOptions li { counter-increment: topics; min-width: 0; }
.slideOptions li > button { position: relative; width: 100%; height: 100%; min-height: 112px; padding: 32px 20px 16px; border: 1px solid var(--border-color); border-radius: 10px; background: transparent; text-align: left; font-size: 13px; line-height: 1.6; transition: background .18s, border-color .18s; }
.slideOptions li > button::before { content: counter(topics, decimal-leading-zero); position: absolute; left: 20px; top: 10px; font-size: 9px; letter-spacing: 1px; color: var(--text-muted); }
.slideOptions li > button::after { content: '↗'; position: absolute; top: 8px; right: 16px; color: var(--text-muted); }
.slideOptions strong { font-weight: 600; }
.slideOptions button:hover, .suggestion-selected > button { background: var(--surface); border-color: var(--accent); }
.controlBox { display: none; }
.conversation-heading { display: none; justify-content: space-between; gap: 12px; align-items: center; border-bottom: 1px solid var(--border-subtle); padding: 24px 0 18px; }
.conversation-heading > span:last-child { font-size: 11px; color: var(--text-muted); }
.has-conversation .welcome { display: none; }
.has-conversation .conversation-heading { display: flex; }
.has-conversation .container { padding-inline: max(24px, calc((100% - 880px) / 2)); }
.has-conversation .questionBox { max-width: 880px; }
.myDialogue:empty { display: none; }
.myDialogue { padding: 0 0 24px; }

/* The reader and electoral workspace keep independent conversation state. */
body:not([data-workspace='elections']) .electoral-workspace,
body:not([data-workspace='elections']) #new-chat,
body:not([data-workspace='news']) .news-workspace,
body:not([data-workspace='news']) #news-reset { display: none !important; }
/* Actualidad, según el Figma: portada («Chatbot») con el campo bajo el título y conversación
   («Chatbot Result») con cabecera compacta y el campo fijo abajo, como en otros chatbots. */
.news-workspace { width: min(1228px, calc(100% - 64px)); margin: 0 auto; padding: 48px 0 80px; }
.news-workspace.is-conversation { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 40px 0 0; }
.news-header { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; }
.news-title { margin: 0; font: 400 clamp(44px, 6.5vw, 70px)/1.314 var(--font-display); letter-spacing: -.04em; text-align: center; overflow-wrap: anywhere; }
/* Logo «contexta rtve»: el mismo h1 es el título grande de la portada (44-70 px), la cabecera fija de
   la conversación (28 px) y el de móvil (30 y 23 px), así que va en em. Con 1.05em sus minúsculas
   (51 % de la imagen) miden lo que las de Noto Serif (.535em), como el «Contexta» en texto de antes,
   y los márgenes conservan el alto de línea (1.31em). */
.news-title__logo { display: block; width: auto; height: 1.05em; margin: .13em auto; }
.news-header__tools { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 12px; }
.news-brand { position: relative; display: inline-block; vertical-align: top; }
/* «BETA» lo pinta el CSS: fuera del texto del H1, que para Google queda solo «Contexta RTVE» (alt del logo). */
.news-brand::after { content: "BETA"; position: absolute; left: calc(100% + 8px); top: .15em; padding: 4px 6px 3px; border: 1px solid var(--border-color); border-radius: 4px; font: 600 11px/1 var(--font-body); letter-spacing: .08em; color: var(--text-secondary); white-space: nowrap; }
#news-reset { display: none; padding: 10px 20px 10px 16px; border-color: var(--text-primary); }
.news-lead { max-width: 760px; margin: 24px auto 0; padding-bottom: 18px; font: 300 20px/30px var(--font-body); color: var(--text-soft); text-align: center; }
/* Si el lema no cabe en una línea, se parte entre las dos frases, no dejando «RTVE» sola. */
.news-lead__end { display: inline-block; }
/* Nota de fase experimental, pequeña y pegada al lema; solo en la portada. */
.news-experimental { max-width: 640px; margin: -8px auto 0; font: 300 14px/20px var(--font-body); color: var(--text-secondary); text-align: center; text-wrap: balance; }
.is-conversation .news-experimental { display: none; }
/* Aviso de IA bajo el campo fijo, solo en la conversación (setConversation lo muestra). */
#news-disclaimer { display: block; flex: 1 0 100%; font-size: 14px; line-height: 20px; text-align: center; text-wrap: balance; }
#news-disclaimer img { display: inline-block; margin: 0 6px 0 0; vertical-align: -3px; }
/* En la conversación, la cabecera (la marca) queda fija arriba como segunda cabecera, en vez de
   repetir el logo en cada respuesta. El fondo se extiende a los lados (sombra, que no ensancha la
   página) pero no por debajo de la línea; bajo ella, un degradado funde el texto que pasa por
   debajo en vez de cortarlo en seco. */
.is-conversation .news-header { position: sticky; top: 0; z-index: 3; justify-content: flex-start; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); background: var(--bg-main); box-shadow: 0 -100vmax 0 100vmax var(--bg-main); clip-path: inset(0 -100vmax -24px); }
.is-conversation .news-header::after { content: ''; position: absolute; top: calc(100% + 1px); left: 0; right: 0; height: 24px; background: linear-gradient(var(--bg-main), rgba(255, 255, 255, 0)); pointer-events: none; }
.is-conversation .news-title { font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-align: left; color: var(--heading); }
.is-conversation .news-title__logo { margin-left: 0; }
.is-conversation .news-header__tools { position: static; }
.is-conversation .news-brand { display: inline-flex; align-items: flex-start; gap: 8px; }
.is-conversation .news-brand::after { position: static; margin-top: .1em; }
.is-conversation #news-reset { display: inline-flex; margin-left: auto; }
/* En la portada, la barra mide lo mismo que en la conversación (680 px): no cambia de ancho al preguntar. */
.news-composer { max-width: 680px; margin: 0 auto; padding: 30px 0 24px; display: flex; flex-direction: column; gap: 15px; }
/* Barra de pregunta y botón de enviar, con la redondez común (--radius). */
#news-question-form { display: flex; align-items: flex-end; gap: 12px; min-height: 68px; padding: 10px 10px 10px 28px; border: 1px solid var(--border-field); border-radius: var(--radius); background: var(--surface); box-shadow: 0 4px 16px rgba(0, 0, 0, .06); }
#news-question-form:focus-within { border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(210, 80, 0, .18); }
#news-question { flex: 1; min-width: 0; min-height: 44px; max-height: 150px; field-sizing: content; padding: 7px 0; border: 0; outline: none; background: none; resize: none; font: 300 20px/30px var(--font-body); color: var(--text-primary); }
#news-send { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius); background: var(--accent-bright); }
#news-send img { transform: rotate(90deg); }
#news-send:hover:not(:disabled) { background: var(--accent); }
/* El estado («Consultando…», errores) solo se anuncia a lectores de pantalla; no se ve. */
.news-composer__meta { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* En la conversación, el campo queda fijo al pie de la ventana. Por encima, un degradado
   transparente deja ver el contenido que pasa por debajo; bajo el campo, blanco para el aviso.
   Mensajes y campo comparten una sola columna centrada (la medida de lectura de la respuesta). */
.is-conversation #news-messages { width: 100%; max-width: 680px; margin: 0 auto 30px; }
.is-conversation .news-composer { position: sticky; bottom: 0; z-index: 2; width: 100%; max-width: 680px; flex-flow: row wrap; align-items: center; gap: 10px 24px; margin: auto auto 0; padding: 40px 0 max(16px, env(safe-area-inset-bottom)); background: linear-gradient(rgba(255, 255, 255, 0), #fff 40px); }
.is-conversation #news-question-form { flex: 1 0 100%; }
:root:has(.news-workspace.is-conversation) { scroll-padding-bottom: 170px; }
.news-topics { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "status" "carousel"; align-items: center; column-gap: 20px; padding-top: 32px; }
/* Tamaño fluido: 24 px con 375 px de ancho → 30 px desde 1280 px, sin salto en el corte de móvil. En rem,
   respeta la letra que elige el lector en el navegador. */
.news-topics h2 { grid-area: title; margin: 0; font: 300 clamp(1.5rem, 1.345rem + .663vw, 1.875rem)/36px var(--font-display); color: var(--accent-bright); }
#news-feed-status { grid-area: status; margin: 0; padding-top: 20px; font-size: 18px; line-height: normal; color: var(--text-secondary); }
#news-feed-status:empty { padding-top: 0; }
/* Carrusel: tarjetas a todo el ancho, alineadas con el título. Las flechas van encima, centradas en
   vertical sobre las tarjetas y en sus bordes (comparten el área de la lista), cuadradas con la
   redondez común; debajo, los puntos centrados y la pausa a la derecha. */
.news-carousel { grid-area: carousel; display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; grid-template-areas: "list list list" ". dots pause"; align-items: center; row-gap: 12px; padding: 16px 0 24px; }
.news-carousel__nav { grid-area: list; align-self: center; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.news-carousel__nav img { width: 28px; height: 28px; }
#news-prev { justify-self: start; margin-left: -22px; }
#news-next { justify-self: end; margin-right: -22px; }
/* Al principio o al final no hay a dónde ir: la flecha no se ve (el carrusel vuelve solo al inicio). */
.news-carousel__nav:disabled { visibility: hidden; }
.news-carousel__nav--next img { transform: scaleX(-1); }
.news-suggestions { grid-area: list; display: flex; gap: 20px; padding: 4px 2px 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: none; }
.news-suggestions::-webkit-scrollbar { display: none; }
/* La copia de las tarjetas solo sirve para que el avance continuo dé la vuelta sin salto. */
.news-suggestions:not(.is-looping) .news-suggestion--clone { display: none; }
.news-suggestions[aria-busy='true']:empty { height: 360px; background: repeating-linear-gradient(90deg, rgba(230, 230, 230, .3) 0 250px, transparent 250px 270px); }
/* Tarjetas: foto pequeña de la noticia en la que se basa y la pregunta, en la caja del Figma (relleno #e6e6e6
   al 30 % y 16 px de margen interior, sin borde); al pasar, el gris se oscurece. */
.news-suggestion { flex: 0 0 250px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px; border: 0; border-radius: var(--radius); overflow: hidden; background: rgba(230, 230, 230, .3); text-align: left; transition: background .15s; }
.news-suggestion:hover:not(:disabled) { background: rgba(230, 230, 230, .6); }
.news-suggestion:focus-visible { outline-offset: -2px; }
/* La protagonista es la pregunta: la foto, baja y atenuada, solo da contexto; al pasar o con el
   foco recupera presencia como pista de que la tarjeta se puede pulsar. */
.news-suggestion__media { height: 96px; margin-bottom: 8px; border-radius: var(--radius); overflow: hidden; background: var(--bg-subtle); }
.news-suggestion__media img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.7); transition: opacity .2s, filter .2s; }
.news-suggestion:hover .news-suggestion__media img, .news-suggestion:focus-visible .news-suggestion__media img { opacity: .85; filter: none; }
/* La pregunta, con la letra del campo «Escribe tu pregunta...» en gris neutral/600 (#666); abajo a la
   derecha, la flecha del Figma. */
.news-suggestion strong { font: 300 20px/30px var(--font-body); color: var(--text-secondary); }
.news-suggestion > img { width: 32px; height: 32px; margin-top: auto; align-self: flex-end; }
/* Pausa del avance automático: dos barras; pulsado, un triángulo de reanudar. */
.news-carousel__pause { grid-area: pause; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border-button); border-radius: 50%; background: var(--surface); }
.news-carousel__pause span { width: 10px; height: 12px; border-right: 3px solid var(--text-primary); border-left: 3px solid var(--text-primary); }
.news-carousel__pause[aria-pressed='true'] span { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--text-primary); }
.news-carousel__dots { grid-area: dots; display: flex; justify-content: center; align-items: center; gap: 10px; }
.news-dot { width: 8px; height: 8px; border-radius: 50%; background: #d9d9d9; cursor: pointer; }
.news-dot.is-active { width: 10px; height: 10px; background: var(--accent-bright); }
.current-turn { padding: 60px 0 30px; border-bottom: 2px solid var(--rule-strong); overflow-wrap: anywhere; scroll-margin-top: 96px; }
/* La línea separa conversaciones; la última no la lleva (quedaría pegada al campo). */
.current-turn:last-child { border-bottom: 0; }
/* La pregunta, como en un chat: burbuja a la derecha con el color del Figma, esquinas de mensaje
   y letra más ligera que la respuesta, que es la protagonista. */
.current-turn .reader-turn__question { max-width: 85%; margin: 0 0 36px auto; padding: 16px 22px; border-radius: 20px 20px 4px 20px; background: var(--accent-soft); font: 400 18px/1.45 var(--font-body); }
/* Medida de lectura: unos 70 caracteres por línea (el ancho de la columna). */
/* Interlineado 1,5 (como en móvil, 16/24): legible sin quedar suelto. */
.current-turn .answerText { max-width: 800px; font: 300 20px/32px var(--font-body); }
.current-turn .answerText p { margin: 0 0 24px; }
.current-turn .answerText > :last-child { margin-bottom: 0; }
.current-turn .answerText strong { font-weight: 500; }
.current-turn[aria-busy='true'] .answerText { color: var(--text-secondary); }
/* Espera: la lupa del logotipo enciende sus puntos por turnos y cada etapa entra con un fundido (sin movimiento si se pide reducirlo). */
.current-turn .distractor { gap: 16px; padding: 4px 0 8px; }
.current-turn .searching-lens { flex: none; width: 36px; height: 32px; }
.current-turn .searching-lens svg { display: block; width: 100%; height: 100%; }
.current-turn .searching-lens rect { animation: searching-dot 1.2s ease-in-out infinite; }
.current-turn .searching-lens rect:nth-child(2) { animation-delay: .2s; }
.current-turn .searching-lens rect:nth-child(3) { animation-delay: .4s; }
.current-turn .stage-label { font: 300 18px/1.4 var(--font-body); color: var(--text-soft); }
.current-turn .stage-label.is-new { animation: stage-in .35s ease-out; }
@keyframes searching-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
/* Pasos de la búsqueda (current-news.js, researchLog): en gris, con el titular enlazado de cada noticia
   que se lee; al empezar la respuesta se pliegan en «Ha consultado N noticias de RTVE», con flecha propia. */
.research { margin: 0 0 24px; }
.research__summary { list-style: none; }
.research__summary::-webkit-details-marker { display: none; }
.research.is-done .research__summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 400 16px/1.4 var(--font-body); color: var(--text-secondary); }
.research.is-done .research__summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-1px) rotate(-45deg); transition: transform .15s; }
.research.is-done[open] .research__summary::after { transform: translateY(-3px) rotate(45deg); }
.research.is-done .research__summary:hover { color: var(--accent); }
.research__steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font: 300 16px/1.45 var(--font-body); color: var(--text-secondary); }
.research.is-done .research__steps { margin-top: 12px; }
.research__steps li { position: relative; padding-left: 18px; }
.research__steps li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--border-button); }
.research__steps li.is-new { animation: stage-in .35s ease-out; }
.research__steps a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-button); text-underline-offset: 3px; }
.research__steps a:hover, .research__steps a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
@keyframes stage-in { from { opacity: 0; transform: translateY(6px); } }
/* Cita: cuadrado naranja con el número en blanco. El ::after, más grande que el cuadrado, agranda la
   zona de toque sin mover el texto. */
.current-citation { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em; margin: 0 1px; padding: 0 .3em; background: var(--accent-bright); color: #fff; font: 500 .75em/1 var(--font-body); text-decoration: none; vertical-align: .2em; }
.current-citation::after { content: ''; position: absolute; inset: -6px -2px; }
.current-citation:hover, .current-citation:focus-visible { background: var(--accent); color: #fff; }
/* Vista previa de la noticia de una cita (current-news.js): flota sobre la cabecera y el campo fijos;
   toda la tarjeta es el enlace a la noticia. */
.citation-preview { position: fixed; z-index: 5; display: flex; gap: 12px; width: min(360px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); color: var(--text-primary); text-decoration: none; }
.citation-preview[hidden] { display: none; }
.citation-preview img { flex: 0 0 96px; width: 96px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--border-subtle); }
.citation-preview__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.citation-preview__meta { font-size: 13px; color: var(--text-secondary); }
.citation-preview strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font: 400 16px/1.35 var(--font-display); }
.citation-preview__cta { font: 500 14px/1.3 var(--font-body); color: var(--accent-bright); }
.citation-preview:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.current-sources h3, .current-followups h3 { margin: 0; padding: 40px 0 20px; font: 300 24px/32px var(--font-display); color: var(--heading); }
.current-followups h3 { padding-bottom: 0; }
.current-sources__grid { display: flex; flex-direction: column; gap: 24px; }
.current-source { display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-template-areas: "image body"; padding-bottom: 24px; border-bottom: 1px solid var(--border-color); }
.current-source:last-child { padding-bottom: 0; border-bottom: 0; }
.current-source:not(:has(.current-source__image)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body"; }
.current-source__image { grid-area: image; padding-right: 20px; }
.current-source__image img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 228; object-fit: cover; border-radius: 5px; background: var(--border-subtle); }
.current-source__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.current-source__meta { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; font-size: 16px; line-height: normal; color: var(--text-secondary); }
.current-source__meta strong { font-weight: 700; }
.current-source__title { margin: 0; font: 400 18px/26px var(--font-display); }
.current-source__title a { color: inherit; text-decoration: none; }
.current-source__title a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; }
.current-followups > button { display: flex; align-items: center; gap: 20px; width: 100%; padding: 20px 0; border: 0; border-top: 1px solid var(--border-color); background: none; text-align: left; font: 300 clamp(1rem, .896rem + .442vw, 1.25rem)/1.6 var(--font-body); color: var(--text-primary); }
.current-followups > button:first-of-type { border-top: 0; }
.current-followups > button span { flex: 1; }
.current-followups > button img { width: 32px; height: 32px; }
.current-followups > button:hover:not(:disabled) { color: var(--accent); }
.current-turn > .outline-button { margin-top: 24px; }
/* Invitación a Elecciones bajo la primera respuesta de las generales (current-news.js). */
.current-elections { max-width: 800px; margin-top: 32px; padding: 20px 24px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.current-elections p { margin: 0 0 16px; font: 300 18px/1.5 var(--font-body); }
.current-elections .outline-button { text-decoration: none; }
/* Móvil: pantallas «Chatbot · Móvil» y «Chatbot Result · Móvil» (390 px). */
@media (max-width: 720px) {
  .news-workspace { width: calc(100% - 32px); padding: 45px 0 40px; }
  .news-workspace.is-conversation { padding: 16px 0 0; }
  .news-title { font-size: 30px; line-height: 35px; letter-spacing: 0; }
  .news-header__tools { top: -29px; }
  .news-brand { display: inline-flex; align-items: flex-start; gap: 6px; }
  .news-brand::after { position: static; margin-top: .1em; font-size: 10px; }
  /* En la portada, «BETA» va centrado encima del logo: así el logo queda centrado, no ladeado. */
  .news-workspace:not(.is-conversation) .news-brand { flex-direction: column-reverse; align-items: center; }
  .news-workspace:not(.is-conversation) .news-brand::after { margin-top: 0; }
  .news-lead { margin-top: 10px; padding-bottom: 0; font-size: 16px; line-height: 22px; }
  .news-composer { padding: 25px 0 0; gap: 0; }
  #news-question-form { min-height: 62px; padding: 7px 7px 7px 20px; }
  #news-question { padding: 10px 0; font-size: 18px; line-height: 24px; }
  .news-experimental { margin-top: 8px; font-size: 13px; line-height: 18px; }
  #news-disclaimer { font-size: 12px; line-height: 16px; }
  .is-conversation .news-header { gap: 16px; }
  .is-conversation .news-title { font-size: 23px; font-weight: 400; }
  .is-conversation .news-header__tools { margin-left: auto; }
  .is-conversation #news-reset { flex: 1 0 100%; margin-left: 0; padding: 10px 16px 10px 12px; font-size: 16px; }
  .is-conversation #news-messages { margin-bottom: 24px; }
  .is-conversation .news-composer { gap: 8px; padding: 24px 0 max(12px, env(safe-area-inset-bottom)); background: linear-gradient(rgba(255, 255, 255, 0), #fff 24px); }
  :root:has(.news-workspace.is-conversation) { scroll-padding-bottom: 150px; }
  .news-topics { row-gap: 16px; padding-top: 31px; }
  .news-topics:has(#news-feed-status:empty) { row-gap: 0; }
  .news-topics h2 { line-height: 34px; color: var(--text-primary); }
  #news-feed-status { padding: 0; font-size: 14px; line-height: 20px; color: var(--text-soft); }
  /* En móvil las flechas quedan dentro del borde (fuera, la página se ensancharía). */
  .news-carousel__nav { width: 36px; height: 36px; }
  .news-carousel__nav img { width: 22px; height: 22px; }
  #news-prev { margin-left: 4px; }
  #news-next { margin-right: 4px; }
  .news-suggestions { gap: 15px; }
  .news-suggestions[aria-busy='true']:empty { height: 340px; background: repeating-linear-gradient(90deg, rgba(230, 230, 230, .3) 0 220px, transparent 220px 235px); }
  .news-suggestion { flex-basis: 220px; }
  .news-suggestion__media { height: 84px; }
  .news-suggestion strong { font-size: 18px; line-height: 24px; }
  .current-turn { padding: 24px 0; }
  .current-turn { scroll-margin-top: 150px; }
  .current-turn .reader-turn__question { max-width: 90%; margin-bottom: 16px; padding: 14px 16px; font-size: 18px; line-height: 26px; }
  .current-turn .answerText { font-size: 16px; line-height: 24px; color: var(--text-soft); }
  .current-turn .stage-label { font-size: 16px; }
  .current-turn .searching-lens { width: 28px; height: 25px; }
  .research__steps, .research.is-done .research__summary { font-size: 14px; }
  .current-turn .answerText p { margin-bottom: 16px; }
  .current-elections { margin-top: 24px; padding: 16px; }
  .current-elections p { font-size: 16px; line-height: 24px; }
  .current-elections .outline-button { font-size: 16px; }
  .current-citation { background: var(--accent); }
  .current-sources h3, .current-followups h3 { padding: 32px 0 16px; font-size: 22px; line-height: 29px; color: var(--text-primary); }
  .current-sources__grid { gap: 0; }
  .current-source { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "image body"; gap: 12px; padding: 20px 0; border-top: 1px solid var(--border-field); border-bottom: 0; }
  .current-source:first-child { padding-top: 12px; border-top: 0; }
  .current-source:last-child { padding-bottom: 20px; }
  .current-source__image { padding-right: 0; }
  .current-source__image img { width: 96px; height: 64px; aspect-ratio: auto; border-radius: 4px; }
  .current-source__body { gap: 4px; }
  .current-source__meta { gap: 8px; font-size: 14px; }
  .current-source__meta strong { font-weight: 500; color: var(--text-soft); }
  .current-source__title { font-size: 16px; line-height: 24px; }
  .current-followups > button { gap: 12px; padding: 14px 0; line-height: 1.5; }
  .current-followups > button:first-of-type { border-top: 1px solid var(--border-color); }
  .current-followups > button img { width: 24px; height: 24px; }
}
.reader-turn__question { background: var(--bg-subtle); padding: 12px 18px; border-radius: 12px 12px 2px 12px; margin: 0 0 24px auto; width: fit-content; max-width: 90%; font-size: 16px; }
@media (max-width: 720px) {
  .election-context { width: calc(100% - 40px); align-items: flex-start; flex-direction: column; gap: 6px; }
  .election-context__date strong { font-size: 16px; }
}

/* Composer is a flex sibling, so it never covers the answer or mobile keyboard. */
.questionBox { flex-shrink: 0; width: min(1040px, calc(100% - 48px)); margin: 0 auto; padding-top: 16px; background: var(--bg-main); }
.questionBox form { border: 1px solid #bfc1b4; border-radius: 15px; background: var(--surface); box-shadow: 0 5px 18px #24262006; transition: border-color .15s, box-shadow .15s; }
.questionBox form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px #ed641d0e; }
fieldset.question { display: flex; align-items: flex-end; gap: 12px; border: 0; margin: 0; padding: 10px 12px 10px 20px; }
.wrapper-input { flex: 1; min-width: 0; display: flex; align-items: center; }
#question { width: 100%; min-height: 44px; max-height: 140px; overflow-y: auto; padding: 11px 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; outline: none; }
#question:empty::before { content: attr(data-placeholder); pointer-events: none; color: var(--text-muted); }
.stop { display: grid; place-items: center; border: 0; background: none; color: var(--text-muted); width: 40px; height: 40px; flex-shrink: 0; }
.stop svg { width: 18px; height: 18px; }
.send { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent); border: 0; color: white; border-radius: 10px; transition: background .18s; }
.send:hover:not(:disabled) { background: #953500; }
.send:disabled { background: var(--bg-subtle); color: #8b8e81; }
.composer-meta { padding: 10px 3px 0; display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--text-secondary); }
.composer-meta > span:first-child { display: flex; gap: 7px; align-items: center; }
.source-indicator { width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; }
.ai-disclaimer { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 16px; line-height: normal; color: var(--text-secondary); }
.ai-disclaimer img { width: 16px; height: 16px; flex-shrink: 0; }

/* Conversation: question, assistant identity, answer, then supporting material. */
.answerBox { padding: 28px 0 24px; border-bottom: 1px solid var(--border-color); overflow-wrap: anywhere; }
.answerBox:last-child { border-bottom: 0; }
header.question { display: flex; justify-content: flex-end; margin-bottom: 24px; }
header.question > span { max-width: 80%; background: #eaece3; border: 1px solid #e1e3d7; padding: 13px 20px; border-radius: 14px 14px 3px 14px; font-size: 15px; line-height: 1.6; }
.answer-identity { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 12px; font-weight: 600; }
.answer-identity__mark { font-size: 15px; letter-spacing: -1px; color: var(--accent); font-weight: 800; font-style: italic; background: var(--accent-soft); border-radius: 7px; padding: 3px 8px; }
.answer-wrapper { display: flex; flex-direction: column; align-items: stretch; }
.answer { min-width: 0; }
.answerText { font-size: 16px; line-height: 1.8; }
.answerText > :first-child { margin-top: 0; }
.answerText p { margin: 12px 0; }
.answerText ul, .answerText ol { padding-left: 23px; margin: 16px 0; }
.answerText li { margin: 12px 0; padding-left: 3px; }
.answerText li::marker { color: #888c7b; }
.answerText strong { font-weight: 600; }
.answerText h1, .answerText h2, .answerText h3, .answerText h4 { font: 500 25px/1.3 var(--font-display); margin: 26px 0 12px; }
.answerText h1 { font-size: 30px; }
.answerText blockquote { margin: 20px 0; border-left: 2px solid var(--border-color); padding-left: 20px; color: var(--text-secondary); }
.answerText pre { overflow-x: auto; padding: 16px; background: var(--bg-subtle); font-size: 13px; }
.answerText hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 24px 0; }
.source-note { font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border-subtle); padding-top: 14px; }
.cite { display: inline-block; border: 1px solid var(--border-color); padding: 1px 7px; margin: 2px; border-radius: 5px; font-size: 11px; line-height: 1.8; font-family: var(--font-body); font-weight: 500; vertical-align: baseline; background: var(--surface); text-decoration: none; color: var(--party-color, var(--text-secondary)); }
a.cite:hover { border-color: var(--accent); color: var(--accent); text-decoration: underline; }
.cite--pp, .party-group--pp, [data-party='pp'] { --party-color: var(--party-pp); }
.cite--psoe, .party-group--psoe, [data-party='psoe'] { --party-color: var(--party-psoe); }
.cite--vox, .party-group--vox, [data-party='vox'] { --party-color: var(--party-vox); }
.cite--podemos, .party-group--podemos, [data-party='podemos'] { --party-color: var(--party-podemos); }
.cite--chunta, .party-group--chunta, [data-party='chunta'] { --party-color: var(--party-chunta); }
.cite--par, .party-group--par, [data-party='par'] { --party-color: var(--party-par); }
.cite--teruel-existe, .party-group--teruel-existe, [data-party='teruel-existe'] { --party-color: var(--party-teruel-existe); }
.cite--iu-sumar, .party-group--iu-sumar, [data-party='iu-sumar'], .cite--sumar, .party-group--sumar, [data-party='sumar'] { --party-color: var(--party-iu-sumar); }
.cite--rtve { color: var(--accent); background: var(--accent-soft); border-color: #ebd5c4; }
.party-group { padding: 18px 22px; margin: 16px 0; border: 1px solid var(--border-subtle); border-left: 3px solid var(--party-color, var(--border-color)); border-radius: 0 10px 10px 0; background: var(--surface); }
.party-group__label { color: var(--party-color, var(--text-primary)); }
.party-group .party-group__label { font: 600 16px var(--font-body); margin: 0 0 12px; }
.party-group ul { margin: 0; }
.copy { order: 5; display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; border: 0; background: none; border-radius: 6px; padding: 10px 0; color: var(--text-secondary); font-size: 11px; margin-top: 12px; }
.copy svg { width: 15px; height: 15px; }
.copy:hover, .copy.copied { color: var(--accent); }
.copy .copy__done, .copy.copied .copy__label { display: none; }
.copy.copied .copy__done { display: inline; }
.answerBox[aria-busy='true'] .copy { display: none; }
.useful { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text-secondary); }
.stars { display: inline-flex; gap: 2px; }
.star { background: none; border: 0; padding: 4px; min-width: 32px; min-height: 36px; font-size: 24px; color: #939689; }
.star.selected, .useful:not(.rated) .stars:hover .star { color: var(--accent); }
.useful:not(.rated) .stars .star:hover ~ .star { color: #939689; }
.star.sending { opacity: .5; }
.useful.rated .star { cursor: default; }

/* Native details keeps every source available without flooding the answer. */
.sources-panel { order: 3; border: 1px solid var(--border-color); border-radius: 9px; margin-top: 20px; background: #ffffff60; }
.sources-panel__title { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 14px 16px; font-size: 12px; font-weight: 500; list-style: none; }
.sources-panel__title::-webkit-details-marker { display: none; }
.sources-panel__title::after { content: '+'; margin-left: auto; font-size: 19px; line-height: 1; }
.sources-panel[open] .sources-panel__title::after { content: '−'; }
.sources-panel__count { font-size: 10px; background: var(--bg-hover); border-radius: 4px; min-width: 20px; padding: 0 5px; text-align: center; }
.sources-list { list-style: none; padding: 4px 16px 16px; margin: 0; display: grid; gap: 16px; }
.source-item { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; border-left: 2px solid var(--party-color, var(--border-color)); padding-left: 12px; }
.source-party { color: var(--party-color, var(--text-primary)); font-size: 12px; font-weight: 600; }
.source-meta, .source-snippet { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.source-snippet { grid-column: 1 / -1; margin: 0; }
.source-meta { overflow-wrap: anywhere; }
.source-meta a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.source-meta a:hover { text-decoration-thickness: 2px; }

/* News cards remain useful when an article has no thumbnail. */
.related-news { order: 2; margin-top: 22px; }
.related-news__title, .follow-ups__title { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 600; margin: 0 0 12px; }
.related-news__title::before { content: ''; width: 14px; height: 2px; background: var(--accent-bright); }
.related-news__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.related-news__item { min-width: 0; display: flex; flex-direction: column; }
.related-news__card { display: flex; flex-direction: column; flex: 1; border: 1px solid var(--border-color); border-radius: 10px 10px 0 0; overflow: hidden; background: var(--surface); text-decoration: none; transition: border-color .18s, box-shadow .18s; }
.related-news__card:hover { color: inherit; border-color: #bea48f; box-shadow: 0 3px 10px #24262009; }
.related-news__thumb { width: 100%; height: 140px; object-fit: cover; }
.related-news__body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; }
.related-news__publisher { display: flex; align-items: center; justify-content: space-between; color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .6px; }
.related-news__publisher::after { content: '↗'; font-size: 18px; font-weight: 400; }
.related-news__headline { font: 500 22px/1.2 var(--font-display); letter-spacing: -.2px; }
.related-news__card:hover .related-news__headline { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.related-news__date { order: 5; color: var(--text-muted); font-size: 10px; padding-top: 4px; margin-top: auto; }
.related-news__snippet { font-size: 12px; line-height: 1.65; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.follow-ups { order: 4; margin-top: 22px; }
.news-redirect { order: 4; margin-top: 22px; }
.party-picker { order: 4; margin-top: 22px; }
.party-picker__hint { margin: 0 0 10px; font-size: 12px; color: var(--text-secondary); }
.party-picker__list { display: flex; flex-wrap: wrap; gap: 8px; }
.party-picker__option { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-color); border-radius: 7px; padding: 8px 12px; font-size: 12px; cursor: pointer; }
.party-picker__option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.party-picker__option:has(input:disabled) { opacity: .5; cursor: default; }
.party-picker__option input { accent-color: var(--accent); margin: 0; }
.party-picker__send { margin-top: 12px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 7px; padding: 9px 16px; font-size: 12px; font-weight: 600; }
.party-picker__send:disabled { opacity: .5; }
.topic-picker { order: 4; margin-top: 22px; }
.answerText.is-streaming > :last-child::after { content: "▍"; margin-left: 2px; color: var(--accent); animation: answer-caret 1s steps(1) infinite; }
@keyframes answer-caret { 50% { opacity: 0; } }
/* Valorar o copiar solo la respuesta terminada, no el borrador. */
.answer:has(> .answerText.is-streaming) > .useful, .answer-wrapper:has(.answerText.is-streaming) > .copy { display: none; }
.topic-picker__hint { margin: 0 0 10px; font-size: 12px; color: var(--text-secondary); }
.topic-picker__list { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-picker__option { border: 1px solid var(--border-color); background: transparent; border-radius: 7px; padding: 8px 12px; font-size: 12px; }
.topic-picker__option[hidden] { display: none; }
.topic-picker__option:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.topic-picker__option:disabled { opacity: .55; }
.topic-picker__more { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 600; padding: 8px 4px; }
.follow-ups__list { display: flex; flex-wrap: wrap; gap: 8px; }
.follow-up { border: 1px solid var(--border-color); background: transparent; border-radius: 7px; text-align: left; padding: 10px 13px; font-size: 12px; line-height: 1.5; }
.follow-up::after { content: ' →'; color: var(--accent); }
.follow-up:hover:not(:disabled) { background: var(--surface); border-color: var(--accent); }
.follow-up:disabled { opacity: .55; }
.answerText table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0; line-height: 1.6; }
.answerText th, .answerText td { border: 1px solid var(--border-color); padding: 12px 14px; text-align: left; vertical-align: top; min-width: 160px; }
.answerText th { background: var(--bg-subtle); font-weight: 600; }
.answerText tbody tr:nth-child(even) { background: #ffffff80; }

/* Honest progress labels, errors and motion preferences. */
.distractor { display: flex; align-items: center; gap: 14px; padding: 8px 0 24px; }
.ballsBox { display: flex; gap: 4px; }
.ballsBox > span { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; animation: pulse-dot 1.4s infinite; }
.ballsBox > :nth-child(2) { animation-delay: .15s; }
.ballsBox > :nth-child(3) { animation-delay: .3s; }
.ballsBox > :nth-child(4) { animation-delay: .45s; }
.stage-label { color: var(--text-secondary); font-size: 13px; }
.answerBox.is-error .answer { background: var(--accent-soft); padding: 16px 20px; border: 1px solid #eacbb5; border-radius: 10px; }
.answerBox.is-error .answerText { font-size: 14px; }
.reveal { animation: welcome-in .35s ease-out both; animation-delay: calc(min(var(--reveal-i, 0), 8) * 25ms); }
@keyframes welcome-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulse-dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* Accessible, keyboard-dismissable information dialog. */
.info-dialog { width: min(520px, calc(100% - 32px)); padding: 38px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-main); color: var(--text-primary); max-height: calc(100dvh - 48px); overflow-y: auto; box-shadow: 0 16px 60px #0002; }
.info-dialog::backdrop { background: #23271d66; backdrop-filter: blur(3px); }
.dialog-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; background: none; font-size: 26px; color: var(--text-secondary); }
.info-dialog h2 { font: 400 34px/1.15 var(--font-display); letter-spacing: -.6px; margin: 22px 0; }
/* «La fuente, también.», sin cursiva y con el naranja de la portada. */
.info-dialog h2 em { font-style: normal; color: var(--accent-bright); }
.info-dialog > p, .info-dialog dd { font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.info-dialog dt { font-size: 15px; font-weight: 600; margin: 20px 0 5px; }
.info-dialog dd { margin: 0; }
.primary-button { width: 100%; border: 0; border-radius: 8px; padding: 12px 20px; background: var(--accent); color: white; font-size: 14px; margin-top: 20px; }
.primary-button:hover { background: #953500; }

@media (min-width: 1400px) { .welcome { padding-top: 64px; } .welcome__intro { gap: 100px; } }
@media (max-width: 900px) {
  .welcome { padding-top: 32px; }
  .welcome__intro { gap: 32px; grid-template-columns: 1.3fr 1fr; }
  .welcome h1 { font-size: 47px; letter-spacing: -1.5px; }
  .entry-point { padding: 16px; gap: 12px; }
  .entry-point__icon { width: 36px; height: 36px; }
  .entry-point__text strong { font-size: 13px; }
  .entry-point__text > span { font-size: 11px; }
  .slideBox { margin-top: 30px; }
  .slideOptions li > button { min-height: 120px; padding: 30px 14px 14px; font-size: 12px; }
  .slideOptions li > button::before { left: 14px; }
}
@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .welcome { padding-top: 26px; }
  .welcome__intro { display: block; }
  .welcome h1 { font-size: 43px; margin: 18px 0 14px; }
  .welcome__lead { font-size: 14px; line-height: 1.7; }
  .entry-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
  .entry-points::before, .entry-points__note, .entry-point__icon { display: none; }
  .entry-point { padding: 15px 12px; gap: 5px; }
  .entry-point__text > span { font-size: 10px; }
  .entry-point__text strong { font-size: 12px; }
  .entry-point__arrow { font-size: 16px; }
  .section-heading > span { display: none; }
  .section-heading h2 { font-size: 14px; }
  .slideOptions ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .slideOptions li > button { min-height: 104px; font-size: 12px; }
  .questionBox { width: calc(100% - 24px); padding-top: 10px; }
  fieldset.question { padding: 8px 8px 8px 14px; gap: 6px; }
  #question { font-size: 16px; padding: 10px 0; max-height: 100px; }
  .send { width: 44px; height: 44px; }
  .composer-meta { justify-content: center; font-size: 9px; padding-top: 7px; }
  #composer-hint { display: none; }
  header.question > span { max-width: 93%; font-size: 14px; padding: 12px 16px; }
  .answerText { font-size: 16px; line-height: 1.8; }
  .answerText h3, .answerText h4 { font-size: 23px; }
  .party-group { padding: 16px 14px; }
  .related-news__list { grid-template-columns: 1fr; }
  .related-news__body { padding: 18px; }
  .related-news__headline { font-size: 23px; }
  .conversation-heading > span:last-child { display: none; }
  .info-dialog { padding: 28px 24px; }
}
@media (max-height: 550px) { .composer-meta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  body, .mainbodier, .container { display: block; height: auto; overflow: visible; }
  .questionBox, .welcome, .masthead__actions, .follow-ups, .copy, .useful, .distractor, .info-dialog, .botlayer { display: none; }
  .answerBox, .party-group, .related-news__card { break-inside: avoid; }
  .reveal { opacity: 1; animation: none; }
}
/* Dentro de la burbuja de rtve.es (embed.js, ?embed=1). El iframe mide 400 px y ya aplica el diseño
   móvil (también «BETA» encima del logo); en la portada todo baja para dejar aire bajo información,
   abrir y cerrar; en la conversación,
   «Nueva conversación» pasa a icono (el texto queda como nombre accesible) y el logo a 18 px para que
   la cabecera quepa en una línea desde 360 px: marca, +, información y cerrar. */
#news-close { font: 300 28px/1 var(--font-body); color: var(--text-primary); }
[data-embed] .news-workspace:not(.is-conversation) { padding-top: 76px; }
[data-embed] .news-workspace:not(.is-conversation) .news-header__tools { top: -60px; }
[data-embed] .is-conversation .news-header { gap: 6px; }
[data-embed] .is-conversation .news-title { font-size: 18px; }
[data-embed] .is-conversation #news-reset { flex: none; order: 1; width: 44px; margin-left: auto; padding: 0; gap: 0; font-size: 0; }
[data-embed] .is-conversation .news-header__tools { order: 2; margin-left: 0; gap: 6px; }
/* Dentro de la página de rtve.es (iframe del CMS, no la burbuja): Contexta empieza arriba del todo,
   sin hueco bajo la cabecera de rtve.es, y sin relleno abajo, que solo añadía scroll dentro del
   iframe (portada, conversación y móvil; con el id gana a las reglas de padding). */
[data-framed] #news-workspace { padding: 0; }
/* En la portada móvil el «i» sube 29 px sobre la cabecera (al relleno que aquí no hay): a la línea de arriba. */
[data-framed] .news-workspace:not(.is-conversation) .news-header__tools { top: 0; }
/* En móvil, la conversación usa la cabecera compacta de la burbuja: «Nueva conversación» pasa a icono en
   la línea del logo (el texto queda como nombre accesible). Bajo la cabecera fija de rtve.es, así la
   respuesta gana unos 60 px de alto. El logo conserva su tamaño móvil: aquí no hay ↗ ni ×. */
@media (max-width: 720px) {
  [data-framed] .is-conversation .news-header { gap: 6px; }
  [data-framed] .is-conversation #news-reset { flex: none; order: 1; width: 44px; margin-left: auto; padding: 0; gap: 0; font-size: 0; }
  [data-framed] .is-conversation .news-header__tools { order: 2; margin-left: 0; gap: 6px; }
}
/* Por debajo de unos 328 px (móviles de 320) el logo baja a 18 px, como en la burbuja, para seguir en una línea. */
@media (max-width: 339px) { [data-framed] .is-conversation .news-title { font-size: 18px; } }