/* ==========================================================
   MOBILE STYLES — SDTD
   Only applies when screen width <= 768px
   Desktop layout remains unchanged (in style.css)
   ==========================================================

   D4 — Auditoría Responsive
   - Visor dominante (aspect-ratio + clamp + vh)
   - Layout apilado propio para tablet (no "móvil grande")
   - BOM: min 5 filas, scroll horizontal interno, 1ª columna sticky
   - Margen exterior responsive + spacing de header/título
   - Sin cambios funcionales (solo CSS/layout)
==========================================================*/

/* ==========================================================
   TABLET (≤ 768px)
   Stack everything vertically; page scrolls vertically.
==========================================================*/

@media (max-width: 768px) {

    /* --- Page: no document scroll; #workspace-main scrolls internally --- */
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    /* Fixed safe-area wrapper, anchored to the real viewport (out of the
       scroll). Top/bottom padding = max(breakpoint value, safe-area inset),
       so the exterior margin stays ALWAYS visible at any scroll position
       and content never hides behind the notch / camera cutout.
       Left/right stay fixed (tablet 10px, phone 8px). */
    #sdtd-workspace {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        padding-left: 10px;
        padding-right: 10px;
        overflow: hidden;
    }

    /* --- Main layout: column instead of row, the scroll container --- */
    /* Content scrolls INSIDE, below the fixed safe-area padding. */
    #workspace-main {
        flex-direction: column;
        height: 100%;
        padding: 0;
        gap: 12px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    /* --- Left area: full width, natural height --- */
    #workspace-area {
        width: 100%;
        height: auto;
        flex-shrink: 0;
        gap: 12px;
    }

    /* --- Header: card with exterior margin --- */
    #workspace-header {
        height: auto;
        min-height: 64px;
        padding: 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }

    #project-title {
        font-size: 18px;
        line-height: 1.25;
    }

    #project-code {
        font-size: 13px;
    }

    /* --- Viewer: dominant, responsive sizing --- */
    #workspace-view {
        flex: none;
        padding: 0;
    }

    #viewer-container,
    #viewer-3d-container {
        height: auto;
        aspect-ratio: 4 / 3;
        min-height: clamp(320px, 46vh, 620px);
    }

    /* --- BOM: 5+ visible rows, internal horizontal scroll --- */
    #bom-container {
        height: clamp(310px, 36vh, 380px);
        margin: 0;
    }

    #bom-header {
        height: 40px;
        font-size: 13px;
    }

    #bom-content {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Horizontal scroll belongs ONLY to the BOM table.
       border-collapse: separate (instead of collapse from style.css)
       is required for sticky cells to work reliably in table layout. */
    #bom-content table {
        min-width: 600px;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* Each BOM column keeps a fixed min-width so the full table always
       exceeds the iPhone viewport width and the internal horizontal
       scroll reaches ALL columns (Item, Code, Description, Qty, checkbox). */
    #bom-table th:not(.bom-checkbox-col),
    #bom-table td:not(.bom-checkbox-col) {
        min-width: 110px;
    }

    #bom-table th:first-child,
    #bom-table td:first-child {
        min-width: 44px;
    }

    /* Sticky first column (Item) while the rest scrolls horizontally */
    #bom-table thead th:first-child {
        left: 0;
        z-index: 3;
    }

    #bom-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 2px 0 4px rgba(0, 0, 0, .06);
    }

    #bom-table tbody tr:hover td:first-child {
        background: #EEF5FC;
    }

    #bom-table tbody tr.bom-selected td:first-child {
        background: var(--bom-highlight-color, var(--primary)) !important;
    }

    /* --- Panel: transparent wrapper, cards keep their own surface --- */
    #workspace-panel {
        width: 100%;
        height: auto;
        flex-shrink: 0;
        background: transparent;
        border-left: none;
        overflow: visible;
        overflow-x: hidden;
        padding: 0;
        gap: 12px;
    }

    /* --- Panel sections: consistent spacing, no arbitrary heights --- */
    .panel-section {
        padding: 12px 14px;
    }

    .panel-section h2 {
        font-size: 14px;
    }

    #information-section {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 120px;
    }

    #documents-section {
        height: auto;
        max-height: 180px;
    }

    #documents-content {
        overflow-y: auto;
        min-height: 0;
    }

    /* --- Client section: compact --- */
    #client-section {
        padding: 16px 14px;
    }

    #client-logo {
        max-width: 120px;
    }

    #client-name {
        font-size: 20px;
        margin-top: 8px;
    }

    /* --- Toggle button: easier to tap --- */
    .view-toggle-btn,
    .viewer-toggle-btn {
        padding: 10px 16px;
        font-size: 14px;
        min-height: 44px;
    }

    /* --- Modal: full width on mobile --- */
    .modal-content {
        width: 95%;
        max-width: none;
        padding: 16px;
    }

    /* --- Scrollbar: thinner on mobile --- */
    ::-webkit-scrollbar {
        width: 6px;
    }

    /* --- Touch: larger tap targets --- */
    tbody tr {
        min-height: 44px;
    }

    td,
    th {
        padding: 8px 6px;
    }

    /* --- Action button: larger tap target --- */
    .action-button {
        padding: 14px;
        font-size: 15px;
    }
}


/* ==========================================================
   PHONE (≤ 480px)
   Even stronger visual priority for the viewer.
==========================================================*/

@media (max-width: 480px) {

    /* --- Safe-area wrapper: tighter exterior margin --- */
    #sdtd-workspace {
        padding-top: max(8px, env(safe-area-inset-top));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        padding-left: 8px;
        padding-right: 8px;
    }

    #workspace-main {
        gap: 10px;
    }

    /* --- Header: clear separation above the title --- */
    #workspace-header {
        padding: 18px 14px 14px;
    }

    #project-title {
        font-size: 17px;
    }

    #project-code {
        font-size: 13px;
    }

    /* --- Viewer: still more dominant on phone --- */
    #viewer-container,
    #viewer-3d-container {
        aspect-ratio: 4 / 3;
        min-height: clamp(280px, 50vh, 480px);
    }

    /* --- BOM: keep 5 visible rows --- */
    #bom-container {
        height: clamp(300px, 40vh, 360px);
    }

    /* --- Panel: tighter spacing --- */
    #workspace-panel {
        gap: 10px;
    }

    .panel-section {
        padding: 10px 12px;
    }

    /* --- Client: smaller --- */
    #client-logo {
        max-width: 90px;
    }

    #client-name {
        font-size: 18px;
    }

    /* --- Font sizes: slightly smaller --- */
    td,
    th {
        font-size: 11px;
        padding: 6px 4px;
    }

    .panel-hint {
        font-size: 11px;
    }
}


/* ==========================================================
   TOUCH DEVICE DETECTIONS
==========================================================*/

/* Hover-capable devices: keep hover effects */
@media (hover: hover) and (pointer: fine) {
    tbody tr:hover {
        background: #EEF5FC;
    }
}

/* Touch devices: remove hover, add active states */
@media (hover: none) and (pointer: coarse) {
    tbody tr:hover {
        background: transparent;
    }

    tbody tr:active {
        background: #dce6f0;
    }

    #bom-table tbody tr:active td:first-child {
        background: #dce6f0;
    }

    .action-button:hover:not(:disabled) {
        opacity: 1;
    }

    .action-button:active:not(:disabled) {
        opacity: 0.85;
        transform: scale(0.98);
    }
}