/*
TYPOS — AA Arquitectura Anonima · (c) 2026 · Todos los derechos reservados.
Uso permitido segun LICENSE.txt. Prohibida la copia, la redistribucion y
las obras derivadas sin autorizacion escrita.
*/
/* ============================================================
   TYPOS — exploración tipológica
   Lenguaje gráfico: lámina blanca, línea de pelo, sans neutra.
   Referencia: "Supra Order, Nine Strict Order Strategies".
   ============================================================ */

:root{
  --paper:#ffffff;
  --ground:#f2f1ee;
  --ink:#111111;
  --ink-2:#6b6b66;
  --ink-3:#9d9d97;
  --hair:#d9d8d3;
  --hair-2:#eceae5;
  --acc:#111111;
  --pad:26px;
  --panel-w:302px;
  --datos-w:238px;
  font-size:13px;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}
body{
  background:var(--ground);
  color:var(--ink);
  font:400 12px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* ── cabeceras de esquina, como la publicación ── */
.corner{
  flex:0 0 auto;
  display:flex;justify-content:space-between;
  padding:12px var(--pad);
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);
}
footer.corner{color:var(--ink-3)}

main{
  flex:1 1 auto;min-height:0;
  display:grid;
  grid-template-columns:var(--panel-w) minmax(0,1fr) var(--datos-w);
  gap:1px;background:var(--hair);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}

/* ───────────────────────── PANELES ───────────────────────── */
.panel,.datos{
  --pp:20px;                     /* margen lateral del panel: lo usan los desplegables */
  background:var(--paper);
  overflow-y:auto;overscroll-behavior:contain;
  padding:22px var(--pp) 60px;
}
.panel::-webkit-scrollbar,.datos::-webkit-scrollbar{width:5px}
.panel::-webkit-scrollbar-thumb,.datos::-webkit-scrollbar-thumb{background:var(--hair)}

h1{
  font-size:19px;font-weight:400;letter-spacing:.22em;
  display:flex;align-items:baseline;gap:8px;
}
h1 em{font:400 9px/1 inherit;letter-spacing:.1em;color:var(--ink-3);font-style:normal}

.lede{
  margin:9px 0 22px;font-size:10.5px;line-height:1.65;color:var(--ink-2);
  padding-bottom:16px;border-bottom:1px solid var(--ink);
}

.grp{margin-bottom:26px;position:relative}
.grp[data-num]::before{
  content:attr(data-num);
  position:absolute;right:0;top:-1px;
  font-size:9px;color:var(--ink-3);letter-spacing:.1em;
}
.grp h2{
  font-size:9.5px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;
  padding-bottom:6px;margin-bottom:13px;border-bottom:1px solid var(--hair);
}
.grp h2 em{font-style:normal;color:var(--ink-3);letter-spacing:.08em;margin-left:6px;font-size:9px}

/* ── el panel ordenado como se construye (Semper), en desplegables ──
   Sólo los títulos a la vista; un clic abre debajo todas las opciones.
   Las explicaciones van en el cuadro de ayuda (panel.js). */
