/* =========================================================================
   Modo fotomontaje — pantalla completa con la estructura de la ventana de diseño
   =========================================================================
   Reutiliza del CSS de la app: .sidebar-header, .brand-logo, .canvas-toolbar,
   .toolbar-workflow, .toolbar-action-buttons, .toolbar-left, .tool-btn,
   .toolbar-right, .btn-auth-trigger, .notification-console y .sidebar-resizer.
   Aquí solo vive lo propio del modo.
   ========================================================================= */

.fm-root {
    position: fixed;
    inset: 0;
    /* Por debajo de los modales de la app (z-index 200): el registro, el pago
       y el perfil se abren desde aquí y deben quedar por encima. */
    z-index: 150;
    display: flex;
    align-items: stretch;
    min-height: 0;
    background: var(--bg-base);
    color: var(--text-hi);
    font: 13px/1.45 var(--font);
}

.fm-root[hidden] { display: none; }
body.fm-open { overflow: hidden; }

body.fm-resizing,
body.fm-resizing * { cursor: col-resize !important; }

/* ── Columnas ──────────────────────────────────────────────────────────── */
.fm-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--sidebar-bg);
}

.fm-left {
    flex: 0 0 auto;
    width: 300px;
    min-width: 240px;
    max-width: 480px;
    border-right: 1px solid var(--border);
}

.fm-right {
    flex: 0 0 286px;
    width: 286px;
    min-width: 0;
    gap: 8px;
    padding: 10px;
    overflow-y: auto;
    border-left: 1px solid var(--border);
}

.fm-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
}

/* ── Marca y título en la columna izquierda ────────────────────────────── */
/* El logo y su subtítulo usan las mismas clases que la ventana de diseño
   (.brand-lockup / .brand-subtitle): mismo tamaño y misma separación. */
.fm-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.fm-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Scrollbars finas, como las del panel de diseño. */
.fm-scroll,
.fm-right {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.fm-scroll::-webkit-scrollbar,
.fm-right::-webkit-scrollbar { width: 4px; }
.fm-scroll::-webkit-scrollbar-thumb,
.fm-right::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}
.fm-scroll::-webkit-scrollbar-thumb:hover,
.fm-right::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* ── Cajas ─────────────────────────────────────────────────────────────── */
.fm-box {
    padding: 10px 12px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    backdrop-filter: blur(8px);
}
.fm-box h2 {
    margin: 0 0 9px;
    font: 600 12px var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.fm-side > h2 {
    margin: 2px 0 0;
    font: 600 12px var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.fm-mut { margin: 6px 0 0; color: var(--text-lo); font-size: 12px; line-height: 1.5; }

/* Botón de la foto: muestra el nombre del archivo elegido. */
.fm-photo-btn {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fm-photo-btn.has-file {
    color: var(--accent);
    border-color: var(--border-hover);
}
.fm-photo-line {
    margin: 5px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fm-photo-line:empty { display: none; }

/* Etiquetas con ayuda: el texto lleva un subrayado discreto. */
.fm-tip {
    cursor: help;
    border-bottom: 1px dotted var(--border-hover);
}

/* Tooltip único, fijo al elemento y fuera del scroll del panel. */
.fm-tooltip {
    position: fixed;
    z-index: 400;
    max-width: 240px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: rgba(10, 18, 32, .98);
    color: var(--text-mid);
    font: 400 11.5px/1.45 var(--font);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
    pointer-events: none;
}
.fm-tooltip[hidden] { display: none; }

/* Deslizadores con valor numérico al lado. */
.fm-row.fm-slider-row { gap: 6px; }
.fm-range-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
/* Pista con marcas de graduación debajo, visibles en todos los navegadores. */
.fm-range {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fm-ticks {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
}
.fm-ticks i {
    width: 1px;
    height: 4px;
    background: var(--border-hover);
    border-radius: 1px;
}
.fm-root .fm-range-wrap input[type="range"] { width: 84px; }.fm-range-value {
    min-width: 26px;
    text-align: right;
    font: 600 12px var(--font-mono);
    color: var(--accent);
}

/* Conmutador de herramienta del panel 4: Esquinas / Pincel. */
.fm-tool-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 2px 0 8px;
}
.fm-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 6px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-input);
    color: var(--text-mid);
    font: 600 12px var(--font);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
.fm-tool-btn:hover { border-color: var(--border-hover); color: var(--text-hi); }
.fm-tool-btn[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 212, 255, .10);
    box-shadow: 0 0 10px rgba(0, 212, 255, .18);
}
.fm-tool-btn .btn-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.fm-tool-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Pasos − / + de los paneles, calcados de las medidas de la chapa. */
.fm-root .stepper input[type="text"] {
    width: 60px;
    height: 28px;
    padding: 0 4px;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-input);
    text-align: center;
    font: 500 12px var(--font);
}
.fm-root .stepper input[type="text"]:focus {
    border-color: var(--border);
    border-left-color: var(--accent);
    border-right-color: var(--accent);
}

/* Botón ? de la guía. */
.fm-help-btn { font: 700 14px var(--font); }

.fm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
    min-height: 28px;
    font-size: 13px;
    color: var(--text-mid);
}
.fm-row[hidden] { display: none; }
.fm-row > span { min-width: 0; }
.fm-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
    font-size: 13px;
    color: var(--text-mid);
    cursor: pointer;
}

