*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--outline-variant);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   PALETA — 7ma ronda: sistema de diseño REAL generado por Google Stitch
   ("ElecafTab Industrial Spec"), reemplaza la paleta "plano y simple" de la
   6ta ronda. Fuente completa: design-system.md (scratchpad de la sesión que
   armó esta ronda). Personalidad: banco de trabajo CAD/eléctrico calibrado,
   sin sombras difusas ni gradientes decorativos, elevación por bordes finos
   de 1px, esquinas cuadradas en todo lo que es "chasis físico" (gabinete,
   módulos, tarjetas, inputs, botones), grilla de puntos técnica de 18px en
   el lienzo del gabinete (18mm = 1 módulo DIN real).
   Decisión propia: separar el fondo GENERAL de la app (--surface, más frío/
   azulado, #F8F9FF, para sidebar/topbar/tarjetas) del fondo del LIENZO del
   gabinete (--surface-canvas, más cálido, #F4F4F2, con grilla de puntos) —
   así el canvas de trabajo se lee como una superficie de banco distinta del
   resto de la interfaz, tal como sugiere la spec.
   Los colores de RUBROS y COLOR_TIPO_CIRCUITO (app.js) NO se tocan en esta
   ronda — son otro sistema (rubro de negocio / tipo de circuito), no colores
   de interfaz. El azul primario #0057A4 coincide con el logo real de Elecaf,
   así que se mantiene igual al de la ronda anterior.
   ============================================================ */
:root{
  /* Tipografía dual: Inter para interfaz, JetBrains Mono para TODO dato
     técnico (amperajes, curvas, mm², fases, cotas en mm, ocupación de riel). */
  --font-body:'Inter',system-ui,-apple-system,Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --surface:#f8f9ff; --surface-canvas:#f4f4f2; --surface-dim:#dcdcd6;
  --surface-container-lowest:#ffffff; --surface-container-low:#f8f8f6;
  --surface-container:#efefea; --surface-container-high:#e8e8e2;
  --surface-container-highest:#dcdcd6; --surface-variant:#e8e8e2; --surface-bright:#ffffff;
  --on-surface:#1a1e24; --on-surface-variant:#5f6672;
  --outline:#5f6672; --outline-variant:#d0d0ca; --outline-strong:#bcbcb5;
  --grid-dot:#c5c5bd;

  --primary:#0147FF; --primary-hover:#003EE0; --primary-active:#0035C2;
  --primary-container:#E5EBFA; --on-primary:#ffffff; --on-primary-container:#0147FF;
  --secondary:#15803d; --secondary-container:#dcf5e3; --on-secondary:#ffffff; --on-secondary-container:#0f6b32;
  --tertiary:#d97706; --tertiary-container:#fdecd2; --on-tertiary:#ffffff; --on-tertiary-container:#92400e;
  --error:#dc2626; --error-container:#fef2f2; --on-error:#ffffff; --on-error-container:#b91c1c;

  /* Radios: 0 para chasis/paneles/inputs/botones (componentes físicos que
     encastran sin espacio), 2px para controles mecánicos chicos (chips,
     badges, toggles), 4px solo para el HUD flotante de zoom. */
  --radius:0; --radius-sm:2px; --radius-hud:4px;

  /* Elevación por bordes — sombras reservadas a overlays (offset chico, sin
     blur) y al HUD flotante (spec Level 3/4). Nada de blur en tarjetas. */
  --shadow:0px 2px 0px 0px rgba(0,0,0,.08);
  --shadow-hud:0px 4px 12px rgba(26,30,36,.15);
  --fab-bg:#1e2229; --fab-color:#ffffff; --fab-shadow:var(--shadow-hud);

  /* Verde-amarillo bicolor real de PE (IRAM 2183 / AEA 90364), usado en la
     barra de tierra del plano físico (.pe-bar-pill). Los tokens de L1/L2/L3/N
     que existían para el Diagrama Unifilar/Cableado de Taller se sacaron en
     la Octava ronda junto con esas pantallas (dead code, no quedan apagados). */
  --fase-pe:#3f7d20; --fase-pe-2:#eab308;

  /* Novena ronda: alto fijo de la barra inferior de pestañas del catálogo,
     usado tanto por esa barra como por el padding inferior del canvas y la
     bandeja deslizable que aparece arriba de ella. */
  --tabbar-h:60px;
}
html,body{height:100%}
body{font-family:var(--font-body);background:var(--surface);color:var(--on-surface);font-size:14px}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;vertical-align:middle;line-height:1}

/* Dato técnico en mono: amperajes, curvas, mm², cotas, ocupación. */
.dato-mono,.mm-ruler,.modulo-variacion,.insp-spec span:last-child,.mat-unit,
.cat-chip{font-family:var(--font-mono)}

/* ---------- LOGIN — inspirado en login-screen.html real generado por Stitch:
   fondo con grilla técnica de puntos, tarjeta plana sin sombra grande, barra
   de calibración DIN arriba, pie técnico "IRAM 2183 COMPLIANT". ---------- */
.login-screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:var(--surface);z-index:100;padding:20px;overflow-y:auto;
  background-image:radial-gradient(circle,var(--grid-dot) 1px,transparent 1px);background-size:18px 18px}