.grp.semper{margin-bottom:0;border-bottom:1px solid var(--hair)}
.grp.semper > h2{
  cursor:pointer;user-select:none;font-size:10px;letter-spacing:.2em;
  border-bottom:0;padding:11px 44px 11px 0;margin:0;
  transition:color .08s;
}
.grp.semper > h2:hover{color:var(--ink)}
.grp.semper > h2::after{content:'–';position:absolute;right:20px;top:10px;color:var(--ink-3)}
.grp.semper[data-num]::before{top:11px}
.grp.semper.plegada > h2::after{content:'+'}
.grp.semper.plegada > :not(h2){display:none}
.grp.semper:not(.plegada){padding-bottom:16px}
.grp.semper:not(.plegada) > h2{color:var(--ink)}
.grp.semper.plegada > h2{color:var(--ink-2)}
.grp.dibujo > h2{color:var(--ink-2)}
h1{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.acciones.sola{margin:0;padding:0;border:0}
.panel > .acciones{margin:18px 0 6px;padding:0;border:0}
.medida{font-size:9px;letter-spacing:.04em;color:var(--ink-2);margin-top:2px;line-height:1.6}
.medida b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.medida.aviso{color:var(--ink)}

/* el panel de datos: los mismos desplegables */
.grp.plegable{margin-bottom:0;border-bottom:1px solid var(--hair)}
.grp.plegable > h2{cursor:pointer;user-select:none;border-bottom:0;margin:0;padding:10px 24px 10px 0;position:relative}
.grp.plegable > h2::after{content:'–';position:absolute;right:2px;top:9px;color:var(--ink-3)}
.grp.plegable.plegada > h2::after{content:'+'}
.grp.plegable.plegada > :not(h2){display:none}
.grp.plegable:not(.plegada){padding-bottom:14px}

/* ── lo abierto, en negativo ──
   Pedido de Benjamín (v0.32): con varias secciones abiertas no se sabía
   dónde terminaba una y empezaba la otra. En v0.37 el gris suave pasa a
   ser un NEGRO AL 80 % con la letra en blanco: la sección abierta se lee
   de un golpe, y las cerradas quedan como una lista clara.

   No se redefine control por control: se dan vuelta las VARIABLES de color
   dentro del bloque abierto. Todo lo de adentro —sliders, segmentos,
   capas, botones, ayudas— ya estaba escrito con esas variables, así que
   se invierte solo y ninguna regla se duplica. */
.grp.semper:not(.plegada),
.grp.plegable:not(.plegada){
  --paper:#333333;          /* el fondo del cuadro: negro al 80 % */
  --ink:#ffffff;            /* la tinta, en negativo */
  --ink-2:#cecdc8;
  --ink-3:#9b9a94;
  --hair:#585854;
  --hair-2:#404040;
  background:var(--paper);color:var(--ink);
  margin:0 calc(-1 * var(--pp));padding:0 var(--pp) 16px;
}
.grp.semper:not(.plegada) > h2,
.grp.plegable:not(.plegada) > h2{
  background:var(--paper);color:var(--ink);
  margin:0 calc(-1 * var(--pp)) 12px;
  padding-left:var(--pp);padding-right:calc(var(--pp) + 44px);
  border-bottom:1px solid var(--hair);
}
/* los iconos de tipología son negros sobre blanco: adentro del cuadro van
   al revés, y el elegido —que se dibuja sobre blanco— vuelve a su tinta */
.grp:not(.plegada) .tipos button svg{filter:invert(1)}
.grp:not(.plegada) .tipos button[aria-pressed=true] svg{filter:none}
/* el catálogo y las tramas se dibujan en negro sobre blanco: adentro del
   cuadro se dan vuelta con la misma lógica */
.grp:not(.plegada) .catalogo button canvas,
.grp:not(.plegada) .tramas button canvas{filter:invert(1)}
.grp.semper:not(.plegada)[data-num]::before{right:var(--pp)}
.grp.semper:not(.plegada) > h2::after{right:calc(var(--pp) + 20px)}
.grp.plegable:not(.plegada) > h2::after{right:calc(var(--pp) + 2px)}

/* ── vista nocturna: el negativo de la pantalla ──
   Es un filtro sobre todo lo que se ve: los dibujos se exportan igual,
   sobre blanco. El giro de tono deja el rojo de la selección en rojo. */
body.noche{filter:invert(1) hue-rotate(180deg)}
.hdrDer{display:flex;align-items:center;gap:12px}
/* el botón va por id: con la clase `.noche` compartida, al prenderse la vista
   nocturna el BODY tomaba el tamaño del botón (18 × 18 px) — la misma trampa
   que `.max` en v0.29 */
#btnNoche{
  width:18px;height:18px;padding:0;line-height:1;border:1px solid var(--hair);
  background:var(--paper);color:var(--ink-2);font-size:11px;cursor:pointer;
}
#btnNoche:hover{border-color:var(--ink);color:var(--ink)}

/* ── el cuadro de ayuda: aparece al dejar el puntero sobre un control ── */
.ayuda{
  position:fixed;z-index:50;max-width:260px;pointer-events:none;
  background:var(--paper);color:var(--ink-2);border:1px solid var(--ink);
  padding:8px 10px;font-size:9.5px;line-height:1.6;letter-spacing:.02em;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.ayuda b{font-weight:400;color:var(--ink)}
.ayuda em{font-style:normal;color:var(--ink-3)}
[data-ayuda],[data-ayuda-de]{cursor:help}
label[data-ayuda],label[data-ayuda-de],.row2[data-ayuda-de]{cursor:default}

/* ── los viewports, sin texto ──
   Títulos, pistas y escala aparecen sólo con el puntero quieto sobre el
   dibujo (panel.js pone .info); los controles quedan siempre. */
.draw .dl,.draw .pista,.draw #scaleTxt,.draw #axoRot{opacity:0;transition:opacity .25s}
.draw.info .dl,.draw.info .pista,.draw.info #scaleTxt,.draw.info #axoRot{opacity:1}

/* ── pantalla única: el viewport que se agranda ocupa toda la lámina ── */
.max{
  width:17px;height:17px;padding:0;line-height:1;flex:0 0 auto;
  border:1px solid var(--hair);background:var(--paper);color:var(--ink-2);
  font-size:11px;cursor:pointer;
}
.max:hover,.lamina.agrandada .max{border-color:var(--ink);color:var(--ink)}
.axoBotones{align-items:center}
.lamina.agrandada:not([data-max=plan]) #wrapPlan,
.lamina.agrandada:not([data-max=axo]) #wrapAxo,
.lamina.agrandada:not([data-max=sect]) #wrapSect{display:none}
.lamina.agrandada[data-max=plan] #wrapPlan,
.lamina.agrandada[data-max=axo] #wrapAxo,
.lamina.agrandada[data-max=sect] #wrapSect{display:block;grid-row:1 / -1;grid-column:1 / -1;border:0}

/* ── la pestaña Exportar ── */
.exp{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}
.exp button{
  padding:8px 4px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);
  font:400 8.5px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.1s;
}
.exp button:hover{background:var(--ink);color:var(--paper)}

/* el plano de corte se agarra en la planta */
#plan.sobreCorte{cursor:grab}
#plan.cortando{cursor:grabbing}
.sub{
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin:20px 0 11px;padding-bottom:4px;border-bottom:1px dotted var(--hair);
}
.sub em{font-style:normal;text-transform:none;letter-spacing:.02em;margin-left:6px}
.proximo{
  font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  border:1px dashed var(--hair);padding:7px 9px;margin:0 0 14px;
}
.proximo em{font-style:normal;text-transform:none;letter-spacing:.02em;float:right}