.fm-root input[type="number"],
.fm-root input[type="text"],
.fm-root select {
    width: 128px;
    flex-shrink: 0;
    padding: 5px 8px;
    background: var(--bg-input);
    color: var(--text-hi);
    border: 1px solid var(--border);
    border-radius: 6px;
    font: 13px var(--font);
    outline: none;
}
.fm-root input[type="number"]:focus,
.fm-root input[type="text"]:focus,
.fm-root select:focus { border-color: var(--accent); }
.fm-root input[type="range"] { width: 128px; flex-shrink: 0; accent-color: var(--accent); }
.fm-root input[type="color"] {
    width: 44px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    cursor: pointer;
}
.fm-root input[type="checkbox"] { accent-color: var(--accent); }

/* ── Selector de acabado: parrilla 3x2 tipo patrón de diseño ──────────── */
.fm-fin-row {
    position: relative;
}
.fm-custom-select {
    position: relative;
    width: 154px;
    flex-shrink: 0;
}
.fm-fin-picker {
    position: relative;
    width: 154px;
    flex-shrink: 0;
}
.fm-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.fm-select-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 34px;
    padding: 3px 8px 3px 5px;
    background: var(--bg-input);
    color: var(--text-hi);
    border: 1px solid var(--border);
    border-radius: 8px;
    font: 500 12.5px var(--font);
    cursor: pointer;
    text-align: left;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.fm-fin-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 34px;
    padding: 3px 8px 3px 5px;
    background: var(--bg-input);
    color: var(--text-hi);
    border: 1px solid var(--border);
    border-radius: 8px;
    font: 500 12.5px var(--font);
    cursor: pointer;
    text-align: left;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.fm-select-trigger:hover:not(:disabled),
.fm-fin-trigger:hover:not(:disabled) {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, .05);
}
.fm-select-trigger:focus-visible,
.fm-fin-trigger:focus-visible,
.fm-custom-select.is-open .fm-select-trigger,
.fm-fin-picker.is-open .fm-fin-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 212, 255, .18);
}
.fm-select-trigger:disabled,
.fm-fin-trigger:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.fm-select-thumb {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .4);
    background: #202428;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fm-select-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fm-select-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
}
.fm-select-arrow,
.fm-select-chevron {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--text-lo);
    border-bottom: 1.5px solid var(--text-lo);
    transform: rotate(45deg) translateY(-2px);
    margin-left: auto;
    transition: transform .2s ease, border-color .15s ease;
}
.fm-custom-select.is-open .fm-select-arrow,
.fm-custom-select.is-open .fm-select-chevron,
.fm-fin-picker.is-open .fm-select-chevron {
    transform: rotate(-135deg) translateY(-2px);
    border-color: var(--accent);
}

/* Parrilla 3x2 desplegable (igual que en patrón de distribución) */
.fm-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 256px;
    padding: 8px;
    border: 1px solid var(--border-hover, #2c323c);
    border-radius: 10px;
    background: #0b1323;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65);
    z-index: 300;
    box-sizing: border-box;
}
.fm-fin-options {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 256px;
    padding: 8px;
    border: 1px solid var(--border-hover, #2c323c);
    border-radius: 10px;
    background: #0b1323;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65);
    z-index: 300;
    box-sizing: border-box;
}

/* REGLA CRÍTICA: Asegurar que se oculta cuando tiene hidden o clase .hidden */
.fm-select-menu.hidden,
.fm-select-menu[hidden],
.fm-fin-options.hidden,
.fm-fin-options[hidden] {
    display: none !important;
}

.fm-select-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 74px;
    padding: 8px 4px 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-mid);
    font: 10.5px/1.2 var(--font);
    text-align: center;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}
