/* sys-overlay.css — Overlay del panel Sistema en producción.
 *
 * Cuando el operador pulsa el logo desde production.html, el HMI no navega:
 * abre este overlay encima del visor 3D y la sidebar. El visor sigue montado
 * detrás, así que cerrar el overlay vuelve a la pantalla anterior sin
 * recargar el GLB.
 *
 * Estructura DOM (production.html):
 *   <header class="hmi-header-wrapper"> ... </header>
 *   <div class="sys-overlay" id="sys-overlay" hidden>
 *     <main class="sys-page"> ... </main>
 *   </div>
 *   <div class="prod-page-container"> ... </div>
 *
 * El header tiene position: relative + z-index 1000. El overlay se ancla a
 * la altura del header con JS (system-page.js mide hmi-header-wrapper en
 * cada apertura por si cambia el tamaño de fuente del operador) y se queda
 * con z-index 500 — por encima del visor pero por debajo del header,
 * de modo que el logo y los chips del header siguen siendo interactivos.
 */

.sys-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* `top` lo fija system-page.js a header.offsetHeight al abrir. */
  top: 0;
  z-index: 500;
  background: var(--surface-base);
  overflow-y: auto;
  /* La animación es opcional. Fade rápido para que el overlay aparezca con
     un pequeño "lift" en vez de aparecer/desaparecer hard cut. */
  opacity: 0;
  transition: opacity 0.18s ease;
}
.sys-overlay.is-open {
  opacity: 1;
}

/* Header propio del overlay: título "Sistema" + reset + botón cerrar. El
 * overlay esconde el header global con la X. (En system.html standalone el
 * back-btn existe en su sitio; aquí lo sustituimos por una X dentro del
 * overlay para que sea obvio que es un cierre, no una navegación.) */
.sys-overlay-closebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.sys-overlay-closebtn:hover {
  background: var(--surface-elevated);
  border-color: var(--accent);
}

/* ── Editor de listas de texto ───────────────────────────────────────── */
.sys-textlists-toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}
.sys-textlists-toolbar select {
  flex: 1;
  min-width: 0;
}
.sys-textlist-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}
.sys-textlist-table th {
  text-align: left;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--border-base);
}
.sys-textlist-table td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.sys-textlist-table td:first-child {
  font-family: var(--font-tech);
  color: var(--text-secondary);
  width: 48px;
  text-align: center;
}
.sys-textlist-table input {
  width: 100%;
  background: var(--surface-overlay);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: inherit;
}
.sys-textlist-table input:focus {
  outline: none;
  border-color: var(--accent);
}
.sys-textlist-table input.is-overridden {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 8%, var(--surface-overlay));
}
.sys-textlist-empty {
  padding: var(--space-3);
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Card de Configurador 3D (admin) ────────────────────────────────── */
.sys-card-admin .sys-card-icon {
  color: var(--color-warning);
}
.sys-card-admin .sys-card-desc strong {
  color: var(--color-warning-strong);
}