/* beam-studio.css — estilos complementarios para Beam Studio WP Plugin */

/* Aislar del tema WP */
.beam-studio-app {
    font-family: 'DM Sans', 'Inter', sans-serif;
    box-sizing: border-box;
}
.beam-studio-app *, .beam-studio-app *::before, .beam-studio-app *::after {
    box-sizing: border-box;
}

/* Layout principal */
.beam-studio-app .bs-layout {
    display: grid;
    grid-template-rows: 56px 40px 1fr;
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 40px);
    min-height: 600px;
    background: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.admin-bar .beam-studio-app .bs-layout {
    height: calc(100vh - var(--wp-admin--admin-bar--height, 32px) - 40px);
}

/* Header — primer row del grid (56px) */
.beam-studio-app .bs-layout > header {
    overflow: hidden;
    min-height: 0;
}

/* ── COMMAND BAR ── */
.beam-studio-app .bs-cmdbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    background: #fafafa;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 14px;
    gap: 0;
    overflow: hidden;
}
.beam-studio-app .bs-cmdbar-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.beam-studio-app .bs-content {
    display: grid;
    grid-template-columns: 320px 1fr;
    overflow: hidden;
    min-height: 0;
}
.beam-studio-app .bs-sidebar {
    overflow-y: auto;
    height: 100%;
}
.beam-studio-app .bs-main {
    overflow-y: auto;
    height: 100%;
}

/* Canvas de ingreso de viga */
.beam-studio-app #bs-beam-canvas {
    display: block;
    width: 100%;
}

/* Scrollbar custom */
.beam-studio-app .bs-sidebar::-webkit-scrollbar { width: 4px; }
.beam-studio-app .bs-sidebar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }

/* Charts */
.beam-studio-app canvas {
    width: 100% !important;
}

/* Tabla de resultados generada por JS */
.beam-studio-app #bs-results table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.8em;
    margin-bottom: 8px;
}
.beam-studio-app #bs-results td,
.beam-studio-app #bs-results th {
    border: 1px solid #e2e8f0;
    padding: 4px 8px;
    text-align: right;
    color: #374151;
}
.beam-studio-app #bs-results th {
    background: #f8fafc;
    font-weight: 600;
    color: #6b7280;
}
.beam-studio-app #bs-results p {
    font-size: 0.8em;
    color: #374151;
    margin: 4px 0;
}

/* Inputs — reset para que Tailwind funcione bien dentro de WP */
.beam-studio-app input,
.beam-studio-app select,
.beam-studio-app button {
    font-family: 'DM Sans', 'Inter', sans-serif;
}

/* ── TAB NAV — oculto en desktop (la cmdbar hace esa función) ── */
.beam-studio-app .bs-tab-nav {
    display: none;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
/* En mobile (donde la cmdbar tabs están ocultos) se muestra */
@media (max-width: 768px) {
    .beam-studio-app .bs-tab-nav {
        display: flex;
    }
}
.beam-studio-app .bs-tab-btn {
    flex: 1;
    padding: 10px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    text-align: center;
    line-height: 1.3;
}
.beam-studio-app .bs-tab-btn.active {
    color: #1a7a5d;
    border-bottom-color: #1a7a5d;
    background: #fff;
}
.beam-studio-app .bs-tab-btn:hover:not(.active) {
    color: #374151;
}

/* ── TAB PANELS ── */
.beam-studio-app .bs-tab-panel {
    display: none;
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}
.beam-studio-app .bs-tab-panel.active {
    display: block;
}

/* ── BADGE DE ESTADO ── */
.beam-studio-app .bs-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: #e8f3ef;
    color: #1a7a5d;
    margin-left: 4px;
    vertical-align: middle;
}
.beam-studio-app .bs-badge.empty {
    background: #f3f4f6;
    color: #9ca3af;
}

/* ── LISTA DE ÍTEMS (tramos / cargas) ── */
.beam-studio-app .bs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* sin space-y — el espaciado lo maneja margin-bottom en bs-list-item */
}
.beam-studio-app .bs-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    color: #374151;
    margin-bottom: 4px;
}
.beam-studio-app .bs-list-item .bs-remove-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.beam-studio-app .bs-list-item .bs-remove-btn:hover {
    color: #dc2626;
    background: #fee2e2;
}

/* ── BANNER DE ADVERTENCIA ── */
.beam-studio-app .bs-warning-banner {
    background: #fef9c3;
    border: 1px solid #fde047;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 11px;
    color: #854d0e;
    margin-bottom: 8px;
}

