/* ============================================================================
   PANEL DE LA LIGA DE BIO (2026-09-18): la cascara de public/liga-bio.js y el editor de public/pagina.js
   vestido con Cuarto Oscuro. Lienzo: "Liga de bio, pantallas" (Main, Empezar, Armada, Publicar, Publicada,
   Actividad, Ajustes, y los tableros de telefono).

   Por que un archivo aparte y cargado despues de cuarto-oscuro.css: styles.css (9k lineas) y esa hoja son de
   las mas calientes del repo. Aqui vive el panel entero, y pisa por orden las reglas viejas de .pp-* de
   styles.css sin editarlas (siguen sirviendo a la salida de emergencia, localStorage.liga_v1).

   Reglas que se sostienen aqui, las de Cuarto Oscuro: solo tokens (--pag, --piedra, --tinta, --medio, --linea,
   --urge, --r, --r-flota, --e-*, --t-*): NINGUN color escrito a mano, salvo el del QR y el del marco del
   sitio del estudio, que no son de la interfaz. Pildora = se toca; 16 px = flota; 4 px = contenido. Filas sin
   cajas ni rayas. Nada se anima con teclado. Sin raya larga en ningun texto.
   ============================================================================ */

/* ------------------------------- el marco de la pantalla ------------------------------- */
/* Pantalla completa (como el editor de siempre): #view deja de ser la caja de pagina y la columna no
   scrollea; scrollea el cuerpo de cada pestana. #view es el CONTENEDOR de las consultas de ancho. */
.main > #view:has(.lg-liga){ max-width:none; padding:0; overflow:visible; container-type:inline-size; }
.main:has(.lg-liga){ overflow:hidden; }
.lg-liga{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--pag); color:var(--texto); min-height:0; }
.lg-carga{ margin:var(--e-7) auto; color:var(--medio); }

/* Todo lo de arriba comparte la misma columna centrada, para que titulo, pestanas y editor alineen. */
.lg-cab, .lg-tabs, .lg-franja, .lg-cuerpo-editor > .pp-editor{
  width:min(1272px, calc(100% - 2 * var(--e-5))); margin-inline:auto; box-sizing:border-box;
}
.lg-cuerpo{ flex:1; min-height:0; overflow:auto; }
.lg-cuerpo-editor{ display:flex; flex-direction:column; overflow:hidden; }
.lg-cuerpo-editor > .pp-editor{ flex:1; min-height:0; }

/* ------------------------------------- la fila de arriba ------------------------------------- */
.lg-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e-4); padding:var(--e-5) 0 var(--e-3); flex:none; }
.lg-cab-titulo{ display:flex; align-items:center; gap:var(--e-3); }
.lg-cab-titulo .ptitle{ margin:0; }
.lg-estado{ display:inline-flex; align-items:center; min-height:24px; padding:0 12px; border-radius:var(--r-pildora); font-size:var(--t-meta); color:var(--medio); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); }
.lg-estado-publicada, .lg-estado-cambios{ background:var(--piedra-on); color:var(--tinta); box-shadow:none; }
.lg-enlace{ display:flex; align-items:center; gap:var(--e-1); margin-top:var(--e-1); color:var(--medio); font-size:var(--t-texto); min-width:0; }
.lg-enlace-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lg-icono{ width:28px; height:28px; flex:none; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
@media (hover:hover){ .lg-icono:hover{ background:var(--tinte-toque); color:var(--tinta); } }
.lg-cab-acciones{ display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap; justify-content:flex-end; }
.lg-cab-acciones .btn svg, .lg-comp .btn svg, .lg-arm-btns .btn svg, .lg-emp-op .btn svg{ flex:none; }

.lg-tabs{ flex:none; }
.lg-tabs .fchip{ text-decoration:none; }
.lg-franja{ display:flex; align-items:baseline; gap:var(--e-2); padding:var(--e-3) 0 var(--e-4); font-size:var(--t-texto); color:var(--medio); flex:none; min-height:20px; flex-wrap:wrap; }
.lg-franja b{ color:var(--tinta); font-weight:500; }
.lg-franja-ico{ display:inline-flex; color:var(--medio); align-self:center; }
.lg-falta{ color:var(--tinta); text-decoration:underline; text-underline-offset:3px; }

/* ------------------------------------ textos y bloques comunes ------------------------------------ */
.lg-pag{ width:100%; max-width:1080px; margin:0 auto; padding:var(--e-4) var(--e-5) var(--e-7); box-sizing:border-box; }
.lg-act, .lg-aj, .lg-asis{ width:min(1272px, calc(100% - 2 * var(--e-5))); max-width:none; padding-inline:0; }
.lg-emp-h{ font-size:var(--t-titulo); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:var(--tinta); margin:var(--e-4) 0 var(--e-2); }
.lg-emp-sub{ color:var(--medio); max-width:58ch; margin:0 0 var(--e-4); line-height:1.6; }
.lg-etq{ display:block; font-size:var(--t-meta); color:var(--medio); margin:var(--e-5) 0 var(--e-2); }
.lg-nota{ color:var(--apagado); font-size:var(--t-meta); line-height:1.55; max-width:64ch; margin:var(--e-2) 0 0; }
.lg-nota-primera{ margin-top:0; margin-bottom:var(--e-3); }
.lg-nota code{ font-family:var(--mono); font-size:inherit; color:var(--medio); }
.lg-pill{ display:inline-flex; align-items:center; min-height:22px; padding:0 10px; margin-left:var(--e-2); border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--medio); font-size:var(--t-meta); font-weight:400; vertical-align:middle; }

/* ------------------------------------------- Empezar ------------------------------------------- */
.lg-emp{ max-width:820px; }
.lg-emp-ops{ margin-bottom:var(--e-2); }
.lg-emp-op{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-5); padding:var(--e-4) 0; }
.lg-emp-op-t{ color:var(--tinta); font-weight:500; }
.lg-emp-op p{ margin:var(--e-1) 0 0; color:var(--medio); font-size:var(--t-texto); line-height:1.55; max-width:56ch; }
.lg-estilos{ display:flex; flex-wrap:wrap; gap:var(--e-3); }
.lg-estilo{ width:118px; border:0; padding:var(--e-2); border-radius:var(--r-flota); background:transparent; color:var(--medio); cursor:pointer; display:flex; flex-direction:column; gap:var(--e-2); align-items:center; font:inherit; font-size:var(--t-meta); }
.lg-estilo.on{ box-shadow:inset 0 0 0 2px var(--tinta); color:var(--tinta); }
@media (hover:hover){ .lg-estilo:not(.on):hover{ background:var(--tinte-toque); color:var(--tinta); } }
.lg-mini{ width:100%; aspect-ratio:3 / 4; border-radius:var(--r); padding:14px 12px; box-sizing:border-box; display:flex; flex-direction:column; gap:7px; box-shadow:inset 0 0 0 1px var(--linea); }
.lg-mini-foto{ height:38%; border-radius:2px; opacity:.55; }
.lg-mini-linea{ height:5px; border-radius:2px; opacity:.7; }
.lg-mini-corta{ width:58%; }
.lg-mini-btn{ height:15px; border-radius:var(--r-pildora); margin-top:2px; }
.lg-mini-borde{ background:transparent; border:1.5px solid; margin-top:0; }
.lg-mas{ display:inline-flex; align-items:center; gap:var(--e-2); margin-top:var(--e-3); border:0; background:transparent; color:var(--medio); font:inherit; font-size:var(--t-meta); cursor:pointer; padding:var(--e-1) 0; }
@media (hover:hover){ .lg-mas:hover{ color:var(--tinta); } }
.lg-emp-nota{ color:var(--apagado); font-size:var(--t-meta); max-width:60ch; margin:var(--e-3) 0 0; }
.lg-emp-saltar{ display:inline-block; margin-top:var(--e-5); color:var(--medio); font-size:var(--t-texto); text-decoration:underline; text-underline-offset:3px; }

