/* ==========================================================
   MUEBLEAPP3D — Estilos Globales
   1. Variables
   2. Reset & Base
   3. Login
   4. Layout (Sidebar / Header / Main)
   5. Componentes (Card, Formularios, Botones)
   ========================================================== */


/* ----------------------------------------------------------
   1. VARIABLES
   ---------------------------------------------------------- */
:root {
    --primary:       #2c3e50;
    --accent:        #2c3e50;
    --accent-hover:  #1a252f;
    --sidebar-bg:    #1e272e;

    --bg:            #f0f2f5;
    --surface:       #ffffff;
    --border:        #e2e8f0;

    --text:          #334155;
    --text-muted:    #64748b;

    --error-bg:      #fff5f5;
    --error-text:    #c53030;
    --error-border:  #feb2b2;

    --header-h:      64px;
    --sidebar-w:     255px;
    --radius-sm:     6px;
    --radius-md:     10px;
    --radius-lg:     16px;
}


/* ----------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
}


/* ----------------------------------------------------------
   3. LOGIN
   ---------------------------------------------------------- */
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--bg);
}

.login-box {
    background: var(--surface);
    width: 100%;
    max-width: 400px;
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.login-box .brand {
    text-align: center;
    margin-bottom: 2rem;
}

.login-box .brand h1 {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
}

.login-box .brand p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.alert-error {
    background-color: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    font-size: 0.82rem;
    text-align: center;
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-google:hover {
    background: var(--bg);
    border-color: var(--text-muted);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}


/* ----------------------------------------------------------
   4. LAYOUT
   ---------------------------------------------------------- */

body.app-page {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ---- SIDEBAR ---- */
.sidebar {
    width: var(--sidebar-w);
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100vh;
    overflow: hidden;
}

/* Nombre de la app — respira, sin icono */
.sidebar-brand {
    padding: 2rem 1.375rem 1.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sidebar-brand h1 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.3px;
}

/* Perfil de usuario */
.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 1rem 1.375rem;
    margin: 1.75rem 0.875rem 1.75rem;
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-sm);
}


.sidebar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.sidebar-user-name {
    font-size: 0.78rem;
    color: #cbd5e1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 0.69rem;
    color: #475569;
}

/* Navegacion */
.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 1rem 0.875rem;
    flex: 1;
}

.nav-section-label {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: #475569;
    padding: 1rem 10px 0.4rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    text-decoration: none;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.nav-item svg { flex-shrink: 0; opacity: 0.65; }

.nav-item:hover {
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
}

.nav-item:hover svg { opacity: 0.9; }

.nav-item.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.nav-item.active svg { opacity: 1; }

/* Footer: icono logout + creditos */
.sidebar-footer {
    padding: 0.875rem 1.375rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.btn-logout-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #ff7675;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,118,117,0.2);
    transition: background 0.2s, border-color 0.2s;
}

.btn-logout-sidebar:hover {
    background: rgba(255,118,117,0.1);
    border-color: rgba(255,118,117,0.4);
}

.sidebar-credits {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-credits span,
.sidebar-credits a {
    font-size: 0.67rem;
    color: #334155;
    line-height: 1.6;
    text-decoration: none;
}

.sidebar-credits a:hover { color: #64748b; }


/* ---- APP BODY ---- */
.app-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.app-header {
    height: 72px;
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-shrink: 0;
}

.header-search {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 500px;
    background: #f1f5f9; /* Un gris muy suave para que resalte sobre el blanco */
    border: 1.5px solid transparent; /* El borde inicia invisible */
    border-radius: 10px; /* Un radio un poco más cuadrado se ve más técnico */
    padding: 8px 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: text;
}

/* Efecto al pasar el mouse */
.header-search:hover {
    background: #e2e8f0;
}

/* Estilo para el icono (si usas uno de fuente o SVG) */
.header-search svg, .header-search i {
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: color 0.3s;
}

.header-search:focus-within i {
    color: var(--accent-color);
}

/* Limpieza del input real */
.header-search input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 0.95rem;
    color: var(--primary-color);
    padding: 4px 0;
}

.header-search input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.header-search input:focus { outline: none; box-shadow: none; }
.header-search input::placeholder { color: var(--text-muted); opacity: 0.7; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.main-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    background-color: var(--bg);
}

.page-title { margin-bottom: 1.75rem; }

.page-title h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.3px;
}

.page-title p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 3px;
}


/* ----------------------------------------------------------
   5. COMPONENTES
   ---------------------------------------------------------- */

.card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 1.75rem 2rem;
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.93rem;
    color: var(--text);
    background: var(--surface);
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(44,62,80,0.08);
}

.btn-primary {
    display: inline-block;
    width: 100%;
    padding: 11px 16px;
    background-color: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: background 0.2s, transform 0.1s;
}

.btn-primary:hover  { background-color: var(--accent-hover); }
.btn-primary:active { transform: scale(0.98); }

.btn-action {
    background-color: var(--accent);
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.1px;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn-action:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44,62,80,0.25);
}

.btn-action { border: none; cursor: pointer; font-family: inherit; }

.btn-secondary {
    display: inline-block;
    padding: 10px 20px;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
}

.btn-secondary:hover {
    background: var(--bg);
    border-color: #94a3b8;
}

/* ----------------------------------------------------------
   6. TABLA DE DATOS
   ---------------------------------------------------------- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.data-table thead tr {
    border-bottom: 2px solid var(--border);
}

.data-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.data-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr:hover { background: #f8fafc; }

.btn-eliminar-row {
    font-size: 0.8rem;
    color: #e53e3e;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid #fed7d7;
    background: #fff5f5;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}

.btn-eliminar-row:hover {
    background: #e53e3e;
    color: #fff;
}

/* ----------------------------------------------------------
   7. ALERT SUCCESS
   ---------------------------------------------------------- */
.alert-success {
    background-color: #f0fff4;
    color: #276749;
    border: 1px solid #9ae6b4;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
}

/* ----------------------------------------------------------
   8. EMPTY STATE
   ---------------------------------------------------------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--text-muted);
    text-align: center;
}

.empty-state svg { opacity: 0.3; }
.empty-state p { font-size: 0.9rem; }

/* ----------------------------------------------------------
   9. MODAL
   ---------------------------------------------------------- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 100;
    backdrop-filter: blur(2px);
}

.modal-overlay.open { display: block; }

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    z-index: 101;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    width: 100%;
    max-width: 460px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
    opacity: 0;
}

.modal.open {
    display: block;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}

.modal-close:hover {
    background: var(--bg);
    color: var(--text);
}

.modal-body {
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 0.5rem;
}

.modal-actions .btn-primary {
    width: auto;
    padding: 10px 24px;
}

/* ----------------------------------------------------------
   10. HISTORIAL — TAGS Y DETALLE
   ---------------------------------------------------------- */
