/*! CardioTeca · Sesión CardioTeca · HOJA COMÚN v4 (va en /files/sesiones/sesiones.css) · 15/10/2026
 * Sale de la maqueta v7 aprobada por Ramón (maquetas/maqueta-sesion-v7.html) con herramientas/hacer-motor-v1.py: no se
 * edita a mano, se cambia la maqueta o el programa y se vuelve a generar. Todo cuelga de #ct-sesion, que cubre la ventana
 * entera por encima de la página de la web (position: fixed). Valores --cs-* de la casa (los --ct-* de custom.css). */
/* ===================== valores de la casa ===================== */
#ct-sesion {
  --cs-tinta: #13233b; --cs-azul: #163a63; --cs-categoria: #1d5a9e; --cs-acento: #97112a;
  --cs-suave: #f2f5f9; --cs-suave-2: #e6edf5; --cs-celeste: #cfe0f5; --cs-linea: #dbe3ec; --cs-linea-fuerte: #b5c7da;
  --cs-gris: #5f6b7a; --cs-gris-azulado: #44505f; --cs-marino-claro: #1b4473; --cs-marino-oscuro: #122f52; --cs-marino-pie: #0f2947;
  --cs-acierto: #2e7d32; --cs-acierto-suave: #f0f7f1; --cs-aviso: #c2630a; --cs-aviso-suave: #fdf3e7;
  --cs-sombra-1: 0 1px 2px rgba(19,35,59,.05), 0 6px 18px rgba(19,35,59,.07);
  --cs-sombra-2: 0 2px 4px rgba(19,35,59,.06), 0 14px 30px rgba(19,35,59,.13);
  --cs-letra: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cs-titular: "Faustina", Georgia, serif;
  --cs-base: clamp(15px, 0.95vw, 20px);
  --cs-izq: clamp(17em, 20vw, 24em);
  --cs-der: clamp(18em, 22vw, 26em);
  --cs-asa: 2.6em;
  --cs-t: .32s;
}
/* la página de la web que queda debajo no se desplaza mientras la sesión está en pantalla */
body.cs-sesion-activa { overflow: hidden; }
/* dentro de un artículo de la web, las reglas de la plantilla y de custom.css para h2, h3, p, li, code, kbd… no deben
   tocar la sesión: estas van con el peso del id y quedan por debajo de las clases de esta hoja */
#ct-sesion :is(h1,h2,h3,h4) { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: normal; margin: 0; padding: 0; max-width: none; }
#ct-sesion :is(p,ul,ol,li) { font-size: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; max-width: none; }
#ct-sesion li::before, #ct-sesion li::after { content: none; }
#ct-sesion :is(code,kbd) { font-family: inherit; font-size: inherit; color: inherit; background: transparent; padding: 0; border: 0; border-radius: 0; }
#ct-sesion img { height: auto; border: 0; box-shadow: none; vertical-align: top; }
#ct-sesion :is(a,button) { text-decoration: none; box-shadow: none; }
#ct-sesion *, #ct-sesion *::before, #ct-sesion *::after { box-sizing: border-box; }
#ct-sesion :is(h1,h2,h3,h4,p,ul,ol,li) { margin: 0; padding: 0; }
#ct-sesion ul, #ct-sesion ol { list-style: none; }
#ct-sesion button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
#ct-sesion img { display: block; max-width: 100%; }
#ct-sesion a { color: inherit; text-decoration: none; }
/* v7: las barras no se ven (Ramón: «no queda bien ver tres barras grises en la pantalla»); el pulgar, en forma de
   píldora, solo aparece mientras se está desplazando (clase .desplazando, que pone el programa y quita al segundo),
   y un degradado al pie avisa de que hay más abajo */
#ct-sesion ::-webkit-scrollbar { width: 10px; height: 10px; }
#ct-sesion ::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
#ct-sesion .desplazando::-webkit-scrollbar-thumb { background-color: var(--cs-linea-fuerte); }
#ct-sesion ::-webkit-scrollbar-thumb:hover { background-color: var(--cs-gris); }
#ct-sesion ::-webkit-scrollbar-track { background: transparent; }
#ct-sesion ::-webkit-scrollbar-button { display: none; }
#ct-sesion .cs-lado::after, #ct-sesion .cs-marco-caja::after { content: ""; position: absolute; left: 0; right: 10px; bottom: 0; height: 2.4em; background: linear-gradient(rgba(255,255,255,0), #fff 85%); pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 2; }
#ct-sesion .cs-lado.con-mas::after, #ct-sesion .cs-marco-caja.con-mas::after { opacity: 1; }
#ct-sesion .cs-lado.plegado::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #ct-sesion { --cs-t: 0s; } }

/* ===================== el lienzo ===================== */
#ct-sesion { position: fixed; inset: 0; z-index: 2147483000; display: grid; grid-template-rows: auto minmax(0,1fr) auto; font-family: var(--cs-letra); font-size: var(--cs-base); line-height: 1.45; color: var(--cs-tinta); background: var(--cs-suave); overflow: hidden; }

/* ===================== cabecera ===================== */
#ct-sesion .cs-cab { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 2vw; padding: 0.5em 1.4vw; background: #fff; border-bottom: 1px solid var(--cs-linea); position: relative; z-index: 2; }
#ct-sesion .cs-cab::before { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 4px; background: var(--cs-acento); }
#ct-sesion .cs-logo-ct img { height: 2.1em; width: auto; }
#ct-sesion .cs-reunion { min-width: 0; text-align: center; }
#ct-sesion .cs-reunion-sobre { display: block; font-size: 0.7em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-categoria); }
#ct-sesion .cs-reunion-titulo { font-family: var(--cs-titular); font-weight: 600; font-size: 1.4em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ct-sesion .cs-reunion-datos { font-size: 0.84em; color: var(--cs-gris-azulado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ct-sesion .cs-reunion-datos b { color: var(--cs-tinta); font-weight: 600; }
#ct-sesion .cs-patro { display: flex; align-items: center; gap: 0.8em; }
#ct-sesion .cs-patro-eti { font-size: 0.68em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-gris-azulado); text-align: right; line-height: 1.2; }
#ct-sesion .cs-patro-logo { display: grid; place-items: center; height: 2.7em; min-width: 9em; padding: 0.3em 0.8em; background: #fff; border: 1px dashed var(--cs-linea-fuerte); border-radius: 6px; color: var(--cs-gris); font-size: 0.76em; font-weight: 700; letter-spacing: .04em; text-align: center; line-height: 1.1; }

/* ===================== cuerpo: programa · escenario · panel ===================== */
#ct-sesion .cs-cuerpo { display: flex; min-height: 0; gap: 0.9vw; padding: 0.9vw 1.4vw; }
#ct-sesion .cs-lado { position: relative; flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cs-linea); border-radius: 12px; box-shadow: var(--cs-sombra-1); overflow: hidden; transition: width var(--cs-t) ease, flex-basis var(--cs-t) ease; }
#ct-sesion .cs-izq { width: var(--cs-izq); }
#ct-sesion .cs-der { width: var(--cs-der); }
#ct-sesion .cs-lado-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.75em 0.9em 0.6em 1em; border-bottom: 1px solid var(--cs-linea); white-space: nowrap; }
#ct-sesion .cs-lado-cab b { font-size: 0.74em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-categoria); }
#ct-sesion .cs-lado-mandos { display: flex; align-items: center; gap: 0.35em; }
#ct-sesion .cs-todo { font-size: 0.78em; font-weight: 600; line-height: 1; padding: 0.55em 0.8em; border-radius: 6px; border: 1px solid var(--cs-linea-fuerte); background: #fff; color: var(--cs-azul); white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
#ct-sesion .cs-plegar { width: 2em; height: 2em; border-radius: 6px; display: grid; place-items: center; color: var(--cs-gris-azulado); border: 1px solid transparent; }
#ct-sesion .cs-plegar svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ct-sesion .cs-lado-cuerpo { min-height: 0; overflow: auto; transition: opacity var(--cs-t) ease; }
/* plegado: queda solo un asa fina, como el índice del ESPACIO */
#ct-sesion .cs-lado.plegado { width: var(--cs-asa); }
#ct-sesion .cs-lado.plegado .cs-lado-cab, #ct-sesion .cs-lado.plegado .cs-lado-cuerpo { opacity: 0; pointer-events: none; }
#ct-sesion .cs-asa { position: absolute; inset: 0; display: none; place-items: center; cursor: pointer; }
#ct-sesion .cs-lado.plegado .cs-asa { display: grid; }
#ct-sesion .cs-asa > span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.74em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-categoria); display: inline-flex; align-items: center; gap: 0.6em; }
#ct-sesion .cs-asa svg { width: 1.2em; height: 1.2em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }

/* el programa: grupos plegables con sus elementos */
#ct-sesion .cs-grupo { border-bottom: 1px solid var(--cs-linea); }
#ct-sesion .cs-grupo-cab { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 0.7em; padding: 0.8em 0.9em 0.8em 1em; text-align: left; }
#ct-sesion .cs-grupo-ico { width: 2em; height: 2em; border-radius: 8px; display: grid; place-items: center; background: var(--cs-suave-2); color: var(--cs-azul); }
#ct-sesion .cs-grupo-ico svg { width: 1.15em; height: 1.15em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ct-sesion .cs-grupo-t { font-weight: 700; font-size: 0.98em; line-height: 1.2; }
#ct-sesion .cs-grupo-t small { display: block; font-weight: 500; font-size: 0.8em; color: var(--cs-gris-azulado); }
#ct-sesion .cs-grupo-flecha { width: 1.3em; height: 1.3em; color: var(--cs-gris); transition: transform var(--cs-t) ease; }
#ct-sesion .cs-grupo-flecha svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ct-sesion .cs-grupo.abierto .cs-grupo-flecha { transform: rotate(180deg); }
#ct-sesion .cs-grupo-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--cs-t) ease; }
#ct-sesion .cs-grupo.abierto .cs-grupo-cuerpo { grid-template-rows: 1fr; }
#ct-sesion .cs-grupo-env { overflow: hidden; min-height: 0; }
#ct-sesion .cs-grupo-lista { padding: 0 0.6em 0.6em 0.6em; display: grid; gap: 0.3em; }
#ct-sesion .cs-elem { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0.7em; align-items: center; padding: 0.55em 0.7em 0.55em 0.5em; border-radius: 10px; border-left: 4px solid transparent; text-align: left; transition: background-color .15s ease, border-color .15s ease; }
#ct-sesion .cs-elem-n { width: 2.2em; height: 2.2em; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 0.92em; background: var(--cs-azul); color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
#ct-sesion .cs-elem-t { font-weight: 700; font-size: 0.92em; line-height: 1.2; }
#ct-sesion .cs-elem-d { font-size: 0.8em; color: var(--cs-gris-azulado); line-height: 1.3; }
#ct-sesion .cs-elem.activo { background: var(--cs-suave); border-left-color: var(--cs-acento); }
#ct-sesion .cs-elem.activo .cs-elem-n { background: var(--cs-acento); }

/* v6: la jerarquía del programa, propuesta 1 elegida por Ramón (14/10 noche): el padre gana (icono relleno, letra
   mayor, fondo suave y filo al abrirse), los hijos pierden (letra menor, recuadro claro), van sangrados bajo el texto
   del padre y cuelgan de una guía vertical. Sus dos ajustes: el número del hijo alineado con la primera línea del
   título (no centrado en vertical) e interlineado menor. */
#ct-sesion .cs-grupo-cab { padding: 0.85em 0.9em 0.85em 1em; }
#ct-sesion .cs-grupo-ico { background: var(--cs-azul); color: #fff; }
#ct-sesion .cs-grupo-t { font-size: 1.02em; }
#ct-sesion .cs-grupo.abierto > .cs-grupo-cab { background: var(--cs-suave); box-shadow: inset 0 -1px 0 var(--cs-linea); }
#ct-sesion .cs-grupo-lista { position: relative; padding: 0.5em 0.6em 0.65em 2.6em; gap: 0.1em; }
#ct-sesion .cs-grupo-lista::before { content: ""; position: absolute; left: calc(2em - 1px); top: 0.2em; bottom: 0.75em; width: 2px; border-radius: 1px; background: var(--cs-linea); }
#ct-sesion .cs-elem { align-items: start; padding: 0.4em 0.6em 0.4em 0.5em; gap: 0.55em; border-left-width: 3px; }
#ct-sesion .cs-elem-n { width: 1.55em; height: 1.55em; margin-top: 0.16em; border-radius: 6px; font-size: 0.8em; background: var(--cs-suave-2); color: var(--cs-azul); box-shadow: none; }
/* el texto del hijo fija su propio interlineado (si no, manda el del botón, de 15 px, y las líneas quedan separadas) */
#ct-sesion .cs-elem > span:not(.cs-elem-n) { font-size: 0.86em; line-height: 1.15; }
#ct-sesion .cs-elem-t { font-size: 1em; font-weight: 600; line-height: inherit; }
#ct-sesion .cs-elem-d { font-size: 0.885em; line-height: 1.2; }
#ct-sesion .cs-elem.activo .cs-elem-n { background: var(--cs-acento); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  #ct-sesion .cs-elem:hover { background: var(--cs-suave); }
  #ct-sesion .cs-grupo-cab:hover .cs-grupo-ico { background: var(--cs-categoria); }
  #ct-sesion .cs-plegar:hover { background: var(--cs-suave-2); }
  #ct-sesion .cs-todo:hover { background: var(--cs-suave-2); border-color: var(--cs-azul); }
  #ct-sesion .cs-asa:hover { background: var(--cs-suave); }
}

/* el escenario y la bandeja de votación */
#ct-sesion .cs-escenario { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; background: #fff; border: 1px solid var(--cs-linea); border-radius: 12px; box-shadow: var(--cs-sombra-2); overflow: hidden; }
#ct-sesion .cs-marco-caja { position: relative; min-height: 0; display: grid; transition: opacity .25s ease; }
/* v2 (15/10/2026): dos marcos superpuestos. El módulo nuevo se carga en el marco oculto y, cuando ha terminado de
   pintarse, se funde con el anterior (sin atenuar, sin destello en blanco ni saltos a medio pintar). Mientras llega:
   una barra fina arriba del escenario y «· cargando…» en su rótulo. */
