/* ── Design tokens ──────────────────────────────────────────────
   Tablero Studio — industrial moderno, claro, compacto
   ─────────────────────────────────────────────────────────────── */
:root {
  /* superficies */
  --bg:          #f1f3f5;
  --surface:     #ffffff;
  --sidebar:     #f8f9fa;
  --canvas-bg:   #18283a;

  /* cabecera / barra de proyecto */
  --header-bg:   #111827;
  --bar-bg:      #ffffff;

  /* acento azul */
  --accent:      #2563eb;
  --accent-h:    #1d4ed8;
  --accent-fade: #dbeafe;

  /* estado activo (pestaña, checkbox) */
  --active:      #059669;
  --active-bg:   #d1fae5;

  /* texto */
  --text:        #111827;
  --text-2:      #6b7280;
  --text-dim:    #5c6778;
  --text-light:  #f9fafb;
  --text-bar:    #9ca3af;

  /* bordes */
  --border:      #e5e7eb;
  --border-s:    #d1d5db;

  /* severidad */
  --error:       #dc2626;
  --error-bg:    #fef2f2;
  --warn:        #b45309;
  --warn-border: #f59e0b;
  --warn-bg:     #fffbeb;
  --info:        #1d4ed8;
  --info-bg:     #eff6ff;

  /* forma */
  --r:           4px;
  --shadow-s:    0 1px 2px rgba(0,0,0,.06);
  --shadow:      0 2px 8px rgba(0,0,0,.10);
}

/* ── Reset mínimo ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

body {
  font-family: "Segoe UI", "Inter", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 44px auto minmax(0,1fr) 24px;
}

em   { font-style: normal; color: var(--accent) }
a    { color: var(--active); text-underline-offset: 2px }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px }

/* ── Cabecera ───────────────────────────────────────────────── */
.app-header {
  background: var(--header-bg);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid #1f2937;
}

.app-brand   { display: flex; align-items: center; gap: 7px; margin-right: auto }
.brand-mark  { font-size: 16px; color: var(--accent); opacity: .9 }
.brand-name  {
  font-size: 14px; font-weight: 600;
  color: var(--text-light); white-space: nowrap; letter-spacing: -.01em
}
.brand-ver   {
  font-size: 10px; color: #6b7280;
  background: #1f2937; border-radius: 3px; padding: 1px 5px
}

