/* Estilos para Ender-3 V3 SE - AI Slicing Studio */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --bg-main: #0b0f19;
    --bg-card: #131b2e;
    --bg-card-hover: #19243d;
    --bg-input: #0e1526;
    --border-color: #23304e;
    --border-highlight: #38bdf8;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent-cyan: #38bdf8;
    --accent-blue: #3b82f6;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-rose: #f43f5e;
    --accent-purple: #a855f7;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hidden {
    display: none !important;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Header */
.app-header {
    background: linear-gradient(180deg, #131b2e 0%, #0b0f19 100%);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(8px);
}

.brand-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-logo-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: #ffffff;
    padding: 3px;
    box-shadow: 0 0 15px rgba(2, 132, 199, 0.4);
}

.brand-title {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-title-main {
    color: #38bdf8;
}

.brand-title-sub {
    color: #ffffff;
    font-weight: 600;
}

/* Versioning Controls */
.version-control-box {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.version-selector-group {
    display: flex;
    align-items: center;
    background: #1e293b;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.version-btn-step {
    background: transparent;
    border: none;
    color: var(--accent-cyan);
    font-weight: 700;
    font-size: 1rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.version-btn-step:hover {
    background: rgba(56, 189, 248, 0.2);
}

.version-display {
    padding: 4px 10px;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: #f1f5f9;
    min-width: 44px;
    text-align: center;
}

.version-preview-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #070a12;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}

.version-preview-item {
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.version-preview-item strong {
    color: var(--accent-cyan);
}

.badge-tag {
    font-size: 0.68rem;
    padding: 2px 7px;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: var(--accent-cyan);
    border-radius: 9999px;
    font-weight: 600;
}

.brand-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

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

/* Main Grid Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: 350px 1fr 460px;
    gap: 16px;
    padding: 12px 18px;
    flex: 1;
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 1025px) {
    body {
        height: 100vh;
        overflow: hidden;
    }

    .dashboard-grid {
        height: calc(100vh - 66px);
        min-height: 0;
        overflow: hidden;
    }

    .col-left, .col-right {
        max-height: 100%;
        overflow-y: auto;
        min-height: 0;
        padding-right: 8px;
    }

    .col-left::-webkit-scrollbar,
    .col-right::-webkit-scrollbar {
        width: 6px;
    }
    .col-left::-webkit-scrollbar-track,
    .col-right::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }
    .col-left::-webkit-scrollbar-thumb,
    .col-right::-webkit-scrollbar-thumb {
        background: rgba(56, 189, 248, 0.25);
        border-radius: 4px;
    }
    .col-left::-webkit-scrollbar-thumb:hover,
    .col-right::-webkit-scrollbar-thumb:hover {
        background: rgba(56, 189, 248, 0.5);
    }

    .viewer-card {
        height: 100%;
        min-height: 0;
    }
}

/* Notebooks Full HD con zoom de Windows al 125% (ancho viewport efectivo ~1536px) */
@media (max-width: 1620px) {
    .dashboard-grid {
        grid-template-columns: 280px 1fr 380px;
        gap: 12px;
        padding: 10px 14px;
    }
    .panel-card {
        padding: 12px;
        gap: 10px;
    }
}

/* Notebooks de 1366px / 1440px o zoom compacto */
@media (max-width: 1366px) {
    .dashboard-grid {
        grid-template-columns: 260px 1fr 340px;
        gap: 10px;
        padding: 8px 12px;
    }
}

/* Tablets o ventanas estrechas */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 260px 1fr;
        gap: 10px;
        padding: 8px 10px;
    }
    .col-right {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        padding: 8px;
    }
    .col-right {
        grid-column: span 1;
    }
}

/* Notebooks con altura reducida (<=820px por barras de Windows y pestañas) */
@media (max-height: 820px) {
    .app-header {
        padding: 6px 16px;
    }
    .brand-logo-img {
        width: 32px;
        height: 32px;
    }
    .brand-title {
        font-size: 1.05rem;
    }
    .dashboard-grid {
        padding: 8px 12px;
        gap: 10px;
    }
    .panel-card {
        padding: 12px;
        gap: 10px;
    }
    .viewer-card {
        min-height: 380px;
    }
    .model-stats-bar {
        padding: 4px 8px;
        font-size: 0.72rem;
    }
}

/* Cards */
.panel-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.panel-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

/* Nozzle Alert Banner */
.nozzle-banner {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(56, 189, 248, 0.1) 100%);
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: pulseBorder 3s infinite;
}

@keyframes pulseBorder {
    0%, 100% { border-color: rgba(168, 85, 247, 0.35); }
    50% { border-color: rgba(56, 189, 248, 0.6); }
}

.nozzle-banner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 0.88rem;
    color: #f3e8ff;
}

.nozzle-banner-desc {
    font-size: 0.74rem;
    color: #cbd5e1;
    line-height: 1.35;
}

/* Form Controls */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
}

.form-control, .form-select, .form-textarea {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 0.88rem;
    outline: none;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-control:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.form-textarea {
    resize: vertical;
    min-height: 75px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);
    transform: translateY(-1px);
}

.btn-success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-success:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    transform: translateY(-1px);
}

.btn-secondary {
    background: #1e293b;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: #334155;
}

.btn-outline-cyan {
    background: transparent;
    color: var(--accent-cyan);
    border: 1px solid rgba(56, 189, 248, 0.4);
}

