/* Esquema · interfaz. Base neutra, un solo color de acción (azul tinta), rojo solo para errores. Mobile first en lo que importa:
   nada se sale a 390 px, objetivos de 44 px en celular, diálogos que salen desde abajo. */
/* Colores: pieza «tema» (ui/tema.css, cargada antes). Aquí solo los pares que Esquema cambia y lo propio del lienzo y los
   diagramas (--lienzo, --punto, --d-*), con light-dark() para que sigan solos al modo. El SVG que se exporta no usa estas
   variables: lleva sus colores adentro (M.COLORES en motor/dibujo.js). */
:root { --texto-suave-claro: #596377; --rojo-claro: #c02b2b; --rojo-oscuro: #ff8080; --verde-claro: #1d7444; --linea-claro: #e2e6ec; --linea-oscuro: #273041; }
:root {
  --lienzo: light-dark(#fbfcfd, #12171f); --punto: light-dark(#dce1e9, #252d3b);
  --d-nodo: light-dark(#ffffff, #1b212c); --d-borde: light-dark(#3d4a5c, #9aa6ba); --d-texto: light-dark(#1b2230, #e8ecf3);
  --d-linea: light-dark(#56627a, #9aa6ba); --d-grupo: light-dark(#f1f4f8, #171d27); --d-grupo-borde: light-dark(#c5ccd8, #364053);
  --d-etq: light-dark(#fbfcfd, #12171f); --d-icono: light-dark(#2f5fd0, #7fa2ff); --d-nota: light-dark(#fff8db, #332d17);
  --d-nota-borde: light-dark(#d8c37a, #7d6b2e); --d-act: light-dark(#e8ecf2, #262e3c);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.ic { width: 16px; height: 16px; flex: none; }
.ic path, .ic circle, .ic rect { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.oculto { display: none !important; }

/* ───── Botones ───── */
.pz-boton.icono { padding: 6px; min-width: 34px; }

/* ───── Estructura ───── */
#app { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.lateral { background: var(--panel); border-right: 1px solid var(--linea); display: flex; flex-direction: column; min-height: 0; }
.marca { display: flex; align-items: center; gap: 10px; padding: 14px 14px 6px; }
.marca img { width: 26px; height: 26px; }
.marca b { font-size: 15px; letter-spacing: .2px; }
.carpeta { display: flex; align-items: center; gap: 8px; margin: 4px 10px 10px; padding: 6px 8px; border-radius: 8px; border: 0; background: transparent; color: var(--texto-suave); text-align: left; min-width: 0; }
.carpeta:hover { background: var(--hover); color: var(--texto); }
.carpeta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .nuevo { margin: 8px 12px 12px; }
.lista { flex: 1; overflow: auto; padding: 0 8px 8px; }
.lista h3 { margin: 12px 8px 4px; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--texto-suave); font-weight: 600; }
.archivo { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; text-align: left; min-height: 34px; color: var(--texto); }
.archivo:hover { background: var(--hover); }
.archivo[aria-current="true"] { background: var(--acento-suave); font-weight: 600; }
.archivo .ic { color: var(--texto-suave); }
.archivo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.archivo small { margin-left: auto; color: var(--texto-suave); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
/* Árbol de la carpeta: cada nivel corre 14 px; la flecha dice si la subcarpeta está abierta. */
.arbol .archivo { padding-left: calc(8px + var(--n, 0) * 14px); }
.arbol .carpeta-arbol { gap: 4px; }
.arbol .vacio { padding-left: calc(8px + var(--n, 0) * 14px); font-size: 12px; }
/* «Lo que falta» en la documentación de un proyecto. */
.p-falta ul { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.p-falta li { display: flex; gap: 8px; align-items: flex-start; }
.p-falta li .ic { flex: none; margin-top: 2px; }
.p-falta li.hecho .ic { color: var(--verde); }
.p-falta li.pendiente .ic { color: var(--acento); }
.p-falta li small { color: var(--texto-suave); }
.p-fondo { margin: 12px 0; align-items: flex-start; }
.p-fondo small { display: block; color: var(--texto-suave); margin-top: 2px; }
.arbol .carpeta-arbol .ic + .ic { margin-right: 4px; }
.arbol .carpeta-arbol[aria-expanded="true"] > .ic:first-child { color: var(--texto); }
/* Inicio de una carpeta: cuatro acciones grandes, una por fila en celular. */
.inicio { max-width: 760px; margin: 0 auto; padding: 32px 24px; overflow: auto; }
.inicio-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.inicio-cab h2 { margin: 0; font-size: 20px; }
.inicio-cab p { margin: 2px 0 0; color: var(--texto-suave); }
.acciones-inicio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.tarjeta-inicio { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 16px; border: 1px solid var(--linea); border-radius: 12px; background: var(--panel); color: var(--texto); min-height: 96px; }
.tarjeta-inicio:hover { border-color: var(--acento); }
.tarjeta-inicio:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.ti-icono { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--acento-suave); color: var(--acento); }
.ti-icono .ic { width: 18px; height: 18px; }
.ti-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ti-txt b { font-size: 15px; }
.ti-txt small { color: var(--texto-suave); font-size: 13px; line-height: 1.45; }
.inicio-mas { margin: 0; }
@media (max-width: 760px) { .acciones-inicio { grid-template-columns: minmax(0, 1fr); } .inicio { padding: 20px 16px; } }
.pie-lateral { border-top: 1px solid var(--linea); padding: 8px; display: flex; gap: 4px; }
.pie-lateral .pz-boton { flex: 1; justify-content: flex-start; }
.contenido { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.barra { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--linea); background: var(--panel); min-height: 52px; min-width: 0; }
.barra .titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.barra .estado-guardado { color: var(--texto-suave); font-size: 12px; white-space: nowrap; }
.barra .espacio { flex: 1; }
.barra .solo-movil { display: none; }
.area { display: grid; grid-template-columns: minmax(300px, 36%) minmax(0, 1fr); min-height: 0; min-width: 0; }
.area[data-vista="texto"] { grid-template-columns: minmax(0, 1fr); }
.area[data-vista="texto"] .panel-dibujo { display: none; }
.area[data-vista="dibujo"] { grid-template-columns: minmax(0, 1fr); }
.area[data-vista="dibujo"] .panel-texto { display: none; }
.panel-texto { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; border-right: 1px solid var(--linea); background: var(--panel); min-width: 0; min-height: 0; }
.panel-dibujo { position: relative; min-width: 0; min-height: 0; display: grid; }
.vacio { display: grid; place-items: center; padding: 32px; text-align: center; color: var(--texto-suave); }
.vacio h2 { color: var(--texto); margin: 0 0 6px; font-size: 18px; }
.vacio .acciones { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* ───── Editor de texto ───── */
.editor { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; overflow: hidden; }
.margen { padding: 12px 8px 12px 12px; font: 13px/20px var(--mono); color: var(--texto-suave); text-align: right; user-select: none; overflow: hidden; white-space: pre; opacity: .7; }
.margen .mal { color: var(--rojo); font-weight: 700; opacity: 1; }
#texto { border: 0; outline: none; resize: none; padding: 12px 14px 40px 4px; font: 13px/20px var(--mono); background: transparent; white-space: pre; overflow: auto; tab-size: 4; min-height: 0; height: 100%; }
.problemas { border-top: 1px solid var(--linea); font-size: 12.5px; }
.problema { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; background: var(--rojo-suave); color: var(--texto); padding: 8px 12px; }
.problema b { color: var(--rojo); white-space: nowrap; }
.problema.aviso { background: var(--panel-2); }
.problema.aviso b { color: var(--texto-suave); }
.problema code { font-family: var(--mono); font-size: 12px; background: var(--panel); border: 1px solid var(--linea); border-radius: 4px; padding: 0 4px; }
.sugerencias { display: flex; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none; min-height: 40px; align-items: center; }
.sugerencias:empty { display: none; }
.sugerencias button { font: 12.5px var(--mono); border: 1px solid var(--linea); background: var(--panel-2); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.sugerencias button:first-child { border-color: var(--acento); }
.sugerencias .tecla { font-size: 11px; color: var(--texto-suave); white-space: nowrap; }

/* ───── Lienzo ───── */
.lienzo { position: relative; overflow: hidden; background-color: var(--lienzo); background-image: radial-gradient(var(--punto) 1px, transparent 1.2px); background-size: 20px 20px; touch-action: none; outline: none; cursor: default; min-height: 0; }
.lienzo.paneando { cursor: grabbing; }
.lienzo > svg.esq { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.lienzo.con-error #lz-contenido { opacity: .45; }
.esq { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; }
.esq .forma { fill: var(--d-nodo); stroke: var(--d-borde); stroke-width: 1.4; }
.esq .forma.lleno { fill: var(--d-borde); }
.esq .linea { fill: none; stroke: var(--d-borde); stroke-width: 1.2; }
.esq text { fill: var(--d-texto); }
.esq .icono { fill: none; stroke: var(--d-icono); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.esq .trazo { fill: none; stroke: var(--d-linea); stroke-width: 1.5; }
.esq .toque { fill: none; stroke: transparent; stroke-width: 14; }
.esq .punteada .trazo { stroke-dasharray: 5 4; }
.esq .gruesa .trazo { stroke-width: 3; }
.esq .punta { fill: var(--d-linea); }
.esq .punta-linea { fill: none; stroke: var(--d-linea); stroke-width: 1.6; }
.esq .etq-arista rect { fill: var(--d-etq); }
.esq .etq-arista text { font-size: 13px; }
.esq .caja { fill: var(--d-grupo); stroke: var(--d-grupo-borde); }
.esq .titulo-grupo { font-size: 13px; font-weight: 600; }
.esq .participante rect, .esq .participante .cuerpo { fill: var(--d-nodo); stroke: var(--d-borde); stroke-width: 1.4; }
.esq .vida { stroke: var(--d-grupo-borde); stroke-width: 1.2; stroke-dasharray: 4 4; }
.esq .activacion { fill: var(--d-act); stroke: var(--d-borde); stroke-width: 1; }
.esq .nota rect { fill: var(--d-nota); stroke: var(--d-nota-borde); }
.esq .bloque rect { fill: none; stroke: var(--d-grupo-borde); stroke-width: 1.2; }
.esq .bloque .rotulo { fill: var(--d-grupo); stroke: var(--d-grupo-borde); }
.esq .bloque .sep { stroke: var(--d-grupo-borde); stroke-dasharray: 4 3; }
.esq .bloque text { font-size: 12.5px; }
.esq .numero circle { fill: var(--d-borde); }
.esq .numero text { fill: var(--d-nodo); font-size: 11px; font-weight: 700; }
.esq .mensaje text { font-size: 13px; }
.lienzo .nodo, .lienzo .arista, .lienzo .etq-arista, .lienzo .participante, .lienzo .mensaje, .lienzo .nota { cursor: pointer; }
.lienzo .nodo.fijo .forma { stroke-dasharray: 0; }
.lienzo .elegido .forma, .lienzo .elegido rect:not(.activacion), .lienzo .elegido .cuerpo { stroke: var(--acento); stroke-width: 2.4; }
.lienzo .elegido .trazo { stroke: var(--acento); stroke-width: 2.4; }
.lienzo .elegido text { fill: var(--d-texto); }
.lienzo .nodo:hover .forma { stroke: var(--acento); }
.lz-capa .asa { fill: var(--acento); stroke: var(--panel); stroke-width: 2; cursor: crosshair; }
.lz-capa .asa-fondo { fill: transparent; cursor: crosshair; }
.lz-capa .provisoria { pointer-events: none; fill: none; stroke: var(--acento); stroke-width: 2; stroke-dasharray: 6 4; }
.lz-capa .pin { fill: var(--acento); }
.lz-herr { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 2px; align-items: center; background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 4px; box-shadow: var(--sombra); max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
.lz-herr .pz-boton { min-height: 34px; border-color: transparent; background: transparent; }
.lz-herr .pz-boton:hover { background: var(--hover); }
.lz-herr .sep { width: 1px; height: 22px; background: var(--linea); margin: 0 4px; flex: none; }
.lz-herr .zoom { min-width: 50px; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.lz-sel { position: absolute; left: 12px; top: 12px; display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--linea); border-radius: 10px; padding: 3px; box-shadow: var(--sombra); max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
.lz-sel .pz-boton { border-color: transparent; background: transparent; min-height: 32px; }
.lz-sel .pz-boton:hover { background: var(--hover); }
.lz-mini { position: absolute; right: 12px; bottom: 70px; width: 180px; height: 120px; background: var(--panel); border: 1px solid var(--linea); border-radius: 8px; box-shadow: var(--sombra); overflow: hidden; }
.lz-mini svg { width: 100%; height: 100%; display: block; }
.lz-mini .ventana { fill: var(--acento); fill-opacity: .12; stroke: var(--acento); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lz-editar { position: absolute; z-index: 5; border: 2px solid var(--acento); border-radius: 6px; background: var(--panel); color: var(--texto); text-align: center; font: 14px/18px system-ui, sans-serif; padding: 6px; resize: none; overflow: hidden; box-shadow: var(--sombra); }
.lz-aviso { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: center; pointer-events: none; }
.lz-aviso div { pointer-events: auto; background: var(--panel); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 14px; box-shadow: var(--sombra); max-width: 520px; color: var(--texto-suave); }
.lz-vacio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--texto-suave); text-align: center; padding: 24px; pointer-events: none; }
.tarjeta-ia { position: absolute; left: 12px; bottom: 70px; max-width: min(420px, calc(100% - 24px)); background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--sombra); padding: 10px 12px; display: grid; gap: 6px; z-index: 3; }
.tarjeta-ia p { margin: 0; }
.tarjeta-ia .meta { color: var(--texto-suave); font-size: 12.5px; }
.tarjeta-ia .acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.menu { position: absolute; z-index: 20; background: var(--panel); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra); padding: 6px; min-width: 220px; max-height: 70vh; overflow: auto; }
.menu h4 { margin: 8px 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-suave); }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; text-align: left; padding: 7px 8px; border-radius: 6px; min-height: 34px; }
.menu button:hover, .menu button:focus-visible { background: var(--hover); }
.menu .ic { color: var(--d-icono); }
.menu .rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* ───── Documento ───── */
.vista-doc { overflow: auto; background: var(--panel); min-height: 0; }
.md { max-width: 820px; margin: 0 auto; padding: 28px 32px 80px; line-height: 1.6; overflow-wrap: anywhere; }
.md h1, .md h2 { border-bottom: 1px solid var(--linea); padding-bottom: .3em; }
.md h1 { font-size: 1.9em; margin: .2em 0 .6em; }
.md h2 { font-size: 1.4em; margin: 1.4em 0 .6em; }
.md h3 { font-size: 1.15em; margin: 1.2em 0 .4em; }
.md code { font: .9em var(--mono); background: var(--panel-2); border-radius: 4px; padding: .1em .35em; }
.md pre { background: var(--panel-2); border-radius: 8px; padding: 12px 14px; overflow: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 1em 0; padding: 0 1em; border-left: 3px solid var(--linea); color: var(--texto-suave); }
.md blockquote.alerta { border-left-color: var(--acento); color: var(--texto); }
.md table { border-collapse: collapse; display: block; overflow: auto; max-width: 100%; }
.md th, .md td { border: 1px solid var(--linea); padding: 6px 12px; }
.md a { color: var(--acento); }
.md img, .md .md-img { display: inline-block; font-size: 12px; border: 1px dashed var(--linea); border-radius: 4px; padding: 1px 6px; color: var(--texto-suave); }
.md hr { border: 0; border-top: 1px solid var(--linea); margin: 1.6em 0; }
.md-diagrama { position: relative; margin: 1.2em 0; padding: 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--lienzo); overflow: auto; text-align: center; }
.md-diagrama svg { max-width: 100%; height: auto; }
.md-diagrama .editar { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .12s; }
.md-diagrama:hover .editar, .md-diagrama:focus-within .editar { opacity: 1; }
.md-diagrama .error { color: var(--rojo); font-size: 13px; text-align: left; }
.md-diagrama .pendiente { color: var(--texto-suave); font-size: 13px; text-align: left; }
.md-diagrama pre { text-align: left; }
.cab-bloque { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--linea); background: var(--panel); }
.cab-bloque span { color: var(--texto-suave); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-dibujo.con-cab { grid-template-rows: auto minmax(0, 1fr); }

/* ───── Diálogos ───── */
.pz-capa:has(> .idioma-solo) { background: var(--fondo); }
.pz-dialogo label { display: block; font-weight: 600; margin: 12px 0 6px; }
.pz-dialogo textarea, .pz-dialogo input[type="text"], .pz-dialogo input[type="search"] { width: 100%; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); padding: 9px 11px; }
.pz-dialogo textarea { min-height: 96px; resize: vertical; }
.marcar { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.marcar input { margin-top: 3px; }
.marcar small { display: block; color: var(--texto-suave); }
.bienvenida ul { margin: 0 0 12px; padding-left: 18px; color: var(--texto-suave); }
.bienvenida li { margin: 4px 0; }
.ajustes h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-suave); margin: 20px 0 4px; }
.plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-top: 12px; }
.plantilla { border: 1px solid var(--linea); border-radius: 10px; background: var(--panel); padding: 0; text-align: left; overflow: hidden; display: grid; grid-template-rows: 110px auto; }
.plantilla:hover { border-color: var(--acento); }
.plantilla[aria-pressed="true"] { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-suave); }
.plantilla .previa { background: var(--lienzo); display: grid; place-items: center; overflow: hidden; padding: 8px; border-bottom: 1px solid var(--linea); color: var(--texto-suave); }
.plantilla .previa svg { max-width: 100%; max-height: 94px; }
.plantilla .info { padding: 9px 11px; }
.plantilla .info b { display: block; }
.plantilla .info small { color: var(--texto-suave); display: block; line-height: 1.35; }
.plantilla.ia .previa { color: var(--acento); }
.buscar-fila { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.buscar-fila input { flex: 1; }
.previa-readme { border: 1px solid var(--linea); border-radius: 10px; max-height: 46vh; overflow: auto; margin-top: 10px; }
.previa-readme .md { padding: 16px 20px; }
.lista-envio { font: 12px/1.5 var(--mono); background: var(--panel-2); border-radius: 8px; padding: 10px 12px; max-height: 200px; overflow: auto; white-space: pre; color: var(--texto-suave); }
.esperando { display: flex; gap: 12px; align-items: center; padding: 18px 0; color: var(--texto-suave); }
.cambios-ia { display: grid; gap: 8px; margin-top: 10px; }
.cambio-ia { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.cambio-ia.quitado { opacity: .6; }
.cambio-ia .meta { color: var(--texto-suave); font-size: 12.5px; }
/* Con un diálogo abierto (que en el celular sale desde abajo), una pregunta o una barra de guardar abajo, el aviso va arriba para no tapar sus botones. */
body:has(.pz-capa) #toast, body:has(.p-pie) #toast, body:has(.pregunta) #toast { top: calc(16px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translate(-50%, -20px); }
body:has(.pz-capa) #toast.visible, body:has(.p-pie) #toast.visible, body:has(.pregunta) #toast.visible { transform: translate(-50%, 0); }

/* Táctil y celular: todo lo que se toca a --pz-tactil (44 px), como antes de «componentes» 0.3 (que ahora solo sube lo suyo). */
@media (pointer: coarse), (max-width: 760px) {
  :root { --pz-boton-alto: var(--pz-tactil); --pz-chip-alto: var(--pz-tactil); }
}

/* ───── Celular (y ventanas angostas) ───── */
@media (max-width: 760px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .2s; box-shadow: var(--sombra); }
  .lateral.abierto { transform: none; }
  .velo { position: fixed; inset: 0; background: rgba(15, 20, 30, .35); z-index: 39; }
  .barra { padding: 6px 8px; gap: 4px; }
  .barra .solo-movil { display: inline-flex; }
  .barra .solo-escritorio { display: none; }
  .barra .pz-boton { min-width: var(--pz-tactil); }
  .area, .area[data-vista="ambos"] { grid-template-columns: minmax(0, 1fr); }
  .area[data-vista="ambos"] .panel-texto { display: none; }
  .panel-texto { border-right: 0; }
  .lz-herr { bottom: max(10px, env(safe-area-inset-bottom)); }
  .lz-herr .pz-boton { min-width: var(--pz-tactil); }
  .lz-herr .no-movil { display: none; }
  .lz-mini { display: none; }
  .tarjeta-ia { bottom: 76px; }
  .pz-capa:has(> .idioma-solo) { place-items: center; padding: 16px; }
  .idioma-solo { border-radius: 14px; }
  .md { padding: 18px 16px 60px; }
  .archivo { min-height: 44px; }
}
/* «Nuevo» → Comunidad: plantillas del catálogo de la comunidad */
.titulo-nuevo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.titulo-nuevo h2 { margin: 0; }
.plantilla .estado-catalogo small { color: var(--acento); font-weight: 600; margin-top: 4px; }
.plantilla[aria-busy="true"] { opacity: .7; }
.proponer { margin: 14px 0 0; text-align: center; }
.aviso-catalogo { margin: 0 0 10px; color: var(--texto-suave); font-size: 13px; }
.enlace { border: 0; background: none; padding: 6px 4px; min-height: 32px; color: var(--acento); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }

/* ───── Proyectos (ui/proyectos.js) ───── */
.p-panel { overflow: auto; min-height: 0; background: var(--fondo); padding: 24px 28px 48px; }
.p-panel > * { max-width: 920px; margin-left: auto; margin-right: auto; }
.p-cab { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.p-cab h2 { margin: 0 0 2px; font-size: 21px; overflow-wrap: anywhere; }
.p-cab p { margin: 0; color: var(--texto-suave); }
.p-icono { width: 40px; height: 40px; border-radius: 10px; background: var(--acento-suave); color: var(--acento); display: grid; place-items: center; flex: none; }
.p-icono .ic { width: 20px; height: 20px; }
.p-tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.p-tarjeta h3, .p-ficha h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-suave); }
.p-tarjeta label { display: block; font-weight: 600; margin-bottom: 6px; }
.p-tarjeta input[type="text"] { width: 100%; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); padding: 9px 11px; font-family: var(--mono); }
.p-fila { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linea); }
.p-fila:last-child { border-bottom: 0; }
.p-etq { color: var(--texto-suave); }
.p-val { overflow-wrap: anywhere; }
.p-val small, .p-commits small { color: var(--texto-suave); }
.p-val code, .p-codigo code, .p-chip small, .p-envio code, .p-pedir code { font: 12px var(--mono); background: var(--panel-2); border-radius: 4px; padding: 1px 5px; }
.p-commits { margin: 0; padding-left: 18px; color: var(--texto); }
.p-commits li { margin: 3px 0; overflow-wrap: anywhere; }
.p-ayuda { color: var(--texto-suave); font-size: 13px; margin: 8px 0; }
.p-acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin: 14px 0; }
.p-acciones.izq { justify-content: flex-start; }
.p-pie { position: sticky; bottom: -48px; background: var(--fondo); padding: 12px 0 16px; border-top: 1px solid var(--linea); }
.p-aviso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--linea); border-left: 3px solid var(--acento); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.p-aviso span:first-child { flex: 1; min-width: 160px; }
.p-nota { display: block; }
.p-lista { display: grid; gap: 2px; }
.p-doc { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; text-align: left; padding: 8px; border-radius: 8px; min-height: 44px; color: var(--texto); }
.p-doc:hover { background: var(--hover); }
.p-tipo { color: var(--texto-suave); display: grid; place-items: center; flex: none; }
.p-txt { display: grid; min-width: 0; flex: 1; }
.p-txt b, .p-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-txt small { color: var(--texto-suave); }
.p-prop { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.p-prop.quitada { opacity: .55; }
.p-prop.quitada .p-txt b { text-decoration: line-through; }
.p-prop-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-prop-cab .p-txt { min-width: 160px; }
.p-prop-acc { display: flex; gap: 6px; flex-wrap: wrap; }
/* «Agregar información»: el plan agrupado (Nuevo / Se completa / Se modifica), con el porqué y la cita de cada cambio. */
.p-grupo { margin: 18px 0 6px; }
.p-grupo > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin: 0 0 2px; display: flex; align-items: center; gap: 8px; }
.p-grupo > .p-ayuda { margin: 0 0 8px; }
.p-n { font-size: 12px; font-weight: 600; background: var(--panel-2); color: var(--texto); border-radius: 999px; padding: 0 7px; letter-spacing: 0; }
.p-porque { margin: 8px 0 0; font-size: 14px; }
.p-cita { margin: 6px 0 0; padding: 4px 10px; border-left: 3px solid var(--linea); color: var(--texto-suave); font-size: 13px; overflow-wrap: anywhere; }
.p-cita small { font-style: italic; }
.p-prop.p-modifica { border-color: var(--acento); }
.p-prop.p-modifica.quitada { border-color: var(--linea); opacity: .8; }
.p-prop.p-modifica.quitada .p-txt b { text-decoration: none; }
.p-previa { border-top: 1px solid var(--linea); margin-top: 10px; padding: 12px 4px 4px; max-height: 60vh; overflow: auto; }
.p-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.p-chip { border: 1px solid var(--linea); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.p-dif { font: 12.5px/1.5 var(--mono); border: 1px solid var(--linea); border-radius: 8px; overflow: auto; margin-top: 10px; max-height: 50vh; background: var(--panel); }
.p-dif div { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 10px; }
.p-dif span { display: inline-block; width: 16px; color: var(--texto-suave); user-select: none; }
.p-dif .d-mas { background: var(--acento-suave); }
.p-dif .d-menos { color: var(--texto-suave); text-decoration: line-through; background: var(--panel-2); }
.p-dif .d-salto { color: var(--texto-suave); font-style: italic; background: var(--fondo); }
.p-dif-diag { margin-top: 10px; }
.p-dif-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.p-dif-par figure { margin: 0; border: 1px solid var(--linea); border-radius: 10px; background: var(--lienzo); padding: 8px; overflow: auto; }
.p-dif-par figcaption { font-size: 12px; color: var(--texto-suave); margin-bottom: 4px; }
.p-dif-svg svg { max-width: 100%; height: auto; }
.esq .dif-mas .forma, .esq .dif-mas rect, .esq .dif-mas .cuerpo { stroke: var(--acento); stroke-width: 3; }
.esq .dif-menos .forma, .esq .dif-menos rect, .esq .dif-menos .cuerpo { stroke: var(--texto-suave); stroke-width: 3; stroke-dasharray: 5 4; }
.esq .dif-menos text { text-decoration: line-through; }
.esq .dif-cambia .forma, .esq .dif-cambia rect, .esq .dif-cambia .cuerpo { stroke: var(--acento); stroke-width: 3; stroke-dasharray: 2 3; }
.p-el { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.p-el-lista { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 10px; }
.p-el-lista h4 { margin: 12px 6px 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-suave); }
.p-el-lista input[type="search"] { flex: 1; min-width: 0; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); padding: 7px 10px; }
.p-ficha { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 16px; min-width: 0; }
.p-ficha.vacio { min-height: 200px; }
.p-ficha-cab { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 8px; }
.p-ficha-cab h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.p-ficha-cab p { margin: 2px 0 0; color: var(--texto-suave); }
.p-desc { margin: 0 0 8px; }
.p-codigo { color: var(--texto-suave); margin: 0 0 8px; overflow-wrap: anywhere; }
.p-editar { margin: 8px 0 12px; }
.p-editar label { display: block; font-weight: 600; margin-bottom: 6px; }
.p-editar input, .p-editar textarea { width: 100%; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); padding: 9px 11px; }
.p-editar textarea { min-height: 80px; resize: vertical; }
.p-versiones { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.p-tiempo { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 2px solid var(--linea); }
.p-tiempo li { position: relative; padding: 0 0 6px 14px; }
.p-punto { position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--linea); }
.p-tiempo li.pendiente .p-punto { border-color: var(--acento); }
.p-tiempo li.pendiente div { display: grid; gap: 8px; justify-items: start; padding: 8px 0; }
.p-version { display: grid; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; padding: 8px 10px; border-radius: 8px; min-height: 44px; color: var(--texto); }
.p-version:hover { background: var(--hover); }
.p-version[aria-current="true"] { background: var(--acento-suave); border-color: var(--acento); }
.p-version b { overflow-wrap: anywhere; font-weight: 600; }
.p-version small { color: var(--texto-suave); }
.p-comparar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.p-comparar label { margin: 0; }
.p-comparar select { border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); padding: 6px 8px; max-width: 100%; }
.p-dif-archivo { border-bottom: 1px solid var(--linea); padding-bottom: 6px; margin-bottom: 6px; }
.p-envio { display: grid; gap: 6px; max-height: 46vh; overflow: auto; }
.p-envio details { border: 1px solid var(--linea); border-radius: 8px; }
.p-envio summary { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; cursor: pointer; min-height: 40px; align-items: center; }
.p-envio summary small { color: var(--texto-suave); white-space: nowrap; }
.p-envio pre { margin: 0; border-top: 1px solid var(--linea); padding: 8px 10px; font: 12px/1.5 var(--mono); max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texto-suave); }
.p-pedir { display: grid; gap: 4px; }
.p-cambio-lista { display: grid; gap: 8px; margin-top: 12px; max-height: 52vh; overflow: auto; }
.p-notas, .p-frases { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }
.p-frases { color: var(--texto-suave); }
.p-frases li, .p-notas li { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .p-panel { padding: 16px 16px 40px; }
  .p-fila { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .p-el, .p-versiones, .p-dif-par { grid-template-columns: minmax(0, 1fr); }
  .p-pie { bottom: -40px; }
}
/* Pasar al proyecto: una fila por documento, con su casilla, adónde va y si ya existe en el repo. */
.p-pasar { display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 460px); overflow: auto; margin: 10px 0; }
.p-pasar-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 9px; }
.p-pasar-fila .marcar b { font-weight: 600; overflow-wrap: anywhere; }
.p-pasar-fila .marcar small { overflow-wrap: anywhere; }
.p-pasar-acc { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-left: 26px; }
.p-pasar-fila .p-dif { grid-column: 1 / -1; }
.marcar.chico { font-size: 13px; gap: 6px; }
.p-estado { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--panel-2); color: var(--texto-suave); white-space: nowrap; }
.p-estado.ok { background: var(--acento-suave); color: var(--acento); }
.p-estado.aviso { color: var(--texto); }
.p-estado.mal { background: var(--rojo-suave); color: var(--rojo); }