.header-nav { display: flex; gap: 4px; align-items: center; flex-shrink: 0 }
.header-nav button {
  font: inherit; font-size: 12px;
  background: #1f2937; color: #d1d5db;
  border: 1px solid #374151; border-radius: var(--r);
  padding: 4px 9px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.header-nav button:hover        { border-color: var(--accent); background: #2d3748; color: #f9fafb }
.header-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* separador visual entre grupos de acciones */
.nav-sep {
  display: block; width: 1px; height: 18px;
  background: #2d3748; flex-shrink: 0; align-self: center;
  margin: 0 2px;
}
#undo, #redo { min-width: 30px; text-align: center; font-size: 14px; }

/* ── Barra de proyecto ──────────────────────────────────────── */
.project-bar {
  background: var(--bar-bg);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.bar-field           { display: flex; flex-direction: column; gap: 0; white-space: nowrap }
.bar-field--grow     { flex: 1 1 140px }
.bar-label {
  font-size: 9px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .4px; line-height: 1.6
}

.bar-field input,
.bar-field select {
  font: inherit; font-size: 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 3px 6px;
}
.bar-field input[type=number]  { width: 78px }
.bar-field select              { padding-right: 20px }
.bar-field input:focus,
.bar-field select:focus        { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent }

.btn-bar-ghost {
  font: inherit; font-size: 12px;
  background: none; color: var(--accent);
  border: 1px solid var(--accent-fade); border-radius: var(--r);
  padding: 4px 9px; cursor: pointer; white-space: nowrap; align-self: center;
  transition: border-color .15s, background .15s;
}
.btn-bar-ghost:hover        { background: var(--accent-fade) }
.btn-bar-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* ── Área de trabajo (3 columnas) ───────────────────────────── */
.workspace {
  display: grid;
  grid-template-columns: 232px minmax(0,1fr) 248px;
  min-height: 0;
  overflow: hidden;
}

/* ── Sidebars comunes ───────────────────────────────────────── */
.panel-left,
.panel-right {
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.panel-left  { border-right: 1px solid var(--border) }
.panel-right { border-left:  1px solid var(--border) }

.panel-left  section,
.panel-right section {
  padding: 10px 11px 9px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.guide-section { flex: 1; border-bottom: none !important }

.panel-heading {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-dim); margin-bottom: 8px;
  display: flex; align-items: center; gap: 5px;
}
.panel-caption {
  font-size: 11px; color: var(--text-dim);
  margin-bottom: 8px; line-height: 1.5
}

/* ── Biblioteca ─────────────────────────────────────────────── */
.lib-section { flex-shrink: 0 }

.search-input {
  font: inherit; font-size: 12px;
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 5px 7px; margin-bottom: 6px; display: block;
}
.search-input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent }

.catalog-list {
  max-height: 42vh; overflow-y: auto;
  margin-bottom: 7px; display: flex; flex-direction: column; gap: 2px;
}
.catalog-list button {
  display: block; width: 100%; text-align: left;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 5px 8px; cursor: pointer;
  font: inherit; font-size: 12px;
  transition: border-color .1s, background .1s;
}
.catalog-list button:hover        { border-color: var(--accent); background: var(--accent-fade) }
.catalog-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 0 }
.catalog-sub { display: block; font-size: 10px; color: var(--text-dim); margin-top: 1px }

.catalog-empty {
  font-size: 12px; color: var(--text-dim);
  text-align: center; padding: 10px 8px; line-height: 1.6
}

.btn-ghost {
  font: inherit; font-size: 12px;
  background: none; color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 5px 8px; cursor: pointer;
  transition: border-color .1s, color .1s;
}
.btn-ghost:hover        { border-color: var(--accent); color: var(--accent) }
.btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.full-width { width: 100% }

/* ── Estimador de corriente ─────────────────────────────────── */
.motor-section { flex-shrink: 0 }

.field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 7px }
.field span { font-size: 11px; color: var(--text-2) }
.field input {
  font: inherit; font-size: 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 4px 6px; width: 100%;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent }

.btn-primary {
  font: inherit; font-size: 12px;
  background: var(--accent); color: #fff;
  border: none; border-radius: var(--r);
  padding: 6px 11px; cursor: pointer; margin-bottom: 5px;
  transition: background .15s;
}
.btn-primary:hover        { background: var(--accent-h) }
.btn-primary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px }

.motor-result {
  font-size: 12px; color: var(--text-2);
  min-height: 2.2em; line-height: 1.5
}

/* ── Área central (canvas) ──────────────────────────────────── */
.canvas-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

/* ── Tab-row: pestañas + botón de toggle panel derecho ──────── */
.tab-row {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tab-row > .tab-bar {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border-bottom: none; /* border handled by .tab-row */
}
.toggle-right-btn {
  flex-shrink: 0;
  font: inherit; font-size: 11px;
  background: none; color: var(--text-dim);
  border: none; border-left: 1px solid var(--border);
  padding: 0 11px; cursor: pointer;
  transition: color .15s, background .15s;
  white-space: nowrap; line-height: 1;
}
.toggle-right-btn:hover        { color: var(--accent); background: var(--accent-fade) }
.toggle-right-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 1 }

/* ── Sidebar derecho oculto (solo en escritorio ≥ 961px) ────── */
@media (min-width: 961px) {
  .workspace.sidebar-right-hidden {
    grid-template-columns: 232px minmax(0,1fr);
  }
  .workspace.sidebar-right-hidden #panel-right {
    display: none;
  }
}
@media (min-width: 961px) and (max-width: 1280px) {
  .workspace.sidebar-right-hidden {
    grid-template-columns: 214px minmax(0,1fr);
  }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .workspace.sidebar-right-hidden {
    grid-template-columns: 196px minmax(0,1fr);
  }
}
@media screen and (max-width: 960px) {
  .workspace.sidebar-right-hidden #panel-right { display: none; }
}

/* Pestañas */
.tab-bar {
  display: flex; gap: 1px;
  padding: 7px 12px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; flex-shrink: 0;
}
.tab-bar button {
  font: inherit; font-size: 12px;
  background: none; color: var(--text-dim);
  border: 1px solid transparent; border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 4px 11px; cursor: pointer;
  position: relative; bottom: -1px;
  transition: color .1s, background .1s;
}
.tab-bar button:hover        { color: var(--text); background: var(--bg) }
.tab-bar button.active       {
  color: var(--text); background: var(--bg);
  border-color: var(--border); border-bottom-color: var(--bg);
  font-weight: 600;
}
.tab-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 1 }