/* ------------------------------------- la liga que armo Xarpie ------------------------------------- */
.lg-arm{ display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:var(--e-7); align-items:start; max-width:960px; }
.lg-arm-lista{ list-style:none; margin:0; padding:0; }
.lg-arm-lista li{ display:flex; align-items:center; gap:var(--e-3); padding:var(--e-2) 0; color:var(--texto); }
.lg-arm-lista .lg-ap-txt{ flex:1; }
.lg-arm-nada{ color:var(--medio); }
.lg-arm-btns{ display:flex; gap:var(--e-2); margin-top:var(--e-5); flex-wrap:wrap; }
.lg-tel{ width:300px; max-width:100%; height:560px; border-radius:28px; overflow:hidden; background:white; box-shadow:0 0 0 6px var(--piedra-on); margin:0 auto; }
.lg-tel iframe{ width:100%; height:100%; border:0; display:block; background:white; }
.lg-arm-pie{ text-align:center; color:var(--apagado); font-size:var(--t-meta); margin:var(--e-4) 0 0; }

/* ------------------------------ dialogos: Antes de publicar y Compartir ------------------------------ */
.lg-dlg-sub{ color:var(--medio); margin:0 0 var(--e-4); line-height:1.55; }
.lg-dlg-nota{ color:var(--apagado); font-size:var(--t-meta); line-height:1.55; margin:var(--e-3) 0 0; }
.lg-ap-lista{ list-style:none; margin:0; padding:0; }
.lg-ap-it{ display:flex; align-items:center; gap:var(--e-3); padding:var(--e-2) 0; }
.lg-ap-marca{ width:18px; height:18px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--punto); color:var(--tinta); }
.lg-ap-it.ok .lg-ap-marca, .lg-arm-lista li:has(svg) .lg-ap-marca{ box-shadow:none; }
.lg-ap-txt{ flex:1; color:var(--tinta); }
.lg-ap-it.ok .lg-ap-txt{ color:var(--medio); }
.lg-comp-tit{ display:flex; align-items:center; gap:var(--e-2); }
.lg-comp-ok{ display:inline-flex; color:var(--tinta); }
.lg-comp-fila{ display:flex; gap:var(--e-2); }
.lg-comp-fila .inp{ flex:1; min-width:0; }
.lg-comp-cols{ display:grid; grid-template-columns:168px minmax(0, 1fr); gap:var(--e-5); margin-top:var(--e-5); align-items:start; }
.lg-comp-qr{ display:flex; flex-direction:column; gap:var(--e-2); align-items:stretch; }
/* Un QR necesita contraste FIJO (oscuro sobre claro) en los dos temas: el lienzo es blanco a proposito. */
.lg-qr{ padding:8px; background:white; border-radius:var(--r); }
.lg-qr svg{ display:block; width:100%; height:auto; }
.lg-comp-origenes .lg-etq{ margin-top:0; }
.lg-origen{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); padding:var(--e-1) 0; }
.lg-origen-txt{ display:flex; flex-direction:column; min-width:0; }
.lg-origen-n{ color:var(--tinta); }
.lg-origen-u{ color:var(--apagado); font-size:var(--t-meta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ------------------------------------------ Asistente ------------------------------------------ */
.lg-asis-ver{ margin:var(--e-5) 0 0; }
.lg-asis-ver a{ color:var(--medio); text-decoration:underline; text-underline-offset:3px; }

/* ---------------------------- Asistente: configuracion y prueba (Fase 2) ---------------------------- */
/* Dos columnas: la configuracion a la izquierda y, a la derecha, la vista previa o el chat de prueba dentro de un
   telefono. Debajo de 1100 px la vista no cabe al lado y "Probar como visitante" abre una hoja. Solo tokens. */
.lg-pag.lg-as{ width:min(1272px, calc(100% - 2 * var(--e-5))); max-width:none; padding-inline:0; }
.lg-as-grid{ display:grid; grid-template-columns:minmax(0, 640px) minmax(320px, 400px); justify-content:space-between; gap:var(--e-7); align-items:start; }
.lg-as-cfg{ min-width:0; }
.lg-as-vista{ position:sticky; top:var(--e-4); display:flex; flex-direction:column; gap:var(--e-3); min-width:0; }
.lg-as-sec{ padding:var(--e-3) 0 var(--e-5); }
.lg-as-h{ display:flex; align-items:center; gap:var(--e-3); margin:0 0 var(--e-3); font-size:var(--t-meta); font-weight:400; color:var(--medio); }
.lg-as-h2{ margin-top:var(--e-5); }
.lg-as-solo{ display:inline-flex; align-items:center; gap:var(--e-1); font-size:var(--t-meta); color:var(--apagado); font-weight:400; }
.lg-as-cab-fila{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e-5); }
.lg-as-cab-t{ min-width:0; }
.lg-as-cab-t .lg-emp-h{ margin:var(--e-2) 0 var(--e-1); font-size:var(--t-sub); }
.lg-as-cab-t .lg-emp-sub{ margin:0; font-size:var(--t-texto); }
.lg-as-cab-sw{ display:flex; align-items:center; gap:var(--e-3); flex:none; padding-top:var(--e-2); }
/* Con el prefijo de tema: .btn de cuarto-oscuro.css trae su propio display y ganaba por especificidad. */
:root[data-theme] .lg-as-probar-btn{ display:none; margin-top:var(--e-3); }
.lg-as-estado{ min-height:18px; margin-top:var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
.lg-as-estado-err{ color:var(--urge); }
.lg-as-sinplan{ max-width:520px; padding-top:var(--e-4); }

/* Donde aparece: tres tarjetas con su dibujito */
.lg-as-poss{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--e-3); }
.lg-as-pos{ display:flex; flex-direction:column; align-items:center; gap:var(--e-2); padding:var(--e-3) var(--e-2); border:0; border-radius:var(--r-flota); background:transparent; color:var(--medio); font:inherit; font-size:var(--t-meta); text-align:center; cursor:pointer; box-shadow:inset 0 0 0 1px var(--linea); }
.lg-as-pos.on{ box-shadow:inset 0 0 0 2px var(--tinta); color:var(--tinta); }
.lg-as-pos:disabled{ opacity:.45; cursor:default; }
@media (hover:hover){ .lg-as-pos:not(.on):not(:disabled):hover{ background:var(--tinte-toque); color:var(--tinta); } }
.lg-pos-svg{ width:44px; height:58px; }
.lg-pos-svg .tel{ fill:none; stroke:var(--punto); stroke-width:1.5; }
.lg-pos-svg .foto, .lg-pos-svg .lin{ fill:var(--piedra-on); }
.lg-pos-svg .marca{ fill:var(--tinta); }
.lg-pos-svg .hueco{ fill:none; stroke:var(--tinta); stroke-width:1.2; stroke-dasharray:3 2; }
.lg-as-pos.on .lg-pos-svg .tel{ stroke:var(--tinta); }
.lg-as-agregar{ margin-top:var(--e-2); }

/* Invitacion: campos y preguntas sugeridas */
.lg-as-sec .inp, .lg-as-sec .ta{ width:100%; box-sizing:border-box; }
.lg-as-sugs{ display:flex; flex-wrap:wrap; gap:var(--e-2); align-items:center; }
.lg-as-sug{ display:inline-flex; align-items:center; gap:2px; min-height:36px; padding:0 4px 0 14px; border-radius:var(--r-pildora); background:var(--piedra); }
.lg-as-sug:focus-within{ box-shadow:inset 0 0 0 1.5px var(--tinta); }
.lg-as-sug-in{ border:0; outline:0; background:transparent; color:var(--tinta); font:inherit; font-size:var(--t-texto); min-width:6ch; padding:0; }
.lg-as-sug-x{ width:28px; height:28px; padding:0; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
@media (hover:hover){ .lg-as-sug-x:hover{ background:var(--tinte-toque); color:var(--tinta); } }
.lg-as-sug-mas{ gap:var(--e-1); }

/* Persona que atiende */
.lg-as-persona{ display:flex; align-items:flex-end; gap:var(--e-3); flex-wrap:wrap; }
.lg-as-av{ width:44px; height:44px; flex:none; border-radius:50%; background:var(--piedra-on); color:var(--tinta); display:inline-flex; align-items:center; justify-content:center; font-size:var(--t-campo); font-weight:500; overflow:hidden; }
.lg-as-av img{ display:block; width:100%; height:100%; object-fit:cover; }
.lg-as-persona-n{ flex:1 1 160px; min-width:0; }
.lg-as-persona-f{ display:flex; gap:var(--e-2); }
.lg-as-etq-mini{ margin:0 0 var(--e-1); }

/* Filas de capacidades, reglas y topes: sin cajas ni rayas */
.lg-as-fila{ display:flex; align-items:center; gap:var(--e-4); padding:var(--e-3) 0; }
.lg-as-fila-t{ flex:1; min-width:0; }
.lg-as-fila-n{ font-size:var(--t-campo); color:var(--tinta); }
.lg-as-fila-d{ margin-top:2px; font-size:var(--t-texto); color:var(--apagado); line-height:1.45; }
.lg-as-riesgo{ flex:none; font-size:var(--t-meta); color:var(--apagado); }
.lg-as-pronto{ flex:none; display:inline-flex; align-items:center; min-height:26px; padding:0 12px; border-radius:var(--r-pildora); box-shadow:inset 0 0 0 1px var(--linea); font-size:var(--t-meta); color:var(--medio); }
.lg-as-candado{ display:flex; align-items:center; gap:var(--e-2); }
.lg-as-cfg .cv-sw:disabled, .lg-as-cfg .cv-seg button:disabled, .lg-as-cfg .cv-paso button:disabled{ opacity:.45; cursor:default; }
.lg-as-hor{ padding:var(--e-1) 0 var(--e-3); }
.lg-as-hor-dias{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin:var(--e-2) 0 var(--e-3); }
.lg-as-dia{ min-width:48px; min-height:36px; padding:0 12px; border:0; border-radius:var(--r-pildora); background:transparent; box-shadow:inset 0 0 0 1px var(--linea); color:var(--texto); font:inherit; font-size:var(--t-texto); cursor:pointer; }
.lg-as-dia.on{ background:var(--piedra-on); color:var(--tinta); box-shadow:none; }
.lg-as-hor-horas{ display:flex; gap:var(--e-4); flex-wrap:wrap; }
.lg-as-hora{ display:flex; flex-direction:column; }

/* El tope del mes */
.lg-as-mes{ padding-top:var(--e-3); }
.lg-as-mes-cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); color:var(--tinta); font-size:var(--t-campo); }
.lg-as-barra{ height:4px; margin-top:var(--e-3); border-radius:var(--r-pildora); background:var(--piedra-on); overflow:hidden; }
.lg-as-barra i{ display:block; height:100%; border-radius:inherit; background:var(--tinta); }
.lg-as-mes-ed{ margin-top:var(--e-3); }
.lg-as-mes-fila{ display:flex; gap:var(--e-2); align-items:center; flex-wrap:wrap; }
.lg-as-mes-fila .inp{ width:140px; }