#ct-sesion .cs-marco { transition: opacity .35s ease; }
#ct-sesion .cs-marco.cs-marco-oculto { opacity: 0; pointer-events: none; }
#ct-sesion .cs-marco-caja::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; border-radius: 0 2px 2px 0; background: var(--cs-categoria); z-index: 4; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
#ct-sesion .cs-marco-caja.cargando::before { opacity: 1; animation: cs-carga 1.1s ease-in-out infinite; }
@keyframes cs-carga { 0% { width: 0; margin-left: 0; } 55% { width: 55%; margin-left: 25%; } 100% { width: 0; margin-left: 100%; } }
#ct-sesion .cs-marco-caja.cargando .cs-escenario-eti::after { content: " · cargando…"; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { #ct-sesion .cs-marco-caja.cargando::before { animation: none; width: 100%; opacity: .5; } #ct-sesion .cs-marco { transition: none; } }
#ct-sesion .cs-marco-caja > * { grid-area: 1 / 1; }
#ct-sesion .cs-marco { width: 100%; height: 100%; border: 0; display: none; }
#ct-sesion.cs-real .cs-marco { display: block; }
#ct-sesion.cs-real .cs-dibujo { display: none; }
#ct-sesion .cs-dibujo { overflow: auto; padding: 2em 3em; }
#ct-sesion .cs-escenario-eti { position: absolute; left: 0.9em; top: 0.7em; z-index: 3; font-size: 0.64em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--cs-azul); padding: 0.3em 0.75em; border-radius: 999px; box-shadow: var(--cs-sombra-1); opacity: .85; transition: opacity .2s ease; }
#ct-sesion .cs-escenario:hover .cs-escenario-eti { opacity: .35; }
#ct-sesion .cs-escenario-eti i { font-style: normal; opacity: .75; font-weight: 500; }
#ct-sesion .cs-bandeja { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--cs-t) ease; border-top: 0 solid var(--cs-linea); }
#ct-sesion .cs-bandeja.abierta { grid-template-rows: 1fr; border-top-width: 1px; }
#ct-sesion .cs-bandeja-in { min-height: 0; overflow: hidden; }
#ct-sesion .cs-bandeja-cuerpo { padding: 0.9em 1.4em 1em; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0.6em 2em; align-items: start; }
#ct-sesion .cs-voto-eti { font-size: 0.7em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-acento); display: inline-flex; align-items: center; gap: 0.5em; }
#ct-sesion .cs-voto-eti i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--cs-acento); animation: cs-latido 1.2s ease-in-out infinite; }
@keyframes cs-latido { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.5); opacity: .5 } }
#ct-sesion .cs-voto-pregunta { font-size: 1.2em; font-weight: 600; line-height: 1.25; margin: 0.15em 0 0.5em; }
#ct-sesion .cs-voto-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em 0.8em; }
#ct-sesion .cs-voto-op { display: grid; grid-template-columns: 1.9em 1fr auto; gap: 0.7em; align-items: center; padding: 0.5em 0.8em; border: 1.5px solid var(--cs-linea); border-radius: 9px; position: relative; overflow: hidden; font-size: 0.92em; }
#ct-sesion .cs-voto-op::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--cs-suave-2); transition: width .6s ease; z-index: 0; }
#ct-sesion .cs-voto-op > * { position: relative; z-index: 1; }
#ct-sesion .cs-voto-letra { width: 1.9em; height: 1.9em; border-radius: 7px; display: grid; place-items: center; font-weight: 800; font-size: 0.9em; background: var(--cs-azul); color: #fff; }
#ct-sesion .cs-voto-n { font-weight: 700; color: var(--cs-azul); min-width: 3em; text-align: right; }
#ct-sesion .cs-voto-op.ganadora { border-color: var(--cs-acierto); }
#ct-sesion .cs-voto-op.ganadora .cs-voto-letra { background: var(--cs-acierto); }
#ct-sesion .cs-voto-mandos { display: grid; gap: 0.45em; min-width: 12em; }
#ct-sesion .cs-voto-guia { margin-top: 0.6em; font-size: 0.9em; color: var(--cs-acierto); font-weight: 600; }
#ct-sesion .cs-voto-guia:empty { display: none; }
#ct-sesion .cs-voto-estado { font-size: 0.8em; color: var(--cs-gris-azulado); }
#ct-sesion .cs-voto-cerrar { position: absolute; right: 0.6em; top: 0.5em; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; color: var(--cs-gris); }
#ct-sesion .cs-bandeja-in { position: relative; }

/* dibujos (solo fuera de cardioteca.com) */
#ct-sesion .cs-g-cab { text-align: center; margin: 1.2em 0 1.2em; }
#ct-sesion .cs-g-pill { display: inline-block; font-size: 0.7em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--cs-tinta); padding: 0.3em 1em; border-radius: 999px; }
#ct-sesion .cs-g-tit { font-family: var(--cs-titular); font-weight: 600; font-size: 1.9em; line-height: 1.1; margin-top: 0.5em; }
#ct-sesion .cs-g-tit b { display: block; color: var(--cs-categoria); font-weight: 600; }
#ct-sesion .cs-g-sub { color: var(--cs-gris-azulado); margin-top: 0.5em; font-size: 0.95em; }
#ct-sesion .cs-g-tarjeta { max-width: 46em; margin: 0 auto; padding: 1.4em 1.6em; border: 1px solid var(--cs-linea); border-radius: 12px; box-shadow: var(--cs-sombra-1); background: #fff; }
#ct-sesion .cs-g-modulo { font-size: 0.76em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-categoria); }
#ct-sesion .cs-g-pregunta { font-size: 1.25em; font-weight: 600; line-height: 1.25; margin: 0.35em 0 0.8em; }
#ct-sesion .cs-g-opciones { display: grid; gap: 0.5em; }
#ct-sesion .cs-g-opcion { display: grid; grid-template-columns: auto 1fr; gap: 0.8em; align-items: center; padding: 0.7em 1em; border: 1.5px solid var(--cs-linea); border-radius: 8px; background: #fff; }
#ct-sesion .cs-g-opcion i { width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid var(--cs-linea-fuerte); display: inline-block; }
#ct-sesion .cs-g-opcion.marcada { border-color: var(--cs-categoria); background: #f4f8fd; }
#ct-sesion .cs-g-opcion.marcada i { border-color: var(--cs-categoria); background: radial-gradient(circle, var(--cs-categoria) 45%, #fff 50%); }
#ct-sesion .cs-g-fuente { margin-top: 1em; font-size: 0.82em; color: var(--cs-gris-azulado); border-top: 1px dashed var(--cs-linea); padding-top: 0.8em; }
#ct-sesion .cs-g-fuente b { color: var(--cs-azul); }

/* panel auxiliar (derecha) */
#ct-sesion .cs-panel-cuerpo { padding: 0.9em 1em 1em; display: grid; gap: 0.9em; align-content: start; }
#ct-sesion .cs-aux-eti { font-size: 0.7em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-categoria); }
#ct-sesion .cs-aux-titulo { font-family: var(--cs-titular); font-weight: 600; font-size: 1.3em; line-height: 1.15; margin-top: 0.15em; }
#ct-sesion .cs-aux-texto { font-size: 0.95em; line-height: 1.5; display: grid; gap: 0.5em; }
#ct-sesion .cs-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em; }
#ct-sesion .cs-datos div { background: var(--cs-suave); border-radius: 8px; padding: 0.45em 0.7em; font-size: 0.86em; }
#ct-sesion .cs-datos small { display: block; font-size: 0.74em; color: var(--cs-gris-azulado); text-transform: uppercase; letter-spacing: .06em; }
#ct-sesion .cs-datos b { font-size: 1.1em; font-weight: 700; }
#ct-sesion .cs-aux-acciones { display: grid; gap: 0.45em; }
#ct-sesion .cs-qr-mini { display: grid; grid-template-columns: auto 1fr; gap: 0.7em; align-items: center; padding: 0.7em 0.8em; border: 1px solid var(--cs-linea); border-radius: 10px; background: var(--cs-suave); }
#ct-sesion .cs-qr-mini svg { width: 3.6em; height: 3.6em; }
#ct-sesion .cs-qr-mini b { display: block; font-size: 0.9em; }
#ct-sesion .cs-qr-mini code { font-family: inherit; font-weight: 700; letter-spacing: .1em; color: var(--cs-azul); }
#ct-sesion .cs-qr-mini small { font-size: 0.78em; color: var(--cs-gris-azulado); }
#ct-sesion .cs-ejemplo { font-size: 0.74em; color: var(--cs-aviso); background: var(--cs-aviso-suave); border-radius: 6px; padding: 0.25em 0.6em; display: inline-block; }
#ct-sesion .cs-aux-lista { display: grid; gap: 0.35em; font-size: 0.9em; }
#ct-sesion .cs-aux-lista li { display: grid; grid-template-columns: 1.5em 1fr; gap: 0.5em; align-items: baseline; color: var(--cs-gris-azulado); }
#ct-sesion .cs-aux-lista li span { width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; font-size: 0.78em; font-weight: 700; background: var(--cs-suave-2); color: var(--cs-azul); }