/* Contenido */
.canvas-content {
  flex: 1; min-height: 0;
  overflow: auto; padding: 12px;
}
.canvas-content:focus { outline: none }

/* Barra de herramientas dentro del canvas */
.tools {
  display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; flex-shrink: 0
}
.tools button {
  font: inherit; font-size: 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 4px 9px; cursor: pointer;
  transition: border-color .1s, background .1s;
}
.tools button:hover        { border-color: var(--accent); background: var(--accent-fade) }
.tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.tools label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2) }
.tools input[type=range]    { accent-color: var(--accent) }

/* SVG técnico (fondo oscuro para legibilidad) */
.canvas-content svg {
  display: block;
  width: var(--drawing-zoom, 100%);
  max-height: var(--drawing-limit, calc(100vh - 178px));
  background: var(--canvas-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
svg text { font-family: "Segoe UI", "Inter", Arial, sans-serif }

/* Estado vacío del canvas */
.canvas-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 240px; text-align: center; gap: 7px;
  padding: 36px;
  border: 2px dashed var(--border);
  border-radius: 8px; margin-top: 4px;
  color: var(--text-dim);
}
.canvas-empty .empty-icon { font-size: 36px; opacity: .3 }
.canvas-empty h3  { font-size: 14px; font-weight: 600; color: var(--text-2) }
.canvas-empty p   { font-size: 13px; max-width: 300px; line-height: 1.6 }

/* ── Inspector ──────────────────────────────────────────────── */
.inspector-section { flex-shrink: 0 }
.inspector-body    { font-size: 13px }
.empty-hint        { font-size: 12px; color: var(--text-dim); line-height: 1.6 }

#inspector label {
  display: block; font-size: 11px; color: var(--text-2); margin-bottom: 6px
}
#inspector label input,
#inspector label select {
  font: inherit; font-size: 12px;
  display: block; width: 100%;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 4px 6px; margin-top: 2px;
}
#inspector input[type=checkbox] {
  display: inline; width: auto; margin-right: 5px; accent-color: var(--active)
}
#inspector label input:focus,
#inspector label select:focus   {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent
}
.insp-name { font-size: 13px; font-weight: 600; margin-bottom: 2px }
.insp-ref  { font-size: 11px; color: var(--text-dim); margin-bottom: 7px }
.insp-note { font-size: 11px; color: var(--text-dim); margin: 5px 0 9px; line-height: 1.5 }
.insp-link { display: inline-block; font-size: 12px; margin-bottom: 8px }
.doc-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.doc-links .insp-link { margin-bottom: 0; }

.btn-danger {
  font: inherit; font-size: 12px;
  background: none; color: var(--error);
  border: 1px solid var(--error); border-radius: var(--r);
  padding: 4px 9px; cursor: pointer; margin-top: 7px;
  transition: background .1s;
}
.btn-danger:hover        { background: var(--error-bg) }
.btn-danger:focus-visible { outline: 2px solid var(--error); outline-offset: 2px }

/* ── Revisión de ingeniería ─────────────────────────────────── */
.issues-section { flex-shrink: 0 }

.issue-badge {
  display: none; font-size: 10px; font-weight: 700;
  background: var(--error); color: #fff;
  border-radius: 10px; padding: 1px 5px; margin-left: 2px;
}
.issue-badge.has-errors   { display: inline; background: var(--error) }
.issue-badge.has-warnings { display: inline; background: var(--warn) }

.issues-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 170px; overflow-y: auto;
}
.issue {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 11px; padding: 4px 6px;
  border-radius: var(--r); line-height: 1.4;
}
.issue--error   { background: var(--error-bg); color: var(--error);   border-left: 2px solid var(--error) }
.issue--warning { background: var(--warn-bg);  color: var(--warn);    border-left: 2px solid var(--warn-border) }
.issue--info    { background: var(--info-bg);  color: var(--info);    border-left: 2px solid #93c5fd }
.issue-icon     { flex-shrink: 0; font-size: 11px; margin-top: 1px }

/* ── Asistente guiado ───────────────────────────────────────── */
.guide-heading { color: var(--text-2) }
.guide-body    { font-size: 12px; color: var(--text-2); line-height: 1.65 }
.guide-body strong { color: var(--text) }
.guide-body em     { font-style: italic; color: var(--text-2) }

/* ── Pie de página ──────────────────────────────────────────── */
.app-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  font-size: 10px; color: var(--text-dim);
  overflow: hidden;
}
.footer-note { color: var(--warn); font-size: 10px }

