:root {
    --bg-color: #f8f9fa;
    /* Texto oscuro propio de las pantallas todavía sin reskinear (workspace
       de rectificación) — distinto de --text-color (blanco), que define
       raumlab-chrome.css para el header/nav/footer y las pantallas ya
       migradas. Nombre separado a propósito: son dos paletas conviviendo
       durante la migración progresiva del módulo, no el mismo token. */
    --legacy-text-color: #18181b;
    --accent-color: #18181b;
    --border-color: #d4d4d8;
    --gray-900: #18181b;
    --gray-700: #3f3f46;
    --gray-500: #71717a;
    --gray-300: #d4d4d8;
    --gray-100: #f4f4f5;
    /* 300px: mismo ancho de columna izquierda que in_SITE/espacio_INM —
       la derecha se deja más ancha (--ancho-sidebar) porque acá sí hay
       harto contenido (tabla de puntos, GSD, etc.) que lo justifica. */
    --ancho-rail: 300px;
    --ancho-sidebar: 380px;
    /* Máximo del cuadro de diálogo — no un bloque fijo de este alto, se
       achica al contenido (ver #panel-dialogo). Alcanza para ~3-4 líneas
       de mensaje; si hace falta más (ej. preguntarOpciones con varios
       botones), scrollea en vez de crecer. */
    --alto-dialogo: 90px;
    /* Distancia entre el borde inferior de #app-main y el borde inferior
       del cuadro de diálogo — el final de las columnas del workspace
       (.workspace-layout) se alinea a esta misma altura. */
    --workspace-bottom-reserve: 84px;
}

/* Sin font-family acá a propósito (había un reset a fuente de sistema,
   leftover de antes del reskin a Geist): un elemento que no fija su propia
   tipografía tiene que HEREDAR la de su padre — .rc-body ya pone Geist a
   nivel body en raumlab-chrome.css. Un reset por selector universal le
   gana a esa herencia (una regla explícita, aunque sea "*", siempre le
   gana a heredar), y eso es justo lo que rompía "RAUMLAB" en el header:
   los spans .logo-raum/.logo-lab no fijan tipografía propia (solo peso),
   dependen de heredarla — quedaban en la fuente del sistema en vez de
   Geist. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

.screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.app-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
}

.app-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
}

.app-header h1 span {
    font-weight: 300;
    color: #757575;
}

.drop-zone-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: var(--text-color);
}

.inicio-acciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.drop-box {
    width: 100%;
    max-width: 600px;
    height: 350px;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.drop-box:hover {
    border-color: var(--accent-color);
    background: #f4f4f5;
}

.drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: #71717a;
}

/* Único botón con relleno de la pantalla (acción principal) — mismo
   criterio que in_SITE (.viewer-btn-main): 50% de opacidad, nunca un
   bloque blanco sólido contra el fondo oscuro. */
.btn-primary {
    background: rgba(242, 239, 233, 0.5);
    color: var(--bg-navy);
    border: none;
    padding: 10px 22px;
    border-radius: 4px;
    font-family: var(--font-geist);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background: var(--text-color);
    font-weight: 600;
}

/* Botón "fantasma" (acción secundaria) — borde fino, sin relleno. */
.btn-text {
    background: none;
    border: 1px solid var(--border-fine);
    color: var(--text-color);
    padding: 10px 22px;
    border-radius: 4px;
    font-family: var(--font-geist);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    text-align: center;
    margin-top: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-text:hover {
    border-color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.07);
}

/* Mismo criterio que .controles-icon-btn.activo — "Insertar" (Comentarios)
   usa btn-text, no controles-icon-btn (ya no lleva ícono), pero necesita el
   mismo estado visual de "herramienta prendida". */
.btn-text.activo {
    border-color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.07);
}

.btn-text:disabled,
.btn-text[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
}

/* Estilos para el Espacio de Trabajo con Paneles — sin fondo propio: deja
   ver el fondo con grano de la página (.rc-bg-layer) atrás, igual que
   in_SITE. Ninguna de las tres columnas (rail-izquierdo/canvas/rail-derecho)
   lleva background-color ni bordes de separación — solo el espacio entre
   ellas y el contenido (botones, miniaturas) marcan la composición. */