/* ── sliders ── */
label{
  display:block;margin-bottom:13px;
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
}
label b{float:right;font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:15px;margin-top:5px;background:transparent;cursor:ew-resize;display:block;
}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--ink);}
input[type=range]::-moz-range-track{height:1px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:9px;height:9px;background:var(--paper);
  border:1px solid var(--ink);margin-top:-4px;border-radius:0;
}
input[type=range]::-moz-range-thumb{
  width:9px;height:9px;background:var(--paper);border:1px solid var(--ink);border-radius:0
}
input[type=range]:focus{outline:none}
input[type=range]:focus::-webkit-slider-thumb{background:var(--ink)}

/* ── segmentos (botones exclusivos) ── */
.lin-label{
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
  margin:16px 0 8px;
}
.lin-label em{font-style:normal;color:var(--ink-3);margin-left:5px;text-transform:none;letter-spacing:0}

.seg{display:flex;gap:-1px}
.seg.wide{width:100%}
.seg.col{flex-wrap:wrap}
.seg button{
  flex:1 1 0;min-width:0;
  font:400 9px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.07em;text-transform:uppercase;
  padding:7px 3px;background:var(--paper);color:var(--ink-2);
  border:1px solid var(--hair);margin-left:-1px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .08s,color .08s;
}
.seg button:first-child{margin-left:0}
.seg button:hover{color:var(--ink);border-color:var(--ink-3);position:relative;z-index:1}
.seg button[aria-pressed=true]{
  background:var(--ink);color:var(--paper);border-color:var(--ink);position:relative;z-index:2
}
.seg.col button{flex:1 1 46%;margin:0 -1px -1px 0}

input[type=range].topeado::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--ink) 0,var(--ink) 60%,var(--hair) 60%);
}
label.inerte{opacity:.42}
label.inerte input[type=range]{cursor:default}

.hint{
  font-size:9px;line-height:1.55;color:var(--ink-3);margin-top:-4px;
  letter-spacing:.02em;
}
.hint b{font-weight:400;color:var(--ink)}

.neigh{display:flex;flex-direction:column;gap:6px}
.nrow{display:flex;align-items:center;gap:9px}
.nrow>span{
  width:11px;font-size:9.5px;color:var(--ink);letter-spacing:.06em;flex:0 0 auto
}
.nrow .seg{flex:1 1 auto}

/* ── tipologías: mini-iconos ── */
.tipos{display:grid;grid-template-columns:repeat(3,1fr);gap:-1px}
.tipos button{
  border:1px solid var(--hair);margin:0 -1px -1px 0;background:var(--paper);
  padding:8px 4px 6px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:5px;transition:background .08s;
}
.tipos button svg{width:30px;height:30px;display:block}
.tipos button span{
  font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  text-align:center;line-height:1.25;
}
.tipos button:hover{background:var(--hair-2);position:relative;z-index:1}
.tipos button[aria-pressed=true]{background:var(--ink);position:relative;z-index:2;border-color:var(--ink)}
.tipos button[aria-pressed=true] span{color:var(--paper)}
.tipos button[aria-pressed=true] svg{filter:invert(1)}

/* ── capas ── */
.capas{display:grid;grid-template-columns:1fr 1fr}
.capas button{
  display:flex;align-items:center;gap:7px;
  padding:7px 8px;margin:0 -1px -1px 0;
  border:1px solid var(--hair);background:var(--paper);cursor:pointer;
  font:400 8.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;transition:color .08s;
}
.capas button i{
  width:8px;height:8px;flex:0 0 auto;display:block;
  border:1px solid var(--ink-3);background:var(--paper);
}
.capas button:hover{color:var(--ink);position:relative;z-index:1;border-color:var(--ink-3)}
.capas button[aria-pressed=true]{color:var(--ink)}
.capas button[aria-pressed=true] i{background:var(--ink);border-color:var(--ink)}

/* ── variantes ── */
.variantes{
  margin-top:9px;padding-top:12px;border-top:1px solid var(--hair);
}
.variantes .seg.col button{flex:1 1 46%;font-size:8.5px;padding:6px 3px}

/* la lámina ocupa toda el área de dibujo: un 3×3 en el panel sería ilegible */
.lamina.hojaActiva #wrapPlan,
.lamina.hojaActiva #wrapSect{display:none}
#wrapHoja{grid-row:1 / -1}
#hoja{cursor:pointer}

.volver{
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);
  font:400 9px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;cursor:pointer;
}
.volver:hover{background:var(--ink);color:var(--paper)}

/* ── acciones ── */
.acciones{margin-top:30px;padding-top:18px;border-top:1px solid var(--ink);display:grid;gap:7px}
.acciones button{
  width:100%;padding:9px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);
  font:400 9.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:.1s;
}
.acciones button:hover{background:var(--ink);color:var(--paper)}
.acciones button:disabled{
  border-color:var(--hair);color:var(--ink-3);cursor:default;background:var(--paper)
}
.acciones .primary{background:var(--ink);color:var(--paper)}
.acciones .primary:hover{background:var(--paper);color:var(--ink)}
.acciones .primary em{font-style:normal;opacity:.55;letter-spacing:.08em}
.acciones .row2{gap:7px}

