/* ============================================================
   PLANO UNIFICADO — 31,00 x 20,00 m (620 m²)
   Plano 1: 21 m · Plano 2: 10 m · Escala: 1 m = 40 px
   Máquinas dibujadas con sus medidas reales (proforma BRTW)
   ============================================================ */
:root{
  --papel:#F7F6F2; --ink:#23272C; --muro:#C43A2E; --linea:#B9B4A8;
  --z-trotadoras:#2C55C4;
  --z-poleas-f:#D9EAF6;  --z-poleas-b:#5B9BC9;
  --z-maquinas-f:#F5E8CF; --z-maquinas-b:transparent; /* #3/muros: se quitó el borde dorado (perímetro 2). Único perímetro = muro rojo. */
  --z-pesos-f:#FCF4D3;   --z-pesos-b:#D9A400;
  --z-alfombra-f:#F8D6E3; --z-alfombra-b:#D4739F;
  --z-escalera-f:#E2F1E5; --z-escalera-b:#2E7D46;
  --z-pasillo-f:#FBDFC5; --z-pasillo-b:#DE7527;
  --z-oficina-f:#E7E7E5; --z-oficina-b:#8A8A8A;
  --z-futuro-f:#F0F0EE;  --z-futuro-b:#9A9A98;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ background:var(--papel); color:var(--ink); font-family:'Barlow Condensed',Arial,sans-serif; padding:16px 6px 40px; }

.rotulo{ max-width:1240px; margin:0 auto 18px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; border-bottom:3px solid var(--ink); padding-bottom:12px; flex-wrap:wrap; }
.rotulo h1{ font-size:clamp(26px,4vw,40px); font-weight:700; letter-spacing:.5px; text-transform:uppercase; line-height:1; }
.rotulo h1 span{ color:var(--muro); }
.rotulo .datos{ font-family:'IBM Plex Mono',monospace; font-size:13px; text-align:right; line-height:1.7; color:#4A4E54; }

.editor-bar{ max-width:1240px; margin:0 auto 10px; background:#23272C; color:#EDEDEA; font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:10px 16px; border-radius:6px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.editor-bar button{ font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; background:#D9A400; color:#23272C; border:none; border-radius:4px; padding:6px 12px; cursor:pointer; }
.editor-bar button:hover{ filter:brightness(1.1); }
image.drag{ cursor:grab; }
image.drag.moviendo{ cursor:grabbing; }
.plano-wrap{ max-width:1240px; margin:0 auto; background:#FFF; border:1px solid var(--linea); box-shadow:0 2px 14px rgba(0,0,0,.07); padding:10px; position:relative; }
svg{ width:100%; height:auto; display:block; }

/* #3: el ÚNICO punteado plomo del plano es el perímetro de seguridad de las máquinas.
   Se ocultan las líneas plomas de frontera de pasillos/zonas (se mantiene el relleno
   gris de los pasillos: a los rects solo se les saca el trazo punteado, no el fill). */
line[stroke="#B4B4B0"], line[stroke="#B4B8BE"]{ display:none; }
rect[stroke="#B4B4B0"]{ stroke:none; }

.lbl{ font-family:'Barlow Condensed',Arial,sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.6px; fill:var(--ink); }
.lbl-sub{ font-family:'IBM Plex Mono',monospace; font-weight:400; text-transform:none; letter-spacing:0; fill:#5A5E64; }
.cota{ font-family:'IBM Plex Mono',monospace; font-size:calc(11px * var(--zesc, 1)); fill:var(--ink); }
.maq{ font-family:'IBM Plex Mono',monospace; font-size:calc(9px * var(--zesc, 1)); fill:#FFFFFF; paint-order:stroke; stroke:#23272C; stroke-width:2.4px; stroke-linejoin:round; }

.zona{ cursor:pointer; transition:filter .15s ease; }
.zona:hover{ filter:brightness(.94) saturate(1.25); }
svg.pasillos-activos .pasillo-global rect:not([visibility="hidden"]){
  fill:#F1F3F4 !important;
  stroke:none !important;
  filter:none;
}
svg.pasillos-activos .pasillo-global text{
  fill:#5F6870 !important;
  font-weight:700;
}
svg.pasillos-activos .pasillo-global line:not([visibility="hidden"]){
  display:none !important;
}
/* La franja recuperada de maquinas se dibuja sobre la zona base.
   No debe tapar el hover: visualmente pertenece a la misma zona de entrenamiento. */
#fila-c{ pointer-events:none; }

#tip{ position:fixed; pointer-events:none; background:rgba(35,39,44,.84); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:11px; padding:7px 10px; border-radius:5px; opacity:0; transform:translate(-50%,-116%); transition:opacity .12s ease; white-space:nowrap; z-index:50; box-shadow:0 8px 18px rgba(0,0,0,.18); backdrop-filter:blur(2px); }
#tip strong{ display:block; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.35px; line-height:1; }
#tip.equipo{ display:grid; gap:3px; white-space:normal; width:max-content; max-width:260px; text-align:center; line-height:1.2; }
#tip.equipo span{ display:block; }
#tip.equipo img{ width:150px; display:block; margin:0 auto 8px; background:#FFF; border-radius:6px; padding:6px; }
#tip.equipo .musculo{ color:#FF8A7A; font-weight:700; }
#tip.equipo .cod{ color:#C8CDD3; font-size:10px; }
#aviso{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:#C43A2E; color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:13px; padding:10px 18px; border-radius:6px;
  opacity:0; transition:opacity .25s ease; z-index:60; pointer-events:none; max-width:640px; text-align:center; }
#ficha{ display:none; position:fixed; z-index:70; width:320px; max-width:calc(100vw - 24px); max-height:calc(100vh - 24px);
  overflow-y:auto; overflow-x:hidden; box-sizing:border-box; background:#23272C; color:#EDEDEA;
  border-radius:10px; padding:14px 16px 12px; box-shadow:0 8px 30px rgba(0,0,0,.35);
  font-family:'IBM Plex Mono',monospace; font-size:12px; line-height:1.5; }
#ficha img{ width:100%; max-height:135px; box-sizing:border-box; object-fit:contain; background:#FFF; border-radius:6px; padding:6px; }
#ficha.ficha-galpon img{ height:150px; max-height:150px; object-fit:contain; padding:8px; }
#ficha.ficha-galpon p{ font-size:11px; line-height:1.35; max-height:34px; overflow:hidden; }
#ficha.ficha-galpon .musculo{ font-size:11px; line-height:1.25; }
.equipo-qty-label{
  pointer-events:none;
  font-family:'IBM Plex Mono',monospace;
  font-size:calc(10px * var(--zesc, 1));
  font-weight:700;
  fill:#23272C;
  stroke:#FFFFFF;
  stroke-width:3px;
  paint-order:stroke;
  stroke-linejoin:round;
}
#ficha h3{ font-family:'Barlow Condensed',sans-serif; font-size:19px; text-transform:uppercase; letter-spacing:.5px; margin-top:8px; }
#ficha .cod{ color:#9AA0A8; font-size:11px; margin-bottom:6px; }
#ficha p{ margin:4px 0; }
#ficha .musculo{ color:#FFD98A; margin:6px 0 8px; }
#ficha .dato{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid #3A3F46; padding:5px 0; }
#ficha .dato span{ color:#9AA0A8; }
#ficha .dato small{ color:#9AA0A8; font-size:11px; margin-left:4px; }
#ficha .dato-perim-grid, #ficha .dato-size-grid{ border-top:1px solid #3A3F46; padding:7px 0; display:block; }
#ficha .dato-perim-grid > span, #ficha .dato-size-grid > span{ color:#9AA0A8; display:block; }
#ficha .perim-lados{ display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; margin-top:7px; }
#ficha .size-lados{ display:grid; grid-template-columns:1fr; gap:5px; margin-top:7px; }
#ficha .perim-lados label{ display:flex; align-items:center; gap:5px; color:#9AA0A8; font-size:14px; }
#ficha .size-lados label{ display:grid; grid-template-columns:58px minmax(0, 1fr); align-items:center; gap:7px; min-width:0; color:#9AA0A8; font-size:11px; text-transform:uppercase; letter-spacing:.35px; }
#ficha .perim-lados input, #ficha .size-lados input{ width:52px; padding:3px 6px; font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700;
  border:1px solid #4A4F57; border-radius:4px; background:#2B2F36; color:#FFD98A; text-align:right; }
#ficha .size-lados input{ width:100%; min-width:0; box-sizing:border-box; text-align:left; }
#ficha .perim-formato{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
#ficha .size-acciones{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
#ficha .perim-estado{ display:block; margin-top:5px; color:#9AA0A8; font-size:10.5px; line-height:1.25; }
#ficha .acc-mini{ min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; background:#3A3F46; color:#EDEDEA; border:none; border-radius:5px; padding:8px 4px;
  cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:.35px; text-transform:uppercase; }
#ficha .acc-mini:hover{ background:#D9A400; color:#23272C; }
#ficha .acc-mini.acc-pegar{ outline:1px solid #5A6470; }
#ficha .acc-mini.acc-pegar.listo{ background:#2C55C4; color:#fff; outline:none; }
#ficha .acc-mini.acc-pegar.listo:hover{ background:#D9A400; color:#23272C; }
#ficha .acc-mini.acc-size{ background:#2E7D46; color:#fff; }
#ficha .acc-mini.acc-size:hover{ background:#D9A400; color:#23272C; }
#ficha .acc-mini.acc-confirmar{ background:#3A3F46; color:#EDEDEA; outline:1px solid #5A6470; }
#ficha .acc-mini.acc-confirmar.listo{ background:#2C55C4; color:#fff; outline:none; }
#ficha .acc-mini.acc-confirmar:hover{ background:#D9A400; color:#23272C; outline:none; }
#ficha .acciones{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-top:10px; }
#ficha .acc{ min-width:0; background:#3A3F46; color:#EDEDEA; border:none; border-radius:5px;
  padding:7px 4px; cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:.4px; }
#ficha .acc:hover{ background:#D9A400; color:#23272C; }
#ficha .acciones-alinear{ display:grid; grid-template-columns:72px repeat(5, 30px); gap:5px; align-items:center; margin-top:8px; }
#ficha .acciones-alinear span{ font-size:11px; color:#9AA0A8; text-transform:uppercase; letter-spacing:.25px; margin-right:0; line-height:1.15; }
#ficha .acc-dir{ width:30px; height:30px; background:#3A3F46; color:#EDEDEA; border:none; border-radius:5px;
  cursor:pointer; font-size:16px; font-weight:700; line-height:1; }
#ficha .acc-dir:hover{ background:#2C55C4; color:#fff; }
#ficha .acc-dir:last-child{ background:#4A3F5E; }
#ficha .cerrar{ position:absolute; top:8px; right:10px; background:none; border:none; color:#9AA0A8;
  font-size:15px; cursor:pointer; }