.workspace-layout {
    flex: 1;
    display: flex;
    gap: 32px;
    /* padding izquierdo/derecho 48px: mismo margen que in_SITE y
       espacio_INM (ver module-shell.css / .tool-main), para que el
       contenido arranque a la misma distancia del borde en los tres
       módulos. El padding-bottom deja el final de las columnas (la
       imagen incluida) a la misma altura que el cuadro de diálogo — ver
       #panel-dialogo y .workspace-cerrar-proyecto, que comparten esa
       referencia. */
    padding: 24px 48px var(--workspace-bottom-reserve);
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* Pantalla de introducción — mismo criterio que in_SITE y espacio_INM:
   texto de presentación del módulo (.rc-intro-lede/.rc-intro-detail,
   compartidas en raumlab-chrome.css), antes de elegir Fotoplano/Fotomosaico.
   A diferencia del workspace, sí tiene sentido en celular (es solo texto,
   no requiere pantalla de escritorio), así que no se oculta en el media
   query de abajo. Margen izquierdo 35px — estándar acordado para esta
   pantalla en los tres módulos, distinto del padding 48px del workspace. */
.mode-intro-content {
    padding: 24px 48px 24px 35px;
}

/* Pantalla de Tutoriales — mismo patrón que espacio_INM: rail fijo con la
   lista de modos (.instr-nav, ancho --ancho-rail para alinear con el resto
   del módulo) + panel de contenido central que scrollea si el texto de un
   modo puntual no entra (.instr-panel). Vive directo dentro de .screen
   (flex column, height:100%), así que "flex:1" alcanza para heredar el
   alto fijo que ya resuelve #app-main — no hace falta repetir el cálculo
   de calc(100vh - header - footer) acá. */
.instr-layout {
    flex: 1;
    display: flex;
    gap: 56px;
    padding: 24px 48px;
    min-height: 0;
}

.instr-nav {
    width: var(--ancho-rail);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.instr-nav-item {
    display: block;
    width: 100%;
    text-align: left;
    font-family: var(--font-geist);
    font-size: 0.82rem;
    font-weight: 300;
    color: var(--text-color);
    background: none;
    border: none;
    border-left: 2px solid transparent;
    padding: 10px 0 10px 14px;
    cursor: pointer;
    transition: font-weight 0.2s ease, border-color 0.2s ease;
}
.instr-nav-item:hover { font-weight: 500; }
.instr-nav-item.active {
    border-left-color: var(--text-color);
    font-weight: 500;
}

.instr-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-fine) transparent;
    padding-right: 12px;
}
.instr-panel::-webkit-scrollbar { width: 3px; }
.instr-panel::-webkit-scrollbar-track { background: transparent; }
.instr-panel::-webkit-scrollbar-thumb { background: var(--border-fine); }
.instr-panel::-webkit-scrollbar-thumb:hover { background: var(--text-color); }

.instr-body { display: none; max-width: 640px; }
.instr-body.active { display: block; }

.instr-body h2 {
    font-family: var(--font-geist);
    font-size: 0.95rem;
    font-weight: 300;
    letter-spacing: 0.03em;
    color: var(--text-color);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-fine);
}

.instr-body h3 {
    font-family: var(--font-geist);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-color);
    margin: 24px 0 10px;
}

.instr-body p {
    font-family: var(--font-geist);
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-color);
    margin: 0 0 12px;
}

.instr-body strong {
    font-weight: 500;
}

.instr-body ol {
    padding-left: 20px;
}

.instr-body li {
    font-family: var(--font-geist);
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 10px;
}

/* Aviso de reemplazo en celular — ver app-shell.css: Fotoplano/Fotomosaico
   son una pantalla de escritorio únicamente (marcar puntos sobre una
   imagen no tiene un equivalente razonable angosto), así que en vez de
   achicar el workspace se reemplaza por este texto. */
.workspace-mobile-notice {
    display: none;
}

.canvas-area {
    flex: 1;
    display: flex;
    position: relative;
    /* min-height/min-width:0: sin esto, un hijo más grande que el
       contenedor (la imagen con zoom aplicado) infla el propio .canvas-area
       más allá del espacio que la fila de 3 columnas le tiene asignado —
       es lo que hacía que "el recuadro de la imagen" pareciera achicarse
       (el layout entero se reacomodaba) y que la grilla/los dibujos del
       resultado quedaran desalineados. */
    min-height: 0;
    min-width: 0;
    /* auto en vez de hidden: con zoom activo la imagen es más grande que el
       contenedor y hace falta poder desplazarla para verla completa — ver
       aplicarEscala() en app.js. Sin zoom (tamaño "encajado") no hay
       overflow real, así que no cambia nada visualmente en el caso normal. */
    overflow: auto;
    scrollbar-width: none;
}
.canvas-area::-webkit-scrollbar {
    display: none;
}

/* #image-wrapper se centra con margin:auto (no justify-content/align-items
   en el contenedor) a propósito: con overflow:auto, centrar por
   justify-content dejaba la mitad del contenido que se sale fuera de
   alcance del scroll — eso es lo que causaba que el zoom siempre pareciera
   "irse" hacia abajo a la derecha en vez de centrarse en el cursor. */
#image-wrapper {
    margin: auto;
}

/* Pestañas "Imagen Original / Fotoplano" — en su propia fila arriba del
   lienzo (ya no flotan encima de la imagen), mismo criterio liviano que
   Analítico/Geométrico: texto + subrayado en la activa, sin fondo/caja. */
.view-mode-tabs {
    display: none;
    flex-shrink: 0;
    gap: 24px;
    padding: 0 4px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--surface-border);
}
.view-mode-tabs button {
    background: none;
    border: none;
    padding: 2px 0;
    color: var(--text-color);
    font-family: var(--font-geist);
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    opacity: 0.55;
}
.view-mode-tabs button.active {
    opacity: 1;
    border-bottom-color: var(--text-color);
    font-weight: 400;
}

.sidebar-panel {
    width: var(--ancho-sidebar);
    background: transparent;
    display: flex;
    flex-direction: column;
}