/* ───────────────────────── LÁMINA / DIBUJOS ───────────────────────── */
.lamina{
  background:var(--paper);
  display:grid;grid-template-rows:minmax(0,1.9fr) minmax(0,1fr);
  min-width:0;min-height:0;
}
.draw{position:relative;min-height:0;min-width:0;overflow:hidden}
#wrapSect{border-top:1px solid var(--hair)}
.draw canvas{display:block;width:100%;height:100%}

/* ── el tercer viewport ──
   Con la axonometría abierta la lámina pasa a dos columnas: planta y
   axonometría arriba, corte abajo cruzando las dos. El corte sigue
   alineado bajo la PLANTA —que es lo que manda— así que la planta se
   queda con la columna izquierda y no se mueve. */
#wrapAxo{display:none}
.lamina.conAxo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lamina.conAxo #wrapPlan{grid-area:1 / 1 / 2 / 2}
.lamina.conAxo #wrapAxo{grid-area:1 / 2 / 2 / 3;display:block;border-left:1px solid var(--hair)}
.lamina.conAxo #wrapSect{grid-area:2 / 1 / 3 / 3}
.lamina.conAxo #wrapHoja{grid-area:1 / 1 / 3 / 3}
.lamina.hojaActiva #wrapAxo{display:none}
#axo{cursor:grab}
#axo.girando{cursor:grabbing}
#axo.tomando{cursor:move}
/* los botones del viewport miden lo que su palabra: con el flex:1 de los
   demás el visor los apretaba hasta leerse "PE…" y "VOLUM…" */
.seg.mini button{padding:5px 8px;font-size:8.5px;flex:0 0 auto;overflow:visible}
.axoBotones{display:flex;gap:6px}

/* ── la barra de navegación del 3D, como la de SketchUp ── */
.axoNav{position:absolute;left:18px;bottom:12px;z-index:4;flex-wrap:wrap;
        max-width:calc(100% - 36px);background:var(--paper)}
.axoNav kbd{font:inherit;opacity:.5;margin-left:5px}
.axoNav button[aria-pressed=true] kbd{opacity:.75}
#axoAyuda{max-width:min(420px, calc(100% - 36px))}
#axo.h-elegir{cursor:default}
#axo.h-orbitar,#axo.h-mirar{cursor:grab}
#axo.h-desplazar{cursor:move}
#axo.h-zoom{cursor:zoom-in}
#axo.h-caminar,#axo.h-ubicar{cursor:crosshair}
#axo.girando{cursor:grabbing}