.tag-folio {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    background: #eef2ff;
    color: #4338ca;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

.tag-tipo {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f0fdf4;
    color: #166534;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: capitalize;
}

.btn-ver-row {
    font-size: 0.8rem;
    color: #2563eb;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    transition: background 0.2s, color 0.2s;
    margin-right: 4px;
}

.btn-ver-row:hover {
    background: #2563eb;
    color: #fff;
}

.td-actions { white-space: nowrap; }

/* ---- Detail list ---- */
.detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    align-items: center;
}

.detail-list dt {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-list dd {
    font-size: 0.9rem;
    color: var(--text);
}

/* ---- Cajas de medidas ---- */
.medida-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 1rem;
    background: var(--bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.medida-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.medida-valor {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.medida-valor small {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ----------------------------------------------------------
   11. USUARIOS — TAGS DE ROL Y ESTADO
   ---------------------------------------------------------- */
.tag-rol, .tag-estado {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.tag-admin   { background: #fef3c7; color: #92400e; }
.tag-operador { background: #e0f2fe; color: #0369a1; }
.tag-activo  { background: #dcfce7; color: #166534; }
.tag-inactivo { background: #f1f5f9; color: #64748b; }


/* ----------------------------------------------------------
   12. DISEÑADOR 3D — WIZARD
   ---------------------------------------------------------- */

/* Layout del main con scroll */
.wizard-main {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 1rem;
}

/* ---- Indicador de pasos ---- */
.wizard-nav {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 1.5rem 2rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.wizard-step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: default;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.wizard-step-item.active  { opacity: 1; }
.wizard-step-item.done    { opacity: 0.65; cursor: pointer; }
.wizard-step-item.done:hover { opacity: 0.85; }

.wsn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.wizard-step-item.active .wsn {
    background: var(--primary);
    color: #fff;
}

.wizard-step-item.done .wsn {
    background: #22c55e;
    color: #fff;
}

.wizard-step-item span {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.wizard-step-item.active span { color: var(--text); }

.wizard-connector {
    flex: 1;
    height: 1px;
    background: var(--border);
    margin: 0 0.5rem;
    min-width: 20px;
}

/* ---- Paneles ---- */
.wizard-panel { display: none; padding: 0 2rem; flex: 1; }
.wizard-panel.active { display: block; }

/* ---- Navegación inferior ---- */
.wizard-footer {
    display: flex;
    align-items: center;
    padding: 1rem 2rem 0;
    margin-top: 1rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.wizard-error {
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #feb2b2;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

.req { color: #e53e3e; }

/* ---- Layout visor ---- */
.visor-layout {
    display: flex;
    gap: 1.5rem;
    height: 560px;
}

.visor-form {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.visor-canvas-wrap {
    flex: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #edf0f4;
    border: 1px solid var(--border);
    position: relative;
}

.visor-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 0.75rem;
    padding: 5px 12px;
    border-radius: 20px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

/* ---- Tipo cards ---- */
.tipo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tipo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}

.tipo-card input { display: none; }

.tipo-card svg {
    width: 36px;
    height: 36px;
    stroke: var(--text-muted);
    transition: stroke 0.15s;
}

.tipo-card span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.15s;
}

.tipo-card.active,
.tipo-card:hover {
    border-color: var(--primary);
    background: #f8fafc;
}

.tipo-card.active svg,
.tipo-card:hover svg { stroke: var(--primary); }

.tipo-card.active span,
.tipo-card:hover span { color: var(--primary); }

/* ---- Dimensiones inputs ---- */
.dim-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

/* ---- Lista de materiales ---- */
.material-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
}

.material-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.material-item input { display: none; }

.material-item.active,
.material-item:hover { border-color: var(--primary); background: #f8fafc; }

.material-color {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.material-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.material-info strong {
    font-size: 0.82rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.material-info span {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ---- Stats piezas/tableros ---- */
.visor-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 0.5rem;
}

.visor-stat-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    text-align: center;
}

.visor-stat-box span {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.visor-stat-box label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
    display: block;
}

/* ---- Coming soon ---- */
.coming-soon-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--text-muted);
}

.coming-soon-block svg { opacity: 0.35; }
.coming-soon-block h3  { font-size: 1.1rem; color: var(--text); }
.coming-soon-block p   { font-size: 0.88rem; max-width: 420px; line-height: 1.6; }

.badge-next {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* ---- Resumen paso 5 ---- */
.resumen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.resumen-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.resumen-item label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.resumen-item span {
    font-size: 0.92rem;
    color: var(--text);
    font-weight: 600;
}


/* ----------------------------------------------------------
   13. STUDIO 3D — Editor profesional de cuarto
   ---------------------------------------------------------- */

/* Override del layout base — studio ocupa todo el espacio */
.studio-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    height: 100vh;
}

/* ---- Toolbar de etapas ---- */
.studio-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.25rem;
    height: 52px;
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.stage-tabs {
    display: flex;
    align-items: center;
    gap: 0;
}

.stage-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.stage-tab:disabled { cursor: default; }
.stage-tab.active   { opacity: 1; }
.stage-tab.done     { opacity: 0.7; cursor: pointer; }
.stage-tab.done:hover { opacity: 0.9; }

.stage-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.stage-tab.active .stage-num { background: var(--primary); color: #fff; }
.stage-tab.done   .stage-num { background: #22c55e; color: #fff; }

.stage-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.stage-tab.active .stage-label { color: var(--text); }

.stage-connector {
    width: 24px;
    height: 1px;
    background: var(--border);
    flex-shrink: 0;
}

.unit-selector { display: flex; gap: 2px; }
.btn-unit {
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-unit:hover  { background: var(--bg-hover); color: var(--text-primary); }
.btn-unit.active { background: #2563eb; color: #fff; border-color: #2563eb; }

.studio-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Redundantes con el menú en cascada de arriba — decisión de César (sep 22): controles sueltos que ya están
   bien organizados en Archivo (Guardar/Alzados/Guardar y cotizar), Ver → Unidades, Ver → Muros en el 3D y
   Ver → Vistas. Se ocultan (no se borran del DOM) porque el menú en cascada los dispara por click()/
   value+change. */
.unit-selector,
#btn-guardar-rapido,
#btn-alzados,
#btn-stage-next,
#sel-muros,
.layout-picker {
    display: none;
}

.studio-project-name {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

.btn-studio-action {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.btn-studio-action:hover:not(:disabled) { background: var(--accent-hover); }
.btn-studio-action:disabled { opacity: 0.35; cursor: default; }

/* ---- Layout principal del studio ---- */
.studio-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ---- Panel lateral izquierdo ---- */
.studio-panel {
    width: 260px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sp-section {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.sp-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.sp-row { margin-bottom: 0.75rem; }

.sp-row label {
    font-size: 0.78rem;
    color: var(--text);
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
}

.sp-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-input-row input[type="range"] {
    flex: 1;
    accent-color: var(--primary);
}

.sp-input-row span {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
    min-width: 28px;
    text-align: right;
}

/* ---- Swatches de material ---- */
.swatch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.swatch {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
    outline: none;
}

.swatch:hover  { transform: scale(1.12); }
.swatch.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(44,62,80,0.2); }

/* ---- Herramientas CAD ---- */
.cad-tools {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.btn-cad {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
    text-align: left;
}

.btn-cad:hover { background: #edf2f7; border-color: #cbd5e0; }

.btn-cad-danger:hover {
    background: #fff5f5;
    border-color: #feb2b2;
    color: #c53030;
}

.cad-hint {
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.cad-hint kbd {
    background: var(--border);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 0.68rem;
    font-family: monospace;
}

/* Secciones colapsables (ayuda, nariz por tramo) — ocultas por default para dejar más espacio libre en el panel */
.cad-hint-details {
    margin-top: 6px;
}

.cad-hint-details summary {
    cursor: pointer;
    list-style: none;
}

.cad-hint-details summary::-webkit-details-marker {
    display: none;
}

.cad-hint-details summary::before {
    content: '▸ ';
    color: var(--text-muted);
}

.cad-hint-details[open] summary::before {
    content: '▾ ';
}

.cad-hint-details summary:hover {
    color: var(--text);
}

/* ---- Cubiertas: nariz por tramo ---- */
.nariz-fila {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    font-size: 0.76rem;
}

.nariz-fila i.punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}

.nariz-fila span {
    color: var(--text-muted);
    white-space: nowrap;
}

.nariz-fila select {
    flex: 1;
    font-size: 0.76rem;
    padding: 3px 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
}

/* Grosor de nariz (cm) + respaldo (mm) editables por tramo, bajo el selector */
.nariz-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -1px 0 8px 17px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.nariz-sub label {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.nariz-sub input[type="number"] {
    width: 44px;
    font-size: 0.72rem;
    padding: 2px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
}

.nariz-sub input[type="number"]:disabled {
    opacity: 0.4;
}

/* ---- Modo Muros / Guías ---- */
.mode-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mode-toggle .mode-btn {
    flex: 1 1 calc(50% - 3px);
}

.mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.mode-btn:hover {
    border-color: #a0aec0;
    color: var(--text);
    background: #f7f9fc;
}

.mode-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ---- Área de canvas (CAD + 3D) ---- */
.studio-canvas-area {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.studio-canvas-half {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.studio-canvas-half + .studio-canvas-half {
    border-left: 2px solid var(--border);
}

.canvas-label {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    pointer-events: none;
    letter-spacing: 0.3px;
}

/* ---- Botones de vista 3D ---- */
.view-presets {
    display: flex;
    gap: 3px;
    pointer-events: all;
    margin-left: 4px;
}

.view-btn {
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    transition: all 0.12s;
}

.view-btn:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

.view-btn.active {
    background: rgba(100,200,255,0.3);
    border-color: rgba(100,200,255,0.6);
    color: #fff;
}

/* ---- Botón Finalizar abierto ---- */
.btn-cad-open {
    color: #D97706;
    border-color: #D97706;
}
.btn-cad-open:hover {
    background: #fffbeb;
    border-color: #B45309;
    color: #B45309;
}

.btn-cad-preset {
    color: #0ea5e9;
    border-color: #0ea5e9;
    font-weight: 600;
}
.btn-cad-preset:hover {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0284c7;
}

/* ---- Herramientas de nodo ---- */
.node-tools-row {
    display: flex;
    gap: 5px;
}

.btn-node-tool {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-align: center;
    line-height: 1.3;
}

.btn-node-tool kbd {
    background: var(--border);
    border-radius: 3px;
    padding: 0 3px;
    font-size: 0.65rem;
    font-family: monospace;
}

.btn-node-tool:hover { background: #edf2f7; border-color: #cbd5e0; }

.btn-node-tool.active {
    background: rgba(100, 200, 255, 0.12);
    border-color: #64C8FF;
    color: #64C8FF;
}

#btn-nt-add.active  { background: rgba(34,197,94,0.12); border-color: #22C55E; color: #22C55E; }
#btn-nt-del.active  { background: rgba(239,68,68,0.12); border-color: #EF4444; color: #EF4444; }

/* Variante icon-only para herramientas de nodo */
.btn-nt {
    flex: 0 0 34px;
    height: 34px;
    padding: 0;
    flex-direction: row;
    justify-content: center;
    gap: 0;
}

#btn-gt-select.active { background: rgba(100,200,255,0.12); border-color: #64C8FF; color: #64C8FF; }
#btn-gt-draw.active   { background: rgba(251,185,36,0.12);  border-color: #FBB924; color: #FBB924; }

/* Toolbar de herramientas de muebles */
.furn-toolbar {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.btn-ft {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 52px;
    padding: 7px 4px 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-align: center;
    line-height: 1.2;
}
.btn-ft kbd {
    background: var(--border);
    border-radius: 3px;
    padding: 0 3px;
    font-size: 0.60rem;
    font-family: monospace;
    color: var(--text-muted);
}
.btn-ft:hover  { background: #edf2f7; border-color: #cbd5e0; }
.btn-ft.active             { background: rgba(100,200,255,0.12); border-color: #64C8FF; color: #64C8FF; }
.btn-ft.active kbd         { background: rgba(100,200,255,0.2); color: #64C8FF; }
#btn-ft-iman.active        { background: rgba(251,100,100,0.12); border-color: #F87171; color: #F87171; }
#btn-ft-iman.active kbd    { background: rgba(251,100,100,0.2); color: #F87171; }

/* Badge de muro padre en lista de muebles */
.fl-muro-badge {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(251,100,100,0.15);
    color: #F87171;
    border: 1px solid rgba(248,113,113,0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Canvas CAD */
#cad-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

/* Contenedor 3D */
#room-3d {
    width: 100%;
    height: 100%;
}

#room-3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ----------------------------------------------------------
   14. STUDIO — Etapa 2: Muebles
   ---------------------------------------------------------- */

/* Tipo buttons */
.tipo-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.tipo-btn {
    padding: 6px 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: center;
}

.tipo-btn:hover,
.tipo-btn.active {
    border-color: var(--primary);
    background: #f0f4f8;
    color: var(--primary);
}

/* Dimension inputs panel */
.sp-dim-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}
.sp-dim-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.sp-dim-field { display: flex; flex-direction: column; gap: 3px; }
.sp-dim-field label { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; }
.sp-dim-field input {
    width: 100%;
    padding: 5px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text);
    background: var(--bg);
}

/* Add furniture button */
.btn-add-furniture {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 9px 12px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-add-furniture:hover { background: var(--accent-hover); }

/* Inspector */
.inspector-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
}

.ins-info-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.ins-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--text);
    background: var(--bg);
}

/* Rotation buttons */
.rot-btns, .snap-btns {
    display: flex;
    gap: 4px;
    margin-top: 3px;
}

.rot-btn, .snap-btn {
    flex: 1;
    padding: 5px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-align: center;
}

.rot-btn:hover, .snap-btn:hover {
    background: #edf2f7;
    border-color: var(--primary);
    color: var(--primary);
}

/* Delete button */
.btn-delete-furniture {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px;
    margin-top: 10px;
    border: 1px solid #feb2b2;
    border-radius: var(--radius-sm);
    background: #fff5f5;
    color: #c53030;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-delete-furniture:hover { background: #fed7d7; }

/* Furniture list */
.furniture-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.fl-empty {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 6px 0;
}

.fl-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.fl-item:hover     { background: #f8fafc; border-color: #cbd5e0; }
.fl-item.selected  { border-color: #F5B942; background: #fffbeb; }

.fl-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}

.fl-label {
    flex: 1;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    text-transform: capitalize;
}

.fl-label small { font-weight: 400; color: var(--text-muted); margin-left: 4px; }

.fl-id {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-family: monospace;
}

/* ===================== §15 STUDIO — Colapsable entorno ===================== */
.sp-collapsible {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2px;
    flex-shrink: 0;
}

.sp-collapse-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sp-collapse-btn:hover { background: #dde3ea; color: var(--text); }

#env-body {
    padding: 10px 12px 8px;
    background: transparent;
    border-top: 1px solid var(--border);
}

/* ===================== §16 STUDIO — Popup propiedades de muro ===================== */
.wtp-box {
    background: #1a2035;
    border: 1px solid #2e4060;
    border-radius: 10px;
    padding: 14px 16px;
    width: 230px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.wtp-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: #7a94b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
    cursor: move;
    user-select: none;
}
.wtp-title:hover { color: #a0b8d8; }

.wtp-field { margin-bottom: 10px; }

.wtp-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4a6080;
    margin-bottom: 5px;
}

.wtp-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wtp-input {
    flex: 1;
    background: #0d1117;
    border: 1.5px solid #2e4060;
    border-radius: 6px;
    color: #e0eeff;
    padding: 6px 8px;
    font-size: 1rem;
    font-weight: 700;
    width: 0;
}

.wtp-input:focus { outline: none; border-color: #4a90d9; }

.wtp-unit { color: #4a5568; font-size: 0.8rem; flex-shrink: 0; }

.wtp-swatches-row { display: flex; flex-wrap: wrap; gap: 5px; }

.swatch.wtp-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
}
.swatch.wtp-swatch.active {
    border-color: #4a90d9;
    box-shadow: 0 0 0 2px #4a90d9, 0 0 0 4px rgba(74,144,217,0.25);
    transform: scale(1.18);
}

.wtp-tex-row { display: flex; align-items: center; gap: 5px; }
.wtp-tex-btn { flex-shrink: 0; font-size: 0.7rem !important; padding: 4px 8px !important; height: auto !important; }
.wtp-tex-clear-btn { flex-shrink: 0; width: 22px; height: 22px; padding: 0; justify-content: center; font-size: 0.75rem; }
.wtp-tex-name { font-size: 0.65rem; color: #22C55E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70px; }

.wtp-actions { display: flex; gap: 6px; margin-top: 2px; }
.wtp-actions .btn-cad { flex: 1; justify-content: center; font-size: 0.75rem; }

.wtp-ok-btn {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #1d4ed8 !important;
}
.wtp-ok-btn:hover { background: #1d4ed8 !important; }

.wtp-delete-btn {
    display: flex;
    width: 100%;
    margin-top: 8px;
    padding: 5px 0;
    justify-content: center;
    font-size: 0.7rem !important;
    background: transparent !important;
    color: #ef4444 !important;
    border-color: #7f1d1d !important;
}
.wtp-delete-btn:hover {
    background: rgba(239,68,68,0.12) !important;
    border-color: #ef4444 !important;
}

/* ===================== §17 STUDIO — Viewport Grid ===================== */

/* Barra superior de layout picker */
.vp-toolbar {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: #0f1320;
    border-bottom: 1px solid #1e2535;
    flex-shrink: 0;
    gap: 8px;
}

.layout-picker {
    display: flex;
    gap: 4px;
}

.lp-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid #2a3448;
    border-radius: 5px;
    color: #4a5a78;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.lp-btn:hover  { border-color: #4a6090; color: #7a9ac0; }
.lp-btn.active { border-color: #4a90d9; color: #64C8FF; background: rgba(74,144,217,0.1); }

/* Grid container */
.vp-grid {
    flex: 1;
    display: grid;
    min-height: 0;
    gap: 3px;
    background: #080c14;
    padding: 3px;
}

.vp-grid.layout-single { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.vp-grid.layout-split  { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.vp-grid.layout-quad   { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* Slot */
.vp-slot {
    display: flex;
    flex-direction: column;
    background: #0d1117;
    border: 1px solid #1a2235;
    border-radius: 6px;
    overflow: hidden;
    min-height: 0;
}

/* Header de cada slot */
.vp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #111820;
    border-bottom: 1px solid #1a2235;
    flex-shrink: 0;
    min-height: 30px;
}

.vp-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #4a6080;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    margin-right: auto;
}

.vp-view-btns {
    display: flex;
    gap: 2px;
}

.vp-view-btn {
    padding: 2px 7px;
    font-size: 0.65rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #3a5070;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    white-space: nowrap;
}

.vp-view-btn:hover  { color: #7aaad0; border-color: #2a3f5e; }
.vp-view-btn.active { color: #64C8FF; border-color: #2a5080; background: rgba(100,200,255,0.08); }

/* Contenido del slot (llena el espacio restante) */
.vp-content {
    flex: 1;
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.vp-content canvas,
.vp-content #room-3d,
.vp-content #room-3d canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

#room-3d {
    width: 100%;
    height: 100%;
}

/* studio-canvas-area ocupa el resto vertical */
.studio-canvas-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ===================== §18 STUDIO — Importar textura ===================== */

.tex-import-row {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.btn-tex-import {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #7dd3fc;
    background: rgba(125, 211, 252, 0.08);
    border: 1px dashed rgba(125, 211, 252, 0.35);
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s, border-color 0.15s;
}

.btn-tex-import:hover {
    background: rgba(125, 211, 252, 0.15);
    border-color: rgba(125, 211, 252, 0.6);
}

.tex-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 5px 8px;
}

.tex-preview img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.15);
}

.tex-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: #f87171;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    transition: background 0.12s;
}

.tex-clear:hover { background: rgba(248,113,113,0.15); }

.tex-controls {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tex-mode-row {
    display: flex;
    gap: 4px;
}

.tex-mode-btn {
    flex: 1;
    padding: 4px 6px;
    font-size: 0.70rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.tex-mode-btn.active {
    background: rgba(99,179,237,0.18);
    border-color: rgba(99,179,237,0.5);
    color: #93c5fd;
}

.tex-mode-btn:hover:not(.active) {
    background: rgba(255,255,255,0.08);
    color: #cbd5e1;
}

.tex-tile-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tex-tile-lbl {
    font-size: 0.68rem;
    color: #64748b;
}

/* ===================== §19 STUDIO — Controles de guías ===================== */

.guide-color-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.guide-color-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.12s;
    flex-shrink: 0;
}

.guide-color-btn:hover { transform: scale(1.15); }
.guide-color-btn.active { border-color: #fff; transform: scale(1.15); }

.guide-style-row {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.guide-style-btn {
    flex: 1;
    padding: 4px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    letter-spacing: 0.03em;
}

.guide-style-btn.active {
    background: rgba(251,191,36,0.15);
    border-color: rgba(251,191,36,0.5);
    color: #fbbf24;
}

.guide-style-btn:hover:not(.active) {
    background: rgba(255,255,255,0.08);
    color: #cbd5e1;
}

/* ===================== §20 FURNITURE EDIT MODE (FEM) ===================== */

/* Botón "Editar interior" en inspector */
.btn-edit-furniture {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 0.55rem;
    padding: 0.45rem 0.7rem;
    background: #1a2e22;
    color: #7dcfa0;
    border: 1px solid #2e6b47;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-edit-furniture:hover { background: #22402e; border-color: #4caf50; }

/* Panel FEM en sidebar (mismas dimensiones que .studio-panel) */
.fem-panel {
    width: 260px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Botón volver */
.btn-fem-back {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 0.45rem 0.7rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: #94a3b8;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-fem-back:hover { background: rgba(255,255,255,0.08); color: #cbd5e1; }

/* Botón Aplicar dimensiones */
.btn-fem-apply {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.42rem 0.7rem;
    background: #1e3a2a;
    color: #7dcfa0;
    border: 1px solid #3a7a52;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-fem-apply:hover { background: #27503a; }

/* Lista de piezas */
.fem-pieces-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

/* Tarjeta por pieza */
.fem-piece-card {
    background: #141824;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 7px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.fem-piece-card:hover { border-color: rgba(255,255,255,0.18); }
.fem-piece-card.selected {
    border-color: #3b82f6;
    background: #111d30;
}

/* Cabecera compacta */
.fem-piece-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    font-size: 0.73rem;
    user-select: none;
}
.fem-piece-card.selected .fem-piece-header { background: rgba(59,130,246,0.07); }

.fem-piece-num {
    color: #475569;
    font-size: 0.67rem;
    min-width: 20px;
    flex-shrink: 0;
}
.fem-piece-name {
    flex: 1;
    color: #c8d8e8;
    word-break: break-word;
    line-height: 1.3;
}
.fem-piece-qty {
    color: #f0b429;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 20px;
    text-align: right;
}
.fem-piece-dims-compact {
    color: #475569;
    font-size: 0.67rem;
    flex-shrink: 0;
    margin-left: 2px;
}

/* Detalle expandido */
.fem-piece-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 9px;
    border-top: 1px solid rgba(59,130,246,0.2);
    background: #0c1420;
}
.fem-detail-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.71rem;
}
.fem-detail-row label {
    color: #64748b;
    min-width: 52px;
    font-size: 0.69rem;
    flex-shrink: 0;
}
.fem-detail-row .ins-input {
    flex: 1;
    min-width: 0;
    padding: 3px 6px !important;
    font-size: 0.71rem !important;
}
.fem-detail-unit {
    color: #475569;
    font-size: 0.67rem;
    flex-shrink: 0;
    min-width: 22px;
}
.fem-detail-dims {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.fem-dblclick-hint {
    font-size: 0.65rem;
    color: #2d4a6a;
    padding-top: 2px;
    font-style: italic;
}

.fem-note {
    font-size: 0.67rem;
    color: #334155;
    margin-top: 8px;
    line-height: 1.4;
}

/* Banner FEM en canvas */
.fem-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #0d1f15;
    border-bottom: 2px solid #2e7d4f;
    font-size: 0.78rem;
    color: #86efac;
    flex-shrink: 0;
    z-index: 10;
}
.fem-banner-inner {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #86efac;
}
#btn-fem-exit {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid rgba(239,68,68,0.4);
    border-radius: 5px;
    color: #fca5a5;
    font-size: 0.73rem;
    cursor: pointer;
    transition: background 0.12s;
}
#btn-fem-exit:hover { background: rgba(239,68,68,0.12); }

/* ── Botón ojo por pieza ─────────────────────────────────────────────── */
.fem-eye-btn {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; min-width: 22px;
    padding: 0; border: none; border-radius: 4px;
    background: transparent; color: #7dd3a8; cursor: pointer;
    transition: color 0.12s, background 0.12s;
    flex-shrink: 0;
}
.fem-eye-btn:hover { background: rgba(125,211,168,0.12); }
.fem-eye-btn.off { color: #475569; }
.fem-eye-btn.off:hover { color: #94a3b8; background: rgba(148,163,184,0.1); }

/* Punto de color en la cabecera de cada pieza */
.fem-piece-color-dot {
    width: 10px; height: 10px; min-width: 10px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
    display: inline-block; flex-shrink: 0; margin-left: auto;
}

/* Botón duplicar pieza */
.fem-dup-btn {
    background: none; border: none; cursor: pointer; color: #7dd3fc;
    font-size: 13px; padding: 2px 4px; border-radius: 4px; flex-shrink: 0;
    opacity: 0.7; transition: opacity .15s;
}
.fem-dup-btn:hover { opacity: 1; background: rgba(125,211,252,0.1); }

/* Botón eliminar pieza (dentro del detalle expandido) */
.fem-del-piece-btn {
    margin-top: 8px; width: 100%; padding: 6px; border-radius: 5px;
    background: none; border: 1px solid #ef4444; color: #ef4444;
    cursor: pointer; font-size: 11px; transition: background .15s;
}
.fem-del-piece-btn:hover { background: rgba(239,68,68,0.12); }

/* Botón agregar pieza al pie del listado */
.fem-add-piece-btn {
    width: 100%; margin-top: 8px; padding: 7px; border-radius: 6px;
    background: none; border: 1px dashed rgba(125,211,168,0.4); color: #7dd3a8;
    cursor: pointer; font-size: 12px; transition: background .15s, border-color .15s;
}
.fem-add-piece-btn:hover { background: rgba(125,211,168,0.08); border-color: rgba(125,211,168,0.7); }

/* Pieza oculta — fondo atenuado */
.fem-piece-card.hidden-piece { opacity: 0.45; }
.fem-piece-card.hidden-piece .fem-piece-name { text-decoration: line-through; color: #64748b; }

/* ── Fila material (swatches + picker) ─────────────────────────────── */
.fem-mat-row { flex-wrap: wrap; gap: 6px; align-items: center; }
.fem-mat-row label { min-width: 52px; }
.fem-mat-swatches {
    display: flex; flex-wrap: wrap; gap: 4px; flex: 1;
}
.fem-mat-sw {
    width: 18px; height: 18px; border-radius: 3px;
    border: 2px solid transparent; cursor: pointer;
    transition: transform 0.1s, border-color 0.1s;
    padding: 0;
}
.fem-mat-sw:hover { transform: scale(1.18); }
.fem-mat-sw.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(99,179,237,0.6);
    transform: scale(1.18);
}
.fem-color-inp {
    width: 26px; height: 22px; padding: 0; border: 1px solid #334155;
    border-radius: 4px; background: transparent; cursor: pointer;
    flex-shrink: 0;
}

/* ── Sección enchape ─────────────────────────────────────────────────── */
.fem-enchape-section {
    display: flex; flex-direction: column; gap: 5px;
    margin-top: 4px; padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.fem-enchape-title {
    font-size: 0.69rem; color: #94a3b8; letter-spacing: 0.03em; text-transform: uppercase;
}
.fem-enchape-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.fem-enc-btn {
    padding: 3px 5px; font-size: 0.68rem;
    background: #1e293b; border: 1px solid #334155;
    border-radius: 4px; color: #94a3b8; cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    text-align: center;
}
.fem-enc-btn:hover { border-color: #4caf50; color: #cbd5e1; }
.fem-enc-btn.active {
    background: #14452f; border-color: #4caf50; color: #86efac;
}
.fem-enchape-total {
    font-size: 0.7rem; color: #64748b;
}
.fem-enchape-total b { color: #a5f3c0; }

/* Total enchape al pie de toda la lista */
.fem-total-enchape {
    margin-top: 8px; padding: 6px 10px;
    background: #0f2720; border: 1px solid #1e5c3a;
    border-radius: 6px; font-size: 0.73rem; color: #6b8f7e;
}
.fem-total-enchape b { color: #4ade80; }

/* Botón de bloqueo paramétrico por pieza */
.fem-lock-btn {
    background: transparent; border: none; padding: 2px 4px;
    border-radius: 3px; cursor: pointer; color: #475569;
    font-size: 0.82rem; line-height: 1; flex-shrink: 0;
}
.fem-lock-btn.locked { color: #f59e0b; }
.fem-lock-btn:hover { background: rgba(255,255,255,0.06); }

/* Sección de posición X/Y/Z */
.fem-pos-section {
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex; flex-direction: column; gap: 4px;
}
.fem-pos-title { font-size: 0.7rem; color: #64748b; }
.fem-posy-hint { font-size: 0.65rem; color: #475569; }
.fem-pos-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
}
.fem-pos-field {
    display: flex; flex-direction: column; gap: 2px;
}
.fem-pos-field label {
    font-size: 0.65rem; color: #64748b; text-align: center;
}
.fem-pos-field .ins-input {
    width: 100%; text-align: center; padding: 3px 4px; font-size: 0.72rem;
}
.fem-pos-field .fem-detail-unit {
    text-align: center; font-size: 0.62rem; color: #475569;
}

/* ── Popup pieza (PCP) ─────────────────────────────────────── */
.pcp-box {
    background: #1a2035; border: 1px solid #2e4060;
    border-radius: 10px; padding: 12px 14px; width: 200px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.pcp-title {
    display: flex; align-items: center; gap: 6px;
    cursor: move; user-select: none;
    font-size: 0.7rem; font-weight: 700;
    color: #7dd3a8; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 6px;
}
.pcp-drag-handle { color: #4a6a8a; font-size: 1rem; }
.pcp-close-btn {
    margin-left: auto; background: transparent; border: none;
    color: #64748b; cursor: pointer; font-size: 0.85rem; padding: 0 2px;
    line-height: 1;
}
.pcp-close-btn:hover { color: #ef4444; }
.pcp-dims-label {
    font-size: 0.72rem; color: #94a3b8; margin: 0 0 10px;
    text-align: center; letter-spacing: 0.03em;
}
.pcp-pos-group { display: flex; flex-direction: column; gap: 6px; }
.pcp-pos-row {
    display: flex; align-items: center; gap: 6px;
}
.pcp-pos-row label {
    font-size: 0.7rem; color: #64748b; font-weight: 700;
    width: 14px; flex-shrink: 0;
}
.pcp-pos-row .wtp-input { flex: 1; }
.pcp-unit { font-size: 0.68rem; color: #475569; white-space: nowrap; }

/* ---- FEM back row + save button ---- */
.fem-back-row { display: flex; gap: 0.4rem; align-items: center; }
.btn-fem-save {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
  padding: 0.42rem 0.6rem; border-radius: 6px; font-size: 0.72rem;
  background: #1a2a3a; color: #60a5fa; border: 1px solid #2a4a6a; cursor: pointer;
  white-space: nowrap;
}
.btn-fem-save:hover { background: #243a54; }
.fem-colision { margin: 6px 0; padding: 6px 8px; font-size: 0.72rem; color: #fecaca; background: #450a0a; border: 1px solid #b91c1c; border-radius: 6px; }
.btn-fem-xray.on { background: #1d4ed8; color: #fff; border-color: #60a5fa; }

/* ---- Biblioteca de muebles ---- */
.lib-section { flex: 0 0 auto; border-top: 1px solid rgba(255,255,255,0.05); }
.lib-section .sp-title { display: flex; align-items: center; justify-content: space-between; }
.lib-clear-btn {
  font-size: 0.65rem; background: transparent; border: none;
  color: #475569; cursor: pointer; padding: 0;
}
.lib-clear-btn:hover { color: #ef4444; }
.lib-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.lib-item {
  display: flex; align-items: center; gap: 6px;
  background: #151c2e; border-radius: 6px; padding: 6px 8px;
  font-size: 0.72rem;
}
.lib-item-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lib-item-name { flex: 1; color: #c8d8e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-item-dims { font-size: 0.65rem; color: #475569; white-space: nowrap; }
.lib-item-load {
  padding: 2px 7px; border-radius: 4px; font-size: 0.65rem;
  background: #1e3a2e; color: #7dcfa0; border: 1px solid #2a5a3a; cursor: pointer;
}
.lib-item-load:hover { background: #243a2e; }
.lib-item-del {
  background: transparent; border: none; color: #374151;
  cursor: pointer; font-size: 0.75rem; padding: 0 2px; line-height: 1;
}
.lib-item-del:hover { color: #ef4444; }

/* ---- Cortadora de panel ---- */
.corte-opciones {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.corte-opciones label { display: flex; flex-direction: column; gap: 4px; }
.corte-opciones input[type="number"] {
    width: 84px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg, #fff);
    color: var(--text);
}
.corte-medidas { display: flex; align-items: center; gap: 6px; }
.corte-check { flex-direction: row !important; align-items: center; gap: 6px !important; }
.plano-resumen { font-weight: 700; color: var(--text); margin-bottom: 1rem; }
.plano-tablero { margin-bottom: 1.5rem; }
.plano-tablero h4 { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 6px; }
.plano-canvas {
    display: block;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
}
@media print {
    .sidebar, .app-header, .wizard-footer, .no-print { display: none !important; }
    .plano-tablero { break-inside: avoid; }
}

/* ---- Costos y ganancias ---- */
.costos-sub {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.5rem 0 0.75rem;
}
.costos-sub:first-of-type { margin-top: 0; }
.costos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
#tabla-accesorios input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg, #fff);
    color: var(--text);
}
.costos-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.resumen-precio span { font-size: 1.3rem; color: var(--primary); }

.acc-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.acc-acciones select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg, #fff);
    color: var(--text);
    min-width: 260px;
}

/* ---- Opciones del mueble (puertas, entrepaños, cajones…) ---- */
.opt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}
.opt-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-muted); }
.opt-grid select, .opt-grid input[type="number"] {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg, #fff);
    color: var(--text);
    font-size: 0.85rem;
}
.opt-grid .opt-check { flex-direction: row; align-items: center; gap: 6px; padding-top: 1rem; }
.opt-avisos { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.opt-avisos li {
    font-size: 0.78rem;
    line-height: 1.4;
    color: #92400e;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    padding: 6px 10px;
    border-radius: 4px;
}
.opt-avisos:empty { display: none; }

/* Tapacanto grueso en el editor de piezas del Studio */
.fem-enc-btn.grueso { background: #b45309; border-color: #f59e0b; color: #fff; }

/* Ver el mueble abierto (puertas y cajones) */
.opt-vista { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; }
.opt-vista label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-muted); }
.opt-vista input[type="range"] { width: 100%; }
.fem-add-fila { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.fem-add-fila .fem-add-kind { flex: 1 1 auto; min-width: 0; padding: 0.35rem 0.4rem; font-size: 0.72rem; border-radius: 6px; background: #1a2a3a; color: #cbd5e1; border: 1px solid #2a4a6a; }
.fem-add-fila .fem-add-piece-btn { flex: 0 0 auto; margin-top: 0; width: auto; }
.fem-tools-fila { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.fem-tool { padding: 0.3rem 0.5rem; border-radius: 6px; font-size: 0.72rem; background: #1a2a3a; color: #cbd5e1; border: 1px solid #2a4a6a; cursor: pointer; }
.fem-tool.on { background: #1d4ed8; color: #fff; border-color: #60a5fa; }
.fem-tools-fila label { font-size: 0.7rem; color: #94a3b8; display: flex; align-items: center; gap: 4px; }
.fem-tools-fila select { padding: 0.2rem 0.3rem; font-size: 0.7rem; border-radius: 5px; background: #1a2a3a; color: #cbd5e1; border: 1px solid #2a4a6a; }
.fem-tools-hint { margin: 4px 0 0; font-size: 0.65rem; color: #64748b; line-height: 1.35; }
.fem-holguras { margin-top: 5px; font-size: 0.7rem; color: #fde68a; min-height: 0; }
.fem-holguras:empty { display: none; }
.fem-add-fila .fem-add-piece-btn { background: #1d4ed8; color: #fff; border: 1px solid #60a5fa; border-radius: 6px; padding: 0.4rem 0.7rem; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.fem-add-fila .fem-add-piece-btn:hover { background: #2563eb; }
.fem-pieza { margin-top: 8px; padding: 8px; border: 1px solid #2a4a6a; border-radius: 8px; background: #101c2a; }
.fem-pieza-nombre { margin: 0 0 2px; font-size: 0.78rem; font-weight: 700; color: #e2e8f0; }
.fem-pieza-grid { display: grid; grid-template-columns: 42px 1fr 1fr 1fr; gap: 4px; align-items: center; margin: 6px 0; }
.fem-pieza-grid b { font-size: 0.68rem; color: #94a3b8; }
.fem-pieza-grid input { width: 100%; min-width: 0; padding: 0.25rem 0.3rem; font-size: 0.72rem; border-radius: 5px; background: #1a2a3a; color: #e2e8f0; border: 1px solid #2a4a6a; }
.fem-ap-fila { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; font-size: 0.7rem; color: #cbd5e1; margin-bottom: 4px; }
.fem-ap-fila input[type=range] { grid-column: 1 / -1; width: 100%; }
.fem-ap-pct { color: #94a3b8; }
.toast-guardado { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #16a34a; color: #fff; padding: 0.55rem 1.1rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.35); z-index: 99999; }

/* ---- Menú lateral que se oculta, secciones plegables y panel flotante del Studio ---- */
body.sidebar-oculto .sidebar { display: none; }
.btn-sidebar-toggle { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-muted, #94a3b8); font-size: 1.05rem; cursor: pointer; }
.btn-sidebar-toggle:hover { background: rgba(148,163,184,.15); }
.fem-panel { width: 310px; }
.fem-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 3; background: var(--surface); }
.fem-head-t { flex: 1 1 auto; font-size: 0.74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted, #94a3b8); }
.fem-head-btn { width: 28px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-muted, #94a3b8); cursor: pointer; font-size: 0.85rem; }
.fem-head-btn:hover { background: rgba(148,163,184,.15); }
.fem-panel.fem-flotante { position: fixed; z-index: 60; width: 340px; max-height: calc(100vh - 100px); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.fem-panel.fem-flotante .fem-head { cursor: move; border-radius: 10px 10px 0 0; }
.fem-acc { border-bottom: 1px solid var(--border); }
.fem-acc > summary { list-style: none; cursor: pointer; padding: 8px 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted, #94a3b8); user-select: none; }
.fem-acc > summary::-webkit-details-marker { display: none; }
.fem-acc > summary::before { content: '▸'; display: inline-block; width: 14px; }
.fem-acc[open] > summary::before { content: '▾'; }
.fem-acc > summary:hover { color: var(--text, #e2e8f0); }
.fem-back-row { flex-wrap: wrap; }
.stage-tabs { margin-right: auto; }
.sel-muros { margin-left: 8px; padding: 0.3rem 0.5rem; font-size: 0.74rem; border-radius: 6px; background: var(--surface); color: var(--text, #e2e8f0); border: 1px solid var(--border); }

/* Botón de capturar vista (foto para los planos) — mismo tono que sus vecinos en .vp-header (antes era un
   cuadro blanco con emoji, desentonaba con la barra oscura) */
.vp-cap-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 7px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid #2a3f5e;
    border-radius: 4px;
    background: transparent;
    color: #7aaad0;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.vp-cap-btn:hover { color: #64C8FF; border-color: #4a90d9; background: rgba(100,200,255,0.08); }

/* Opciones del mueble en grupos plegables */
.opt-grid.agrupado { display: block; }
.fem-acc.og { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 6px; background: var(--surface); }
.fem-acc.og > summary { display: flex; align-items: center; gap: 6px; padding: 7px 10px; }
.fem-acc.og .og-t { flex: 1 1 auto; }
.fem-acc.og .og-n { font-size: .68rem; font-weight: 700; min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 999px; background: #eef2f7; color: var(--text-muted); }
.fem-acc.og .og-n:empty { display: none; }
.fem-acc.og.og-avisos .og-n { background: #fef3c7; color: #92400e; }
.fem-acc.og.og-avisos > summary { color: #92400e; }
.fem-acc.og > .og-body { padding: 4px 10px 10px; display: grid; gap: 8px; }
.fem-acc.og > .opt-vista, .fem-acc.og > .opt-avisos { padding: 4px 10px 10px; margin: 0; }

/* Panel de Muebles reorganizado: cuerpo con scroll, acción principal fija y secciones plegables */
.panel-muebles { overflow: hidden; }
.panel-muebles .panel-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.panel-muebles .panel-acciones { flex: 0 0 auto; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); box-shadow: 0 -4px 10px rgba(20, 33, 61, .06); }
.panel-acciones .btn-add-furniture { width: 100%; margin: 0; }
.panel-muebles .fem-acc { border-bottom: 1px solid var(--border); }
.panel-muebles .fem-acc > summary { padding: 10px 12px; }
.acc-cuerpo { padding: 2px 12px 12px; }
.acc-cuerpo.acc-opciones { padding-top: 4px; }
.acc-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: #94a3b8; margin-left: 6px; font-size: .7rem; }
.acc-nota { margin: 8px 0 0; font-size: .7rem; color: var(--text-muted); line-height: 1.35; }
.tipo-grupo { margin: 10px 0 5px; font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #94a3b8; }
.tipo-grupo:first-child { margin-top: 0; }
.sp-herramienta { padding: 10px 12px; }
.sp-herramienta .sp-title { margin-bottom: .45rem; }
.sel-bloque { padding: 10px 0 0; }
.sel-bloque > .inspector-empty { margin: 0 12px 10px; }
.sel-cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin: 0 12px 6px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; }
.sel-etiqueta { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #1d4ed8; }
.sel-cabecera .ins-info-label { flex: 1 1 auto; margin: 0; font-weight: 700; color: #1e3a8a; }
.sel-cabecera .btn-edit-furniture { margin: 0; }
.sel-pie { padding: 10px 12px 12px; }
.sel-pie .btn-delete-furniture { width: 100%; }

/* Barra de menús en cascada */
.studio-menubar { display: flex; align-items: stretch; gap: 2px; padding: 0 .75rem; height: 30px; flex-shrink: 0; background: #f8fafc; border-bottom: 1px solid var(--border); position: relative; z-index: 80; }
.mb-menu { position: relative; display: flex; }
.mb-boton { border: 0; background: transparent; font: inherit; font-size: .8rem; color: var(--text); padding: 0 12px; cursor: pointer; border-radius: 6px; margin: 3px 0; }
.mb-boton:hover, .mb-boton.abierto { background: #e2e8f0; color: var(--primary); }
.mb-lista { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 23, 42, .18); }
.mb-lista.abierto { display: block; }
.mb-item { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 6px; font-size: .8rem; color: var(--text); cursor: pointer; white-space: nowrap; }
.mb-item:hover { background: #eef2f7; }
.mb-item.mb-off { color: #a3aebb; cursor: default; }
.mb-item.mb-off:hover { background: transparent; }
.mb-check { width: 16px; text-align: center; color: #1d4ed8; font-weight: 700; }
.mb-t { flex: 1 1 auto; }
.mb-item kbd { font: inherit; font-size: .68rem; color: #94a3b8; padding-left: 18px; }
.mb-flecha { color: #94a3b8; font-size: .7rem; }
.mb-sep { height: 1px; margin: 5px 6px; background: var(--border); }
.mb-grupo { padding: 6px 10px 2px 28px; font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #94a3b8; }
.mb-cascada { display: none; position: absolute; top: -6px; left: 100%; min-width: 210px; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 23, 42, .18); overflow-y: auto; }
.mb-sub:hover > .mb-cascada { display: block; }
.mb-sub.mb-off > .mb-cascada { display: none !important; }
.sel-cabecera .btn-edit-furniture { width: auto; background: #fff; color: #166534; border-color: #86c9a0; }
.sel-cabecera .btn-edit-furniture:hover { background: #f0fdf4; border-color: #4ade80; }