/* =========================
    Utilidades / Resets
    ========================= */

/* Clase para ocultar elementos */
.hidden {
  display: none !important;
}

/* Estilos generales */
body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

/* =========================
    Layout principal
    ========================= */

.container {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Menú lateral con ancho fijo */
.menu {
  flex: 0 0 175px;
  width: 200px;
  height: 100vh; /* Altura fija */
  background: #f0f0f0;
  overflow-y: auto;
  transition: all 0.3s ease;
  /* padding: 3px; */
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

/* Header fijo dentro del menú (botones + buscador) */
.menu-fixed {
  position: sticky; /* se pega dentro del scroll de .menu */
  top: 0;
  z-index: 1201;
  background: #f0f0f0; /* mismo fondo que tu menú */
  padding: 6px 3px 8px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.06); /* opcional */
}

.menu-fixed #menuControls,
.menu-fixed #fileControls,
.menu-fixed #searchContainer {
  margin: 0 0 6px 0;
}

/* Buscador (estilo pulido) */
#searchContainer input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #e6e9ef;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  height: 36px;
  background: #fff;
  transition:
    box-shadow 0.12s ease,
    border-color 0.12s ease;
}

#searchContainer input:focus {
  outline: none;
  box-shadow: 0 8px 20px rgba(11, 92, 255, 0.08);
  border-color: rgba(11, 92, 255, 0.16);
}

/* Contenido scrolleable del menú (debajo del header) */
.menu-scroll {
  flex: 0 0 auto; /* contenido normal debajo del header */
  padding-top: 6px;
}

/* =========================
    Controles del menú
    ========================= */

/* Controles del menú (botones principales) */
#menuControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  margin-top: 28px;
  align-items: center;
}

/* Estilo base para botones del menú */
#menuControls button {
  padding: 9px 12px;
  cursor: pointer;
  flex: 1 1 auto;
  background: linear-gradient(
    90deg,
    var(--accent-2, #1170ff),
    var(--accent, #0b5fff)
  );
  border: none;
  color: #ffffff;
  border-radius: 10px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  box-shadow: 0 10px 28px rgba(11, 92, 255, 0.12);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Variant styles for certain actions (overrides) */
#printButton {
  background: linear-gradient(90deg, #0b5fff, #1170ff);
}

#suggestChangesBtn {
  background: linear-gradient(90deg, #10b981, #06b6a4); /* green-teal */
}

#toggleDraw {
  background: linear-gradient(90deg, #ff7a18, #ffb020); /* orange */
}

#openCoverBtn {
  background: linear-gradient(90deg, #7c3aed, #a855f7); /* purple */
}

#langToggleBtn {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(11, 92, 255, 0.08);
  box-shadow: none;
}

/* Agregamos el botón para rotar (si lo usás en el menú) */
#menuControls #rotateButton {
  padding: 5px 10px;
  cursor: pointer;
  flex: 1 1 auto;
}

/* Botones para exportar e importar (dentro del menú) */
#fileControls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}

#fileControls button {
  padding: 8px 12px;
  cursor: pointer;
  flex: 1 1 calc(50% - 5px);
  min-width: 0;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(11, 92, 255, 0.08);
  color: #0b5fff;
  border-radius: 10px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

/* Specific file controls */
#exportJSON {
  background: linear-gradient(90deg, #06b6d4, #0b5fff);
  color: #fff;
}
#importJSON {
  background: linear-gradient(90deg, #f97316, #fb923c);
  color: #fff;
}

/* Hover/active tweaks (more subtle) */
#menuControls button:hover,
#fileControls button:hover,
#uploadImageButton:hover,
#inputListContainer button:hover,
#outputListContainer button:hover,
#toggleDetailsBtn:hover,
.home-link:hover,
.lsv-table-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 35px rgba(11, 92, 255, 0.14);
  filter: brightness(1.03);
}

#menuControls button:active,
#fileControls button:active,
#uploadImageButton:active,
#inputListContainer button:active,
#outputListContainer button:active,
#toggleDetailsBtn:active,
.home-link:active,
.lsv-table-btn:active {
  transform: scale(0.985);
  box-shadow: 0 6px 18px rgba(11, 92, 255, 0.08);
}

/* Micro-interacciones (hover/active) para botones del panel */
#menuControls button:hover,
#fileControls button:hover,
#uploadImageButton:hover,
#inputListContainer button:hover,
#outputListContainer button:hover,
#toggleDetailsBtn:hover,
.home-link:hover,
.lsv-table-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(47, 146, 214, 0.4);
  filter: brightness(1.05);
}

#menuControls button:active,
#fileControls button:active,
#uploadImageButton:active,
#inputListContainer button:active,
#outputListContainer button:active,
#toggleDetailsBtn:active,
.home-link:active,
.lsv-table-btn:active {
  transform: scale(0.97);
  box-shadow: 0 0 10px rgba(47, 146, 214, 0.6);
}

/* =========================
    Categorías del menú
    ========================= */

.category {
  margin-bottom: 10px;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background-color: #6c8ca5;
  color: #fff;
  border-radius: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  cursor: pointer;
  /* quitamos text-align:center para que respete la miniatura a la izquierda */
}

.cat-thumb-wrap {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cat-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* respeta transparencia de la PNG */
  display: block;
}

.cat-title {
  line-height: 1;
}

@media (max-width: 768px) {
  .cat-thumb-wrap {
    width: 56px;
    height: 56px;
  }
}

.category-items.collapsed {
  display: none;
}

/* Elementos individuales en el menú */
.menu-item {
  margin-bottom: 15px;
  text-align: center;
  margin-top: 10px;
}

.menu-item img {
  max-width: 100%;
  height: auto;
  /* border: 1px solid #ccc; */
  background: #fff;
  width: 62px;
}

.imageName {
  font-size: 12px;
  margin: 3px 0;
  color: white;
}

/* Botón “Agregar” de cada ítem del menú */
.menu-item button {
  margin-top: 5px;
  padding: 5px 10px;
  cursor: pointer;
  background: linear-gradient(
    90deg,
    var(--accent-2, #1170ff),
    var(--accent, #0b5fff)
  );
  border: none;
  color: whitesmoke;
  border-radius: 10px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

/* Hover/Active del botón “Agregar” */
.menu-item button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(47, 146, 214, 0.4);
  filter: brightness(1.1);
}

.menu-item button:active {
  transform: scale(0.95);
  box-shadow: 0 0 10px rgba(47, 146, 214, 0.6);
}

/* Vista previa de formas (shape) en el menú */
.menu-item .shapePreview {
  width: 100%;
  height: 40px;
  background: #f9f9f9;
  border: 1px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
}

/* =========================
    Canvas / Área de trabajo
    ========================= */

.canvas {
  position: relative;
  box-sizing: border-box;
  background: #fff;
  border: 4px solid black;
  min-width: 0;
  width: 100%;
  min-height: 100vh;
  overflow: auto;
  background-image:
    repeating-linear-gradient(
      to right,
      transparent,
      transparent 19px,
      rgba(0, 0, 0, 0.1) 19px,
      rgba(0, 0, 0, 0.1) 20px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 19px,
      rgba(0, 0, 0, 0.1) 19px,
      rgba(0, 0, 0, 0.1) 20px
    );
}

/* Canvases en pantalla (posición y tamaño) */
#permanentCanvas,
#drawingCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#guidesCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* no interfiere */
  z-index: 1; /* debajo de draggable (z=4) y de drawing cuando está activo */
}

/* No imprimir las guías */
@media print {
  #guidesCanvas {
    display: none !important;
  }
  .lsv-table-btn {
    display: none !important;
  }
  .draggable.locked {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
  }
}

/* Refuerzo para ocultar footer mientras se lanza print en móvil */
body.stageplot-mobile-layout.mobile-printing #stagePlotFooter,
body.stageplot-mobile-layout.mobile-printing .marcas-container,
body.stageplot-mobile-layout.mobile-printing #mobileQuickActions {
  display: none !important;
}

body.stageplot-mobile-layout.mobile-printing {
  padding-bottom: 0 !important;
}

/* El de dibujo captura gestos cuando está activo */
#drawingCanvas {
  touch-action: none;
  pointer-events: none;
}

#drawingCanvas.drawing-active {
  z-index: 10000 !important; /* por encima de .draggable (z:4) */
  pointer-events: auto;
}

/* Overlay negro sobre PNG (sólo opacos) */
.overlay-black {
  filter: brightness(0) !important;
  transition: filter 0.5s ease;
}

/* Evitar que los gestos touch generen scroll en elementos draggable */
.draggable {
  touch-action: none;
  transform-origin: center center;
}

/* Elementos draggable */
.draggable {
  position: absolute;
  cursor: move;
  user-select: none;
  border: 0.1px solid transparent;
  box-sizing: border-box;
  z-index: 4;
}

.draggable.selected {
  border-color: transparent;
  outline: 2px solid #2563eb;
  outline-offset: 0;
}

#selectionMarquee {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 29;
  border: 1px dashed rgba(37, 99, 235, 0.95);
  background: rgba(37, 99, 235, 0.14);
  border-radius: 4px;
}

.draggable.locked {
  cursor: not-allowed !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.55);
}

.draggable img {
  display: block;
  width: 100%;
  pointer-events: none;
}

/* Handle para redimensionar (si lo reactivás) */
.resizer {
  width: 8px;
  height: 8px;
  background: #f0f0f0;
  border: 1px solid #999;
  position: absolute;
  right: -4px;
  bottom: -4px;
  cursor: nwse-resize;
  border-radius: 2px;
}
/* Ocultar por completo el handle de resize */
.resizer {
  display: none !important;
  pointer-events: none !important;
}

/* =========================
    Toolbar contextual
    ========================= */

.context-toolbar {
  position: absolute;
  display: none;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  padding: 4px;
  z-index: 9999; /* por encima de todo */
  gap: 4px;
  align-items: center;
}

.context-toolbar button {
  background: transparent;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
}

/* =========================
    Text Boxes
    ========================= */

.dragHandle {
  background: transparent; /* quitar borde/relleno gris superior */
  /* padding: 3px 5px; */
  cursor: move;
  text-align: center;
  font-size: 12px;
}

.textContent {
  display: inline-block; /* clave para que mida al contenido */
  width: auto; /* deja que se auto-ajuste */
  min-width: 0; /* permite achicar por debajo de 100 */
  height: auto;
  padding: 3px 6px; /* un poco de aire */
  box-sizing: border-box;
  overflow: visible;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: center;
}

/* Contenedor de caja de texto + mini controles */
.textBoxContainer {
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
}

.textBoxContainer .mini-controls {
  position: absolute;
  bottom: -9px;
  right: auto;
  left: auto;
  display: flex;
  gap: 6px;
  z-index: 10;
  justify-content: center;
  align-items: center;
  width: auto;
  padding: 2px 6px;
  pointer-events: auto;
}

.textBoxContainer .mini-controls input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  padding: 0;
  border: 1px solid #aaa;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

/* Que no salgan en el PDF */
@media print {
  .textBoxContainer .mini-controls {
    display: none !important;
  }
}

/* =========================
    Botones/header varios
    ========================= */

#toggleMenu {
  position: absolute;
  top: 10px;
  left: 3px;
  z-index: 1000;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  background: linear-gradient(
    0deg,
    rgba(27, 49, 197, 1) 0%,
    rgba(47, 146, 214, 1) 100%
  );
  border: none;
  color: whitesmoke;
  border-radius: 6px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
}

.home-link {
  padding: 5px 10px;
  cursor: pointer;
  flex: 1 1 auto;
  background: linear-gradient(
    0deg,
    rgba(27, 49, 197, 1) 0%,
    rgba(47, 146, 214, 1) 100%
  );
  border: none;
  color: whitesmoke;
  border-radius: 6px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  text-decoration: none;
  text-align: center;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

/* =========================
    Casilleros fijos en el lienzo
    ========================= */

#textBoxes {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border: 1px solid #ccc;
  z-index: 500;
}

#textBoxes .textBox {
  margin-bottom: 5px;
}

#textBoxes label {
  display: inline-block;
  width: 120px;
  font-weight: bold;
}

input {
  height: 16px;
}

#textBoxes input {
  width: 150px;
  padding: 2px;
}

/* =========================
    Área a imprimir
    ========================= */

#printArea {
  margin-top: 10px;
}

/* =========================
    Tabla Input List
    ========================= */

#inputListContainer,
#outputListContainer,
.extraTableContainer {
  position: relative;
  margin: 24px auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(15, 23, 42, 0.07);
  padding: 18px 3% 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

#inputListContainer h2,
#outputListContainer h2,
.extraTableContainer h2 {
  font-size: 15px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  color: #1e293b;
  margin: 0 0 12px 0;
  padding-right: 44px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
  letter-spacing: 0.02em;
}

.table-import-shortcut-host {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}

.table-import-shortcut-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92);
  color: #1e3a8a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
}

.table-import-shortcut-icon {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

.table-import-shortcut-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.table-import-shortcut-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

#inputListTable,
#outputListTable,
.lsv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  table-layout: auto;
  word-break: break-word;
}

#inputListTable th,
#inputListTable td,
#outputListTable th,
#outputListTable td,
.lsv-table th,
.lsv-table td {
  padding: 9px 12px;
  text-align: center;
  font-size: 13px;
  font-family: "Poppins", sans-serif;
  line-height: 1.4;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

#inputListTable th,
#outputListTable th,
.lsv-table th {
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  color: #475569;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #e2e8f0;
}

#inputListTable th,
#outputListTable th,
.lsv-table th {
  position: relative;
  padding-right: 36px;
}

.lsv-col-move-wrap {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.lsv-col-move-trigger {
  display: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  border: 1px solid rgba(71, 85, 105, 0.25);
  border-radius: 4px;
  background: #ffffff;
  color: #334155;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.lsv-col-move-trigger::before {
  content: "\22EE";
  font-size: 11px;
  font-weight: 700;
}

.lsv-col-move-panel {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.lsv-col-move {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  border: 1px solid rgba(71, 85, 105, 0.25);
  border-radius: 4px;
  background: #ffffff;
  color: #334155;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lsv-col-move-left::before {
  content: "\2039";
  font-size: 13px;
  font-weight: 700;
}

.lsv-col-move-right::before {
  content: "\203A";
  font-size: 13px;
  font-weight: 700;
}

.lsv-col-move:hover {
  background: #e2e8f0;
}

.lsv-col-move-row th {
  background: #f8fafc !important;
  padding: 4px 6px !important;
  border-top: 0 !important;
}

.lsv-col-move-head {
  text-align: center !important;
}

.lsv-col-move-stack {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.lsv-col-edit-toggle {
  display: none !important;
}

@media print {
  .lsv-col-move-wrap {
    display: none !important;
  }
}

@media (max-width: 770px) {
  #inputListTable th,
  #outputListTable th,
  .lsv-table th {
    padding-right: 10px !important;
  }

  .lsv-col-move-wrap {
    display: none;
  }

  .lsv-table.lsv-col-editing th {
    padding-bottom: 6px !important;
    overflow: hidden;
  }

  .lsv-table.lsv-col-editing .lsv-col-move-wrap {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    margin-top: 5px;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .lsv-table.lsv-col-editing .lsv-col-move-trigger {
    display: none !important;
  }

  .lsv-table.lsv-col-editing .lsv-col-move-panel {
    display: inline-flex !important;
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 4px;
    max-width: 100%;
    box-shadow: none;
  }

  .lsv-table.lsv-col-editing .lsv-col-move {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border-radius: 6px;
  }

  .lsv-table.lsv-col-editing .lsv-col-move-left::before,
  .lsv-table.lsv-col-editing .lsv-col-move-right::before {
    font-size: 11px;
  }
}

/* Filas zebra */
#inputListTable tbody tr:nth-child(even),
#outputListTable tbody tr:nth-child(even),
.lsv-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

#inputListTable tbody tr:hover,
#outputListTable tbody tr:hover,
.lsv-table tbody tr:hover {
  background: #eef6ff;
  transition: background 0.15s ease;
}

#inputListTable th[contenteditable="true"],
#inputListTable td[contenteditable="true"],
#outputListTable th[contenteditable="true"],
#outputListTable td[contenteditable="true"],
.lsv-table th[contenteditable="true"],
.lsv-table td[contenteditable="true"] {
  outline: none;
  cursor: text;
}

#inputListTable td[contenteditable="true"]:focus,
#outputListTable td[contenteditable="true"]:focus,
.lsv-table td[contenteditable="true"]:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(11, 92, 255, 0.18);
  border-radius: 4px;
}

/* Botones de tabla (Agregar fila, Eliminar, etc.) */
#inputListContainer > button,
#outputListContainer > button,
.lsv-table > button,
.lsv-table-btn,
.lsv-table-container > button,
#inputTableContent ~ button,
#outputTableContent ~ button {
  padding: 9px 14px;
  cursor: pointer;
  margin-right: 6px;
  background: linear-gradient(
    90deg,
    var(--accent-2, #1170ff),
    var(--accent, #0b5fff)
  );
  border: none;
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12px;
  font-family: "Poppins", sans-serif;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 10px 28px rgba(11, 92, 255, 0.12);
}

/* Botón diferenciado para Mostrar/Ocultar tabla */
.lsv-table-btn--toggle,
#toggleInputContent,
#toggleOutputContent,
.toggleExtraTableContent {
  background: linear-gradient(90deg, #0f766e, #14b8a6) !important;
  color: #ffffff !important;
  border: 1px solid rgba(15, 118, 110, 0.35) !important;
  box-shadow: 0 10px 22px rgba(20, 184, 166, 0.22) !important;
}

.lsv-table-btn--toggle:hover,
#toggleInputContent:hover,
#toggleOutputContent:hover,
.toggleExtraTableContent:hover {
  filter: brightness(1.03);
}

/* Botones ▲/▼ dentro de celdas de mover (pequeños y discretos) */
#inputListTable td button,
#outputListTable td button,
.lsv-table td button {
  padding: 2px 6px;
  margin: 1px;
  font-size: 11px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #475569;
  border: none;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 22px;
  transition: background 0.12s ease;
  font-weight: 600;
  line-height: 1;
}

#inputListTable td button:hover,
#outputListTable td button:hover,
.lsv-table td button:hover {
  background: #cbd5e1;
  transform: none;
  box-shadow: none;
  filter: none;
}

#inputListTable td button:active,
#outputListTable td button:active,
.lsv-table td button:active {
  background: #94a3b8;
  transform: none;
  box-shadow: none;
}

.lsv-row-actions-cell {
  padding: 2px 2px !important;
}

.lsv-row-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.lsv-table td .lsv-row-btn {
  min-width: 24px;
  min-height: 22px;
  padding: 2px 4px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
}

.lsv-table td .lsv-row-drag-handle {
  cursor: grab;
}

.lsv-table td .lsv-row-drag-handle:active {
  cursor: grabbing;
}

#inputListTable td .lsv-row-drag-handle,
#outputListTable td .lsv-row-drag-handle,
.lsv-table td .lsv-row-drag-handle {
  cursor: grab !important;
}

#inputListTable td .lsv-row-drag-handle:hover,
#outputListTable td .lsv-row-drag-handle:hover,
.lsv-table td .lsv-row-drag-handle:hover {
  cursor: grab !important;
}

#inputListTable td .lsv-row-drag-handle:active,
#outputListTable td .lsv-row-drag-handle:active,
.lsv-table td .lsv-row-drag-handle:active {
  cursor: grabbing !important;
}

.lsv-table td .lsv-row-delete-btn {
  color: #b91c1c;
}

.lsv-row-draggable.lsv-row-dragging {
  opacity: 0.6;
}

.lsv-row-drop-before td {
  box-shadow: inset 0 2px 0 #0ea5e9;
}

.lsv-row-drop-after td {
  box-shadow: inset 0 -2px 0 #0ea5e9;
}

/* Botón "Agregar Tabla" – destacado */
#addExtraTableBtn {
  padding: 14px 3%;
  font-size: 15px;
  margin-top: 18px;
  margin-bottom: 10px;
  background: linear-gradient(
    90deg,
    var(--accent-2, #1170ff),
    var(--accent, #0b5fff)
  );
  border: 2px dashed rgba(255, 255, 255, 0.45);
  outline: 2px solid #0b5fff;
  box-shadow: 0 10px 28px rgba(11, 92, 255, 0.12);
  letter-spacing: 0.5px;
  border-radius: 10px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  color: white;
}

/* Contenedor de tablas extras – ancho completo */
#extraTablesContainer {
  width: 100%;
  box-sizing: border-box;
}

#addExtraTableBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(11, 92, 255, 0.38);
  filter: brightness(1.08);
}

#addExtraTableBtn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(11, 92, 255, 0.22);
}

/* =========================
    Tabla Output List
    ========================= */

/* (Output List styles merged above with Input List) */

.lsv-table h2,
.titleeditable {
  font-size: 15px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  color: #1e293b;
  margin-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 8px;
}

/* =========================
    Columnas “Color” angostas
    ========================= */

#inputListTable th:nth-child(2),
#inputListTable td:nth-child(2),
#outputListTable th:nth-child(2),
#outputListTable td:nth-child(2),
.lsv-table th:nth-child(2),
.lsv-table td:nth-child(2),
.lsv-table th:nth-child(2),
.lsv-table td:nth-child(2) {
  width: 54px;
  max-width: 54px;
  padding: 2px 4px;
  white-space: nowrap;
}

/* =========================
    Columna "Mover" angosta
    ========================= */

#inputListTable th:first-child,
#inputListTable td:first-child,
#outputListTable th:first-child,
#outputListTable td:first-child,
.lsv-table th:first-child,
.lsv-table td:first-child {
  width: 74px;
  max-width: 74px;
  white-space: nowrap;
  text-align: center;
  padding: 2px 2px;
}

/* Input color ocupa toda la celda */
#inputListTable td:nth-child(2) input[type="color"],
#outputListTable td:nth-child(2) input[type="color"],
.lsv-table td:nth-child(2) input[type="color"],
.lsv-table td:nth-child(2) input[type="color"] {
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}

/* =========================
    Botones varios
    ========================= */

#uploadImageButton {
  padding: 5px 10px;
  cursor: pointer;
  flex: 1 1 auto;
  background: linear-gradient(
    90deg,
    var(--accent-2, #1170ff),
    var(--accent, #0b5fff)
  );
  border: none;
  color: whitesmoke;
  border-radius: 10px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  width: 100%;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
  margin-top: 10px;
}

/* Botón para detalles generales */
#toggleDetailsBtn {
  /* margin-left: 13px; */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-bottom: 6px;
  padding: 9px 14px;
  cursor: pointer;
  background: linear-gradient(
    90deg,
    var(--accent-2, #1170ff),
    var(--accent, #0b5fff)
  );
  border: none;
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12px;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  box-shadow: 0 10px 28px rgba(11, 92, 255, 0.12);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}

/* =========================
    Detalles generales
    ========================= */

/* Wrapper de detalles generales – ancho completo con padding */
.menu-item[data-no-search="true"] {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 3% 14px;
  margin: 24px auto;
  text-align: left;
}

#generalDetails {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  resize: none;
  font-family: "Poppins", sans-serif;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}

#generalDetailsPrint {
  display: none; /* SIEMPRE oculto en pantalla */
}

/* =========================
    Portada (cover)
    ========================= */

#coverPage {
  display: none;
  text-align: center;
  padding: 100px 40px;
  font-family: "Poppins", sans-serif;
}

/* =========================
   Modal Portada (Cover)
   ========================= */

.cover-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 30, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cover-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

#coverEditor {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  max-width: 480px;
  width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  padding: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  font-family: "Poppins", sans-serif;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#coverEditor.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Scrollbar personalizado */
#coverEditor::-webkit-scrollbar {
  width: 6px;
}
#coverEditor::-webkit-scrollbar-track {
  background: transparent;
}
#coverEditor::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

/* Botón cerrar */
.cover-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.15s ease;
  z-index: 1;
}