/* ── Tablas ─────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; font-size: 12px; min-width: 600px }
th, td { border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left }
th { font-weight: 600; color: var(--text-2); background: var(--surface); position: sticky; top: 0 }
td input, td select {
  font: inherit; font-size: 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 3px 5px; min-width: 70px;
}
td input:focus, td select:focus {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent
}
td button {
  font: inherit; font-size: 12px;
  background: none; color: var(--error);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 2px 7px; cursor: pointer;
}
td button:hover        { background: var(--error-bg); border-color: var(--error) }
td button:focus-visible { outline: 2px solid var(--error); outline-offset: 2px }

/* Encabezados dentro del canvas */
.view-header { margin-bottom: 12px }
.view-header h2 { font-size: 15px; font-weight: 600; margin-bottom: 3px }
.view-header p  { font-size: 12px; color: var(--text-2) }
.view-links { display: flex; gap: 10px; margin-bottom: 12px; font-size: 12px }

/* Normativa */
.norm-item {
  display: flex; align-items: flex-start;
  padding: 7px 9px; margin-bottom: 3px;
  border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; transition: border-color .1s;
}
.norm-item:has(input:checked) { border-color: var(--active); background: var(--active-bg) }
.norm-item label  { display: flex; gap: 9px; cursor: pointer; width: 100% }
.norm-item input  { flex-shrink: 0; margin-top: 2px; accent-color: var(--active) }

/* Materiales */
.mat-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px }

/* ── Impresión ──────────────────────────────────────────────── */
@media print {
  body { height: auto; display: block; overflow: visible; background: white; color: black }
  .app-header, .project-bar, .panel-left, .panel-right,
  .tab-bar, .tab-row, .app-footer, .tools { display: none !important }
  .workspace { display: block }
  .canvas-area { overflow: visible }
  .canvas-content { overflow: visible; padding: 0 }
  .canvas-content svg { max-height: none; border: none; background: white }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .workspace { grid-template-columns: 214px minmax(0,1fr) 232px }
  .brand-ver { display: none }
  .header-nav button { padding: 4px 7px }
}

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 196px minmax(0,1fr) 216px }
}

@media (max-width: 960px) {
  body { height: auto; overflow: auto; display: block }
  .workspace { display: flex; flex-direction: column }
  .panel-left  { max-height: 360px }
  .canvas-content { min-height: 400px }
}

/* Correcciones de acceso, contraste y teclado */
.canvas-area, .panel-left, .panel-right { min-width: 0 }
.issue-group summary { cursor: pointer; color: var(--text-2); font-size: 11px; font-weight: 600; padding: 5px 2px }
.issue-group summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
.issue-note { font-size: 12px; padding: 5px; color: var(--text-2); overflow-wrap: anywhere }
.issue-group .issue { margin: 2px 0 }
svg [data-id] { touch-action: none }
svg [data-id]:focus-visible rect { stroke: #60a5fa; stroke-width: 3 }
dialog { border: 1px solid var(--border); border-radius: 8px; padding: 22px; margin: auto; width: min(440px,calc(100vw - 28px)); background: var(--surface); color: var(--text); box-shadow: var(--shadow) }
dialog::backdrop { background: rgba(10,15,20,.5) }
dialog h2 { font-size: 17px; margin-bottom: 8px }
dialog p { color: var(--text-2); font-size: 13px; margin-bottom: 16px }
dialog select { font: inherit; padding: 7px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); width: 100% }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px }
@media (max-width: 960px) {
  .app-header { flex-wrap: wrap; padding: 10px 12px; gap: 10px }
  .header-nav { flex-wrap: wrap; flex: 1 1 100%; min-width: 0 }
  .project-bar { flex-wrap: wrap; padding: 8px 12px; align-items: flex-end; overflow: visible }
  .bar-field--grow { flex-basis: 100%; min-width: 0 }
  .bar-field input, .bar-field select { max-width: 100% }
  .bar-field--grow input { width: 100% }
  .workspace { width: 100%; overflow: visible }
  .panel-right { display: flex; overflow: visible; border-top: 1px solid var(--border) }
  .canvas-area { min-height: 480px; width: 100% }
  .canvas-content { min-height: 380px; max-width: 100% }
  .canvas-content svg { max-height: 600px }
  .app-footer { flex-wrap: wrap; padding: 8px 12px; height: auto; overflow: visible; gap: 6px }
}