.btn-outline-cyan:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: var(--accent-cyan);
}

.btn-sm {
    padding: 5px 10px;
    font-size: 0.78rem;
}

/* Objective Buttons Grid */
.objective-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.objective-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.objective-btn:hover {
    background: var(--bg-card-hover);
    border-color: #3b82f6;
}

.objective-btn.active {
    background: rgba(56, 189, 248, 0.12);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.objective-name {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-primary);
}

.objective-desc {
    font-size: 0.70rem;
    color: var(--text-secondary);
}

.objective-btn[data-objective="hollow"] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
    border: 1px solid rgba(236, 72, 153, 0.35);
}

.objective-btn[data-objective="hollow"]:hover {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.16) 0%, rgba(168, 85, 247, 0.16) 100%);
    border-color: #ec4899;
}

.objective-btn[data-objective="hollow"].active {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.22) 0%, rgba(168, 85, 247, 0.22) 100%);
    border-color: #ec4899;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.3);
}

.btn-hollow-easy {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
    border: 1px solid rgba(236, 72, 153, 0.6);
    color: #f472b6;
    font-weight: 700;
    transition: all 0.2s ease;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.15);
}

.btn-hollow-easy:hover {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.35) 0%, rgba(168, 85, 247, 0.35) 100%);
    border-color: #ec4899;
    color: #fff;
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.35);
    transform: translateY(-1px);
}

/* Diagnostic Checkboxes */
.diagnostic-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: var(--bg-input);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.diag-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.80rem;
    cursor: pointer;
}

.diag-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--accent-cyan);
    cursor: pointer;
}

/* 3D Viewer Container */
.viewer-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 520px;
    position: relative;
    padding: 0;
    overflow: hidden;
}

.viewer-header-stack {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 40;
    pointer-events: none;
}

.viewer-header-stack > * {
    pointer-events: auto;
}

.viewer-toolbar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 6px 10px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.viewer-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.viewer-toolbar-row.tools-row {
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 5px;
}

.toolbar-btn-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-voronoi-tab {
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid #10b981;
    color: #34d399;
    font-weight: 600;
}

.btn-voronoi-tab:hover {
    background: rgba(16, 185, 129, 0.32);
    border-color: #34d399;
    color: #fff;
}

.btn-split-tab {
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid #f59e0b;
    color: #fbbf24;
    font-weight: 600;
}

.btn-split-tab:hover {
    background: rgba(245, 158, 11, 0.32);
    border-color: #fbbf24;
    color: #fff;
}

.canvas-container {
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
    background: radial-gradient(circle at center, #172033 0%, #0b0f19 100%);
    cursor: grab;
}

.canvas-container:active {
    cursor: grabbing;
}

/* Dropzone Overlay (Tarjeta flotante centrada de alta estética) */
.dropzone-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 440px;
    padding: 24px 20px;
    background: rgba(15, 23, 42, 0.85);
    border: 2px dashed rgba(56, 189, 248, 0.65);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 25;
    transition: all 0.25s ease;
    cursor: pointer;
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), 0 0 25px rgba(56, 189, 248, 0.15);
    text-align: center;
}

.dropzone-overlay:hover {
    background: rgba(15, 23, 42, 0.94);
    border-color: #38bdf8;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 35px rgba(56, 189, 248, 0.28);
    transform: translate(-50%, -52%);
}

.dropzone-overlay.hidden {
    display: none !important;
}

.drop-icon {
    font-size: 40px;
    color: var(--accent-cyan);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Model Info Stats */
.model-stats-bar {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 12px;
    display: flex;
    justify-content: space-around;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    z-index: 30;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.stat-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-cyan);
    font-family: 'JetBrains Mono', monospace;
}

/* Inspector Tabs (TODO LO OTRO) */
.inspector-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    padding-bottom: 2px;
}

.inspector-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.inspector-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.inspector-tab-btn.active {
    color: var(--accent-cyan);
    background: var(--bg-input);
    border-bottom: 2px solid var(--accent-cyan);
}

/* Inspector Content Section */
.inspector-panel {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 250px;
    overflow-y: auto;
}

.param-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.80rem;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.param-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.param-row-label {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.param-row-val {
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}

.param-row-val.highlight-cyan {
    color: var(--accent-cyan);
}

.param-row-val.highlight-emerald {
    color: var(--accent-emerald);
}

.param-row-val.highlight-purple {
    color: var(--accent-purple);
}

/* Volumetric Flow Meter */
.flow-meter-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 12px;
}

.flow-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.80rem;
    margin-bottom: 5px;
}

.progress-bar-bg {
    height: 7px;
    background: #1e293b;
    border-radius: 9999px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    width: 60%;
    background: linear-gradient(90deg, #10b981 0%, #38bdf8 80%, #f43f5e 100%);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* AI Reasons List */
.reasons-box {
    background: rgba(56, 189, 248, 0.05);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 0.78rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 120px;
    overflow-y: auto;
}

.reason-item {
    color: #cbd5e1;
    line-height: 1.35;
}

/* Code Preview Tabs */
.tabs-nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 5px 10px;
    font-size: 0.76rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    color: var(--accent-cyan);
    border-bottom-color: var(--accent-cyan);
}

.code-preview {
    background: #070a12;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: #93c5fd;
    max-height: 130px;
    overflow-y: auto;
    white-space: pre;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
}

.modal-overlay.hidden {
    display: none;
}

.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Status Toasts */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}