.cover-modal-close:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  transform: scale(1.05);
}

/* Header del modal */
.cover-modal-header {
  text-align: center;
  padding: 32px 32px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
  border-radius: 20px 20px 0 0;
}

.cover-modal-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--f-accent), var(--f-accent-2));
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(11, 95, 255, 0.25);
}

#coverEditor h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.01em;
}

.cover-modal-subtitle {
  margin: 0;
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 400;
}

/* Cuerpo del modal */
.cover-modal-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Campos del formulario */
.cover-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#coverEditor .cover-field label {
  display: block;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
}

#coverEditor input[type="text"],
#coverEditor textarea {
  width: 100%;
  padding: 11px 14px;
  font-size: 0.9rem;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  background: #f8fafc;
  color: #1e293b;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

#coverEditor input[type="text"]:focus,
#coverEditor textarea:focus {
  outline: none;
  border-color: var(--accent, #0b5fff);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.1);
}

#coverEditor input[type="text"]::placeholder,
#coverEditor textarea::placeholder {
  color: #a0aec0;
}

#coverEditor textarea {
  resize: vertical;
  min-height: 72px;
}

#coverEditor select {
  width: 100%;
  padding: 11px 14px;
  font-size: 0.9rem;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  background: #f8fafc;
  color: #1e293b;
}

#coverEditor select:focus {
  outline: none;
  border-color: var(--accent, #0b5fff);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(11, 95, 255, 0.1);
}

.cover-inline-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.cover-inline-control input[type="range"] {
  width: 100%;
  accent-color: var(--f-accent);
}

.cover-inline-control span {
  min-width: 52px;
  text-align: right;
  font-size: 0.8rem;
  color: #475569;
  font-weight: 600;
}

#instrumentSuggestBox {
  position: absolute;
  z-index: 5000;
  max-height: 240px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.2);
  padding: 4px;
}

#instrumentSuggestBox .instrument-suggest-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.2;
}

#instrumentSuggestBox .instrument-suggest-item:hover {
  background: #eff6ff;
}

#instrumentSuggestBox .instrument-suggest-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 4px 6px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  margin-bottom: 4px;
}

#instrumentSuggestBox .instrument-suggest-chip {
  border: 1px solid rgba(11, 95, 255, 0.2);
  background: #f8fbff;
  color: #0b5fff;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

#instrumentSuggestBox .instrument-suggest-chip.active {
  background: #0b5fff;
  color: #ffffff;
  border-color: #0b5fff;
}

/* Zona de logo / dropzone */
.cover-logo-dropzone {
  position: relative;
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  background: #f9fafb;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
  overflow: hidden;
}

.cover-logo-dropzone:hover {
  border-color: var(--accent, #0b5fff);
  background: #f0f5ff;
}

.cover-logo-dropzone.has-image {
  border-style: solid;
  border-color: #e2e8f0;
  padding: 12px;
}

.cover-logo-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  font-size: 0;
}

.cover-logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  pointer-events: none;
}

.cover-logo-placeholder span {
  font-size: 0.85rem;
  font-weight: 500;
  color: #64748b;
}

.cover-logo-placeholder small {
  font-size: 0.72rem;
  color: #a0aec0;
}

.cover-logo-dropzone.has-image .cover-logo-placeholder {
  display: none;
}

#coverLogoPreview {
  display: none;
  max-width: 260px;
  max-height: 150px;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: contain;
}

.cover-logo-dropzone.has-image #coverLogoPreview {
  display: block;
}

/* =========================
    Marcas / patrocinadores
    ========================= */
.marcas-container {
  margin-top: 5px;
  text-align: center;
  background-color: #f0f0f0;
}

.marcas-lista {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.marcas-img img {
  object-fit: contain;
  transition: transform 0.2s ease;
}

.marcas-img img:hover {
  transform: scale(1.05);
}

/* =========================
    Dibujo libre - botón activo
    ========================= */

#toggleDraw.active {
  background: linear-gradient(0deg, #ff8c00 0%, #ffa94d 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(255, 140, 0, 0.35);
}

#toggleDimension.active {
  background: linear-gradient(0deg, #ff8c00 0%, #ffa94d 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(255, 140, 0, 0.35);
}

#toggleDraw:focus-visible {
  outline: 2px solid #ffa94d;
  outline-offset: 2px;
}

#toggleDimension:focus-visible {
  outline: 2px solid #ffa94d;
  outline-offset: 2px;
}

/* Cotas / Dibujo libre: estilo base más consistente */
#toggleDraw,
#toggleDimension {
  min-height: 36px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Botones inline para líneas/cotas */
#inlineDeleteBtn,
#inlineLayerBtn {
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: 1;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 14px rgba(2, 8, 23, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    filter 0.14s ease;
}

#inlineDeleteBtn {
  min-width: 28px;
  padding: 0 9px;
  background: linear-gradient(180deg, #ef4444, #dc2626);
}

#inlineLayerBtn {
  min-width: 64px;
  padding: 0 12px;
  font-size: 11px;
  background: linear-gradient(180deg, #0b5fff, #2563eb);
}

#inlineDeleteBtn:hover,
#inlineLayerBtn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px rgba(2, 8, 23, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  filter: brightness(1.04);
}

#inlineDeleteBtn:active,
#inlineLayerBtn:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 3px 10px rgba(2, 8, 23, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}

/* =========================
    Tutorial móvil (modal)
    ========================= */

body.menu-open {
  overflow: hidden;
}

/* Backdrop + modal */
#mobileTutorialBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100050;
  display: none;
  pointer-events: none;
}
#mobileTutorialBackdrop.open {
  display: block;
  pointer-events: auto;
}

#mobileTutorialModal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  width: calc(250px + 8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 100060;
  display: none;
  font-family: "Poppins", sans-serif;
  text-align: center;
  pointer-events: auto;
  touch-action: manipulation;
}
#mobileTutorialModal.open {
  display: block;
}

#mobileTutorialModal .modal-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
#mobileTutorialModal .modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#mobileTutorialModal img {
  width: 250px;
  height: 250px;
  object-fit: contain;
  display: block;
}
#mobileTutorialModal .modal-cta {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(
    0deg,
    rgba(27, 49, 197, 1) 0%,
    rgba(47, 146, 214, 1) 100%
  );
  color: #fff;
  font-weight: 600;
}

.modal-text {
  margin: 0;
}

/* ===== Desktop Tutorial Modal ===== */
.desktop-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1500;
  display: none;
}
.desktop-backdrop.open {
  display: block;
}

.desktop-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  width: min(680px, 92vw);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  z-index: 50100;
  display: none;
  font-family: "Poppins", sans-serif;
  text-align: center;
}
.desktop-modal.open {
  display: block;
}

.desktop-modal .modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}

.desktop-modal .modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.desktop-modal img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}

.desktop-modal .modal-title {
  margin: 6px 0 0 0;
  font-size: 18px;
  font-weight: 600;
}

.desktop-modal .modal-cta {
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(
    0deg,
    rgba(27, 49, 197, 1) 0%,
    rgba(47, 146, 214, 1) 100%
  );
  color: #fff;
  font-weight: 600;
}

/* Ocultar en móvil para no pisar el modal móvil */
@media (max-width: 768px),
  (hover: none) and (pointer: coarse) and (max-height: 560px) {
  #desktopTutorialBackdrop,
  #desktopTutorialModal {
    display: none !important;
  }
}

/* No mostrar en impresión */
@media print {
  #desktopTutorialBackdrop,
  #desktopTutorialModal {
    display: none !important;
  }
}

/* =========================
    Reglas para impresión
    ========================= */

#printWatermark,
.print-only {
  display: none;
}

.print-section-order-host {
  display: block;
  width: 100%;
}

@media print {
  #menu,
  .menu,
  .menu-fixed,
  .menu-scroll,
  #openMenuMobile,
  #menuBackdrop,
  #toggleMenu,
  .no-print {
    display: none !important;
  }

  #mobileTutorialBackdrop,
  #mobileTutorialModal {
    display: none !important;
  }

  #openMenuMobile,
  #menuBackdrop {
    display: none !important;
  }

  /* Ocultar preview de formas en el PDF */
  .menu-item .shapePreview {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  #canvasWatermark {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    opacity: 0.3;
    z-index: 1000;
    pointer-events: pointer;
    font-family: "Poppins", sans-serif;
  }

  #canvasWatermark img {
    width: 40px;
    margin-bottom: 5px;
  }

  #canvasWatermark .watermark-text {
    font-size: 11px;
    color: #444444;
  }

  body::after {
    content: "https://leonsonidovirtualpro.com";
    position: fixed;
    bottom: 10mm;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    font-family: "Poppins", sans-serif;
    opacity: 0.3;
    z-index: 9999;
  }

  #toggleDetailsBtn {
    display: none !important;
  }

  #coverPage {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* 🚫 NO usar height: 100vh en impresión */
    height: auto !important;
    min-height: 90vh; /* opcional, para que quede grande pero sin desbordar */
    box-sizing: border-box;

    /* Bajamos un poco el padding para no pasarnos de alto */
    padding: 40px 40px 60px;

    text-align: center;
    font-family: "Poppins", sans-serif;

    page-break-after: always;
    break-after: page;
  }

  /* Dejamos la .container sin cortes forzados antes,
     como ya tenías: */
  .container {
    page-break-before: auto !important;
    break-before: auto !important;
  }

  #coverPage img#printLogo {
    max-width: 80%;
    height: auto;
    margin-bottom: 30px;
  }

  #coverPage h1#printTitle {
    font-size: 40pt;
    margin-bottom: 20px;
  }

  #coverPage pre#printContacts {
    font-size: 16pt;
    margin-bottom: 20px;
    white-space: pre-wrap;
    font-family: "Poppins", sans-serif;
  }

  #coverPage p#printVersion {
    font-size: 14pt;
    font-style: italic;
    color: #333;
    font-family: "Poppins", sans-serif;
  }

  #coverEditor {
    display: none !important;
  }

  #generalDetails {
    display: none !important;
  }

  #generalDetailsPrint {
    display: block !important;
    font-size: 14px !important;
    white-space: pre-wrap !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
    font-family: "Poppins", sans-serif !important;
  }

  /* Keep title attached to following content in print */
  .details-title {
    page-break-after: avoid !important;
    break-after: avoid-page !important;
    margin-bottom: 6px !important;
  }

  /* Tablas en páginas separadas */
  #inputListContainer {
    break-before: page !important;
    page-break-before: always !important;
  }

  #outputListContainer {
    break-before: page !important;
    page-break-before: always !important;
  }

  /* Forzar que se impriman los colores de fondo de las formas */
  .draggable.shapeContainer,
  .draggable.shapeContainer *,
  .draggable.textBoxContainer,
  .draggable.textBoxContainer .textContent {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-sizing: border-box;
  }

  /* Ya tenías esto para el toolbar */
  .context-toolbar {
    display: none !important;
  }

  /* Oculta la línea azul de selección en PDF */
  .draggable.selected,
  .draggable:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Ocultar la columna “Color” (es la segunda tras “Mover”) */
  #inputListTable th:nth-child(2),
  #inputListTable td:nth-child(2),
  #outputListTable th:nth-child(2),
  #outputListTable td:nth-child(2),
  .lsv-table th:nth-child(2),
  .lsv-table td:nth-child(2),
  .lsv-table th:nth-child(2),
  .lsv-table td:nth-child(2) {
    display: none !important;
  }

  /* Fuerza a que se impriman los colores de fondo de las filas */
  #inputListTable tbody tr,
  #outputListTable tbody tr,
  .lsv-table tbody tr,
  .lsv-table tbody tr {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Ocultar columna Mover (primera) */
  #inputListTable th:first-child,
  #inputListTable td:first-child,
  #outputListTable th:first-child,
  #outputListTable td:first-child,
  .lsv-table th:first-child,
  .lsv-table td:first-child,
  .lsv-table th:first-child,
  .lsv-table td:first-child {
    display: none !important;
  }

  ins.adsbygoogle {
    display: none !important;
  }

  #printWatermark {
    display: block;
    position: fixed;
    bottom: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0.2;
    z-index: 1000;
    font-family: "Poppins", sans-serif;
  }

  #printWatermark .watermark-text {
    font-size: 10px;
    margin-bottom: 2px;
    color: #000;
  }

  #printWatermark img {
    width: 50px;
    height: auto;
  }

  /* Oculta los botones de tabla y el botón de imprimir al imprimir */
  #inputListContainer button,
  #outputListContainer button,
  #printButton {
    display: none;
  }

  #toggleMenu,
  .menu {
    display: none;
  }

  #printArea {
    margin: 0;
  }

  #inputListContainer,
  #outputListContainer {
    display: block;
    justify-self: stretch !important;
    width: 100% !important;
  }

  #inputListContainer {
    margin-top: 160px !important;
  }

  /* Opcional: grises en imágenes del canvas */
  body.grayscale #canvas img {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  /* No imprimas la capa de dibujo temporal */
  #drawingCanvas {
    display: none !important;
  }

  #selectionMarquee {
    display: none !important;
  }

  /* Asegura fondo blanco del contenedor al imprimir */
  #canvas {
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Los canvases en sí sin fondo (la capa blanca la pintás por JS en el permanente) */
  #permanentCanvas,
  #drawingCanvas {
    background-color: transparent !important;
    /* transform: none !important; */
  }

  @page {
    margin: 10mm 5mm;
  }
  /* El contenedor actúa como “marco” que centra su contenido */
  .container {
    display: grid !important;
    place-items: start center !important; /* centra horizontal, arranca arriba */
  }
  /* Evita que el contenedor “corte” el lienzo escalado */
  .canvas {
    overflow: visible !important;
    /* transform: scale(0.9) !important; */
    transform-origin: center center !important;
    margin: 0 auto !important;
    /* sin break-after acá */
  }

  /* 👉 Escala -5% los dos canvas que se imprimen */
  #permanentCanvas,
  #drawingCanvas {
    /* transform: scale(0.95); */
    transform-origin: top center; /* o 'center' si preferís centrado */
    /* -webkit-transform: scale(0.95); */
    -webkit-transform-origin: top left;
  }
}

/* Fallback WebKit muy antiguo (si lo necesitás) */
@media print and (-webkit-min-device-pixel-ratio: 0) {
  .canvas {
    zoom: 0.7;
  } /* mismo factor que arriba */
}

/* =========================
    Móvil (drawer)
    ========================= */

@media (max-width: 768px),
  (hover: none) and (pointer: coarse) and (max-height: 560px) {
  /* Drawer: el menú sale desde la izquierda y no ocupa layout */
  .menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(92vw, 380px);
    height: 100vh;
    max-height: 90vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    flex: none; /* que no ocupe layout */
    overflow-y: auto; /* aseguramos scroll */
    -webkit-overflow-scrolling: touch;
  }
  .menu.open {
    transform: translateX(0);
  }

  /* Backdrop para tapar el fondo y permitir cerrar con un tap */
  #menuBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
    display: block; /* se activa con .open */
  }
  #menuBackdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Botón flotante (FAB) para abrir el drawer */
  #openMenuMobile {
    position: fixed;
    width: 200px;
    left: 50%;
    right: auto;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1200;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;

    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(
      0deg,
      rgba(27, 49, 197, 1) 0%,
      rgba(47, 146, 214, 1) 100%
    );
    color: #fff;
    border: none;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    cursor: pointer;
  }

  /* UI tweaks ya existentes */
  #toggleMenu {
    display: none !important;
  }

  .container {
    flex-direction: column;
    padding-bottom: 56px;
  }

  #inputListContainer,
  #outputListContainer {
    overflow-x: auto;
  }

  .canvas {
    min-width: 100vw;
    min-height: calc(100vh - 50px);
  }

  #menuControls button,
  .home-link,
  #fileControls button,
  #inputListContainer button,
  #outputListContainer button {
    font-size: 10px;
  }

  #inputListContainer button,
  #outputListContainer button {
    padding: 5px 7px;
  }

  #textBoxes {
    right: 0;
    top: 30%;
  }

  #textBoxes label {
    text-align: left;
  }

  .menu {
    width: 100%;
    height: auto;
    max-height: 70vh;
    overflow-y: auto;
    flex: 0 0 250px;
  }

  #toggleMenu {
    position: fixed;
    top: 10px;
    left: 3px;
    font-size: 10px;
  }

  /* Para las tablas, permitimos scroll horizontal */
  #inputListContainer,
  #outputListContainer {
    overflow-x: auto;
  }
}
/* ====== PRINT: Desktop (como antes) ====== */
@media print {
  /* Contenedores de tablas: centrados y más angostos */
  #inputListContainer,
  #outputListContainer,
  .extraTableContainer,
  .lsv-table-container {
    width: 80%; /* ~20% más chico que 100% */
    margin: 0 auto 12px auto; /* centrado + espacio abajo */
    transform: none !important; /* por si quedó el scale anterior */
  }

  /* La tabla ocupa todo el ancho del contenedor centrado */
  .lsv-table {
    width: 100%;
  }

  .container {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }
  .canvas {
    /* transform: scale(0.8); */
    transform-origin: top center;
    margin: 0 auto !important;
    overflow: visible !important;
    min-width: auto !important;
  }
}

/* 14 de noviembre */
/* =========================
   Cariturizá tu StagePlot — Modal Styles
   (match exact HTML structure provista)
   ========================= */

/* Paleta base (fallback si no tenés variables globales) */
:root {
  --yellow: #ffd90f;
  --blue: #4ec3e0;
  --red: #e63946;
  --white: #ffffff;
  --dark: #2b2b2b;
}

/* Backdrop con radial + leve blur */
#contestBackdrop.contest-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    120% 120% at 50% 20%,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 60%,
    rgba(0, 0, 0, 0.25) 100%
  );
  backdrop-filter: blur(2px);
  z-index: 2400;
  display: none; /* tu JS lo alterna */
}
#contestBackdrop.contest-backdrop.open {
  display: block;
}

/* Contenedor modal centrado */
#contestModal.contest-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 2410;
  /* oculto por defecto; tu JS lo abre */
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
#contestModal.contest-modal.open {
  visibility: visible;
  opacity: 1;
}

/* “Card” principal (usando el propio modal como card) */
#contestModal.contest-modal {
  /* usamos un wrapper interno visual con pseudo-elementos */
}
#contestModal.contest-modal::before {
  content: "";
  position: fixed;
  width: min(720px, 94vw);
  height: 28px;
  /* centrado horizontal y ubicado justo encima del card */
  left: 50%;
  top: calc(50% - (min(560px, 90vh) / 2) - 14px);
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--yellow), var(--blue));
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.06);
  z-index: -1;
}

/* Bloque central (card) */
#contestModal.contest-modal > *:not(.contest-close) {
  /* vamos a envolver visualmente con un fondo usando un contenedor “virtual” */
}
#contestModal.contest-modal {
  /* creamos el “card box” con padding y borde usando un contenedor interno */
}
#contestModal.contest-modal .contest-close,
#contestModal.contest-modal #contestTitle,
#contestModal.contest-modal .contest-img,
#contestModal.contest-modal .contest-text,
#contestModal.contest-modal .contest-cta {
  /* nada acá; estilos abajo */
}

/* Caja visual del card (usando un wrapper fantasma) */
#contestModal.contest-modal ._contestCard {
  /* si querés agregar este div, podés, pero como no está en tu HTML,
     simulamos la tarjeta con un “fondo” vía ::after en el modal */
}
#contestModal.contest-modal::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(720px, 94vw);
  min-height: min(560px, 90vh);
  background: var(--white);
  border: 5px solid var(--yellow);
  border-radius: 22px;
  box-shadow:
    0 10px 0 #c8ad00,
    0 18px 36px rgba(0, 0, 0, 0.25);
  z-index: -1;
  transform: translate(-50%, -50%) scale(0.98);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}
#contestModal.contest-modal.open::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Botón cerrar (esquina) */
#contestModal .contest-close {
  position: absolute;
  top: calc(50% - min(560px, 90vh) / 2 + 12px);
  right: calc(50% - min(720px, 94vw) / 2 + 12px);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.12);
  color: var(--dark);
  font-size: 20px;
  line-height: 30px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  z-index: 1;
}
#contestModal .contest-close:hover {
  background: rgba(0, 0, 0, 0.06);
  transform: rotate(4deg);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}

/* Layout interno: centrado en columna */
#contestModal #contestTitle,
#contestModal .contest-img,
#contestModal .contest-text,
#contestModal #contestCTA {
  max-width: min(660px, 86vw);
}

/* Título */
#contestModal #contestTitle {
  margin: 8px 0 12px;
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--red);
  font-size: clamp(1.25rem, 2.2vw + 0.8rem, 1.9rem);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}

/* Imagen */
#contestModal .contest-img {
  display: block;
  width: 100%;
  max-height: 50vh;
  object-fit: cover;
  border-radius: 14px;
  border: 4px solid var(--yellow);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
  margin: 10px auto 14px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}
#contestModal .contest-img:hover {
  transform: translateY(-2px) rotate(-0.2deg);
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.18);
  filter: saturate(1.02);
}

/* Texto */
#contestModal .contest-text {
  text-align: center;
  color: var(--dark);
  font-weight: 700;
  margin: 0 0 12px;
  font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.05rem);
}

/* Botón CTA */
#contestModal .contest-cta {
  display: block;
  margin: 0 auto 6px;
  background: var(--red);
  color: var(--white);
  padding: 0.9rem 1.6rem;
  border-radius: 28px;
  border: 0;
  font-weight: 900;
  font-family: inherit;
  text-decoration: none;
  box-shadow: 0 4px 0 #a62833;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}
#contestModal .contest-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #a62833;
  filter: brightness(1.03);
}
#contestModal .contest-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 0 #a62833;
}

/* Responsivo fino */
@media (max-width: 520px) {
  #contestModal.contest-modal::after {
    border-width: 4px;
    border-radius: 18px;
  }
  #contestModal .contest-img {
    border-width: 3px;
    border-radius: 12px;
  }
  #contestModal .contest-close {
    right: calc(50% - min(720px, 94vw) / 2 + 8px);
    top: calc(50% - min(560px, 90vh) / 2 + 8px);
  }
}