.dl,.dr{
  position:absolute;top:14px;z-index:3;pointer-events:none;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.dl{left:18px}
.dr{right:18px;text-align:right}
.dl em{
  font-style:normal;display:block;margin-top:4px;
  color:var(--ink);letter-spacing:.05em;font-size:10px;
}

/* ── visor: zoom y escala, arriba a la derecha del dibujo ── */
.visor{
  position:absolute;top:12px;right:18px;z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;
}
.visor .dr{position:static;text-align:right}
.zoom{display:flex;align-items:center;gap:7px}
.zoom>span{
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.zoom input[type=range]{width:96px;margin:0}
.zoom b{
  font-weight:400;font-size:9.5px;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:26px;text-align:right;
}
.zoom button{
  width:17px;height:17px;padding:0;line-height:1;
  border:1px solid var(--hair);background:var(--paper);color:var(--ink-2);
  font-size:11px;cursor:pointer;
}
.zoom button:hover{border-color:var(--ink);color:var(--ink)}

.pista{
  position:absolute;left:18px;top:58px;z-index:3;pointer-events:none;
  font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  max-width:230px;line-height:1.5;
}
.pista.abajo{top:auto;bottom:12px}
#plan{cursor:crosshair}
#plan.arrastrando{cursor:grabbing}
.rosa{position:absolute;right:18px;bottom:16px;width:44px;height:44px;z-index:3;pointer-events:none}

/* ───────────────────────── DATOS ───────────────────────── */
dl{display:grid;grid-template-columns:1fr auto;gap:0;font-variant-numeric:tabular-nums}
dt{
  font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  padding:5px 0;border-bottom:1px solid var(--hair-2);
}
dd{
  font-size:10.5px;text-align:right;padding:5px 0;
  border-bottom:1px solid var(--hair-2);white-space:nowrap;
}
dd em{font-style:normal;color:var(--ink-3);font-size:9px;margin-left:2px}
dt.hi,dd.hi{border-bottom-color:var(--ink)}

.leg{list-style:none;display:grid;gap:7px}
.leg li{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}
.leg i{width:17px;height:12px;flex:0 0 auto;border:1px solid var(--ink);display:block}

.note{font-size:10px;line-height:1.7;color:var(--ink-2)}
.note b{font-weight:400;color:var(--ink);border-bottom:1px solid var(--hair)}

/* ── plegar los paneles ──
   En un visor angosto el dibujo es lo que importa: los dos paneles se
   pliegan a una pestaña de 22 px y el área de dibujo se queda con todo.
   Nada se esconde por tamaño de ventana sin dejar cómo traerlo de vuelta. */
.plegar{
  position:absolute;top:50%;transform:translateY(-50%);z-index:12;
  width:15px;height:60px;padding:0;
  border:1px solid var(--hair);background:var(--paper);
  color:var(--ink-3);cursor:pointer;font-size:10px;line-height:1;
}
.plegar:hover{color:var(--ink);border-color:var(--ink-3)}
#plegarIzq{left:0;border-left:none}
#plegarDer{right:0;border-right:none}
.plegar:hover{width:19px}

main{position:relative}

/* Cada área en su columna, siempre. Si se ocultan con display:none sin
   fijar la columna, la lámina cae en la pista de 0 px y el dibujo se
   queda sin ancho — pasó. */
.panel{grid-column:1}
.lamina{grid-column:2}
.datos{grid-column:3}

body.sinPanel .panel,
body.sinDatos .datos{display:none}

main{grid-template-columns:var(--panel-w) minmax(0,1fr) var(--datos-w)}
body.sinPanel main{grid-template-columns:0 minmax(0,1fr) var(--datos-w)}
body.sinDatos main{grid-template-columns:var(--panel-w) minmax(0,1fr) 0}
body.sinPanel.sinDatos main{grid-template-columns:0 minmax(0,1fr) 0}

/* El ancho de los paneles cede antes que el dibujo */
@media (max-width:1500px){ :root{ --panel-w:268px; --datos-w:214px } }
@media (max-width:1320px){ :root{ --panel-w:246px; --datos-w:196px; font-size:12px } }
@media (max-width:1180px){
  :root{ --panel-w:238px; --datos-w:190px }
  .pestanas button{font-size:8px;letter-spacing:.02em;padding:7px 2px}
  .corner{padding:9px 16px;font-size:8.5px}
  .panel,.datos{--pp:14px;padding:16px var(--pp) 48px}
}
/* Debajo de esto el dibujo no entra con los dos paneles: se pliega el
   izquierdo, que es el que más ocupa. La pestaña lo devuelve. */
/* Debajo de 1000 px no entran el dibujo y los dos paneles: se pliega el
   de control, que es el que más ocupa. Debajo de 760 se pliega también el
   de datos y el dibujo se queda con todo. Siempre se pueden traer de
   vuelta con las pestañas o con P y D — nada se esconde sin salida. */
@media (max-width:1000px){
  main{grid-template-columns:0 minmax(0,1fr) var(--datos-w)}
  .panel{display:none}
  body.verPanel main{grid-template-columns:var(--panel-w) minmax(0,1fr) 0}
  body.verPanel .panel{display:block}
  body.verPanel .datos{display:none}
  body.sinDatos main{grid-template-columns:0 minmax(0,1fr) 0}
  body.verPanel.sinDatos main{grid-template-columns:var(--panel-w) minmax(0,1fr) 0}
}
@media (max-width:760px){
  main{grid-template-columns:0 minmax(0,1fr) 0}
  .datos{display:none}
  body.verDatos main{grid-template-columns:0 minmax(0,1fr) var(--datos-w)}
  body.verDatos .datos{display:block}
  body.verPanel.verDatos .datos{display:none}
}

/* ── retiros: celdas a rellenar, como en un código ── */
.retiros{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:11px}
.retiros label{
  display:flex;flex-direction:column;gap:4px;margin:0;
  font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
}
.retiros input{
  width:100%;padding:5px 6px;border:1px solid var(--hair);background:var(--paper);
  font:400 11px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.retiros input:focus{outline:none;border-color:var(--ink)}
.retiros input::-webkit-outer-spin-button,
.retiros input::-webkit-inner-spin-button{opacity:.35}

/* ── pestañas del panel derecho ──
   Tres pestañas en tres columnas: con dos, "Simulación" caía cortada
   (arreglo de Rodrigo). */
.pestanas{display:grid;grid-template-columns:repeat(2,1fr);margin:-6px 0 12px}
.pestanas button{
  padding:8px 4px;border:0;border-bottom:1px solid var(--hair);background:var(--paper);
  font:400 9px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;
}
.pestanas button[aria-pressed=true]{color:var(--ink);border-bottom:1px solid var(--ink)}

/* ── panel de edición ── */
#herramientas .lin-label{margin:18px 0 8px}
#herramientas .seg.col button{flex:1 1 46%;font-size:8.5px;padding:6px 3px}
#herramientas button.chico{
  width:100%;margin-top:9px;padding:6px;border:1px solid var(--hair);
  background:var(--paper);color:var(--ink-3);cursor:pointer;
  font:400 8.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
}
#herramientas button.chico:hover{border-color:var(--ink);color:var(--ink)}

.tramas{display:grid;grid-template-columns:repeat(4,1fr);gap:-1px}
.tramas button{
  border:1px solid var(--hair);margin:0 -1px -1px 0;background:var(--paper);
  padding:3px;cursor:pointer;line-height:0;
}
.tramas button canvas{width:100%;height:20px;display:block}
.tramas button[aria-pressed=true]{border-color:var(--ink);position:relative;z-index:2;
  box-shadow:inset 0 0 0 1px var(--ink)}

.catalogo{display:grid;grid-template-columns:1fr 1fr;gap:-1px}
.catalogo button{
  display:flex;align-items:center;gap:6px;padding:5px 6px;
  border:1px solid var(--hair);margin:0 -1px -1px 0;
  background:var(--paper);cursor:pointer;text-align:left;
}
.catalogo button canvas{width:46px;height:34px;flex:0 0 auto}
.catalogo button span{
  font:400 8px/1.3 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);
}
.catalogo button span em{
  display:block;font-style:normal;color:var(--ink-3);font-size:7.5px;
  letter-spacing:0;margin-top:2px;
}
.catalogo button:hover{background:var(--hair-2);position:relative;z-index:1}
.catalogo button[aria-pressed=true]{border-color:var(--ink);position:relative;z-index:2;
  box-shadow:inset 0 0 0 1px var(--ink)}
.catalogo button[aria-pressed=true] span{color:var(--ink)}

#plan[data-herr=colocar]{cursor:copy}
#plan[data-herr=mover]{cursor:move}
#plan[data-herr=pintar]{cursor:cell}
#plan[data-herr=borrar]{cursor:not-allowed}
#plan[data-herr=cubvano]{cursor:crosshair}
#plan[data-herr=pielmuro]{cursor:crosshair}

/* ── simulación ──
   Cuatro pestañas en dos filas: en una sola, "Herramientas" no entra. */
.pestanas{grid-template-columns:repeat(2,1fr)}
.pestanas button{font-size:8.5px;letter-spacing:.08em}

.simlista{margin:16px 0 4px;display:grid;gap:-1px}
.simlista div{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:6px 0;border-bottom:1px solid var(--hair-2);
  font-size:9px;letter-spacing:.03em;
}
.simlista div b{font-weight:400;color:var(--ink);text-transform:uppercase;letter-spacing:.06em}
.simlista div span{color:var(--ink-3);text-align:right}
.simlista div.mal b,.simlista div.fuera b{border-bottom:1px solid var(--ink)}
.simlista div.mal span,.simlista div.fuera span{color:var(--ink)}
.simlista .vacio{color:var(--ink-3);border:0}
#simCifras{margin-top:14px}
#simulacion button.chico{
  width:100%;margin-top:12px;padding:7px;border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);cursor:pointer;
  font:400 8.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
}
#simulacion button.chico:hover{background:var(--ink);color:var(--paper)}