.toast {
    background: #1e293b;
    border-left: 4px solid var(--accent-cyan);
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    font-size: 0.85rem;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ====================================================================
   Taller de Escalado, Corte y Multi-Cama
   ==================================================================== */
.splitter-panel {
    background: #0c111d;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.25s ease;
}

.splitter-panel.hidden {
    display: none;
}

.splitter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    padding-bottom: 8px;
}

.splitter-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 8px;
}

.splitter-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.splitter-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-cyan);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scale-presets-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.scale-btn {
    background: #1e293b;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.scale-btn:hover, .scale-btn.active {
    background: rgba(56, 189, 248, 0.15);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.dimension-inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 8px;
    align-items: flex-end;
}

.dim-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dim-field label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.dim-field input {
    background: #090d16;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: 0.8rem;
    width: 100%;
}

.connector-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.connector-card {
    background: #111827;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.connector-card:hover {
    border-color: var(--accent-emerald);
}

.connector-card.active {
    background: rgba(16, 185, 129, 0.12);
    border-color: var(--accent-emerald);
}

.connector-card-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.connector-card.active .connector-card-title {
    color: var(--accent-emerald);
}

.connector-card-desc {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.25;
}

/* Camas de Salida y Visor Multi-Cama */
.bed-views-nav {
    display: flex;
    gap: 6px;
    background: #090d16;
    padding: 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    overflow-x: auto;
}

.bed-view-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.bed-view-btn.active {
    background: #1e293b;
    color: var(--accent-cyan);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.beds-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.bed-summary-card {
    background: #0c1220;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px;
    font-size: 0.72rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bed-summary-title {
    font-weight: 600;
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.oversize-banner {
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(245, 158, 11, 0.6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #fbbf24;
    backdrop-filter: blur(8px);
    animation: fadeIn 0.25s ease;
}

.oversize-banner.hidden {
    display: none;
}

/* Modal de Arquitectura Online */
.modal-box-large {
    max-width: 720px;
    width: 95%;
}

.arch-points-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.arch-point-item {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
}

.arch-point-title {
    font-weight: 600;
    color: var(--accent-cyan);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Modal / Floating Side-Dock del Taller de Escalado, Corte y Multi-Cama */
.modal-overlay#modal-splitter {
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 60px 18px 18px 18px;
    z-index: 95;
}

.modal-overlay#modal-splitter .modal-box-splitter {
    pointer-events: auto;
    width: 480px;
    max-width: 95vw;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: rgba(13, 19, 34, 0.96);
    border: 1px solid rgba(245, 158, 11, 0.55);
    border-radius: var(--radius-lg);
    box-shadow: -10px 15px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(245, 158, 11, 0.18);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    backdrop-filter: blur(14px);
    animation: slideInRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 960px) {
    .modal-overlay#modal-splitter {
        background: rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(4px);
        pointer-events: auto;
        justify-content: center;
        align-items: center;
        padding: 14px;
    }
    .modal-overlay#modal-splitter .modal-box-splitter {
        width: 95%;
        max-height: 90vh;
    }
}

.modal-header-splitter {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(245, 158, 11, 0.25);
    padding-bottom: 12px;
}

.splitter-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 8px;
}

.splitter-modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Scrollbar estilizada para el modal */
.modal-box-splitter::-webkit-scrollbar {
    width: 8px;
}

.modal-box-splitter::-webkit-scrollbar-track {
    background: #080d1a;
    border-radius: 4px;
}

.modal-box-splitter::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.3);
    border-radius: 4px;
}

.modal-box-splitter::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.6);
}

/* Ajustes amplios para evitar solapamientos */
.dimension-inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: flex-end;
}

@media (max-width: 640px) {
    .dimension-inputs-row {
        grid-template-columns: 1fr 1fr;
    }
    .connector-choice-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================
   TALLER VORONOI 3D (HUD PANEL FLOTANTE Y CONTROLES)
   ======================================================== */
.voronoi-hud-card {
    position: absolute;
    top: 56px;
    left: 12px;
    width: 320px;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 70px);
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(16, 185, 129, 0.45);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 18px rgba(16, 185, 129, 0.18);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    backdrop-filter: blur(12px);
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: fadeInSlide 0.2s ease-out;
}

.voronoi-hud-card::-webkit-scrollbar {
    width: 5px;
}
.voronoi-hud-card::-webkit-scrollbar-track {
    background: rgba(11, 15, 25, 0.4);
    border-radius: 4px;
}
.voronoi-hud-card::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.45);
    border-radius: 4px;
}
.voronoi-hud-card::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.8);
}

.voronoi-hud-card.collapsed {
    max-height: 48px;
    overflow: hidden;
    width: 260px;
}
.voronoi-hud-card.collapsed .voronoi-hud-body {
    display: none;
}
.voronoi-hud-card.collapsed .voronoi-hud-header {
    border-bottom: none;
    padding-bottom: 0;
}

.voronoi-hud-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.voronoi-hud-card.hidden {
    display: none !important;
}

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.voronoi-hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(16, 185, 129, 0.25);
    padding-bottom: 8px;
}