.login-screen.active{display:flex}
.login-card{background:var(--surface-container-lowest);border:1px solid var(--outline-variant);border-radius:0;padding:0;width:100%;max-width:380px;box-shadow:0px 2px 0px 0px rgba(0,0,0,.06);text-align:center;overflow:hidden}
.login-card-calibration{height:5px;width:100%;display:flex;border-bottom:1px solid var(--outline-variant)}
.login-card-calibration span{height:100%}
.login-card-body{padding:30px 26px 22px}
.login-logo{width:52px;height:52px;padding:12px;border-radius:0;background:var(--surface-container-low);border:1px solid var(--outline-variant);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--primary)}
.login-logo .material-symbols-outlined{font-size:28px}
.login-card h1{font-size:22px;color:var(--on-surface);font-weight:700;letter-spacing:-.01em}
.login-card h2{font-size:11px;color:var(--primary);font-weight:700;margin-bottom:6px;letter-spacing:1.5px;text-transform:uppercase;font-family:var(--font-mono)}
.login-card>p{font-size:12.5px;color:var(--on-surface-variant);margin-bottom:20px}
.login-card input{width:100%;padding:11px 12px;border:1px solid var(--outline-variant);border-radius:0;margin-bottom:10px;font-size:13.5px;background:var(--surface-container-lowest);color:var(--on-surface);font-family:var(--font-mono)}
.login-card input:focus{outline:none;border-color:var(--primary);border-width:1.5px}
.login-card button{width:100%;padding:12px;border:1px solid var(--primary-hover);border-radius:0;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-body)}
.btn-login{background:var(--primary);color:var(--on-primary)}
.btn-login:hover{background:var(--primary-hover)}
.login-stamp{padding:7px 20px;background:var(--surface-container-low);border-top:1px solid var(--outline-variant);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--outline);font-family:var(--font-mono);letter-spacing:.04em}

/* ---------- SHELL — Novena ronda: shell "workspace único" imitando
   Electrical Panel Designer. Topbar mínima (ícono + nombre editable + chip
   de spec del gabinete + estado/hamburguesa), sin toggles ni botones de
   acción sueltos — esos se movieron al menú hamburguesa y a la pila de FABs
   del canvas (ver más abajo). ---------- */
.app-screen{display:none}
.app-screen.active{display:block}

/* height:100vh fijo (no min-height) + overflow:hidden acá y min-height:0 en
   #mainContent: así el workspace queda del alto exacto de la pantalla y es
   el canvas (.canvas-workspace, más abajo) el que scrollea puertas adentro
   cuando el gabinete a escala real en mm no entra entero — antes, sin este
   acotamiento, la PÁGINA entera crecía y scrolleaba (arrastrando consigo a
   los FABs/tabbar fixed), algo que ya pasaba en el layout de 3 paneles de
   rondas anteriores pero quedaba menos visible por los paneles laterales
   con su propio max-height. No cambia el modelo en mm ni el zoom. */