/* Accesibilidad: menos animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  #contestBackdrop,
  #contestModal,
  #contestModal::after,
  #contestModal .contest-img,
  #contestModal .contest-cta {
    transition: none !important;
  }
}

/* ==== FIX layout del modal del concurso: usar flex y centrar contenido ==== */
#contestModal.contest-modal {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px; /* separación entre título, imagen, texto y botón */
  padding: 20px 22px !important; /* asegura que el contenido no toque el borde del card */
}

/* Asegura ancho legible del contenido dentro del card */
#contestModal #contestTitle,
#contestModal .contest-img,
#contestModal .contest-text,
#contestModal #contestCTA {
  max-width: min(660px, 86vw) !important;
}

/* Título dentro del card (evita solaparse con la franja ::before) */
#contestModal #contestTitle {
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  text-align: center;
  z-index: 0; /* el card está en ::after con z-index:-1, así que el título queda encima */
}

/* Por si algún estilo previo afectaba el flujo normal de los hijos */
#contestModal .contest-img,
#contestModal .contest-text,
#contestModal #contestCTA {
  position: static !important;
}

/* Opcional: si aún notás que la franja superior ::before “toca” el título en pantallas chicas,
   damos un respirito extra arriba */
@media (max-height: 680px) {
  #contestModal.contest-modal {
    padding-top: 28px !important;
  }
}
/* 31 de diciembre   */
/* Botón de idioma */
#menuControls button.lang-toggle {
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #ffb300;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #111111;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 179, 0, 0.35);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

#menuControls button.lang-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(255, 179, 0, 0.6);
  background: #1d1d1d;
}

#menuControls button.lang-toggle:active {
  transform: translateY(0);
  box-shadow: 0 0 0 1px rgba(255, 179, 0, 0.4);
}
@media print {
  .no-print-cover {
    display: none !important;
    page-break-before: auto !important;
    page-break-after: auto !important;
  }
}
@media print {
  body {
    margin: 0;
    font-family: "Poppins", sans-serif !important;
  }

  /* Forzar Poppins en todos los elementos de texto al imprimir */
  *,
  th,
  td,
  pre,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  input,
  textarea,
  select,
  button,
  label,
  span,
  div,
  li,
  a {
    font-family: "Poppins", sans-serif !important;
  }

  /* Ocultar menú, logos, etc. ya los tenés como .no-print, pero por las dudas */
  .no-print {
    display: none !important;
  }

  /* Asegurá que el escenario no se estire raro en print */
  .canvas {
    /* si querés forzar un aspecto, podés usar algo fijo tipo: */
    /* width: 1200px !important;
       height: 800px !important; */
  }
}

@media print {
  .no-print {
    display: none !important;
  }
}

/* =========================
   Modern UI variables & overrides (MVP)
   ========================= */
:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --muted: #6b7280;
  --text: #0f172a;
  --brand: #2563eb; /* azul primario */
  --accent: #06b6d4; /* cian */
  --danger: #ef4444;
  --radius: 8px;
  --gap: 10px;
  --shadow-1: 0 6px 18px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 2px 6px rgba(16, 24, 40, 0.08);
}

/* Base UI */
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", sans-serif;
}

/* Utility button style */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, var(--surface), #fbfdff);
  color: var(--text);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}
.btn.primary {
  background: linear-gradient(180deg, var(--brand), #1e40af);
  color: white;
  border-color: transparent;
}
.btn.ghost {
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* Details toolbar styles */
.details-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9),
    rgba(250, 250, 250, 0.95)
  );
  box-shadow: var(--shadow-2);
}
.details-toolbar button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: transparent;
  color: var(--text);
  font-weight: 600;
}
.details-toolbar button:hover {
  background: rgba(37, 99, 235, 0.06);
}
.details-toolbar button.active {
  background: var(--brand);
  color: white;
}

/* Text-action button inside details toolbar */
.details-toolbar #clearGeneralDetailsBtn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(11, 92, 255, 0.22);
  background: linear-gradient(180deg, #ffffff, #f1f7ff);
  color: #0b5fff;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.details-toolbar #clearGeneralDetailsBtn:hover {
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
}
.details-toolbar input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 3px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.details-image-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding-left: 6px;
  border-left: 1px solid rgba(148, 163, 184, 0.35);
}

.details-image-controls-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.04em;
  padding: 0 2px;
  user-select: none;
}

.details-image-scale-range {
  width: 88px;
  accent-color: #2563eb;
  cursor: pointer;
}

.details-image-scale-range:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.details-image-scale-value {
  min-width: 38px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.details-toolbar button.details-image-action:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
}

/* Rich editor visual */
.rich-editor {
  min-height: 80px;
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 8px;
  padding: 10px;
  box-shadow: var(--shadow-2);
  color: var(--text);
  line-height: 1.4;
}
.rich-editor.empty:before {
  color: var(--muted);
}
.rich-editor:focus {
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
  outline: none;
}

/* Table polish (consolidated above) */

/* Compact color cell */
#inputListTable td:nth-child(2) input[type="color"],
#outputListTable td:nth-child(2) input[type="color"] {
  padding: 4px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  cursor: pointer;
}

/* Context toolbar refinement */
.context-toolbar {
  background: rgba(10, 20, 40, 0.9);
  padding: 6px 8px;
  border-radius: 8px;
  gap: 6px;
}
.context-toolbar button {
  color: white;
  background: transparent;
  border-radius: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Make menu look lighter */
.menu {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.category-header {
  background: linear-gradient(180deg, #2a6b9a, #2b6f9f);
}

/* Mobile adjustments for toolbar buttons */
@media (max-width: 768px) {
  .details-toolbar {
    gap: 6px;
  }
  .details-toolbar button {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .details-toolbar #clearGeneralDetailsBtn {
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }
}

/* End of UI overrides */

/* por las dudas, fuera de print también */
#coverPage.no-print {
  display: none !important;
}

/* ===== PRINT: reglas generales ===== */
@media print {
  /* Ocultar cosas de pantalla */
  .no-print {
    display: none !important;
  }

  body {
    margin: 0;
  }

  /* Que el contenedor no meta flex/grid raro al imprimir */
  .container {
    display: block !important;
    justify-content: initial !important;
    align-items: initial !important;
  }

  /* Canvas del stageplot:
     - sin transform
     - centrado
     - sin forzar width/height
     - respetando el tamaño que congelamos por JS */
  .canvas {
    zoom: 0.55;
    margin: 0 auto !important;
    overflow: visible !important;
    min-width: auto !important;
    min-height: auto !important;

    transform: none !important;
    -webkit-transform: none !important;
    transform-origin: top center !important;
    -webkit-transform-origin: top center !important;

    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* No imprimir el canvas de dibujo (si lo usás para scribbles) */
  #drawingCanvas {
    display: none !important;
  }

  /* Si querés, también podés ocultar las guías */
  #guidesCanvas {
    display: none !important;
  }
}

/* =========================
   Color Swatch Grid Component
   ========================= */
.color-swatch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid #e2e8f0;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  position: relative;
}
.color-swatch-btn:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
.color-swatch-btn.is-none {
  background-image:
    linear-gradient(
      45deg,
      #f1f5f9 25%,
      transparent 25%,
      transparent 75%,
      #f1f5f9 75%,
      #f1f5f9
    ),
    linear-gradient(
      45deg,
      #f1f5f9 25%,
      transparent 25%,
      transparent 75%,
      #f1f5f9 75%,
      #f1f5f9
    );
  background-position:
    0 0,
    5px 5px;
  background-size: 10px 10px;
}
.color-swatch-btn.is-none::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background: #dc2626;
  border-radius: 99px;
  transform: rotate(-40deg);
}
.color-swatch-popup {
  position: fixed;
  z-index: 10000;
  background: #fff;
  border-radius: 10px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 10px;
  display: none;
  width: auto;
}
.color-swatch-popup.open {
  display: block;
}
.color-swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: 5px;
  margin-bottom: 8px;
}
.color-swatch-cell {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    transform 0.12s ease;
  box-sizing: border-box;
}
.color-swatch-cell:hover {
  border-color: #475569;
  transform: scale(1.15);
}
.color-swatch-cell.selected {
  border-color: #1e40af;
  box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.3);
}
.color-swatch-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
}
.color-swatch-custom label {
  font-size: 11px;
  color: #64748b;
  font-family: "Poppins", sans-serif;
  white-space: nowrap;
}
.color-swatch-custom input[type="color"] {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid #e2e8f0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}
.color-swatch-none-btn {
  height: 28px;
  padding: 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.color-swatch-none-btn:hover {
  background: #eef2ff;
  border-color: #94a3b8;
}
.color-swatch-none-btn.selected {
  background: #e2e8f0;
  border-color: #64748b;
}

/* Table cell color swatch adjustments */
#inputListTable .color-swatch-btn,
#outputListTable .color-swatch-btn,
.lsv-table .color-swatch-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 2px solid #94a3b8;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Shape mini-controls swatch adjustments */
.shape-mini-controls .color-swatch-btn,
.text-mini-controls .color-swatch-btn {
  width: 22px;
  height: 22px;
}

/* Details toolbar swatch: smaller */
.details-toolbar .color-swatch-btn {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border-width: 1.5px;
}

@media print {
  .color-swatch-popup {
    display: none !important;
  }
}

/* ===== Footer Redes Sociales ===== */
.stageplot-footer {
  background: linear-gradient(180deg, #2a6b9a, #2b6f9f);
  color: #b0bec5;
  margin-top: 48px;
}

.stageplot-footer .footer-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.stageplot-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stageplot-footer .footer-logo {
  height: 36px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.stageplot-footer .footer-logo:hover {
  opacity: 1;
}

.stageplot-footer .footer-copy {
  font-family: "Poppins", sans-serif;
  font-size: 0.78rem;
  color: white;
  white-space: nowrap;
}

.stageplot-footer .footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.stageplot-footer .footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: white;
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.2s;
  text-decoration: none;
}

.stageplot-footer .footer-social a:hover {
  background: #00e5ff;
  color: #0f1923;
  transform: scale(1.12);
}

.stageplot-footer .footer-social a svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 600px) {
  .stageplot-footer .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .stageplot-footer .footer-brand {
    flex-direction: column;
    gap: 6px;
  }

  .stageplot-footer .footer-social {
    justify-content: center;
  }
}

/* ========================================
   MEJORAS COMPLETAS PARA EXPERIENCIA MÓVIL
   ======================================== */

/* Optimizaciones generales para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
  /* Desactivar hover innecesarios en touch */
  *:hover {
    transition-duration: 0s;
  }

  /* Mejorar tamaño de elementos tocables */
  button,
  a,
  input[type="button"],
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 16px;
    font-size: 16px;
  }

  /* Aumentar espaciado entre elementos */
  button + button,
  a + a {
    margin-left: 8px;
  }
}

/* Mejoras para pantallas pequeñas (móvil) */
@media (max-width: 768px) {
  html {
    font-size: 16px;
  }

  /* Mejorar menú controls en móvil */
  #menuControls {
    flex-direction: column;
    gap: 10px;
  }

  #menuControls button {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14px;
    justify-content: center;
    width: 100%;
  }

  /* Mejorar file controls */
  #fileControls {
    flex-direction: column;
    gap: 8px;
  }

  #fileControls button {
    min-height: 44px;
    padding: 11px 14px;
    font-size: 13px;
    width: 100%;
  }

  /* Mejorar búsqueda */
  #searchContainer {
    margin: 10px 0 !important;
  }

  #searchContainer input {
    min-height: 48px;
    font-size: 16px;
    padding: 12px 14px;
  }

  /* Mejorar categorías */
  .category {
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
  }

  .category-header {
    padding: 14px 16px;
    font-size: 13px;
    min-height: 50px;
    display: flex;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
  }

  .category-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .category-items.collapsed {
    display: none;
  }

  .category.open .category-items.collapsed {
    display: grid;
  }

  /* Mejorar items del menú */
  .menu-item {
    padding: 12px;
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .menu-item:active {
    transform: scale(0.95);
    background: rgba(0, 0, 0, 0.05);
  }

  .menu-item img {
    width: 55px;
    height: 55px;
    object-fit: contain;
  }

  .menu-item button {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    font-size: 12px;
    border-radius: 6px;
    transition: all 0.15s ease;
  }

  .menu-item button:active {
    transform: scale(0.96);
  }

  /* Canvas mejorado para móvil */
  .canvas {
    margin: 0;
    border-radius: 0;
    min-height: calc(100vh - 70px);
  }

  /* Draggable elements mejor feedback */
  .draggable {
    transition:
      box-shadow 0.15s ease,
      transform 0.15s ease;
  }

  .draggable:active {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }

  .draggable.selected {
    box-shadow: none;
    outline: 2px solid #2563eb;
    outline-offset: 0;
  }

  /* Contexto toolbar mejorado */
  .context-toolbar {
    padding: 8px 10px;
    border-radius: 8px;
    gap: 8px;
    min-height: 44px;
    display: none;
    align-items: center;
    flex-wrap: wrap;
  }

  .context-toolbar button {
    min-height: 40px;
    min-width: 40px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.15s ease;
  }

  .context-toolbar button:active {
    transform: scale(0.92);
  }

  /* Modales mejorados para móvil */
  #coverEditor {
    max-height: 90vh;
    max-width: 95vw;
    border-radius: 12px;
    padding: 20px !important;
  }

  .cover-modal-header {
    margin-bottom: 12px;
  }

  #coverEditor h2 {
    font-size: 20px;
    margin: 0 0 8px;
  }

  .cover-modal-subtitle {
    font-size: 13px;
  }

  #coverEditor input[type="text"],
  #coverEditor textarea {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 16px;
  }

  #coverEditor textarea {
    min-height: 100px;
  }

  .cover-logo-dropzone {
    min-height: 120px;
    padding: 20px;
  }

  /* Tablas mejoradas en móvil */
  #inputListContainer,
  #outputListContainer {
    padding: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #inputListTable,
  #outputListTable,
  .lsv-table {
    font-size: 13px;
  }

  #inputListTable button,
  #outputListTable button,
  .lsv-table button {
    min-height: 22px;
    padding: 8px 10px;
    font-size: 12px;
  }

  /* Fix para upload y otros botones */
  #uploadImageButton {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 14px;
  }

  #toggleDetailsBtn {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 14px;
  }

  /* Evitar zoom en inputs */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* Mejoras adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
  #menuControls button {
    padding: 11px 10px;
    font-size: 12px;
    min-height: 44px;
  }

  #fileControls button {
    padding: 10px 12px;
    font-size: 12px;
    min-height: 44px;
  }

  .menu-item {
    padding: 10px;
  }

  .menu-item img {
    width: 50px;
    height: 50px;
  }

  .category-items {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .context-toolbar {
    min-height: 40px;
    gap: 6px;
  }

  .context-toolbar button {
    min-height: 36px;
    min-width: 36px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .draggable.selected {
    box-shadow: none;
    outline: 2px solid #2563eb;
    outline-offset: 0;
  }
}

/* Optimizaciones para landscape mode */
@media (max-height: 600px) and (max-width: 1024px) {
  .menu {
    max-height: 90vh;
  }

  #menuControls {
    gap: 6px;
  }

  #menuControls button {
    padding: 8px 10px;
    font-size: 12px;
    min-height: 40px;
  }

  .canvas {
    min-height: calc(100vh - 60px);
  }
}