/* ── Trabajos largos (documentar por etapas) ── */
.pz-giro.chico { width: 12px; height: 12px; border-width: 2px; display: inline-block; vertical-align: -2px; }
.p-trabajo { border-left: 3px solid var(--acento); }
.p-trabajo.listo { border-left-color: var(--verde); }
.p-trabajo.error, .p-trabajo.con-fallas { border-left-color: var(--rojo); }
.p-trabajo.detenido, .p-trabajo.interrumpido { border-left-color: var(--texto-suave); }
.t-cab { display: flex; align-items: baseline; gap: 12px; }
.p-tarjeta .t-titulo { flex: 1; margin: 0; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--texto); min-width: 0; }
.t-tiempo { font: 13px var(--mono); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.t-etapas { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 12px 0 6px; color: var(--texto-suave); font-size: 13px; }
.t-etapas li { display: flex; align-items: center; gap: 6px; }
.t-etapas li.hecha { color: var(--texto); }
.t-etapas li.hecha .ic { color: var(--verde); }
.t-etapas li.actual { color: var(--texto); font-weight: 600; }
.t-etapas .punto { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--linea); margin: 0 2px; }
.t-lee { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 6px 0; font-size: 13px; color: var(--texto-suave); min-width: 0; }
.t-lee-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-lee code { font: 12px var(--mono); color: var(--texto); }
.t-docs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.t-doc { display: flex; gap: 10px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--linea); min-width: 0; }
.t-doc:first-child { border-top: 0; }
.t-doc .p-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t-doc .p-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.t-doc .p-txt small { color: var(--texto-suave); font-size: 12px; overflow-wrap: anywhere; }
.t-doc .t-ic { flex: none; width: 20px; display: grid; place-items: center; color: var(--texto-suave); }
.t-doc.listo .t-ic { color: var(--verde); }
.t-doc.fallo .t-ic { color: var(--rojo); }
.t-doc.cola { opacity: .75; }
.t-doc.quitado b { text-decoration: line-through; color: var(--texto-suave); }
.t-acc { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.t-sigue { margin: 0; align-self: center; }
.p-nuevo { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--acento); background: var(--acento-suave); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
/* El lateral: «Documentación» con un punto que late mientras la IA escribe. */
.trabajando-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--acento); margin-left: auto; flex: none; animation: latido 1.4s ease-in-out infinite; }
.trabajando-punto + small { margin-left: 6px; }
@keyframes latido { 50% { opacity: .25; } }