/* v3 (26/10/2026): el panel de la derecha con ponentes, ficha, enlaces y «Para seguir» */
#ct-sesion .cs-ponentes { display: grid; gap: 0.5em; }
#ct-sesion .cs-ponente { display: grid; grid-template-columns: 2.6em 1fr; gap: 0.7em; align-items: start; padding: 0.7em 0.8em; border: 1px solid var(--cs-linea); border-radius: 10px; background: #fff; }
#ct-sesion .cs-ponente-ini { width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.95em; letter-spacing: .02em; background: var(--cs-suave-2); color: var(--cs-azul); }
#ct-sesion .cs-ponente small { display: block; font-size: 0.7em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-categoria); }
#ct-sesion .cs-ponente b { display: block; font-size: 1em; font-weight: 700; line-height: 1.2; }
#ct-sesion .cs-ponente-cargo { display: block; font-size: 0.82em; color: var(--cs-gris-azulado); line-height: 1.3; }
#ct-sesion .cs-ponente em { display: block; margin-top: 0.35em; font-style: normal; font-weight: 600; font-size: 0.9em; line-height: 1.25; color: var(--cs-azul); }
#ct-sesion .cs-ponente p { margin: 0.35em 0 0; font-size: 0.84em; line-height: 1.4; color: var(--cs-gris-azulado); }
#ct-sesion .cs-ponente-ejemplo { border-style: dashed; background: var(--cs-suave); }
#ct-sesion .cs-datos-f div:last-child:nth-child(odd) { grid-column: 1 / -1; }
#ct-sesion .cs-pista { margin: 0; font-size: 0.82em; line-height: 1.4; color: var(--cs-gris-azulado); padding: 0.5em 0.7em; border-left: 3px solid var(--cs-celeste); background: var(--cs-suave); border-radius: 0 8px 8px 0; }
#ct-sesion .cs-sigue { display: grid; gap: 0.4em; }
#ct-sesion .cs-sigue-b { display: grid; grid-template-columns: 2.2em 1fr; gap: 0.6em; align-items: start; width: 100%; text-align: left; font: inherit; color: inherit; padding: 0.5em 0.6em; border: 1px solid var(--cs-linea); border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
#ct-sesion .cs-sigue-b i { font-style: normal; font-weight: 700; font-size: 0.78em; display: grid; place-items: center; height: 2.1em; border-radius: 6px; background: var(--cs-suave-2); color: var(--cs-azul); }
#ct-sesion .cs-sigue-b b { display: block; font-size: 0.88em; line-height: 1.2; }
#ct-sesion .cs-sigue-b small { display: block; font-size: 0.76em; color: var(--cs-gris-azulado); line-height: 1.25; }
@media (hover: hover) and (pointer: fine) { #ct-sesion .cs-sigue-b:hover { border-color: var(--cs-azul); background: var(--cs-suave); } }
#ct-sesion a.cs-btn { text-decoration: none; }
/* v3 (26/10/2026, noche): la bienvenida dentro de la sesión (opción 1 de Ramón: la idea en una frase, tres objetivos y la primera votación con el QR) */
#ct-sesion .cs-bienvenida { position: absolute; inset: 0; z-index: 2; background: #fff; overflow: auto; display: flex; flex-direction: column; padding: 3.4em 3em 2.4em; opacity: 0; visibility: hidden; transition: opacity var(--cs-t) ease, visibility 0s linear var(--cs-t); }
#ct-sesion.cs-en-bienvenida .cs-bienvenida { opacity: 1; visibility: visible; transition: opacity var(--cs-t) ease; }
#ct-sesion .cs-bv-in { max-width: 60em; margin: auto; width: 100%; }   /* centrada si cabe; si no (votación abierta), empieza arriba y no se corta */
#ct-sesion .cs-bv-eti { display: block; font-size: 0.78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-acento); }
#ct-sesion .cs-bv-eti.cs-bv-azul { color: var(--cs-categoria); margin-bottom: 0.6em; }
#ct-sesion .cs-bv-idea { font-family: var(--cs-titular); font-weight: 600; font-size: 2.5em; line-height: 1.1; color: var(--cs-tinta); margin: 0.2em 0 0.8em; }
#ct-sesion .cs-bv-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.8em; align-items: start; }
#ct-sesion .cs-bv-obj { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75em; }
#ct-sesion .cs-bv-obj li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: 0.6em; align-items: start; font-size: 1.08em; line-height: 1.35; color: var(--cs-tinta); }
#ct-sesion .cs-bv-obj svg { width: 1.35em; height: 1.35em; fill: none; stroke: var(--cs-categoria); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#ct-sesion .cs-bv-voto { border: 1px solid var(--cs-linea); border-radius: 12px; background: var(--cs-suave); padding: 1.1em 1.25em; display: grid; gap: 0.8em; box-shadow: var(--cs-sombra-1); }
#ct-sesion .cs-bv-p { font-weight: 600; font-size: 1.08em; line-height: 1.3; color: var(--cs-tinta); }
#ct-sesion .cs-bv-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em; }
#ct-sesion .cs-bv-ops span { background: #fff; border: 1px solid var(--cs-linea); border-radius: 8px; padding: 0.45em 0.7em; font-size: 0.93em; color: var(--cs-tinta); }
#ct-sesion .cs-bv-ops b { color: var(--cs-categoria); margin-right: 0.4em; }
#ct-sesion .cs-bv-qr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9em; align-items: center; font-size: 0.92em; color: var(--cs-gris-azulado); }
#ct-sesion .cs-bv-qr svg { width: 5em; height: 5em; }
#ct-sesion .cs-bv-qr b { color: var(--cs-tinta); }
#ct-sesion .cs-bv-qr code { font-family: inherit; font-weight: 700; letter-spacing: .08em; color: var(--cs-azul); font-size: 1.05em; }
#ct-sesion .cs-bv-rep { font-size: 0.82em; color: var(--cs-gris-azulado); }
#ct-sesion .cs-bv-pie { margin: 1.4em 0 0; }
#ct-sesion .cs-grupo-bienv .cs-grupo-cab.activo { background: var(--cs-suave); box-shadow: inset 3px 0 0 var(--cs-acento); }
@media (max-width: 1000px) { #ct-sesion .cs-bv-dos { grid-template-columns: minmax(0, 1fr); } #ct-sesion .cs-bv-idea { font-size: 2em; } }
@media (prefers-reduced-motion: reduce) { #ct-sesion .cs-bienvenida { transition: none; } }
/* v3 (26/10/2026, noche): el QR, en grande al pulsarlo (Ramón: «que al hacer click encima salga a pantalla completa») */
#ct-sesion .cs-qr-ampliable { cursor: zoom-in; }
#ct-sesion .cs-qr-ampliable:focus-visible { outline: 3px solid var(--cs-categoria); outline-offset: 3px; border-radius: 4px; }
#ct-sesion .cs-qr-grande { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; background: rgba(15, 41, 71, .94); opacity: 0; visibility: hidden; transition: opacity var(--cs-t) ease, visibility 0s linear var(--cs-t); cursor: zoom-out; }
#ct-sesion .cs-qr-grande.abierta { opacity: 1; visibility: visible; transition: opacity var(--cs-t) ease; }
#ct-sesion .cs-qrg-caja { display: flex; align-items: center; gap: 3vw; background: #fff; border-radius: 12px; padding: 3.5vh 3.5vw; box-shadow: var(--cs-sombra-2); max-width: 94vw; max-height: 94vh; }
#ct-sesion .cs-qrg-qr svg { display: block; width: min(68vh, 46vw); height: auto; }
#ct-sesion .cs-qrg-txt { display: grid; gap: 0.6em; max-width: 24em; }
#ct-sesion .cs-qrg-eti { font-size: 0.85em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-acento); }
#ct-sesion .cs-qrg-txt b { font-size: 1.5em; line-height: 1.2; color: var(--cs-tinta); }
#ct-sesion .cs-qrg-txt code { font-family: inherit; font-weight: 700; font-size: 2.1em; letter-spacing: .06em; color: var(--cs-azul); word-break: break-all; }
#ct-sesion .cs-qrg-txt small { font-size: 0.95em; color: var(--cs-gris-azulado); }
@media (max-aspect-ratio: 1/1) { #ct-sesion .cs-qrg-caja { flex-direction: column; text-align: center; } #ct-sesion .cs-qrg-qr svg { width: min(80vw, 55vh); } }
@media (prefers-reduced-motion: reduce) { #ct-sesion .cs-qr-grande { transition: none; } }
/* v3 (26/10/2026, noche): la despedida, con la misma pregunta de la bienvenida y el antes y el después de la sala */
#ct-sesion .cs-bv-dos.cs-bv-desp { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
#ct-sesion .cs-ad { display: grid; gap: 0.6em; margin-top: 0.9em; }
#ct-sesion .cs-ad-f { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 2.8em; gap: 0.7em; align-items: center; }
#ct-sesion .cs-ad-op { font-size: 0.95em; line-height: 1.25; color: var(--cs-tinta); }
#ct-sesion .cs-ad-op b { color: var(--cs-categoria); margin-right: 0.4em; }
#ct-sesion .cs-ad-barras { display: grid; gap: 3px; }
#ct-sesion .cs-ad-b { position: relative; height: 1.2em; border-radius: 4px; background: var(--cs-suave); overflow: hidden; }
#ct-sesion .cs-ad-b::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); border-radius: 4px; transition: width .6s ease; }
#ct-sesion .cs-ad-b.ini::before { background: var(--cs-linea-fuerte); }
#ct-sesion .cs-ad-b.fin::before { background: var(--cs-categoria); }
#ct-sesion .cs-ad-b em { position: absolute; right: 0.45em; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 0.75em; font-weight: 700; color: var(--cs-tinta); }
#ct-sesion .cs-ad-dif { font-weight: 700; font-size: 0.95em; text-align: right; color: var(--cs-gris-azulado); }
#ct-sesion .cs-ad-dif.sube { color: var(--cs-azul); }
#ct-sesion .cs-ad-ley { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; margin-top: 0.7em; font-size: 0.82em; color: var(--cs-gris-azulado); }
#ct-sesion .cs-ad-ley i { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 3px; margin-right: 0.35em; vertical-align: -0.1em; }
#ct-sesion .cs-ad-ley .ini { background: var(--cs-linea-fuerte); }
#ct-sesion .cs-ad-ley .fin { background: var(--cs-categoria); }
@media (prefers-reduced-motion: reduce) { #ct-sesion .cs-ad-b::before { transition: none; } }
/* v3 (26/10/2026, noche): «Terminar la sesión», en el pie junto al reloj */
#ct-sesion .cs-btn-fin { min-height: 0; padding: 0.25em 0.8em; margin-right: 0.6em; font-size: 0.82em; background: #fff; border-color: var(--cs-acento); color: var(--cs-acento); }
@media (hover: hover) and (pointer: fine) { #ct-sesion .cs-btn-fin:hover { background: var(--cs-acento); color: #fff; } }
#ct-sesion.cs-terminada .cs-btn-fin { display: none; }
/* v3 (26/10/2026, noche): el botón pulsado con el ratón no se queda con marco (Ramón: «cuando está seleccionado a veces sale el botón
   del menú raro»). La plantilla de la web se lo pone al tener el foco; aquí solo lo ve quien se mueve con el teclado (el de custom.css),
   y en el programa va por dentro para que no lo corte el borde */
#ct-sesion :is(button, a, [role="button"]):focus:not(:focus-visible) { outline: none; }
#ct-sesion :is(.cs-elem, .cs-grupo-cab):focus-visible { outline-offset: -2px; }
/* v3 (26/10/2026, noche): la × de la votación, a la vista y sin pisar los botones (Ramón: «al cerrar la votación la x para cerrar no se ve») */
#ct-sesion .cs-bandeja-cuerpo { padding-right: 3.4em; }
#ct-sesion .cs-voto-cerrar { z-index: 2; top: 0.6em; right: 0.7em; background: var(--cs-suave); border: 1px solid var(--cs-linea); color: var(--cs-gris-azulado); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
@media (hover: hover) and (pointer: fine) { #ct-sesion .cs-voto-cerrar:hover { background: var(--cs-suave-2); border-color: var(--cs-azul); color: var(--cs-azul); } }
#ct-sesion .cs-btn[disabled] { opacity: .5; box-shadow: none; pointer-events: none; }
/* v3 (26/10/2026, noche): la bienvenida y la despedida no se mueven al abrir o cerrar la votación (Ramón: «sale un movimiento raro»).
   Su capa cubre el escenario entero (no encoge con la bandeja) y la bandeja se abre por encima, como un cajón; el hueco de la barra
   de desplazamiento queda reservado para que el contenido no se corra de lado si un día no cabe */
#ct-sesion .cs-escenario > .cs-bienvenida { scrollbar-gutter: stable; }
#ct-sesion .cs-bandeja { position: relative; z-index: 3; background: #fff; }

/* botones */
#ct-sesion .cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 2.5em; padding: 0.55em 1.05em; border-radius: 6px; font-weight: 600; font-size: 0.93em; line-height: 1.2; border: 1.5px solid transparent; white-space: nowrap; transition: background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
#ct-sesion .cs-btn-primario { background: var(--cs-azul); border-color: var(--cs-azul); color: #fff; box-shadow: 0 6px 16px rgba(22,58,99,.22); }
#ct-sesion .cs-btn-secundario { background: #fff; border-color: var(--cs-linea-fuerte); color: var(--cs-azul); }
#ct-sesion .cs-btn-granate { background: var(--cs-acento); border-color: var(--cs-acento); color: #fff; box-shadow: 0 8px 18px rgba(151,17,42,.3); }
#ct-sesion .cs-btn-grande { font-size: 1.15em; padding: 0.8em 1.6em; }
@media (hover: hover) and (pointer: fine) {
  #ct-sesion .cs-btn-primario:hover { background: var(--cs-categoria); border-color: var(--cs-categoria); }
  #ct-sesion .cs-btn-secundario:hover { background: var(--cs-suave-2); border-color: var(--cs-azul); }
  #ct-sesion .cs-btn-granate:hover { transform: translateY(-2px); }
}

/* pie */
#ct-sesion .cs-pie { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2vw; align-items: center; padding: 0.45em 1.4vw; font-size: 0.76em; color: var(--cs-gris-azulado); background: #fff; border-top: 1px solid var(--cs-linea); }
#ct-sesion .cs-pie b { color: var(--cs-tinta); font-weight: 600; }
#ct-sesion .cs-teclas { display: flex; gap: 0.9em; white-space: nowrap; }
#ct-sesion .cs-reloj:empty { display: none; }
#ct-sesion .cs-reloj { font-weight: 700; color: var(--cs-tinta); font-variant-numeric: tabular-nums; padding-left: 0.6em; border-left: 1px solid var(--cs-linea); }
#ct-sesion .cs-teclas kbd { font-family: inherit; font-size: 0.9em; font-weight: 700; padding: 0.1em 0.45em; border: 1px solid var(--cs-linea-fuerte); border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--cs-tinta); }

/* ===================== PORTADA (con transición) ===================== */
#ct-sesion .cs-portada { position: absolute; inset: 0; z-index: 20; display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: linear-gradient(135deg, var(--cs-marino-claro) 0%, var(--cs-azul) 45%, var(--cs-marino-oscuro) 100%); color: #fff; opacity: 0; visibility: hidden; transform: scale(1.02); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
#ct-sesion.cs-portada-abierta .cs-portada { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease, visibility 0s; }
#ct-sesion .cs-portada-ecg { position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; opacity: .12; pointer-events: none; }
#ct-sesion .cs-portada-cab { display: flex; justify-content: space-between; align-items: center; padding: 1.4vw 2.4vw; }
#ct-sesion .cs-portada-cab img { height: 2.4em; filter: brightness(0) invert(1); }
#ct-sesion .cs-portada-cuerpo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4vw; align-items: center; padding: 0 2.4vw; }
#ct-sesion .cs-portada-sobre { font-size: 0.9em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #cfe0f5; }
#ct-sesion .cs-portada-titulo { font-family: var(--cs-titular); font-weight: 600; font-size: 3.4em; line-height: 1.05; margin: 0.25em 0 0.3em; text-wrap: balance; }
#ct-sesion .cs-portada-sub { font-size: 1.25em; color: #cfe0f5; max-width: 30em; }
#ct-sesion .cs-portada-datos { display: grid; grid-template-columns: repeat(2, auto); gap: 0.9em 2.4em; margin-top: 1.8em; justify-content: start; }
#ct-sesion .cs-portada-datos small { display: block; font-size: 0.76em; letter-spacing: .08em; text-transform: uppercase; color: #cfe0f5; margin-bottom: 0.15em; }
#ct-sesion .cs-portada-datos b { font-weight: 600; font-size: 1.05em; }
#ct-sesion .cs-portada-lado { display: grid; gap: 1.2em; justify-items: center; }
#ct-sesion .cs-qr-tarjeta { display: grid; grid-template-columns: auto 1fr; gap: 1.2em; align-items: center; background: #fff; color: var(--cs-tinta); border-radius: 14px; padding: 1.2em 1.4em; box-shadow: var(--cs-sombra-2); width: 100%; max-width: 30em; }
#ct-sesion .cs-qr { width: 7.5em; height: 7.5em; }
#ct-sesion .cs-qr-tarjeta b { font-size: 1.15em; display: block; }
#ct-sesion .cs-qr-tarjeta p { font-size: 0.9em; color: var(--cs-gris-azulado); margin-top: 0.3em; }
#ct-sesion .cs-qr-tarjeta code { font-family: inherit; font-weight: 700; font-size: 1.25em; letter-spacing: .12em; color: var(--cs-azul); }
#ct-sesion .cs-portada-patro { display: grid; justify-items: center; gap: 0.5em; font-size: 0.78em; letter-spacing: .08em; text-transform: uppercase; color: #cfe0f5; }
#ct-sesion .cs-portada-patro .cs-patro-logo { min-width: 14em; height: 4.2em; font-size: 0.95em; }
#ct-sesion .cs-patro-con-logo { border: 0; padding: 0; min-width: 0; background: transparent; }
#ct-sesion .cs-patro-con-logo img { height: 4em; width: auto; display: block; }
#ct-sesion .cs-portada-patro .cs-patro-con-logo img { height: 5.6em; }
#ct-sesion .cs-portada-pie { display: flex; justify-content: space-between; align-items: center; gap: 2em; padding: 1.4vw 2.4vw; font-size: 0.82em; color: #cfe0f5; position: relative; }

/* ===================== MÓVIL del asistente ===================== */
#ct-sesion .cs-movil-velo { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(15,41,71,.72); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
#ct-sesion.cs-movil-abierto .cs-movil-velo { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
#ct-sesion .cs-telefono { width: 360px; height: min(740px, 92vh); background: #fff; color: var(--cs-tinta); border-radius: 36px; border: 10px solid #122f52; box-shadow: var(--cs-sombra-2); overflow: hidden; display: grid; grid-template-rows: auto minmax(0,1fr) auto; font-size: 15px; transform: translateY(12px); transition: transform .3s ease; }
#ct-sesion.cs-movil-abierto .cs-telefono { transform: none; }
#ct-sesion .cs-tel-cab { padding: 14px 16px 10px; border-bottom: 1px solid var(--cs-linea); display: grid; gap: 4px; }
#ct-sesion .cs-tel-cab img { height: 22px; width: auto; }
#ct-sesion .cs-tel-cab b { font-family: var(--cs-titular); font-weight: 600; font-size: 17px; line-height: 1.15; }
#ct-sesion .cs-tel-cab small { font-size: 12px; color: var(--cs-gris-azulado); }
#ct-sesion .cs-tel-cuerpo { padding: 14px 16px; overflow: auto; display: grid; gap: 12px; align-content: start; }
#ct-sesion .cs-tel-ahora { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-acento); display: flex; align-items: center; gap: 6px; }
#ct-sesion .cs-tel-ahora i { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-acento); animation: cs-latido 1.2s ease-in-out infinite; }
#ct-sesion .cs-tel-caso { font-size: 15px; line-height: 1.45; }
#ct-sesion .cs-tel-caso b { font-size: 17px; display: block; margin-bottom: 4px; }
#ct-sesion .cs-tel-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#ct-sesion .cs-tel-datos div { background: var(--cs-suave); border-radius: 8px; padding: 7px 9px; font-size: 13px; }
#ct-sesion .cs-tel-datos small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-gris-azulado); }
#ct-sesion .cs-tel-pregunta { font-weight: 600; font-size: 16px; margin-top: 4px; }
#ct-sesion .cs-tel-op { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--cs-linea-fuerte); border-radius: 10px; font-size: 14px; text-align: left; }
#ct-sesion .cs-tel-op span { width: 28px; height: 28px; border-radius: 7px; background: var(--cs-azul); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
#ct-sesion .cs-tel-op.marcada { border-color: var(--cs-acento); background: #fdf5f6; }
#ct-sesion .cs-tel-op.marcada span { background: var(--cs-acento); }
#ct-sesion .cs-tel-pie { padding: 10px 16px 14px; border-top: 1px solid var(--cs-linea); display: grid; gap: 8px; }
#ct-sesion .cs-tel-pie .cs-btn { font-size: 14px; min-height: 42px; }
#ct-sesion .cs-tel-pie small { font-size: 10.5px; color: var(--cs-gris-azulado); line-height: 1.3; }

/* ===================== panel de demostración (solo si la sesión lo pide: opciones.panel) ===================== */
#cs-panel { position: fixed; left: 50%; transform: translateX(-50%); bottom: 6px; z-index: 2147483001; max-width: 96vw; background: rgba(19,35,59,.94); color: #fff; border-radius: 10px; padding: 6px 10px; font: 500 12px/1.3 "Barlow", system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.35); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; white-space: nowrap; }
#cs-panel .fila { display: flex; align-items: center; gap: 3px; }
#cs-panel .fila > span { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #cfe0f5; margin-right: 3px; }
#cs-panel button { font: 600 11.5px/1 "Barlow", system-ui, sans-serif; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 5px; padding: 5px 7px; cursor: pointer; }
#cs-panel button.on { background: #97112a; border-color: #97112a; }
#cs-panel button.ir { background: #1d5a9e; border-color: #1d5a9e; }
#cs-panel .ocultar { position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%; padding: 0; background: #97112a; border: 0; }
#cs-panel.plegado > *:not(.ocultar) { display: none; }
#cs-panel.plegado { padding: 5px 10px; }
#cs-panel.plegado::after { content: "Demo: pulsa para abrir el panel"; }
:fullscreen #cs-panel { opacity: .35; }
:fullscreen #cs-panel:hover { opacity: 1; }
:fullscreen #ct-sesion { --cs-base: clamp(17px, 1.15vw, 24px); }

/* v4 (26/10/2026): la votación de verdad desde el móvil */
#ct-sesion .cs-voto-eti.cs-voto-cerrada { color: var(--cs-gris-azulado); }
#ct-sesion .cs-voto-guia.cs-voto-aviso { color: var(--cs-gris-azulado); font-weight: 500; }
/* v4 · votacion-2 (26/10/2026, noche). Ramón: «al enviar el voto no se debe ver en la pantalla […] porque si se ve eso
   influye en el voto de los demás». La bandeja de la votación: a la izquierda la pregunta y las opciones (el reparto, con
   su barra, solo al cerrar); a la derecha el tiempo para votar, la cifra grande de los que han votado y los botones; arriba,
   la barra del tiempo que queda. Barras de 0,8 em con el extremo redondeado (4 px) y la cifra en la punta */
#ct-sesion .cs-bandeja-cuerpo.cs-vt { position: relative; grid-template-columns: minmax(0, 1fr) 13.5em; gap: 0.4em 1.8em; align-items: stretch; padding-top: 1.05em; }
#ct-sesion .cs-vt-tiempo { position: absolute; left: 0; right: 0; top: 0; height: 0.36em; background: var(--cs-suave-2); overflow: hidden; visibility: hidden; }
#ct-sesion .cs-vt.fase-abierta .cs-vt-tiempo, #ct-sesion .cs-vt.fase-cerrando .cs-vt-tiempo { visibility: visible; }
#ct-sesion .cs-vt-tiempo i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--cs-acento); transform-origin: left center; }
#ct-sesion .cs-vt-izq { min-width: 0; }
#ct-sesion .cs-vt .cs-voto-pregunta { font-size: 1.25em; }
#ct-sesion .cs-vt-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em 0.8em; }
#ct-sesion .cs-vt-op { display: grid; grid-template-columns: 2em minmax(0, 1fr); gap: 0 0.7em; align-items: start; padding: 0.5em 0.85em 0.4em 0.55em; border: 1.5px solid var(--cs-linea); border-radius: 9px; background: #fff; transition: border-color .3s ease, box-shadow .3s ease; }
#ct-sesion .cs-vt-letra { grid-row: 1 / span 2; width: 2em; height: 2em; border-radius: 7px; display: grid; place-items: center; font-weight: 800; font-size: 0.95em; background: var(--cs-azul); color: #fff; transition: background-color .3s ease; }
#ct-sesion .cs-vt-texto { font-size: 0.97em; line-height: 1.28; padding-top: 0.12em; }
#ct-sesion .cs-vt-marca { display: none; color: var(--cs-acierto); font-weight: 700; }
#ct-sesion .cs-vt-linea { display: flex; align-items: center; gap: 0.45em; min-height: 1.4em; margin-top: 0.25em; visibility: hidden; }
#ct-sesion .cs-vt-op.con-cifra .cs-vt-linea { visibility: visible; }
#ct-sesion .cs-vt-barra { flex: none; height: 0.8em; width: calc((100% - 3.6em) * var(--p, 0)); border-radius: 0 4px 4px 0; background: var(--cs-azul); transition: width .9s cubic-bezier(.2, .8, .2, 1) var(--retraso, 0s), background-color .3s ease; }
#ct-sesion .cs-vt-cifra { font-style: normal; font-weight: 700; font-size: 1.05em; color: var(--cs-tinta); white-space: nowrap; }
#ct-sesion .cs-vt-op.guia { border-color: var(--cs-acierto); box-shadow: 0 0 0 1px var(--cs-acierto) inset; }
#ct-sesion .cs-vt-op.guia .cs-vt-letra, #ct-sesion .cs-vt-op.guia .cs-vt-barra { background: var(--cs-acierto); }
#ct-sesion .cs-vt-op.guia .cs-vt-marca { display: inline; }
#ct-sesion .cs-vt-notas { min-height: 2.7em; margin-top: 0.55em; }
#ct-sesion .cs-vt-pie { font-size: 0.82em; color: var(--cs-gris-azulado); }
#ct-sesion .cs-vt-pie:empty { display: none; }
#ct-sesion .cs-vt-pie b { color: var(--cs-azul); letter-spacing: .02em; }
#ct-sesion .cs-vt-notas .cs-voto-guia { margin-top: 0.3em; }
#ct-sesion .cs-vt-der { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55em; text-align: center; border-left: 1px solid var(--cs-linea); padding-left: 1.5em; min-height: 10em; }
#ct-sesion .cs-vt-der .cs-btn { width: 100%; }
#ct-sesion .cs-vt-pre { font-size: 0.72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-gris-azulado); }
#ct-sesion .cs-vt-seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border: 1.5px solid var(--cs-linea-fuerte); border-radius: 6px; overflow: hidden; }
#ct-sesion .cs-vt-seg button { min-height: 2.4em; font-weight: 700; color: var(--cs-azul); background: #fff; font-variant-numeric: tabular-nums; }
#ct-sesion .cs-vt-seg button + button { border-left: 1.5px solid var(--cs-linea-fuerte); }
#ct-sesion .cs-vt-seg button[aria-pressed="true"] { background: var(--cs-azul); color: #fff; }
@media (hover: hover) and (pointer: fine) { #ct-sesion .cs-vt-seg button[aria-pressed="false"]:hover { background: var(--cs-suave-2); } }
#ct-sesion .cs-vt-cuenta { display: grid; justify-items: center; gap: 0.1em; }
#ct-sesion .cs-vt-num { position: relative; display: inline-grid; place-items: center; min-width: 2.6em; }
#ct-sesion .cs-vt-n { position: relative; z-index: 1; display: inline-block; font-size: 5.2em; font-weight: 700; line-height: 1; color: var(--cs-azul); letter-spacing: -0.02em; }
#ct-sesion .cs-vt.fase-cerrada .cs-vt-n { color: var(--cs-tinta); }
#ct-sesion .cs-vt-onda { position: absolute; left: 50%; top: 50%; width: 6em; height: 6em; margin: -3em 0 0 -3em; border-radius: 50%; border: 0.2em solid var(--cs-acento); opacity: 0; pointer-events: none; }
#ct-sesion .cs-vt-mas { position: absolute; z-index: 2; right: -1em; top: 0.1em; font-size: 1.35em; font-weight: 800; color: var(--cs-acento); opacity: 0; pointer-events: none; }
#ct-sesion .cs-vt-n-eti { font-size: 0.9em; font-weight: 600; color: var(--cs-gris-azulado); }
#ct-sesion .cs-vt-reloj { font-size: 1.3em; font-weight: 700; color: var(--cs-azul); font-variant-numeric: tabular-nums; }
#ct-sesion .cs-vt-reloj.urgente { color: var(--cs-acento); }
/* v4 · votacion-3 (26/10/2026, noche): al cerrar, «votos guardados» y «Seguir con la sesión» (Ramón: «no sabes si se ha anotado
   el resultado o si le das a aspa se va a borrar»); «Votar otra vez», en pequeño */
#ct-sesion .cs-vt-guardado { display: inline-flex; align-items: center; gap: 0.3em; color: var(--cs-acierto); }
#ct-sesion .cs-vt-guardado svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#ct-sesion .cs-vt-otra { font-size: 0.85em; font-weight: 600; color: var(--cs-azul); padding: 0.25em 0.5em; border-radius: 6px; text-decoration: none; transition: color .15s ease; }
@media (hover: hover) and (pointer: fine) { #ct-sesion .cs-vt-otra:hover { color: var(--cs-categoria); } }
@media (max-width: 900px) { #ct-sesion .cs-bandeja-cuerpo.cs-vt { grid-template-columns: minmax(0, 1fr); } #ct-sesion .cs-vt-der { border-left: 0; padding-left: 0; min-height: 0; } #ct-sesion .cs-vt-ops { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { #ct-sesion .cs-vt-barra, #ct-sesion .cs-vt-op, #ct-sesion .cs-vt-letra { transition: none; } }
/* v4 · votacion-6 (28/10/2026): LAS PREGUNTAS A LA SALA. Al pie de la columna izquierda, «Preguntas a la sala», que se despliega hacia
   arriba con la lista numerada (el número en un círculo: vacío si falta votarla, azul si ya se votó, granate si está en la bandeja);
   el degradado del programa se queda encima de ella. Y la pantalla «Respuestas de la sala», con una tarjeta por pregunta */
#ct-sesion .cs-izq.con-preg::after { bottom: var(--cs-preg-h, 0px); }
#ct-sesion .cs-preg { position: relative; z-index: 3; flex: none; background: #fff; border-top: 1px solid var(--cs-linea); transition: opacity var(--cs-t) ease; }
#ct-sesion .cs-lado.plegado .cs-preg { opacity: 0; pointer-events: none; }
#ct-sesion .cs-preg-env { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--cs-t) ease; }
#ct-sesion .cs-preg.abierta .cs-preg-env { grid-template-rows: 1fr; }
#ct-sesion .cs-preg-in { min-height: 0; overflow: hidden; }
#ct-sesion .cs-preg-lista { max-height: 55vh; overflow: auto; padding: 0.6em 0.6em 0.55em; display: grid; gap: 0.15em; border-bottom: 1px solid var(--cs-linea); }
#ct-sesion .cs-preg-pista { margin: 0; padding: 0 0.5em 0.35em; font-size: 0.78em; line-height: 1.3; color: var(--cs-gris-azulado); }
#ct-sesion .cs-preg-nota { margin: 0.35em 0.4em 0; }
#ct-sesion .cs-preg-boton { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 0.7em; padding: 0.85em 0.9em 0.85em 1em; text-align: left; transition: background-color .15s ease; }
#ct-sesion .cs-preg-boton .cs-grupo-ico { background: var(--cs-acento); color: #fff; }
#ct-sesion .cs-preg-boton .cs-grupo-flecha { transform: rotate(180deg); }
#ct-sesion .cs-preg.abierta .cs-preg-boton { background: var(--cs-suave); }
#ct-sesion .cs-preg.abierta .cs-preg-boton .cs-grupo-flecha { transform: none; }
#ct-sesion .cs-preg-boton:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { #ct-sesion .cs-preg-boton:hover { background: var(--cs-suave); } }
#ct-sesion .cs-preg-elem { align-items: center; }
#ct-sesion .cs-preg-elem .cs-elem-n { width: 2em; height: 2em; margin-top: 0; border-radius: 50%; font-size: 0.86em; background: #fff; color: var(--cs-azul); box-shadow: inset 0 0 0 2px var(--cs-azul); }
#ct-sesion .cs-preg-elem.hecha .cs-elem-n { background: var(--cs-azul); color: #fff; }
#ct-sesion .cs-preg-elem.activo .cs-elem-n { background: var(--cs-acento); color: #fff; box-shadow: inset 0 0 0 2px var(--cs-acento); }
#ct-sesion .cs-preg-est { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.86em; font-weight: 700; color: var(--cs-acierto); }
#ct-sesion .cs-preg-est.vivo { color: var(--cs-acento); }
#ct-sesion .cs-preg-est.vivo i { width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; animation: cs-latido 1.2s ease-in-out infinite; }
#ct-sesion .cs-rs { max-width: 76em; }
#ct-sesion .cs-rs .cs-bv-idea { margin-bottom: 0.25em; }
#ct-sesion .cs-rs-sub { margin: 0 0 1.3em; font-size: 1.02em; color: var(--cs-gris-azulado); }
#ct-sesion .cs-rs-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26em), 1fr)); gap: 1em; align-items: start; }
#ct-sesion .cs-rs-p { display: grid; gap: 0.75em; padding: 1em 1.1em 0.85em; border: 1px solid var(--cs-linea); border-radius: 12px; background: #fff; box-shadow: var(--cs-sombra-1); }
#ct-sesion .cs-rs-p.sin { background: var(--cs-suave); box-shadow: none; }
#ct-sesion .cs-rs-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75em; align-items: start; }
#ct-sesion .cs-rs-n { width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--cs-azul); color: #fff; }
#ct-sesion .cs-rs-p.sin .cs-rs-n { background: #fff; color: var(--cs-azul); box-shadow: inset 0 0 0 2px var(--cs-azul); }
#ct-sesion .cs-rs-t { display: block; margin-top: 0.2em; font-size: 0.76em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-categoria); }
#ct-sesion .cs-rs-q { margin: 0.25em 0 0; font-weight: 600; font-size: 1.02em; line-height: 1.3; color: var(--cs-tinta); }
#ct-sesion .cs-rs-ops { display: grid; gap: 0.45em; }
#ct-sesion .cs-rs-f { display: grid; grid-template-columns: minmax(0, 1fr) 7.5em 3.7em; gap: 0.6em; align-items: center; }
#ct-sesion .cs-rs-op { font-size: 0.93em; line-height: 1.25; color: var(--cs-tinta); }
#ct-sesion .cs-rs-op b { color: var(--cs-categoria); margin-right: 0.4em; }
#ct-sesion .cs-rs-b { height: 0.8em; border-radius: 4px; background: var(--cs-suave-2); overflow: hidden; }
#ct-sesion .cs-rs-b:empty { background: none; }
#ct-sesion .cs-rs-b i { display: block; height: 100%; width: calc(100% * var(--p, 0)); border-radius: 0 4px 4px 0; background: var(--cs-azul); }
#ct-sesion .cs-rs-f em { font-style: normal; font-weight: 700; font-size: 0.95em; text-align: right; white-space: nowrap; color: var(--cs-tinta); }
#ct-sesion .cs-rs-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4em 1em; padding-top: 0.6em; border-top: 1px solid var(--cs-linea); font-size: 0.85em; color: var(--cs-gris-azulado); }
#ct-sesion .cs-rs-p.sin .cs-rs-pie { border-top-color: var(--cs-linea-fuerte); }
#ct-sesion .cs-rs-pie .cs-btn { min-height: 0; padding: 0.35em 0.9em; font-size: 0.95em; }
@media (prefers-reduced-motion: reduce) { #ct-sesion .cs-preg-env { transition: none; } #ct-sesion .cs-preg-est.vivo i { animation: none; } }
/* v4 · votacion-7 (10/11/2026): EL QR PEQUEÑO EN LA BANDEJA. Ramón: «tendrías que poner una imagen chiquitita de un QR para que se pueda
   hacer clic y así aumentar y no tener que abrir la columna derecha […] debería estar el QR en todas». A la izquierda de «Vota desde
   el móvil en…», mientras se puede votar y solo con la votación de verdad; mide lo mismo que el hueco de las notas (2,7 em), así que
   la bandeja no cambia de alto. Al pulsarlo, el QR en grande de siempre (cs-qr-ampliable) */
#ct-sesion .cs-vt-qr { display: none; flex: none; line-height: 0; }
#ct-sesion .cs-vt-notas.con-qr { display: flex; align-items: center; gap: 0.8em; }
#ct-sesion .cs-vt-notas.con-qr .cs-vt-qr { display: block; }
#ct-sesion .cs-vt-textos { flex: 1 1 auto; min-width: 0; }
#ct-sesion .cs-vt-qr svg { display: block; width: 2.7em; height: 2.7em; border: 1px solid var(--cs-linea-fuerte); border-radius: 6px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
@media (hover: hover) and (pointer: fine) { #ct-sesion .cs-vt-qr svg:hover { border-color: var(--cs-categoria); box-shadow: var(--cs-sombra-1); } }
@media (prefers-reduced-motion: reduce) { #ct-sesion .cs-vt-qr svg { transition: none; } }
/* v4 · votacion-8 y 9 (10/11/2026): LA DIRECCIÓN DEL QR GRANDE, EN UNA LÍNEA. En la capa «Síguelo en tu móvil» (v3) se partía en
   «cardioteca.com/s/IC-» y «4F7K». Ramón, al verlo: «Sí, en una línea». La dirección no se corta, y su letra baja con el ancho de la
   pantalla para que quepa siempre: en horizontal, junto al QR, la columna de texto tiene al menos 38 vw; en vertical, debajo, 87 vw.
   votacion-9: la columna ya no tiene tope de ancho (24 em), así que «Apunta la cámara al código o entra en» va en una línea si cabe
   (con el tope, en el Chrome de Ramón dejaba «en» solo en la segunda) */
#ct-sesion .cs-qrg-txt { max-width: none; }
#ct-sesion .cs-qrg-txt code { white-space: nowrap; word-break: normal; overflow-wrap: normal; font-size: min(2.1em, 2.3vw); }
@media (max-aspect-ratio: 1/1) { #ct-sesion .cs-qrg-txt code { font-size: min(2.1em, 5vw); } }

/* votacion-13 (12/11/2026): la imagen de la reunión en la portada (reunion.imagen), encima del recuadro del QR */
#ct-sesion .cs-portada-img { display: block; width: min(100%, 34vw); max-height: 40vh; height: auto; object-fit: contain; }