.method-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: #f4f4f5;
}

.tab-btn {
    flex: 1;
    padding: 1rem;
    border: none;
    background: none;
    font-weight: 500;
    cursor: pointer;
    color: #71717a;
    transition: all 0.2s;
}

.tab-btn.active {
    background: #ffffff;
    color: var(--legacy-text-color);
    border-bottom: 2px solid var(--accent-color);
}

.panel-content {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
}

/* Barra de desplazamiento fina — mismo criterio que in_SITE
   (module-shell.css: #sidebar-right/.cedula-panel) en todo lugar donde
   pueda aparecer una barra nativa dentro del módulo. */
.panel-content,
#panel-dialogo,
.controles-table tbody,
.capa-selector-lista {
    scrollbar-width: thin;
    scrollbar-color: var(--border-fine) transparent;
}
.panel-content::-webkit-scrollbar,
#panel-dialogo::-webkit-scrollbar,
.controles-table tbody::-webkit-scrollbar,
.capa-selector-lista::-webkit-scrollbar {
    width: 3px;
}
.panel-content::-webkit-scrollbar-track,
#panel-dialogo::-webkit-scrollbar-track,
.controles-table tbody::-webkit-scrollbar-track,
.capa-selector-lista::-webkit-scrollbar-track {
    background: transparent;
}
.panel-content::-webkit-scrollbar-thumb,
#panel-dialogo::-webkit-scrollbar-thumb,
.controles-table tbody::-webkit-scrollbar-thumb,
.capa-selector-lista::-webkit-scrollbar-thumb {
    background: var(--border-fine);
}
.panel-content::-webkit-scrollbar-thumb:hover,
#panel-dialogo::-webkit-scrollbar-thumb:hover,
.controles-table tbody::-webkit-scrollbar-thumb:hover,
.capa-selector-lista::-webkit-scrollbar-thumb:hover {
    background: var(--text-color);
}

.method-section {
    display: none;
}

.method-section.active {
    display: block;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: #575757;
}

.form-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* Panel de diálogo persistente (reemplaza alert()/confirm()) — mismo ancho
   que la columna izquierda (miniaturas/zoom). Alto según el contenido, no
   fijo: --alto-dialogo pasa a ser el máximo (~3-4 líneas), no un bloque
   vacío de ese tamaño para un mensaje de una línea. Rectángulo recto (sin
   redondear, sin borde), bien transparente y texto blanco pleno. Oculto
   hasta entrar a un modo — la columna de la izquierda le reserva el mismo
   alto con padding-bottom, así nunca queda superpuesto con el zoom o el
   selector/"+". "Cerrar Proyecto" (.workspace-cerrar-proyecto) va arriba
   de este cuadro — ver esa regla para la altura que le reserva. */
#panel-dialogo {
    display: none;
    position: fixed;
    left: 48px;
    bottom: calc(var(--footer-h) + var(--workspace-bottom-reserve));
    width: var(--ancho-rail);
    max-height: var(--alto-dialogo);
    /* Vidrio esmerilado gris (antes un beige cálido) — mismo criterio que
       el resto de las ventanas emergentes del sitio. rgba(20,20,20) =
       --bg-navy (#141414). */
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--text-color);
    border: none;
    border-radius: 0;
    font-family: var(--font-geist);
    font-size: 0.75rem;
    overflow-y: auto;
    z-index: 1000;
}

#panel-dialogo.visible {
    display: block;
}

#panel-dialogo .dialogo-mensaje {
    padding: 0.6rem 0.7rem;
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    line-height: 1.4;
}

#panel-dialogo .dialogo-icono {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--text-color);
}

#panel-dialogo .dialogo-opciones {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0 0.7rem 0.7rem;
}

#panel-dialogo .dialogo-opciones button {
    background: none;
    color: var(--text-color);
    border: 1px solid var(--border-fine);
    border-radius: 0;
    padding: 0.35rem 0.6rem;
    font-family: var(--font-geist);
    font-size: 0.7rem;
    font-weight: 300;
    cursor: pointer;
    text-align: left;
}

#panel-dialogo .dialogo-opciones button:hover {
    border-color: var(--text-color);
    background: rgba(255, 255, 255, 0.07);
}

/* Columna izquierda completa: general/carga — apila el selector Crear/
   Proyecto arriba y las miniaturas + zoom debajo. Sin fondo ni borde propio
   (ver nota de .workspace-layout) — flota directo sobre el fondo con grano. */
.rail-izquierdo {
    width: var(--ancho-rail);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
}

/* Columna derecha completa: controles de la estación de rectificación
   (Analítico/Geométrico → Área → GSD, y Medir/Dibujar sobre el resultado).
   Sin fondo ni borde propio, igual criterio que la izquierda. */
.rail-derecho {
    width: var(--ancho-sidebar);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: var(--text-color);
}

/* Miniaturas de proyecto (Fotomosaico multi-imagen, y Fotoplano con una
   sola). Sin fondo/borde propio: solo el espacio y las tarjetas de cada
   miniatura marcan la columna. */