/* ── SOLVE BUTTON DISABLED ── */
.beam-studio-app #bs-solve:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── SIDEBAR FLEX COLUMN ── */
.beam-studio-app .bs-sidebar {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}
.beam-studio-app .bs-sidebar-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── RESPONSIVE ── */

/* Tablet + mobile: stack layout vertically */
@media (max-width: 768px) {
    .beam-studio-app .bs-layout {
        grid-template-rows: 48px 36px auto;
        min-height: unset;
        overflow: visible;
        border-radius: 6px;
    }
    .beam-studio-app .bs-cmdbar-tabs,
    .beam-studio-app .bs-cmdbar-sep { display: none; }
    .beam-studio-app .bs-cmdbar { padding: 0 8px; height: 36px; }

    .beam-studio-app .bs-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        overflow: visible;
    }

    .beam-studio-app .bs-sidebar {
        height: auto;
        max-height: none;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        display: block;
    }

    .beam-studio-app .bs-sidebar-inner {
        overflow: visible;
        min-height: unset;
    }

    .beam-studio-app .bs-tab-panel {
        overflow: visible;
    }

    .beam-studio-app .bs-main {
        height: auto;
        overflow: visible;
        padding: 16px;
    }
}

/* ── TAB CARGAS: Inicio / Fin de UDL ── */
.beam-studio-app .bs-load-range-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* ── TAB CARGAS: Posición de carga puntual ── */
.beam-studio-app .bs-pl-position {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: center;
    gap: 6px;
}
.beam-studio-app .bs-pl-pos-label {
    white-space: nowrap;
}
.beam-studio-app .bs-pl-span-sel {
    min-width: 0;
    width: 100%;
}
.beam-studio-app .bs-pl-offset-inp {
    min-width: 0;
    width: 100%;
}

/* En pantallas angostas (sidebar colapsado o mobile): stack vertical */
@media (max-width: 480px) {
    .beam-studio-app .bs-load-range-grid {
        grid-template-columns: 1fr;
    }
    .beam-studio-app .bs-pl-position {
        grid-template-columns: 1fr;
    }
    .beam-studio-app .bs-pl-plus {
        display: none;
    }
    .beam-studio-app .bs-pl-pos-label {
        display: none;  /* "en" desaparece, los campos hablan solos */
    }
}

/* Sidebar ancho fijo: cuando el sidebar tiene ~320px y los selects de texto largo
   se desbordan, forzar stack también en la grilla 4-col de posición PL */
@media (max-width: 768px) and (min-width: 481px) {
    .beam-studio-app .bs-pl-position {
        grid-template-columns: auto 1fr;
        /* "en  [select]" en fila 1, "+ [offset]" en fila 2 */
    }
    .beam-studio-app .bs-pl-plus {
        display: none;
    }
    .beam-studio-app .bs-pl-offset-inp {
        grid-column: 2;
    }
}

/* ── MOBILE ONLY: size adjustments ── */
@media (max-width: 640px) {
    /* Canvas: el JS calcula su altura dinámicamente, no forzar con !important */

    /* Gráficos menos altos en mobile */
    .beam-studio-app .bs-chart-wrap,
    .beam-studio-app .bs-chart-wrap.bs-chart-wrap-def {
        height: 140px !important;
        min-height: 140px !important;
    }

    /* Header más compacto */
    .beam-studio-app header {
        padding: 0 12px;
    }

    .beam-studio-app .bs-header-logo {
        height: 22px;
    }

    .beam-studio-app .bs-header-subtitle {
        display: none;
    }

    /* Ocultar unidades en header en mobile estrecho */
    .beam-studio-app .bs-header-units {
        display: none;
    }

    /* Tabs: font más pequeño */
    .beam-studio-app .bs-tab-btn {
        font-size: 10px;
        padding: 8px 4px;
    }

    /* Resultados: tabla scrolleable en mobile */
    .beam-studio-app #bs-results {
        overflow-x: auto;
    }

    .beam-studio-app #bs-results table {
        min-width: 400px;
    }
}

/* ── Selector visual de sistema de unidades ── */
.beam-studio-app .bs-unit-btn {
    flex: 1;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.4;
}
.beam-studio-app .bs-unit-btn:hover {
    background: #e5e7eb;
    color: #374151;
}
.beam-studio-app .bs-unit-btn.active {
    background: #1a7a5d;
    color: #fff;
    border-color: #1a7a5d;
}

