/* ==========================================================================
   mobile.css  ·  JP Shader Editor — adaptación de páginas secundarias
   Capa ÚNICA: sólo celulares/tablets (pointer: coarse) o pantallas <=860px.
   NO rediseña: sólo neutraliza sidebars fijas, hace scrollables las filas
   de pestañas, agranda inputs a 16px (evita zoom de iOS) y limita modales.
   Cargar SIEMPRE como último CSS del <head>.
   ========================================================================== */

@media (pointer: coarse), (max-width: 860px) {

    /* ---------------------------------------------------------------- (a)
       NINGUNA columna lateral fija: pasa a flujo normal y ancho completo.
       Lo que era fila principal pasa a columna. --------------------------- */
    .sidebar,
    .admin-sidebar,
    aside,
    .col-izq {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        flex: 0 0 100% !important;
    }

    .layout,
    .main-layout,
    .admin-layout,
    .content-layout,
    .dashboard,
    .container-row,
    .row-layout,
    .page-layout,
    .panel-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ---------------------------------------------------------------- (b)
       Filas de pestañas / botones: scroll horizontal, sin wrap, gap chico,
       botones con alto de toque >= 40px. -------------------------------- */
    .tabs,
    .tab-bar,
    .nav-tabs,
    .btn-row,
    .toolbar,
    .toolbar-row,
    .actions,
    .actions-row,
    .filters,
    .filter-row,
    .chip-row,
    .toolbar-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 6px !important;
        -webkit-overflow-scrolling: touch;
    }

    .tabs > *,
    .tab-bar > *,
    .nav-tabs > *,
    .btn-row > *,
    .toolbar > *,
    .toolbar-row > *,
    .actions > *,
    .actions-row > *,
    .filters > *,
    .filter-row > *,
    .chip-row > * {
        flex: 0 0 auto !important;
    }

    .tabs button,
    .tabs a,
    .tab-bar button,
    .tab-bar a,
    .nav-tabs button,
    .nav-tabs a,
    .toolbar button,
    .toolbar a,
    .toolbar-row button,
    .toolbar-row a,
    .btn-row button,
    .btn-row a,
    .actions button,
    .actions a,
    .filters button,
    .chip-row button {
        min-height: 40px !important;
        white-space: nowrap !important;
    }

    /* ---------------------------------------------------------------- (c)
       Inputs / selects / textareas: 16px evita el zoom automático de iOS.
       min-height 42px para toque cómodo. -------------------------------- */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
        min-height: 42px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ---------------------------------------------------------------- (d)
       Tablas y listas largas: bloque con scroll propio. ------------------ */
    table,
    .table,
    .data-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .list,
    .list-view,
    .scroll-list,
    .items-list {
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ---------------------------------------------------------------- (e)
       Modales y paneles flotantes: 96vw, alto limitado con scroll. ------- */
    .modal,
    .modal-dialog,
    .modal-box,
    .dialog,
    .overlay > .panel,
    .floating-panel,
    .popover,
    .drawer,
    .dp-modal,
    .modal-content {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 88vh !important;
        overflow: auto !important;
        box-sizing: border-box !important;
    }

    /* ---------------------------------------------------------------- (f)
       Media: nunca más ancha que su contenedor. -------------------------- */
    img,
    video,
    canvas,
    svg,
    iframe {
        max-width: 100% !important;
    }

    /* ---------------------------------------------------------------- (g)
       Títulos y textos largos sin desbordar. ----------------------------- */
    h1, h2, h3, h4, h5, h6,
    .title,
    .card-title,
    .modal-title {
        word-break: break-word !important;
        overflow-wrap: anywhere;
        max-width: 100% !important;
    }

    /* Última red de seguridad: nada empuja el ancho del documento. */
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden;
    }