/* Mejoras de accesibilidad táctil */
@media (hover: none) and (pointer: coarse) {
  /* Aumentar hit targets */
  button {
    min-width: 44px;
    min-height: 44px;
  }

  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Mejorar feedback táctil */
  button:active {
    opacity: 0.8;
  }

  /* Desactivar outline por defecto (lo añadimos con ring) */
  button:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
  }

  /* Prevenir zoom al hacer tap */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ========================================
   Mobile-first StagePlot Layout (2026)
   ======================================== */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  body.stageplot-mobile-layout {
    overflow-x: hidden;
    --mobile-gutter: 12px;
    --mobile-footer-h: 136px;
    padding-bottom: var(--mobile-footer-h);
  }

  body.stageplot-mobile-layout .marcas-container {
    display: none !important;
  }

  body.stageplot-mobile-layout #stagePlotFooter {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    margin: 0;
    min-height: var(--mobile-footer-h);
    padding: 10px 12px 12px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #2a6b9a, #245f8a);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 -10px 24px rgba(2, 8, 23, 0.28);
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-inner {
    max-width: 100%;
    gap: 10px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-brand {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    width: 100%;
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-logo {
    height: 28px;
    width: auto;
    opacity: 1;
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-copy {
    font-size: 13px;
    font-weight: 600;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-social {
    width: 100%;
    justify-content: center;
    gap: clamp(6px, 2vw, 10px);
    flex-wrap: wrap;
    padding: 0;
    max-width: calc(100vw - (var(--mobile-gutter) * 2));
    margin: 0 auto;
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-social a {
    width: clamp(30px, 8vw, 38px);
    height: clamp(30px, 8vw, 38px);
    min-width: clamp(30px, 8vw, 38px) !important;
    min-height: clamp(30px, 8vw, 38px) !important;
    flex: 0 0 auto;
    padding: 0 !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-social a svg {
    width: clamp(16px, 4.5vw, 20px);
    height: clamp(16px, 4.5vw, 20px);
  }

  body.stageplot-mobile-layout .container {
    display: block;
    min-height: calc(100dvh - var(--mobile-footer-h));
    padding: 0;
  }

  body.stageplot-mobile-layout .canvas {
    width: 100vw;
    min-width: 100vw;
    min-height: calc(100dvh - var(--mobile-footer-h));
    max-height: calc(100dvh - var(--mobile-footer-h));
    border: none;
    border-top: 1px solid #dbe4f0;
    border-bottom: 1px solid #dbe4f0;
    margin: 0;
    overflow: hidden;
  }

  body.stageplot-mobile-layout #menu {
    position: fixed;
    inset: auto 0 0 0;
    width: 100vw;
    max-height: 88dvh;
    border-radius: 18px 18px 0 0;
    transform: translateY(102%);
    transition: transform 0.24s ease;
    z-index: 1200;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 -20px 40px rgba(2, 8, 23, 0.3);
    overflow-y: auto;
    height: auto;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
  }

  body.stageplot-mobile-layout #menu.open {
    transform: translateY(0);
  }

  body.stageplot-mobile-layout #menuBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1150;
    display: block !important;
  }

  body.stageplot-mobile-layout #menuBackdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  body.stageplot-mobile-layout #mobileQuickActions {
    position: fixed;
    left: 50%;
    bottom: calc(
      env(safe-area-inset-bottom, 0px) + var(--mobile-footer-h) - 71px
    );
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1300;
    width: min(calc(100vw - (var(--mobile-gutter) * 2)), 520px);
    transition:
      opacity 0.16s ease,
      transform 0.16s ease;
  }

  body.stageplot-mobile-layout.mobile-fab-hidden #mobileQuickActions {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 22px);
  }

  body.stageplot-mobile-layout #mobileQuickActions .mobile-fab {
    flex: 1 1 0;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 999px;
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    background: linear-gradient(135deg, #0b5fff, #1170ff);
    box-shadow: 0 10px 22px rgba(11, 95, 255, 0.28);
  }

  body.stageplot-mobile-layout #mobileQuickActions #openDataMobile {
    background: linear-gradient(135deg, #0ea5a4, #22c55e);
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.26);
  }

  body.stageplot-mobile-layout #mobileQuickActions #openMenuMobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    margin: 0;
  }

  body.stageplot-mobile-layout #mobileDataBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.45);
    z-index: 1250;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  body.stageplot-mobile-layout #mobileDataBackdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  body.stageplot-mobile-layout #mobileDataSheet {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1260;
    background: #ffffff;
    border-radius: 18px 18px 0 0;
    transform: translateY(103%);
    transition: transform 0.24s ease;
    max-height: 88dvh;
    overflow: auto;
    padding: 12px var(--mobile-gutter)
      calc(env(safe-area-inset-bottom, 0px) + 80px);
    box-shadow: 0 -20px 42px rgba(2, 8, 23, 0.3);
  }

  body.stageplot-mobile-layout #mobileDataSheet.open {
    transform: translateY(0);
  }

  body.stageplot-mobile-layout .mobile-data-header {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -12px calc(var(--mobile-gutter) * -1) 10px;
    padding: 12px var(--mobile-gutter);
    border-bottom: 1px solid #e2e8f0;
  }

  body.stageplot-mobile-layout .mobile-data-header h3 {
    margin: 0;
    font-size: 15px;
    color: #0f172a;
  }

  body.stageplot-mobile-layout #closeDataMobile {
    border: 1px solid #b91c1c;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #ffffff;
    border-radius: 10px;
    min-width: 42px;
    min-height: 42px;
    padding: 8px;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(185, 28, 28, 0.35);
  }

  body.stageplot-mobile-layout #mobileDataContent > * {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  body.stageplot-mobile-layout #menu .menu-fixed {
    padding: 8px var(--mobile-gutter) 10px !important;
  }

  body.stageplot-mobile-layout #menu .menu-fixed #menuControls,
  body.stageplot-mobile-layout #menu .menu-fixed #fileControls,
  body.stageplot-mobile-layout #menu .menu-fixed #searchContainer {
    margin: 0 0 8px 0 !important;
  }

  body.stageplot-mobile-layout #menu .menu-fixed #menuControls,
  body.stageplot-mobile-layout #menu .menu-fixed #fileControls {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px !important;
    align-items: stretch !important;
  }

  body.stageplot-mobile-layout #menu .menu-fixed #menuControls button,
  body.stageplot-mobile-layout #menu .menu-fixed #fileControls button {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center;
    min-height: 31px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
  }

  body.stageplot-mobile-layout #mobileToolsToggle {
    width: 100%;
    border: 1px solid #dbe4f0;
    background: #f8fbff;
    color: #0b5fff;
    border-radius: 12px;
    padding: 11px 12px;
    font-weight: 600;
    font-size: 13px;
    margin: 2px 0 8px;
  }

  body.stageplot-mobile-layout
    #menu.mobile-tools-collapsed
    .menu-fixed
    #menuControls,
  body.stageplot-mobile-layout
    #menu.mobile-tools-collapsed
    .menu-fixed
    #fileControls,
  body.stageplot-mobile-layout
    #menu.mobile-tools-collapsed
    .menu-fixed
    #searchContainer {
    display: none !important;
  }

  body.stageplot-mobile-layout #menu .category-items {
    display: none;
  }

  body.stageplot-mobile-layout #menu .category.open .category-items,
  body.stageplot-mobile-layout #menu .category-items.force-open {
    display: grid;
  }

  body.stageplot-mobile-layout #menu.mobile-catalog-mode .category {
    display: none !important;
  }

  body.stageplot-mobile-layout #mobileInstrumentCatalog {
    display: none;
    padding: 10px var(--mobile-gutter)
      calc(env(safe-area-inset-bottom, 0px) + 96px);
  }

  body.stageplot-mobile-layout
    #menu.mobile-catalog-mode
    #mobileInstrumentCatalog {
    display: block;
  }

  body.stageplot-mobile-layout .mic-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
  }

  body.stageplot-mobile-layout .mic-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: white;
  }

  body.stageplot-mobile-layout .mic-close {
    border: 1px solid #b91c1c;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #ffffff;
    border-radius: 10px;
    min-height: 30px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
    box-shadow: 0 8px 16px rgba(185, 28, 28, 0.3);
  }

  body.stageplot-mobile-layout .mic-count {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #eef2f7;
    border: 1px solid #dbe4f0;
    border-radius: 999px;
    padding: 4px 8px;
  }

  body.stageplot-mobile-layout .mic-categories {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  body.stageplot-mobile-layout .mic-categories::-webkit-scrollbar {
    display: none;
  }

  body.stageplot-mobile-layout .mic-chip {
    border: 1px solid #dbe4f0;
    background: #ffffff;
    color: #334155;
    border-radius: 12px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    min-height: 38px;
    max-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: left;
    line-height: 1;
    flex: 0 0 auto;
    overflow: hidden;
  }

  body.stageplot-mobile-layout .mic-chip.active {
    border-color: #0b5fff;
    background: linear-gradient(135deg, #0b5fff, #1170ff);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(11, 95, 255, 0.25);
  }

  body.stageplot-mobile-layout .mic-chip-icon {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 20px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #e2e8f0;
  }

  body.stageplot-mobile-layout .mic-chip-label {
    display: block;
    max-width: 128px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
  }

  body.stageplot-mobile-layout .mic-chip.active .mic-chip-icon {
    border-color: rgba(255, 255, 255, 0.6);
  }

  body.stageplot-mobile-layout .mic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.stageplot-mobile-layout .mic-card {
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    padding: 6px 6px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  body.stageplot-mobile-layout .mic-card img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
    border: 0;
    background: transparent;
  }

  body.stageplot-mobile-layout .mic-fallback-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
  }

  body.stageplot-mobile-layout .mic-label {
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: #0f172a;
    min-height: 26px;
  }

  body.stageplot-mobile-layout .mic-add {
    width: 100%;
    min-height: 32px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #0b5fff, #1170ff);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
  }

  /* ===== Mobile Data Sheet: tablas + detalles ===== */
  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"],
  body.stageplot-mobile-layout #mobileDataContent #inputListContainer,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContainer,
  body.stageplot-mobile-layout #mobileDataContent #addExtraTableBtn {
    margin: 0 0 12px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border: 1px solid #dbe4f0 !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #addExtraTableBtn {
    min-height: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 9px 14px !important;
    background: linear-gradient(120deg, #4e8ea2 0%, #6ea2b3 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(110, 162, 179, 0.45) !important;
    box-shadow: 0 10px 20px rgba(78, 142, 162, 0.34) !important;
    outline: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    border-radius: 10px !important;
    margin: 0 0 12px 0 !important;
    box-sizing: border-box !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #addExtraTableBtn:hover {
    box-shadow: 0 14px 24px rgba(78, 142, 162, 0.4) !important;
    transform: translateY(-1px);
  }

  body.stageplot-mobile-layout #mobileDataContent #toggleDetailsBtn {
    background: linear-gradient(120deg, #4e8ea2 0%, #6ea2b3 100%) !important;
    border: 1px solid rgba(110, 162, 179, 0.45) !important;
    box-shadow: 0 10px 20px rgba(78, 142, 162, 0.34) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #toggleDetailsBtn:hover {
    box-shadow: 0 14px 24px rgba(78, 142, 162, 0.4) !important;
    transform: translateY(-1px);
  }

  /* Mobile <=770: make "Agregar detalles" and "Agregar tabla" exactly identical */
  body.stageplot-mobile-layout #mobileDataContent #toggleDetailsBtn,
  body.stageplot-mobile-layout #mobileDataContent #addExtraTableBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 0 12px 0 !important;
    padding: 9px 14px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    /* border: 1px solid rgba(110, 162, 179, 0.45) !important; */
    background: linear-gradient(
      120deg,
      var(--f-accent-2),
      var(--f-accent)
    ) !important;
    color: #ffffff !important;
    /* box-shadow: 0 10px 20px rgba(78, 142, 162, 0.34) !important; */
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    outline: none !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #toggleDetailsBtn:hover,
  body.stageplot-mobile-layout #mobileDataContent #addExtraTableBtn:hover {
    box-shadow: 0 14px 24px rgba(78, 142, 162, 0.4) !important;
    transform: translateY(-1px);
  }

  body.stageplot-mobile-layout #mobileDataContent h2,
  body.stageplot-mobile-layout #mobileDataContent .details-title,
  body.stageplot-mobile-layout #mobileDataContent .titleeditable {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin: 0 0 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  body.stageplot-mobile-layout #mobileDataContent .details-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px !important;
    margin: 8px 0 !important;
    align-items: center !important;
  }

  body.stageplot-mobile-layout #mobileDataContent .details-toolbar button {
    min-width: 28px !important;
    min-height: 28px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 3px 6px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #generalDetails {
    min-height: 86px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 10px;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListContainer > button,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer > button,
  body.stageplot-mobile-layout
    #mobileDataContent
    .extraTableContainer
    > button {
    margin: 0 !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    border-radius: 9px !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    justify-self: center !important;
    text-align: center !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListContainer,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContainer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListContainer h2,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer h2,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContainer h2,
  body.stageplot-mobile-layout #mobileDataContent #inputTableContent,
  body.stageplot-mobile-layout #mobileDataContent #outputTableContent,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContent {
    grid-column: 1 / -1;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputTableContent,
  body.stageplot-mobile-layout #mobileDataContent #outputTableContent,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContent {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table {
    width: max-content !important;
    min-width: 920px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    table-layout: auto !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable th,
  body.stageplot-mobile-layout #mobileDataContent #inputListTable td,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable th,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable td,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table th,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table td {
    white-space: nowrap;
    font-size: 12px !important;
    padding: 7px 8px !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable th:last-child,
  body.stageplot-mobile-layout #mobileDataContent #inputListTable td:last-child,
  body.stageplot-mobile-layout
    #mobileDataContent
    #outputListTable
    th:last-child,
  body.stageplot-mobile-layout
    #mobileDataContent
    #outputListTable
    td:last-child,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table th:last-child,
  body.stageplot-mobile-layout
    #mobileDataContent
    table.lsv-table
    td:last-child {
    min-width: 180px;
    white-space: normal;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable td button,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable td button,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table td button {
    min-width: 20px !important;
    min-height: 20px !important;
    font-size: 10px !important;
    padding: 1px 4px !important;
  }

  /* Toolbars flotantes de texto/imagen/forma: versión compacta móvil */
  body.stageplot-mobile-layout .context-toolbar {
    padding: 4px 6px !important;
    gap: 4px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
  }

  body.stageplot-mobile-layout .context-toolbar button {
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
    border-radius: 5px !important;
  }

  body.stageplot-mobile-layout .shape-mini-controls,
  body.stageplot-mobile-layout .mini-controls {
    padding: 4px !important;
    gap: 4px !important;
    border-radius: 6px !important;
    bottom: calc(100% + 6px) !important;
  }

  body.stageplot-mobile-layout .shape-mini-controls button,
  body.stageplot-mobile-layout .mini-controls button {
    min-width: 26px !important;
    min-height: 26px !important;
    padding: 2px 5px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
  }

  body.stageplot-mobile-layout .shape-mini-controls input[type="color"],
  body.stageplot-mobile-layout .mini-controls input[type="color"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }

  body.stageplot-mobile-layout .shape-mini-controls .color-swatch-btn,
  body.stageplot-mobile-layout .mini-controls .color-swatch-btn {
    width: 18px !important;
    height: 18px !important;
    border-width: 1px !important;
    border-radius: 4px !important;
  }

  body.stageplot-mobile-layout #menu .category {
    margin: 0 0 10px;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
  }

  body.stageplot-mobile-layout #menu .category-header {
    display: flex !important;
    min-height: 56px !important;
    height: auto !important;
    padding: 10px 12px;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, #2c78ab, #2a6b9a);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  body.stageplot-mobile-layout #menu .category-header,
  body.stageplot-mobile-layout #menu .category-header * {
    color: #ffffff !important;
    opacity: 1;
    visibility: visible;
    line-height: 1.2;
  }

  body.stageplot-mobile-layout #menu .category-header {
    white-space: nowrap;
    overflow: hidden;
  }

  body.stageplot-mobile-layout #menu .category-header::after {
    content: "›";
    margin-left: auto;
    font-size: 18px;
    font-weight: 700;
    transform: rotate(90deg);
    opacity: 0.95;
  }

  body.stageplot-mobile-layout #menu .cat-thumb-wrap {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.32);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.stageplot-mobile-layout #menu .cat-thumb {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  body.stageplot-mobile-layout #menu .cat-title {
    flex: 1 1 auto;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 700;
  }

  body.stageplot-mobile-layout #menu .mobile-cat-label {
    flex: 1 1 auto;
    display: block;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff !important;
  }

  body.stageplot-mobile-layout #menu .category-items {
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    gap: 12px;
    padding: 12px;
  }

  body.stageplot-mobile-layout #menu .menu-item {
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    padding: 10px 8px 12px;
    margin: 0;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  }

  body.stageplot-mobile-layout #menu .menu-item img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    margin: 0 auto 8px;
    border: 0;
    background: transparent;
  }

  body.stageplot-mobile-layout #menu .menu-item .imageName {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    min-height: 32px;
    margin: 0 0 8px;
    color: #0f172a;
  }

  body.stageplot-mobile-layout #menu .menu-item button {
    width: 100%;
    min-height: 40px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    margin-top: 0;
  }

  body.stageplot-mobile-layout #categoryModal {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: min(92dvh, 920px);
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    transform: translateY(105%);
    padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  }

  body.stageplot-mobile-layout #categoryModal.open {
    transform: translateY(0);
  }

  body.stageplot-mobile-layout #categoryModal .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #ffffff;
    padding: 6px 2px 10px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 10px;
  }

  body.stageplot-mobile-layout #categoryModalGrid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
  }

  body.stageplot-mobile-layout #categoryModalGrid .menu-item {
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    padding: 10px 8px 12px;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  }

  body.stageplot-mobile-layout #categoryModalGrid .menu-item img {
    width: 88px;
    height: 88px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 8px;
    border: 0;
    background: transparent;
  }

  body.stageplot-mobile-layout #categoryModalGrid .menu-item .imageName {
    min-height: 32px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
  }

  body.stageplot-mobile-layout #categoryModalGrid .menu-item .imageName:empty {
    display: none;
  }

  body.stageplot-mobile-layout #categoryModalGrid .menu-item button {
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
  }
}

/* ===== PRINT FIX (mobile layout): include details/tables, exclude overlays/footer ===== */
@media print {
  .print-temp-hide {
    display: none !important;
  }

  body.print-no-supplemental #mobileDataSheet,
  body.print-no-supplemental .menu-item[data-no-search="true"],
  body.print-no-supplemental #inputListContainer,
  body.print-no-supplemental #outputListContainer,
  body.print-no-supplemental .extraTableContainer {
    display: none !important;
  }

  body.stageplot-mobile-layout.mobile-no-data-print #mobileDataSheet {
    display: none !important;
  }

  body.stageplot-mobile-layout #mobileDataSheet {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.stageplot-mobile-layout #mobileDataContent {
    display: block !important;
    overflow: visible !important;
  }

  /* Mobile print: start "Detalles generales" on a new page (after canvas page) */
  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"]:not(.details-removed) {
    break-before: page !important;
    page-break-before: always !important;
  }

  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"].details-removed {
    display: none !important;
    break-before: auto !important;
    page-break-before: auto !important;
  }

  /* Mobile print: keep details content right under title (allow flowing across pages) */
  body.stageplot-mobile-layout #mobileDataContent #generalDetailsPrint {
    margin-top: 0 !important;
    padding-top: 0 !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  /* Mobile print: fit tables to page width (avoid right-side clipping) */
  body.stageplot-mobile-layout #mobileDataContent #inputTableContent,
  body.stageplot-mobile-layout #mobileDataContent #outputTableContent,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContent {
    overflow: visible !important;
    border: none !important;
    border-radius: 0 !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable th,
  body.stageplot-mobile-layout #mobileDataContent #inputListTable td,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable th,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable td,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table th,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table td {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    font-size: 10px !important;
    padding: 4px 5px !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable th:last-child,
  body.stageplot-mobile-layout #mobileDataContent #inputListTable td:last-child,
  body.stageplot-mobile-layout
    #mobileDataContent
    #outputListTable
    th:last-child,
  body.stageplot-mobile-layout
    #mobileDataContent
    #outputListTable
    td:last-child,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table th:last-child,
  body.stageplot-mobile-layout
    #mobileDataContent
    table.lsv-table
    td:last-child {
    min-width: 0 !important;
  }

  body.stageplot-mobile-layout #mobileDataSheet .mobile-data-header {
    display: none !important;
  }

  /* Mobile print: hide action buttons/toolbars, keep only printable content */
  body.stageplot-mobile-layout #mobileDataContent #addExtraTableBtn,
  body.stageplot-mobile-layout #mobileDataContent .details-toolbar,
  body.stageplot-mobile-layout #mobileDataContent .details-toolbar button,
  body.stageplot-mobile-layout #mobileDataContent #inputListContainer > button,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer > button,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContainer > button,
  body.stageplot-mobile-layout #mobileDataContent .toggleExtraTableContent {
    display: none !important;
  }

  /* Hide mobile/desktop overlays and footer in PDF */
  footer,
  .stageplot-footer,
  #stagePlotFooter,
  .marcas-container,
  #mobileQuickActions,
  #mobileDataBackdrop,
  #menuBackdrop,
  #categoryModal,
  #categoryModalBackdrop,
  #mobileTutorialBackdrop,
  #mobileTutorialModal,
  #desktopTutorialBackdrop,
  #desktopTutorialModal,
  #contestBackdrop,
  #contestModal,
  #coverEditor {
    display: none !important;
  }

  /* Remove footer-like print watermarks */
  #canvasWatermark,
  #printWatermark {
    display: none !important;
  }

  body::after {
    content: none !important;
    display: none !important;
  }
}

/* Desktop print recovery: keep "Detalles generales" full-width */
@media print {
  body:not(.stageplot-mobile-layout) .menu-item[data-no-search="true"] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.stageplot-mobile-layout) #generalDetailsPrint {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: pre-wrap !important;
    box-sizing: border-box !important;
  }
}

/* Keep drawing layer visible in print (used for front-layer lines/dimensions) */
@media print {
  #drawingCanvas {
    display: block !important;
    pointer-events: none !important;
  }
}

/* Mobile landscape UX tune: maximize canvas and avoid stacked overlays */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  body.stageplot-mobile-layout {
    --mobile-footer-h: 46px;
    padding-bottom: var(--mobile-footer-h);
  }

  body.stageplot-mobile-layout .container,
  body.stageplot-mobile-layout .canvas {
    min-height: calc(100dvh - var(--mobile-footer-h));
    max-height: calc(100dvh - var(--mobile-footer-h));
  }

  body.stageplot-mobile-layout #menu {
    inset: 8px auto calc(var(--mobile-footer-h) + 10px) 8px;
    width: min(58vw, 460px);
    height: auto;
    max-height: none;
    border-radius: 14px;
    transform: translateX(-108%);
    padding-bottom: 12px;
  }

  body.stageplot-mobile-layout #menu.open {
    transform: translateX(0);
  }

  body.stageplot-mobile-layout #mobileDataSheet {
    inset: 8px 8px calc(var(--mobile-footer-h) + 10px) auto;
    width: min(74vw, 760px);
    max-height: none;
    border-radius: 14px;
    transform: translateX(108%);
    padding-bottom: 12px;
  }

  body.stageplot-mobile-layout #mobileDataSheet.open {
    transform: translateX(0);
  }

  body.stageplot-mobile-layout #mobileQuickActions {
    left: auto;
    right: 8px;
    top: 8px;
    bottom: auto;
    transform: none;
    width: min(180px, 36vw);
    flex-direction: column;
    gap: 6px;
  }

  body.stageplot-mobile-layout #mobileQuickActions .mobile-fab {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 12px;
  }

  body.stageplot-mobile-layout #stagePlotFooter {
    height: var(--mobile-footer-h) !important;
    min-height: var(--mobile-footer-h) !important;
    max-height: var(--mobile-footer-h) !important;
    padding: 2px 6px !important;
    overflow: hidden !important;
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-inner {
    gap: 0;
    align-items: center;
    flex-wrap: nowrap !important;
    min-height: 0 !important;
    height: 100% !important;
    flex-direction: row !important;
    justify-content: center !important;
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-brand,
  body.stageplot-mobile-layout #stagePlotFooter .footer-copy {
    display: none !important;
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-social {
    width: auto;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: visible;
    justify-content: center;
  }
}

/* Desktop wide layout: tools above canvas, sidebar only search + categories */
@media (min-width: 770px) {
  body:not(.stageplot-mobile-layout) #menu .category-header {
    margin-left: 6px;
    margin-right: 6px;
  }

  body:not(.stageplot-mobile-layout) #menu .category-items {
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
  }

  .desktop-top-actions {
    display: none;
  }

  body.desktop-top-tools-active .container {
    display: grid;
    grid-template-columns: 183px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 0;
    align-items: stretch;
    min-height: 100dvh;
  }

  body.desktop-top-tools-active .desktop-top-actions {
    grid-column: 1 / span 2;
    grid-row: 1;
    display: block;
    padding: 8px 10px;
    border: 0;
    border-radius: 0;
    background: #f0f0f0;
    box-shadow: none;
    overflow: hidden;
    white-space: normal;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-shell {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-group {
    background: linear-gradient(180deg, #f8fbff, #f1f6fd);
    border: 1px solid #d7e1ef;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(20, 30, 48, 0.1);
    padding: 8px;
    min-width: 0;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-group-title {
    margin: 0 0 6px 0;
    padding: 0 2px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4b5e78;
    font-weight: 500;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-slot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
    gap: 6px;
    align-items: stretch;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-slot button {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
    justify-content: center;
  }

  body.desktop-top-tools-active #menu {
    grid-column: 1;
    grid-row: 2;
    width: 183px;
    flex: 0 0 183px;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    align-self: stretch;
    overflow-y: auto;
  }

  body.desktop-top-tools-active #menu .menu-fixed {
    position: sticky;
    top: 0;
    padding: 8px 6px 10px;
  }

  body.desktop-top-tools-active #menu .menu-fixed #menuControls,
  body.desktop-top-tools-active #menu .menu-fixed #fileControls {
    display: none !important;
  }

  body.desktop-top-tools-active #menu .menu-fixed #searchContainer {
    margin-bottom: 0 !important;
  }

  body.desktop-top-tools-active #canvas {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
}

@media (min-width: 1680px) {
  body.desktop-top-tools-active .container {
    grid-template-columns: 183px minmax(0, 1fr);
  }

  body.desktop-top-tools-active #menu {
    width: 183px;
    flex: 0 0 183px;
  }

  body.desktop-top-tools-active #canvas {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
}

/* Safety: never print desktop top tools bar (prevents black block on some mobile print engines) */
@media print {
  .desktop-top-actions,
  #desktopTopActionsHost,
  body.desktop-top-tools-active .desktop-top-actions {
    display: none !important;
    visibility: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* Unified cover print rules: always one first page + no title overflow */
@media print {
  #coverPage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 14mm 12mm 12mm !important;
    overflow: visible !important;
    page-break-before: auto !important;
    page-break-after: always !important;
    page-break-inside: avoid !important;
    break-before: auto !important;
    break-after: page !important;
    break-inside: avoid-page !important;
  }

  #coverPage img#printLogo {
    width: auto !important;
    max-width: 85% !important;
    max-height: 62mm !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 0 8mm 0 !important;
  }

  #coverPage h1#printTitle {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 6mm 0 !important;
    padding: 0 !important;
    font-size: 30pt !important;
    line-height: 1.08 !important;
    text-align: center;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    box-sizing: border-box !important;
  }

  #coverPage pre#printContacts {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 5mm 0 !important;
    padding: 0 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: 13pt !important;
    line-height: 1.2 !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #coverPage p#printVersion {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2mm 0 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: 12pt !important;
    line-height: 1.2 !important;
  }
}

/* ==========================================================
   UI Refresh 2026 (interactive-only)
   Keep white backgrounds in canvas, details and tables
   ========================================================== */

:root {
  --ui-bg: #49769f;
  --ui-panel: #f7faff;
  --ui-text: #0f172a;
  --ui-muted: #64748b;
  --ui-stroke: #d8e2f0;
  --ui-primary: #141e30;
  --ui-primary-2: #35577d;
  --ui-success: #0d9488;
  --ui-danger: #dc2626;
  --ui-shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.12);
  --ui-shadow-btn: 0 10px 20px rgba(20, 30, 48, 0.34);
}

body {
  background: var(--ui-bg);
  color: var(--ui-text);
}

.menu {
  background: linear-gradient(180deg, #f4f8ff 0%, #eef4fc 100%);
  box-shadow: var(--ui-shadow-soft);
}

.menu-fixed {
  background: linear-gradient(180deg, #f7faff 0%, #f3f8ff 100%);
}

#searchContainer input {
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  background: #ffffff;
  color: var(--ui-text);
}

#searchContainer input::placeholder {
  color: #94a3b8;
}

#searchContainer input:focus {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.category-header {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: linear-gradient(135deg, #364152 0%, #4f5f75 100%);
  box-shadow: 0 6px 15px rgba(30, 41, 59, 0.2);
}

.cat-title {
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: 600;
}

#menuControls button,
#fileControls button,
.desktop-top-actions .dta-slot button,
#uploadImageButton,
#toggleDetailsBtn,
#inputListContainer > button,
#outputListContainer > button,
.lsv-table-btn,
.lsv-table-container > button,
#inputTableContent ~ button,
#outputTableContent ~ button,
.details-toolbar button,
#mobileTutorialModal .modal-cta,
.desktop-modal .modal-cta {
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  background: linear-gradient(
    120deg,
    var(--ui-primary) 0%,
    var(--ui-primary-2) 100%
  ) !important;
  color: #ffffff !important;
  box-shadow: var(--ui-shadow-btn);
  font-weight: 500;
  letter-spacing: 0.01em;
}