.tools select { font: inherit; padding: 4px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text) }
.tools { position: sticky; top: -12px; z-index: 2; background: var(--bg); padding: 5px 0 }
@media print { dialog { display: none !important } .canvas-content svg { width: 100% !important; max-height: none !important } }

/* ── Catálogo: filtros ───────────────────────────────────────── */
.catalog-filters {
  display: flex; flex-direction: column; gap: 3px; margin-bottom: 5px;
}
.catalog-filters select {
  font: inherit; font-size: 11px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 3px 5px; width: 100%; min-width: 0;
}
.catalog-filters select:focus {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent
}
.catalog-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 5px; margin-bottom: 4px; min-height: 1.4em;
}
.catalog-count {
  display: block; font-size: 10px; color: var(--text-dim);
  min-height: 1.4em;
}
.catalog-export-btn { font-size: 10px; padding: 2px 6px; white-space: nowrap; flex-shrink: 0 }
.catalog-export-btn:disabled { opacity: .4; cursor: default; pointer-events: none }

/* ── Catálogo: ítems ─────────────────────────────────────────── */
.catalog-item-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 5px 8px; cursor: pointer;
  font: inherit; font-size: 12px;
  transition: border-color .1s, background .1s;
}
.catalog-item-btn:hover        { border-color: var(--accent); background: var(--accent-fade) }
.catalog-item-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0 }
.catalog-item-text { flex: 1; min-width: 0; }
.catalog-item-name { display: block; font-size: 12px; font-weight: 500 }
.catalog-dims      { display: block; font-size: 10px; color: var(--text-dim); margin-top: 1px }
.catalog-status--ok  { color: var(--active); font-weight: 600 }
.catalog-status--est { color: var(--text-dim) }

/* Miniatura SVG del catálogo (ilustración local, no fotografía) */
.catalog-thumb {
  flex-shrink: 0;
  display: block;
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid #2a3a4a;
  background: #1e3040;
}

/* Miniatura fotográfica del catálogo (foto real del fabricante) */
.catalog-photo {
  flex-shrink: 0;
  display: block;
  width: 44px;
  height: 60px;
  object-fit: contain;
  border-radius: 2px;
  border: 1px solid #2a3a4a;
  background: #ffffff;
  pointer-events: none;
}