.workspace-content{height:100vh;overflow:hidden;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-container-low);border-bottom:1px solid var(--outline-variant);padding:8px 14px;min-height:56px;position:sticky;top:0;z-index:50}
.topbar-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.topbar-right{display:flex;align-items:center;gap:6px;flex:none}
.topbar-brand-icon{font-size:22px!important;color:var(--primary);flex:none}
.topbar-name-wrap{position:relative;display:flex;align-items:center;min-width:0}
#topbarNombreInput{width:220px;max-width:46vw;padding:7px 26px 7px 9px;border:1px solid transparent;border-radius:0;background:transparent;font-size:13.5px;font-weight:700;color:var(--on-surface);font-family:var(--font-body)}
#topbarNombreInput:hover{border-color:var(--outline-variant);background:var(--surface-container-lowest)}
#topbarNombreInput:focus{border-color:var(--primary);border-width:1.5px;background:var(--surface-container-lowest)}
#topbarNombreInput:disabled{color:var(--on-surface);cursor:default;opacity:.85}
.topbar-edit-icon{position:absolute;right:6px;font-size:15px!important;color:var(--outline);pointer-events:none}
.topbar-icon-btn{width:38px;height:38px;border-radius:50%;border:none;background:transparent;color:var(--on-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.topbar-icon-btn:hover{background:var(--surface-container-high)}

/* ---------- Menú hamburguesa: dropdown fijo bajo la topbar (reemplaza los
   toggles/botones sueltos que antes vivían ahí: Técnico/Cliente, ir a Lista
   de Materiales, Nuevo tablero/Cambiar gabinete cuando aplica, Salir). ---------- */
.menu-backdrop{position:fixed;inset:0;background:rgba(26,30,36,.25);z-index:60;display:none}
.menu-backdrop.show{display:block}
.menu-dropdown{position:fixed;top:56px;right:12px;width:250px;max-width:calc(100vw - 24px);background:var(--surface-container-lowest);border:1px solid var(--outline-variant);border-radius:0;box-shadow:var(--shadow-hud);z-index:61;display:none;padding:8px}
.menu-dropdown.show{display:block}
.menu-section{padding:8px 8px 12px}
.menu-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--outline);display:block;margin-bottom:6px}
.modo-toggle{display:flex;background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:0;padding:2px;gap:2px;flex:none}
.modo-toggle.full{width:100%}
.modo-toggle.full .modo-btn{flex:1;justify-content:center}
.modo-btn{display:flex;align-items:center;gap:5px;border:none;background:transparent;color:var(--outline);font-size:11px;font-weight:700;padding:6px 12px;border-radius:0;cursor:pointer;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.03em}
.modo-btn .material-symbols-outlined{font-size:15px!important}
.modo-btn.active{background:var(--surface-container-lowest);color:var(--primary);border:1px solid var(--outline-variant)}
.menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 8px;border:none;background:transparent;color:var(--on-surface);font-size:13px;font-weight:600;cursor:pointer;text-align:left;border-radius:0}
.menu-item:hover{background:var(--surface-container-high)}
.menu-item .material-symbols-outlined{font-size:18px;color:var(--outline)}
.menu-item-danger{color:var(--error)}
.menu-item-danger .material-symbols-outlined{color:var(--error)}
.menu-divider{height:1px;background:var(--outline-variant);margin:6px 4px}

#mainContent{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px;max-width:1400px;margin:0 auto;width:100%;overflow-y:auto}
/* Modo canvas (Editor de Tablero con un tablero armado): full-bleed, sin el
   padding/max-width de las pantallas de tarjetas (selector de gabinete, BOM).
   El scroll pasa de #mainContent a .canvas-workspace de acá adentro. */
#mainContent.mc-canvas{padding:0;max-width:none;margin:0;overflow:hidden}

@media (max-width:480px){
  #topbarNombreInput{width:150px;max-width:40vw}
}

/* ---------- CARDS / BOTONES / BADGES genéricos ---------- */
.card{background:var(--surface-container-low);border:1px solid var(--outline-variant);border-radius:0;padding:16px;margin-bottom:12px}
.card-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.card-header .icon{width:36px;height:36px;border-radius:0;border:1px solid var(--outline-variant);display:flex;align-items:center;justify-content:center;flex:none}
.card-header h3{font-size:15px;font-weight:700;color:var(--on-surface)}
.section-title{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;margin:16px 4px 10px;text-transform:uppercase;letter-spacing:.06em;color:var(--on-surface)}
.section-title .material-symbols-outlined{font-size:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border:1px solid var(--outline-variant);border-radius:0;font-size:13px;font-weight:600;cursor:pointer;background:var(--surface-container-high);color:var(--on-surface)}
.btn:hover{background:var(--surface-variant)}
.btn .material-symbols-outlined{font-size:17px}
.btn-primary2{background:var(--primary);color:var(--on-primary);border-color:var(--primary-hover)}
.btn-primary2:hover{background:var(--primary-hover)}
.btn-primary2:active{background:var(--primary-active)}
.btn-outline{background:transparent;border:1px solid var(--outline-variant);color:var(--on-surface)}
.btn-outline:hover{background:var(--surface-container-high)}
.btn-danger{background:var(--surface-container-lowest);color:var(--error);border-color:var(--error)}
.btn-danger:hover{background:var(--error-container)}
.btn-sm{padding:6px 10px;font-size:12px}
.btn-full{width:100%}
.empty-state{text-align:center;padding:30px 16px;color:var(--outline);background:var(--surface-container-low);border:1px solid var(--outline-variant);border-radius:0;margin-bottom:12px}
.empty-state .material-symbols-outlined{font-size:40px;opacity:.4;display:block;margin-bottom:8px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:var(--radius-sm);font-family:var(--font-mono)}
.badge-ok{background:var(--secondary-container);color:var(--on-secondary-container)}
.badge-warn{background:var(--tertiary-container);color:var(--on-tertiary-container)}
.badge-info{background:var(--primary-container);color:var(--on-primary-container)}

/* ---------- FORMULARIOS ---------- */
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:11px;font-weight:700;color:var(--outline);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
input,select,textarea{width:100%;padding:10px 11px;border:1px solid var(--outline-variant);border-radius:0;background:var(--surface-container-lowest);color:var(--on-surface);font-size:14px;font-family:inherit}
input::placeholder,textarea::placeholder{color:var(--outline)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);border-width:1.5px}