#menuControls button:hover,
#fileControls button:hover,
.desktop-top-actions .dta-slot button:hover,
#uploadImageButton:hover,
#toggleDetailsBtn:hover,
#inputListContainer > button:hover,
#outputListContainer > button:hover,
.lsv-table-btn:hover,
.lsv-table-container > button:hover,
#inputTableContent ~ button:hover,
#outputTableContent ~ button:hover,
.details-toolbar button:hover,
#mobileTutorialModal .modal-cta:hover,
.desktop-modal .modal-cta:hover {
  transform: translateY(-1px);
  filter: saturate(1.04) brightness(1.03);
  box-shadow: 0 14px 24px rgba(20, 30, 48, 0.4);
}

#menuControls button:focus-visible,
#fileControls button:focus-visible,
.desktop-top-actions .dta-slot button:focus-visible,
#uploadImageButton:focus-visible,
#toggleDetailsBtn:focus-visible,
#inputListContainer > button:focus-visible,
#outputListContainer > button:focus-visible,
.lsv-table-btn:focus-visible,
.lsv-table-container > button:focus-visible,
#inputTableContent ~ button:focus-visible,
#outputTableContent ~ button:focus-visible,
.details-toolbar button:focus-visible {
  outline: 3px solid rgba(53, 87, 125, 0.4);
  outline-offset: 2px;
}

#suggestChangesBtn {
  background: linear-gradient(
    120deg,
    var(--ui-primary) 0%,
    var(--ui-primary-2) 100%
  ) !important;
}

#openCoverBtn {
  background: linear-gradient(
    120deg,
    var(--ui-primary) 0%,
    var(--ui-primary-2) 100%
  ) !important;
}

#toggleDraw,
#toggleDimension {
  background: linear-gradient(
    120deg,
    var(--ui-primary) 0%,
    var(--ui-primary-2) 100%
  ) !important;
}

#langToggleBtn {
  background: linear-gradient(
    120deg,
    var(--ui-primary) 0%,
    var(--ui-primary-2) 100%
  ) !important;
  color: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
  box-shadow: var(--ui-shadow-btn) !important;
}

#toggleInputContent,
#toggleOutputContent,
.toggleExtraTableContent,
.lsv-table-btn--toggle {
  background: linear-gradient(
    120deg,
    var(--ui-primary) 0%,
    var(--ui-primary-2) 100%
  ) !important;
}

#clearLocalStorage,
#clearDetailsBtn,
#clearCanvasBtn,
#clearAllBtn,
#mobileCatalogCloseBtn,
#closeDataMobile,
#categoryModalClose,
.close-btn {
  background: linear-gradient(
    120deg,
    var(--ui-primary) 0%,
    var(--ui-primary-2) 100%
  ) !important;
  color: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
}

#inputListContainer,
#outputListContainer,
.extraTableContainer,
.menu-item[data-no-search="true"],
#generalDetails,
.lsv-table,
#inputListTable,
#outputListTable {
  background: #ffffff !important;
}

#generalDetails {
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04);
}

#generalDetails:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11);
}

#inputListTable th,
#outputListTable th,
.lsv-table th {
  background: linear-gradient(180deg, #f8fbff, #eef4fc);
  color: #334155;
  border-bottom: 1px solid #dce6f2;
}

#inputListTable td,
#outputListTable td,
.lsv-table td {
  border-color: #e4ebf5;
}

#inputListTable td[contenteditable="true"]:focus,
#outputListTable td[contenteditable="true"]:focus,
.lsv-table td[contenteditable="true"]:focus {
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.2);
  background: #fafdff;
}

.context-toolbar {
  background: rgba(11, 18, 32, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 12px;
  padding: 5px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.35);
}

.context-toolbar button {
  border-radius: 8px;
  min-width: 28px;
  min-height: 28px;
}

#mobileTutorialModal,
.desktop-modal,
#coverEditor {
  border: 1px solid #d7e3f2;
}

#stagePlotFooter,
.stageplot-footer {
  background: linear-gradient(
    120deg,
    var(--ui-primary) 0%,
    var(--ui-primary-2) 100%
  ) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.32);
  box-shadow: 0 -10px 24px rgba(20, 30, 48, 0.3);
}

#stagePlotFooter .footer-copy,
.stageplot-footer .footer-copy {
  color: #ffffff !important;
}

#stagePlotFooter .footer-social a,
.stageplot-footer .footer-social a {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(20, 30, 48, 0.22);
}

#stagePlotFooter .footer-social a:hover,
.stageplot-footer .footer-social a:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

body.stageplot-mobile-layout #stagePlotFooter .footer-social a {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Keep original swatch look in General Details toolbar */
.details-toolbar .color-swatch-btn,
body.stageplot-mobile-layout
  #mobileDataContent
  .details-toolbar
  .color-swatch-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(148, 163, 184, 0.9) !important;
  background: transparent !important;
  transform: translateY(0) !important;
  filter: none !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease !important;
}

body.stageplot-mobile-layout
  #mobileDataContent
  .details-toolbar
  .color-swatch-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
}

.details-toolbar .color-swatch-btn:hover,
body.stageplot-mobile-layout
  #mobileDataContent
  .details-toolbar
  .color-swatch-btn:hover {
  border-color: rgba(203, 213, 225, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 10px 16px rgba(20, 30, 48, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Left sidebar: non-bold labels/buttons */
#menu #menuControls button,
#menu #fileControls button,
#menu .menu-item button,
#menu .category-header,
#menu .cat-title,
#menu .mobile-cat-label {
  font-weight: 400 !important;
}

/* Instrument category actions (Add / Upload image / modal Add): unified look, no bold */
#menu .menu-item button,
#menu #uploadImageButton,
#categoryModalGrid .menu-item button,
#categoryModalGrid #uploadImageButton,
body.stageplot-mobile-layout .mic-add {
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  background: linear-gradient(
    120deg,
    var(--ui-primary) 0%,
    var(--ui-primary-2) 100%
  ) !important;
  color: #ffffff !important;
  box-shadow: var(--ui-shadow-btn) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}

#menu .menu-item button:hover,
#menu #uploadImageButton:hover,
#categoryModalGrid .menu-item button:hover,
#categoryModalGrid #uploadImageButton:hover,
body.stageplot-mobile-layout .mic-add:hover {
  transform: translateY(-1px);
  filter: saturate(1.04) brightness(1.03);
  box-shadow: 0 14px 24px rgba(20, 30, 48, 0.4) !important;
}

#menu .menu-item button:focus-visible,
#menu #uploadImageButton:focus-visible,
#categoryModalGrid .menu-item button:focus-visible,
#categoryModalGrid #uploadImageButton:focus-visible,
body.stageplot-mobile-layout .mic-add:focus-visible {
  outline: 3px solid rgba(53, 87, 125, 0.4);
  outline-offset: 2px;
}

/* Left column instrument category buttons */
#menu .category-header {
  background: linear-gradient(135deg, #7bbde8 0%, #5ca6d8 100%) !important;
  border: 1px solid rgba(123, 189, 232, 0.5) !important;
}

#inlineDeleteBtn,
#inlineLayerBtn,
.context-toolbar button {
  background: linear-gradient(
    120deg,
    var(--ui-primary) 0%,
    var(--ui-primary-2) 100%
  ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
}

/* Make Draw/Dimensions active state very noticeable */
#toggleDraw.active,
#toggleDimension.active,
#toggleDraw[aria-pressed="true"],
#toggleDimension[aria-pressed="true"] {
  background: linear-gradient(135deg, #ff8a00 0%, #ff4d00 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 183, 77, 0.95) !important;
  box-shadow:
    0 0 0 2px rgba(255, 138, 0, 0.25) inset,
    0 0 0 2px rgba(255, 138, 0, 0.36),
    0 10px 24px rgba(255, 90, 0, 0.45) !important;
  transform: translateY(-1px);
}

/* Brandings + top tools bar match global blue background */
.marcas-container,
body.stageplot-mobile-layout .marcas-container,
body.desktop-top-tools-active .desktop-top-actions {
  background: #0a4174 !important;
}

.marcas-container,
body.stageplot-mobile-layout .marcas-container {
  background: #49769f !important;
}

/* Global app background */
body,
.container,
.menu,
.menu-fixed,
.menu-scroll,
body.desktop-top-tools-active .desktop-top-actions,
#stagePlotFooter,
.stageplot-footer {
  background: #49769f !important;
}

/* Keep canvas and tables white on screen */
#canvas,
.canvas,
#inputListContainer,
#outputListContainer,
.extraTableContainer,
#inputListTable,
#outputListTable,
.lsv-table {
  background: #ffffff !important;
}

/* Mobile only: hide Free Draw button */
body.stageplot-mobile-layout #toggleDraw {
  display: none !important;
}

@media (max-width: 770px),
  (hover: none) and (pointer: coarse) and (max-height: 560px) {
  #toggleDraw,
  #menuControls #toggleDraw,
  #fileControls #toggleDraw,
  .desktop-top-actions #toggleDraw {
    display: none !important;
  }
}

/* Top desktop menu buttons gradient override */
body.desktop-top-tools-active
  .desktop-top-actions
  .dta-slot
  button:not(#langToggleBtn) {
  background: linear-gradient(120deg, #4e8ea2 0%, #6ea2b3 100%) !important;
  border-color: rgba(110, 162, 179, 0.45) !important;
  box-shadow: 0 10px 20px rgba(78, 142, 162, 0.34) !important;
  color: #ffffff !important;
}

body.desktop-top-tools-active
  .desktop-top-actions
  .dta-slot
  button:not(#langToggleBtn):hover {
  box-shadow: 0 14px 24px rgba(78, 142, 162, 0.4) !important;
}

/* Keep language button as the only exception */
body.desktop-top-tools-active .desktop-top-actions .dta-slot #langToggleBtn {
  background: linear-gradient(
    120deg,
    var(--ui-primary) 0%,
    var(--ui-primary-2) 100%
  ) !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
  box-shadow: var(--ui-shadow-btn) !important;
}

/* Do not alter print colors/visibility decisions */
@media print {
  body {
    background: #ffffff !important;
  }
  #coverPage,
  #canvas,
  #inputListContainer,
  #outputListContainer,
  .extraTableContainer,
  .menu-item[data-no-search="true"],
  #generalDetailsPrint {
    background: #ffffff !important;
  }
}

/* ==========================================================
   BLUE VILLA 2026 - Full visual refresh
   ========================================================== */
:root {
  --villa-bg-1: #dbe8f1;
  --villa-bg-2: #bfd5e6;
  --villa-surface: rgba(255, 255, 255, 0.5);
  --villa-surface-strong: rgba(255, 255, 255, 0.72);
  --villa-stroke: rgba(98, 132, 161, 0.24);
  --villa-text: #2a4258;
  --villa-muted: #6c849c;
  --villa-btn-1: #4e8ea2;
  --villa-btn-2: #6ea2b3;
  --villa-accent: #d5f55a;
  --villa-shadow: 0 14px 34px rgba(35, 76, 109, 0.16);
}

body {
  background: linear-gradient(
    180deg,
    var(--villa-bg-2),
    var(--villa-bg-1)
  ) !important;
  color: var(--villa-text) !important;
}

.container,
.menu,
.menu-fixed,
.menu-scroll,
body.desktop-top-tools-active .desktop-top-actions,
.marcas-container,
#stagePlotFooter,
.stageplot-footer {
  background: transparent !important;
}

body.desktop-top-tools-active .desktop-top-actions {
  padding: 10px 12px !important;
}

body.desktop-top-tools-active .desktop-top-actions .dta-group {
  background: var(--villa-surface) !important;
  border: 1px solid var(--villa-stroke) !important;
  box-shadow: var(--villa-shadow) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.desktop-top-tools-active .desktop-top-actions .dta-group-title {
  color: var(--villa-muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
}

#menu {
  border: 1px solid var(--villa-stroke) !important;
  border-radius: 14px !important;
  box-shadow: var(--villa-shadow) !important;
  background: var(--villa-surface) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#menu .menu-fixed {
  background: var(--villa-surface-strong) !important;
  border-bottom: 1px solid var(--villa-stroke) !important;
}

#searchContainer input {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(112, 146, 175, 0.3) !important;
  color: var(--villa-text) !important;
}

#searchContainer input::placeholder {
  color: #7791aa !important;
}

#menuControls button,
#fileControls button,
.desktop-top-actions .dta-slot button,
#uploadImageButton,
#toggleDetailsBtn,
#inputListContainer > button,
#outputListContainer > button,
.extraTableContainer > button,
.lsv-table-btn,
#addExtraTableBtn,
.menu-item button,
#categoryModalGrid .menu-item button,
body.stageplot-mobile-layout .mic-add {
  background: linear-gradient(
    120deg,
    var(--villa-btn-1),
    var(--villa-btn-2)
  ) !important;
  border: 1px solid rgba(110, 162, 179, 0.48) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(78, 142, 162, 0.3) !important;
  font-weight: 500 !important;
}

#menuControls button:hover,
#fileControls button:hover,
.desktop-top-actions .dta-slot button:hover,
#uploadImageButton:hover,
#toggleDetailsBtn:hover,
#inputListContainer > button:hover,
#outputListContainer > button:hover,
.extraTableContainer > button:hover,
.lsv-table-btn:hover,
#addExtraTableBtn:hover,
.menu-item button:hover,
#categoryModalGrid .menu-item button:hover,
body.stageplot-mobile-layout .mic-add:hover {
  box-shadow: 0 14px 26px rgba(78, 142, 162, 0.4) !important;
  transform: translateY(-1px);
}

#menu .category {
  border: 1px solid rgba(116, 154, 184, 0.32) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

#menu .category-header {
  background: linear-gradient(135deg, #9cc7de, #7fb1cb) !important;
  color: #1f3f58 !important;
  border: 1px solid rgba(140, 183, 209, 0.5) !important;
  box-shadow: 0 6px 14px rgba(55, 102, 136, 0.15) !important;
}

#menu .category-header *,
#menu .cat-title,
#menu .mobile-cat-label {
  color: #1f3f58 !important;
}

#menu .menu-item {
  border-radius: 12px !important;
  border: 1px solid rgba(140, 175, 202, 0.28) !important;
  background: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 8px 16px rgba(53, 93, 124, 0.12) !important;
}

.canvas,
#canvas {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 2px solid rgba(50, 74, 97, 0.95) !important;
  box-shadow: 0 10px 26px rgba(31, 61, 87, 0.2) !important;
}

#inputListContainer,
#outputListContainer,
.extraTableContainer,
.menu-item[data-no-search="true"] {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(125, 156, 183, 0.26) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(53, 93, 124, 0.13) !important;
}

#inputListTable th,
#outputListTable th,
.lsv-table th {
  background: linear-gradient(180deg, #ecf4fb, #ddeaf5) !important;
  color: #3c5870 !important;
}

#inputListTable td,
#outputListTable td,
.lsv-table td {
  color: #2f4b62 !important;
}

#generalDetails {
  border-radius: 10px !important;
  border: 1px solid rgba(135, 165, 190, 0.32) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

.context-toolbar {
  background: rgba(63, 95, 121, 0.88) !important;
  border: 1px solid rgba(157, 187, 212, 0.45) !important;
}

#toggleDraw.active,
#toggleDimension.active,
#toggleDraw[aria-pressed="true"],
#toggleDimension[aria-pressed="true"] {
  background: linear-gradient(135deg, #c8ef47, #aada24) !important;
  border: 1px solid rgba(190, 230, 88, 0.95) !important;
  color: #1c3144 !important;
  box-shadow:
    0 0 0 2px rgba(196, 235, 75, 0.3) inset,
    0 0 0 2px rgba(190, 230, 88, 0.36),
    0 10px 24px rgba(137, 176, 37, 0.35) !important;
}

.marcas-container {
  border-radius: 14px;
  border: 1px solid rgba(125, 162, 189, 0.26);
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 10px 24px rgba(53, 93, 124, 0.13);
  margin: 6px 8px 0;
  padding: 6px 10px;
}

#stagePlotFooter,
.stageplot-footer {
  background: rgba(255, 255, 255, 0.22) !important;
  border-top: 1px solid rgba(131, 168, 195, 0.32) !important;
  box-shadow: 0 -8px 18px rgba(53, 93, 124, 0.11) !important;
}

#stagePlotFooter .footer-copy,
.stageplot-footer .footer-copy {
  color: #27455f !important;
  text-shadow: none !important;
}

#stagePlotFooter .footer-social a,
.stageplot-footer .footer-social a {
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(125, 162, 189, 0.55) !important;
  color: #27455f !important;
}

#stagePlotFooter .footer-social a:hover,
.stageplot-footer .footer-social a:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #1f3a52 !important;
}

@media (max-width: 770px) {
  body,
  .container {
    background: linear-gradient(180deg, #bcd2e3, #dbe8f1) !important;
  }

  body.stageplot-mobile-layout #menu,
  body.stageplot-mobile-layout #mobileDataSheet {
    background: rgba(242, 248, 253, 0.95) !important;
    border: 1px solid rgba(131, 168, 195, 0.35) !important;
    box-shadow: 0 -18px 36px rgba(37, 73, 102, 0.2) !important;
  }
}

/* ==========================================================
   NEO DARK GLASS THEME (inspired by reference image)
   ========================================================== */
:root {
  --neo-bg-0: #060b13;
  --neo-bg-1: #0a111b;
  --neo-bg-2: #111a27;
  --neo-card: rgba(20, 30, 44, 0.76);
  --neo-card-strong: rgba(13, 22, 34, 0.9);
  --neo-stroke: rgba(124, 160, 196, 0.22);
  --neo-text: #dbe9f8;
  --neo-text-muted: #90a9c3;
  --neo-accent: #45c8ff;
  --neo-accent-2: #1b7fb8;
  --neo-accent-soft: rgba(69, 200, 255, 0.22);
  --neo-shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.45);
}

body {
  background:
    radial-gradient(
      1200px 800px at 72% -18%,
      rgba(46, 105, 156, 0.26) 0%,
      rgba(46, 105, 156, 0) 52%
    ),
    radial-gradient(
      900px 540px at 8% 100%,
      rgba(20, 72, 114, 0.22) 0%,
      rgba(20, 72, 114, 0) 58%
    ),
    linear-gradient(180deg, var(--neo-bg-1), var(--neo-bg-0)) !important;
  color: var(--neo-text) !important;
}

.container {
  gap: 10px;
  padding: 10px;
}

.menu,
#menu {
  border-radius: 16px !important;
  border: 1px solid var(--neo-stroke) !important;
  background: var(--neo-card) !important;
  box-shadow: var(--neo-shadow-lg) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.menu-fixed,
#menu .menu-fixed {
  background: var(--neo-card-strong) !important;
  border-bottom: 1px solid var(--neo-stroke) !important;
  box-shadow: none !important;
}

#searchContainer input {
  background: rgba(11, 20, 31, 0.9) !important;
  border: 1px solid rgba(129, 169, 205, 0.25) !important;
  color: var(--neo-text) !important;
}

#searchContainer input::placeholder {
  color: var(--neo-text-muted) !important;
}

body.desktop-top-tools-active .desktop-top-actions {
  background: transparent !important;
  padding: 0 !important;
}

body.desktop-top-tools-active .desktop-top-actions .dta-shell {
  gap: 10px !important;
}

body.desktop-top-tools-active .desktop-top-actions .dta-group {
  background: var(--neo-card) !important;
  border: 1px solid var(--neo-stroke) !important;
  border-radius: 14px !important;
  box-shadow: var(--neo-shadow-lg) !important;
}

body.desktop-top-tools-active .desktop-top-actions .dta-group-title {
  color: var(--neo-text-muted) !important;
}

#menuControls button,
#fileControls button,
.desktop-top-actions .dta-slot button,
#uploadImageButton,
#toggleDetailsBtn,
#inputListContainer > button,
#outputListContainer > button,
.extraTableContainer > button,
.lsv-table-btn,
#addExtraTableBtn,
.menu-item button,
#categoryModalGrid .menu-item button,
body.stageplot-mobile-layout .mic-add {
  background: linear-gradient(
    120deg,
    var(--neo-accent-2),
    var(--neo-accent)
  ) !important;
  border: 1px solid rgba(98, 194, 240, 0.45) !important;
  color: #eaf7ff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 10px 22px rgba(14, 76, 116, 0.34) !important;
}

#menuControls button:hover,
#fileControls button:hover,
.desktop-top-actions .dta-slot button:hover,
#uploadImageButton:hover,
#toggleDetailsBtn:hover,
#inputListContainer > button:hover,
#outputListContainer > button:hover,
.extraTableContainer > button:hover,
.lsv-table-btn:hover,
#addExtraTableBtn:hover,
.menu-item button:hover,
#categoryModalGrid .menu-item button:hover,
body.stageplot-mobile-layout .mic-add:hover {
  box-shadow:
    0 0 0 1px rgba(157, 224, 255, 0.22) inset,
    0 14px 28px rgba(11, 76, 120, 0.44) !important;
  filter: saturate(1.08);
}

#toggleDraw.active,
#toggleDimension.active,
#toggleDraw[aria-pressed="true"],
#toggleDimension[aria-pressed="true"] {
  background: linear-gradient(135deg, #95f53c, #d8ff6a) !important;
  color: #122131 !important;
  border: 1px solid rgba(208, 255, 118, 0.88) !important;
  box-shadow:
    0 0 0 2px rgba(177, 245, 80, 0.24),
    0 10px 22px rgba(114, 161, 36, 0.4) !important;
}

#menu .category {
  border: 1px solid rgba(112, 146, 177, 0.25) !important;
  border-radius: 12px !important;
  background: rgba(12, 23, 36, 0.38) !important;
}

#menu .category-header {
  background: linear-gradient(130deg, #1b3147, #284764) !important;
  border: 1px solid rgba(111, 165, 205, 0.32) !important;
  color: #d6e9fb !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24) !important;
}

#menu .category-header *,
#menu .cat-title,
#menu .mobile-cat-label {
  color: #d6e9fb !important;
}

#menu .menu-item {
  border: 1px solid rgba(108, 146, 177, 0.28) !important;
  border-radius: 12px !important;
  background: rgba(15, 27, 41, 0.62) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24) !important;
}

#menu .menu-item .imageName {
  color: #cae0f5 !important;
}

.canvas,
#canvas {
  border-radius: 16px !important;
  border: 1px solid rgba(107, 141, 173, 0.38) !important;
  box-shadow: var(--neo-shadow-lg) !important;
}

#inputListContainer,
#outputListContainer,
.extraTableContainer,
.menu-item[data-no-search="true"] {
  background: var(--neo-card) !important;
  border: 1px solid var(--neo-stroke) !important;
  border-radius: 14px !important;
  box-shadow: var(--neo-shadow-lg) !important;
}

#inputListContainer h2,
#outputListContainer h2,
.extraTableContainer h2,
.titleeditable {
  color: #dbe9f8 !important;
  border-bottom-color: rgba(122, 156, 186, 0.32) !important;
}

#inputListTable,
#outputListTable,
.lsv-table {
  border-color: rgba(116, 146, 175, 0.28) !important;
  background: rgba(11, 21, 33, 0.74) !important;
}

#inputListTable th,
#outputListTable th,
.lsv-table th {
  background: linear-gradient(180deg, #152536, #132233) !important;
  color: #c8deef !important;
  border-color: rgba(105, 133, 159, 0.32) !important;
}

#inputListTable td,
#outputListTable td,
.lsv-table td {
  background: rgba(13, 23, 35, 0.56) !important;
  color: #d9e8f7 !important;
  border-color: rgba(91, 122, 150, 0.25) !important;
}

#inputListTable tbody tr:nth-child(even),
#outputListTable tbody tr:nth-child(even),
.lsv-table tbody tr:nth-child(even) {
  background: rgba(17, 29, 43, 0.74) !important;
}

#inputListTable tbody tr:hover,
#outputListTable tbody tr:hover,
.lsv-table tbody tr:hover {
  background: rgba(38, 72, 102, 0.52) !important;
}

#generalDetails {
  background: rgba(10, 19, 29, 0.86) !important;
  border: 1px solid rgba(104, 139, 169, 0.34) !important;
  color: #d9e9f8 !important;
}

.details-toolbar {
  background: rgba(14, 25, 37, 0.82) !important;
  border: 1px solid rgba(108, 142, 171, 0.3) !important;
}

.details-toolbar button {
  background: rgba(14, 33, 54, 0.82) !important;
  border: 1px solid rgba(104, 149, 180, 0.35) !important;
  color: #cfe4f7 !important;
}

.details-toolbar button:hover {
  background: rgba(25, 52, 79, 0.9) !important;
}

#stagePlotFooter,
.stageplot-footer,
.marcas-container {
  background: rgba(11, 21, 33, 0.62) !important;
  border: 1px solid rgba(104, 141, 171, 0.26) !important;
  box-shadow: var(--neo-shadow-lg) !important;
}

#stagePlotFooter .footer-copy,
.stageplot-footer .footer-copy {
  color: #cde0f2 !important;
}

#stagePlotFooter .footer-social a,
.stageplot-footer .footer-social a {
  background: rgba(19, 36, 55, 0.82) !important;
  border: 1px solid rgba(107, 148, 182, 0.35) !important;
  color: #dbedff !important;
}

#stagePlotFooter .footer-social a:hover,
.stageplot-footer .footer-social a:hover {
  background: rgba(34, 63, 92, 0.9) !important;
  color: #ffffff !important;
}

#mobileTutorialModal,
.desktop-modal,
#coverEditor,
#mobileDataSheet,
#categoryModal {
  background: rgba(13, 23, 36, 0.95) !important;
  border: 1px solid rgba(106, 142, 172, 0.32) !important;
  color: #d8e9f9 !important;
}

@media (max-width: 770px) {
  body,
  .container {
    background:
      radial-gradient(
        700px 400px at 100% -20%,
        rgba(34, 103, 152, 0.34),
        rgba(34, 103, 152, 0) 60%
      ),
      linear-gradient(180deg, #0b1522, #070d16) !important;
  }

  body.stageplot-mobile-layout #menu,
  body.stageplot-mobile-layout #mobileDataSheet {
    background: rgba(11, 20, 31, 0.96) !important;
    border: 1px solid rgba(104, 138, 167, 0.38) !important;
  }
}

@media print {
  body,
  .container,
  #menu,
  .menu,
  .menu-fixed,
  .menu-scroll,
  #stagePlotFooter,
  .stageplot-footer,
  .marcas-container {
    background: #ffffff !important;
  }
}

/* FINAL: Input/Output buttons neon green */
#inputListContainer > button,
#outputListContainer > button {
  background: linear-gradient(120deg, #8eea2f, #b7ff57) !important;
  border: 1px solid rgba(185, 255, 108, 0.78) !important;
  color: #13220d !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 10px 22px rgba(123, 198, 40, 0.44) !important;
}

#inputListContainer > button:hover,
#outputListContainer > button:hover {
  box-shadow:
    0 0 0 1px rgba(233, 255, 200, 0.4) inset,
    0 14px 26px rgba(136, 214, 49, 0.5) !important;
}

/* Keep extra-table action buttons purple */
.extraTableContainer > button,
.lsv-table-btn,
.lsv-table-btn--toggle,
.lsv-table-btn--clear,
.lsv-table-btn--delete,
.lsv-table-btn--row-add,
.lsv-table-btn--row-remove,
.lsv-table-btn--col-add,
.lsv-table-btn--col-remove,
#addExtraTableBtn {
  background: linear-gradient(120deg, #6d39cc, #9b52ff) !important;
  border: 1px solid rgba(177, 134, 255, 0.46) !important;
  color: #f6f0ff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 10px 20px rgba(83, 36, 158, 0.33) !important;
}

.extraTableContainer > button:hover,
.lsv-table-btn:hover,
#addExtraTableBtn:hover {
  box-shadow:
    0 0 0 1px rgba(217, 187, 255, 0.24) inset,
    0 14px 24px rgba(86, 34, 168, 0.42) !important;
}

/* FINAL OVERRIDE: table buttons must stay purple (default + extra tables) */
#inputListContainer > button,
#outputListContainer > button,
.extraTableContainer > button,
.lsv-table-btn,
.lsv-table-btn--toggle,
.lsv-table-btn--clear,
.lsv-table-btn--delete,
.lsv-table-btn--row-add,
.lsv-table-btn--row-remove,
.lsv-table-btn--col-add,
.lsv-table-btn--col-remove,
#addExtraTableBtn {
  background: linear-gradient(
    120deg,
    var(--f-accent-2),
    var(--f-accent)
  ) !important;
  border: 1px solid rgba(177, 134, 255, 0.46) !important;
  color: #f6f0ff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 10px 20px rgba(83, 36, 158, 0.33) !important;
}

#inputListContainer > button:hover,
#outputListContainer > button:hover,
.extraTableContainer > button:hover,
.lsv-table-btn:hover,
#addExtraTableBtn:hover {
  box-shadow:
    0 0 0 1px rgba(217, 187, 255, 0.24) inset,
    0 14px 24px rgba(86, 34, 168, 0.42) !important;
}

/* Top menu buttons = table buttons */
body.desktop-top-tools-active .desktop-top-actions .dta-slot button,
body.desktop-top-tools-active
  .desktop-top-actions
  .dta-slot
  button:not(#langToggleBtn),
body.desktop-top-tools-active .desktop-top-actions .dta-slot #langToggleBtn {
  background: linear-gradient(
    120deg,
    var(--f-accent-2),
    var(--f-accent)
  ) !important;
  border: 1px solid rgba(177, 134, 255, 0.46) !important;
  color: #f6f0ff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 10px 20px rgba(83, 36, 158, 0.33) !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body.desktop-top-tools-active .desktop-top-actions .dta-slot button:hover,
body.desktop-top-tools-active
  .desktop-top-actions
  .dta-slot
  button:not(#langToggleBtn):hover,
body.desktop-top-tools-active
  .desktop-top-actions
  .dta-slot
  #langToggleBtn:hover {
  box-shadow:
    0 0 0 1px rgba(217, 187, 255, 0.24) inset,
    0 14px 24px rgba(86, 34, 168, 0.42) !important;
  transform: translateY(-1px);
}

/* ==========================================================
   GLOBAL GREEN BUTTON OVERRIDE
   ========================================================== */
:root {
  --green-btn-1: #8eea2f;
  --green-btn-2: #b7ff57;
  --green-btn-border: rgba(185, 255, 108, 0.78);
  --green-btn-shadow: rgba(123, 198, 40, 0.44);
  --green-btn-text: #13220d;
}

button:not(.color-swatch-btn):not(.lsv-col-move),
.lsv-table-btn,
.home-link,
.mobile-fab,
.mic-add {
  background: linear-gradient(
    120deg,
    var(--green-btn-1),
    var(--green-btn-2)
  ) !important;
  border: 1px solid var(--green-btn-border) !important;
  color: var(--green-btn-text) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 10px 22px var(--green-btn-shadow) !important;
  font-weight: 600 !important;
}

button:not(.color-swatch-btn):not(.lsv-col-move):hover,
.lsv-table-btn:hover,
.home-link:hover,
.mobile-fab:hover,
.mic-add:hover {
  box-shadow:
    0 0 0 1px rgba(233, 255, 200, 0.4) inset,
    0 14px 26px rgba(136, 214, 49, 0.5) !important;
  filter: saturate(1.08);
}

button:not(.color-swatch-btn):not(.lsv-col-move):active,
.lsv-table-btn:active,
.home-link:active,
.mobile-fab:active,
.mic-add:active {
  transform: translateY(0) scale(0.985);
  box-shadow:
    0 0 0 1px rgba(233, 255, 200, 0.24) inset,
    0 8px 16px rgba(126, 192, 46, 0.42) !important;
}

/* Ensure top desktop menu buttons are also green */
body.desktop-top-tools-active .desktop-top-actions .dta-slot button {
  background: linear-gradient(
    120deg,
    var(--green-btn-1),
    var(--green-btn-2)
  ) !important;
  border: 1px solid var(--green-btn-border) !important;
  color: var(--green-btn-text) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 10px 22px var(--green-btn-shadow) !important;
}

body.desktop-top-tools-active .desktop-top-actions .dta-slot button:hover {
  box-shadow:
    0 0 0 1px rgba(233, 255, 200, 0.4) inset,
    0 14px 26px rgba(136, 214, 49, 0.5) !important;
}

/* ==========================================================
   FIERCE DASHBOARD THEME - full pro redesign
   ========================================================== */
:root {
  --f-bg-0: #151413;
  --f-bg-1: #1e1c1b;
  --f-bg-2: #2a2724;
  --f-panel: rgba(42, 40, 37, 0.78);
  --f-panel-2: rgba(35, 33, 30, 0.9);
  --f-stroke: rgba(186, 173, 153, 0.22);
  --f-text: #f2ece4;
  --f-muted: #bdb1a2;
  --f-accent: #9b52ff;
  --f-accent-2: #6d39cc;
  --f-glow: rgba(155, 82, 255, 0.35);
  --f-shadow: 0 16px 36px rgba(0, 0, 0, 0.44);
}

body {
  background:
    radial-gradient(
      900px 520px at 18% -15%,
      rgba(162, 128, 82, 0.2),
      rgba(162, 128, 82, 0) 56%
    ),
    radial-gradient(
      1200px 740px at 82% 115%,
      rgba(85, 63, 43, 0.22),
      rgba(85, 63, 43, 0) 56%
    ),
    linear-gradient(180deg, var(--f-bg-2), var(--f-bg-0)) !important;
  color: var(--f-text) !important;
}

.container {
  padding: 14px !important;
  gap: 12px !important;
}

/* ===== Desktop structure ===== */
@media (min-width: 770px) {
  body.desktop-top-tools-active .container {
    grid-template-columns: 204px minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    min-height: calc(100dvh - 18px) !important;
  }

  body.desktop-top-tools-active .desktop-top-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 10px !important;
    border-radius: 16px !important;
    border: 1px solid var(--f-stroke) !important;
    background: var(--f-panel) !important;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      var(--f-shadow) !important;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-shell {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-group {
    border-radius: 12px !important;
    border: 1px solid rgba(181, 165, 145, 0.22) !important;
    background: linear-gradient(
      180deg,
      rgba(49, 45, 41, 0.82),
      rgba(31, 29, 27, 0.84)
    ) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3) !important;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-group-title {
    color: #d3c4b1 !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-slot {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    gap: 7px !important;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-slot button {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  body.desktop-top-tools-active #menu {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 204px !important;
    flex: 0 0 204px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    align-self: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 18px !important;
    border: 1px solid var(--f-stroke) !important;
    background: var(--f-panel-2) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      var(--f-shadow) !important;
  }

  body.desktop-top-tools-active #menu .menu-fixed {
    padding: 10px 10px 12px !important;
    border-bottom: 1px solid rgba(174, 161, 143, 0.16) !important;
    background: rgba(30, 28, 26, 0.9) !important;
  }

  body.desktop-top-tools-active #canvas {
    grid-column: 2 !important;
    grid-row: 2 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }
}

/* ===== Sidebar and categories ===== */
#menu .category {
  margin: 0 8px 10px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(170, 157, 139, 0.18) !important;
  background: rgba(29, 27, 25, 0.58) !important;
}

#menu .category-header {
  min-height: 42px !important;
  padding: 8px 10px !important;
  border-radius: 0 !important;
  background: linear-gradient(130deg, #3a3632, #2f2b28) !important;
  color: #f0e7dc !important;
  border: 1px solid rgba(176, 160, 140, 0.22) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.26) !important;
}

#menu .category-header *,
#menu .cat-title,
#menu .mobile-cat-label {
  color: #f0e7dc !important;
}

#menu .neo-cat-icon {
  background: linear-gradient(
    120deg,
    var(--f-accent-2),
    var(--f-accent)
  ) !important;
  border: 1px solid rgba(174, 128, 255, 0.5) !important;
  box-shadow: 0 6px 12px rgba(109, 57, 204, 0.36) !important;
}

#menu .menu-item {
  border-radius: 10px !important;
  border: 1px solid rgba(165, 151, 132, 0.16) !important;
  background: rgba(23, 22, 20, 0.7) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24) !important;
}

#menu .menu-item .imageName {
  color: #e6ddd1 !important;
}

/* ===== Search ===== */
#searchContainer input {
  background: rgba(22, 22, 22, 0.72) !important;
  border: 1px solid rgba(170, 151, 129, 0.24) !important;
  color: #f2ebe1 !important;
}

#searchContainer input::placeholder {
  color: #af9f8c !important;
}

/* ===== Button system ===== */
#menuControls button,
#fileControls button,
.desktop-top-actions .dta-slot button,
#uploadImageButton,
#toggleDetailsBtn,
#inputListContainer > button,
#outputListContainer > button,
.extraTableContainer > button,
.lsv-table-btn,
#addExtraTableBtn,
.menu-item button,
#categoryModalGrid .menu-item button,
body.stageplot-mobile-layout .mic-add {
  background: linear-gradient(
    120deg,
    var(--f-accent-2),
    var(--f-accent)
  ) !important;
  border: 1px solid rgba(177, 134, 255, 0.46) !important;
  color: #f6f0ff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 10px 20px rgba(83, 36, 158, 0.33) !important;
}

#menuControls button:hover,
#fileControls button:hover,
.desktop-top-actions .dta-slot button:hover,
#uploadImageButton:hover,
#toggleDetailsBtn:hover,
#inputListContainer > button:hover,
#outputListContainer > button:hover,
.extraTableContainer > button:hover,
.lsv-table-btn:hover,
#addExtraTableBtn:hover,
.menu-item button:hover,
#categoryModalGrid .menu-item button:hover,
body.stageplot-mobile-layout .mic-add:hover {
  box-shadow:
    0 0 0 1px rgba(217, 187, 255, 0.24) inset,
    0 14px 24px rgba(86, 34, 168, 0.42) !important;
  transform: translateY(-1px);
}

#toggleDraw.active,
#toggleDimension.active,
#toggleDraw[aria-pressed="true"],
#toggleDimension[aria-pressed="true"] {
  background: linear-gradient(135deg, #f6e27c, #ebc04f) !important;
  border: 1px solid rgba(255, 229, 139, 0.7) !important;
  color: #34260f !important;
  box-shadow:
    0 0 0 2px rgba(242, 214, 112, 0.24),
    0 10px 22px rgba(151, 113, 25, 0.35) !important;
}

/* ===== Canvas and main cards ===== */
.canvas,
#canvas {
  border-radius: 16px !important;
  border: 1px solid rgba(188, 173, 152, 0.3) !important;
  box-shadow: var(--f-shadow) !important;
}

#inputListContainer,
#outputListContainer,
.extraTableContainer,
.menu-item[data-no-search="true"] {
  border-radius: 14px !important;
  border: 1px solid rgba(178, 162, 140, 0.24) !important;
  background: var(--f-panel) !important;
  box-shadow: var(--f-shadow) !important;
}

#inputListContainer h2,
#outputListContainer h2,
.extraTableContainer h2,
.titleeditable {
  color: white !important;
  border-bottom-color: rgba(176, 161, 140, 0.22) !important;
}

#inputListTable,
#outputListTable,
.lsv-table {
  border-color: rgba(165, 149, 126, 0.22) !important;
}

#inputListTable th,
#outputListTable th,
.lsv-table th {
  background: linear-gradient(180deg, #3a3530, #2b2724) !important;
  color: #e8dccd !important;
}

#inputListTable td,
#outputListTable td,
.lsv-table td {
  background: rgba(28, 26, 24, 0.72) !important;
  color: #f0e8df !important;
  border-color: rgba(154, 138, 117, 0.2) !important;
}

#inputListTable tbody tr:nth-child(even),
#outputListTable tbody tr:nth-child(even),
.lsv-table tbody tr:nth-child(even) {
  background: rgba(34, 31, 28, 0.86) !important;
}

#inputListTable tbody tr:hover,
#outputListTable tbody tr:hover,
.lsv-table tbody tr:hover {
  background: rgba(73, 62, 50, 0.72) !important;
}

#generalDetails {
  background: linear-gradient(180deg, #f7f9fc, #edf1f6) !important;
  border: 1px solid rgba(175, 158, 137, 0.24) !important;
  color: black !important;
}

.details-toolbar {
  background: rgba(31, 28, 26, 0.82) !important;
  border: 1px solid rgba(171, 155, 134, 0.2) !important;
}

.details-toolbar button {
  background: linear-gradient(160deg, #3c3732, #292623) !important;
  border: 1px solid rgba(173, 156, 136, 0.2) !important;
  color: #f1e6da !important;
}

/* ===== Footer and branding ===== */
#stagePlotFooter,
.stageplot-footer,
.marcas-container {
  background: rgba(28, 25, 22, 0.72) !important;
  border: 1px solid rgba(173, 157, 136, 0.24) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3) !important;
}

#stagePlotFooter .footer-copy,
.stageplot-footer .footer-copy {
  color: #e2d5c6 !important;
}

#stagePlotFooter .footer-social a,
.stageplot-footer .footer-social a {
  background: rgba(41, 37, 33, 0.8) !important;
  border: 1px solid rgba(173, 154, 129, 0.3) !important;
  color: #f3e8db !important;
}

#stagePlotFooter .footer-social a:hover,
.stageplot-footer .footer-social a:hover {
  background: rgba(62, 56, 50, 0.92) !important;
}

/* ===== Mobile polish ===== */
@media (max-width: 770px) {
  body,
  .container {
    background:
      radial-gradient(
        620px 360px at 90% -22%,
        rgba(118, 92, 61, 0.34),
        rgba(118, 92, 61, 0) 58%
      ),
      linear-gradient(180deg, #26221f, #141210) !important;
  }

  body.stageplot-mobile-layout #menu,
  body.stageplot-mobile-layout #mobileDataSheet {
    background: rgba(26, 24, 22, 0.95) !important;
    border: 1px solid rgba(178, 161, 140, 0.26) !important;
    box-shadow: 0 -22px 42px rgba(0, 0, 0, 0.44) !important;
  }

  body.stageplot-mobile-layout #menu .menu-fixed {
    background: rgba(24, 22, 20, 0.95) !important;
    border-bottom: 1px solid rgba(174, 157, 136, 0.2) !important;
  }
}

@media print {
  body,
  .container,
  #menu,
  .menu,
  .menu-fixed,
  .menu-scroll,
  #stagePlotFooter,
  .stageplot-footer,
  .marcas-container {
    background: #ffffff !important;
  }
}

/* ===== ABSOLUTE FINAL OVERRIDES (do not move) ===== */
/* Input/Output table action buttons: neon green */
#inputListContainer > button,
#outputListContainer > button {
  background: linear-gradient(120deg, #8eea2f, #b7ff57) !important;
  border: 1px solid rgba(185, 255, 108, 0.78) !important;
  color: #13220d !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 10px 22px rgba(123, 198, 40, 0.44) !important;
}

#inputListContainer > button:hover,
#outputListContainer > button:hover {
  box-shadow:
    0 0 0 1px rgba(233, 255, 200, 0.4) inset,
    0 14px 26px rgba(136, 214, 49, 0.5) !important;
}

/* Extra tables action buttons: neon green */
.extraTableContainer > button,
.extraTableContainer .lsv-table-btn,
.extraTableContainer .lsv-table-btn--toggle,
.extraTableContainer .lsv-table-btn--clear,
.extraTableContainer .lsv-table-btn--delete,
.extraTableContainer .lsv-table-btn--row-add,
.extraTableContainer .lsv-table-btn--row-remove,
.extraTableContainer .lsv-table-btn--col-add,
.extraTableContainer .lsv-table-btn--col-remove,
.extraTableContainer #addExtraTableBtn,
#extraTablesContainer .lsv-table-btn,
#extraTablesContainer .lsv-table-btn--toggle,
#extraTablesContainer .lsv-table-btn--clear,
#extraTablesContainer .lsv-table-btn--delete,
#extraTablesContainer .lsv-table-btn--row-add,
#extraTablesContainer .lsv-table-btn--row-remove,
#extraTablesContainer .lsv-table-btn--col-add,
#extraTablesContainer .lsv-table-btn--col-remove {
  background: linear-gradient(120deg, #8eea2f, #b7ff57) !important;
  border: 1px solid rgba(185, 255, 108, 0.78) !important;
  color: #13220d !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 10px 22px rgba(123, 198, 40, 0.44) !important;
}

.extraTableContainer > button:hover,
.extraTableContainer .lsv-table-btn:hover,
#extraTablesContainer .lsv-table-btn:hover {
  box-shadow:
    0 0 0 1px rgba(233, 255, 200, 0.4) inset,
    0 14px 26px rgba(136, 214, 49, 0.5) !important;
}

/* ABSOLUTE FINAL: top menu buttons neon green */
body.desktop-top-tools-active .desktop-top-actions .dta-slot button,
body.desktop-top-tools-active
  .desktop-top-actions
  .dta-slot
  button:not(#langToggleBtn),
body.desktop-top-tools-active .desktop-top-actions .dta-slot #langToggleBtn,
body.desktop-top-tools-active .desktop-top-actions .dta-slot .btn {
  background: linear-gradient(120deg, #8eea2f, #b7ff57) !important;
  border: 1px solid rgba(185, 255, 108, 0.78) !important;
  color: #13220d !important;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 10px 22px rgba(123, 198, 40, 0.44) !important;
}

body.desktop-top-tools-active .desktop-top-actions .dta-slot button:hover,
body.desktop-top-tools-active
  .desktop-top-actions
  .dta-slot
  button:not(#langToggleBtn):hover,
body.desktop-top-tools-active
  .desktop-top-actions
  .dta-slot
  #langToggleBtn:hover,
body.desktop-top-tools-active .desktop-top-actions .dta-slot .btn:hover {
  box-shadow:
    0 0 0 1px rgba(233, 255, 200, 0.4) inset,
    0 14px 26px rgba(136, 214, 49, 0.5) !important;
}

/* ABSOLUTE FINAL: startup modals without any borders */
#desktopTutorialModal,
#desktopTutorialModal *,
#mobileTutorialModal,
#mobileTutorialModal *,
#contestModal,
#contestModal *,
#coverEditor,
#coverEditor * {
  border: none !important;
  outline: none !important;
}

#desktopTutorialModal::before,
#desktopTutorialModal::after,
#mobileTutorialModal::before,
#mobileTutorialModal::after,
#contestModal::before,
#contestModal::after,
#coverEditor::before,
#coverEditor::after {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Kill top decorative strip above startup contest modal */
#contestModal.contest-modal::before,
#contestModal.contest-modal::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ABSOLUTE FINAL: remove startup modal shadow artifacts */
#contestModal,
#contestModal.contest-modal,
#contestModal.contest-modal::before,
#contestModal.contest-modal::after,
#contestModal ._contestCard,
#contestModal .contest-img,
#contestModal .contest-cta,
#contestModal .contest-close,
#contestModal * {
  box-shadow: none !important;
}

/* ABSOLUTE FINAL: instrument/category ADD buttons in neon green */
#menu .menu-item button,
#categoryModalGrid .menu-item button,
body.stageplot-mobile-layout .mic-add,
#uploadImageButton,
#menu #uploadImageButton,
#categoryModalGrid #uploadImageButton,
#shapeAddButton,
#textAddButton {
  background: linear-gradient(120deg, #8eea2f, #b7ff57) !important;
  border: 1px solid rgba(185, 255, 108, 0.78) !important;
  color: #13220d !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 10px 22px rgba(123, 198, 40, 0.44) !important;
}

#menu .menu-item button:hover,
#categoryModalGrid .menu-item button:hover,
body.stageplot-mobile-layout .mic-add:hover,
#uploadImageButton:hover,
#menu #uploadImageButton:hover,
#categoryModalGrid #uploadImageButton:hover,
#shapeAddButton:hover,
#textAddButton:hover {
  box-shadow:
    0 0 0 1px rgba(233, 255, 200, 0.4) inset,
    0 14px 26px rgba(136, 214, 49, 0.5) !important;
  transform: translateY(-1px);
}

/* ABSOLUTE FINAL: category item images (left column) */
#menu .menu-item img,
#menu .menu-item .image-container img,
#menu .menu-item .cat-thumb {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#menu .menu-item,
#menu .menu-item .image-container,
#menu .menu-item .cat-thumb-wrap {
  background: rgba(123, 198, 40, 0.44) !important;
}

/* ABSOLUTE FINAL: upload image button forced neon green */
#uploadImageButton,
#menu #uploadImageButton,
#categoryModalGrid #uploadImageButton,
#menu button#uploadImageButton,
#categoryModalGrid button#uploadImageButton {
  background: linear-gradient(120deg, #8eea2f, #b7ff57) !important;
  border: 1px solid rgba(185, 255, 108, 0.78) !important;
  color: #13220d !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 10px 22px rgba(123, 198, 40, 0.44) !important;
}

#uploadImageButton:hover,
#menu #uploadImageButton:hover,
#categoryModalGrid #uploadImageButton:hover,
#menu button#uploadImageButton:hover,
#categoryModalGrid button#uploadImageButton:hover,
#uploadImageButton:focus-visible,
#menu #uploadImageButton:focus-visible,
#categoryModalGrid #uploadImageButton:focus-visible,
#menu button#uploadImageButton:focus-visible,
#categoryModalGrid button#uploadImageButton:focus-visible,
#uploadImageButton:active,
#menu #uploadImageButton:active,
#categoryModalGrid #uploadImageButton:active,
#menu button#uploadImageButton:active,
#categoryModalGrid button#uploadImageButton:active {
  background: linear-gradient(120deg, #9bf03f, #c6ff69) !important;
  border: 1px solid rgba(201, 255, 131, 0.88) !important;
  color: #10200b !important;
  box-shadow:
    0 0 0 1px rgba(233, 255, 200, 0.4) inset,
    0 14px 26px rgba(136, 214, 49, 0.5) !important;
}

/* ABSOLUTE FINAL: table defaults (white/gray rows + black text) */
#inputListTable,
#outputListTable,
.lsv-table {
  background: #ffffff !important;
  border-color: #d7dde5 !important;
}

#inputListTable th,
#outputListTable th,
.lsv-table th {
  background: linear-gradient(180deg, #f7f9fc, #edf1f6) !important;
  color: #000000 !important;
  border-color: #d7dde5 !important;
}

#inputListTable td,
#outputListTable td,
.lsv-table td {
  color: #000000 !important;
  border-color: #dfe5ec !important;
}

#inputListTable tbody tr:nth-child(odd) td,
#outputListTable tbody tr:nth-child(odd) td,
.lsv-table tbody tr:nth-child(odd) td {
  background: #ffffff !important;
}

#inputListTable tbody tr:nth-child(even) td,
#outputListTable tbody tr:nth-child(even) td,
.lsv-table tbody tr:nth-child(even) td {
  background: #f1f4f8 !important;
}

#inputListTable tbody tr:hover td,
#outputListTable tbody tr:hover td,
.lsv-table tbody tr:hover td {
  background: #e8edf4 !important;
}

#inputListTable td input,
#outputListTable td input,
.lsv-table td input,
#inputListTable td select,
#outputListTable td select,
.lsv-table td select,
#inputListTable td textarea,
#outputListTable td textarea,
.lsv-table td textarea,
#inputListTable td [contenteditable="true"],
#outputListTable td [contenteditable="true"],
.lsv-table td [contenteditable="true"] {
  color: #000000 !important;
}

/* ABSOLUTE FINAL: no shadows in "General Details" when printing PDF */
@media print {
  .menu-item[data-no-search="true"],
  .menu-item[data-no-search="true"] *,
  #generalDetailsPrint,
  #generalDetailsPrint *,
  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"],
  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"]
    *,
  body.stageplot-mobile-layout #mobileDataContent #generalDetailsPrint,
  body.stageplot-mobile-layout #mobileDataContent #generalDetailsPrint * {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }

  .menu-item[data-no-search="true"],
  #generalDetailsPrint,
  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"],
  body.stageplot-mobile-layout #mobileDataContent #generalDetailsPrint {
    border: 0 !important;
    background: #ffffff !important;
  }
}

/* ABSOLUTE FINAL: no shadows in tables when printing PDF */
@media print {
  #inputListContainer,
  #outputListContainer,
  .extraTableContainer,
  .lsv-table-container,
  #inputListTable,
  #outputListTable,
  .lsv-table,
  #inputListTable *,
  #outputListTable *,
  .lsv-table *,
  body.stageplot-mobile-layout #mobileDataContent #inputListContainer,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContainer,
  body.stageplot-mobile-layout #mobileDataContent #inputListTable,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table,
  body.stageplot-mobile-layout #mobileDataContent #inputListTable *,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable *,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table * {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }
}

/* ABSOLUTE FINAL: screen fit (avoid canvas overflow to the right) */
html,
body {
  overflow-x: hidden !important;
}

body:not(.stageplot-mobile-layout) .container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body:not(.stageplot-mobile-layout) .canvas,
body:not(.stageplot-mobile-layout) #canvas {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#printLinesOverlayBack,
#printLinesOverlayFront {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#printLinesOverlayBack {
  z-index: 2;
}

#printLinesOverlayFront {
  z-index: 6;
}

.print-line-seg {
  position: absolute;
  transform-origin: 0 50%;
}

.print-dim-label {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 1px 6px;
  border: 1px solid #3b82f6;
  background: #ffffff;
  color: #0f172a;
  font:
    600 12px Poppins,
    sans-serif;
  line-height: 1.2;
  white-space: nowrap;
}

/* ABSOLUTE FINAL: unified print canvas block (single source of truth) */
@media print {
  body.print-canvas-mode.print-safari-engine {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.print-canvas-mode .container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    place-items: unset !important;
    justify-items: stretch !important;
    align-items: start !important;
  }

  body.print-canvas-mode .canvas,
  body.print-canvas-mode #canvas,
  body.print-canvas-mode #permanentCanvas,
  body.print-canvas-mode #drawingCanvas,
  body.print-canvas-mode #guidesCanvas,
  body.print-canvas-mode #canvas .draggable {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  body.print-canvas-mode .canvas {
    zoom: 1 !important;
    transform: none !important;
    margin: 0 !important;
    left: 0 !important;
    right: auto !important;
  }

  body.print-canvas-mode #canvas {
    position: relative !important;
    overflow: visible !important;
    background: #ffffff !important;
    width: var(--print-canvas-width, 1000px) !important;
    min-width: var(--print-canvas-width, 1000px) !important;
    max-width: var(--print-canvas-width, 1000px) !important;
    height: var(--print-canvas-height, 680px) !important;
    min-height: var(--print-canvas-height, 680px) !important;
    max-height: var(--print-canvas-height, 680px) !important;
    margin: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: var(
      --print-canvas-transform,
      translateX(var(--print-canvas-offset-x, 0px))
        scale(var(--print-canvas-scale, 1))
    ) !important;
    transform-origin: top left !important;
    zoom: 1 !important;
    border: 0 !important;
  }

  body.print-canvas-mode.print-chrome-engine #canvas,
  body.print-canvas-mode.print-safari-engine #canvas {
    transform: var(
      --print-canvas-transform,
      translateX(var(--print-canvas-offset-x, 0px))
        scale(var(--print-canvas-scale, 1))
    ) !important;
    transform-origin: top left !important;
    zoom: 1 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    left: 0 !important;
    right: auto !important;
  }

  body.print-canvas-mode.print-safari-engine .canvas,
  body.print-canvas-mode.print-chrome-engine .canvas {
    margin-left: 0 !important;
    margin-right: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    zoom: 1 !important;
  }

  body.print-canvas-mode.print-chrome-engine #permanentCanvas,
  body.print-canvas-mode.print-chrome-engine #drawingCanvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  body.print-canvas-mode #printLinesOverlayBack,
  body.print-canvas-mode #printLinesOverlayFront {
    display: block !important;
  }

  body.print-canvas-mode #menu,
  body.print-canvas-mode .menu,
  body.print-canvas-mode .menu-fixed,
  body.print-canvas-mode .menu-scroll,
  body.print-canvas-mode #desktopTopActionsHost,
  body.print-canvas-mode .desktop-top-actions {
    display: none !important;
  }

  /* Keep text boxes with intrinsic width in print/PDF.
     Prevent Chrome/WebKit print engine from collapsing width and stacking letters vertically. */
  body.print-canvas-mode #canvas .draggable.textBoxContainer {
    display: inline-block !important;
    width: fit-content !important;
    width: max-content !important;
    min-width: fit-content !important;
    min-width: max-content !important;
    max-width: none !important;
  }

  body.print-canvas-mode #canvas .draggable.textBoxContainer .textContent {
    display: inline-block !important;
    width: fit-content !important;
    width: max-content !important;
    min-width: fit-content !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: pre-wrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* FINAL print tweak: tablas con texto un poco más chico solo en PDF */
@media print {
  .lsv-col-move-wrap,
  .lsv-col-move {
    display: none !important;
    visibility: hidden !important;
  }

  #inputListTable th,
  #outputListTable th,
  .lsv-table th {
    padding-right: 12px !important;
  }

  #inputListTable th,
  #inputListTable td,
  #outputListTable th,
  #outputListTable td,
  .extraTableContainer .lsv-table th,
  .extraTableContainer .lsv-table td,
  .lsv-table th,
  .lsv-table td {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  #inputListTable th,
  #outputListTable th,
  .lsv-table th {
    font-size: 9.5px !important;
  }
}

/* Detalles generales: más aire lateral en editor y en impresión */
#generalDetails,
.rich-editor#generalDetails {
  padding-left: 44px !important;
  padding-right: 44px !important;
}

/* Desktop UX: keep details tools reachable while editing long text */
@media (min-width: 771px) {
  .menu-item[data-no-search="true"] {
    position: relative;
  }

  .menu-item[data-no-search="true"] .details-toolbar {
    position: sticky !important;
    top: 10px;
    z-index: 15;
  }

  #generalDetails,
  .rich-editor#generalDetails {
    max-height: min(56vh, 560px) !important;
    overflow: auto !important;
  }
}

@media print {
  #generalDetailsPrint,
  body.stageplot-mobile-layout #mobileDataContent #generalDetailsPrint {
    padding-left: 26px !important;
    padding-right: 26px !important;
    box-sizing: border-box !important;
  }
}

/* Clear ON/OFF states for Draw/Dimensions tools */
#toggleDraw,
#toggleDimension {
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    transform 0.14s ease !important;
}

#toggleDraw:not(.active):not([aria-pressed="true"]),
#toggleDimension:not(.active):not([aria-pressed="true"]) {
  background: linear-gradient(
    120deg,
    var(--green-btn-1, #8eea2f),
    var(--green-btn-2, #b7ff57)
  ) !important;
  border: 1px solid var(--green-btn-border, rgba(185, 255, 108, 0.78)) !important;
  color: var(--green-btn-text, #13220d) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 10px 22px var(--green-btn-shadow, rgba(123, 198, 40, 0.44)) !important;
}

#toggleDraw.active,
#toggleDraw[aria-pressed="true"] {
  background: linear-gradient(120deg, #22d3ee, #0ea5e9) !important;
  border: 1px solid rgba(103, 232, 249, 0.95) !important;
  color: #062033 !important;
  box-shadow:
    0 0 0 2px rgba(103, 232, 249, 0.35),
    0 12px 24px rgba(14, 165, 233, 0.48) !important;
}

#toggleDimension.active,
#toggleDimension[aria-pressed="true"] {
  background: linear-gradient(120deg, #f97316, #fb923c) !important;
  border: 1px solid rgba(253, 186, 116, 0.95) !important;
  color: #2b1303 !important;
  box-shadow:
    0 0 0 2px rgba(251, 146, 60, 0.35),
    0 12px 24px rgba(249, 115, 22, 0.48) !important;
}

/* FINAL override: language button same style as "Eliminar detalles" */
#langToggleBtn,
#menuControls #langToggleBtn,
body.desktop-top-tools-active .desktop-top-actions .dta-slot #langToggleBtn {
  background: linear-gradient(
    120deg,
    var(--f-accent-2),
    var(--f-accent)
  ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(177, 134, 255, 0.46) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 10px 20px rgba(83, 36, 158, 0.33) !important;
}

#langToggleBtn:hover,
#menuControls #langToggleBtn:hover,
body.desktop-top-tools-active
  .desktop-top-actions
  .dta-slot
  #langToggleBtn:hover {
  box-shadow:
    0 0 0 1px rgba(217, 187, 255, 0.24) inset,
    0 14px 24px rgba(86, 34, 168, 0.42) !important;
}

/* FINAL override: cover/suggest buttons same style as "Eliminar detalles" */
#openCoverBtn,
#suggestChangesBtn,
#menuControls #openCoverBtn,
#menuControls #suggestChangesBtn,
body.desktop-top-tools-active .desktop-top-actions .dta-slot #openCoverBtn,
body.desktop-top-tools-active
  .desktop-top-actions
  .dta-slot
  #suggestChangesBtn {
  background: linear-gradient(
    120deg,
    var(--f-accent-2),
    var(--f-accent)
  ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(177, 134, 255, 0.46) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 10px 20px rgba(83, 36, 158, 0.33) !important;
}

#openCoverBtn:hover,
#suggestChangesBtn:hover,
#menuControls #openCoverBtn:hover,
#menuControls #suggestChangesBtn:hover,
body.desktop-top-tools-active
  .desktop-top-actions
  .dta-slot
  #openCoverBtn:hover,
body.desktop-top-tools-active
  .desktop-top-actions
  .dta-slot
  #suggestChangesBtn:hover {
  box-shadow:
    0 0 0 1px rgba(217, 187, 255, 0.24) inset,
    0 14px 24px rgba(86, 34, 168, 0.42) !important;
}

/* Absolute final: hide Free Draw button on <=770px */
@media (max-width: 770px) {
  #toggleDraw,
  #menuControls #toggleDraw,
  #fileControls #toggleDraw,
  .desktop-top-actions #toggleDraw,
  body.stageplot-mobile-layout #toggleDraw {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Mobile canvas: do not crop content, allow full-stage scrolling */
  body.stageplot-mobile-layout .canvas {
    max-height: none !important;
    height: auto !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  body.stageplot-mobile-layout #canvas {
    max-height: none !important;
    min-height: calc(100dvh - var(--mobile-footer-h, 136px)) !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  body.stageplot-mobile-layout .canvas,
  body.stageplot-mobile-layout #canvas {
    max-height: none !important;
    overflow: auto !important;
  }
}

/* Mobile PDF safety: never crop canvas while printing */
@media print {
  body.stageplot-mobile-layout .canvas,
  body.stageplot-mobile-layout #canvas {
    height: auto !important;
    max-height: none !important;
    min-height: var(--print-canvas-height, 120mm) !important;
    overflow: visible !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.print-canvas-mode.stageplot-mobile-layout .canvas,
  body.print-canvas-mode.stageplot-mobile-layout #canvas {
    height: var(--print-canvas-height, 120mm) !important;
    min-height: var(--print-canvas-height, 120mm) !important;
  }

  body.stageplot-mobile-layout #permanentCanvas,
  body.stageplot-mobile-layout #drawingCanvas,
  body.stageplot-mobile-layout #guidesCanvas {
    display: block !important;
    visibility: visible !important;
  }
}

/* Mobile <=770px: hide instrument search, keep desktop unchanged */
@media (max-width: 770px) {
  #searchContainer,
  #menu #searchContainer,
  body.stageplot-mobile-layout #searchContainer,
  body.stageplot-mobile-layout #menu .menu-fixed #searchContainer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #searchInput,
  #menu #searchInput,
  body.stageplot-mobile-layout #searchInput {
    display: none !important;
  }
}

/* Mobile <=770px: table action buttons in compact multi-row layout */
@media (max-width: 770px) {
  body.stageplot-mobile-layout #mobileDataContent #inputListContainer,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContainer {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: start !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListContainer h2,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer h2,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContainer h2,
  body.stageplot-mobile-layout #mobileDataContent #inputTableContent,
  body.stageplot-mobile-layout #mobileDataContent #outputTableContent,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContent {
    grid-column: 1 / -1 !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable th,
  body.stageplot-mobile-layout #mobileDataContent #inputListTable td,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable th,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable td,
  body.stageplot-mobile-layout #mobileDataContent .lsv-table th,
  body.stageplot-mobile-layout #mobileDataContent .lsv-table td {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListContainer > button,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer > button,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContainer > button,
  body.stageplot-mobile-layout
    #mobileDataContent
    .extraTableContainer
    .lsv-table-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    padding: 8px 6px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 10.5px !important;
    border-radius: 9px !important;
  }

  body.stageplot-mobile-layout #mobileDataContent .lsv-col-edit-toggle {
    display: inline-flex !important;
    background: linear-gradient(
      120deg,
      var(--f-accent-2),
      var(--f-accent)
    ) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(11, 95, 255, 0.28) !important;
  }

  body.stageplot-mobile-layout #mobileDataContent .lsv-col-edit-toggle.active,
  body.stageplot-mobile-layout
    #mobileDataContent
    .lsv-col-edit-toggle[aria-pressed="true"] {
    background: linear-gradient(120deg, #16a34a 0%, #22c55e 100%) !important;
    border: 1px solid rgba(34, 197, 94, 0.58) !important;
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.3) !important;
  }
}

/* Mobile <=770px: details section interaction fixes */
@media (max-width: 770px) {
  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"] {
    position: relative !important;
    pointer-events: auto !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #toggleDetailsBtn {
    position: relative !important;
    inset: auto !important;
    z-index: 3 !important;
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
  }

  body.stageplot-mobile-layout #mobileDataContent .details-toolbar,
  body.stageplot-mobile-layout #mobileDataContent #generalDetails {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #generalDetails {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    max-height: min(44dvh, 360px) !important;
  }

  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"].details-removed
    #toggleDetailsBtn {
    display: flex !important;
  }

  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"].details-removed
    .details-toolbar,
  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"].details-removed
    #generalDetails {
    display: none !important;
  }

  /* Disable press-down scaling inside details card (was feeling like one big button) */
  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"]:active {
    transform: none !important;
  }

  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"]
    #toggleDetailsBtn:active,
  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"]
    .details-toolbar
    button:active,
  body.stageplot-mobile-layout
    #mobileDataContent
    .menu-item[data-no-search="true"]
    #generalDetails:active {
    transform: none !important;
  }
}

/* FINAL print fidelity: keep General Details colors exact (black stays black, custom colors preserved) */
@media print {
  #generalDetailsPrint,
  body.stageplot-mobile-layout #mobileDataContent #generalDetailsPrint {
    color: #000000 !important;
    opacity: 1 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    forced-color-adjust: none !important;
  }

  #generalDetailsPrint *,
  body.stageplot-mobile-layout #mobileDataContent #generalDetailsPrint * {
    opacity: 1 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    forced-color-adjust: none !important;
  }
}

