/* ══════════════════════════════════════════════════════
   NEXUS — mobile.css
   Reglas específicas para móvil y responsive (fuentes IBM Plex Sans)
   ══════════════════════════════════════════════════════ */

/* 🔥 FORZAR IBM PLEX SANS EN TODOS LOS ELEMENTOS MÓVILES */
#mobileToolbarToggle,
#mobileToolbarDropdown,
.mobile-tool-item,
.mobile-tool-item span,
.mobile-back-btn,
.mobile-section-title,
.mobile-quick-btn,
.mobile-measure-btn,
.mobile-nav-row button,
.measurement-panel.mobile-active *,
.measurement-panel.mobile-active .pcb-label,
.measurement-panel.mobile-active h3 {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* PESOS ESPECÍFICOS */
.mobile-tool-item {
    font-weight: 400 !important;
}
.mobile-tool-item span {
    font-weight: 400 !important;
    letter-spacing: 0.3px;
}

.mobile-back-btn {
    font-weight: 400 !important;
}

.mobile-section-title {
    font-weight: 600 !important;
}

.mobile-quick-btn {
    font-weight: 500 !important;
}

.mobile-measure-btn {
    font-weight: 400 !important;
}

.mobile-nav-row button {
    font-weight: 600 !important;
}

.measurement-panel.mobile-active .pcb-label {
    font-weight: 600 !important;
}
.measurement-panel.mobile-active h3 {
    font-weight: 600 !important;
}

/* ── FIN FUENTES ── */

@media (max-width: 640px) { :root { --header-h: 52px; } }
@media (max-width: 400px) { :root { --header-h: 46px; } }

body.is-mobile .toolbar {
    display: none !important;
}
body.is-mobile #mobileToolbarToggle {
    display: flex !important;
}

#mobileToolbarToggle {
    display: none;
    width: 28px;
    height: 28px;
    background: #2C3749;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 18px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 201;
}

#mobileToolbarDropdown {
    display: none;
    position: relative;
    top: 400px;
    left: 0;
    right: 0;
    background: rgba(28, 32, 43, 0.98);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    z-index: 200;
    padding: 8px 12px;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    max-height: 200px;
    overflow-y: auto;
}

.mobile-measure-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.mobile-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #3C96FE;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.mobile-back-btn:hover {
    background: rgba(60,150,255,0.06);
}
.mobile-back-btn svg {
    width: 14px;
    height: 14px;
}

.mobile-section-title {
    font-size: 14px;
    color: #FFFFFF;
}

.mobile-measure-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-measure-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mobile-quick-btn {
    flex: 1;
    min-width: 80px;
    padding: 8px 10px;
    background: rgba(60,150,255,0.06);
    border: 1px solid rgba(60,150,255,0.12);
    border-radius: 6px;
    color: #3C96FE;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    will-change: background, border-color;
    transform: translateZ(0);
}
.mobile-quick-btn:hover {
    background: rgba(60,150,255,0.10);
    border-color: rgba(60,150,255,0.2);
}
.mobile-quick-btn:active {
    background: rgba(60,150,255,0.15);
}

#mobileToolbarDropdown.open { display: flex; }

.mobile-tool-row {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}
.mobile-tool-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    background: rgba(44,55,73,0.5);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
    min-width: 0;
}
.mobile-tool-item:active,
.mobile-tool-item.active {
    background: rgba(60,150,255,0.10);
    border-color: #3C96FE;
}
.mobile-tool-item svg { width: 20px; height: 20px; fill: #FFFFFF; }
.mobile-tool-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 9px;
    letter-spacing: 0.3px;
}
.mobile-tool-divider {
    height: 1px;
    background: rgba(255,255,255,0.03);
    width: 100%;
    margin: 2px 0;
}
.mobile-nav-row {
    display: flex;
    gap: 8px;
    width: 100%;
}
.mobile-nav-row button {
    flex: 1;
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 11px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mobile-measure-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 8px;
}

.mobile-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.mobile-back-btn:hover {
    background: rgba(255,255,255,0.08);
}
.mobile-back-btn svg {
    width: 12px;
    height: 12px;
    fill: #FFFFFF;
}

.mobile-section-title {
    font-size: 12px;
    color: #3C96FE;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.mobile-measure-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-measure-row {
    display: flex;
    gap: 8px;
}

.mobile-measure-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: rgba(60,150,255,0.06);
    border: 1px solid rgba(60,150,255,0.12);
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
}
.mobile-measure-btn:hover {
    background: rgba(60,150,255,0.10);
}
.mobile-measure-btn svg {
    width: 16px;
    height: 16px;
    fill: #FFFFFF;
}

.mobile-quick-btn {
    flex: 1;
    padding: 10px 8px;
    background: rgba(44,55,73,0.5);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
}
.mobile-quick-btn:hover {
    background: rgba(60,150,255,0.08);
    border-color: #3C96FE;
}

@media (max-width: 768px) {
    .control-panel,
    .measurement-panel { width: 280px; }
}