/* Distintivos de tipo de imagen en la lista del catálogo */
.catalog-media-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  padding: 1px 4px; border-radius: 2px;
}
.catalog-media-badge--product { color: #1e6fc5; background: rgba(37,99,235,.13) }
.catalog-media-badge--rep     { color: #5b6470; background: rgba(107,114,128,.13) }
.catalog-media-badge--illus   { color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0 }

/* ── Lista de equipos del proyecto (diálogo) ────────────────── */
.equip-list-body {
  max-height: 50vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  margin: 6px 0;
}
.equip-list-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 6px 9px; cursor: pointer;
  font: inherit; font-size: 12px;
  transition: border-color .1s, background .1s;
}
.equip-list-btn:hover        { border-color: var(--accent); background: var(--accent-fade) }
.equip-list-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0 }
.equip-list-btn--selected { border-color: var(--accent); background: var(--accent-fade); font-weight: 600 }
.equip-list-tag  { font-weight: 700; min-width: 40px; flex-shrink: 0; color: var(--text) }
.equip-list-meta { font-size: 11px; color: var(--text-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ── Diálogo de detalle del catálogo ───────────────────────────── */
#catalog-detail { width: min(520px, calc(100vw - 28px)) }
.detail-title { font-size: 14px; font-weight: 600; margin-bottom: 10px }
.detail-body  {
  max-height: 55vh; overflow-y: auto;
  font-size: 13px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 0;
}
.detail-mfr {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-2); margin-bottom: 3px
}
.detail-desc  { color: var(--text-2); margin-bottom: 7px; line-height: 1.5 }
.detail-dims  { margin-bottom: 5px }
.detail-meta  { font-size: 11px; color: var(--text-dim); margin-top: 3px; line-height: 1.5 }
.detail-note  {
  font-size: 12px; color: var(--warn);
  background: var(--warn-bg); border-left: 2px solid var(--warn-border);
  padding: 5px 7px; border-radius: var(--r); margin-top: 7px
}
.detail-tech {
  font-size: 12px; margin: 7px 0;
  min-width: unset !important; border-collapse: collapse; width: 100%
}
.detail-tech th {
  font-weight: 600; color: var(--text-2);
  padding: 3px 8px 3px 0; text-align: left;
  white-space: nowrap; background: none !important; position: static !important
}
.detail-tech td { padding: 3px 0 3px 6px; color: var(--text) }
.detail-tech tr { border-bottom: 1px solid var(--border) }
.detail-tech tr:last-child { border-bottom: none }

/* Foto del fabricante en el diálogo de detalle */
.detail-photo-wrap { margin-bottom: 9px }
.detail-photo {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: #ffffff;
}
.detail-photo-meta {
  font-size: 11px; color: var(--text-dim);
  margin-top: 4px; line-height: 1.5;
}
.detail-photo-kind {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
  color: var(--accent); background: var(--accent-fade);
  padding: 1px 4px; border-radius: 2px;
}
.detail-illus-note {
  font-size: 11px; color: var(--text-dim);
  font-style: italic; margin-bottom: 7px;
}

/* ── Inspector: campos de fabricante y datos técnicos ─────────── */
.insp-mfr {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-2); margin-bottom: 2px
}
.insp-code { font-size: 10px; color: var(--text-dim) }
.insp-tech {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); padding: 4px 6px;
  margin-bottom: 7px; font-size: 11px
}
.insp-tech-row {
  display: flex; justify-content: space-between; gap: 7px;
  padding: 2px 0; border-bottom: 1px solid var(--border)
}
.insp-tech-row:last-child  { border-bottom: none }
.insp-tech-row span:first-child { color: var(--text-dim); flex-shrink: 0; max-width: 55% }
.insp-tech-row span:last-child  { text-align: right; word-break: break-word }
.insp-assembly {
  font-size: 11px; color: var(--text-2);
  background: var(--info-bg); border-left: 2px solid #93c5fd;
  padding: 4px 6px; border-radius: var(--r); margin-bottom: 7px; line-height: 1.5
}

/* ── Materiales: estado dimensional ────────────────────────────── */
.dim-ok  { font-size: 11px; color: var(--active); font-weight: 600 }
.dim-est { font-size: 11px; color: var(--text-dim) }

/* ── Inspector: bloques de mando y bobina ───────────────────────── */
.insp-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 7px 9px;
  margin-bottom: 7px;
  font-size: 12px;
}
.insp-block-title {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-2); margin-bottom: 6px;
}
.insp-coil-nominal {
  font-size: 12px; color: var(--text);
  margin-bottom: 5px;
}
.insp-block-note {
  font-size: 11px; color: var(--text-dim);
  margin-top: 6px; line-height: 1.5;
}