.fm-fin-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 74px;
    padding: 8px 4px 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-mid);
    font: 10.5px/1.2 var(--font);
    text-align: center;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease;
}
.fm-select-opt:hover,
.fm-select-opt:focus-visible,
.fm-fin-option:hover,
.fm-fin-option:focus-visible {
    border-color: var(--border-hover);
    background: var(--accent-dim, rgba(0, 212, 255, 0.08));
    color: var(--text-hi);
}
.fm-select-opt.is-selected,
.fm-select-opt[aria-selected="true"],
.fm-fin-option.is-selected,
.fm-fin-option[aria-selected="true"] {
    border-color: var(--accent);
    background: var(--accent-dim, rgba(0, 212, 255, 0.16));
    color: var(--text-hi);
    font-weight: 600;
}
.fm-select-opt-thumb {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease;
}
.fm-select-opt:hover .fm-select-opt-thumb,
.fm-fin-option:hover .fm-select-opt-thumb {
    transform: scale(1.06);
}
.fm-select-opt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fm-select-opt-label {
    font-size: 10.5px;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
    max-width: 100%;
}

.fm-adv { margin: 4px 0 10px; }
.fm-adv summary {
    cursor: pointer;
    color: var(--text-lo);
    font-size: 12px;
    margin-bottom: 6px;
}
.fm-adv .fm-row { margin-bottom: 6px; }

/* Botones propios del modo (foto, PNG, pinceles). */
.fm-btn {
    min-height: 32px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, .04);
    color: var(--text-hi);
    border: 1px solid var(--border);
    border-radius: 7px;
    font: 500 13px var(--font);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.fm-btn:hover:not(:disabled) { border-color: var(--border-hover); background: rgba(0, 212, 255, .07); }
.fm-btn:disabled { opacity: .45; cursor: not-allowed; }
.fm-wide { width: 100%; }
.fm-shadow-detect {
    justify-content: space-between;
    margin: 4px 0 0;
}
.fm-shadow-detect input { margin: 0; cursor: pointer; }

/* ── Panel: cabecera y medidas ─────────────────────────────────────────── */
.fm-panel-head { display: flex; gap: 10px; align-items: stretch; margin-bottom: 8px; }
.fm-panel-thumb-frame {
    width: 104px;
    height: 52px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    box-shadow: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fm-panel-thumb-frame img,
.fm-panel-head img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(2.5);
    transform-origin: center center;
    display: block;
    border: none;
    box-shadow: none;
}
/* La medida ocupa el hueco a la derecha de la miniatura, en columna. */
.fm-panel-head .fm-dim-inline {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 6px 8px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}
.fm-panel-head .fm-dim-inline span {
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.fm-panel-head .fm-dim-inline b {
    font-size: 13px;
    line-height: 1.2;
}

/* Casillas de medidas: el mismo tratamiento que el prototipo. */
.fm-dim {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 0;
    padding: 6px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-hover);
    border-radius: 6px;
}
.fm-dim span { color: var(--text-lo); font-size: 11px; }
.fm-dim b {
    font: 600 14px var(--font-mono);
    color: var(--accent);
    text-shadow: 0 0 10px rgba(0, 212, 255, .3);
    white-space: nowrap;
}
/* Las dos medidas principales tienen más presencia. */
.fm-dim-strong span { color: var(--text-mid); font-size: 12px; }
.fm-dim-strong b { font-size: 14px; }
.fm-dim b[hidden] { display: none; }

.fm-size-edit {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -2px 0 8px;
}
.fm-size-edit[hidden] { display: none; }
.fm-size-edit input { width: 64px; }
.fm-size-edit .fm-mut { margin: 0; }
/* ── Toolbar del modo ──────────────────────────────────────────────────── */
.fm-toolbar {
    flex: none;
    padding: 8px 12px;
}

.fm-action-buttons {
    /* La última acción es «Descargar proyecto», más larga que el resto: se lleva
       algo más de ancho para que quepa en una línea. */
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(152px, 1.45fr);
}

.fm-action-buttons #fm_export {
    white-space: nowrap;
    gap: 5px;
    padding: 7px 8px;
    font-size: 12px;
    /* Separa la acción del bloque «Volver a Diseño», que va en la otra zona. */
    margin-right: 6px;
}

.fm-action-buttons .toolbar-action-btn {
    padding: 7px 8px;
    white-space: normal;
    line-height: 1.15;
    text-align: center;
    justify-content: center;
    gap: 5px;
    /* Mismo tamaño que los botones de la app, no la versión compacta de la
       toolbar de diseño. */
    font-size: 13px;
}

.fm-action-buttons .btn-icon {
    width: 14px;
    height: 14px;
}