.miniaturas-rail {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* .workspace-layout ya reserva --workspace-bottom-reserve al pie de
       toda la fila; esto suma la altura del cuadro de diálogo (fixed,
       mismo ancho) para que tampoco tape el zoom ni el selector/"+". */
    padding-bottom: var(--alto-dialogo);
    overflow: hidden;
}

/* Solo esta lista scrollea — el resto de la columna (botones, zoom) se
   mantiene siempre visible sin que las miniaturas los empujen afuera. */
.miniaturas-lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.miniatura-item {
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #ffffff;
    text-align: center;
    flex-shrink: 0;
}

.miniatura-item.activa {
    border-color: #e4e4e7;
}

.miniatura-item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.miniatura-item .miniatura-estado {
    font-size: 0.7rem;
    padding: 0.25rem;
    color: #3f3f46;
    background: #f4f4f5;
}

/* "Cerrar Proyecto": fijo, arriba del cuadro de diálogo (que a su vez
   arranca en --workspace-bottom-reserve y puede crecer hasta
   --alto-dialogo) — nunca entre el cuadro y "Volver al Inicio". Mismo
   botón fantasma de borde fino que el resto del módulo (.btn-text) — no
   un enlace de texto suelto — del mismo ancho que las demás acciones de
   la columna. */
.workspace-cerrar-proyecto {
    position: fixed;
    left: 48px;
    bottom: calc(var(--footer-h) + var(--workspace-bottom-reserve) + var(--alto-dialogo) + 14px);
    width: var(--ancho-rail);
    z-index: 260;
    text-align: center;
}

/* Botón "+" de agregar imagen al riel de miniaturas — borde fino, mismo
   criterio que los botones fantasma del panel derecho (no un cuadrado
   gris sólido como antes). */
.miniatura-add-btn {
    width: 100%;
    padding: 10px;
    background: none;
    border: 1px solid var(--border-fine);
    color: var(--text-color);
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.miniatura-add-btn:hover {
    border-color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.07);
}

/* ==========================================================================
   PESTAÑAS OSCURAS (Crear/Proyecto en la izquierda, Analítico/Geométrico en
   la derecha) — mismo criterio que Disposición/Atributos en el editor de
   in_SITE: Geist fino para las etiquetas, subrayado en la pestaña activa,
   botones de borde fino (nunca cuadros sólidos), sin fondo propio. Selector
   con ancestro (.panel-crear-proyecto/.rail-derecho) para no afectar
   .method-tabs/.tab-btn en páginas que todavía no se reskinearon.
   ========================================================================== */
.panel-crear-proyecto .method-tabs,
.rail-derecho .method-tabs {
    background: none;
    padding: 0 4px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--surface-border);
}

/* Mismo padding/tamaño que .view-mode-tabs (columna central): las tres
   filas de pestañas (Crear/Proyecto, Imagen Original/Fotoplano,
   Analítico/Geométrico) arrancan a la misma altura — antes esta seguía
   con el padding:1rem viejo, mucho más alto que el de la columna central. */
/* El padding:1.5rem genérico de .panel-content (regla vieja, sin
   reskinear, más arriba) angostaba los botones de acá adentro (Cargar
   Imagen/Cargar Proyecto) respecto a #area-descarga y .miniaturas-rail,
   que son hermanos sueltos de .panel-crear-proyecto sin ese padding — se
   veían dos anchos distintos en la misma columna. Sacarlo así los tres
   quedan al mismo ancho, coherente con el criterio "sin cajas" del resto
   del reskin. */
.panel-crear-proyecto .panel-content {
    padding: 0;
}

.panel-crear-proyecto .tab-btn,
.rail-derecho .tab-btn {
    padding: 2px 0;
    font-family: var(--font-geist);
    font-weight: 300;
    font-size: 0.8rem;
    color: var(--text-color);
    opacity: 0.55;
}

.panel-crear-proyecto .tab-btn.active,
.rail-derecho .tab-btn.active {
    background: none;
    color: var(--text-color);
    opacity: 1;
    border-bottom: 2px solid var(--text-color);
}

.panel-crear-proyecto .panel-content,
.rail-derecho .panel-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.panel-crear-proyecto .method-section,
.rail-derecho .method-section {
    display: none;
}
.panel-crear-proyecto .method-section.active,
.rail-derecho .method-section.active {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.panel-crear-proyecto {
    display: flex;
    flex-direction: column;
    color: var(--text-color);
}

.btn-full {
    width: 100%;
}

/* ==========================================================================
   CONTROLES (Analítico/Geométrico → Área → GSD) — columna derecha. Mismo
   vocabulario visual que el resto del módulo: Geist, texto blanco pleno
   (la jerarquía se marca con peso, nunca con gris/opacidad de color),
   bordes finos, sin cajas sólidas salvo tablas (excepción de tarjeta/dato).
   ========================================================================== */
.controles-panel {
    font-family: var(--font-geist);
}

.controles-heading {
    font-size: 0.85rem;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-color);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* "?" junto a cada título de sección — reemplaza el párrafo explicativo
   fijo: al tocarlo, la explicación aparece en el cuadro de diálogo en vez
   de ocupar lugar permanente en la columna. */
.controles-help-btn {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-fine);
    background: none;
    color: var(--text-color);
    font-family: var(--font-geist);
    font-size: 0.62rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.6;
}
.controles-help-btn:hover {
    opacity: 1;
    border-color: var(--text-color);
}