/* ── Resumen de gabinete (panel derecho) ────────────────────────── */
.enclosure-section {
  flex-shrink: 0;
  padding: 6px 11px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; font-size: 11px; min-width: 0;
}
.enclosure-none {
  color: var(--text-dim); font-style: italic;
}
.enclosure-label {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-dim); flex-shrink: 0;
}
.enclosure-code {
  font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.enclosure-dims {
  font-size: 10px; color: var(--text-dim);
  white-space: nowrap; flex-shrink: 0;
}
.enclosure-inspect-btn {
  font-size: 11px; padding: 2px 7px;
  margin-left: auto; flex-shrink: 0;
}

/* ── Visor 3D ───────────────────────────────────────────────────── */
.viewer-3d {
  display: flex;
  flex-direction: column;
  height: clamp(300px, calc(100dvh - 252px), 900px);
  background: var(--canvas-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  min-height: 300px;
  touch-action: none;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.viewer-3d:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

.viewer-3d-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  background: #1a2f42;
  border-bottom: 1px solid #2d4a62;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.btn-cam {
  font: inherit; font-size: 11px;
  background: #253647; color: #a8c4d8;
  border: 1px solid #3a5570; border-radius: var(--r);
  padding: 3px 8px; cursor: pointer;
  transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.btn-cam:hover         { border-color: var(--accent); background: #2d4460; color: #bfdbfe }
.btn-cam:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

.viewer-3d-hint {
  font-size: 11px;
  color: #a8bdcc;
  margin-left: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-3d-svg-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.viewer-3d.is-dragging .viewer-3d-svg-wrap { cursor: grabbing }

.viewer-3d-svg-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: transparent;
  border: none;
  border-radius: 0;
  pointer-events: auto;
}

.viewer-3d-notice {
  padding: 4px 9px;
  font-size: 11px;
  color: #a8bdcc;
  background: #1a2f42;
  border-top: 1px solid #2d4a62;
  flex-shrink: 0;
  line-height: 1.4;
}

@media (max-width: 960px) {
  .viewer-3d { min-height: 260px }
  .viewer-3d-hint { display: none }
}
@media print {
  .viewer-3d-controls { display: none !important }
  .viewer-3d { height: 170mm; min-height: 0; border: 0 }
}

/* ── Vista Planos multifolio ────────────────────────────────── */
.sheets-toolbar { flex-wrap: wrap; gap: 7px; align-items: center; }
.sheets-folio-nav { display: flex; flex-wrap: wrap; gap: 3px; }
.btn-folio {
  padding: 3px 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
  border-radius: 4px; cursor: pointer; font-size: 12px;
}
.btn-folio.active, .btn-folio[aria-pressed="true"] {
  background: var(--accent-fade); color: var(--accent);
  border-color: var(--accent); font-weight: 600;
}
.sheets-meta-panel {
  background: var(--sidebar); border: 1px solid var(--border);
  border-radius: 6px; margin: 7px 0; padding: 0 11px;
}
.sheets-meta-panel summary {
  padding: 7px 0; cursor: pointer; font-size: 12px; color: var(--text-2);
}
.sheets-meta-form {
  display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 9px;
}
.sheets-meta-form label {
  display: flex; flex-direction: column; font-size: 11px;
  color: var(--text-dim); gap: 2px; min-width: 140px;
}
.sheets-meta-form input {
  font-size: 12px; padding: 3px 5px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text);
}
.sheets-meta-note { font-size: 11px; color: var(--text-dim); margin: 0 0 9px; }
.sheets-folio-view {
  overflow: auto; background: #e8ecf0;
  border: 1px solid var(--border); border-radius: 4px;
  padding: 14px; margin: 7px 0;
}
.sheets-folio-view svg { max-width: 100%; height: auto; display: block; margin: auto; }
.sheets-notice {
  font-size: 11px; color: var(--text-dim); margin: 3px 0 10px;
  border-left: 3px solid var(--accent-fade); padding-left: 7px;
}
@media print { .sheets-toolbar, .sheets-meta-panel, .sheets-notice { display: none } }
@media print { .sheets-folio-view svg { width:100% !important; max-width:100% !important; height:auto !important; } }
.sheets-folio-view { touch-action:none; } .sheets-folio-view [data-unit-key]:focus { outline:none; } .sheets-folio-view [data-unit-key]:focus > rect, .sheets-folio-view [data-selected="true"] > rect { stroke:var(--accent); stroke-width:2; }
.sheets-drawing-warnings { color:var(--warn); background:var(--warn-bg); border-left:3px solid var(--warn-border); padding:5px 9px; font-size:11px; } .sheets-drawing-warnings summary { cursor:pointer; } .sheets-drawing-warnings ul { padding-left:16px; }

/* ── Perfiles de montaje ─────────────────────────────────────────── */
.profiles-section {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  padding: 9px 11px 7px;
}
.profile-list { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.profile-list-btn {
  width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 4px 7px;
  cursor: pointer; font: inherit; font-size: 11px;
  transition: border-color .15s, background .15s;
}
.profile-list-btn:hover { border-color: var(--accent); background: var(--accent-fade); }
.profile-list-btn--selected { border-color: var(--accent); background: var(--accent-fade); }
.profile-list-tag { font-weight: 700; color: var(--text); display: block; }
.profile-list-meta { color: var(--text-dim); font-size: 10px; }

/* ── Diálogo de agregar perfil ───────────────────────────────────── */
.profile-spec-info {
  font-size: 12px; color: var(--text-2);
  background: var(--info-bg); border: 1px solid #bfdbfe;
  border-radius: var(--r); padding: 6px 8px;
  margin-bottom: 5px; line-height: 1.6;
}
.profile-info-chip {
  display: inline-block;
  background: var(--active-bg); color: var(--active);
  font-size: 11px; font-weight: 700; border-radius: 3px;
  padding: 1px 5px; margin-right: 5px;
}
.profile-dialog-note {
  font-size: 11px; color: var(--text-dim);
  border-left: 2px solid var(--accent-fade);
  padding-left: 7px; margin-top: 5px; line-height: 1.5;
}
.profile-list { max-height:160px; overflow-y:auto; }
.mount-wire-toolbar { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin:0 0 5px; }
.mount-wire-toolbar button { padding:5px 8px; border:1px solid var(--border); border-radius:4px; background:var(--surface); color:var(--text); cursor:pointer; }
.mount-wire-toolbar button[aria-pressed="true"] { color:var(--accent); background:var(--accent-fade); border-color:var(--accent); }
.mount-wire-toolbar label { display:flex; gap:5px; font-size:12px; align-items:center; }
.mount-wire-help { font-size:11px; color:var(--text-2); margin-bottom:6px; }
.mount-wire-feedback { color:var(--error); font-size:12px; margin:4px 0; }
.mount-wire-feedback:empty { display:none; }
.mount-wire-list-body { display:flex; flex-direction:column; gap:5px; max-height:55vh; overflow:auto; }
.mount-wire-list-body button { text-align:left; padding:7px; background:var(--surface); border:1px solid var(--border); cursor:pointer; }
#drawing [data-wire-port], #drawing [data-mount-wire] { cursor:pointer; }
#drawing [data-wire-port]:focus-visible circle { stroke:#fbbf24; stroke-width:3; }
#drawing [data-mount-wire]:focus-visible { outline:none; filter:drop-shadow(0 0 2px #e0f2fe); }
@media print { .mount-wire-toolbar,.mount-wire-help,.mount-wire-feedback { display:none!important; } }
.qet-attribution { font-size:11px; margin:8px 0; color:var(--text-2); }
#qet-use-in-plans { padding:6px 10px; background:var(--accent-fade); color:var(--accent); border:1px solid var(--border); border-radius:4px; cursor:pointer; }
.qet-controls { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; align-items:center; }
.qet-controls label { display:flex; gap:5px; align-items:center; font-size:12px; }
.qet-controls input[type=search] { width:240px; max-width:100%; }
.qet-controls input,.qet-controls select { padding:6px; border:1px solid var(--border); border-radius:4px; background:white; }
.qet-page-buttons { display:flex; align-items:center; gap:10px; margin:8px 0; }
.qet-page-buttons button,.qet-detail button { padding:6px 10px; margin:3px; cursor:pointer; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:4px; }
.qet-library-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,36%); gap:12px; align-items:start; }
.qet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); gap:8px; }
.qet-card { display:flex; flex-direction:column; gap:5px; text-align:left; padding:8px; border:1px solid var(--border); border-radius:5px; background:white; color:var(--text); cursor:pointer; min-width:0; }
.qet-card:hover { border-color:var(--accent); }
.qet-card strong { font-size:12px; overflow-wrap:anywhere; }
.qet-card>span:not(.qet-preview),.qet-card small { font-size:10px; color:var(--text-2); overflow-wrap:anywhere; }
.qet-preview { display:flex; height:88px; width:100%; background:#fff; align-items:center; justify-content:center; }
.qet-preview svg { width:100%; height:88px; max-height:88px; background:#fff; border:0; }
.qet-detail { background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:12px; min-width:0; }
.qet-detail p { font-size:11px; margin:8px 0; }
.qet-detail-preview svg { width:100%; height:220px; max-height:220px; background:white; border:0; }
.qet-source-path { overflow-wrap:anywhere; }
.qet-author { white-space:pre-wrap; overflow-wrap:anywhere; font-size:10px; max-height:150px; overflow:auto; }
.qet-conversion-note { color:var(--warn); }
@media(max-width:1100px){.qet-library-layout{grid-template-columns:1fr}.qet-detail{order:-1}}
@media(max-width:600px){.qet-controls label{flex-wrap:wrap}.qet-controls input[type=search]{width:100%}}