/* PARADISE — INTERFAZ
   Menús, ventanas flotantes, cabecera, niebla y agua.
   ESTE es el fichero del aspecto: lo que se toca para vestir la app.
   Salió del <style> de app_trabajo.html el 27/08/2026. NO se ha cambiado ni
   una regla: es el mismo texto, en el mismo orden. */

  :root{
    /* el fondo de GPT (su --ink): la tinta azulada de la casa. El espectador
       sigue en NEGRO PURO — lo pone en linea al entrar (Javier, 29-ago-2026) */
    --bg:#09121b; --panel:#2a2c33; --panel2:#33363f; --tx:#e8e8ea; --tx2:#a5a8b0;
    --acc:#ffb347; --sel:#ff3f00;
    /* LA LEY DEL ASPECTO (Javier, 27-ago-2026: «una misma ley siempre para
       poder cambiar el aspecto general a la vez»). TOCAR ESTAS SEIS LINEAS
       CAMBIA TODAS LAS VENTANAS DE LA APP. Su gemelo en programa es el objeto
       LEY de app/motor/01-cimientos.js, que viste los recuadros de dentro. */
    /* LOS COLORES DE MATERIA (28-ago-2026): los publica leyPublica() desde
       LEY_PALETA al arrancar — estos valores son SOLO el arranque. La fuente
       de verdad sigue siendo una: LEY_PALETA en 01-cimientos.js. */
    --mat-fuego:#b0703f; --mat-tierra:#7fb069; --mat-agua:#3fd8e0;
    --mat-anillo:#c9a227; --mat-cielo:#9fc3e8; --mat-mar:#8878d8;
    --mat-icono:#e8b34a; --mat-geo:#5fb85f; --mat-render:#d08bd0;
    --mat-rotulos:#7fd694;
    --marca:#e8a33d;           /* lo ELEGIDO/ACTIVO en los mandos de trabajo */
    --ley-letra:12px;          /* LA letra base de toda ventana: la más pequeña
                                  que había (Javier, 29-ago-2026: «nos quedamos
                                  con el más pequeño para todos») */
    --pozo:#10161d;            /* cajas hundidas y fondos de miniaturas */
    --ley-radio:10px;          /* la esquina de la ventana */
    --ley-radio2:6px;          /*   y la del recuadro de dentro */
    --ley-borde:#2a3440;       /* el marco, cuando no lleva color propio */
    --ley-barra:#1b232d;       /* la barra del titulo */
    --ley-sombra:0 22px 60px #0007, inset 0 0 0 3px #c790430d;
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html,body{height:100%; overflow:hidden; background:var(--bg)}
  /* EL TALLER NUNCA ES NEGRO (Javier, 29-ago-2026: «solo es negro el fondo
     en modo espectador»): resplandor radial indigo y trama tejida, de la
     maqueta de GPT. Espectador (#000) y pantallazo (liso) lo pisan en linea. */
  body{background:
      repeating-linear-gradient(0deg, #ffffff12 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, #00000030 0 1px, transparent 1px 4px),
      radial-gradient(circle at 50% 35%, #24364d 0, #101d2d 42%, #080f16 100%);
    background-attachment:fixed; background-color:var(--bg);
    color:var(--tx); font:13px/1.45 'Segoe UI',Arial,sans-serif; display:flex; flex-direction:column}
  /* UNA SOLA TIPOGRAFIA (Javier, 29-ago-2026: «la tipografia de CAPAS no es
     la misma que la de DISENO»): los controles de formulario NO heredan la
     fuente por defecto y salian en Arial — filas-boton de DISENO, barra de
     MANDOS, desplegables — mientras el texto normal iba en Segoe UI. Todos
     los controles heredan la letra de la casa. El textarea del modal sigue
     en Consolas: su regla es mas fuerte que esta. */
  button, select, input, textarea, optgroup, option{font-family:inherit}
  /* la banda de los menus, NEGRA como el fondo (Javier, 26-ago): en gris
     cortaba la pantalla en dos y le robaba sitio a la obra. Los botones van
     en --panel2, asi que siguen destacando sobre el negro. */
  header{display:flex; align-items:center; flex-wrap:wrap; gap:8px; row-gap:4px; padding:6px 10px; background:var(--bg); border-bottom:1px solid #141414}
  /* LA CABECERA VIEJA NO SE VE NUNCA. Esta escrita en el HTML, asi que el
     navegador la pinta en cuanto lee la pagina; la escondia el programa, once
     motores mas tarde, y entre una cosa y otra se veia un instante (Javier,
     27-ago-2026: «al abrir la app aparece menu de botones antiguo y luego se
     cierra y aparece el nuevo»). Desde aqui se esconde ANTES de pintarse.
     Sus botones siguen vivos: .click() funciona igual en un elemento oculto, y
     es asi como los menus nuevos los pulsan por debajo. Si la barra nueva no
     llegara a montarse, el programa la vuelve a ensenar. */
  body header{display:none}
  body.sinBarraNueva header{display:flex}
  header h1{font-size:15px; letter-spacing:.5px; color:var(--acc); white-space:nowrap}
  header .sub{color:var(--tx2); font-size:11px}
  header input[type=text]{background:var(--panel2); border:1px solid #444; color:var(--tx); padding:5px 8px; border-radius:5px; width:140px}
  /* RESPONSIVE vertical/estrecho: cabecera compacta y menús laterales en modo capa */
  @media (max-width: 980px){
    header{gap:5px; row-gap:3px; padding:4px 6px}
    header button, .btn{padding:4px 7px; font-size:11px}
    header input[type=text]{width:104px}
    #sidebar{position:fixed; left:0; top:0; bottom:0; z-index:55; width:min(78vw,300px); box-shadow:4px 0 18px #000c}
    #ficha{position:fixed; right:0; top:0; bottom:0; z-index:55; width:min(84vw,330px); box-shadow:-4px 0 18px #000c}
    #piPanel, #paiPanel{width:min(86vw,250px); right:6px}
  }
  header button, .btn{background:var(--panel2); border:1px solid #555; color:var(--tx); padding:5px 10px; border-radius:5px; cursor:pointer; font-size:12px}
  header button:hover, .btn:hover{border-color:var(--acc); color:var(--acc)}
  #tabs{display:flex; gap:4px; margin-left:auto}
  #tabs button.on{background:var(--acc); color:#222; border-color:var(--acc); font-weight:600}
  main{flex:1; display:flex; min-height:0}
  /* CAPAS y OBJETOS son ventanas como las demas: la caja no hace scroll (lo
     hace su .ventCuerpo) y el display va AQUI, no en el elemento, para que
     `body.noM1 #sidebar{display:none}` pueda con el y la ✕ cierre de verdad
     (Javier, 27-ago-2026: «si le damos a la ✕ no cierra el menu CAPAS») */
  #sidebar{width:210px; background:var(--panel); padding:0; overflow:hidden; border-right:1px solid #000; flex-shrink:0;
    display:flex; flex-direction:column}
  #sidebar h3{font-size:11px; text-transform:uppercase; color:var(--tx2); margin:10px 0 5px}
  .lay{display:flex; align-items:center; gap:7px; padding:2.5px 2px; cursor:pointer; border-radius:4px; user-select:none}
  .lay:hover{background:var(--panel2)}
  .lay .sw{width:14px; height:14px; border-radius:3px; border:1px solid #0006; flex-shrink:0}
  .lay .n{flex:1; font-size:12px}
  .lay .c{color:var(--tx2); font-size:11px}
  .lay.off{opacity:.35}
  #mapwrap{flex:1; position:relative; min-width:0; background:#000}
  #map{width:100%; height:100%; display:block; cursor:grab}
  #map.panning{cursor:grabbing}
  /* LAS HOJAS DE LA ALFOMBRA (camino b, 5-sep-2026): las <svg> apiladas sobre
     #map visten igual que él; la raíz deja pasar el ratón por donde no hay
     nada pintado y sus hijos lo reciben, como hoy dentro de map */
  svg.hoja{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:hidden; cursor:grab; pointer-events:none}
  /* :not([pointer-events]) (5-sep-2026, revisión de las hojas): un atributo de
     presentación pierde contra cualquier regla CSS; sin esto, los aros de los
     focos (04) y el rectángulo del zoom ventana (07), colgados de una hoja con
     pointer-events="none", atrapaban el ratón */
  svg.hoja > *:not([pointer-events]){pointer-events:visiblePainted}
  svg.hoja.panning{cursor:grabbing}
  /* con la ventana Plazas abierta, los elementos colocados se agarran */
  body.plzEdita #gPaseos image[data-plz]{pointer-events:auto; cursor:grab}
  #tooltip{position:absolute; pointer-events:none; background:#000d; color:#fff; padding:4px 8px; border-radius:4px; font-size:12px; display:none; z-index:5; white-space:nowrap}
  #ficha{width:295px; background:var(--panel); border-left:1px solid #000; overflow:hidden; padding:0; flex-shrink:0; display:flex; flex-direction:column}
  #ficha h2{font-size:16px; color:var(--acc); margin-bottom:2px}
  #ficha .tag{display:inline-block; padding:1px 7px; border-radius:8px; font-size:11px; color:#222; font-weight:600; margin:2px 3px 6px 0}
  #ficha table{width:100%; border-collapse:collapse; margin:6px 0}
  #ficha td{padding:2px 4px; font-size:12px; border-bottom:1px solid #ffffff12}
  #ficha td:first-child{color:var(--tx2); width:45%}
  #ficha h4{font-size:11px; text-transform:uppercase; color:var(--tx2); margin:12px 0 4px; border-bottom:1px solid #ffffff22; padding-bottom:2px}
  .vec{display:flex; justify-content:space-between; padding:2px 4px; border-radius:4px; cursor:pointer; font-size:12px}
  .vec:hover{background:var(--panel2); color:var(--acc)}
  .vec .l{color:var(--tx2); font-size:11px}
  .chips{display:flex; flex-wrap:wrap; gap:3px; margin:4px 0}
  .chip{background:var(--panel2); border:1px solid #555; border-radius:9px; padding:1px 8px; font-size:11px; cursor:pointer}
  .chip:hover,.chip.on{border-color:var(--acc); color:var(--acc)}
  .dl{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0}
  #ficha .empty{color:var(--tx2); font-style:italic; padding:30px 10px; text-align:center}
  #catalogo{flex:1; overflow-y:auto; padding:16px; display:none}
  #catalogo .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:6px}
  /* EL CATALOGO, DE UN VISTAZO (Javier, 30-ago-2026: «las piezas mas pequenas
     para poder ver todo de un vistazo»). Las fichas encogen SOLO aqui: la clase
     .card la usan tambien otros sitios y alli sigue como estaba. */
  #catalogo .card{padding:5px 4px; border-radius:6px}
  #catalogo .card svg{height:46px}
  #catalogo .card .t{font-size:10px; margin-top:3px; line-height:1.15;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  #catalogo .card .d{font-size:9px; line-height:1.2}
  /* el titulo de grupo cruza la reja entera */
  #catalogo .catGrupo{grid-column:1 / -1; margin:12px 0 0; opacity:.8}
  #catalogo .catGrupo:first-child{margin-top:0}
  .card{background:var(--panel); border:1px solid #444; border-radius:8px; padding:10px; cursor:pointer; text-align:center}
  .card:hover{border-color:var(--acc)}
  .card svg{width:100%; height:110px}
  .card .t{font-weight:600; margin-top:5px}
  .card .d{color:var(--tx2); font-size:11px}
  #materiales{flex:1; overflow-y:auto; padding:16px; display:none}
  #materiales .chipsM{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px}
  #materiales .panelM{background:var(--panel); border:1px solid var(--ley-borde); border-radius:var(--ley-radio); padding:10px 12px; margin-bottom:12px}
  #materiales .panelM h3{color:var(--acc); font-size:12px; font-weight:600; letter-spacing:.02em; margin-bottom:7px}
  /* ESTRUCTURA ordenada (Javier, 29-ago-2026: «es un caos»): buscador de la
     casa, chips discretos y botones sin gritar */
  #vent_materiales #buscar{background:var(--pozo); color:var(--tx);
    border:1px solid var(--ley-borde); border-radius:var(--ley-radio2);
    padding:4px 9px; font-size:var(--ley-letra)}
  #vent_materiales #buscar::placeholder{color:var(--tx2); opacity:.75}
  #materiales .chipsM .chip{padding:2px 9px; background:var(--pozo)}
  #materiales .dl .btn{padding:3px 9px; font-size:11px}
  #materiales .note{font-size:10.5px}
  #materiales .svgwrap{background:#fff; border-radius:6px; overflow:hidden}
  select{background:var(--panel2); color:var(--tx); border:1px solid #555; border-radius:4px; padding:3px}
  #escala{width:70px; background:var(--panel2); border:1px solid #555; color:var(--tx); border-radius:4px; padding:3px 5px}
  .note{font-size:11px; color:var(--tx2); margin-top:4px}
  #modal{position:fixed; inset:0; background:#000a; display:none; align-items:center; justify-content:center; z-index:20}
  #modal .box{background:var(--panel); border:1px solid var(--ley-borde); border-radius:var(--ley-radio); box-shadow:var(--ley-sombra); width:min(780px,94vw); max-height:90vh; display:flex; flex-direction:column; padding:14px}
  #modal h3{color:var(--acc); font-size:14px; margin-bottom:8px}
  #modal textarea{flex:1; min-height:360px; background:var(--panel2); color:var(--tx); border:1px solid #555; border-radius:6px; padding:10px; font:12px/1.5 Consolas,monospace; white-space:pre-wrap; resize:vertical}
  #modal .row{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
  polygon.mod{stroke:#00000055; stroke-width:.5; cursor:pointer}
  polygon.mod:hover{stroke:#fff; stroke-width:1.2}
  polygon.mod.sel{stroke:var(--sel); stroke-width:2; filter:brightness(1.15)}
  polygon.mod.dim{opacity:.25}
  .lbl{pointer-events:none; fill:#00000099; font-family:Arial; text-anchor:middle}
  .port{fill:#ff3f00; stroke:none; pointer-events:none}
  .eje{stroke:#ffffff66; stroke-dasharray:6 5; stroke-width:.8; pointer-events:none}
  /* menús laterales ocultables */
  /* el margen negativo se comia el relleno de 10 px del panel; ese relleno se
     fue al cuerpo y el margen se quedo, sacando la barra —y su icono— fuera de
     la caja por la izquierda (Javier, 27-ago-2026: «el icono se corta») */
  .menuBarra{position:sticky; top:0; margin:0; z-index:3}
  body.noM1 #sidebar{display:none}
  body.noM2 #ficha{display:none}
  /* PAINT ICONS: paleta flotante */
  #piPanel{position:fixed; right:10px; top:52px; width:250px; resize:vertical; min-height:220px; max-height:calc(100vh - 64px);
    overflow:auto; background:var(--panel); padding:8px;
    z-index:70; display:none; font-size:var(--ley-letra)}
  body.piOn #piPanel{display:block}
  #piGrid{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:6px 0}
  #piGrid img{width:100%; aspect-ratio:1/1; object-fit:contain; background:#333;
    border-radius:4px; cursor:pointer; border:2px solid transparent}
  #piGrid img.on{border-color:var(--mat-icono)}
  .piSel{outline:2px dashed var(--sel)}
  body.piOn #map, body.piOn svg.hoja{cursor:crosshair}
  #piSelCtl{position:fixed; z-index:71; width:242px; background:var(--panel);
    padding:8px; display:none; font-size:var(--ley-letra);
    cursor:move}                       /* se arrastra desde cualquier hueco, como el resto */
  #piSelCtl input, #piSelCtl select, #piSelCtl label, #piSelCtl img{cursor:auto}
  #piSelCtl button{cursor:pointer}
  #piSelTitulo{letter-spacing:.06em; font-size:11px}
  #piBanner{display:none; position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:72;
    background:var(--mat-icono); color:#1c1c1c; font-weight:bold; font-size:13px; padding:6px 18px;
    border-radius:0 0 10px 10px; box-shadow:0 3px 10px #0009; pointer-events:none; white-space:nowrap}
  body.piOn #piBanner{display:block}
  body.piOn #btnPaint{background:var(--mat-icono); color:#1c1c1c}
  body.paiOn #btnPaisaje{background:var(--mat-tierra); color:#1c1c1c}
  body.espOn #btnEspana{background:#d4a017; color:#1c1c1c}
  /* rótulos que agrupan los botones de la cabecera por familias */
  header .grp{font-size:9px; text-transform:uppercase; letter-spacing:.1em; opacity:.4;
    border-left:1px solid #ffffff2e; padding-left:8px; margin-left:4px; align-self:center; flex:none}
  /* ventanas flotantes: se mueven por su barra y recuerdan sitio y tamaño */
  .vent{display:none; position:fixed; right:270px; top:60px; z-index:80; flex-direction:column;
    background:linear-gradient(145deg, #122735f5, #091721f0); border:1px solid var(--ley-borde); border-radius:var(--ley-radio); overflow:hidden;
    box-shadow:var(--ley-sombra); resize:both; min-width:210px; min-height:120px; max-height:92vh;
    backdrop-filter:blur(20px)}
  .ventBarra{display:flex; align-items:center; gap:6px; padding:6px 8px; background:var(--ley-barra);
    border-bottom:1px solid var(--ley-borde); font-size:var(--ley-letra); flex:none}
  .ventCuerpo{padding:8px; overflow:auto; flex:1; font-size:var(--ley-letra)}
  .vent h3{margin:8px 0 3px}
  /* ---- TODA VENTANA FLOTANTE, LA MISMA CAJA -------------------------------
     Javier, 27-ago-2026: «CAPAS tiene las esquinas cuadradas y GEOGRAFIA y
     DISENO redondas… necesitamos una ley para todas las ventanas flotantes,
     menus y submenus». CAPAS y OBJETOS no son .vent —son los dos paneles del
     principio, que ahora flotan— y se habian quedado con esquina cuadrada, sin
     sombra y con un borde negro de cuando estaban pegados al lado.
     Va DESPUES de #sidebar, #ficha y #piPanel a proposito: misma fuerza, gana
     el ultimo. Y no toca `display`, o `body.noM1 #sidebar{display:none}` no
     podria cerrar el panel. */
  .vent, #sidebar, #ficha, #piPanel, #paiPanel, #piSelCtl, #datosPanel{
    border:1px solid var(--ley-borde);
    border-radius:var(--ley-radio);
    box-shadow:var(--ley-sombra);
    background:linear-gradient(145deg, #122735f5, #091721f0);
    backdrop-filter:blur(20px)}
  /* LA FIRMA de la maqueta de GPT: dos rombos dorados engastados en el borde
     alto, a medio cuerpo (el overflow los recorta, como alli) */
  .vent::before, .vent::after, #sidebar::before, #sidebar::after,
  #ficha::before, #ficha::after, #piPanel::before, #piPanel::after,
  #paiPanel::before, #paiPanel::after, #piSelCtl::before, #piSelCtl::after,
  #datosPanel::before, #datosPanel::after{
    content:'◆'; position:absolute; top:-7px; z-index:5; pointer-events:none;
    color:var(--marca); font-size:10px; line-height:12px}
  .vent::before, #sidebar::before, #ficha::before, #piPanel::before,
  #paiPanel::before, #piSelCtl::before, #datosPanel::before{left:14px}
  .vent::after, #sidebar::after, #ficha::after, #piPanel::after,
  #paiPanel::after, #piSelCtl::after, #datosPanel::after{right:14px}
  /* MANDOS sin rombos: su pariente en la maqueta es el riel, que no los lleva */
  #vent_mandos::before, #vent_mandos::after{content:none}
  .vent > .ventBarra, #sidebar > .ventBarra, #ficha > .ventBarra{
    background:var(--ley-barra);
    border-radius:calc(var(--ley-radio) - 1px) calc(var(--ley-radio) - 1px) 0 0}
  /* ---- LAS TRES CLASES DE LA CASA (28-ago-2026) ---------------------------
     .btn.on     el boton ACTIVO — habia CINCO copias a mano del mismo ambar
                 (ecualizador, burbujas, editar tramos, visor de datos, espejos)
     .leyPop     la caja de cualquier ventanita emergente (elegidores, menus
                 de copia): la misma caja que una ventana de la ley
     .leyRotulo  el rotulo con raya que estaba copiado en cuatro motores */
  .btn.on{background:var(--marca); border-color:var(--marca); color:#1b232d; font-weight:600}
  .leyPop{background:var(--panel); border:1px solid var(--ley-borde);
    border-radius:var(--ley-radio); box-shadow:var(--ley-sombra)}
  .leyRotulo{font-weight:600; font-size:12px; margin:8px 0 3px;
    padding-bottom:3px; border-bottom:1px solid var(--ley-borde)}
  /* LOS QUE HEREDABAN LOS 13px DEL CUERPO —Objetos, Estructura, Catalogo y el
     modal— quedan clavados a la letra de la ley: todos los menus abren con la
     misma, la mas pequena (Javier, 29-ago-2026) */
  #ficha, #materiales, #catalogo, #modal .box{font-size:var(--ley-letra)}
  /* visor del motor de datos de incendios (otro servidor local) */
  /* la caja, el radio y la sombra los pone el grupo de la ley de arriba; aqui
     solo lo propio. El fondo pasa a --panel: era de otra epoca y esta ventana
     iba por libre (28-ago-2026). Su .btn.on ahora es el de la casa. */
  #datosPanel{display:none; position:fixed; right:10px; bottom:10px; width:min(52vw,760px); height:min(72vh,720px);
    z-index:70; overflow:hidden; flex-direction:column}
  body.datosOn #datosPanel{display:flex}
  #datosBarra{display:flex; align-items:center; gap:6px; padding:6px 8px; background:var(--ley-barra); border-bottom:1px solid var(--ley-borde); font-size:var(--ley-letra)}
  #datosFrame{flex:1; width:100%; border:0; background:var(--pozo)}
  #datosAviso{font-size:11px; color:var(--tx2); padding:4px 8px; background:var(--pozo)}
  .espLbl{fill:#fff; font-family:Arial; font-size:20px; font-weight:600; text-anchor:middle; paint-order:stroke; stroke:#000c; stroke-width:5px; pointer-events:none}
  .espLbl.espCiudad{font-size:16px; font-style:italic; font-weight:400; fill:#ffdca8; stroke-width:4px}
  #paiPanel{display:none; position:fixed; right:270px; top:52px; width:230px; max-height:calc(100vh - 64px);
    overflow:auto; background:var(--panel); padding:8px; z-index:60; font-size:var(--ley-letra)}
  body.paiOn #paiPanel{display:block}
  #paiGrid{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:6px 0}
  #paiGrid img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; cursor:pointer; border:2px solid transparent}
  #paiGrid img.sel{border-color:var(--mat-tierra)}
  /* onda de agua: entra suave, se mantiene y se apaga antes del borde; el trazo
     NO engorda al crecer (vector-effect) porque una onda real adelgaza */
  /* la burbuja sube, se ensancha un pelo y se deshace arriba */
  @keyframes burSube {0%{transform:translateY(0) scale(.7); opacity:0}
    12%{opacity:.85} 70%{opacity:.5}
    100%{transform:translateY(var(--burAlto,-90px)) scale(1.25); opacity:0}}
  @keyframes fuenteOnda {0%{transform:scale(.06); opacity:0} 9%{opacity:.85}
    45%{opacity:.45} 78%{opacity:.14} 100%{transform:scale(1); opacity:0}}
  @keyframes flujoY {from{transform:translateY(var(--fd-y,-60px))} to{transform:translateY(0)}}
  @keyframes flujoXneg {from{transform:translateX(var(--fd-xn,60px))} to{transform:translateX(0)}}
  @keyframes flujoXpos {from{transform:translateX(var(--fd-xp,-60px))} to{transform:translateX(0)}}
  @keyframes brisaX {from{transform:translateX(var(--bd,-240px))} to{transform:translateX(0)}}
  /* NEBULOSAS SUELTAS: cada nube va por su cuenta y entra/sale con fundido, así
     no hay patrón que se repita ni salto al reiniciar el ciclo */
  @keyframes nubeDeriva {from{transform:translateX(var(--x0,0px))} to{transform:translateX(var(--x1,300px))}}
  @keyframes nubeFade {0%{opacity:0} 18%{opacity:var(--op,.5)} 82%{opacity:var(--op,.5)} 100%{opacity:0}}
  /* NIEBLA de cielos (técnica del pen «CSS Fog Animation» de martek): dos mitades
     iguales que se desplazan un ancho completo = bucle sin costura; la opacidad
     late en otro periodo, así el conjunto no se repite a ojo */
  @keyframes nieblaX {from{transform:translateX(0)} to{transform:translateX(var(--nd,-1000px))}}
  @keyframes nieblaOp1 {0%{opacity:.10} 22%{opacity:.50} 40%{opacity:.28} 58%{opacity:.40} 80%{opacity:.16} 100%{opacity:.10}}
  @keyframes nieblaOp2 {0%{opacity:.50} 25%{opacity:.20} 50%{opacity:.10} 80%{opacity:.30} 100%{opacity:.50}}
  @keyframes nieblaOp3 {0%{opacity:.80} 27%{opacity:.20} 52%{opacity:.60} 68%{opacity:.30} 100%{opacity:.80}}

/* modo SOLO ALFOMBRA: se ocultan cabecera y paneles laterales */
  body.solo header, body.solo #sidebar, body.solo #ficha{display:none}
  body.solo #vent_mandos{display:none !important}
  /* ---- ⬛ LA BARRA DE MANDOS ------------------------------------------------
     Javier, 27-ago-2026: flotante, minimizable, escalable, en fila o en
     columna, y con opcion de solo iconos. Los botones heredan el tamano de la
     ventana, asi que el -/+ del titulo los escala todos de golpe. */
  #vent_mandos{font-size:var(--ley-letra)}
  /* su cuerpo no recorta jamas: ni en estados intermedios se guillotina un icono */
  #vent_mandos .ventCuerpo{overflow:visible}
  /* ---- 🧱 EL PANEL DE MANDOS DE ESTRUCTURA (Javier, 30-ago-2026) -------
     «Misma ley estetica de tamano de fuentes y misma decoracion que el resto de
     los menus flotantes». Lleva .vent y con ella toda la piel de la casa; aqui
     SOLO lo que cambia: que se vea (.vent nace oculta), que flote DENTRO de la
     ventana de Estructura en vez de en la pantalla, y que se ajuste a su
     contenido en vez de estirarse. */
  #matMandos{display:flex; position:absolute; left:12px; top:10px; z-index:30;
    width:max-content; max-width:calc(100% - 24px);
    min-width:0; min-height:0; max-height:calc(100% - 20px); resize:none}
  #matMandos > .ventBarra{cursor:move; padding:4px 8px}
  #matMandos > .ventCuerpo{display:flex; flex-direction:column; gap:5px;
    padding:7px 9px; overflow:visible}
  #matMandos #matChips{margin:0}
  #matMandos #matMayor{margin:0}
  /* los recuadros de dentro, sin el aire de un menu suelto */
  #matMandos details.marcoLey{margin:2px 0 0}
  /* ---- los pictogramas de GPT en la barra (camisa fase 2a) ----------------
     talla en em: escalan con la barra como escalaban los emojis. El emoji del
     boton se esconde (display:none lo saca de la VISTA, no del texto que leen
     los repartos). */
  /* la letra de los botones OBEDECE a la escala de la barra: la regla vieja
     de .bmenuBtn la clavaba a 12px por especificidad y ni pictogramas ni
     textos escalaban de verdad (29-ago-2026) */
  #vent_mandos #barraNueva button{font-size:inherit}
  /* el CUERPO tambien hereda: .ventCuerpo fija --ley-letra y cortaba la
     herencia a mitad de cadena — caja→cuerpo→boton→pictograma (29-ago-2026) */
  #vent_mandos > .ventCuerpo{font-size:inherit}
  #vent_mandos .menu-icon{--icon-size:1.55em; margin-right:.15em}
  .conGPT .ico{display:none}
  /* en las filas y botones de menu, talla de fila y bien asentado en la linea */
  .ventBarra b .menu-icon{--icon-size:1.25em; margin-right:5px; vertical-align:-0.22em}
  summary .menu-icon{--icon-size:1.2em; margin:0 4px 0 1px; vertical-align:-0.24em; flex:none}
  .lay .menu-icon, .leyRotulo .menu-icon{--icon-size:1.15em; margin-right:4px; vertical-align:-0.22em}
  /* ---- SLIDERS DE FAMILIA (guia GPT §8, 29-ago-2026): misma forma en toda
     la app, la GAMA de colores de su menu. Los trios son los de la guia; el
     que no tiene familia hereda la dorada general de la casa. ---- */
  :root{--sl1:#9c651d; --sl2:#cc8c24; --sl3:#efbd55}
  #vent_materiales{--sl1:#255b9b; --sl2:#397fc2; --sl3:#63b6f2}
  #sidebar{--sl1:#5b7085; --sl2:#8298ab; --sl3:#c1d0dc}
  #vent_flujos, #vent_flujo_canalesyfu{--sl1:#146ca8; --sl2:#218bc8; --sl3:#57c2ed}
  #vent_flujo_cielo{--sl1:#5f819d; --sl2:#82aec5; --sl3:#b8dce9}
  #vent_flujo_mar{--sl1:#57448a; --sl2:#7e62b8; --sl3:#b49aeb}
  #vent_bm_geografia{--sl1:#396b3b; --sl2:#5d994c; --sl3:#8dcb6c}
  #vent_fuego, #vent_bm_incendios, #vent_danos{--sl1:#9f2925; --sl2:#d34d2d; --sl3:#f29b37}
  #vent_bm_exportar{--sl1:#574386; --sl2:#7c61bb; --sl3:#b299ea}
  #vent_borde{--sl1:#74305f; --sl2:#ad3e91; --sl3:#e968cb}
  #paiPanel, #vent_plazas{--sl1:#345f38; --sl2:#568f48; --sl3:#86c568}
  #vent_cenor, #vent_cenefa, #vent_bordec, #piPanel, #piSelCtl{--sl1:#80691d; --sl2:#b99526; --sl3:#e7ce43}
  #vent_paseos{--sl1:#776b54; --sl2:#b6a579; --sl3:#eee0ba}
  #vent_canales, #vent_fuentes{--sl1:#176d77; --sl2:#299ca5; --sl3:#5bd1d6}
  #vent_eq{--sl1:#8e4927; --sl2:#bd6e37; --sl3:#e59d54}
  input[type=range]{-webkit-appearance:none; appearance:none; height:3px;
    border-radius:999px; border:none; outline:none;
    vertical-align:middle; cursor:pointer;
    background:linear-gradient(90deg, var(--sl1), var(--sl2) 45%, var(--sl3));
    box-shadow:inset 0 1px 2px #0009}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
    width:10px; height:10px; border-radius:50%;
    border:1px solid color-mix(in srgb, var(--sl3) 58%, #f4ead3);
    background:radial-gradient(circle at 35% 30%,
      color-mix(in srgb, var(--sl3) 44%, #fff) 0 18%, var(--sl2) 45%, var(--sl1) 75%);
    box-shadow:0 0 0 1px #111a22}
  input[type=range]:focus-visible{box-shadow:inset 0 1px 3px #000b, 0 0 0 2px var(--sl2)}
  input[type=range]:disabled{filter:grayscale(1); opacity:.35; cursor:default}
  /* la casilla hereda el color que la ley da a su ventana */
  input[type=checkbox]{accent-color:var(--acc9, var(--marca))}
  /* DOS TIPOS DE SLIDER en sonidos (29-ago-2026): intensidad = el oro de su
     familia; TIEMPOS de repeticion = azul pizarra, que no se confundan */
  input[type=range].slRitmo{background:linear-gradient(90deg,#3a4a55,#5b7085 45%,#8298ab)}
  input[type=range].slRitmo::-webkit-slider-thumb{
    border-color:#a9bcc9;
    background:radial-gradient(circle at 35% 30%, #c1d0dc 0 18%, #5b7085 45%, #3a4a55 75%)}
  /* campos oscuros (guia GPT §9): ningun cuadro blanco sobre la noche */
  input[type=text], input[type=number], input[type=search]{
    background:var(--pozo); color:var(--tx);
    border:1px solid var(--ley-borde); border-radius:var(--ley-radio2);
    padding:2px 6px}
  input[type=text]:focus-visible, input[type=number]:focus-visible,
  input[type=search]:focus-visible{outline:1px solid var(--acc9, var(--marca))}
  .bmenuFila .menu-icon, .btn .menu-icon, .chip .menu-icon{
    --icon-size:1.35em; margin-right:6px; vertical-align:-0.3em}
  #matLineasRow .menu-icon{--icon-size:1.3em; margin-right:5px; vertical-align:-0.3em}
  body.mandosIconos #vent_mandos .menu-icon,
  body.mandosVert #vent_mandos .menu-icon{margin-right:0}
  /* 🏷 el nombre al pasar el raton, al instante y vestido por la ley (Javier,
     29-ago-2026: «como en los programas de diseno, para saber que es cada
     icono») */
  #mandosTip{position:fixed; z-index:200; display:none; pointer-events:none;
    background:var(--ley-barra); border:1px solid var(--ley-borde);
    border-radius:var(--ley-radio2); padding:3px 8px; font-size:11px;
    color:var(--tx); box-shadow:var(--ley-sombra); white-space:nowrap}
  #vent_mandos button, #vent_mandos .btn, #vent_mandos .bmenuBtn, #vent_mandos input,
  #vent_mandos select{font-size:inherit}
  #vent_mandos .ventBarra button{font-size:11px}
  #vent_mandos #barraNueva{display:flex; gap:6px; row-gap:5px; padding:0; background:none;
    flex-wrap:wrap; align-items:center}
  #vent_mandos .ico{font-size:1.15em}       /* el icono escala con su boton */
  /* CUATRO GRUPOS CON SU RAYA: menus · navegacion · salida · la obra
     (Javier, 27-ago-2026: «ordena el menu de mandos, mas limpio y elegante») */
  #vent_mandos .mgrupo{display:flex; gap:5px; align-items:center; flex-wrap:wrap}
  #vent_mandos .mgrupo + .mgrupo{border-left:1px solid #ffffff20; padding-left:8px; margin-left:2px}
  /* LOS CINCO DE NAVEGACION, IGUALES: eran de tres clases distintas y se veian
     de tres maneras. Mismo cuadrado, mismo color, y lo que decian va al globito */
  #vent_mandos .navIco{padding:5px 0; min-width:2.4em; text-align:center}
  #vent_mandos .navIco .btxt{display:none}
  body.mandosIconos #vent_mandos .btxt{display:none}
  body.mandosIconos #vent_mandos .grp{display:none}
  body.mandosIconos #vent_mandos #barraNueva button{padding:5px 0; min-width:2.4em; text-align:center}
  /* EN VERTICAL, UNA COLUMNA FINA — una herramienta de Photoshop (Javier,
     27-ago-2026: «tiene que ser como un menu de Photoshop, muy fino») */
  body.mandosVert #vent_mandos{width:auto}
  /* LA AGARRADERA. En columna la barra medía lo que los dos botones y esos dos
     se la comían entera: no quedaba hueco por donde coger la ventana (Javier,
     27-ago-2026: «no hay por dónde pillarlo para moverlo»). */
  /* el roseton de la casa: alto en em para que ESCALE con la barra (la regla
     de la guia: «puede reducirse pero visible»); en columna, cabecera arriba.
     La barra de MANDOS hereda la letra de su caja —que es la que mueve la
     escala—; sin esto, el em del logo se quedaba clavado en --ley-letra. */
  #vent_mandos > .ventBarra{font-size:inherit}
  /* MANDOS HORIZONTAL SIN BANDA DE ARRIBA (Javier, 29-ago-2026, con dibujo):
     la barrita del titulo va A LA IZQUIERDA en la misma fila, como arriba en
     el vertical. Sigue siendo el asa de arrastre. */
  body:not(.mandosVert) #vent_mandos{flex-direction:row; align-items:stretch}
  body:not(.mandosVert) #vent_mandos > .ventBarra{border-bottom:none;
    border-right:1px solid var(--ley-borde); align-items:center; flex:none;
    border-radius:calc(var(--ley-radio) - 1px) 0 0 calc(var(--ley-radio) - 1px)}
  #mandosLogo{height:1.7em; width:auto; object-fit:contain; flex:none; user-select:none}
  /* en horizontal vive en la botonera: alto de boton, alineado con ellos */
  #vent_mandos > .ventBarra > #mandosLogo{height:3.3em; align-self:center; margin:0 4px 0 2px}
  /* el interrogante de ayuda se perdia (29-ago-2026): mas cuerpo y el oro */
  #barraNueva .menu-icon--info{--icon-size:1.7em; color:var(--marca)}
  body.mandosVert #vent_mandos #mandosLogo{width:80%; max-width:34px; height:auto;
    margin:2px auto 0; display:block}
  #vent_mandos .mgrip{font-weight:400; letter-spacing:3px; opacity:.45; cursor:move;
    padding:0 5px; user-select:none}
  body.mandosVert #vent_mandos .ventBarra{padding:0 2px 3px; gap:1px; flex-wrap:wrap;
    justify-content:center; cursor:move}
  body.mandosVert #vent_mandos .soloHoriz{display:none}
  /* cada mando del titulo EN SU FILA, centrado y del mismo ancho: el ⬌ y el 🗔
     caian descolgados al envolver con anchos distintos (Javier, 29-ago-2026) */
  body.mandosVert #vent_mandos .ventBarra button{display:block; width:80%;
    max-width:34px; margin:1px auto; padding:2px 0; text-align:center}
  body.mandosVert #vent_mandos .mgrip{width:100%; text-align:center; padding:2px 0 3px;
    border-bottom:1px solid #ffffff14; margin-bottom:4px; line-height:1.2}
  /* ---- LAS TRES CATASTROFES, EN SU BLOQUE --------------------------------
     Javier, 27-ago-2026: «incendios, sequias y contaminacion en un grupo claro
     dentro de menu MANDOS». No una rayita como los demas grupos: su propio
     recuadro, del pardo del fuego —el color que en toda la app significa «esto
     acaba con la alfombra»— para que se lean como lo que son, tres maneras del
     mismo final. */
  #vent_mandos .mgrupo[data-g="catastrofes"]{
    border:1px solid color-mix(in srgb, var(--mat-fuego) 40%, transparent);
    border-left:3px solid var(--mat-fuego); border-radius:var(--ley-radio2);
    background:color-mix(in srgb, var(--mat-fuego) 9%, transparent); padding:4px 7px}
  #vent_mandos .mgrupo[data-g="catastrofes"] + .mgrupo{border-left:none; padding-left:4px}
  body.mandosVert #vent_mandos .mgrupo[data-g="catastrofes"] + .mgrupo{border-top:none; padding-top:2px}
  body.mandosVert #vent_mandos .mgrupo[data-g="catastrofes"]{padding:3px 2px}
  /* aqui se escondia el rotulo <b>MANDOS</b> en columna; al jubilarlo, la regla
     escondia la AGARRADERA (tambien un <b>) — fuera (sonda, 29-ago-2026) */
  body.mandosVert #vent_mandos .ventBarra button{padding:1px 4px; font-size:10px}
  body.mandosVert #vent_mandos .ventCuerpo{padding:3px}
  body.mandosVert #vent_mandos #barraNueva{flex-direction:column; align-items:center; flex-wrap:nowrap; gap:3px}
  body.mandosVert #vent_mandos .mgrupo{flex-direction:column; align-items:center; flex-wrap:nowrap; gap:3px}
  body.mandosVert #vent_mandos .mgrupo + .mgrupo{border-left:none; margin-left:0; padding-left:0;
    border-top:1px solid #ffffff20; margin-top:4px; padding-top:5px; width:100%}
  body.mandosVert #vent_mandos .btxt{display:none}
  body.mandosVert #vent_mandos .grp{display:none}
  /* tejas cuadradas del ancho de un icono: una herramienta de Photoshop */
  body.mandosVert #vent_mandos #barraNueva button{padding:5px 0; width:2.6em; min-width:0;
    text-align:center; line-height:1.25}
  /* EL NUMERO DE LA ALFOMBRA, PEQUENO Y DEBAJO DEL ICONO, cuando no hay texto:
     «ALFOMBRA 1» no cabe en una teja y salia partido en dos lineas (Javier,
     27-ago-2026: «si no hay texto no puede haber palabra ALFOMBRA… el numero o
     titulo ira en pequeno debajo del icono») */
  #vent_mandos .bmin{display:none}
  body.mandosIconos #vent_mandos .bmin, body.mandosVert #vent_mandos .bmin{
    display:block; font-size:.6em; line-height:1; margin-top:2px; opacity:.85; font-weight:700}
  body.mandosIconos #vent_mandos [data-alf], body.mandosVert #vent_mandos [data-alf]{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:4px 0; line-height:1.1}
  #soloExit{display:none; position:fixed; top:10px; right:12px; z-index:60;
    background:#333; color:#eee; border:1px solid #666; border-radius:6px;
    padding:6px 12px; cursor:pointer; font-size:13px}
  body.solo #soloExit{display:block}
  #soloExit:hover{background:#444}
  /* cabecera nueva: 6 botones principales, cada uno con su color y su menú */
  #barraNueva{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%}
  #barraNueva .bmenuBtn{background:var(--ley-barra);border:1px solid;border-radius:var(--ley-radio2);
    padding:6px 12px;font-weight:700;font-size:12px;letter-spacing:.04em;cursor:pointer;color:inherit}
  #barraNueva .bmenuBtn:hover{filter:brightness(1.3)}
  header > [data-hdr-viejo]{display:none !important}
  .bmenuFila{display:block;width:100%;text-align:left;margin:3px 0;padding:7px 9px;font-size:12px}

  /* CONTORNO DE PIEZAS Y ELEMENTOS (Javier, 27-ago-2026: «en Rótulos, además de
     nombres y enganches, contorno de piezas y elementos»). Solo en pantalla: la
     capa se apaga antes de exportar, como las demás ayudas. */
  body.verContornos #map .mod{stroke:#8fe0a8cc; stroke-width:1.2; vector-effect:non-scaling-stroke}
  body.verContornos #map image, body.verContornos svg.hoja image{outline:1px solid #8fe0a877; outline-offset:-1px}