/* La vista previa y la prueba: la pagina real dentro de un telefono */
.lg-as-modos{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-2); flex-wrap:wrap; }
.lg-as-lang .fchip{ min-width:40px; justify-content:center; }
/* El telefono se acomoda al alto de la ventana: arriba hay ~360 px de barras, la fila de modos y la nota de abajo. */
.lg-tel-as{ width:320px; height:clamp(400px, calc(100dvh - 470px), 640px); }
.lg-as-vista-pie{ display:flex; flex-direction:column; align-items:center; gap:var(--e-2); text-align:center; }
.lg-as-vista-pie .lg-nota{ margin:0; }
.lg-as-hoja{ display:flex; flex-direction:column; align-items:center; gap:var(--e-3); }
.lg-as-hoja .lg-tel-as{ width:100%; max-width:340px; height:min(68vh, 640px); }
.lg-as-hoja .lg-nota{ margin:0; text-align:center; }

/* ------------------------- Preguntas de prueba (Fase 4a): debajo del telefono, o en la hoja de pantallas angostas ------------------------- */
/* Filas sin cajas ni rayas; el estado a la derecha; lo que se toca es pildora; el rojo (--urge) es solo lo que pide revision. Solo tokens.
   Con la lista la columna es mas alta que la ventana: pegajosa dejaria su final fuera de alcance, asi que en la prueba fluye con la pagina. */