.btn-icon-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s;
    line-height: 1;
}
.btn-icon-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.voronoi-mode-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.voronoi-mode-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.voronoi-mode-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}
.voronoi-mode-btn.active {
    background: rgba(16, 185, 129, 0.22);
    color: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.voronoi-status-badge {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 0.74rem;
    color: var(--accent-cyan);
    line-height: 1.35;
}

.voronoi-controls-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.voronoi-control-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.voronoi-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.voronoi-val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #34d399;
}

.voronoi-slider {
    width: 100%;
    accent-color: #10b981;
    cursor: pointer;
    height: 5px;
}

.voronoi-nozzle-tip {
    background: rgba(245, 158, 11, 0.1);
    border: 1px dashed rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: 0.72rem;
    color: #fbbf24;
    line-height: 1.35;
}

.voronoi-actions-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

/* ==========================================================================
   COLUMNA DERECHA COLAPSABLE / VISOR EXPANDIDO
   ========================================================================== */

.dashboard-grid.col-right-collapsed {
    grid-template-columns: 350px 1fr 0px;
    transition: grid-template-columns 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-grid.col-right-collapsed .col-right {
    display: none !important;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 0;
}

.dashboard-grid.col-right-collapsed .viewer-card {
    grid-column: 2 / span 2;
    min-width: 0;
}

@media (max-width: 1620px) {
    .dashboard-grid.col-right-collapsed {
        grid-template-columns: 280px 1fr 0px;
    }
}

@media (max-width: 1366px) {
    .dashboard-grid.col-right-collapsed {
        grid-template-columns: 260px 1fr 0px;
    }
}

@media (max-width: 1024px) {
    .dashboard-grid.col-right-collapsed {
        grid-template-columns: 260px 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-grid.col-right-collapsed {
        grid-template-columns: 1fr;
    }
}

/* Solapa flotante para reabrir inspector cuando la columna está colapsada */
.dock-expand-sidebar {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid var(--accent-cyan);
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: -4px 0 16px rgba(6, 182, 212, 0.25);
    z-index: 50;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.dock-expand-sidebar:hover {
    background: rgba(6, 182, 212, 0.2);
    border-color: #38bdf8;
    color: #fff;
    padding-left: 12px;
}

.dock-expand-sidebar.hidden {
    display: none !important;
}

.dock-expand-sidebar .dock-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--accent-cyan);
}

/* ==========================================================================
   CARTEL DE ANUNCIOS HIPERLOCALES DE INSUMOS 3D
   ========================================================================== */

/* ==========================================================================
   CARTEL PUBLICITARIO CON IMAGEN EN COLUMNA DERECHA
   ========================================================================== */

.ad-card-right {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.92) 100%);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(56, 189, 248, 0.08);
    transition: all 0.25s ease;
}

.ad-card-right:hover {
    border-color: rgba(56, 189, 248, 0.65);
    box-shadow: 0 6px 25px rgba(6, 182, 212, 0.2);
}

.ad-card-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.ad-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.70rem;
    font-weight: 700;
    color: var(--accent-cyan);
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 2px 8px;
    border-radius: 4px;
}

.ads-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: adsPulse 2s infinite;
}

@keyframes adsPulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}

.ad-sponsor-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.ad-media-box {
    position: relative;
    width: 100%;
    height: 135px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.ad-banner-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.ad-card-right:hover .ad-banner-media {
    transform: scale(1.03);
}

.ad-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(11, 15, 25, 0.92) 100%);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 8px 10px;
}

.ad-shop-overlay-title {
    color: #fff;
    font-size: 0.90rem;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.ad-rent-tag {
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.9);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.ad-content-box {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 6px 10px;
}

.ad-promo-highlight {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.35;
    margin: 0;
}

.ad-action-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.btn-ad-rent {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.80rem;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    text-align: center;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-ad-rent:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
    transform: translateY(-1px);
}

.ad-secondary-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn-ad-chat-shop {
    background: #25d366;
    color: #000 !important;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 5px 10px;
    border-radius: 6px;
    border: none;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.btn-ad-chat-shop:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.ads-nav-arrows {
    display: flex;
    gap: 3px;
}

.btn-ad-arrow {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.btn-ad-arrow:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.ad-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 6px;
    font-size: 0.70rem;
}

.ad-footer-callout {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.select-ad-zone {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.70rem;
    padding: 2px 6px;
}

/* Modal de Planes Publicitarios */
.ad-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ad-plan-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.ad-plan-card:hover {
    border-color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.05);
}

.ad-plan-card.active {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.2);
}

.ad-plan-badge {
    align-self: flex-start;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.ad-plan-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.ad-plan-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: #10b981;
    margin: 2px 0;
}

.ad-plan-period {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}

.ad-plan-desc {
    font-size: 0.74rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

.ad-preview-box {
    background: rgba(15, 23, 42, 0.95);
    border: 1px dashed var(--accent-cyan);
    border-radius: 8px;
    padding: 10px 12px;
}

.ad-preview-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-cyan);
}