#ficha .cerrar:hover{ color:#fff; }

.leyenda{ max-width:1240px; margin:22px auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:10px 26px; }
.leyenda .item{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.leyenda .item small{ display:block; font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:11.5px; text-transform:none; letter-spacing:0; color:#6A6E74; }
.leyenda .sw{ width:30px; height:20px; border:2.5px solid; flex:none; }

.nota{ max-width:1240px; margin:24px auto 0; background:#FDF3E7; border:2px solid #DE7527; border-radius:6px; padding:14px 18px; font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1.7; }
.nota strong{ font-family:'Barlow Condensed',sans-serif; font-size:17px; text-transform:uppercase; letter-spacing:.5px; color:#B85A14; display:block; margin-bottom:4px; }

.resumen{ max-width:1240px; margin:26px auto 0; font-family:'IBM Plex Mono',monospace; font-size:13px; border-collapse:collapse; width:100%; }
.resumen caption{ font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700; text-transform:uppercase; text-align:left; padding-bottom:8px; letter-spacing:.5px; }
.resumen th,.resumen td{ border-bottom:1px solid var(--linea); padding:7px 10px; text-align:left; }
.resumen th{ background:var(--ink); color:#fff; font-weight:500; }
.resumen td:last-child,.resumen th:last-child{ text-align:right; }
.resumen tr.total td{ font-weight:700; border-top:2.5px solid var(--ink); }
body.escenario-galpon .nota,
body.escenario-galpon .leyenda,
body.escenario-galpon .resumen {
  display: none;
}

@media (max-width:640px){ .rotulo{ flex-direction:column; align-items:flex-start; } .rotulo .datos{ text-align:left; } }

/* Cotas del baño: SIEMPRE visibles (como las demás dimensiones del plano), sutiles. */
.cota-bano text { fill: #8A9098; }
.cota-bano line { stroke: #A7ADB4; }
.cota-bano .cext { stroke: #C4C9CF; stroke-width: 0.35; }