.lg-as-vista-prueba{ position:static; }
.lg-as-pruebas{ display:flex; flex-direction:column; align-items:stretch; gap:var(--e-1); width:100%; min-width:0; padding-top:var(--e-2); text-align:left; }
.lg-as-hoja .lg-as-pruebas{ align-self:stretch; }
.lg-as-pruebas .lg-nota{ margin:var(--e-2) 0 0; text-align:left; }
.lg-pr-h{ margin:0; padding-bottom:2px; font-size:var(--t-meta); font-weight:400; color:var(--apagado); }
.lg-pr-lista{ display:flex; flex-direction:column; }
.lg-pr-cab{ display:flex; align-items:center; gap:var(--e-3); width:100%; min-height:44px; padding:10px 0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.lg-pr-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lg-pr-q{ font-size:var(--t-campo); color:var(--texto); overflow-wrap:anywhere; }
.lg-pr-d{ font-size:var(--t-texto); line-height:1.45; color:var(--apagado); overflow-wrap:anywhere; }
.lg-pr-est{ flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-size:var(--t-texto); color:var(--texto); }
.lg-pr-est.sin{ color:var(--apagado); }
.lg-pr-est.revisar{ color:var(--urge); }
.lg-pr-det{ display:flex; flex-direction:column; gap:var(--e-2); padding:0 0 var(--e-3); }
.lg-pr-resp{ display:flex; flex-direction:column; gap:2px; max-width:62ch; font-size:var(--t-texto); line-height:1.5; color:var(--medio); overflow-wrap:anywhere; white-space:pre-wrap; }
.lg-pr-resp-e{ font-size:var(--t-meta); color:var(--apagado); }
.lg-pr-motivo{ max-width:62ch; font-size:var(--t-texto); line-height:1.5; color:var(--urge); }
.lg-pr-cuando{ font-size:var(--t-meta); color:var(--apagado); }
.lg-pr-acc{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.lg-pr-form{ display:flex; flex-direction:column; gap:var(--e-2); padding:var(--e-2) 0 var(--e-3); }
.lg-pr-form .lg-as-hora{ display:flex; flex-direction:column; gap:var(--e-1); }
.lg-pr-mas{ padding-top:var(--e-1); }
.lg-pr-barra{ display:flex; flex-wrap:wrap; gap:var(--e-2); padding-top:var(--e-3); }
.lg-pr-avisos{ display:flex; flex-direction:column; gap:var(--e-2); padding-top:var(--e-3); }
.lg-pr-aviso{ display:flex; align-items:flex-start; gap:10px; max-width:62ch; font-size:var(--t-texto); line-height:1.5; color:var(--medio); }
.lg-pr-aviso svg{ flex-shrink:0; margin-top:3px; }
.lg-pr-enlace{ align-self:flex-start; padding:0; border:0; background:transparent; color:var(--medio); font:inherit; font-size:var(--t-texto); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
@media (hover:hover){ .lg-pr-cab:hover .lg-pr-q, .lg-pr-enlace:hover{ color:var(--tinta); } }
@media (pointer:coarse){ :root[data-theme] .lg-pr-acc .btn, :root[data-theme] .lg-pr-mas .btn{ min-height:44px; } .lg-pr-enlace{ min-height:44px; } }

/* ------------------------- Conocimiento: lo que el estudio le ensena al asistente (Fase 3) ------------------------- */
/* Dos columnas: a la izquierda la lista de lo que el asistente puede decir (con un interruptor por elemento) y a la derecha
   como habla y cuanto espacio queda. Debajo de 1100 px la columna de la derecha baja debajo de la lista. Solo tokens. */
.lg-pag.lg-cn{ width:min(1272px, calc(100% - 2 * var(--e-5))); max-width:none; padding-inline:0; }
.lg-cn-grid{ display:grid; grid-template-columns:minmax(0, 760px) minmax(300px, 360px); justify-content:space-between; gap:var(--e-7); align-items:start; }
.lg-cn-lista{ min-width:0; display:flex; flex-direction:column; gap:var(--e-4); }
.lg-cn-lado{ position:sticky; top:var(--e-4); display:flex; flex-direction:column; gap:var(--e-6); min-width:0; }
.lg-cn-aviso{ display:flex; align-items:flex-start; gap:var(--e-2); margin:0; color:var(--medio); font-size:var(--t-texto); line-height:1.5; max-width:62ch; }
.lg-cn-aviso-ico{ display:flex; margin-top:2px; flex:none; }
.lg-cn-filtros{ margin-top:var(--e-1); }

/* La tabla: filas sin cajas, con una linea fina entre una y otra */
.lg-cn-tabla{ display:flex; flex-direction:column; }
.lg-cn-cab{ display:flex; align-items:center; gap:var(--e-4); padding:6px 0 var(--e-2); font-size:var(--t-meta); color:var(--apagado); box-shadow:inset 0 -1px 0 var(--linea); }
.lg-cn-cab-t{ flex:1; min-width:0; }
.lg-cn-cab-tema{ width:110px; flex:none; }
.lg-cn-cab-vis{ width:248px; flex:none; text-align:right; }
.lg-cn-fila{ display:flex; align-items:center; gap:var(--e-4); padding:var(--e-3) 0; box-shadow:inset 0 -1px 0 var(--linea); }
.lg-cn-t{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:0; border:0; border-radius:var(--r); background:transparent; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.lg-cn-fila-cab{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-1) var(--e-3); min-width:0; }
.lg-cn-tit{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-width:0; font-size:var(--t-campo); line-height:1.35; color:var(--texto); }
.lg-cn-fila.on .lg-cn-tit{ color:var(--tinta); }
.lg-cn-dinero{ font-size:var(--t-meta); color:var(--apagado); }
.lg-cn-vista{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:var(--t-texto); line-height:1.45; color:var(--apagado); }
.lg-cn-fuera{ font-size:var(--t-meta); color:var(--urge); }
.lg-cn-tema{ width:110px; flex:none; font-size:var(--t-texto); color:var(--medio); }
.lg-cn-ctl{ flex:none; display:flex; align-items:center; gap:var(--e-3); }
.lg-cn-ctl-nota{ width:190px; display:flex; align-items:center; justify-content:flex-end; gap:var(--e-2); font-size:var(--t-meta); color:var(--apagado); }
.lg-cn-cand{ display:inline-flex; align-items:center; gap:6px; font-size:var(--t-meta); color:var(--apagado); }
.lg-cn-completa{ padding:0; border:0; background:transparent; font:inherit; font-size:var(--t-meta); color:var(--tinta); text-align:right; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.lg-cn-movers{ display:inline-flex; gap:2px; }
.lg-cn-mover{ width:28px; height:28px; padding:0; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
@media (hover:hover){ .lg-cn-mover:hover:not(:disabled){ background:var(--tinte-toque); color:var(--tinta); } }
.lg-cn-mover:disabled{ opacity:.3; cursor:default; }
.lg-cn-fila .cv-sw:disabled{ opacity:.45; cursor:default; }
.lg-cn-nada{ margin:var(--e-4) 0; }
.lg-cn-acciones{ display:flex; flex-wrap:wrap; gap:var(--e-2); padding-top:var(--e-1); }
.lg-cn-acciones .btn svg, .lg-cn-vacio .btn svg, .lg-cn-lado .btn svg{ flex:none; }

/* Ideas: las preguntas que casi todo fotografo recibe */
.lg-cn-vacio{ padding-top:var(--e-3); }
.lg-cn-vacio .lg-emp-h{ margin-top:0; }
.lg-cn-ideas{ list-style:none; margin:0 0 var(--e-5); padding:0; }
.lg-cn-ideas li{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-4); padding:var(--e-3) 0; box-shadow:inset 0 -1px 0 var(--linea); }
.lg-cn-idea-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.lg-cn-idea-q{ font-size:var(--t-campo); color:var(--tinta); }
.lg-cn-idea-p{ font-size:var(--t-texto); color:var(--apagado); }
.lg-cn-mas .lg-etq{ margin-top:var(--e-3); }
.lg-cn-chips{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.lg-cn-idea-chip{ min-height:32px; padding:0 14px; border:0; border-radius:var(--r-pildora); background:transparent; box-shadow:inset 0 0 0 1px var(--linea); color:var(--medio); font:inherit; font-size:var(--t-texto); cursor:pointer; }
@media (hover:hover){ .lg-cn-idea-chip:hover{ background:var(--tinte-toque); color:var(--tinta); } }

/* La columna de al lado */
.lg-cn-sec .ta{ width:100%; box-sizing:border-box; }
.lg-cn-btns{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-3); margin-top:var(--e-3); }
.lg-cn-estado{ font-size:var(--t-meta); color:var(--apagado); }
.lg-cn-medidor{ display:flex; align-items:baseline; gap:var(--e-2); }
.lg-cn-medidor b{ font-size:var(--t-titulo); font-weight:600; color:var(--tinta); font-variant-numeric:tabular-nums; }
.lg-cn-medidor span{ font-size:var(--t-texto); color:var(--apagado); }
.lg-cn-alerta{ display:flex; align-items:flex-start; gap:var(--e-2); margin:var(--e-2) 0 0; font-size:var(--t-texto); line-height:1.5; color:var(--texto); }
.lg-cn-alerta svg{ flex:none; margin-top:3px; color:var(--urge); }
.lg-cn-sec .btn{ margin-top:var(--e-3); }

/* El editor de un elemento */
.lg-cn-ed .lg-cn-etq{ margin:var(--e-4) 0 var(--e-2); }
.lg-cn-ed .lg-cn-etq:first-child{ margin-top:0; }
.lg-cn-ed .inp, .lg-cn-ed .ta, .lg-cn-ed .sel{ width:100%; box-sizing:border-box; }
.lg-cn-ed-vis{ margin-top:var(--e-4); }
.lg-cn-ed-err{ margin:var(--e-3) 0 0; font-size:var(--t-texto); color:var(--urge); }
.lg-cn-ed-err[hidden]{ display:none; }
.mfoot .lg-cn-quitar{ margin-right:auto; color:var(--urge); }

/* "Que Xarpie proponga respuestas": una ventana con borradores que la persona lee, edita y anade (Fase 3b) */
.lg-pr{ display:flex; flex-direction:column; gap:var(--e-3); }
/* Hasta 6 borradores: el cuerpo se desplaza y el pie con "Listo" se queda a la vista (en telefono es la hoja de siempre). */
@media (min-width:861px){
  :root[data-theme] .modal.lg-pr-modal{ display:flex; flex-direction:column; overflow:hidden; }
  :root[data-theme] .modal.lg-pr-modal .mbody{ flex:1; min-height:0; overflow-y:auto; }
}
.lg-pr .lg-dlg-sub, .lg-pr .lg-nota{ margin:0; }
.lg-pr-card{ display:flex; flex-direction:column; gap:var(--e-2); padding:var(--e-4) 0; box-shadow:inset 0 -1px 0 var(--linea); }
.lg-pr-q{ font-size:var(--t-campo); color:var(--tinta); }
.lg-pr-ta{ width:100%; box-sizing:border-box; }
.lg-pr-avisos:empty{ display:none; }
.lg-pr-falta{ display:flex; align-items:flex-start; gap:var(--e-2); margin:0 0 var(--e-1); font-size:var(--t-texto); line-height:1.5; color:var(--texto); }
.lg-pr-falta svg{ flex:none; margin-top:3px; color:var(--urge); }
.lg-pr-vis{ padding:var(--e-1) 0; }
.lg-pr-btns{ display:flex; gap:var(--e-2); margin-top:var(--e-1); }
.lg-pr-hecha{ display:flex; align-items:center; gap:var(--e-2); padding:var(--e-3) 0; box-shadow:inset 0 -1px 0 var(--linea); font-size:var(--t-texto); color:var(--medio); }
.lg-pr-hecha svg{ flex:none; color:var(--tinta); }

/* "Lo que Xarpie ve": un cajon a la derecha con solo lectura (en telefono es la hoja de siempre) */
@media (min-width:861px){
  :root[data-theme] #modal-bg.show:has(.lg-ve-modal){ align-items:stretch; justify-content:flex-end; padding:var(--e-4); }
  :root[data-theme] .modal.lg-ve-modal{ width:min(640px, 100%); max-height:none; height:100%; display:flex; flex-direction:column; }
  :root[data-theme] .modal.lg-ve-modal .mbody{ flex:1; min-height:0; overflow-y:auto; }
}
.lg-ve{ display:flex; flex-direction:column; gap:var(--e-4); }
.lg-ve .lg-dlg-sub{ margin:0; }
.lg-ve-cab{ display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap; }
.lg-ve-uso{ font-size:var(--t-texto); color:var(--medio); font-variant-numeric:tabular-nums; }
.lg-ve-barra{ flex:1; min-width:120px; margin-top:0; }
.lg-ve-alerta{ display:flex; align-items:flex-start; gap:var(--e-3); padding:var(--e-3); border-radius:var(--r); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); }
.lg-ve-alerta-ico{ display:flex; margin-top:2px; flex:none; color:var(--urge); }
.lg-ve-alerta-t{ flex:1; min-width:0; font-size:var(--t-texto); line-height:1.5; color:var(--texto); }
.lg-ve-sec{ display:flex; flex-direction:column; gap:6px; }
.lg-ve-sec-h{ display:flex; align-items:baseline; gap:var(--e-3); }
.lg-ve-sec-h h3{ margin:0; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.lg-ve-sec-h span{ font-size:var(--t-meta); color:var(--apagado); }
.lg-ve-l{ display:flex; align-items:baseline; gap:var(--e-3); font-size:var(--t-texto); line-height:1.5; color:var(--texto); }
.lg-ve-l > span:first-child{ flex:1; min-width:0; }
.lg-ve-off{ color:var(--apagado); }
.lg-ve-peso{ font-size:var(--t-meta); color:var(--apagado); font-variant-numeric:tabular-nums; }

/* ------------------------------------------ Actividad ------------------------------------------ */
.lg-act-cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-4); flex-wrap:wrap; }
.lg-rango{ gap:var(--e-2); }
.lg-kpi{ display:flex; flex-direction:column; gap:2px; margin:var(--e-5) 0 0; }
.lg-kpi b{ font-size:var(--t-saludo); font-weight:500; letter-spacing:-.02em; line-height:1.1; color:var(--tinta); }
.lg-kpi span{ color:var(--medio); font-size:var(--t-texto); }
.lg-act-poco{ margin:var(--e-3) 0 0; color:var(--medio); max-width:58ch; line-height:1.55; }
.lg-act-poco b{ color:var(--tinta); font-weight:500; }
.lg-act-nada{ color:var(--medio); margin:0; }
.lg-fuentes{ max-width:640px; }
.lg-fuente{ display:grid; grid-template-columns:140px minmax(0, 1fr) 48px; align-items:center; gap:var(--e-4); padding:var(--e-2) 0; }
.lg-fuente-n{ color:var(--texto); }
.lg-fuente-barra{ display:block; height:6px; border-radius:var(--r-pildora); background:var(--piedra-on); overflow:hidden; }
.lg-fuente-barra i{ display:block; height:100%; border-radius:inherit; background:var(--tinta); }
.lg-fuente-v{ text-align:right; color:var(--tinta); }

/* ------------------------------------------- Ajustes ------------------------------------------- */
.lg-aj{ display:grid; grid-template-columns:200px minmax(0, 1fr); gap:var(--e-7); align-items:start; }
.lg-aj-nav{ position:sticky; top:var(--e-4); display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-1); padding-top:var(--e-3); }
.lg-aj-nav button{ border:0; background:transparent; padding:var(--e-2) 0; font:inherit; font-size:var(--t-texto); color:var(--medio); cursor:pointer; text-align:left; }
.lg-aj-nav button.on{ color:var(--tinta); }
@media (hover:hover){ .lg-aj-nav button:hover{ color:var(--tinta); } }
.lg-aj-cuerpo{ max-width:680px; }
.lg-sec{ padding:var(--e-4) 0 var(--e-6); }
.lg-sec + .lg-sec{ box-shadow:inset 0 1px 0 var(--linea); padding-top:var(--e-5); }
.lg-sec-t{ font-size:var(--t-meta); font-weight:400; color:var(--medio); margin:0 0 var(--e-3); }
.lg-slug-fila{ display:flex; align-items:center; gap:var(--e-2); }
.lg-slug-fila .inp{ flex:1; min-width:0; }
.lg-slug-pre{ color:var(--medio); white-space:nowrap; font-size:var(--t-texto); }
.lg-comp-ajustes{ display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:var(--e-6); align-items:start; }
.lg-comp-campos .inp, .lg-comp-campos .ta{ margin-bottom:var(--e-2); }
.lg-comp-campos .lg-etq{ margin-top:var(--e-3); }
.lg-comp-campos .lg-etq:first-child{ margin-top:0; }
.lg-img-fila{ display:flex; gap:var(--e-2); flex-wrap:wrap; }
.lg-guardar-fila{ display:flex; align-items:center; gap:var(--e-3); margin-top:var(--e-4); }
.lg-guardar-fila .lg-nota{ margin:0; }
.lg-tarjeta{ border-radius:var(--r-flota); overflow:hidden; background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); }
.lg-tarjeta-img{ aspect-ratio:1.91 / 1; background:var(--piedra-on) center / cover no-repeat; }
.lg-tarjeta-img.vacia{ background-image:none; }
.lg-tarjeta-txt{ padding:var(--e-3) var(--e-4) var(--e-4); display:flex; flex-direction:column; gap:2px; }
.lg-tarjeta-host{ color:var(--apagado); font-size:var(--t-meta); }
.lg-tarjeta-txt b{ color:var(--tinta); font-weight:500; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.lg-tarjeta-txt span:last-child{ color:var(--medio); font-size:var(--t-meta); line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }

/* ============================ el EDITOR dentro del panel (.pp-en-liga) ============================ */
.lg-liga .pp-en-liga{
  position:relative; inset:auto; z-index:auto; background:var(--pag); height:100%;
  grid-template-columns:292px minmax(0, 1fr) 320px; grid-template-rows:minmax(0, 1fr);
  grid-template-areas:"panel canvas insp"; gap:0 var(--e-5);
}
/* La liga de bio no usa la columna del inspector (todo vive en el formulario de la izquierda). */
.lg-liga .pp-en-liga.pp-bio{ grid-template-columns:minmax(300px, 380px) minmax(0, 1fr); grid-template-areas:"panel canvas"; }
.lg-liga .pp-en-liga.pp-bio .pp-inspector{ display:none; }

/* --- columna izquierda: pestanas de texto con linea, filas sin cajas --- */
.lg-liga .pp-en-liga .pp-panel{ border:0; background:transparent; }
.lg-liga .pp-en-liga .pp-tabs{ border:0; box-shadow:inset 0 -1px 0 var(--linea); gap:var(--e-5); }
.lg-liga .pp-en-liga .pp-tab{ flex:none; height:40px; padding:0; border:0; background:transparent; color:var(--medio); font-size:var(--t-texto); font-weight:400; box-shadow:inset 0 -2px 0 transparent; }
.lg-liga .pp-en-liga .pp-tab.on{ color:var(--tinta); font-weight:400; border:0; box-shadow:inset 0 -2px 0 var(--tinta); }
@media (hover:hover){ .lg-liga .pp-en-liga .pp-tab:not(.on):hover{ color:var(--tinta); } }
.lg-liga .pp-en-liga .pp-panel-in{ padding:var(--e-4) var(--e-3) var(--e-5) 0; }
.lg-liga .pp-en-liga .pp-hint{ color:var(--apagado); font-size:var(--t-meta); }
.lg-liga .pp-en-liga .pp-sub{ font-size:var(--t-meta); letter-spacing:0; text-transform:none; font-weight:400; color:var(--medio); margin:var(--e-5) 0 var(--e-2); }
.lg-liga .pp-en-liga .pp-panel-in > .pp-sub:first-child, .lg-liga .pp-en-liga .pp-insp-in > .pp-sub:first-child{ margin-top:0; }
.lg-liga .pp-en-liga .pp-capa{ border:0; box-shadow:none; background:transparent; border-radius:var(--r); margin:0; padding:var(--e-1) var(--e-1); }
.lg-liga .pp-en-liga .pp-capa.on{ background:var(--piedra); box-shadow:none; }
.lg-liga .pp-en-liga .pp-capa-n{ font-size:var(--t-texto); color:var(--tinta); }
.lg-liga .pp-en-liga .pp-capa-h{ font-size:var(--t-meta); color:var(--apagado); }
.lg-liga .pp-en-liga .pp-capa-drag{ display:inline-flex; align-items:center; color:var(--punto); padding:0 2px; opacity:1; }
.lg-liga .pp-en-liga .pp-ico{ width:32px; height:32px; border-radius:var(--r-pildora); color:var(--medio); display:inline-flex; align-items:center; justify-content:center; }
@media (hover:hover){ .lg-liga .pp-en-liga .pp-ico:hover:not(:disabled){ background:var(--tinte-toque); color:var(--tinta); } }
.lg-liga .pp-en-liga .pp-ico:disabled{ opacity:.3; }
.lg-arriba{ transform:rotate(180deg); }
.lg-izq{ transform:rotate(90deg); }
.lg-der{ transform:rotate(-90deg); }
.lg-liga .pp-en-liga .pp-plantilla{ display:flex; align-items:baseline; gap:var(--e-3); margin-bottom:var(--e-2); }
.lg-liga .pp-en-liga .pp-tplname{ font-family:var(--sans); font-size:var(--t-texto); color:var(--tinta); }
.lg-liga .pp-en-liga .pp-cambiar-tpl{ color:var(--medio); text-decoration:underline; text-underline-offset:3px; font-size:var(--t-meta); }

/* --- controles de las secciones y del tema: pildoras y filas, sin cajas --- */
.lg-liga .pp-en-liga .pp-seg{ display:flex; flex-wrap:wrap; gap:var(--e-2); border:0; border-radius:0; overflow:visible; background:transparent; box-shadow:none; }
.lg-liga .pp-en-liga .pp-seg button{ flex:none; min-height:34px; padding:0 16px; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--texto); font-size:var(--t-texto); box-shadow:inset 0 0 0 1px var(--linea); }
.lg-liga .pp-en-liga .pp-seg button.on{ background:var(--piedra-on); color:var(--tinta); box-shadow:none; }
@media (hover:hover){ .lg-liga .pp-en-liga .pp-seg button:not(.on):hover{ background:var(--tinte-toque); color:var(--tinta); } }
.lg-liga .pp-en-liga .pp-seg-mini button{ min-height:28px; padding:0 10px; font-size:var(--t-meta); }
.lg-liga .pp-en-liga .pp-item{ border:0; background:var(--piedra); border-radius:var(--r); padding:var(--e-3); gap:var(--e-2); margin-bottom:var(--e-2); }
.lg-liga .pp-en-liga .pp-item-pie{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-2); }
.lg-liga .pp-en-liga .pp-item-mov{ display:inline-flex; gap:2px; }
.lg-liga .pp-en-liga .pp-quitar{ color:var(--medio); font-size:var(--t-meta); }
.lg-liga .pp-en-liga .pp-par, .lg-liga .pp-en-liga .pp-flag, .lg-liga .pp-en-liga .pp-chip{ border:0; background:transparent; box-shadow:inset 0 0 0 1px var(--linea); border-radius:var(--r); }
.lg-liga .pp-en-liga .pp-par.on{ background:var(--piedra-on); box-shadow:none; }
.lg-liga .pp-en-liga .pp-flag i, .lg-liga .pp-en-liga .pp-toggle i{ background:var(--linea); border-radius:var(--r-pildora); }
.lg-liga .pp-en-liga .pp-flag i::after, .lg-liga .pp-en-liga .pp-toggle i::after{ background:var(--medio); border-radius:50%; }
.lg-liga .pp-en-liga .pp-flag.on i, .lg-liga .pp-en-liga .pp-toggle.on i{ background:var(--boton); }
.lg-liga .pp-en-liga .pp-flag.on i::after, .lg-liga .pp-en-liga .pp-toggle.on i::after{ background:var(--boton-t); }
.lg-liga .pp-en-liga .pp-token-fila{ background:transparent; box-shadow:none; }
.lg-liga .pp-en-liga .pp-token-fila input[type=color]{ border:0; border-radius:var(--r-pildora); box-shadow:inset 0 0 0 1px var(--linea); }
.lg-liga .pp-en-liga .pp-swb{ border:0; border-radius:var(--r-pildora); box-shadow:inset 0 0 0 1px var(--linea); }
.lg-liga .pp-en-liga .pp-swb.on{ box-shadow:0 0 0 2px var(--pag), 0 0 0 3px var(--tinta); }
.lg-liga .pp-en-liga .pp-foto{ border:0; border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--linea); background-color:var(--piedra); color:var(--medio); }
.lg-liga .pp-en-liga .pp-foto.vacia{ box-shadow:inset 0 0 0 1px var(--punto); }
.lg-liga .pp-en-liga .pp-aviso-contraste{ background:transparent; border:0; box-shadow:none; padding:var(--e-3) 0 0; color:var(--urge); display:flex; flex-direction:column; gap:var(--e-1); align-items:flex-start; }
.lg-liga .pp-en-liga .pp-aviso-contraste p{ margin:0; }
.lg-liga .pp-en-liga .pp-aviso-pie{ color:var(--apagado); }
.lg-liga .pp-en-liga .pp-aviso-contraste .btn{ margin-top:var(--e-2); }