/* ================= FIX QA (30-Sep-2026) — recortes medidos con el harness ====
       performance.html: la grilla del secuenciador (.layer-cells-grid) medía 999px
       y quedaba RECORTADA (no scrolleable). Ahora scrollea sola. ---------------- */
    .layer-row { flex-wrap: wrap !important; min-width: 0 !important; max-width: 100% !important; }
    .layer-cells-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        min-width: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
    .layer-cells-grid > .grid-cell { flex: 0 0 auto !important; }

    /* sync.html: contenedor fijo de 507px (se recortaba) -> fluido, 1 columna --- */
    .sync-container,
    .sync-header-section,
    .sync-grid { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
    .sync-grid { grid-template-columns: 1fr !important; }
    .sync-header-section h1, .sync-header-section p, .sync-subtitle { overflow-wrap: anywhere !important; }

    /* presentacion.html: nav horizontal de 780px -> scrolleable ----------------- */
    .nav-links {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        min-width: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
    .nav-links > li { flex: 0 0 auto !important; }

    /* index.html: .auth-controls 412px -> envuelve ------------------------------ */
    .auth-controls { flex-wrap: wrap !important; max-width: 100% !important; min-width: 0 !important; }
    .auth-controls .auth-button { min-height: 40px !important; }

    /* modales: nunca mas anchos que la pantalla --------------------------------- */
    .modal, .dialog, .modal-content, .modal-box, .overlay > div { width: 96vw !important; max-width: 96vw !important; }
    .modal-content, .modal-box { max-height: 86vh !important; overflow: auto !important; }

    /* ============ FIX QA ronda 2 (30-Sep) — medido con tmp/uitest/probe_clip.js ====
       Cada regla responde a un elemento que el probe marcaba como RECORTADO. ----- */
    /* header global (index/user/admin/profile/sync): la zona de auth se cortaba 33px */
    .global-header .gh-auth,
    .global-header #auth-container,
    .global-header .auth-buttons,
    .global-header .auth-controls {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    .global-header .auth-controls { flex-wrap: nowrap !important; }
    .global-header .auth-button { min-height: 40px !important; min-width: 40px !important; }

    /* index/user: la seccion spotlight (overflow hidden) recortaba 519px */
    .performance-spotlight { padding: 56px 14px !important; overflow: hidden !important; }
    .spotlight-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .spotlight-content,
    .spotlight-visual { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    .spotlight-content > * { max-width: 100% !important; }
    .spotlight-features { flex-wrap: wrap !important; }
    .spotlight-feature-item { min-width: 0 !important; }
    .spotlight-visual img,
    .spotlight-visual video { max-width: 100% !important; height: auto !important; }

    /* presentacion: el .navbar (fixed) se salia 390px */
    .navbar {
        max-width: 100vw !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        row-gap: 8px !important;
        box-sizing: border-box !important;
    }
    .navbar > * { min-width: 0 !important; max-width: 100% !important; }
    .navbar .nav-links { flex: 1 1 auto !important; min-width: 0 !important; }

    /* performance: 14px que se salian de la capa */
    #layers-container { max-width: 100% !important; min-width: 0 !important; }

    /* ============ FIX QA ronda 3 (30-Sep) — header con el LOGIN CORTADO y titulos enormes.
       Medido en la captura 390x844: el boton LOGIN quedaba fuera del borde derecho.
       Solucion: el login baja a la fila del nav (que tiene lugar de sobra) y se
       compacta lo prescindible. NO se agranda el header (las paginas asumen 61px). */
    @media (max-width: 430px) {
        .global-header .gh-inner {
            flex-wrap: wrap !important;
            row-gap: 4px !important;
            column-gap: 4px !important;
            gap: 4px !important;
            padding: 0 8px !important;
        }
        .global-header .gh-logo {
            /* CAUSA RAIZ del LOGIN cortado: el logo con flex-grow:1 se comia el ancho
               y encogia el bloque de auth a 40px (el texto del boton se recortaba). */
            flex: 0 1 auto !important;
            min-width: 0 !important;
            max-width: 26% !important;
            font-size: 12px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }
        /* El auth al ancho REAL de su contenido (estaba en 40px y el boton se
           centraba desbordando -> se veia cortado). max-content corta la cadena. */
        .global-header .gh-auth,
        .global-header #auth-container,
        .global-header .auth-buttons,
        .global-header .auth-controls {
            width: max-content !important;
            min-width: max-content !important;
            max-width: max-content !important;
            flex: 0 0 auto !important;
            overflow: visible !important;
            justify-content: flex-end !important;
        }
        .global-header .gh-lang { gap: 2px !important; }
        .global-header .gh-lang .lang-btn { padding: 3px 5px !important; font-size: 10px !important; }
        /* El nav conserva su fila propia (width:100% de la capa base) y scrollea */
        .global-header .gh-nav {
            flex: 1 1 100% !important;
            min-width: 0 !important;
            overflow-x: auto !important;
        }
        .global-header .auth-button {
            padding: 5px 10px !important;
            font-size: 11px !important;
            min-width: 0 !important;
        }
        .global-header .username-display { max-width: 54px !important; }
    }

    /* Titulos: en el celu los h1 salian de la pantalla (medido: ~90px de alto) */
    h1, .hero-title, .spotlight-title, .page-title, .section-title {
        font-size: clamp(26px, 8.5vw, 40px) !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }
    h2, .card-title { font-size: clamp(19px, 6vw, 28px) !important; }
    h3 { font-size: clamp(16px, 5vw, 22px) !important; }

    /* ============ FIX QA ronda 4 (30-Sep) — sync.html: BUG PRE-EXISTENTE
       styles.css trae `body { display:flex; justify-content:center }` (para centrar
       el .container del editor). En sync.html los hijos del body son el header
       (sticky) y .sync-container: al ser fila flex se aplastaban -> el contenido
       quedaba una columna de 40px. Se apila SOLO en esas paginas (:has). */
    body:has(.sync-container) {
        display: block !important;
    }
    body:has(.sync-container) .sync-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
    }
    /* presentacion: el navbar fixed guardaba una decoracion de 2x el ancho */
    nav.navbar { overflow-x: hidden !important; }
}