@media (max-width: 640px) {
    .header {
        padding: 7px 10px;
        gap: 6px;
        flex-wrap: nowrap;
        min-height: 52px;
        height: 52px;
        overflow: hidden;
    }
    .logo svg { width: 64px !important; height: auto !important; }
    .toolbar { display: none !important; }
    #mobileToolbarToggle { display: flex !important; }
    #openSlicerHeaderBtn {
        font-size: 0 !important;
        padding: 9px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px;
        justify-content: center;
        border-radius: 8px;
        flex-shrink: 0;
    }
    #openSlicerHeaderBtn .carbon-icon {
        width: 18px !important;
        height: 18px !important;
        display: block;
    }
    #pBackBtn {
        font-size: 10px !important;
        padding: 7px 10px !important;
        white-space: nowrap;
        flex-shrink: 0;
        border-radius: 8px;
    }
    .panel-drawer .panel-inner {
        width: 100vw !important;
        max-width: 340px !important;
    }
    .control-panel { font-size: 12px; }
    .stats-panel {
        bottom: 70px;
        right: 8px;
        min-width: 150px;
        padding: 10px;
        font-size: 11px;
    }
}

@media (max-width: 400px) {
    .header { padding: 6px 8px; }
    .logo svg { width: 54px !important; }
    #pBackBtn { font-size: 9px !important; padding: 6px 8px !important; }
    .panel-drawer .panel-inner { max-width: 100vw !important; }
}

@media(max-width:640px) {
    .dicom-panel { max-height: 55vh; }
    #dicomPanelToggleBtn { bottom: 16px; right: 16px; width: 44px; height: 44px; }
}

@media (max-width: 640px) {
    .measurement-panel {
        display: none !important;
    }
    .measurement-panel.mobile-active {
        display: flex !important;
        will-change: transform;
        transform: translateZ(0);
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-height: 40vh !important;
        height: auto !important;
        background: rgba(28, 32, 43, 0.95) !important;
        border: none !important;
        border-top: 1px solid rgba(255,255,255,0.06) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        backdrop-filter: blur(16px) !important;
        z-index: 200 !important;
        padding: 8px 12px !important;
        border-radius: 12px 12px 0 0 !important;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.4) !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .measurement-panel.mobile-active .panel-close-bar {
        margin: -8px -12px 6px !important;
        padding: 6px 12px !important;
    }
    .measurement-panel.mobile-active .pcb-label {
        font-size: 14px !important;
    }
    .measurement-panel.mobile-active h3 {
        font-size: 14px !important;
        margin: 0 0 8px 0 !important;
    }
    .measurement-panel.mobile-active .control-section {
        margin-bottom: 6px !important;
    }
    .measurement-panel.mobile-active .measure-mode-btn {
        padding: 6px 8px !important;
        font-size: 12px !important;
        min-height: 32px !important;
    }
    .measurement-panel.mobile-active .measure-controls {
        gap: 6px !important;
    }
    .measurement-panel.mobile-active .measure-btn {
        padding: 6px 8px !important;
        font-size: 12px !important;
        min-height: 32px !important;
    }
    .measurement-panel.mobile-active .measure-list {
        max-height: 80px !important;
        overflow-y: auto !important;
    }
    .measurement-panel.mobile-active .measure-item {
        padding: 4px 6px !important;
        font-size: 11px !important;
    }
    .welcome-title    { font-size: 22px; }
    .welcome-subtitle { font-size: 13px; }
    .drop-zone-content { padding: 16px; }
    .supported-formats { gap: 6px; }
    .format-badge { padding: 4px 8px; font-size: 10px; }
}

@media (max-width: 640px) {
    .slicer-header {
        padding: 6px 8px;
        height: auto !important;
        min-height: 48px;
        gap: 5px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        align-items: center;
    }
    .slicer-header::-webkit-scrollbar { display: none; }
    .slicer-header .sh-title  { font-size: 11px !important; white-space: nowrap; flex-shrink: 0; }
    .slicer-header .sh-sep    { display: none; }
    .slicer-btn {
        padding: 5px 8px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        height: 32px;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .slicer-btn .carbon-icon { width: 13px !important; height: 13px !important; }
    .slicer-header input[type="number"] {
        width: 48px !important;
        font-size: 10px !important;
        padding: 2px 4px !important;
        flex-shrink: 0;
    }
    .slicer-header .nrrd-label { font-size: 9px !important; white-space: nowrap; flex-shrink: 0; }
    .slicer-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
    }
    .slicer-panel-label { font-size: 9px; }
    .slicer-panel-info  { font-size: 8px; }
    #slicerBottomBar {
        flex-wrap: wrap;
        gap: 4px;
        padding: 4px 8px;
        font-size: 9px;
    }
    #slicerBottomBar input[type=range] { width: 80px !important; }
}

@media (max-width: 400px) {
    .slicer-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(4, 1fr) !important;
    }
}

@media(max-width:900px) {
    .p-stats      { grid-template-columns: 1fr 1fr; }
    .p-form-grid  { grid-template-columns: 1fr; }
    .p-sidebar    { width: 220px; }
    .p-add-layer-row { grid-template-columns: 90px 1fr; grid-template-rows: 1fr 1fr; }
    .pdash-body   { grid-template-columns: 1fr; }
    .pdash-stats  { grid-template-columns: repeat(2,1fr); }
    .pu-body      { grid-template-columns: 1fr; }
    .pu-mini-stats { grid-template-columns: 1fr 1fr; }
}

@media(max-width:640px) {
    .toolbar           { gap: 4px; overflow-x: auto; padding: 0 4px; }
    .tool-btn          { width: 32px; height: 32px; flex-shrink: 0; }
    #pBackBtn          { font-size: 10px; padding: 6px 10px; white-space: nowrap; }
    .header            { padding: 0 8px; gap: 6px; }
    .logo svg          { width: 70px !important; }
    #pMetaPanel        { width: calc(100vw - 24px); right: 12px; left: 12px; top: 52px; }
}