.controles-hint {
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-color);
    margin-bottom: 10px;
}


.controles-table-wrap {
    border: 1px solid var(--border-fine);
    border-radius: 4px;
    margin-bottom: 10px;
    /* Recorta el borde redondeado sobre el tbody scrolleable de abajo. */
    overflow: hidden;
}

/* Encabezado fijo sin fondo propio: en vez de position:sticky (que
   necesita un color detrás para que la fila que pasa por debajo no se
   superponga con el texto — y eso siempre terminaba leyéndose como una
   "caja"), thead y tbody quedan como bloques indepen­dientes. Así el
   encabezado directamente no está en la zona que scrollea: lo que se
   desplaza es solo tbody, con su propio alto y su propio recorte — un
   punto que sube de más queda oculto por el overflow, no tapado por un
   color. table-layout:fixed + mismas columnas en los dos bloques
   (thead/tbody) es lo que mantiene alineadas las columnas entre ambos. */
.controles-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-geist);
    font-size: 0.7rem;
    color: var(--text-color);
}

.controles-table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.controles-table tbody {
    display: block;
    width: 100%;
    max-height: 120px;
    overflow-y: auto;
}

.controles-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.controles-table thead tr {
    text-align: left;
}

/* Fila clickeable (lista de imágenes de Fotomosaico, reemplaza el
   desplegable de antes — siempre visible, como una planilla). */
.fila-imagen {
    cursor: pointer;
}
.fila-imagen:hover {
    background: rgba(255, 255, 255, 0.07);
}
.fila-imagen.activa td:first-child {
    font-weight: 500;
}

.controles-table th,
.controles-table td {
    padding: 6px 8px;
    font-weight: 300;
    white-space: nowrap;
    /* table-layout:fixed reserva el ancho de columna, pero sin esto un
       texto largo sin espacios (ej. un comentario tipeado corrido) lo
       desborda igual, superponiéndose visualmente con la columna de al
       lado (el botón de eliminar). Con esto se corta y se oculta. */
    overflow: hidden;
    text-overflow: ellipsis;
}

.controles-table th {
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Campos numéricos ingresados por teclado (coordenadas reales, ancho/alto,
   GSD): sin recuadro, solo un fondo claro translúcido — nunca un input con
   apariencia de formulario nativo — y sin flechas de incremento/decremento
   en ningún lado del módulo. */
.controles-table input[type="number"],
.controles-input-num {
    background: rgba(242, 239, 233, 0.5);
    border: none;
    border-radius: 3px;
    color: var(--legacy-text-color);
    font-family: var(--font-geist);
}
.controles-table input[type="number"] {
    width: 100%;
    padding: 3px 5px;
    font-size: 0.7rem;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.controles-table-empty {
    text-align: center;
    opacity: 0.6;
}

.controles-btn-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.controles-subbox {
    border: 1px solid var(--border-fine);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 14px;
    font-size: 0.75rem;
}

.controles-subbox-title {
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color);
    margin-bottom: 8px;
}

.controles-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--text-color);
    font-weight: 300;
}

/* El label ("Ancho real (X):", etc.) no tenía font-size propio — heredaba
   el default del navegador (16px) al lado de un input de 0.75rem, un
   desnivel que ya estaba en Fotoplano, no solo en Adaptativo. Mismo
   tamaño que el input para que se lean parejos. */
.controles-field-row span {
    font-size: 0.75rem;
}

.controles-input-num {
    width: 55px;
    padding: 5px 6px;
    font-size: 0.75rem;
}

.controles-btn-icon {
    padding: 5px 8px;
    font-size: 0.75rem;
}

.controles-divider {
    border: 0;
    border-top: 1px solid var(--surface-border);
    margin: 14px 0;
}

.controles-step-disabled {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.3s;
}

.controles-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--text-color);
}
.controles-radio-group label {
    cursor: pointer;
}
.controles-radio-group input[type="radio"] {
    width: 15px;
    height: 15px;
    accent-color: var(--text-color);
    cursor: pointer;
}

/* Selector tipo segmented control (Vertical/Horizontal, Baja/Media/Alta en
   Adaptativo) — alternativa a .controles-radio-group cuando las opciones
   son pocas y cortas, más cómodo para tocar con el dedo que radios. */
.controles-toggle-row {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.controles-toggle-btn {
    flex: 1;
    padding: 8px 6px;
    text-align: center;
    background: transparent;
    color: var(--text-color);
    font-family: var(--font-geist);
    font-size: 0.72rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--border-fine);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.controles-toggle-btn:hover {
    border-color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.07);
}

.controles-toggle-btn.active {
    border-color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.12);
    font-weight: 600;
}

.controles-toggle-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.controles-toggle-row.disabled {
    opacity: 0.55;
}

/* Panel de Adaptativo específicamente (no Fotoplano, que ya tiene su
   propio ritmo vertical probado): entra justo en pantallas de laptop
   típicas (~768px de alto) sin scroll — verificado con captura real
   (ver nota en RAUMLAB estado y mejoras.md), no a ojo. Compacta
   .panel-content, encabezados, separadores y selectores solo dentro de
   este panel — .controles-heading/.controles-divider/.capa-selector/etc.
   siguen con su tamaño normal en el resto del sitio. */
#panel-adaptativo .panel-content {
    padding: 2px 20px;
}

#panel-adaptativo .controles-heading {
    margin-bottom: 0;
}

#panel-adaptativo .controles-divider {
    margin: 2px 0;
}

#panel-adaptativo .capa-selector {
    margin-bottom: 0;
}

#panel-adaptativo .capa-selector-lista {
    max-height: 160px;
}

#panel-adaptativo .controles-toggle-row {
    margin-bottom: 0;
}

#panel-adaptativo .controles-field-row-pair {
    margin-bottom: 0;
}

/* Misma altura para los tres tipos de control (dropdown, toggle,
   botón de acción) — antes cada uno tenía su propio padding/font-size
   ajustado por separado para ganar espacio, y terminaban con alturas
   distintas entre sí (lo que se veía desprolijo). Mismo font-size y
   mismo padding vertical en los tres; el horizontal sigue distinto
   porque el contenido es distinto (nombre de dropdown vs. una palabra
   corta vs. el texto de un botón). .btn-primary no tiene borde propio
   (ver base .btn-primary) — borde transparente del mismo grosor que
   .btn-text para que ocupe la misma altura sin cambiarle el aspecto,
   mismo criterio que .modal-actions .viewer-btn-main en in_SITE. */
#panel-adaptativo .capa-selector-boton,
#panel-adaptativo .controles-toggle-btn,
#panel-adaptativo .btn-text,
#panel-adaptativo .btn-primary {
    font-size: 0.75rem;
}

#panel-adaptativo .capa-selector-boton,
#panel-adaptativo .controles-toggle-btn {
    padding: 8px 10px;
}

#panel-adaptativo .btn-text,
#panel-adaptativo .btn-primary {
    padding: 8px 22px;
}

#panel-adaptativo .btn-primary {
    border: 1px solid transparent;
}

/* "Reiniciar" junto al título — botón chico de verdad (borde + relleno
   propio), no un link subrayado suelto: ahorra la fila completa que
   ocupaba antes sin dejar de leerse como una acción clickeable. */
#panel-adaptativo .controles-heading-action {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border-fine);
    border-radius: 3px;
    padding: 3px 8px;
    color: var(--text-color);
    font-family: var(--font-geist);
    font-size: 0.65rem;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

#panel-adaptativo .controles-heading-action:hover {
    border-color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.07);
}

/* Ancho/Alto personalizados (Adaptativo) — siempre presentes, no
   aparecen/desaparecen con el formato elegido (ver app.js,
   actualizarDisponibilidadFormato): solo se habilitan/deshabilitan.
   Ancho y Alto comparten una sola fila (no dos apiladas, con su propio
   "mm" cada una) — ahorra el alto que le faltaba al panel para entrar
   sin scroll vertical. */
.controles-field-row-pair {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--text-color);
    font-weight: 300;
    font-size: 0.75rem;
}

.controles-field-row-pair label {
    white-space: nowrap;
}

.controles-field-row-pair .controles-input-num {
    width: 42px;
    flex-shrink: 0;
}

/* .controles-input-num de base es un recuadro claro (rgba(242,239,233,.5),
   texto oscuro) — "activo" ya es ese tono casi blanco. Deshabilitado
   necesita leerse gris, no solo semitransparente (opacity sola difumina
   todo por igual — fondo, borde y texto — y contra el fondo oscuro del
   panel terminaba viéndose como un rectángulo fantasma en vez de gris). */
.controles-field-row-pair input:disabled {
    background: rgba(150, 150, 150, 0.2);
    color: rgba(24, 24, 27, 0.55);
}

/* Aviso "solo en PC" (Fotoplano/Fotomosaico) — mismo criterio visual que
   el resto del sitio: vidrio esmerilado sobre --bg-navy. Aparece una sola
   vez al entrar al módulo en mobile (ver mostrarIntro() en app.js). */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(20, 20, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-box {
    width: 100%;
    max-width: 420px;
    background: rgba(20, 20, 20, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    padding: 22px;
}

.modal-box h3 {
    font-family: var(--font-geist);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-color);
    font-weight: 400;
    margin-bottom: 12px;
}

.modal-box-text {
    font-family: var(--font-geist);
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-color);
}

/* Campos del modal "Nuevo comentario" (categoría/descripción) — mismo
   patrón que .input-row/.modal-box input,textarea en raumlab/style.css
   (formulario "Solicitar soporte"), copiado acá porque mono_plano tiene su
   propia hoja de estilos, no comparte la de raumlab/. */
.input-row {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.input-row label {
    font-family: var(--font-geist);
    font-size: 0.7rem;
    color: var(--text-color);
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.modal-box input[type="text"],
.modal-box input[type="date"],
.modal-box textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--surface-border);
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: var(--font-geist);
    color: var(--text-color);
    background-color: transparent;
}
.modal-box textarea {
    resize: vertical;
}
.modal-box input[type="text"]:focus,
.modal-box input[type="date"]:focus,
.modal-box textarea:focus {
    border-color: var(--text-color);
    outline: none;
}
/* input[type="date"] con fondo oscuro: el ícono nativo del calendario
   queda negro sobre negro sin esto — color-scheme lo pasa a la variante clara. */
.modal-box input[type="date"] {
    color-scheme: dark;
}
.modal-box input::placeholder,
.modal-box textarea::placeholder {
    color: var(--text-color);
    opacity: 0.5;
}

.modal-actions {
    margin-top: 18px;
}

.controles-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-geist);
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--text-color);
    cursor: pointer;
    margin-bottom: 10px;
}
.controles-checkbox-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--text-color);
    cursor: pointer;
}

.controles-select-label {
    display: block;
    font-family: var(--font-geist);
    font-weight: 100;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color);
    margin-bottom: 6px;
}

/* Desplegable de capa/color para Dibujar — HTML propio, no <select> nativo:
   los navegadores no dejan tematizar el fondo/texto de la lista abierta de
   un <select>, así que con eso se leía mal (texto gris sobre blanco). */
.capa-selector {
    position: relative;
    margin-bottom: 10px;
}

.capa-selector-boton {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: none;
    border: 1px solid var(--border-fine);
    border-radius: 4px;
    color: var(--text-color);
    font-family: var(--font-geist);
    font-weight: 300;
    font-size: 0.78rem;
    cursor: pointer;
    text-align: left;
}
.capa-selector-boton:hover,
.capa-selector-boton[aria-expanded="true"] {
    border-color: var(--text-color);
}

.capa-selector-swatch {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 2px;
    border: 1px solid var(--border-fine);
}

.capa-selector-lista {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: 4px;
    /* Traslúcida (no un panel opaco) — mismo criterio que el panel de
       navegación (raumlab-chrome.css: .rc-nav-panel). */
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-fine);
    border-radius: 4px;
    max-height: 220px;
    overflow-y: auto;
}

.capa-selector-opcion {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 3px;
    color: var(--text-color);
    font-family: var(--font-geist);
    font-weight: 300;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
}
.capa-selector-opcion:hover {
    background: rgba(255, 255, 255, 0.07);
}
.capa-selector-opcion.activa {
    font-weight: 500;
}

/* Fila de una capa de usuario (Dibujar → capas con nombre/color propios):
   el botón de selección ocupa el resto del ancho, editar/borrar quedan
   como botones chicos aparte — mismo tamaño que .btn-eliminar-entidad,
   no anidados dentro del botón de selección (un <button> no puede
   contener otro <button> válidamente). */
.capa-fila {
    display: flex;
    align-items: center;
    gap: 4px;
}
.capa-fila .capa-selector-opcion {
    flex: 1;
    min-width: 0;
}
.capa-fila .capa-selector-opcion span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Mismo estilo de borde que .capa-selector-opcion — el punteado no es el
   criterio de énfasis de esta página (eso se marca con peso de fuente,
   nunca con un tipo de borde distinto). */
.capa-nueva-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: none;
    border: 1px solid var(--border-fine);
    border-radius: 3px;
    color: var(--text-color);
    font-family: var(--font-geist);
    font-weight: 300;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
    margin-top: 4px;
}
.capa-nueva-btn:hover {
    border-color: var(--text-color);
    background: rgba(255, 255, 255, 0.07);
}

/* Grilla de colores del modal "Nueva capa"/"Editar capa" — misma idea que
   el selector de color de AutoCAD (Índice de Color), sin ser fiel a los
   256 colores/números ACI reales: es una grilla curada, bien distinguible,
   solo para que cada capa tenga un color propio reconocible. */
.capa-color-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin: 10px 0;
}
.capa-color-swatch {
    aspect-ratio: 1;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    padding: 0;
}
.capa-color-swatch.seleccionado {
    outline: 2px solid var(--text-color);
    outline-offset: 1px;
}

/* Pantalla de Puntos Homólogos (Fotomosaico) — columna central con las dos
   imágenes a fusionar lado a lado, en vez de la única imagen del resto del
   módulo. Mismo criterio sin fondo/borde propio en el contenedor. */
.homologos-centro {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    gap: 16px;
}

.canvas-homologo-mitad {
    flex: 1;
    min-width: 0;
    display: flex;
    overflow: auto;
    scrollbar-width: none;
}
.canvas-homologo-mitad::-webkit-scrollbar {
    display: none;
}

/* .canvas-homologo-wrapper se centra con margin:auto (no justify-content/
   align-items en .canvas-homologo-mitad) — mismo motivo que #image-wrapper
   más arriba en este archivo: centrar por justify-content con overflow:auto
   deja la mitad del contenido que se sale fuera de alcance del scroll, así
   que el zoom con la rueda siempre terminaba centrándose solo en vez de
   seguir al cursor. */
.canvas-homologo-wrapper {
    position: relative;
    display: inline-block;
    margin: auto;
    cursor: crosshair;
}