/* Responsive studio and native accessible advertisement dialogs. */
:root:not(.dark){--bg-main:#f7f9fc;--bg-card:#fff;--bg-card-hover:#eef4fb;--bg-input:#fff;--border-color:#cbd8e8;--text-primary:#172b43;--text-secondary:#475d78;--text-muted:#526782;--accent-cyan:#0369a1;--accent-emerald:#087b59;--shadow-card:0 8px 24px #172b4310;color-scheme:light}.dark{color-scheme:dark}.dashboard-grid{min-width:0;grid-template-columns:minmax(0,320px) minmax(0,1fr) minmax(0,350px)}.dashboard-grid.col-right-collapsed{grid-template-columns:minmax(0,320px) minmax(0,1fr) 0}.dashboard-grid>*{min-width:0;max-width:100%}pre,.code-preview{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;overflow-x:auto}.app-header{flex-wrap:wrap;gap:12px}.brand-wrapper,.brand-title{min-width:0;flex-wrap:wrap}.btn,button,input,select{min-height:44px}input,select,textarea{max-width:100%}.live-ads{padding:18px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-card);color:var(--text-primary);min-width:0}.live-ads small{color:var(--text-muted);font-weight:700;letter-spacing:.08em}.live-ads p{margin:12px 0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}.live-ads img{width:100%;max-height:230px;object-fit:contain;border-radius:10px}.live-ad-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.live-ad-actions input{width:140px;padding:10px;border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-primary);border-radius:8px}.live-ad-dialog{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color);border-radius:16px;padding:24px;margin:auto;width:calc(100% - 24px);max-width:650px;max-height:90dvh;overflow-y:auto}.live-ad-dialog::backdrop{background:#071528aa}.live-ad-dialog h2,.live-ad-dialog h3,.live-ad-dialog p{margin:14px 0}.live-location-map{height:300px;margin:14px 0;border:1px solid var(--border-color);border-radius:10px;z-index:0}:root:not(.dark) .code-viewer,:root:not(.dark) .inspector-content{color:var(--text-primary);background:var(--bg-card)}.modal-box{max-height:90dvh;overflow:auto}.modal-overlay{padding:12px}#canvas-3d{min-width:0;max-width:100%}@media(max-width:1100px){.dashboard-grid,.dashboard-grid.col-right-collapsed{grid-template-columns:minmax(0,280px) minmax(0,1fr)}.dashboard-grid>*:last-child{grid-column:1/-1}}@media(max-width:700px){.dashboard-grid,.dashboard-grid.col-right-collapsed{grid-template-columns:minmax(0,1fr)}.dashboard-grid>*:last-child{grid-column:auto}.app-header{padding:12px}.brand-title{font-size:20px}.brand-logo-img{max-width:120px}.live-ad-actions button{flex:1 1 130px}.live-ad-dialog{padding:18px}.live-location-map{height:260px}#canvas-3d{min-height:320px}pre{font-size:11px}}

:root:not(.dark) .app-header{background:linear-gradient(180deg,#fff,#f7f9fc)}
:root:not(.dark) .brand-title-sub,:root:not(.dark) .btn-secondary{color:var(--text-primary)}
:root:not(.dark) .btn-secondary,:root:not(.dark) .preset-preview-container,:root:not(.dark) .code-preview{background:#f1f5fb;border-color:var(--border-color)}
:root:not(.dark) .viewer-toolbar{background:#fff;border-color:var(--border-color)}
:root:not(.dark) .inspector-tab-btn,:root:not(.dark) .inspector-row{color:var(--text-primary)}
@media(max-width:1100px){body{height:auto;overflow-y:auto}.dashboard-grid{height:auto;overflow:visible}.col-left,.col-right{max-height:none;overflow:visible}.viewer-card{min-height:480px}}
@media(max-width:700px){.viewer-card{order:-1;min-height:440px}.app-header{position:relative}.dashboard-grid{padding:8px}.dimension-inputs-row{grid-template-columns:1fr 1fr}.brand-subtitle{font-size:11px}.dropzone-content{max-width:100%;padding:16px}.viewer-toolbar{position:relative}}

:root:not(.dark) .reason-item,:root:not(.dark) .nozzle-banner-header,:root:not(.dark) .nozzle-banner-desc{color:var(--text-primary)}
:root:not(.dark) .preview-name-box,:root:not(.dark) .version-control-box,:root:not(.dark) .version-btn,:root:not(.dark) .scale-btn,:root:not(.dark) .voronoi-mode-btn,:root:not(.dark) .splitter-section,:root:not(.dark) .voronoi-hud{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--border-color)}
.dropzone-overlay{color:#f1f5f9}.dropzone-overlay p{color:#cbd5e1}.viewer-stats{color:#cbd5e1}
:root:not(.dark) .toast{background:#fff;color:var(--text-primary)}
@media(max-width:700px){.viewer-card .viewer-toolbar{flex-wrap:wrap}.viewer-card .viewer-toolbar>div{flex-wrap:wrap}.dimension-inputs-row input{min-width:0}.modal-box{width:100%;padding:16px}}

:root:not(.dark) .version-display{color:var(--text-primary)}:root:not(.dark) .version-preview-list{background:#f1f5fb}.dropzone-overlay [style*="color:"]{color:#cbd5e1!important}

.voronoi-hud-card{top:var(--pd-toolbar-bottom,128px);max-height:calc(100% - var(--pd-toolbar-bottom,128px) - 12px);z-index:45}
:root:not(.dark) .voronoi-hud-card{background:#fff;color:var(--text-primary);border-color:#87baa9}
@media(max-width:700px){.voronoi-hud-card{position:fixed;top:auto;bottom:12px;left:12px;width:calc(100% - 24px);max-width:none;max-height:68dvh;z-index:80}.voronoi-hud-card.collapsed{max-height:64px}}

.voronoi-hud-header{position:sticky;top:-1px;background:var(--bg-card);z-index:5}.btn-icon-close,#btn-voronoi-undo{min-width:44px;min-height:44px}.voronoi-hud-card{scroll-padding-top:72px}

/* Advertiser invitation: graphic first, location controls secondary. */
.ad-promo{display:block;width:100%;padding:0;margin:14px 0 0;overflow:hidden;text-align:left;border:1px solid #237daf;border-radius:14px;background:#102849;color:#fff;cursor:pointer;font-family:inherit;transition:transform .18s,border-color .18s}
.ad-promo:hover{border-color:#7dd3fc;transform:translateY(-2px)}
.ad-promo:focus-visible,.ad-discovery summary:focus-visible{outline:3px solid var(--accent-cyan);outline-offset:4px}
.live-ads .ad-promo img{display:block;width:100%;height:auto;max-height:none;object-fit:cover;border-radius:0}
.ad-promo-copy{display:grid;gap:10px;padding:0 19px 20px;background:linear-gradient(180deg,#075985,#102849)}
.ad-promo-copy strong{color:#fff;font-size:23px;line-height:1.15;letter-spacing:-.03em}
.ad-promo-copy>span{font-size:13px;line-height:1.5;color:#d5f3ff}
.ad-promo-copy .ad-promo-badge{font-size:11px;font-weight:700;letter-spacing:.02em;color:#a5edff}
.ad-promo-copy .ad-promo-cta{display:flex;align-items:center;justify-content:center;min-height:46px;margin-top:4px;border-radius:9px;background:#38bdf8;color:#082f49;font-size:13px;font-weight:800}
.ad-discovery{margin-top:14px;border-top:1px solid var(--border-color)}
.ad-discovery summary{padding:12px 0;min-height:44px;cursor:pointer;font-size:12px;font-weight:600;color:var(--text-secondary)}
.ad-discovery .live-ad-actions{margin:0}.ad-discovery .btn{font-size:12px;padding:8px 10px}
.ad-plans-dialog{max-width:780px;padding:28px}
.ad-plans-dialog h2{font-size:26px;letter-spacing:-.03em;line-height:1.2}
.ad-plans-intro{color:var(--text-secondary);line-height:1.65;font-size:14px}
.ad-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.ad-plan{border:1px solid var(--border-color);border-radius:12px;padding:18px;background:var(--bg-card-hover);min-width:0}
.ad-plan:first-child{border-color:var(--accent-cyan)}
.ad-plan h3{font-size:16px;margin:0 0 18px}
.ad-plan-price{display:block;font-size:25px;letter-spacing:-.04em;color:var(--text-primary);overflow-wrap:anywhere}
.ad-plan small{display:block;color:var(--text-muted);margin-top:4px;font-size:11px}
.ad-plan p{font-size:12px;line-height:1.6;color:var(--text-secondary);margin:12px 0 0}
.ad-plans-dialog>p[role=status]{font-size:12px;line-height:1.6;color:var(--text-muted);margin:20px 0}
.ad-plans-contact{display:flex;width:100%;min-height:48px;justify-content:center;text-align:center;white-space:normal}
@media(max-width:600px){.ad-plan-grid{grid-template-columns:1fr}.ad-plan{padding:16px}.ad-plan h3{margin-bottom:8px}.ad-plans-dialog{padding:20px}.ad-plans-dialog h2{font-size:23px}.ad-plan-price{font-size:26px}}
@media(prefers-reduced-motion:reduce){.ad-promo{transition:none}.ad-promo:hover{transform:none}}

/* One scroll container: the inspector must never collapse under the ad. */
.col-right>*{flex-shrink:0}
.col-right .inspector-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:6px;border-bottom:0;padding-bottom:0}
.col-right .inspector-tab-btn{white-space:normal;min-height:44px;border:1px solid var(--border-color);border-radius:8px;line-height:1.3}
.col-right .inspector-panel{min-height:180px;max-height:none;overflow:visible}
.ad-promo[hidden]{display:none}
.live-ads button[hidden]{display:none}
.ad-plans-dialog>button{position:sticky;top:0;z-index:2;background:var(--bg-card)}
.ad-location{margin-top:12px;border-top:1px solid var(--border-color)}
.ad-location .live-ad-actions{margin:10px 0;gap:6px}
.ad-location .btn{font-size:11px;padding:8px;flex:1;white-space:normal}
.ad-location p{font-size:11px;color:var(--text-secondary)}
.ad-plan .btn{width:100%;margin-top:16px;font-size:12px;white-space:normal}
.ad-request-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border-top:1px solid var(--border-color);padding-top:24px;margin-top:24px}
.ad-request-form>h3,.ad-request-form>p,.ad-request-map,.ad-request-preview,.ad-request-form>button{grid-column:1/-1}
.ad-request-form>h3{margin:0;font-size:20px}.ad-request-form>p{margin:0;font-size:13px;line-height:1.6;color:var(--text-secondary)}
.ad-request-form label{display:grid;gap:8px;font-size:12px;line-height:1.5;color:var(--text-secondary);min-width:0}
.ad-request-form input,.ad-request-form select,.ad-request-form textarea{width:100%;min-width:0;padding:10px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-input);color:var(--text-primary);font:inherit;min-height:44px}
.ad-request-form .ad-request-map{height:320px;margin:0}.ad-request-preview{max-height:180px;width:100%;object-fit:contain}
.ad-plans-dialog{scroll-padding-top:20px}.ad-plan small,.ad-plans-dialog>p[role=status]{color:var(--text-secondary)}
@media(max-width:600px){.ad-request-form{grid-template-columns:minmax(0,1fr)}.ad-request-form .ad-request-map{height:280px}.ad-plan-grid{gap:10px}}

/* Guided advertiser setup, using the same theme variables as the CRM. */
.ad-plans-dialog{padding:0;max-width:900px;overflow-x:hidden}
.ad-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:3;background:var(--bg-card);border-bottom:1px solid var(--border-color);padding:18px 24px}
.ad-dialog-head h2{margin:0;font-size:23px}.ad-dialog-head button{flex-shrink:0}
.ad-plans-intro{padding:0 24px}.ad-plans-dialog>.ad-plans-contact{margin:0;padding:16px 24px;color:var(--accent-cyan);font-size:13px;border-top:1px solid var(--border-color);text-decoration:underline}
.ad-request-form{display:block;border:0;margin:0;padding:0 24px 20px}
.ad-step-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0 24px}
.ad-step-progress span{font-size:13px;padding:12px 8px;text-align:center;border-bottom:3px solid var(--border-color);color:var(--text-secondary)}
.ad-step-progress .current{border-color:var(--accent-cyan);color:var(--text-primary);font-weight:700}
.ad-wizard-step{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0}
.ad-wizard-step[hidden],.ad-wizard-actions button[hidden],.ad-request-form .ad-plan-select{display:none}
.ad-wizard-step>h3,.ad-wizard-step>p,.ad-wizard-step>.ad-plan-grid,.ad-wizard-step>.ad-request-map,.ad-creative-upload,.ad-live-preview,.ad-request-summary{grid-column:1/-1}
.ad-wizard-step>h3{margin:0;font-size:22px;letter-spacing:-.025em}.ad-wizard-step>p{margin:0;line-height:1.6;font-size:13px;color:var(--text-secondary)}
.ad-wizard-step .ad-plan-grid{margin:2px 0 0}.ad-plan{transition:border-color .15s,box-shadow .15s;background:var(--bg-card);padding:16px}
.ad-plan:first-child{border-color:var(--border-color)}.ad-plan.selected{border-color:var(--accent-cyan);box-shadow:0 0 0 2px var(--accent-cyan);background:var(--bg-card-hover)}
.ad-plan.selected .btn{background:var(--accent-cyan);color:#fff}.ad-plan h3{margin-bottom:10px}
.ad-request-form .ad-request-map{height:300px;overflow:hidden}.ad-request-form label{font-size:13px;font-weight:500}
.ad-request-form input,.ad-request-form textarea{font-size:14px;padding:12px}
.ad-file-input{position:absolute;width:1px!important;height:1px!important;min-height:0!important;opacity:0;padding:0!important;pointer-events:none}
.ad-image-drop{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;min-height:160px;padding:24px;border:2px dashed var(--border-color);border-radius:14px;background:var(--bg-card-hover);color:var(--text-primary);cursor:pointer;text-align:center}
.ad-image-drop strong{font-size:17px}.ad-image-drop span{font-size:13px;color:var(--text-secondary)}.ad-image-drop small{font-size:11px;color:var(--text-muted)}
.ad-image-drop.drag-over,.ad-image-drop:hover,.ad-image-drop:focus-visible{border-color:var(--accent-cyan);outline:2px solid var(--accent-cyan);outline-offset:3px}.ad-image-drop.has-image{border-style:solid;border-color:var(--accent-emerald)}
.ad-image-caption{font-size:12px;overflow-wrap:anywhere;color:var(--text-secondary);margin:8px 0 0}
.ad-live-preview{padding:18px;border:1px solid var(--border-color);border-radius:14px;max-width:440px;width:100%;justify-self:center;background:var(--bg-card);overflow-wrap:anywhere}
.ad-live-preview>small:first-child{display:block;font-size:10px;letter-spacing:.12em;color:var(--text-muted);margin-bottom:12px}.ad-live-preview img{display:block;width:100%;height:190px;object-fit:contain;border-radius:10px;background:var(--bg-card-hover)}
.ad-live-preview h3{font-size:19px;margin:14px 0 6px}.ad-live-preview p{font-size:13px;line-height:1.6;margin:8px 0;color:var(--text-secondary)}.ad-live-preview small{color:var(--text-muted)}
.ad-preview-contact{display:block;padding:12px;margin-top:16px;border-radius:8px;background:var(--accent-cyan);color:#fff;text-align:center;font-size:13px;font-weight:600}
.ad-request-summary{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,2fr);gap:12px;padding:18px;background:var(--bg-card-hover);border-radius:12px;font-size:13px;line-height:1.5;margin:0}
.ad-request-summary dt{color:var(--text-secondary)}.ad-request-summary dd{margin:0;overflow-wrap:anywhere;color:var(--text-primary)}
.ad-date-options{grid-column:1/-1;border:1px solid var(--border-color);border-radius:10px;padding:0 14px;color:var(--text-secondary);font-size:13px}
.ad-date-options summary{min-height:44px;padding:13px 0;cursor:pointer;grid-column:1/-1}.ad-date-options[open]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:14px}
.ad-request-form>.ad-form-message{margin:14px 0;color:var(--text-primary);font-size:13px;line-height:1.5}
.ad-wizard-actions{display:flex;justify-content:flex-end;gap:12px;position:sticky;bottom:0;background:var(--bg-card);padding:16px 0 0;border-top:1px solid var(--border-color);z-index:2}.ad-wizard-actions button{min-height:48px}.ad-wizard-actions button:first-child{margin-right:auto}
/* Mobile: a clear viewer and one independent scroll area in the wizard. */
.viewer-tools summary{display:none}
.ad-modal-open{overflow:hidden;overscroll-behavior:none}
.ad-wizard-content{min-width:0}
.ad-wizard-content>.ad-form-message{margin:14px 0;color:var(--text-primary);font-size:13px;line-height:1.5}
@media(max-width:700px){
 .app-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px}
 .brand-wrapper{grid-row:1;grid-column:1;gap:8px;min-width:0}
 .brand-wrapper>div{min-width:0}.brand-title{font-size:16px!important;gap:5px;flex-wrap:wrap}
 .brand-logo-img{width:28px;height:28px}.brand-subtitle{display:none}
 #pd-laminador-theme{grid-row:1;grid-column:2;font-size:12px;padding:8px}
 .header-actions{grid-column:1/-1}.header-actions .btn{width:100%}
 .viewer-card{gap:0;min-height:0}
 .viewer-header-stack{position:relative;inset:auto;padding:8px;flex-shrink:0}
 .viewer-toolbar{padding:0;box-shadow:none;border:0}
 .viewer-toolbar-row:not(.tools-row){display:grid;grid-template-columns:1fr 1fr;gap:6px}
 .toolbar-btn-group{display:grid!important;grid-template-columns:1fr 1fr;gap:6px;min-width:0}
 .viewer-toolbar-row .btn{padding:8px 4px;font-size:11px;min-width:0}
 .viewer-tools summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:8px;font-size:13px;cursor:pointer;color:var(--text-primary);border-top:1px solid var(--border-color)}
 .viewer-tools summary::after{content:'＋'}.viewer-tools[open] summary::after{content:'−'}
 .viewer-toolbar-row.tools-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .canvas-container{flex:none;height:360px;min-height:360px}
 .dropzone-overlay{padding:16px 12px;gap:8px}.dropzone-overlay h3{font-size:18px}.drop-icon{font-size:28px}
 .model-stats-bar{position:relative;inset:auto;margin:8px;gap:6px;flex-wrap:wrap}
 .version-preview-item{overflow-wrap:anywhere}
 .form-control,.form-select,input,select,textarea{font-size:16px!important}
 .live-ad-dialog.ad-plans-dialog[open]{display:flex;flex-direction:column;position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);overflow:hidden;box-sizing:border-box}
 .ad-plans-dialog .ad-dialog-head{position:static;flex-shrink:0;padding:12px 16px;gap:8px}
 .ad-plans-dialog .ad-dialog-head h2{font-size:19px}
 .ad-plans-dialog .ad-plans-intro{display:none}
 .ad-plans-dialog .ad-request-form{display:flex;flex-direction:column;flex:1;min-height:0;padding:0;overflow:hidden}
 .ad-step-progress{flex-shrink:0;margin:0;padding:0 16px;gap:8px}
 .ad-step-progress span{font-size:12px;padding:12px 2px}
 .ad-wizard-content{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex:1;min-height:0;padding:16px}
 .ad-wizard-step{grid-template-columns:minmax(0,1fr);gap:12px}
 .ad-wizard-step>h3{font-size:21px;margin:0}.ad-wizard-step>p{font-size:14px;margin:0}
 .ad-plans-dialog .ad-plan-grid{grid-template-columns:minmax(0,1fr);gap:8px}
 .ad-plans-dialog .ad-plan{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px;text-align:left}
 .ad-plan h3{font-size:15px;margin:0;grid-column:1}.ad-plan-price{font-size:22px;white-space:nowrap;grid-column:1}
 .ad-plan small,.ad-plan p{grid-column:1;font-size:12px;margin:0}
 .ad-plan p:last-of-type{display:none}.ad-plan button{grid-column:2;grid-row:1/5;align-self:center;font-size:13px;padding:10px;min-width:96px}
 .ad-request-form .ad-request-map{height:260px}.ad-map-status{font-size:13px}
 .ad-date-options[open]{grid-template-columns:minmax(0,1fr)}
 .ad-wizard-actions{position:static;flex-shrink:0;margin:0;padding:10px 16px;gap:10px}
 .ad-wizard-actions .btn{min-height:48px;flex:1;font-size:14px;padding:12px}
 .ad-plans-contact{flex-shrink:0;font-size:12px;padding:8px 16px 12px;text-align:center}
 .ad-request-summary{grid-template-columns:90px minmax(0,1fr)}
}

/* Shared theme variables already adapt these controls to light and dark modes. */
.support-policy-controls{display:flex;flex-direction:column;gap:8px;min-width:0}
.support-policy-controls .btn,.support-policy-controls select{min-height:44px;white-space:normal;width:100%}
.print-help,.print-status{font-size:.8rem;line-height:1.6;color:var(--text-secondary);overflow-wrap:anywhere}
.print-status{padding:12px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card-hover);white-space:pre-line;margin:0 0 16px}