/* Mobile <=770px: match desktop table visual style (dark headers/cards on screen) */
@media (max-width: 770px) {
  body.stageplot-mobile-layout #mobileDataContent #inputListContainer,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContainer {
    background: rgba(11, 21, 33, 0.82) !important;
    border: 1px solid rgba(107, 141, 173, 0.34) !important;
    box-shadow: 0 14px 28px rgba(3, 10, 20, 0.32) !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListContainer h2,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer h2,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContainer h2 {
    color: #dbe9f8 !important;
    border-bottom-color: rgba(122, 156, 186, 0.32) !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table {
    border: 1px solid rgba(116, 146, 175, 0.28) !important;
    background: rgba(11, 21, 33, 0.74) !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable th,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable th,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table th {
    background: linear-gradient(180deg, #152536, #132233) !important;
    color: #c8deef !important;
    border-color: rgba(105, 133, 159, 0.32) !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable td,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable td,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table td {
    background: rgba(13, 23, 35, 0.56) !important;
    color: #d9e8f7 !important;
    border-color: rgba(91, 122, 150, 0.25) !important;
  }

  body.stageplot-mobile-layout
    #mobileDataContent
    #inputListTable
    tbody
    tr:nth-child(even)
    td,
  body.stageplot-mobile-layout
    #mobileDataContent
    #outputListTable
    tbody
    tr:nth-child(even)
    td,
  body.stageplot-mobile-layout
    #mobileDataContent
    table.lsv-table
    tbody
    tr:nth-child(even)
    td {
    background: rgba(17, 29, 43, 0.74) !important;
  }

  body.stageplot-mobile-layout
    #mobileDataContent
    #inputListTable
    tbody
    tr:hover
    td,
  body.stageplot-mobile-layout
    #mobileDataContent
    #outputListTable
    tbody
    tr:hover
    td,
  body.stageplot-mobile-layout
    #mobileDataContent
    table.lsv-table
    tbody
    tr:hover
    td {
    background: rgba(38, 72, 102, 0.52) !important;
  }
}

@media print {
  body.stageplot-mobile-layout #mobileDataContent #inputListTable,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table {
    border: 1px solid #d7dde5 !important;
    background: #ffffff !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable th,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable th,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table th {
    border-color: #d7dde5 !important;
    background: #f7f9fc !important;
    color: #000000 !important;
  }

  body.stageplot-mobile-layout #mobileDataContent #inputListTable td,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable td,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table td {
    border-color: #dfe5ec !important;
    color: #000000 !important;
    background: #ffffff !important;
  }
}

/* Print: table titles must be black (Input/Output/Extra) */
@media print {
  #inputListContainer h2,
  #outputListContainer h2,
  .extraTableContainer h2,
  .titleeditable,
  body.stageplot-mobile-layout #mobileDataContent #inputListContainer h2,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer h2,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContainer h2,
  body.stageplot-mobile-layout #mobileDataContent .titleeditable {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Mobile <=770px: table text must stay black like desktop */
@media (max-width: 770px) {
  body.stageplot-mobile-layout #mobileDataContent #inputListTable th,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable th,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table th,
  body.stageplot-mobile-layout #mobileDataContent #inputListTable td,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable td,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table td,
  body.stageplot-mobile-layout
    #mobileDataContent
    #inputListTable
    td
    [contenteditable="true"],
  body.stageplot-mobile-layout
    #mobileDataContent
    #outputListTable
    td
    [contenteditable="true"],
  body.stageplot-mobile-layout
    #mobileDataContent
    table.lsv-table
    td
    [contenteditable="true"],
  body.stageplot-mobile-layout #mobileDataContent #inputListTable td input,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable td input,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table td input,
  body.stageplot-mobile-layout #mobileDataContent #inputListTable td select,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable td select,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table td select,
  body.stageplot-mobile-layout #mobileDataContent #inputListTable td textarea,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable td textarea,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table td textarea {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }

  /* Keep header row background like desktop */
  body.stageplot-mobile-layout #mobileDataContent #inputListTable th,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable th,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table th {
    background: linear-gradient(180deg, #f7f9fc, #edf1f6) !important;
    border-color: #d7dde5 !important;
  }
}

/* Dropdown de accesos rápidos en Sistema */
#systemShortcutsWrap.system-shortcuts {
  position: relative;
  display: inline-flex;
}

#systemShortcutsWrap .system-shortcuts-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20050;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(14, 20, 30, 0.96);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
}

#systemShortcutsWrap .system-shortcuts-menu[hidden] {
  display: none !important;
}

#systemShortcutsWrap.open .system-shortcuts-menu {
  display: flex !important;
}

#systemShortcutsWrap .system-shortcuts-menu button {
  width: 100%;
  margin: 0;
  text-align: left;
  padding: 8px 10px;
  font-size: 12px;
}

/* Portal robusto para shortcuts (evita recortes de contenedores laterales) */
#systemShortcutsMenu.shortcuts-portal {
  position: fixed !important;
  left: 8px;
  top: 8px;
  right: auto !important;
  z-index: 999999 !important;
  min-width: 180px;
  max-width: min(320px, calc(100vw - 16px));
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(163, 176, 197, 0.38);
  background: linear-gradient(
    180deg,
    rgba(16, 24, 38, 0.97),
    rgba(11, 18, 30, 0.97)
  );
  box-shadow:
    0 20px 36px rgba(2, 8, 23, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Forma libre: handles visibles para redimensionar solo este tipo */
.shapeContainer.freeform-shape {
  border: 1.5px dashed rgba(15, 23, 42, 0.65) !important;
  border-radius: 6px;
}

.shapeContainer.freeform-shape .freeform-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0b5fff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(2, 8, 23, 0.2);
  z-index: 12;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.shapeContainer.freeform-shape.selected .freeform-handle {
  opacity: 1;
  pointer-events: auto;
}

.shapeContainer.freeform-shape .freeform-handle.top-left {
  left: -5px;
  top: -5px;
  cursor: nwse-resize;
}
.shapeContainer.freeform-shape .freeform-handle.top-right {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
}
.shapeContainer.freeform-shape .freeform-handle.bottom-left {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
}
.shapeContainer.freeform-shape .freeform-handle.bottom-right {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}

.shapeContainer.freeform-shape .freeform-handle.top {
  top: -5px;
  left: calc(50% - 5px);
  cursor: ns-resize;
}
.shapeContainer.freeform-shape .freeform-handle.bottom {
  bottom: -5px;
  left: calc(50% - 5px);
  cursor: ns-resize;
}
.shapeContainer.freeform-shape .freeform-handle.left {
  left: -5px;
  top: calc(50% - 5px);
  cursor: ew-resize;
}
.shapeContainer.freeform-shape .freeform-handle.right {
  right: -5px;
  top: calc(50% - 5px);
  cursor: ew-resize;
}

body.desktop-top-tools-active .desktop-top-actions {
  position: relative;
  z-index: 9997;
  overflow: visible !important;
}

/* Startup modals must stay above top shortcuts/menu layer */
#desktopTutorialBackdrop {
  z-index: 50100 !important;
}

#desktopTutorialModal {
  z-index: 50110 !important;
}

#contestBackdrop.contest-backdrop {
  z-index: 30020 !important;
}

#contestModal.contest-modal {
  z-index: 30030 !important;
}

/* Override final (desktop): menú superior compacto.
   Nota: centraliza tamaño final frente a bloques duplicados previos. */
@media (min-width: 770px) {
  body.desktop-top-tools-active .desktop-top-actions .dta-group-title {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-slot {
    gap: 4px !important;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)) !important;
  }

  #menuControls button,
  #fileControls button,
  .desktop-top-actions .dta-slot button,
  #systemShortcutsWrap .system-shortcuts-menu button {
    font-size: 10px !important;
    min-height: 29px !important;
    height: 29px !important;
    line-height: 1 !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
  }
}

/* Modo de color para imágenes de instrumentos en canvas (Safari/Chrome robusto) */
body.image-render-mode-color #canvas .draggable img.render-mode-target {
  filter: none !important;
  -webkit-filter: none !important;
}

body.image-render-mode-grayscale #canvas .draggable img.render-mode-target {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
}

body.image-render-mode-black #canvas .draggable img.render-mode-target {
  filter: brightness(0) saturate(100%) !important;
  -webkit-filter: brightness(0) saturate(100%) !important;
}

/* FINAL LAYOUT OVERRIDE:
   mover herramientas de escritorio a barra lateral derecha, angosta */
@media (min-width: 770px) {
  body.desktop-top-tools-active .container {
    --left-panel-w: 183px;
    --right-panel-w: 152px;
    display: grid !important;
    grid-template-columns: var(--left-panel-w) minmax(0, 1fr) var(
        --right-panel-w
      ) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }

  body.desktop-top-tools-active #menu {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: var(--left-panel-w) !important;
    flex: 0 0 var(--left-panel-w) !important;
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
  }

  body.desktop-top-tools-active #canvas {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: center !important;
    /* Compensa diferencia de anchos laterales para centrar en pantalla real */
    transform: translateX(
      calc((var(--right-panel-w) - var(--left-panel-w)) / 2)
    ) !important;
  }

  body.desktop-top-tools-active .desktop-top-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: block !important;
    padding: 6px 4px !important;
    margin: 0 !important;
    background: var(--f-panel-2) !important;
    border: 1px solid var(--f-stroke) !important;
    border-radius: 18px !important;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03) inset,
      var(--f-shadow) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50000 !important;
    isolation: isolate !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-shell {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-group {
    padding: 6px !important;
    border-radius: 11px !important;
    min-width: 0 !important;
    background: rgba(29, 27, 25, 0.58) !important;
    border: 1px solid rgba(170, 157, 139, 0.18) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24) !important;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-group-title {
    color: #f0e7dc !important;
    font-size: 9px !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: 0.06em !important;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-slot {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  body.desktop-top-tools-active .desktop-top-actions .dta-slot button,
  body.desktop-top-tools-active
    .desktop-top-actions
    .dta-slot
    #systemShortcutsWrap
    > button {
    width: 100% !important;
    min-width: 0 !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.desktop-top-tools-active #systemShortcutsWrap .system-shortcuts-menu {
    position: fixed !important;
    left: 8px !important;
    top: 8px !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 65000 !important;
    min-width: 180px !important;
    display: none !important;
  }

  body #systemShortcutsMenu.shortcuts-portal {
    z-index: 999999 !important;
    display: none;
  }

  body.desktop-top-tools-active #systemShortcutsWrap.system-shortcuts {
    position: relative !important;
    z-index: 64000 !important;
  }
}

#systemShortcutsMenu.shortcuts-portal button {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  color: #e5eefb;
  border-radius: 9px;
  border: 1px solid rgba(132, 158, 186, 0.26);
  background: linear-gradient(
    180deg,
    rgba(46, 66, 91, 0.92),
    rgba(34, 52, 75, 0.92)
  );
  box-shadow: 0 4px 10px rgba(7, 14, 25, 0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}

#systemShortcutsMenu.shortcuts-portal button:hover {
  transform: translateY(-1px);
  border-color: rgba(169, 192, 219, 0.55);
  background: linear-gradient(
    180deg,
    rgba(56, 80, 109, 0.94),
    rgba(41, 63, 89, 0.94)
  );
  box-shadow: 0 8px 14px rgba(7, 14, 25, 0.34);
}

#systemShortcutsMenu.shortcuts-portal button:active {
  transform: translateY(0);
  box-shadow: 0 3px 7px rgba(7, 14, 25, 0.22);
}

#systemShortcutsMenu.shortcuts-portal button:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.88);
  outline-offset: 1px;
}

/* Desktop (770-1399): sidebars hidden by default, toggled with side buttons */
.desktop-sidebar-toggle {
  display: none;
}

@media (min-width: 770px) and (max-width: 1399px) {
  body.desktop-top-tools-active .desktop-sidebar-toggle {
    position: fixed;
    top: 10px;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 154px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(
      180deg,
      rgba(34, 51, 72, 0.6),
      rgba(18, 30, 45, 0.6)
    );
    color: #ffffff;
    opacity: 0.7;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    z-index: 50060;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06) inset,
      0 8px 18px rgba(5, 10, 18, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease,
      background 0.15s ease,
      border-color 0.15s ease;
  }

  body.desktop-top-tools-active .desktop-sidebar-toggle:hover {
    transform: translateY(-1px);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 12px 22px rgba(5, 10, 18, 0.4);
  }

  body.desktop-top-tools-active .desktop-sidebar-toggle.is-open {
    background: linear-gradient(
      180deg,
      rgba(115, 53, 195, 0.6),
      rgba(88, 41, 150, 0.6)
    );
    border-color: rgba(201, 164, 255, 0.75);
  }

  body.desktop-top-tools-active #leftDesktopSidebarToggle {
    left: 12px;
  }

  body.desktop-top-tools-active #rightDesktopSidebarToggle {
    right: 12px;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible #canvas {
    transform: none !important;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible .container {
    grid-template-columns: 0 minmax(0, 1fr) 0 !important;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible #menu {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: var(--left-panel-w) !important;
    min-width: var(--left-panel-w) !important;
    max-width: var(--left-panel-w) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    transform: translateX(-110%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 50020 !important;
    transition:
      transform 0.2s ease,
      opacity 0.2s ease !important;
  }

  /* Reserva superior para que el toggle no tape acciones del panel */
  body.desktop-top-tools-active.desktop-sidebars-collapsible #menu .menu-fixed {
    margin-top: var(--desktop-sidebars-toggle-reserved-top, 42px) !important;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible:not(
      .left-sidebar-collapsed
    )
    #menu {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible:not(
      .left-sidebar-collapsed
    )
    #leftDesktopSidebarToggle {
    z-index: 50040 !important;
  }

  /* Orden de capas solicitado:
     1) menú categorías (abajo)
     2) botón abrir instrumentos (medio)
     3) menú/modal de instrumentos (arriba) */
  body.desktop-top-tools-active.desktop-sidebars-collapsible
    #categoryModalBackdrop {
    z-index: 50070 !important;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible #categoryModal {
    z-index: 50080 !important;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible #menu .category,
  body.desktop-top-tools-active.desktop-sidebars-collapsible
    #menu
    .category-items,
  body.desktop-top-tools-active.desktop-sidebars-collapsible #menu .menu-item {
    position: relative;
    z-index: 2;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible #menu .category {
    overflow: visible !important;
    z-index: 4;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible
    #menu
    .category-header {
    position: relative;
    z-index: 5;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible
    #menu
    .category.open {
    z-index: 80 !important;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible
    #menu
    .category.open
    .category-items,
  body.desktop-top-tools-active.desktop-sidebars-collapsible
    #menu
    .category-items.force-open {
    position: relative !important;
    z-index: 90 !important;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible
    .desktop-top-actions {
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    width: var(--right-panel-w) !important;
    min-width: var(--right-panel-w) !important;
    max-width: var(--right-panel-w) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    transform: translateX(110%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 50020 !important;
    transition:
      transform 0.2s ease,
      opacity 0.2s ease !important;
    padding-top: var(--desktop-sidebars-toggle-reserved-top, 42px) !important;
  }

  body.desktop-top-tools-active.desktop-sidebars-collapsible:not(
      .right-sidebar-collapsed
    )
    .desktop-top-actions {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Canvas mini-controls (rotar/escalar/color/texto): desktop un poco más chicos */
body:not(.stageplot-mobile-layout) #canvas .shape-mini-controls,
body:not(.stageplot-mobile-layout) #canvas .textBoxContainer .mini-controls {
  padding: 4px !important;
  gap: 4px !important;
  border-radius: 5px !important;
}

body:not(.stageplot-mobile-layout) #canvas .shape-mini-controls button,
body:not(.stageplot-mobile-layout)
  #canvas
  .textBoxContainer
  .mini-controls
  button {
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 2px 4px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  border-radius: 4px !important;
}

body:not(.stageplot-mobile-layout)
  #canvas
  .shape-mini-controls
  .color-swatch-btn,
body:not(.stageplot-mobile-layout)
  #canvas
  .textBoxContainer
  .mini-controls
  .color-swatch-btn,
body:not(.stageplot-mobile-layout)
  #canvas
  .shape-mini-controls
  input[type="color"],
body:not(.stageplot-mobile-layout)
  #canvas
  .textBoxContainer
  .mini-controls
  input[type="color"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 4px !important;
}

/* Toolbar contextual de imagen/forma (rotar/escalar/espejar): más compacto */
body:not(.stageplot-mobile-layout) #canvas .context-toolbar {
  padding: 1px 3px !important;
  gap: 2px !important;
  border-radius: 4px !important;
}

body:not(.stageplot-mobile-layout) #canvas .context-toolbar button {
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 2px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  border-radius: 3px !important;
}

/* FINAL OVERRIDE: toolbar contextual del canvas (imagen/forma) */
@media (min-width: 769px) {
  body #contextToolbar.context-toolbar {
    padding: 3px 5px !important;
    gap: 4px !important;
    border-radius: 4px !important;
    min-height: auto !important;
  }

  body #contextToolbar.context-toolbar button {
    min-width: 20px !important;
    min-height: 20px !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
  }
}

/* FINAL: mantener canvas de 1000px y habilitar scroll horizontal en pantallas <1000px */
@media screen and (max-width: 999px) {
  html,
  body {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  .container,
  body.stageplot-mobile-layout .container,
  body:not(.stageplot-mobile-layout) .container {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    padding: 14px !important;
    box-sizing: border-box !important;
  }

  .canvas,
  body.stageplot-mobile-layout .canvas,
  body:not(.stageplot-mobile-layout) .canvas {
    width: 1000px !important;
    min-width: 1000px !important;
    max-width: 1000px !important;
    height: 680px !important;
    min-height: 680px !important;
    max-height: 680px !important;
    flex: 0 0 1000px !important;
    overflow: visible !important;
    margin: 0 !important;
    border: 1px solid #d0d7e2 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
  }

  #canvas,
  body.stageplot-mobile-layout #canvas,
  body:not(.stageplot-mobile-layout) #canvas {
    width: 1000px !important;
    min-width: 1000px !important;
    max-width: 1000px !important;
    height: 680px !important;
    min-height: 680px !important;
    max-height: 680px !important;
  }
}

/* Footer más compacto en pantallas <= 770px */
@media screen and (max-width: 770px) {
  body.stageplot-mobile-layout {
    --mobile-footer-h: 120px !important;
    padding-bottom: var(--mobile-footer-h) !important;
  }

  body.stageplot-mobile-layout #stagePlotFooter,
  body.stageplot-mobile-layout #stagePlotFooter.no-print {
    min-height: var(--mobile-footer-h) !important;
    height: var(--mobile-footer-h) !important;
    padding: 4px 10px 6px !important;
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-inner,
  body.stageplot-mobile-layout #stagePlotFooter.no-print .footer-inner {
    gap: 4px !important;
    justify-content: flex-end !important;
    padding-top: 8px !important;
    padding-bottom: 14px !important;
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-logo,
  body.stageplot-mobile-layout #stagePlotFooter.no-print .footer-logo {
    height: 18px !important;
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-copy,
  body.stageplot-mobile-layout #stagePlotFooter.no-print .footer-copy {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-social a,
  body.stageplot-mobile-layout #stagePlotFooter.no-print .footer-social a {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  body.stageplot-mobile-layout #stagePlotFooter .footer-social a svg,
  body.stageplot-mobile-layout #stagePlotFooter.no-print .footer-social a svg {
    width: 12px !important;
    height: 12px !important;
  }

  body.stageplot-mobile-layout #mobileQuickActions {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 16px), 520px) !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
}

/* FINAL LOCK: PDF canvas centered and visible in Chrome + Safari */
@media print {
  body.print-canvas-mode {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body.print-canvas-mode .container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.print-canvas-mode #canvas.canvas {
    position: relative !important;
    width: var(--print-canvas-width, 1000px) !important;
    min-width: var(--print-canvas-width, 1000px) !important;
    max-width: var(--print-canvas-width, 1000px) !important;
    height: var(--print-canvas-height, 680px) !important;
    min-height: var(--print-canvas-height, 680px) !important;
    max-height: var(--print-canvas-height, 680px) !important;
    margin: 0 !important;
    left: 0 !important;
    right: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
    transform: var(
      --print-canvas-transform,
      translateX(var(--print-canvas-offset-x, 0px))
        scale(var(--print-canvas-scale, 1))
    ) !important;
    transform-origin: top left !important;
    zoom: 1 !important;
    border: 0 !important;
  }

  body.print-canvas-mode #permanentCanvas,
  body.print-canvas-mode #drawingCanvas,
  body.print-canvas-mode #guidesCanvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* Chrome-only: centra el canvas en impresión sin afectar Safari */
  body.print-canvas-mode.print-chrome-engine .container {
    display: grid !important;
    place-items: start center !important;
  }

  body.print-canvas-mode.print-chrome-engine #canvas,
  body.print-canvas-mode.print-chrome-engine #canvas.canvas {
    left: auto !important;
    right: auto !important;
    margin: 0 auto !important;
    transform: scale(var(--print-canvas-scale, 1)) !important;
    transform-origin: top center !important;
  }
}

/* FINAL FIX (mobile real devices): tutorial modal siempre por encima y clickeable */
#mobileTutorialBackdrop {
  z-index: 1000990 !important;
}

#mobileTutorialBackdrop.open {
  pointer-events: auto !important;
}

#mobileTutorialModal {
  z-index: 1001000 !important;
  pointer-events: auto !important;
  isolation: isolate;
}

#mobileTutorialModal.open {
  display: block !important;
}

#mobileTutorialModal .modal-close,
#mobileTutorialModal .modal-cta {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}

#mobileTutorialBackdrop {
  touch-action: none !important;
}

/* FINAL FIX (mobile hit-testing): hidden sheets/menus must not capture taps */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  body.stageplot-mobile-layout #menu,
  body.stageplot-mobile-layout #mobileDataSheet {
    pointer-events: none !important;
  }

  body.stageplot-mobile-layout #menu.open,
  body.stageplot-mobile-layout #mobileDataSheet.open {
    pointer-events: auto !important;
  }

  body.stageplot-mobile-layout #menuBackdrop,
  body.stageplot-mobile-layout #mobileDataBackdrop {
    pointer-events: none !important;
    display: none !important; /* ocultamos overlay para que no tape el menú móvil */
    background: transparent !important;
  }

  body.stageplot-mobile-layout #menuBackdrop.open,
  body.stageplot-mobile-layout #mobileDataBackdrop.open {
    pointer-events: none !important; /* mantenemos sin captura aunque esté "open" */
    display: none !important;
  }
}

#categoryModal {
  pointer-events: none !important;
}

#categoryModal.open {
  pointer-events: auto !important;
}

/* Tablet narrow range (770-900): keep mobile quick actions centered over canvas */
@media (min-width: 770px) and (max-width: 900px) and (hover: none) and (pointer: coarse) {
  body.stageplot-mobile-layout #mobileQuickActions {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(
      env(safe-area-inset-bottom, 0px) + var(--mobile-footer-h) - 74px
    ) !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 56px), 520px) !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
  }
}

/* FINAL PRINT OVERRIDE (mobile): hide all table action buttons in exported PDF */
@media print {
  body.stageplot-mobile-layout #mobileDataContent #inputListContainer button,
  body.stageplot-mobile-layout #mobileDataContent #outputListContainer button,
  body.stageplot-mobile-layout #mobileDataContent .extraTableContainer button,
  body.stageplot-mobile-layout #mobileDataContent #inputListTable button,
  body.stageplot-mobile-layout #mobileDataContent #outputListTable button,
  body.stageplot-mobile-layout #mobileDataContent table.lsv-table button {
    display: none !important;
  }
}

/* FINAL PRINT FLOW: each section/table starts on its own page */
@media print {
  #addExtraTableBtn {
    display: none !important;
  }

  #printSectionOrderHost > .container,
  #printSectionOrderHost > .menu-item[data-no-search="true"],
  #printSectionOrderHost > #inputListContainer,
  #printSectionOrderHost > #outputListContainer,
  #printSectionOrderHost > #extraTablesContainer {
    break-before: page !important;
    page-break-before: always !important;
    break-after: auto !important;
    page-break-after: auto !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
  }

  #printSectionOrderHost > .container {
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
  }

  #printSectionOrderHost > .menu-item[data-no-search="true"] {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  #printSectionOrderHost
    > .menu-item[data-no-search="true"]
    #generalDetailsPrint {
    break-before: auto !important;
    page-break-before: auto !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  #printSectionOrderHost > #inputListContainer,
  #printSectionOrderHost > #outputListContainer,
  #printSectionOrderHost > #extraTablesContainer > .extraTableContainer {
    break-before: page !important;
    page-break-before: always !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
  }

  #printSectionOrderHost
    > #extraTablesContainer
    > .extraTableContainer:first-child {
    break-before: auto !important;
    page-break-before: auto !important;
  }
}