/* ── TOAST NOTIFICATIONS → MODAL CENTRAL ── */
/* Nota: position:fixed — sin prefijo .beam-studio-app */
.bs-toast-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bsFadeIn 0.15s ease;
}
.bs-toast-dialog {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    padding: 22px 26px 18px;
    width: min(420px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: bsSlideUp 0.18s ease;
    font-family: 'DM Sans', 'Inter', sans-serif;
}
.bs-toast-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bs-toast-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
}
.bs-toast-body {
    font-size: 13.5px;
    color: #444;
    line-height: 1.5;
}
.bs-toast-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}
.bs-toast-close-btn {
    padding: 8px 18px;
    border-radius: 7px;
    border: none;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    background: #1a7a5d;
    color: #fff;
    transition: background 0.15s, transform 0.1s;
}
.bs-toast-close-btn:hover { background: #15614a; }
.bs-toast-close-btn:active { transform: scale(0.97); }
.bs-toast-dialog.bs-toast-error { border-left: 4px solid #e63946; }
.bs-toast-dialog.bs-toast-warning { border-left: 4px solid #f59e0b; }
.bs-toast-dialog.bs-toast-success { border-left: 4px solid #16a34a; }

@keyframes bs-toast-out {
    from { opacity: 1; transform: translateX(0); max-height: 80px; margin-bottom: 0; }
    to   { opacity: 0; transform: translateX(20px); max-height: 0; margin-bottom: -8px; }
}

/* ── INLINE FIELD ERRORS ── */
.beam-studio-app .bs-field-error {
    font-size: 11px;
    color: #dc2626;
    margin-top: 3px;
    margin-bottom: 0;
    animation: bs-fade-in 0.2s ease;
}

/* ── SPINNER ── */
.beam-studio-app .bs-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bs-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
    flex-shrink: 0;
}
@keyframes bs-spin {
    to { transform: rotate(360deg); }
}

/* ── FADE IN ── */
.beam-studio-app .bs-fade-in {
    animation: bs-fade-in 0.3s ease forwards;
}
@keyframes bs-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── LIST ITEM ENTER ── */
.beam-studio-app .bs-list-item-enter {
    animation: bs-item-enter 0.2s ease forwards;
}
@keyframes bs-item-enter {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── CHART PLACEHOLDER & FIXED HEIGHT ── */
.bs-chart-wrap {
    position: relative;
    height: 200px;
    min-height: 200px;
}
.bs-chart-wrap.bs-chart-wrap-def {
    height: 160px;
    min-height: 160px;
}
.bs-chart-wrap canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.bs-chart-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #9ca3af;
    background: linear-gradient(180deg, #fafafa, #f3f4f6);
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
}
.bs-chart-wrap.has-data .bs-chart-placeholder {
    display: none;
}

/* ── RESULTS EMPTY STATE ── */
.bs-results-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

/* ── X QUERY PANEL ── */
.bs-x-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: #374151;
}

/* ── TUTORIAL ── */
/* Nota: estos elementos son position:fixed — no necesitan el prefijo .beam-studio-app */
.bs-tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    pointer-events: all;
    background: rgba(0,0,0,0);
    transition: background 0.3s ease;
}
.bs-tutorial-overlay.active {
    background: rgba(0,0,0,0.55);
}

/* Spotlight: borde animado alrededor del elemento resaltado */
.bs-tutorial-spotlight {
    position: fixed;
    z-index: 99991;
    border-radius: 8px;
    box-shadow:
        0 0 0 4px rgba(26,122,93,0.7),
        0 0 0 9999px rgba(0,0,0,0.55);
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    animation: bs-spotlight-pulse 2s ease-in-out infinite;
}
@keyframes bs-spotlight-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(26,122,93,0.7), 0 0 0 9999px rgba(0,0,0,0.55); }
    50%       { box-shadow: 0 0 0 7px rgba(26,122,93,0.4), 0 0 0 9999px rgba(0,0,0,0.55); }
}