/* ── examen por reglas ── */
.simacciones{display:grid;gap:6px;margin-bottom:16px}
#simulacion button.chico{
  width:100%;padding:7px;border:1px solid var(--hair);
  background:var(--paper);color:var(--ink-2);cursor:pointer;
  font:400 8.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
}
#simulacion button.chico:hover{border-color:var(--ink);color:var(--ink)}
#simulacion button.primaria{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#simulacion button.primaria:hover{background:var(--paper);color:var(--ink)}

#simPuntaje{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
#simPuntaje .pt{
  font-size:34px;font-weight:400;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;
}
#simPuntaje .pt.vacio{color:var(--ink-3)}
#simPuntaje span{font-size:9px;color:var(--ink-3);letter-spacing:.04em;line-height:1.4}

.simreglas{margin-top:16px;display:grid}
.simreglas div{
  display:grid;grid-template-columns:20px 1fr;gap:2px 7px;
  padding:7px 0;border-bottom:1px solid var(--hair-2);
  font-size:9px;letter-spacing:.03em;
}
.simreglas div b{font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.simreglas div span{color:var(--ink-2)}
.simreglas div em{grid-column:2;font-style:normal;color:var(--ink-3);font-size:8px;line-height:1.45}
.simreglas div.ok b{color:var(--ink)}
.simreglas div.falla b{color:var(--ink);border-bottom:1px solid var(--ink)}
.simreglas div.falla span{color:var(--ink)}
.simreglas div.falla em{color:var(--ink-2)}
.simreglas div.na{opacity:.42}

/* ── tu puntaje: la otra mitad del bucle ── */
.tupuntaje{
  margin-top:28px;padding-top:18px;border-top:1px solid var(--ink);
}
.tupuntaje h2{
  font-size:9.5px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;
  padding-bottom:6px;margin-bottom:11px;border-bottom:1px solid var(--hair);
}
.tupuntaje h2 em{
  font-style:normal;color:var(--ink-3);letter-spacing:.08em;margin-left:6px;font-size:9px;
}
.tupuntaje .note{margin-bottom:15px}
.tupuntaje label b{font-size:16px}
.tpreglas div{cursor:pointer}
.tpreglas div:hover{background:var(--hair-2)}
.tpreglas div.ok em{color:var(--ink-3)}
.tupuntaje textarea{
  width:100%;margin-bottom:9px;padding:8px;
  border:1px solid var(--hair);background:var(--paper);color:var(--ink);
  font:400 10px/1.55 "Helvetica Neue",Helvetica,Arial,sans-serif;
  resize:vertical;
}
.tupuntaje textarea:focus{outline:none;border-color:var(--ink)}
.tupuntaje textarea::placeholder{color:var(--ink-3)}
#tpAviso{margin-top:9px}

/* ── serie de evaluación ── */
.serie{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--ink)}
.serie h2{
  font-size:9.5px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;
  padding-bottom:6px;margin-bottom:11px;border-bottom:1px solid var(--hair);
}
.serie .note{margin-bottom:12px}
.serie select{
  width:100%;margin-bottom:7px;padding:7px 6px;
  border:1px solid var(--hair);background:var(--paper);color:var(--ink);
  font:400 9px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
}
.serie select:focus{outline:none;border-color:var(--ink)}