.canvas-homologo-wrapper canvas {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - var(--header-h) - var(--footer-h) - 48px);
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.canvas-homologo-wrapper svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Botones de herramienta con ícono en vez de texto (Consultar medidas /
   Dibujar) — mismo borde fino que el resto, ícono centrado, título nativo
   como tooltip. */
.controles-icon-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: none;
    border: 1px solid var(--border-fine);
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
}
.controles-icon-btn:hover {
    border-color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.07);
}
.controles-icon-btn.activo {
    border-color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.07);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.btn-eliminar-entidad {
    background: none;
    border: 1px solid var(--border-fine);
    color: var(--text-color);
    border-radius: 3px;
    font-size: 0.65rem;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.btn-eliminar-entidad:hover {
    border-color: var(--text-color);
    background: rgba(255, 255, 255, 0.07);
}

.fotoplano-canvas-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.fotoplano-canvas-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    opacity: 0.5;
    font-family: var(--font-geist);
    font-weight: 300;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    /* Fotoplano/Fotomosaico requieren escritorio (ver .workspace-mobile-notice
       más abajo) — en mobile no entran las 4 pestañas cómodas, así que se
       ocultan del subnav directamente en vez de llevar a un aviso por
       pestaña. El aviso general vive en la pantalla de introducción (ver
       mostrarIntro() en app.js), no acá. */
    .rc-module-subheader .rc-subnav button[data-modo="fotoplano"],
    .rc-module-subheader .rc-subnav button[data-modo="fotomosaico"] {
        display: none;
    }

    .mode-intro-content {
        /* #app-main (app-shell.css) en mobile YA pone
           padding: calc(header-h+20) 20px mobile-bottom-reserve; en sus
           CUATRO lados (no solo arriba) — la vez pasada solo se corrigió
           el padding-top de acá, pero derecha/abajo tenían el mismo
           problema (20+20 y reserve+reserve) y la izquierda daba 55px en
           vez de 35 (20 de #app-main + 35 propios), todo invisible
           mirando esta regla sola sin sumar la de #app-main. Ahora acá
           solo se agrega lo que falta para igualar los totales de
           in_SITE (.rc-intro-screen, el único módulo con un solo
           contenedor): arriba 0 (header-h+20 ya cerrado), derecha 0 (20
           ya cerrado), abajo 0 (mobile-bottom-reserve ya cerrado),
           izquierda 15 (20+15=35, el margen documentado). */
        padding: 0 0 0 15px;
    }
    .workspace-layout {
        display: none;
    }
    .workspace-mobile-notice {
        display: block;
        color: var(--text-color);
        font-family: var(--font-geist);
        font-weight: 300;
        font-size: 0.9rem;
        line-height: 1.6;
        padding: 60px 24px;
        text-align: center;
    }

    /* #panel-dialogo (mostrarMensaje) usa medidas fijas de escritorio
       (left:48px, width:--ancho-rail=300px) — en el layout apilado de
       mobile (Adaptativo, el único módulo con workspace accesible acá)
       queda superpuesto sobre el resto del contenido en vez de anclado a
       una columna que ya no existe en ese ancho. La pantalla es
       demasiado chica para sumarle esta caja aparte — se oculta entera,
       en vez de reposicionarla. */
    #panel-dialogo.visible {
        display: none;
    }

    /* ADAPTATIVO — a diferencia de Fotoplano/Fotomosaico, si tiene sentido
       en celular (4 vértices arrastrables con el dedo, no una tabla de
       puntos). Selector compuesto (2 clases) a propósito: pesa más que el
       .workspace-layout{display:none} de arriba sin importar el orden en
       el archivo, y así queda claro en el propio selector que es la
       excepción puntual, no un cambio a la regla general. Reflow a una
       columna — la fila de 3 columnas de escritorio no entra en un
       celular. */
    .workspace-layout.adaptativo-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px 20px var(--workspace-bottom-reserve);
        overflow: visible;
        height: auto;
    }
    .adaptativo-layout .rail-izquierdo,
    .adaptativo-layout .rail-derecho {
        width: 100%;
    }
    .adaptativo-layout .fotoplano-canvas-area {
        flex: none;
        min-height: 280px;
    }
    .adaptativo-layout .miniaturas-rail {
        padding-bottom: 0;
    }
    /* .workspace-cerrar-proyecto es position:fixed con las medidas de
       escritorio (left:48px, ancho de .rail-izquierdo) — sirve tal cual
       en la fila de 3 columnas, pero en el apilado de una columna de acá
       arriba tiene que fluir normal. Combinador de hermano adyacente
       porque el botón es hermano de .adaptativo-layout, no está anidado
       adentro (mismo lugar que en Fotoplano). */
    .adaptativo-layout + .workspace-cerrar-proyecto {
        position: static;
        width: 100%;
        margin-top: 12px;
    }

    .instr-layout {
        flex-direction: column;
        padding: 24px 20px;
        gap: 24px;
    }
    .instr-nav {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 20px;
    }
    .instr-panel {
        overflow-y: visible;
        padding-right: 0;
    }
}