/* En el modo, el botón superior de la columna derecha es Volver al diseño. */
.fm-back-action {
    width: 100%;
    justify-content: center;
    /* Mismo tamaño de letra que el resto de acciones (Actualizar). */
    font-size: 13px;
    font-weight: 600;
    padding: 7px 10px;
}

/* Acciones secundarias: el violeta se reserva para previsualizar y exportar. */
.fm-action-buttons .fm-secondary {
    background: rgba(255, 255, 255, .04);
    color: var(--text-hi);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.fm-action-buttons .fm-secondary:hover:not(:disabled) {
    border-color: var(--border-hover);
    background: rgba(0, 212, 255, .07);
}
.fm-action-buttons .fm-secondary .btn-icon { color: var(--text-mid); }

/* El botón «Editar panel» queda marcado mientras se edita. */
.fm-action-buttons .fm-secondary[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 212, 255, .10);
}
.fm-action-buttons .fm-secondary[aria-pressed="true"] .btn-icon { color: var(--accent); }

/* ── Lienzo ────────────────────────────────────────────────────────────── */
.fm-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background-color: var(--bg-base);
    background-image:
        linear-gradient(var(--grid-fine) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px),
        linear-gradient(var(--grid-bold) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}

.fm-viewport.is-over { outline: 2px dashed var(--accent); outline-offset: -6px; }

.fm-wrap {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    line-height: 0;
    background: rgba(0, 0, 0, .35);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    will-change: transform;
}
.fm-wrap[hidden] { display: none; }

.fm-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#fm_gl { position: relative; z-index: 0; }

/* En vista final el lienzo no se edita: el cursor vuelve a la flecha. */
#fm_ov {
    position: absolute;
    inset: 0;
    z-index: 2;
    touch-action: none;
    cursor: default;
}
/* En edición el cursor lo dibuja la capa de guías (cruz de AutoCAD o pincel). */
.fm-root.is-editing #fm_ov { cursor: none; }

#fm_wm {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.fm-drop {
    position: absolute;
    inset: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    color: var(--text-lo);
    border: 2px dashed var(--border-hover);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    pointer-events: none;
}
.fm-drop[hidden] { display: none; }
.fm-drop small { color: var(--text-lo); }

.fm-pro-cta {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 4;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #4c1d95, var(--cta, #7c3aed));
    color: #fff;
    font: 600 12px var(--font);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.fm-pro-cta[hidden] { display: none; }
.fm-pro-cta:hover { filter: brightness(1.08); }

/* ── Franja de bienvenida y pie del lienzo ─────────────────────────────── */
.fm-welcome {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 12px 0;
    padding: 9px 12px;
    background: rgba(124, 58, 237, .12);
    border: 1px solid rgba(124, 58, 237, .35);
    border-radius: 10px;
    font-size: 12px;
    color: var(--text-mid);
}
.fm-welcome[hidden] { display: none; }
.fm-welcome strong { color: var(--text-hi); }
.fm-welcome .fm-btn { margin-left: auto; flex-shrink: 0; }

/* ── Bandeja de paneles ────────────────────────────────────────────────── */
.fm-tray-hint { margin: -2px 0 6px; }
.fm-tray { display: flex; flex-direction: column; gap: 8px; }
.fm-slot {
    position: relative;
    padding: 8px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fm-slot:hover { border-color: var(--border-hover); }
/* Selección del panel: borde limpio y visible sin halos de neón */
.fm-slot.is-active {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, .08);
}
.fm-slot-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    padding: 6px;
    box-sizing: border-box;
}
.fm-slot-preview img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 2px;
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
}
.fm-slot > img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: contain;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    padding: 6px;
    box-sizing: border-box;
    box-shadow: none;
}
.fm-slot-n {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1e293b;
    color: #f8fafc;
    font: 700 11px var(--font-mono);
    border: 1px solid rgba(255, 255, 255, .15);
}
.fm-slot.is-active .fm-slot-n {
    background: #0284c7;
    color: #ffffff;
    border-color: rgba(255, 255, 255, .3);
}
.fm-slot-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    min-height: 0;
    padding: 0;
    border-radius: 6px;
    background: rgba(15, 23, 42, .85);
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, .15);
    cursor: pointer;
}
.fm-slot-x:hover { border-color: #f87171; color: #f87171; }
.fm-slot-cap { margin-top: 6px; font-size: 12px; color: var(--text-mid); line-height: 1.45; }
.fm-slot-cap strong { color: var(--text-hi); font-weight: 600; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .fm-action-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fm-action-buttons #fm_export { white-space: normal; font-size: 12px; }
    .fm-right { flex-basis: 250px; width: 250px; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }