/* ===================================================================
   TABLET TÁCTIL — OPTIMIZACIÓN PARA DISPOSITIVOS DE 8"
   TechLab3D Cotizador

   Objetivo: corregir scroll táctil y diseño de la pantalla
   "Registrar Movimiento de Inventario" en tablets ONN 8" (1280×800)
   y similares.

   AISLAMIENTO: todo se activa SOLO en dispositivos táctiles reales
   mediante `(hover: none) and (pointer: coarse)`. Esto NO afecta a
   laptops ni desktops con mouse (que usan laptop-responsive.css),
   aunque la ventana tenga el mismo ancho.

   Rango cubierto: 769px–1366px → ONN 8" en vertical (~800px) y
   horizontal (~1280px). Por debajo de 769px lo maneja el layout
   móvil existente (styles.css + production-mobile.css), que se
   respeta sin tocar.
   =================================================================== */


/* ========================================================
   A) NAVEGACIÓN TÁCTIL — menú off-canvas con hamburguesa
   --------------------------------------------------------
   El sidebar normal se expande con :hover, imposible en una
   pantalla táctil. Aquí se reemplaza por un menú deslizable
   controlado por el botón hamburguesa (#mobile-menu-toggle),
   reutilizando la lógica .show ya existente en index.html.
   ======================================================== */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1366px) {

    /* ── Botón hamburguesa: visible (anula Bootstrap d-md-none vía #id) ── */
    #mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1070;
        background: var(--primary-color, #6366f1);
        border: none;
        color: #fff;
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 10px;
        font-size: 1.4rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    /* ── Overlay para cerrar el menú (no existe fuera de <768px) ── */
    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1055;
        display: none;
    }
    .mobile-overlay.show { display: block; }

    /* ── Sidebar fuera de pantalla; entra al pulsar hamburguesa ── */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1060;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 16px 16px 0;
        /* Sin backdrop-filter: en tablets de gama baja deja el contenido de atrás
           sin re-renderizar al cerrar el menú (vista "cortada"). Fondo sólido. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    body.light-theme .sidebar { background: #f8f9fa; }
    body.dark-theme  .sidebar { background: #161616; }
    .sidebar.show { transform: translateX(0) !important; }

    /* ── Neutralizar la expansión por hover (en táctil queda "pegada") ── */
    .sidebar:hover { width: 280px !important; }

    /* ── Navegación siempre con texto e íconos (menú completo legible) ── */
    .sidebar h3 {
        display: block !important;
        opacity: 1 !important;
        font-size: 1.05rem !important;
        height: auto !important;
        padding: 0.75rem !important;
        margin: 0 0 0.5rem 0 !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    .sidebar .menu a {
        justify-content: flex-start !important;
        padding: 13px 16px !important;
        min-height: 48px;          /* objetivo táctil cómodo */
    }
    .sidebar .menu a i {
        font-size: 1.25rem !important;
        margin-right: 14px !important;
    }
    .sidebar .menu a span { display: inline !important; opacity: 1 !important; }

    .sidebar .has-submenu > .submenu-toggle {
        justify-content: flex-start !important;
        padding: 13px 16px !important;
        min-height: 48px;
    }
    .sidebar .has-submenu > .submenu-toggle i:first-child {
        font-size: 1.25rem !important;
        margin-right: 14px !important;
    }
    .sidebar .has-submenu > .submenu-toggle span,
    .sidebar .submenu-arrow { display: inline !important; opacity: 1 !important; }
    .sidebar .submenu li a {
        padding: 11px 16px 11px 30px !important;
        min-height: 44px;
        opacity: 1 !important;
    }

    /* ── Contenido a ancho completo (el sidebar ya no ocupa espacio fijo) ── */
    .content,
    .sidebar:hover + .content {
        margin-left: 0 !important;
        padding: 1rem !important;
        padding-top: 70px !important;   /* deja sitio al botón hamburguesa */
    }
}


/* ========================================================
   B) SCROLL TÁCTIL FLUIDO
   --------------------------------------------------------
   El modelo de scroll es de página (body). Se garantiza el
   desplazamiento inercial y se evita que los contenedores
   atrapen el gesto vertical.
   ======================================================== */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1366px) {

    html, body {
        -webkit-overflow-scrolling: touch;
    }
    body {
        overscroll-behavior-y: none;
    }

    /* El formulario y sus secciones permiten scroll vertical con el dedo.
       (El canvas de firma conserva touch-action:none para poder dibujar.) */
    #inventario-view,
    #inventario-view .glass-card,
    #inventario-view .form-section {
        touch-action: pan-y;
    }
}


/* ========================================================
   C) FIRMA — que el canvas no se trague todo el scroll
   --------------------------------------------------------
   El canvas usa touch-action:none (necesario para dibujar),
   por lo que arrastrar sobre él no hace scroll. Se reduce su
   altura para que siempre quede zona "agarrable" alrededor,
   y se añade una nota de ayuda.
   ======================================================== */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1366px) {

    #inventario-firma-canvas {
        height: 150px !important;
    }
}


/* ========================================================
   D) REFLOW DEL FORMULARIO — ONN 8" EN VERTICAL (~800px)
   --------------------------------------------------------
   En vertical, las columnas md (3–4 por fila) quedan muy
   apretadas. Se apilan a ancho completo para legibilidad y
   para evitar cortes/desbordes.
   ======================================================== */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 900px) {

    #inventario-view [class*="col-md-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Botones de acción a ancho completo y apilados (fácil de tocar) */
    #inventario-view .form-actions {
        flex-direction: column;
    }
    #inventario-view .form-actions .btn {
        width: 100%;
    }
}


/* ========================================================
   E) OBJETIVOS TÁCTILES — campos y botones más grandes
   --------------------------------------------------------
   Aplica en todo el rango tablet (vertical y horizontal).
   ======================================================== */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-width: 1366px) {

    #inventario-view .form-control,
    #inventario-view .form-select {
        min-height: 46px;
        font-size: 0.95rem;
    }
    #inventario-view textarea.form-control {
        min-height: 46px;
    }
    #inventario-view .btn {
        min-height: 46px;
        font-size: 0.95rem;
    }

    /* Resultados de búsqueda de material: filas más altas para el dedo */
    #inventario-view .search-results-list .search-result-item,
    #inventario-view .search-results-list > * {
        min-height: 44px;
    }
}