.serieprog{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:9px;
  font-size:9px;letter-spacing:.05em;color:var(--ink-3);
}
.serieprog b{font-size:19px;font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.serieprog span{color:var(--ink);text-transform:uppercase;letter-spacing:.09em}
.serieprog em{font-style:normal;margin-left:auto}

.seriebarra{display:flex;gap:2px;margin-bottom:11px}
.seriebarra i{
  flex:1 1 0;height:4px;background:var(--hair);display:block;
}
.seriebarra i.ok{background:var(--ink-3)}
.seriebarra i.hoy{background:var(--ink)}

.serienav{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:7px}
.serie button.chico{
  width:100%;padding:7px 4px;border:1px solid var(--hair);
  background:var(--paper);color:var(--ink-2);cursor:pointer;
  font:400 8.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;
}
.serie button.chico:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.serie button.primaria{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.serie button.primaria:hover:not(:disabled){background:var(--paper);color:var(--ink)}
.serie button:disabled{opacity:.3;cursor:default}
#serieAviso{margin-top:4px}

/* ── corrección sobre el dibujo ── */
.tupuntaje #tpHerr{margin-bottom:7px}
.tupuntaje #tpHerr button{font-size:8.5px;padding:6px 2px}
#tpAyuda{margin:0 0 11px}
#tpDiff{margin-bottom:9px}

.contraste{
  margin-top:9px;padding:10px;border:1px solid var(--hair);
  font-size:9px;line-height:1.6;color:var(--ink-2);letter-spacing:.02em;
}
.contraste span{
  font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;margin-right:2px;
}
.contraste em{display:block;margin-top:7px;font-style:normal}
.contraste b{font-weight:400;color:var(--ink);border-bottom:1px solid var(--hair)}
.contraste.malo{border-color:var(--ink);border-left-width:3px}
.contraste.igual{border-style:dashed}

#tpRestaurar{
  width:100%;padding:7px;margin-bottom:16px;
  border:1px solid var(--hair);background:var(--paper);color:var(--ink-2);
  cursor:pointer;font:400 8.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;
}
#tpRestaurar:hover{border-color:var(--ink);color:var(--ink)}

.tpavanzado{margin-bottom:14px;border-top:1px solid var(--hair-2);padding-top:10px}
.tpavanzado summary{
  cursor:pointer;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);list-style:none;
}
.tpavanzado summary::-webkit-details-marker{display:none}
.tpavanzado summary::before{content:'+ ';color:var(--ink-3)}
.tpavanzado[open] summary::before{content:'– '}
.tpavanzado summary:hover{color:var(--ink)}
.tpavanzado summary em{font-style:normal;color:var(--ink-3);margin-left:5px;text-transform:none;letter-spacing:0}

/* ── categorías plegables del catálogo ── */
details.fam{border-bottom:1px solid var(--hair-2)}
details.fam summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 0 8px;
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
}
details.fam summary::-webkit-details-marker{display:none}
details.fam summary::before{
  content:'+';margin-right:7px;color:var(--ink-3);
  font-size:10px;width:7px;flex:0 0 auto;
}
details.fam[open] summary::before{content:'–'}
details.fam summary:hover{color:var(--ink)}
details.fam summary em{
  font-style:normal;color:var(--ink-3);font-size:8.5px;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
details.fam .catalogo{margin-bottom:11px}

/* ── barra de verbos con su tecla ── */
.seg button em{
  font-style:normal;opacity:.45;margin-left:4px;font-size:8px;letter-spacing:0;
}
.seg button[aria-pressed=true] em{opacity:.7}

/* ── caja de texto de un símbolo ── */
#cajaTexto:not(:empty){margin-bottom:14px}
#cajaTexto input{
  width:100%;padding:7px 8px;
  border:1px solid var(--hair);background:var(--paper);color:var(--ink);
  font:400 12px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
#cajaTexto input:focus{outline:none;border-color:var(--ink)}

/* ── acciones de vaciar ── */
.vaciar{display:grid;gap:5px;margin-top:18px;padding-top:14px;border-top:1px solid var(--hair)}
.vaciar button.chico{
  width:100%;padding:7px;border:1px solid var(--hair);
  background:var(--paper);color:var(--ink-3);cursor:pointer;
  font:400 8.5px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;
}
.vaciar button.chico:hover{border-color:var(--ink);color:var(--ink)}

/* La barra de verbos son cuatro botones en un panel angosto: la etiqueta
   y su tecla tienen que entrar sin cortarse. */
.seg.verbos button{padding:9px 3px;letter-spacing:.06em}
#tpHerr > button{letter-spacing:.02em;font-size:8.5px;padding:8px 1px}
.seg.verbos button em,
#tpHerr > button em{margin-left:4px;font-size:7.5px}
/* la ayuda de la herramienta ya la dice la pista sobre la planta */
#ayudaHerr{display:none}
.seg.inerte{opacity:.42;pointer-events:none}
.seg button:disabled{opacity:.3;cursor:default;pointer-events:none}

/* ── la ventana del manual (v0.37) ──
   Lo teórico va aparte, no en el panel: acá se lee, allá se proyecta.
   Índice a la izquierda, cuerpo a la derecha, y nada más que aprender. */
#btnManual{
  height:18px;padding:0 7px;line-height:1;border:1px solid var(--hair);
  background:var(--paper);color:var(--ink-2);cursor:pointer;
  font:400 8.5px/17px "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
}
#btnManual:hover{border-color:var(--ink);color:var(--ink)}

.manual{
  position:fixed;inset:0;z-index:80;background:rgba(17,17,17,.34);
  display:flex;align-items:center;justify-content:center;padding:34px;
}
/* `display:flex` le gana al `hidden` del navegador: sin esta línea la
   ventana se cerraba en el estado y seguía en pantalla. Ya pasó — y la
   prueba no lo vio porque medía la propiedad, no lo que se ve. */