/* Tooltip del tutorial */
.bs-tutorial-tooltip {
    position: fixed;
    z-index: 99995;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    font-family: 'DM Sans', 'Inter', sans-serif;
    animation: bs-tooltip-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    overflow: hidden;
}
@keyframes bs-tooltip-in {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.bs-tutorial-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 0;
    position: relative;
    flex-shrink: 0;
}
.bs-tutorial-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.bs-tutorial-title {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.bs-tutorial-x {
    position: absolute;
    right: 10px;
    top: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 14px;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.bs-tutorial-x:hover { color: #374151; background: #f3f4f6; }

.bs-tutorial-desc {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.55;
    padding: 8px 16px 14px;
    margin: 0;
    overflow-y: auto;
    max-height: 220px;
}

.bs-tutorial-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 16px 14px;
    border-top: 1px solid #f3f4f6;
    gap: 10px;
    margin-top: auto;
    flex-shrink: 0;
}

/* Dots de progreso — fila superior centrada */
.bs-tutorial-dots {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}
.bs-tut-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    transition: all 0.2s;
}
.bs-tut-dot.active {
    background: #1a7a5d;
    width: 16px;
    border-radius: 3px;
}

/* Botones del tutorial — fila inferior */
.bs-tutorial-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}
.bs-tut-btn-skip {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-family: 'DM Sans', 'Inter', sans-serif;
    transition: color 0.15s;
}
.bs-tut-btn-skip:hover { color: #6b7280; }
.bs-tut-btn-prev {
    background: none;
    border: 1px solid #d1d5db;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    font-family: 'DM Sans', 'Inter', sans-serif;
    transition: border-color 0.15s, background 0.15s;
}
.bs-tut-btn-prev:hover { border-color: #9ca3af; background: #f9fafb; }
.bs-tut-btn-prev:disabled { opacity: 0.35; cursor: not-allowed; }
.bs-tut-btn-next {
    background: #1a7a5d;
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 6px;
    font-family: 'DM Sans', 'Inter', sans-serif;
    transition: background 0.15s;
}
.bs-tut-btn-next:hover { background: #15614a; }

/* Primer paso — bienvenida con logo grande */
.bs-tutorial-tooltip.bs-tut-welcome {
    text-align: center;
}
.bs-tut-welcome .bs-tutorial-header {
    flex-direction: column;
    align-items: center;
    padding-top: 28px;
    gap: 4px;
}
.bs-tut-welcome .bs-tutorial-title {
    text-align: center;
    font-size: 16px;
}
.bs-tut-welcome .bs-tutorial-desc {
    text-align: center;
}
.bs-tut-welcome-brand {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #1a7a5d;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}
.bs-tut-welcome .bs-tutorial-footer {
    align-items: center;
}
.bs-tut-welcome .bs-tutorial-actions {
    justify-content: center;
}
.bs-tut-welcome .bs-tutorial-dots { display: none; }

/* Responsive */
@media (max-width: 480px) {
    .bs-tutorial-tooltip {
        width: calc(100vw - 24px);
        left: 12px !important;
        right: 12px !important;
    }
}

/* ═══════════════════════════════════════════
   CONFIRM MODAL — position:fixed, sin prefijo
   ═══════════════════════════════════════════ */
.bs-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bsFadeIn 0.15s ease;
}
.bs-confirm-dialog {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    padding: 24px 28px 20px;
    width: min(420px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: bsSlideUp 0.18s ease;
}
.bs-confirm-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bs-confirm-icon {
    font-size: 22px;
    line-height: 1;
}
.bs-confirm-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
}
.bs-confirm-message {
    font-size: 13.5px;
    color: #444;
    margin: 0;
    line-height: 1.5;
}
.bs-confirm-list {
    margin: 0;
    padding: 0 0 0 20px;
    font-size: 13px;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 160px;
    overflow-y: auto;
}
.bs-confirm-list li {
    line-height: 1.4;
}
.bs-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}
.bs-confirm-btn-cancel,
.bs-confirm-btn-ok {
    padding: 8px 18px;
    border-radius: 7px;
    border: none;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.bs-confirm-btn-cancel {
    background: #f0f0f0;
    color: #444;
}
.bs-confirm-btn-cancel:hover {
    background: #e2e2e2;
}
.bs-confirm-btn-ok {
    background: #4361ee;
    color: #fff;
}
.bs-confirm-btn-ok:hover {
    background: #3451d1;
}
.bs-confirm-btn-ok.danger {
    background: #e63946;
}
.bs-confirm-btn-ok.danger:hover {
    background: #c1121f;
}
.bs-confirm-btn-cancel:active,
.bs-confirm-btn-ok:active {
    transform: scale(0.97);
}

@keyframes bsSlideUp {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes bsFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   BEAM STUDIO — Header & Cmdbar Redesign
   ═══════════════════════════════════════════════════════════ */

/* Header layout */
.beam-studio-app .bs-layout > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 16px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 0 0 #f1f5f9;
}

.beam-studio-app .bs-header-brand {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
.beam-studio-app .bs-header-logo {
    height: 30px;
    width: auto;
    object-fit: contain;
    display: block;
}
.beam-studio-app .bs-header-subtitle {
    font-size: 11px;
    color: #6b7280;
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #e2e8f0;
    white-space: nowrap;
}

.beam-studio-app .bs-header-units {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.beam-studio-app .bs-header-unit-label {
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 3px;
}

.beam-studio-app .bs-header-unit-divider {
    width: 1px;
    height: 16px;
    background: #e2e8f0;
    margin: 0 8px;
}

.beam-studio-app .bs-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-left: 16px;
    border-left: 1px solid #e2e8f0;
}

/* Unit buttons en header — override del estilo general */
.beam-studio-app .bs-header-units .bs-unit-btn {
    padding: 0 7px;
    height: 22px;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.beam-studio-app .bs-header-units .bs-unit-btn:hover {
    background: #f1f5f9;
    color: #374151;
}

.beam-studio-app .bs-header-units .bs-unit-btn.active {
    background: #0d1117;
    color: #ffffff;
    font-weight: 700;
}

/* Cmdbar — stepper */
.beam-studio-app .bs-cmdbar {
    background: #fafafa;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 20px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.beam-studio-app .bs-cmdbar-steps {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 2px;
}

.beam-studio-app .bs-step-arrow {
    font-size: 14px;
    color: #d1d5db;
    padding: 0 4px;
    user-select: none;
    line-height: 1;
}

.beam-studio-app .bs-cmdbar .bs-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    height: 100%;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s;
    border-radius: 0;
}

.beam-studio-app .bs-cmdbar .bs-step::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 2px;
    background: #1a7a5d;
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.beam-studio-app .bs-cmdbar .bs-step:hover {
    color: #374151;
    background: transparent;
}

.beam-studio-app .bs-cmdbar .bs-step.active {
    color: #0d1117;
    font-weight: 700;
}

.beam-studio-app .bs-cmdbar .bs-step.active::after {
    transform: scaleX(1);
}

.beam-studio-app .bs-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    background: #e2e8f0;
    color: #6b7280;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    line-height: 1;
}

.beam-studio-app .bs-cmdbar .bs-step.active .bs-step-num {
    background: #1a7a5d;
    color: #ffffff;
}

.beam-studio-app .bs-step-label {
    line-height: 1;
}

/* SOLVE + RESET en cmdbar */
.beam-studio-app .bs-cmdbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.beam-studio-app .bs-cmdbar-solve {
    padding: 0 18px;
    height: 30px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #1a7a5d 0%, #15a06a 100%);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(26, 122, 93, 0.3), 0 2px 8px rgba(26, 122, 93, 0.2);
    transition: box-shadow 0.15s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.beam-studio-app .bs-cmdbar-solve:hover:not(:disabled) {
    box-shadow: 0 2px 4px rgba(26, 122, 93, 0.4), 0 4px 16px rgba(26, 122, 93, 0.3);
    transform: translateY(-1px);
}

.beam-studio-app .bs-cmdbar-solve:active:not(:disabled) {
    transform: translateY(0);
}

.beam-studio-app .bs-cmdbar-solve:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    background: #e2e8f0;
    color: #94a3b8;
    transform: none;
}

.beam-studio-app .bs-cmdbar-reset {
    padding: 0 14px;
    height: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: transparent;
    color: #94a3b8;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.beam-studio-app .bs-cmdbar-reset:hover {
    color: #ef4444;
    border-color: #fca5a5;
    background: #fef2f2;
}

/* Legacy — subtítulo con separador (clases Tailwind residuales) */
.beam-studio-app .bs-layout > header .text-xs.text-gray-400,
.beam-studio-app .bs-layout > header .text-sm.text-gray-400 {
    font-size: 11px;
    color: #94a3b8;
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #e2e8f0;
}


/* Tutorial btn refinado */
.beam-studio-app #bs-tutorial-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.beam-studio-app #bs-tutorial-btn:hover {
    border-color: #1a7a5d;
    color: #1a7a5d;
    background: #f0fdf4;
}

@media (prefers-reduced-motion: reduce) {
    .bs-tutorial-spotlight { animation: none; }
    .bs-tutorial-tooltip { animation: none; }
    .bs-spinner { animation-duration: 1.5s; }
}