/* ---------- TOAST ---------- */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--on-surface);color:#fff;padding:10px 18px;border-radius:0;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:200;font-weight:600;max-width:90vw;text-align:center;box-shadow:var(--shadow-hud)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- MODAL GENÉRICO ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(26,30,36,.45);display:none;align-items:center;justify-content:center;z-index:300;padding:20px}
.modal-overlay.show{display:flex}
.modal-box{background:var(--surface-container-lowest);border:1px solid var(--on-surface);border-radius:0;padding:20px;width:100%;max-width:380px;box-shadow:var(--shadow);max-height:calc(100vh - 40px);overflow-y:auto}
.modal-box h3{font-size:15px;font-weight:700;margin-bottom:4px;color:var(--on-surface)}
.modal-box .modal-sub{font-size:11.5px;color:var(--outline);margin-bottom:14px}
.modal-actions{display:flex;gap:8px;margin-top:6px}
/* Inspector de módulo / Estado del tablero (Novena ronda) — un poco más
   anchos que el resto de los modales (variación, exportar, cliente) porque
   muestran grillas de specs/tipo de circuito. */
.modal-box-inspector,.modal-box-estado{max-width:440px}
.modal-box-inspector .insp-block,.modal-box-estado .insp-block{margin-bottom:2px}

.chip-row{display:flex;flex-wrap:wrap;gap:8px}

/* ============================================================
   EDITOR DE TABLERO — Novena ronda: canvas central único (imita Electrical
   Panel Designer). Reemplaza el layout de 3 paneles: el catálogo pasó a ser
   una barra inferior de pestañas + bandeja deslizable, el inspector pasó a
   ser un modal por módulo (#moduloModal, ver abajo "MODAL INSPECTOR /
   ESTADO"), y el resumen global de IRAM/ocupación pasó al chip de estado de
   la topbar + su modal.
   ============================================================ */

/* --- Canvas: gabinete realista en mm, centrado sobre el lienzo técnico.
   Superficie propia (--surface-canvas #F4F4F2) con grilla de puntos de 18px
   (18mm = 1 módulo DIN real), distinta del fondo general de la app. --- */
/* display:flex SIN align-items/justify-content:center a propósito: con un
   gabinete grande (24+ TE) a escala real en mm, el plano puede ser más alto
   que el viewport — centrar con el padre (align-items/justify-content) deja
   una porción del contenido permanentemente inalcanzable por scroll (bug
   clásico de flexbox: los márgenes de overflow se recortan simétricamente
   arriba/abajo y no se puede scrollear a un scrollTop negativo). El fix
   estándar es centrar con margin:auto EN EL HIJO (.canvas-stage-wrap): sigue
   centrado cuando entra en pantalla, y cuando no entra el margen colapsa a 0
   y se puede scrollear hasta el borde real del plano en cualquier dirección. */
.canvas-workspace{flex:1;min-height:0;display:flex;overflow:auto;padding:24px;padding-bottom:calc(var(--tabbar-h) + 24px);background:var(--surface-canvas);
  background-image:radial-gradient(circle,var(--grid-dot) 1px,transparent 1px);background-size:18px 18px}
/* Sin max-width:100% a propósito: si el plano es más ancho que la pantalla
   (gabinetes grandes), .canvas-stage-wrap tiene que poder crecer más allá
   del ancho visible para que el overflow (y el centrado con margin:auto) lo
   maneje .canvas-workspace por afuera — si quedara clampeado acá, su propio
   align-items:center volvería a introducir el mismo bug de recorte que ya
   se resolvió arriba, pero anidado un nivel más adentro. */
.canvas-stage-wrap{margin:auto;display:flex;flex-direction:column;align-items:center}
.mm-ruler{width:100%;display:flex;justify-content:space-between;font-size:11px;color:var(--outline);letter-spacing:.05em;padding:0 8px 4px}
.zoom-stage{transform-origin:top center;display:inline-block}

/* --- Pila de FABs redondos a la derecha (Compartir/Exportar, Guardar,
   Zoom In/Out) — "botones redondos flotantes" pedido explícitamente esta
   ronda para calcar la referencia; excepción deliberada a la regla general
   de radios cuadrados del resto del chasis (son controles flotantes de HUD,
   no chasis físico). --- */