.manual[hidden]{display:none}
.manual-hoja{
  background:var(--paper);border:1px solid var(--ink);
  width:min(980px,100%);height:100%;max-height:900px;
  display:grid;grid-template-columns:186px 1fr;grid-template-rows:auto 1fr;
}
.manual-hoja header{
  grid-column:1 / -1;display:flex;align-items:baseline;gap:14px;
  padding:13px 18px;border-bottom:1px solid var(--ink);
}
.manual-hoja .mt{font-size:10px;letter-spacing:.18em;color:var(--ink)}
.manual-hoja .ms{font-size:9px;letter-spacing:.06em;color:var(--ink-3);flex:1 1 auto}
.mcerrar{
  border:1px solid var(--hair);background:var(--paper);color:var(--ink-2);
  width:20px;height:20px;line-height:1;font-size:11px;cursor:pointer;flex:0 0 auto;
}
.mcerrar:hover{border-color:var(--ink);color:var(--ink)}

.manual-indice{
  border-right:1px solid var(--hair);padding:14px 0;overflow-y:auto;
  background:#f5f4f0;
}
.manual-indice button{
  display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:6px 16px;cursor:pointer;color:var(--ink-2);
  font:400 9px/1.35 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.07em;text-transform:uppercase;
}
.manual-indice button:hover{color:var(--ink);background:var(--hair-2)}

.manual-cuerpo{overflow-y:auto;padding:22px 30px 60px;position:relative}
.manual-cuerpo section{max-width:620px;margin-bottom:34px}
.manual-cuerpo h3{
  font:400 11px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  padding-bottom:7px;border-bottom:1px solid var(--hair);margin-bottom:13px;
}
.manual-cuerpo p,.manual-cuerpo li{
  font-size:11px;line-height:1.75;color:var(--ink-2);letter-spacing:.01em;margin-bottom:9px;
}
.manual-cuerpo b{font-weight:400;color:var(--ink)}
.manual-cuerpo i{color:var(--ink-2)}
.manual-cuerpo ul,.manual-cuerpo ol{margin:0 0 9px 16px}
.manual-cuerpo li{margin-bottom:5px}
.manual-cuerpo .nota{
  border-left:1px solid var(--ink);padding-left:11px;color:var(--ink-3);
  font-size:10px;margin-top:12px;
}
.manual-cuerpo table.teclas{border-collapse:collapse;margin:4px 0 10px}
.manual-cuerpo table.teclas td{
  font-size:10px;line-height:1.7;color:var(--ink-2);
  padding:2px 14px 2px 0;vertical-align:top;
}
.manual-cuerpo table.teclas td:first-child{
  color:var(--ink);white-space:nowrap;letter-spacing:.08em;text-transform:uppercase;
  font-size:9px;padding-top:4px;width:78px;
}
@media (max-width:900px){
  .manual-hoja{grid-template-columns:1fr}
  .manual-indice{display:none}
}

/* el pie legal: el aviso de autoría, y la puerta a la licencia */
#pieLegal{display:inline-flex;align-items:center;gap:6px}
#btnLegal{
  border:0;background:none;padding:0;cursor:pointer;color:var(--ink-2);
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  border-bottom:1px solid var(--hair);
}
#btnLegal:hover{color:var(--ink);border-color:var(--ink)}

/* ───────────────────────── MODO DEMO ─────────────────────────
   El candado se ve antes de tocar, no después: un botón que parece
   andar y no anda se lee como que está roto. */
.exp button.trabado{ color:var(--mute); border-style:dashed; }
.exp button.trabado::after{ content:' ·'; }
.exp button.trabado::before{ content:'✦ '; font-size:.85em; opacity:.6; }

.demoCartel{
  position:fixed; inset:0; z-index:200;
  background:rgba(20,20,20,.42);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.demoCaja{
  position:relative; width:min(460px,100%); max-height:88vh; overflow-y:auto;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--ink); padding:24px 26px 20px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
}
.demoCaja h2{
  margin:0 0 14px; font-size:13px; letter-spacing:.11em; text-transform:uppercase;
  padding-bottom:9px; border-bottom:1.5px solid var(--ink);
}
.demoCaja p{ margin:0 0 11px; font-size:13px; line-height:1.55; }
.demoX{
  position:absolute; top:12px; right:12px; width:30px; height:30px;
  border:1px solid var(--hair); background:var(--paper); color:var(--ink);
  font-size:14px; line-height:1; cursor:pointer;
}
.demoLista{ margin:16px 0 4px; padding-top:14px; border-top:1px solid var(--hair); }
.demoLista label{ display:block; font-size:11px; letter-spacing:.04em; color:var(--mute); margin-bottom:7px; }
.demoFila{ display:flex; gap:7px; }
.demoFila input{
  flex:1; min-width:0; padding:9px 10px; font:inherit; font-size:13px;
  border:1px solid var(--hair); background:var(--paper); color:var(--ink);
}
.demoFila input[aria-invalid=true]{ border-color:#b02222; }
.demoFila button{
  padding:9px 14px; font:inherit; font-size:10px; letter-spacing:.09em;
  border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer;
}
.demoNota{ margin:8px 0 0 !important; font-size:10px !important; color:var(--mute); }
.demoOk{ margin:0 !important; font-size:12px !important; }
.demoPie{
  margin:16px 0 0 !important; padding-top:11px; border-top:1px solid var(--hair);
  font-size:9px !important; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
}