/* --- columna derecha: el inspector --- */
.lg-liga .pp-en-liga .pp-inspector{ border:0; background:transparent; }
.lg-liga .pp-en-liga .pp-insp-head{ border:0; padding:var(--e-1) 0 var(--e-3); }
.lg-liga .pp-en-liga .pp-insp-t{ font-family:var(--sans); font-size:var(--t-sub); font-weight:500; letter-spacing:-.01em; color:var(--tinta); }
.lg-liga .pp-en-liga .pp-insp-in{ padding:0 var(--e-1) var(--e-5) 0; }
.lg-liga .pp-en-liga .pp-insp-vis{ border:0; box-shadow:inset 0 1px 0 var(--linea); }
.lg-liga .pp-en-liga .pp-vacio{ padding:var(--e-7) var(--e-4); }
.lg-liga .pp-en-liga .pp-vacio-ico{ opacity:1; color:var(--punto); display:flex; justify-content:center; }

/* --- el lienzo: controles arriba, marco de telefono, estado abajo --- */
.lg-liga .pp-en-liga .pp-canvas{ background:transparent; padding:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; }
.lg-liga .pp-en-liga .pp-barra-lienzo{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:var(--e-3) 0 var(--e-3); flex:none; }
.lg-liga .pp-en-liga .pp-barra-lienzo .fchips{ flex-wrap:nowrap; }
.lg-liga .pp-en-liga .pp-lienzo{ flex:1; min-height:0; width:100%; overflow:auto; display:flex; justify-content:center; padding:var(--e-2) var(--e-3) var(--e-4); box-sizing:border-box; }
.lg-liga .pp-en-liga .pp-pagina{ background:white; border:0; border-radius:var(--r-flota); box-shadow:0 0 0 1px var(--linea); height:min(100%, 1200px); min-height:520px; transition:none; }
/* El biselado de telefono solo cuando se ve como telefono. */
.lg-liga .pp-en-liga .pp-pagina[data-dev="movil"]{ border-radius:28px; box-shadow:0 0 0 6px var(--piedra-on); }
.lg-liga .pp-en-liga .pp-pagina iframe{ background:white; }
.lg-liga .pp-en-liga .pp-pie-lienzo{ display:flex; align-items:center; justify-content:center; gap:var(--e-3); padding:var(--e-3) 0 var(--e-2); color:var(--apagado); font-size:var(--t-meta); flex:none; flex-wrap:wrap; }
.lg-liga .pp-en-liga .pp-savestate{ font-family:var(--sans); color:inherit; }
.lg-liga .pp-en-liga .pp-descartar{ background:none; border:0; padding:0; font:inherit; color:var(--medio); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.lg-liga .pp-en-liga .pp-descartar[hidden]{ display:none; }
/* Editar / Vista previa: solo en telefono. */
.lg-liga .pp-en-liga > .pp-mv{ display:none; grid-area:mv; }

/* ------------------------------------------ pantallas angostas ------------------------------------------ */
@container (max-width: 1100px){
  /* El Asistente: sin espacio para la vista al lado, la prueba pasa a una hoja. */
  .lg-as-grid{ grid-template-columns:minmax(0, 1fr); }
  .lg-as-vista{ display:none; }
  :root[data-theme] .lg-as-probar-btn{ display:inline-flex; }
}
@container (max-width: 1080px){
  /* Dos columnas: el inspector vuelve a ser un cajon (las reglas de styles.css lo mueven). */
  .lg-liga .pp-en-liga{ grid-template-columns:272px minmax(0, 1fr); grid-template-areas:"panel canvas"; }
  .lg-liga .pp-en-liga.pp-bio{ grid-template-columns:minmax(280px, 340px) minmax(0, 1fr); }
  .lg-liga .pp-en-liga .pp-inspector{ padding:var(--e-4); background:var(--piedra); border-radius:var(--r-flota) 0 0 var(--r-flota); box-shadow:var(--sombra-flota); }
}
@container (max-width: 820px){
  .lg-pag.lg-as{ width:calc(100% - 2 * var(--e-4)); padding-inline:0; }
  .lg-as-cab-fila{ gap:var(--e-3); }
  .lg-as-poss{ gap:var(--e-2); }
  .lg-as-pos{ padding-inline:var(--e-1); }
  .lg-as-fila{ align-items:flex-start; gap:var(--e-3); }
  .lg-as-sug{ min-height:44px; }
  .lg-as-sug-x{ width:40px; height:40px; }
  .lg-as-dia{ min-height:44px; }
  .lg-as-persona-f{ width:100%; }
  /* Telefono: toda la pantalla scrollea (la fila de arriba se va al bajar) y el editor toma su alto natural. */
  .lg-liga{ overflow-y:auto; overflow-x:hidden; padding-bottom:132px; box-sizing:border-box; }
  .lg-cuerpo, .lg-cuerpo-editor{ overflow:visible; flex:none; min-height:0; }
  .lg-cuerpo-editor > .pp-editor{ flex:none; }
  .lg-cab{ flex-direction:column; align-items:stretch; padding:var(--e-4) 0 var(--e-2); }
  .lg-cab-acciones{ flex-wrap:nowrap; justify-content:stretch; }
  .lg-cab-acciones .btn{ flex:1 1 auto; min-width:0; }
  .lg-cab-acciones .btn-gh, .lg-cab-acciones .lg-btn-comp{ flex:0 0 auto; }
  .lg-cab-acciones .lg-btn-comp span{ display:none; }
  .lg-cab-acciones .lg-btn-comp{ padding:0 14px; }
  .lg-franja{ padding-bottom:var(--e-3); }
  .lg-pag{ padding-inline:var(--e-4); }
  .lg-emp-op{ flex-direction:column; align-items:stretch; gap:var(--e-3); }
  .lg-emp-op .btn{ align-self:flex-start; }
  .lg-arm{ grid-template-columns:minmax(0, 1fr); gap:var(--e-5); }
  .lg-comp-ajustes{ grid-template-columns:minmax(0, 1fr); }
  .lg-aj{ grid-template-columns:minmax(0, 1fr); gap:0; }
  .lg-aj-nav{ display:none; }
  .lg-comp-cols{ grid-template-columns:minmax(0, 1fr); }
  .lg-comp-qr{ align-items:flex-start; }
  .lg-qr{ width:168px; }

  /* El editor: una cosa a la vez, Editar o Vista previa. Sin cajones ni nada escondido a la izquierda. */
  .lg-liga .pp-en-liga, .lg-liga .pp-en-liga.pp-bio{ grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); grid-template-areas:"mv" "panel"; gap:0; }
  .lg-liga .pp-en-liga > .pp-mv{ display:flex; gap:var(--e-2); padding:0 0 var(--e-3); }
  .lg-liga .pp-en-liga .pp-mv button{ flex:1; min-height:38px; border:0; border-radius:var(--r-pildora); background:transparent; color:var(--texto); box-shadow:inset 0 0 0 1px var(--linea); font:inherit; font-size:var(--t-texto); }
  .lg-liga .pp-en-liga .pp-mv button.on{ background:var(--piedra-on); color:var(--tinta); box-shadow:none; }
  .lg-liga .pp-en-liga{ height:auto; }
  .lg-liga .pp-en-liga .pp-panel{ position:static; transform:none; width:auto; box-shadow:none; min-height:0; }
  .lg-liga .pp-en-liga .pp-panel-in{ overflow:visible; }
  .lg-liga .pp-en-liga .pp-canvas{ overflow:visible; }
  .lg-liga .pp-en-liga .pp-lienzo{ overflow:visible; padding-inline:0; }
  .lg-liga .pp-en-liga .pp-pagina{ height:min(72vh, 640px); min-height:420px; }
  .lg-liga .pp-en-liga[data-mv="vista"] .pp-panel{ display:none; }
  .lg-liga .pp-en-liga[data-mv="vista"]{ grid-template-areas:"mv" "canvas"; }
  .lg-liga .pp-en-liga[data-mv="editar"] .pp-canvas{ display:none; }
  .lg-liga .pp-en-liga .pp-canvas{ grid-area:canvas; }
  .lg-liga .pp-en-liga .pp-pagina{ width:100% !important; max-width:390px; }
  .lg-liga .pp-en-liga .pp-panel-in{ padding-right:0; }
  .lg-liga .pp-en-liga .pp-inspector{ width:min(100%, 360px); }
}
@container (max-width: 480px){
  .lg-liga .pp-en-liga .pp-barra-lienzo .fchips{ display:none; }
  .lg-liga .pp-en-liga .pp-barra-lienzo{ justify-content:flex-end; }
}

/* ---------------------------- Conocimiento en pantallas angostas ---------------------------- */
@container (max-width: 1100px){
  .lg-cn-grid{ grid-template-columns:minmax(0, 1fr); }
  .lg-cn-lado{ position:static; }
}
@container (max-width: 820px){
  .lg-pag.lg-cn{ width:calc(100% - 2 * var(--e-4)); padding-inline:0; }
  .lg-cn-cab{ display:none; }
  .lg-cn-fila{ flex-wrap:wrap; gap:var(--e-2) var(--e-3); }
  .lg-cn-t{ flex:1 1 100%; }
  .lg-cn-tema{ width:auto; flex:1; }
  .lg-cn-ctl-nota{ width:auto; }
  .lg-cn-mover{ width:40px; height:40px; }
  .lg-cn-idea-chip{ min-height:44px; }
  .lg-cn-ideas li{ flex-direction:column; align-items:flex-start; gap:var(--e-2); }
}