.fab-stack{position:fixed;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:45}
.fab-btn{width:44px;height:44px;border-radius:50%;border:none;background:var(--fab-bg);color:var(--fab-color);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--fab-shadow);flex:none}
.fab-btn:hover{background:#2d3139}
.fab-btn .material-symbols-outlined{font-size:21px}
.fab-divider{width:22px;height:1px;background:rgba(255,255,255,.28)}
.fab-zoom-label{font-size:10px;font-weight:700;color:#fff;background:var(--fab-bg);border-radius:var(--radius-hud);padding:2px 6px;font-family:var(--font-mono)}
@media (max-width:880px){.fab-stack{right:10px;gap:8px}.fab-btn{width:40px;height:40px}}

/* --- Barra inferior de pestañas (categorías del catálogo) + bandeja
   deslizable que aparece arriba de ella con los materiales de la categoría
   activa. Al arrastrar un ítem de la bandeja al riel/puerta del gabinete se
   usa exactamente el mismo dragStartCatalogo()/dropEnRiel()/dropEnPuerta()
   de siempre — no cambió nada de la lógica de colocación. --- */
.cat-tabbar{position:fixed;left:0;right:0;bottom:0;height:var(--tabbar-h);z-index:46;background:var(--surface-container-lowest);border-top:1px solid var(--outline-variant);padding:8px 12px;display:flex;align-items:center;justify-content:center}
.cat-tabbar-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:760px}
.cat-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--outline-variant);background:var(--surface-container-high);color:var(--on-surface-variant);font-size:12.5px;font-weight:700;cursor:pointer}
.cat-pill-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.cat-pill.active{background:var(--primary);border-color:var(--primary-hover);color:var(--on-primary)}
.cat-pill.active .cat-pill-dot{background:#fff}

.cat-tray{position:fixed;left:0;right:0;bottom:var(--tabbar-h);z-index:45;background:var(--surface-container-lowest);border-top:1px solid var(--outline-variant);box-shadow:0px -2px 0px 0px rgba(0,0,0,.05);max-height:45vh;overflow-y:auto;padding:12px 14px;display:none}
.cat-tray.show{display:block}
.cat-tray-header{margin-bottom:10px}
.cat-tray-header input{max-width:360px}
.cat-tray-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cat-tray-empty{font-size:12px;color:var(--outline);padding:10px 2px}

.catalogo-item{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:0;border:1px solid var(--outline-variant);cursor:grab;background:var(--surface-container-high)}
.catalogo-item:hover{background:var(--surface-container-lowest)}
.catalogo-item.no-arrastrable{cursor:not-allowed;opacity:.55}
.catalogo-item-icon{color:var(--primary);font-size:19px;flex:none}
.catalogo-item.no-arrastrable .catalogo-item-icon{color:var(--outline)}
.catalogo-item-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.catalogo-item-nombre{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--on-surface)}
.cat-chip{font-size:9px;font-weight:700;padding:2px 6px;border-radius:var(--radius-sm);display:inline-block;width:fit-content}
.cat-chip-riel{background:var(--primary-container);color:var(--primary)}
.cat-chip-puerta{background:var(--secondary-container);color:var(--on-secondary-container)}
.cat-chip-no{background:var(--surface-variant);color:var(--outline)}

.gabinete-caja{background:var(--surface-container-high);border:1px solid var(--outline-strong);border-radius:0;padding:14px;position:relative}
.gabinete-header-bar{width:100%;background:var(--surface-container);border:1px solid var(--outline-variant);padding:8px 12px;border-radius:0;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.gabinete-header-bar .ghb-nombre{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--on-surface);text-transform:uppercase;min-width:0;overflow-wrap:break-word}
.gabinete-header-bar .ghb-tag{font-size:11px;font-weight:700;color:var(--on-secondary-container);background:var(--secondary-container);padding:2px 8px;border-radius:var(--radius-sm);font-family:var(--font-mono)}
.gabinete-body{position:relative;display:flex;gap:6px;background:var(--surface-dim);border:1px solid var(--outline-strong);border-radius:0;padding:8px}
.canaleta{width:14px;flex:none;background:var(--surface-container-low);border-radius:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:8px 0;gap:4px}
.canaleta span{width:8px;height:4px;background:var(--surface-variant);border-radius:0}
.gabinete-central{flex:1;display:flex;flex-direction:column;gap:10px}

.riel-label,.puerta-label{font-size:11px;font-weight:700;color:var(--outline);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4mm;display:flex;align-items:center;gap:6px}
.puerta-label{margin-top:2mm}