/* ── «Código»: todos los archivos, con lo que leyó la IA ── */
.c-resumen { margin: 2px 0 4px; padding-left: calc(8px + var(--n, 0) * 14px); font-size: 11.5px; color: var(--texto-suave); }
.c-archivo .ic { opacity: .8; }
.c-archivo span { color: var(--texto-suave); }
.c-archivo[data-abrir] span { color: var(--texto); }
.c-marca { margin-left: auto; flex: none; width: 6px; height: 6px; border-radius: 50%; }
.c-archivo.leido .c-marca { background: var(--verde); opacity: .7; }
.c-archivo.cambio .c-marca { background: transparent; border: 1.5px solid #c98a12; }
.c-archivo.leyendo { background: var(--acento-suave); }
.c-archivo.leyendo .c-marca { background: var(--acento); opacity: 1; animation: latido 1s ease-in-out infinite; }
.c-carpeta.leyendo > .ic:nth-child(2) { color: var(--acento); }
@media (prefers-reduced-motion: reduce) { .trabajando-punto, .c-archivo.leyendo .c-marca { animation: none; } }
@media (max-width: 760px) {
  .t-doc { flex-wrap: wrap; }
  .t-acc { width: 100%; justify-content: flex-start; padding-left: 30px; }
  .t-acc .pz-boton { min-height: 40px; }
}
.p-chip { background: var(--panel); color: var(--texto); display: inline-flex; gap: 4px; align-items: center; }
.t-abrir { border: 0; background: transparent; padding: 0; text-align: left; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.t-abrir:hover { color: var(--acento); text-decoration: underline; }

/* ── Lateral: lo global arriba («Proyectos» + Agregar), lo del proyecto adentro de su carpeta («Nuevo en …») ── */
.lat-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 12px 0 4px; padding-right: 2px; }
.lat-cab h3 { margin: 0 8px; }
.pz-boton.chico { min-height: 28px; padding: 3px 8px; font-size: 12.5px; gap: 4px; }
.lat-cab .pz-boton.chico { color: var(--texto-suave); }
.lat-cab .pz-boton.chico:hover { color: var(--texto); }
.lat-agregar { margin: 10px 8px; width: calc(100% - 16px); }
.archivo.nuevo-en { color: var(--acento); font-weight: 600; }
.archivo.nuevo-en .ic { color: var(--acento); }
.espera-punto { margin-left: auto; flex: none; width: 17px; height: 17px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); font: 700 11px/17px system-ui, sans-serif; text-align: center; }
/* Estado de una historia de usuario: un punto de color (gris por entender, azul lista, ámbar en desarrollo, verde terminada). */
.hu-punto { flex: none; width: 8px; height: 8px; border-radius: 50%; display: inline-block; border: 1.5px solid var(--texto-suave); background: transparent; }
.hu-punto[data-estado="lista"] { background: var(--acento); border-color: var(--acento); }
.hu-punto[data-estado="en-desarrollo"] { background: #c98a12; border-color: #c98a12; }
.hu-punto[data-estado="terminada"] { background: var(--verde); border-color: var(--verde); }
.archivo .hu-punto { margin-left: auto; }
.archivo .hu-punto.espera { box-shadow: 0 0 0 3px var(--acento-suave); }
.hu-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-suave); white-space: nowrap; flex: none; }
.p-doc.fijo { cursor: default; }
.p-doc.fijo:hover { background: transparent; }
.p-seccion h3 { display: flex; align-items: center; gap: 8px; }
.p-seccion h3 small { margin-left: auto; font-weight: 400; letter-spacing: 0; text-transform: none; }
.p-espera { border-left-color: var(--acento); }
.p-espera > span:first-child { display: flex; align-items: center; gap: 8px; }
/* La barra de una historia de usuario, arriba de su documento. */
.con-barra-doc { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; }
.hu-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--linea); background: var(--panel); min-width: 0; }
.hu-barra .espacio { flex: 1; }
.hu-id { font: 600 12.5px var(--mono); color: var(--texto-suave); }
.hu-estados button { display: inline-flex; align-items: center; gap: 6px; }
.hu-commits { color: var(--texto-suave); font-size: 12px; }
/* «Agregar»: soltar o elegir archivos, o pegar texto. */
.pz-dialogo.agregar { width: min(640px, 100%); }
.soltar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1.5px dashed var(--linea); border-radius: 12px; padding: 14px 16px; margin: 12px 0; background: var(--fondo); }
.soltar.encima { border-color: var(--acento); background: var(--acento-suave); }
.soltar-ic { color: var(--acento); display: grid; place-items: center; }
.soltar-ic .ic { width: 22px; height: 22px; }
.soltar-txt { flex: 1; min-width: 180px; display: grid; }
.soltar-txt small { color: var(--texto-suave); }
.p-archivos { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.p-archivos li { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border: 1px solid var(--linea); border-radius: 8px; min-width: 0; }
.p-archivos li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-archivos li small { color: var(--texto-suave); white-space: nowrap; }
.p-pegar { width: 100%; min-height: 120px; resize: vertical; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); padding: 10px 12px; font: 13px/1.5 var(--mono); }
.p-input { width: 100%; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); padding: 9px 11px; }
.pz-dialogo label { display: block; font-weight: 600; margin: 12px 0 6px; }
.pz-dialogo .marcar { margin: 12px 0 0; }
.tipos-contenido { flex-wrap: wrap; }
.razones { margin-top: 6px; }
.tipos-proyecto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.tipo-proyecto { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border: 1px solid var(--linea); border-radius: 12px; background: var(--panel); color: var(--texto); }
.tipo-proyecto:hover { border-color: var(--acento); }
.tipo-proyecto[aria-checked="true"] { border-color: var(--acento); background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento); }
.tipo-proyecto .ti-txt { display: grid; gap: 2px; min-width: 0; }
.tipo-proyecto small { color: var(--texto-suave); }
.nuevo-ia { margin-bottom: 4px; }
.nuevo-sub { margin: 16px 0 8px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--texto-suave); }
.nuevo-fuente { margin-bottom: 10px; }
/* Preguntas: una a la vez, grande y simple. */
.pregunta { max-width: 640px !important; background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; padding: 22px 24px; margin-top: 8px; }
.preg-de { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; color: var(--texto-suave); font-size: 13px; }
.preg-de span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.preg-avance { display: flex; gap: 4px; margin: 10px 0 18px; }
.preg-avance i { flex: 1; height: 3px; border-radius: 3px; background: var(--linea); }
.preg-avance i.hecha, .preg-avance i.actual { background: var(--acento); }
.preg-avance i.actual { opacity: .55; }
.preg-txt { font-size: 22px; line-height: 1.3; margin: 0 0 6px; overflow-wrap: anywhere; }
.preg-porque { color: var(--texto-suave); margin: 0 0 16px; }
.preg-opciones { display: grid; gap: 8px; margin-bottom: 8px; }
.preg-opcion { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 46px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); color: var(--texto); }
.preg-opcion:hover { border-color: var(--acento); }
.preg-opcion[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-suave); font-weight: 600; }
.preg-opcion kbd { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--linea); background: var(--panel); display: grid; place-items: center; font: 12px var(--mono); color: var(--texto-suave); }
.pregunta label { display: block; font-weight: 600; margin: 14px 0 6px; }
.pregunta textarea { width: 100%; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); padding: 10px 12px; resize: vertical; }
.preg-pie { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.preg-pie .espacio { flex: 1; }
/* Avisos con acción («Deshacer») y menús. */
.menu .peligro { color: var(--rojo); }
.menu-nota { margin: 4px 10px 6px; font-size: 12px; color: var(--texto-suave); max-width: 220px; }
@media (max-width: 760px) {
  .hu-estados button:not([aria-pressed="true"]) .hu-etq { display: none; }
  .hu-barra .pz-boton { min-height: 40px; }
  .pregunta { padding: 18px 16px; border-radius: 12px; }
  .preg-txt { font-size: 19px; }
  .tipos-proyecto { grid-template-columns: minmax(0, 1fr); }
  .soltar .pz-boton { width: 100%; }
}
.nuevo-ia { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 6px 0 4px; }
.tarjeta-inicio.compacta { min-height: 0; padding: 12px; }
.tarjeta-inicio.compacta small { font-size: 12.5px; }
.agregar-ayuda { margin-top: 12px; }
.p-falta li { align-items: center; }
.p-falta li > span { flex: 1; min-width: 0; }
.preg-pie .pz-boton.pz-principal { margin-left: auto; }
@media (max-width: 760px) { .preg-pie .espacio { display: none; } .preg-pie .pz-boton.pz-principal { flex: 1 0 100%; order: 9; } }