/* isthistrue. / escierto. — diseño v1: minimalista tipografico, contraste AA */
/* Sin fuentes de terceros (coherencia con la politica de privacidad): pilas del sistema */
:root{--ink:#141414;--paper:#faf9f6;--card:#ffffff;--line:#e4e1da;--grey:#5b5b5b;
--green:#1a7f37;--amber:#9a6b00;--red:#b3261e;--accent:#141414;--radius:10px;
--shadow:0 1px 3px rgba(20,20,20,.06),0 4px 14px rgba(20,20,20,.05)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,'Segoe UI',Inter,Roboto,sans-serif;color:var(--ink);background:var(--paper);margin:0;line-height:1.55}
a{color:var(--ink)}
/* Cabecera pegajosa */
header{background:var(--paper);border-bottom:2px solid var(--ink);padding:1.1rem 1rem .5rem;text-align:center}
.masthead{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.logo img{display:block;height:96px;max-width:94vw}
.lang-switch{font-size:.8rem;color:var(--grey)}
.lang-switch a{text-decoration:none;font-weight:600;color:var(--grey);padding:0 .3rem}
.lang-switch a.active{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
header nav{display:flex;justify-content:center;flex-wrap:wrap;gap:1.1rem;margin-top:.7rem}
.logo img{display:block;height:34px}
nav{display:flex;align-items:center;flex-wrap:wrap;gap:.9rem}
nav a{text-decoration:none;font-weight:600;font-size:.92rem}
nav a:hover{text-decoration:underline;text-underline-offset:4px}
main{max-width:900px;margin:1.6rem auto 3rem;padding:0 1.2rem}
h1{font-family:ui-monospace,'Courier Prime','Courier New',monospace;font-size:1.5rem;border-bottom:1px solid var(--line);padding-bottom:.35rem;margin:2rem 0 1rem}
h1:first-child{margin-top:.4rem}
h2{font-size:1.05rem;margin:1.4rem 0 .6rem}
/* Banner de cupos/donaciones */
.quota-banner{background:#fdf6e3;border-bottom:1px solid var(--line);padding:.45rem 1.2rem;
font-size:.84rem;text-align:center;color:#6b5900}
.quota-banner,footer{max-width:100%}
.messages{max-width:900px}
.quota-banner a{font-weight:700}
/* Listas de posts como tarjetas */
.post-list{list-style:none;padding:0;display:grid;gap:.55rem}
.post-list li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:.7rem .9rem;box-shadow:var(--shadow)}
.post-list li a{text-decoration:none;font-weight:600}
.post-list li a:hover{text-decoration:underline}
.badge{font-size:.72rem;border:1px solid var(--line);background:var(--paper);
padding:.12rem .5rem;border-radius:999px;margin-left:.45rem;color:var(--grey)}
/* Filtros de tema */
.topics{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 1rem}
.topics a{font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:.18rem .7rem;
text-decoration:none;background:var(--card)}
.topics a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Post y transcripcion */
article.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.embed iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:8px}
.transcript .segment{position:relative;padding:.4rem .6rem;border-left:3px solid var(--line);margin:.3rem 0;border-radius:0 6px 6px 0}
.ts{font-family:ui-monospace,'Courier Prime','Courier New',monospace;font-size:.8rem;color:var(--grey);margin-right:.45rem;text-decoration:none}
.speaker-tag{font-size:.68rem;background:#eef3fb;border-radius:4px;padding:.05rem .35rem;margin-right:.3rem;color:#28477a}
.signal{display:inline-block;font-size:.7rem;margin-left:.5rem;padding:.06rem .45rem;border-radius:4px;background:#efefec;color:var(--grey)}
.signal-CONTRADICTS_MODEL{background:#fdecea;color:var(--red)}
.signal-FACTUAL_UNVERIFIED{background:#e8f0fe;color:#28477a}
/* Difuminado de opiniones */
.segment.blurred .text,.segment.blurred .signal{filter:blur(6px);user-select:none}
.blur-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:.84rem;color:var(--grey);cursor:pointer;background:rgba(250,249,246,.6);border-radius:0 6px 6px 0}
/* Semaforo */
.color-GREEN h1{color:var(--green)}.color-AMBER h1{color:var(--amber)}
.color-RED h1{color:var(--red)}.color-GREY h1{color:var(--grey)}
.warning{border:1px solid var(--amber);background:#fff8e6;padding:.6rem .9rem;border-radius:8px}
.validation{border:1px dashed var(--line);border-radius:8px;padding:.7rem .9rem;margin:.8rem 0;background:var(--paper)}
.disclaimer,.hint{color:var(--grey);font-size:.85rem}
/* Hablantes */
.speakers{display:flex;gap:.8rem;flex-wrap:wrap;margin:.6rem 0}
.speaker-block{border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .9rem;background:var(--card)}
.candidate{display:flex;align-items:center;gap:.5rem;margin:.35rem 0}
.candidate img{border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.candidate.confirmed{font-weight:700}
/* Formularios y botones */
button{background:var(--ink);color:#fff;border:0;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-weight:600;font-size:.9rem}
button:hover{opacity:.88}
button.danger{background:var(--red)}
button.mini{padding:.2rem .6rem;font-size:.75rem}
button.linklike{background:none;color:var(--ink);text-decoration:underline;padding:0;font-weight:600}
label{display:block;margin:.7rem 0;font-weight:600;font-size:.9rem}
input,select,textarea{display:block;margin-top:.25rem;padding:.5rem .6rem;width:100%;max-width:460px;
border:1px solid var(--line);border-radius:8px;background:var(--card);font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
table{border-collapse:collapse;width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
td,th{border-bottom:1px solid var(--line);padding:.5rem .6rem;text-align:left;font-size:.9rem}
th{background:var(--paper)}
.messages{list-style:none;padding:0;max-width:900px;margin:.8rem auto 0;padding:0 1.2rem}
.messages li{padding:.55rem .9rem;border-radius:8px;margin:.3rem 0;font-size:.9rem}
.messages .success{background:#e6f4ea;color:#14522a}.messages .error{background:#fdecea;color:#7a1712}
.messages .info{background:#e8f0fe;color:#1d3f74}
.share{margin-top:1rem;font-size:.88rem;color:var(--grey)}
.share a{margin-right:.6rem;font-weight:600}
.link-card{border:1px dashed var(--ink);padding:1rem;border-radius:var(--radius);background:var(--card)}
/* Donaciones */
.progress{background:var(--line);border-radius:999px;height:14px;overflow:hidden;max-width:460px}
.progress > div{background:var(--green);height:100%}
footer{border-top:2px solid var(--ink);margin-top:3rem;padding:1.1rem;font-size:.8rem;text-align:center;color:var(--grey)}
footer a{color:var(--grey);margin:0 .25rem}
@media (max-width:640px){.logo img{height:56px}header nav{gap:.7rem;font-size:.88rem}main{margin-top:1rem}}

/* Banner XL (100% mas grande) con boton PayPal real siempre visible (decision de David) */
.quota-banner-xl{font-size:1.05rem;padding:1rem 1.2rem;display:flex;flex-direction:column;align-items:center;gap:.45rem}
.quota-banner-xl .qb-numbers{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center}
.quota-banner-xl .qb-message a{font-weight:700}
.paypal-banner-btn{min-height:38px;max-width:260px;width:100%}
@media (max-width:640px){.quota-banner-xl{font-size:.95rem}.quota-banner-xl .qb-numbers{gap:.8rem}}
/* Paginas de autenticacion (3.7): tarjeta centrada, misma familia que la landing */
.auth-card{max-width:440px;margin:1.5rem auto;background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem 1.8rem;text-align:left}
.auth-card h1{text-align:center;border-bottom:none;margin-top:0}
.auth-card input{max-width:100%}
.auth-card .help{display:block;font-weight:400;font-size:.78rem;color:var(--grey);margin-top:.2rem}
.auth-card .help ul{margin:.2rem 0 0 1rem;padding:0}
button.wide{width:100%;margin-top:.9rem;padding:.7rem}
.form-errors{background:#fdecea;border:1px solid var(--red);color:#7a1712;border-radius:8px;
padding:.7rem .9rem;margin-bottom:1rem;font-size:.9rem}
.form-errors ul{margin:.4rem 0 0 1.1rem;padding:0}
.auth-card details{margin-top:.8rem;font-size:.88rem}
/* Medidor de contraseña en vivo (3.8) */
.pw-meter{height:7px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:.4rem;max-width:460px}
#pw-bar{height:100%;width:0;transition:width .25s ease, background .25s ease}
#pw-bar.weak{background:var(--red)}#pw-bar.mid{background:var(--amber)}#pw-bar.strong{background:var(--green)}
.pw-rules{list-style:none;margin:.45rem 0 0;padding:0;font-size:.78rem;color:var(--grey);font-weight:400}
.pw-rules li{padding-left:1.15rem;position:relative;margin:.12rem 0}
.pw-rules li::before{content:'○';position:absolute;left:0}
.pw-rules li.ok{color:var(--green)}.pw-rules li.ok::before{content:'✓'}
.pw-rules li.bad{color:var(--red)}.pw-rules li.bad::before{content:'✗'}
.help.good{color:var(--green)}.help.bad-text{color:var(--red)}
button.wide:disabled{background:#9a9a94;cursor:not-allowed;opacity:.75}
/* Pase 3.9: CTA de analisis + selector de idioma arriba-derecha */
.cta-hero{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);padding:1.6rem 1.4rem;margin-bottom:1.4rem}
.cta-hero h2{font-family:ui-monospace,'Courier Prime','Courier New',monospace;font-size:1.35rem;margin:.2rem 0 .5rem}
.cta-hero p{max-width:560px;margin:.4rem auto .9rem;color:var(--grey)}
button.big{font-size:1.05rem;padding:.75rem 1.6rem}
header{position:relative}
.lang-switch-top{position:absolute;top:.55rem;right:1rem;display:flex;align-items:center;gap:.15rem}
.lang-switch-top button{background:none;color:var(--grey);padding:.1rem .35rem;font-weight:700;font-size:.85rem}
.lang-switch-top button.active{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lang-switch-top span{color:var(--grey)}
nav a.primary{background:var(--ink);color:#fff;padding:.35rem .9rem;border-radius:999px}
nav a.primary:hover{text-decoration:none;opacity:.88}
label.inline{display:flex;align-items:center;gap:.5rem;font-weight:400}
label.inline input{width:auto}
/* ---- 4.1 B3: selector de cantidad de donacion (banner) ---- */
.donate-inline{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:center}
.donate-amounts{border:0;padding:0;margin:0;display:flex;gap:.4rem;align-items:center}
.donate-amounts label{cursor:pointer}
.donate-amounts input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.donate-amounts span{display:inline-block;padding:.32rem .7rem;border:1.5px solid #111;border-radius:999px;font-weight:700;font-size:.9rem;background:#fff}
.donate-amounts input[type=radio]:checked + span{background:#111;color:#fff}
.donate-amounts input[type=radio]:focus-visible + span{outline:2px solid #4a90d9;outline-offset:2px}
#donate-other{width:5.2rem;padding:.3rem .5rem;border:1.5px solid #111;border-radius:8px;font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---- 4.1 B4: admin con la piel de la web (se aplica via admin/base_site.html) ---- */

/* ==================== PASE 4.2 ==================== */
/* C5: logo al DOBLE (decision de David 2026-08-15; antes 96/56) */
.logo img{height:192px}
@media (max-width:640px){.logo img{height:112px}}

/* A3: caja de transcripcion compacta — ~15 frases visibles, scroll nativo */
.transcript-box{max-height:calc(15 * 2.05em + 1rem);overflow-y:auto;line-height:1.35;
  border:1px solid var(--line);border-radius:8px;padding:.4rem .5rem;background:#fff}
.transcript-box .segment{margin:.15rem 0;padding:.25rem .5rem}

/* A4: affordance de clic solo donde el salto existe (YouTube/Twitch) */
.transcript.seekable .segment{cursor:pointer}
.transcript.seekable .segment:hover{outline:1px solid var(--line)}
.transcript.no-seek .segment{cursor:default}

/* C2: colores CLAROS por hablante (ciclo de 8; el color ACOMPAÑA a la etiqueta
   "Hablante N" visible — nunca es el unico indicador, accesibilidad). */
.segment.spk-0{background:#eef4fb}.segment.spk-1{background:#fbf3e7}
.segment.spk-2{background:#eefaf0}.segment.spk-3{background:#faeef3}
.segment.spk-4{background:#f3eefa}.segment.spk-5{background:#f7f9e8}
.segment.spk-6{background:#e8f7f9}.segment.spk-7{background:#f9f0e8}
.speaker-tag{display:inline-block;font-size:.72rem;font-weight:600;padding:0 .45rem;
  margin:0 .35rem;border-radius:9px;border:1px solid rgba(0,0,0,.12);color:#333}

/* A2: acciones de moderacion en el post */
.mod-actions{border:1px dashed var(--line);border-radius:8px;padding:.5rem .8rem;
  margin:.6rem 0;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.mod-actions form{display:flex;gap:.4rem;align-items:center;margin:0}
.mod-actions input{max-width:220px}

/* A5: barra Markdown (submit "Opina", respuestas del hilo, formularios machina) */
/* 4.3-E: con la barra completa (12 botones) hace falta que envuelva. */
.md-toolbar{display:flex;flex-wrap:wrap;gap:.25rem;margin:.3rem 0 .15rem;align-items:center}
/* 4.3-G (fallo en produccion): estos botones heredaban color:#fff de la regla
   global de <button> y se pintaban BLANCOS sobre fondo claro: doce recuadros
   vacios. Cualquier boton que cambie a un fondo claro DEBE fijar su color;
   hay un test que lo vigila en todo el archivo. */
.md-toolbar button{font-size:.8rem;padding:.15rem .55rem;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);border-radius:5px;cursor:pointer;
  font-weight:600;line-height:1.5;min-width:1.9rem}
.md-toolbar button:hover{background:#fff;border-color:var(--ink);color:var(--ink)}
.md-toolbar .md-sep{width:1px;height:1.1rem;background:var(--line);margin:0 .2rem}
.md-preview{border:1px dashed var(--line);border-radius:8px;background:#fff;
  padding:.5rem .8rem;margin:.4rem 0;font-size:.95rem}
.md-preview:empty{display:none}
.md-preview .md-preview-tag{font-size:.72rem;color:var(--grey);text-transform:uppercase;
  letter-spacing:.06em;display:block;margin-bottom:.25rem}

/* C4: hilo del foro dentro de la pagina del analisis */
.thread{margin-top:1.4rem;border-top:2px solid var(--line);padding-top:.8rem}
.thread-msg{border:1px solid var(--line);border-radius:8px;padding:.55rem .8rem;margin:.5rem 0;background:#fff}
.thread-meta{font-size:.8rem;color:#666;margin-bottom:.25rem}
.thread-body p{margin:.3rem 0}
/* 4.3-G (fallo en produccion): la regla global input,select,textarea impone
   max-width:460px, y width:100% NO la levanta — el cajon de respuesta salia
   estrecho en un hilo de 1.600 px. En un foro se escribe a todo el ancho. */
.thread-reply textarea{width:100%;max-width:none;box-sizing:border-box;
  min-height:11rem;font-size:.95rem;line-height:1.55;
  font-family:system-ui,-apple-system,'Segoe UI',Inter,Roboto,sans-serif}
.thread-reply{margin-top:1rem}
.reply-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.reply-hint{font-size:.78rem;color:var(--grey)}
/* 4.3-E: el hilo usa todo el ancho que le da su contenedor. */
.thread-msg{max-width:none}

/* C3: FORO — piel del sitio sobre el marcado de machina (sin Bootstrap).
   Reglas minimas y defensivas: tablas-tarjeta, migas, paginacion, botones. */
.forum-actions-block,.forum-list-wrapper,.topic-list-wrapper{margin:.6rem 0}
main table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
main table th{background:var(--paper);text-align:left;padding:.5rem .7rem;font-size:.85rem}
main table td{padding:.5rem .7rem;border-top:1px solid var(--line);vertical-align:top}
.breadcrumb{list-style:none;display:flex;gap:.4rem;padding:0;margin:.4rem 0;font-size:.85rem;flex-wrap:wrap}
.breadcrumb li+li::before{content:"›";margin-right:.4rem;color:#888}
.pagination{list-style:none;display:flex;gap:.3rem;padding:0;justify-content:center}
.pagination a,.pagination span{padding:.15rem .55rem;border:1px solid var(--line);border-radius:5px;text-decoration:none}
main .btn,main input[type=submit]{display:inline-block;padding:.3rem .8rem;border:1px solid var(--line);
  border-radius:6px;background:var(--paper);cursor:pointer;text-decoration:none;color:inherit}
main .btn:hover{background:#fff}
main .badge{font-size:.72rem;padding:0 .4rem;border-radius:9px;background:var(--paper);border:1px solid var(--line)}

/* 4.2 D2-D4: campana, suscripcion y Trending */
.bell{position:relative}
.bell-count{position:absolute;top:-6px;right:-10px;background:#c0392b;color:#fff;
  font-size:.62rem;font-weight:700;border-radius:9px;padding:0 .32rem;line-height:1.3}
.post-topbar{float:right;display:flex;gap:.5rem;align-items:flex-start}
.subscribe-box{position:relative}
.subscribe-box summary{cursor:pointer;list-style:none;font-size:1.25rem}
.subscribe-box[open] form{position:absolute;right:0;z-index:30;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem;min-width:220px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:.35rem}
.subscribe-box label{font-size:.85rem;display:flex;gap:.4rem;align-items:center}
.trending-badge{background:#fff3e0;border:1px solid #f0c48a;color:#8a5200;
  border-radius:9px;padding:0 .45rem;font-size:.75rem;font-weight:600}

/* 4.2 E1: Mi cuenta — secciones izquierda / ajustes derecha, con TOGGLES.
   El toggle es un checkbox real (accesible, funciona sin JS): la pista se pinta
   con CSS sobre el label contiguo; control a la IZQUIERDA, explicacion a la DERECHA. */
.settings-layout{display:grid;grid-template-columns:190px 1fr;gap:1.2rem;align-items:start}
.settings-nav{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.15rem;
  border:1px solid var(--line);border-radius:8px;padding:.5rem;background:#fff}
.settings-nav a{padding:.4rem .55rem;border-radius:6px;text-decoration:none;color:inherit;font-size:.92rem}
.settings-nav a:hover{background:var(--paper)}
.settings-section{border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:.7rem 1rem;margin:.7rem 0}
.settings-section:target{outline:2px solid #8a5200;outline-offset:2px}
.settings-section h2{margin:.2rem 0 .5rem;font-size:1.05rem}
.setting-row{display:flex;gap:.8rem;align-items:flex-start;padding:.55rem 0;
  border-top:1px solid var(--paper)}
.setting-row:first-of-type{border-top:0}
.setting-control{flex:0 0 46px;display:flex;justify-content:center;padding-top:.15rem;font-size:1.1rem}
.setting-text{flex:1}
.setting-text .hint{margin:.15rem 0 0}
/* El interruptor: input accesible + pista dibujada */
input.toggle{position:absolute;opacity:0;width:1px;height:1px}
.toggle-track{display:inline-block;width:42px;height:24px;border-radius:12px;
  background:#cfd5db;position:relative;cursor:pointer;transition:background .15s}
.toggle-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
input.toggle:checked + .toggle-track{background:#5c6470} /* H3: gris (decision de David) */
input.toggle:checked + .toggle-track::after{left:21px}
input.toggle:focus-visible + .toggle-track{outline:2px solid #8a5200;outline-offset:2px}
@media (max-width:700px){.settings-layout{grid-template-columns:1fr}
  .settings-nav{position:static;flex-direction:row;flex-wrap:wrap}}

/* 4.2 F1: la fuente original, discreta bajo el reproductor */
.source-link{margin:.25rem 0 .6rem;font-size:.8rem}

/* 4.2 H: iconos de contorno, herramientas por mensaje, difuminados, votos por oracion */
.icon{vertical-align:-3px}
.ibtn{background:none;border:0;padding:.1rem .25rem;cursor:pointer;color:#141414;
  display:inline-flex;align-items:center;gap:.2rem;font-size:.78rem;text-decoration:none}
.ibtn:hover{color:#000;background:var(--paper);border-radius:5px}
.msg-tools{display:inline-flex;gap:.25rem;align-items:center;flex-wrap:wrap}
.msg-tools form{margin:0;display:inline}
.thread-body-wrap{position:relative}
.msg-sensitive .thread-body,.msg-hidden-own .thread-body{filter:blur(7px);user-select:none}
.thread-body-wrap.revealed .thread-body{filter:none;user-select:auto}
.blur-cover{position:absolute;inset:0;width:100%;border:0;cursor:pointer;
  background:rgba(255,255,255,.55);font:inherit;color:#141414;font-weight:600}
.thread-body-wrap.revealed .blur-cover{display:none}
.seg-votes{display:inline-flex;gap:.15rem;margin-left:.4rem;vertical-align:middle}
.seg-votes form{display:inline;margin:0}

/* 4.3-A.1 K4: rejilla del post a TODO el ancho de la pantalla, video protagonista,
   hablantes izq, transcripcion dcha, los tres fijos con el scroll.
   (El truco del ancho-de-ventana quedo EXTINTO en 4.3-A.3 M1: main.wide manda.
   Ojo: el test de M1 prohibe esa cadena en TODO el archivo, comentarios incluidos.) */
/* 4.3-A.3 M1 (decision de David): la pagina del post es ANCHA de verdad —
   main.wide libera el limite de 900px y el article.post ocupa toda la pantalla,
   redimensionandose con la ventana. Sin desbordes artificiales de ventana. */
main.wide{max-width:none;padding:0 1.6rem}
main.wide .post{width:100%}
/* 4.3-E (decision de David): en la pagina del post, SOLO la rejilla de tres
   columnas (¿Quién habla? | vídeo | transcripción) usa el ancho completo. Todo
   lo demas —titulo, validacion, acciones de moderacion, compartir— se centra en
   una columna legible: una linea de texto de 1.900 px no la lee nadie.
   El hilo del foro se centra tambien, pero MUCHO mas ancho (decision de David:
   "debe ocupar todo el ancho de la pantalla"), porque ahi el contenido son
   mensajes y citas, no parrafos sueltos. */
main.wide .post > h1,
main.wide .post > .post-topbar,
main.wide .post > #post-body > .validation,
main.wide .post > #post-body > .mod-actions,
main.wide .post > #post-body > p,
main.wide .post > #post-body > form,
main.wide .post > .share{max-width:900px;margin-left:auto;margin-right:auto}
/* 4.3-G (orden de David): el hilo del foro ocupa TODO el ancho de la pantalla,
   como cualquier foro clasico. El limite de 1.600 px del 4.3-E se levanta. */
main.wide .post > #hilo{max-width:none;width:100%;margin-left:0;margin-right:0}
/* 4.3-A.4 N2: rejilla de tres columnas REAL — hablantes | vídeo | transcripción.
   La rejilla NO es sticky (eso acoplaba el scroll de la página al de la transcripción).
   Cada columna lateral scrollea por dentro, independiente; el vídeo se queda sticky
   por su cuenta para no perderlo de vista al leer. Altura de columna atada al viewport. */
.media-grid{background:#fff;border-bottom:1px solid var(--line);padding:.6rem 0;margin-bottom:1rem;
  display:grid;grid-template-columns:minmax(230px,300px) minmax(360px,1fr) minmax(360px,480px);
  gap:1.1rem;align-items:start}
.media-col{position:sticky;top:.6rem}
.media-col .embed{margin:0}
.media-col .embed iframe{width:100%;aspect-ratio:16/9;height:auto;min-height:260px;border-radius:8px}
/* cada lateral: su propio scroll, desacoplado del de la página */
.speakers-col,.transcript-col{max-height:calc(100vh - 5rem);overflow-y:auto;
  overscroll-behavior:contain;font-size:.85rem}
.speakers-col h2,.transcript-col h2{margin:.1rem 0 .25rem;font-size:.98rem}
.speakers-col .hint,.transcript-col .hint{font-size:.76rem;margin:.1rem 0 .3rem}
.transcript-col .transcript-box{max-height:none;overflow:visible;border:0;padding:0}
.speaker-block{border:1px solid var(--line);border-radius:8px;padding:.35rem .5rem;margin:.35rem 0;background:#fff}
.candidate{display:flex;align-items:center;gap:.35rem;padding:.15rem 0;flex-wrap:wrap}
.candidate img{border-radius:50%;width:28px;height:28px}
.candidate.confirmed{font-weight:700}
.propose-form{display:flex;gap:.3rem;margin-top:.25rem}
.propose-form input[name=name]{flex:1;min-width:0;font-size:.85rem;padding:.25rem .4rem}
@media (max-width:1100px){
  .media-grid{grid-template-columns:1fr;width:auto;margin-left:0;padding:.4rem 0}
  .media-col{order:-1;position:static}
  .speakers-col,.transcript-col{max-height:none;overflow:visible}
}

/* 4.3-A: foro clasico — separador de no leidos, firma */
.unread-divider{text-align:center;color:#8a5200;font-size:.8rem;font-weight:700;
  border-top:2px dashed #f0c48a;margin:.7rem 0 .3rem;padding-top:.2rem}
.signature{margin-top:.35rem;padding-top:.25rem;border-top:1px dotted var(--line);
  color:#777;font-size:.8rem;font-style:italic}

/* 4.3-A.2: bocadillos (toasts) — rectangulares, arriba a la derecha, diseño de la casa */
#toast-zone{position:fixed;top:14px;right:14px;z-index:200;display:flex;
  flex-direction:column;gap:.5rem;max-width:340px}
.toast{position:relative;background:#fff;border:1px solid var(--line);
  border-left:4px solid #f0c48a;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.12);
  padding:.6rem 1.9rem .6rem .8rem;font-size:.88rem;opacity:0;transform:translateY(-8px);
  transition:opacity .18s,transform .18s}
.toast.show{opacity:1;transform:none}
.toast-link{cursor:pointer}
.toast-link:hover{background:var(--paper)}
.toast-group{border-left-color:#5c6470;font-weight:600}
.toast-close{position:absolute;top:4px;right:6px;background:none;border:0;
  cursor:pointer;color:#888;font-size:.85rem;line-height:1;padding:.15rem}
.toast-close:hover{color:#141414}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}


/* 4.3-A.3 M2 + 4.3-A.4 N3: seguimiento EN VIVO. La frase que suena se ilumina (ámbar
   suave) y su columna la sigue; y la FICHA del hablante activo (columna izquierda) se
   resalta en GRISÁCEO —así, al pausar el vídeo, se ve de un vistazo quién estaba hablando. */
/* 4.3-A.5 O2 (decisión de David): la intervención que suena va en NEGRO, con su texto
   y su marca de tiempo en BLANCO — el resto de frases quedan en su color claro por
   hablante. Así se sigue el hilo de la conversación de un vistazo. */
.segment.live,.transcript .segment:hover{background:#141414;border-left:3px solid #141414;
  border-radius:4px;transition:background .12s,color .12s}
.segment.live,.segment.live .text,
.transcript .segment:hover,.transcript .segment:hover .text{color:#fff}
.segment.live .ts,.transcript .segment:hover .ts{color:#fff;font-weight:700}
/* 4.3-A.7 (reporte de David en el primer analisis real): al posar el raton sobre
   una frase, la frase "desaparecia". No desaparecia: la regla de hover le devolvia
   un fondo casi blanco SIN devolverle el color a la letra -> blanco sobre blanco.
   Decision de David: el hover se comporta igual que la intervencion activa (negro
   con letra blanca). Asi las dos reglas dicen lo mismo y no pueden pelearse. */
.transcript .segment:hover .signal,.segment.live .signal{
  background:#fff;color:#141414;font-weight:600}
/* la ficha del hablante activo (columna izquierda), también en negro con texto blanco */
.speaker-block.speaking{background:#141414;border-color:#141414;color:#fff;
  box-shadow:inset 3px 0 0 #000;transition:background .15s,color .15s}
.speaker-block.speaking .speaker-tag{color:#fff}
/* 4.3-A.6 P2 (reporte de David): la pildora "Hablante N" seguia luciendo su fondo
   azul palido heredado (#eef3fb) mientras su texto pasaba a blanco — blanco sobre
   azul clarito NO se lee (contraste 1,1:1). Opcion elegida por David: pildora
   BLANCA MACIZA con el texto en negro; se lee desde lejos sobre el fondo #141414.
   De paso: los botones de voto eran negros sobre negro (invisibles) y el velo de
   las opiniones difuminadas se aclaraba a gris ilegible. */
/* Pildora del hablante: OPCION A elegida por David (2026-08-17), la misma que se
   eligio en el A.6 — blanca maciza con letra negra: sobre el negro se ve donde
   acaba la etiqueta y donde empieza la frase. Se aplica igual en hover. */
.segment.live .speaker-tag,.speaker-block.speaking .speaker-tag,
.transcript .segment:hover .speaker-tag{
  background:#fff;border-color:#fff;color:#141414;font-weight:700;opacity:1}
.segment.live .ibtn,.transcript .segment:hover .ibtn{color:#fff}
.segment.live .ibtn:hover,.transcript .segment:hover .ibtn:hover{color:#141414;background:#fff}
.segment.live .blur-overlay,.transcript .segment:hover .blur-overlay{
  background:rgba(20,20,20,.75);color:#fff}
/* El boton de discutir es el UNICO de la frase: que se lea como una accion. */
.ibtn.dispute{font-size:.74rem;opacity:.75}
.ibtn.dispute:hover{opacity:1}

/* 4.3-A.5 O4 (petición imperativa de David): el toggle de registro de nuevos usuarios,
   destacado arriba del panel en su propio recuadro. Verde=abierto, rojo=cerrado. */
.reg-gate{border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;margin:.4rem 0 1.2rem;
  background:#fff;border-left:5px solid #5c6470}
.reg-gate.reg-open{border-left-color:#2e7d4f;background:#f4fbf6}
.reg-gate.reg-closed{border-left-color:#b23b3b;background:#fdf4f4}
.reg-gate .reg-state{margin:.35rem 0 0;font-size:.86rem;font-weight:600}
.settings-sub{font-size:1.02rem;margin:.4rem 0 .5rem;color:#555;
  border-top:1px solid var(--line);padding-top:.8rem}

/* 4.3-A.6 P1 (decision de David: "Panel" y "Ajustes" se integran): UNA cabecera
   para todo el panel y debajo las pestanas. El h1 pierde su raya inferior porque
   la barra ya trae la suya: dos rayas seguidas parecian un error de maquetacion. */
.panel-head{border-bottom:0;padding-bottom:0;margin:.4rem 0 .55rem}
.panel-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1.2rem;
  border-bottom:1px solid var(--line);padding-bottom:.6rem}
.panel-tabs a{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;
  font-weight:600;text-decoration:none;padding:.28rem .75rem;border-radius:999px;
  border:1px solid var(--line);background:var(--card)}
.panel-tabs a:hover{background:var(--paper)}
.panel-tabs a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Autocompletado de hablantes con Wikidata (2026-08-17) */
.speaker-suggest{position:relative}
/* 4.3-E (David): "no sale el listado completo a no ser que se dé scroll".
   Eran DOS recortes encadenados: el propio max-height de la lista, y —el de
   verdad— que .speakers-col tiene overflow-y:auto, así que recortaba a su hija
   posicionada. Ahora la lista no se limita a sí misma, y mientras hay
   sugerencias abiertas la columna deja de recortar (clase .suggesting, que pone
   el JS y quita al cerrar). Sin JS no hay lista, así que no hay nada que recortar. */
.suggest-list{list-style:none;margin:.25rem 0 0;padding:.2rem;position:absolute;z-index:30;
left:0;right:0;background:var(--card);border:1px solid var(--ink);
border-radius:8px;box-shadow:var(--shadow)}
.speakers-col.suggesting{overflow:visible;max-height:none}
.suggest-item{display:flex;align-items:center;gap:.5rem;padding:.32rem .45rem;border-radius:6px;
cursor:pointer;font-size:.82rem;line-height:1.25}
.suggest-item:hover,.suggest-item:focus{background:var(--ink);color:#fff;outline:none}
.suggest-item img{border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--line)}
.suggest-item .s-name{font-weight:700}
.suggest-item .s-desc{color:var(--grey);font-size:.75rem}
.suggest-item:hover .s-desc,.suggest-item:focus .s-desc{color:#d8d8d8}
.candidate .who{color:var(--grey);font-size:.72rem;display:block}

/* --- 4.3-C: la ficha de persona ES la wiki ------------------------------- */
.person-head{display:flex;gap:1rem;align-items:flex-start;margin-bottom:.6rem}
.person-photo{width:96px;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.person-desc{margin:.15rem 0;color:var(--grey);font-size:.92rem}
.person-legal{border-left:3px solid var(--line);padding-left:.7rem;margin:.8rem 0 1.2rem}
.claim-group{margin:1.1rem 0}
.claim-group h2{font-size:1rem;margin:0 0 .4rem;padding-left:.55rem;border-left:4px solid var(--line)}
.claim-group.group-GREEN h2{border-left-color:#1a7f37}
.claim-group.group-AMBER h2{border-left-color:#9a6b00}
.claim-group.group-RED h2{border-left-color:#b3261e}
.claim-group.group-GREY h2{border-left-color:#5b5b5b}
.claim-list{margin:0;padding-left:1.1rem}
.claim-list li{margin:.25rem 0;line-height:1.4}
.disambig-list{list-style:none;padding:0}
.disambig-item{display:flex;gap:.7rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line)}
.disambig-photo{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}

/* --- 4.3-F: cartel de la cola de presupuesto ---------------------------- */
.validation.queued{border-left:4px solid var(--amber,#9a6b00);background:#fdf8ef}
.validation.queued .btn{margin-left:.4rem}

/* ==========================================================================
   4.3-G · FORO CLASICO (orden de David: "tiene que ser EXACTAMENTE el de un
   foro clasico: todo el ancho, formateo, citas, etc.")
   La clase .fmsg es SOLO del hilo del post: la bandeja de mensajes privados
   reutiliza .thread-msg y no debe convertirse en rejilla de dos columnas.
   ========================================================================== */
.thread-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:.8rem;flex-wrap:wrap;margin-bottom:.2rem}
.thread-head h2{margin:0}
.thread-count{font-size:.82rem;color:var(--grey)}
.thread-count a{font-weight:600}
.fmsg{display:grid;grid-template-columns:200px minmax(0,1fr);padding:0;overflow:hidden;
  margin:.55rem 0}
.fmsg .msg-author{background:var(--paper);border-right:1px solid var(--line);
  padding:.65rem .75rem;font-size:.78rem;color:var(--grey);min-width:0}
.fmsg .msg-author .who{display:block;font-size:.95rem;font-weight:700;color:var(--ink);
  overflow-wrap:anywhere;margin-bottom:.1rem}
.fmsg .msg-author .who-line{display:block;line-height:1.5}
.fmsg .msg-author .who-level{font-weight:600;color:var(--ink)}
.msg-avatar,.msg-monogram{width:54px;height:54px;border-radius:8px;display:block;
  margin-bottom:.4rem}
.msg-avatar{object-fit:cover;border:1px solid var(--line)}
.msg-monogram{background:var(--ink);color:#fff;font-family:ui-monospace,'Courier Prime','Courier New',monospace;
  font-size:1.6rem;font-weight:700;line-height:54px;text-align:center}
.fmsg .msg-main{padding:.55rem .85rem;min-width:0}
.msg-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  flex-wrap:wrap;font-size:.79rem;color:var(--grey);
  border-bottom:1px dotted var(--line);padding-bottom:.3rem;margin-bottom:.5rem}
.msg-num{font-family:ui-monospace,'Courier Prime','Courier New',monospace;font-weight:700;
  color:var(--grey);text-decoration:none}
.msg-num:hover{color:var(--ink);text-decoration:underline}
.msg-edited{font-style:italic}
/* El cuerpo del mensaje: Markdown de verdad, sin desbordes */
.thread-body{overflow-wrap:anywhere}
.thread-body blockquote{border-left:3px solid var(--line);background:var(--paper);
  margin:.5rem 0;padding:.35rem .75rem;border-radius:0 6px 6px 0;color:#3a3a3a}
.thread-body blockquote blockquote{background:#fff}
.thread-body pre{background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:.5rem .7rem;overflow:auto}
.thread-body code{background:var(--paper);border-radius:4px;padding:0 .25rem;
  font-family:ui-monospace,'Courier Prime','Courier New',monospace;font-size:.9em}
.thread-body pre code{background:none;padding:0}
.thread-body img{max-width:100%;height:auto;border-radius:6px}
.thread-body hr{border:0;border-top:1px solid var(--line);margin:.7rem 0}
.thread-body h1,.thread-body h2,.thread-body h3{font-size:1.05rem;margin:.6rem 0 .3rem;
  border:0;padding:0;font-family:inherit}
.thread-body ul,.thread-body ol{margin:.35rem 0;padding-left:1.4rem}
/* Paginacion de foro: primera / anterior / ventana / siguiente / ultima */
.pagination-bar{display:flex;justify-content:space-between;align-items:center;
  gap:.6rem;flex-wrap:wrap;margin:.5rem 0}
.pagination{margin:0;flex-wrap:wrap;justify-content:flex-start}
.pagination .cur{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
.pagination .off{color:#a8a8a8}
.page-of{font-size:.78rem;color:var(--grey)}
@media (max-width:700px){
  .fmsg{grid-template-columns:1fr}
  .fmsg .msg-author{border-right:0;border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
  .fmsg .msg-author .who{margin:0}
  .msg-avatar,.msg-monogram{width:34px;height:34px;margin:0;line-height:34px;font-size:1.1rem}
  .fmsg .msg-author .who-line{font-size:.74rem}
}

/* ==========================================================================
   4.4-B · EL SEMAFORO EN LA TRANSCRIPCION
   Seis estados, y cada uno dice una cosa distinta. El gris de "no verificable"
   y el "lo he mirado y no me decido" NO pueden parecerse: el lector tiene que
   saber si el sistema trabajo o no.
   ========================================================================== */
.verdict{display:inline-block;font-size:.72rem;font-weight:700;padding:.05rem .45rem;
  border-radius:999px;margin-left:.35rem;text-decoration:none;border:1px solid transparent;
  vertical-align:middle;line-height:1.6}
.verdict:hover{text-decoration:underline}
.verdict-GREEN{background:#e7f4e9;color:#1c5c2a;border-color:#bfe0c6}
.verdict-AMBER{background:#fdf3dd;color:#7a5405;border-color:#f0dcae}
.verdict-RED{background:#fbe6e6;color:#8c1c1c;border-color:#eec2c2}
.verdict-GREY{background:var(--paper);color:var(--grey);border-color:var(--line)}
.verdict-PENDING{background:#fff;color:var(--grey);border-color:var(--line);font-weight:600}
.verdict-UNDECIDED{background:#eef1f7;color:#3a4a6b;border-color:#ccd6e8}
.verdict-NEEDS_HUMAN{background:#f3ecf7;color:#5a3a70;border-color:#ddd0e6}
.verdict-basis,.verdict-sources{font-size:.7rem;color:var(--grey);margin-left:.3rem}
.verdict-basis{font-style:italic}
.event-date{font-size:.8rem;color:var(--grey);margin:.4rem 0 0;text-align:center}
.event-date em{font-style:italic}

/* 4.4-C · PANEL DE MODELOS ================================================
   Libertad total con aviso de coste (decisión de David): el número se ve ANTES
   de guardar, y el aviso de "te estás disparando en el pie" no se puede no leer.
   ========================================================================== */
.tutorial{border:1px solid var(--line);border-radius:10px;background:var(--paper);
  padding:.7rem .9rem;margin:.6rem 0 1rem}
.tutorial summary{cursor:pointer}
.tutorial p{margin:.5rem 0}
.tutorial ul{margin:.4rem 0;padding-left:1.3rem}
.cost-banner{border:1px solid var(--ink);border-radius:10px;padding:.6rem .9rem;
  margin:.6rem 0 1rem;display:flex;justify-content:space-between;align-items:baseline;
  gap:.8rem;flex-wrap:wrap;background:#fff}
.model-row{border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;
  margin:.5rem 0;background:#fff}
.model-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:.6rem;flex-wrap:wrap;margin-bottom:.4rem}
.model-controls{display:flex;gap:1rem;flex-wrap:wrap}
.model-controls label{font-size:.82rem;color:var(--grey)}
.model-controls select{max-width:320px}
.model-row .warning{margin:.5rem 0 0;font-size:.85rem}
.model-row .ko{color:#8c1c1c}

/* 4.4-G: la llave inglesa (menu de moderacion) y la pagina de confirmacion. */
.mod-menu{margin-top:.4rem;font-size:.9rem}
.mod-menu summary{cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;font-weight:600;list-style:none}
.mod-menu summary::-webkit-details-marker{display:none}
.mod-menu .icon{vertical-align:-3px}
.relaunch-list{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.relaunch-list form{display:flex;gap:.5rem;align-items:center;margin:0}
.relaunch-cost{font-size:.78rem;color:var(--grey);font-variant-numeric:tabular-nums}
.relaunch-off{color:var(--grey)}
.relaunch-confirm{max-width:560px;border:1px dashed var(--line);border-radius:8px;padding:.8rem 1rem;margin-top:.6rem}
.relaunch-confirm .relaunch-cost{font-size:1rem;color:inherit;font-weight:700}
.relaunch-confirm form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.6rem}
.relaunch-confirm label{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem;flex-basis:100%}
.relaunch-confirm input[type=number]{max-width:120px}
.waiting-ident{display:block;margin-top:.2rem}

/* 4.4-I: frases de atribucion incierta y su cajon en «¿Quien habla?» */
.segment .uncertain{font-size:.72rem;color:var(--amber);border:1px dashed currentColor;border-radius:4px;padding:0 .3rem;margin-left:.3rem;white-space:nowrap}
.uncertain-box{margin:.4rem 0 .8rem;border:1px dashed var(--line);border-radius:8px;padding:.4rem .6rem;font-size:.85rem}
.uncertain-box summary{cursor:pointer;font-weight:600}
.uncertain-list{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.uncertain-form{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.2rem}
.uncertain-form button.mini{color:#fff}