.riel-fila{position:relative;background:var(--surface-container-low);border:1px solid var(--outline-variant);border-radius:0;padding:6px}
.riel-rail-back{position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%);height:10mm;background:linear-gradient(180deg,#e2e2db 0%,#dcdcd6 25%,#c8c8c1 60%,#bcbcb5 100%);border-top:1px solid #fff;border-bottom:1px solid var(--outline-strong)}
.riel-strip{position:relative;z-index:1}
.riel-slot{position:absolute;top:0;bottom:0;box-sizing:border-box;border-right:1px solid rgba(0,0,0,.06)}
.riel-slot.libre{background:repeating-linear-gradient(45deg,rgba(0,0,0,.035) 0 4px,transparent 4px 8px)}
.riel-slot.ocupado{background:transparent}

.puerta-area{position:relative;background:var(--surface-container-low);border:1px dashed var(--outline-variant);border-radius:0}

/* --- Feedback visual de drag&drop (Décima ronda) — apenas se empieza a
   arrastrar un ítem del catálogo sobre el riel/la puerta, el contenedor
   completo se resalta (azul si el ítem entra ahí, rojo si no: tipo
   equivocado o sin lugar) y aparece un bloque fantasma en el lugar EXACTO
   donde va a caer si se suelta ahí mismo — snapeado al mismo slot/posición
   que calculan dropEnRiel()/dropEnPuerta(), no una aproximación aparte
   (ver dragOverRiel()/dragOverPuerta() en app.js). --- */
.riel-strip.drop-target-valid,.puerta-area.drop-target-valid{background:var(--primary-container);outline:2px dashed var(--primary);outline-offset:-2px}
.riel-strip.drop-target-invalid,.puerta-area.drop-target-invalid{background:var(--error-container);outline:2px dashed var(--error);outline-offset:-2px}
.drop-preview{position:absolute;border:2px dashed var(--primary);background:rgba(0,87,164,.18);border-radius:0;pointer-events:none;z-index:3}

.modulo-riel,.modulo-puerta{position:absolute;top:2px;bottom:2px;background:linear-gradient(160deg,#ffffff,#e5e5e0);color:var(--on-surface);border-radius:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px;cursor:pointer;box-sizing:border-box;border:1px solid var(--outline-variant)}
.modulo-riel.seleccionado,.modulo-puerta.seleccionado{box-shadow:0 0 0 2px var(--primary)}
.modulo-riel:hover,.modulo-puerta:hover{filter:brightness(1.03)}
body.modo-cliente .modulo-riel,body.modo-cliente .modulo-puerta{cursor:default}
body.modo-cliente .modulo-riel:hover,body.modo-cliente .modulo-puerta:hover{filter:none}
.modulo-puerta{top:0;bottom:auto;background:linear-gradient(160deg,#e2f5ee,#bfe4d6);border-radius:0}
.modulo-nombre{font-size:8.5px;font-weight:700;line-height:1.15;text-align:center;overflow:hidden;word-break:break-word;max-height:100%;pointer-events:none}
.modulo-variacion{font-size:8px;font-weight:700;line-height:1.1;opacity:.85;pointer-events:none}
/* Los 3 badges (borrar/etiqueta/aviso) van CONTENIDOS dentro del propio
   módulo (no con offset negativo hacia afuera) — con offset negativo, dos
   módulos puestos lado a lado terminaban con sus badges superpuestos sobre
   el módulo vecino (bug de la 5ta ronda, ya corregido, se mantiene así). */
.modulo-del{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:var(--error-container);color:var(--error);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;padding:0}
.modulo-del .material-symbols-outlined{font-size:11px!important}
.modulo-etiqueta-badge{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--tertiary);color:var(--on-tertiary);display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none}
.modulo-etiqueta-badge .material-symbols-outlined{font-size:9px!important}
.modulo-warn-badge{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--error);color:var(--on-error);display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none}
.modulo-warn-badge .material-symbols-outlined{font-size:9px!important}

.pe-bar{margin-top:8px;background:var(--surface-container-lowest);border:1px solid var(--outline-variant);padding:7px 12px;border-radius:0;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pe-bar-left{display:flex;align-items:center;gap:8px}
.pe-bar-pill{width:20px;height:16px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--fase-pe) 0 50%,var(--fase-pe-2) 50% 100%);color:#1a1e24;font-size:8.5px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.pe-bar-text{font-size:11px;color:var(--outline);font-weight:600}

/* --- Contenido del Inspector / Estado del tablero — Novena ronda: ya no
   vive en un panel lateral fijo, se reusan estas mismas clases DENTRO de
   #moduloModal (ver renderInspectorModal()/renderPanelEstado() en app.js). --- */
.insp-title{display:flex;align-items:center;justify-content:between;gap:6px;font-size:13px;font-weight:700;color:var(--on-surface);margin-bottom:2px}
.insp-title .material-symbols-outlined{color:var(--primary);font-size:18px}
.insp-block{background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:0;padding:12px;display:flex;flex-direction:column;gap:8px}
.insp-block-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--outline)}
.insp-specs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.insp-spec{background:var(--surface-container-lowest);border:1px solid var(--outline-variant);padding:6px 8px;border-radius:0;display:flex;flex-direction:column;gap:2px}
.insp-spec span:first-child{font-size:11px;color:var(--outline)}
.insp-spec span:last-child{font-size:12px;font-weight:700;color:var(--on-surface)}
.insp-tipos{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.insp-tipo-btn{border:1px solid var(--outline-variant);background:var(--surface-container-lowest);color:var(--on-surface-variant);border-radius:var(--radius-sm);padding:8px 6px;font-size:11px;font-weight:700;cursor:pointer;text-align:center}
.insp-tipo-btn.active{background:var(--primary-container);border-color:var(--primary);color:var(--on-primary-container)}
.insp-progress{width:100%;height:6px;border-radius:0;background:var(--surface-container-highest);overflow:hidden}
.insp-progress-fill{height:100%;background:var(--primary);border-radius:0}
.insp-progress-fill.warn{background:var(--error)}
.insp-check{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:var(--on-surface-variant)}
.insp-check .material-symbols-outlined{font-size:15px!important;margin-top:1px;flex:none}
.insp-check.ok .material-symbols-outlined{color:var(--secondary)}
.insp-check.warn .material-symbols-outlined{color:var(--tertiary)}

/* ---------- LEYENDA DE ETIQUETAS (debajo del plano) ---------- */
.leyenda-card{margin-top:14px}
.leyenda-lista{display:flex;flex-direction:column}
.leyenda-item{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--outline-variant)}
.leyenda-item:last-child{border-bottom:none}
.leyenda-dot{width:9px;height:9px;border-radius:50%;background:var(--primary);flex:none}
.leyenda-dot.tipo-puerta{background:var(--secondary)}
.leyenda-texto{font-size:12.5px;color:var(--on-surface);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leyenda-texto strong{font-weight:700;color:var(--on-surface)}
.leyenda-destacada{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.leyenda-destacada .section-title{font-size:14px}
.leyenda-destacada .leyenda-texto{font-size:13px;white-space:normal}
.leyenda-destacada .leyenda-item{padding:11px 2px}

/* ============================================================
   BOM / PRESUPUESTO — lista de materiales por rubro con color (mismo patrón
   visual que ElecafOps/styles.css .rubro-section).
   ============================================================ */
.bom-topbar{margin-bottom:12px}
.rubro-section{margin-bottom:14px;border-radius:0;overflow:hidden;border:1px solid var(--outline-variant)}
.rubro-section-header{display:flex;align-items:center;gap:8px;padding:11px 14px;color:#fff;font-weight:700;font-size:13px}
.rubro-section-header .material-symbols-outlined{font-size:18px}
.rubro-section-body{background:var(--surface-container-low);padding:2px 14px 4px}
.material-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--outline-variant)}
.material-item:last-child{border-bottom:none}
.mat-info{flex:1}
.mat-info h5{font-size:13px;font-weight:600;color:var(--on-surface)}
.mat-info p{font-size:11px;color:var(--outline)}
.mat-unit{font-size:12px;font-weight:700;color:var(--on-surface-variant);white-space:nowrap}

.explicacion-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.explicacion-card{background:var(--surface-container-low);border-radius:0;padding:12px;display:flex;gap:10px;align-items:flex-start;border:1px solid var(--outline-variant)}
.explicacion-icon{width:34px;height:34px;border-radius:0;display:flex;align-items:center;justify-content:center;flex:none}
.explicacion-txt h5{font-size:13px;font-weight:700;color:var(--on-surface);margin-bottom:2px}
.explicacion-txt p{font-size:11.5px;color:var(--on-surface-variant);line-height:1.4}


/* ---------- PROBADOR DE CIRCUITOS (circuitos.js) ---------- */
.sim-wrap{display:flex;flex-direction:column;height:calc(100vh - 56px);min-height:420px}
.sim-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--outline-variant);background:var(--surface-container-lowest)}
.sim-color{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--on-surface-variant)}
.sim-color select{width:auto;padding:7px 8px;font-size:13px}
.sim-zoom{display:flex;gap:4px;margin-left:auto}
.sim-zoom .btn{padding:7px 12px;font-size:16px}
.sim-cuerpo-pantalla{flex:1;display:flex;min-height:0}
.sim-canvas{flex:1;overflow:auto;background:var(--surface-canvas);touch-action:none}
.sim-panel{width:300px;flex:none;border-left:1px solid var(--outline-variant);background:var(--surface-container-lowest);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px}
@media (max-width:880px){.sim-cuerpo-pantalla{flex-direction:column}.sim-panel{width:auto;max-height:38vh;border-left:none;border-top:1px solid var(--outline-variant)}}
.sim-svg{display:block;user-select:none;-webkit-user-select:none}
.sim-cuerpo{fill:var(--surface-container-lowest);stroke:var(--on-surface);stroke-width:1.5}
.sim-cuerpo.fuente{fill:var(--primary-container);stroke:var(--primary)}
.sim-comp{cursor:grab}
.sim-comp.probar{cursor:pointer}
.sim-comp.sel .sim-cuerpo{stroke:var(--primary);stroke-width:3}
.sim-nombre{font:700 12px var(--font-mono);text-anchor:middle;fill:var(--on-surface)}
.sim-sim-txt{font:700 12px var(--font-mono);text-anchor:middle;fill:var(--on-surface)}
.sim-sim-sub{font:600 9.5px var(--font-mono);text-anchor:middle;fill:var(--on-surface-variant)}
.sim-sim-sub.mal{fill:var(--error)}
.sim-sim-btn{font:800 13px var(--font-body);text-anchor:middle;fill:#fff;pointer-events:none}
.sim-borne{fill:#fff;stroke:var(--on-surface);stroke-width:1.5;cursor:crosshair}
.sim-borne.vivo{fill:#ffcf33}
.sim-borne.desde{fill:var(--primary);stroke:var(--primary)}
.sim-borne-txt{font:600 9px var(--font-mono);text-anchor:middle;fill:var(--on-surface-variant);pointer-events:none}
.sim-cable{fill:none;stroke-width:3.5;stroke-linejoin:round;pointer-events:none}
.sim-cable.sel{stroke-width:6}
.sim-cable-hit{fill:none;stroke:transparent;stroke-width:16;cursor:pointer}
.sim-cable-vivo{fill:none;stroke:#ffcf33;stroke-width:10;stroke-linejoin:round;opacity:.55;pointer-events:none}
.sim-palanca-caja{fill:var(--surface-container);stroke:var(--outline)}
.sim-palanca.on{fill:var(--secondary)}
.sim-palanca.off{fill:var(--outline)}
.sim-palanca.disparo{fill:var(--error)}
.sim-estado{fill:var(--surface-container);stroke:var(--outline-variant)}
.sim-estado.act{fill:var(--secondary-container);stroke:var(--secondary)}
.sim-estado.mal{fill:var(--error-container);stroke:var(--error)}
.sim-boton{stroke:#111;stroke-width:2}
.sim-boton.verde{fill:#1f9d4c}
.sim-boton.rojo{fill:#d32f2f}
.sim-boton.apretado{transform-box:fill-box;transform-origin:center;transform:scale(.85);filter:brightness(.8)}
.sim-tanque{fill:#fff;stroke:var(--on-surface)}
.sim-agua{fill:#5fb3e6}
.sim-luz{fill:#e8e8e2;stroke:var(--on-surface);stroke-width:1.5}
.sim-luz.on.verde{fill:#35d46a;filter:drop-shadow(0 0 6px #35d46a)}
.sim-luz.on.rojo{fill:#ff4d4d;filter:drop-shadow(0 0 6px #ff4d4d)}
.sim-luz.on.ambar{fill:#ffb020;filter:drop-shadow(0 0 6px #ffb020)}
.sim-luz.quemada{fill:#444}
.sim-motor{fill:var(--surface-container);stroke:var(--on-surface);stroke-width:2}
.sim-motor.gira{fill:var(--secondary-container);stroke:var(--secondary)}
.sim-motor.quemado{fill:#444}
.sim-rotor{animation:simGiro 1s linear infinite}
.sim-rotor.anti{animation-direction:reverse}
.sim-flecha{fill:none;stroke:var(--secondary);stroke-width:3}
.sim-flecha-punta{fill:var(--secondary)}
@keyframes simGiro{to{transform:rotate(360deg)}}
.sim-props{display:flex;flex-direction:column;gap:8px}
.sim-props-tit{font-weight:700;font-size:14px}
.sim-props label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:var(--outline);text-transform:uppercase;letter-spacing:.04em}
.sim-props-acc{display:flex;flex-direction:column;gap:6px}
.sim-borrar{color:var(--error);border-color:var(--error)}
.sim-ayuda{font-size:13px;color:var(--on-surface-variant);line-height:1.45}
.sim-log{display:flex;flex-direction:column;gap:6px}
.sim-log-item{font-size:12.5px;line-height:1.4;padding:8px 10px;border-left:3px solid var(--outline-variant);background:var(--surface-container-low)}
.sim-log-item span{display:block;font:600 10px var(--font-mono);color:var(--outline);margin-bottom:2px}
.sim-log-item.error{border-left-color:var(--error);background:var(--error-container)}
.sim-log-item.aviso{border-left-color:var(--tertiary);background:var(--tertiary-container)}
.sim-log-item.ok{border-left-color:var(--secondary);background:var(--secondary-container)}
.sim-log-vacio{font-size:12px;color:var(--outline)}
.sim-modal{max-width:440px}
.sim-cat{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.sim-cat .btn{font-size:12px;padding:7px 10px}
.sim-guardar{display:flex;gap:6px;margin-bottom:10px}
.sim-guardado{display:flex;gap:6px;margin-top:6px}
.sim-guardado .btn:first-child{flex:1;justify-content:flex-start}