/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * TABLET / TÁCTIL — Cubikos (27-ago-2026)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * La app completa en tablets de 7" o más. Todo aquí cuelga de `.touch-device`
 * (la pone js/config/viewerMode.js), así que en un PC con ratón este archivo
 * no existe: ni una regla se aplica y el layout de escritorio queda intacto.
 *
 * Tres problemas que resuelve, por orden de importancia:
 *
 *  1. LOS CONTROLES ENCOGÍAN JUSTO DONDE HACÍAN FALTA GRANDES.
 *     typography.css baja el `font-size` del html de 62.5% a 55% según se
 *     estrecha la pantalla, y como TODA la UI está en `rem`, en una tablet los
 *     botones quedaban en 33–41 px: por debajo del mínimo de 44 px que necesita
 *     un dedo. Medido con scratch/diag-tablet.mjs: 59 controles por debajo de
 *     40 px en el editor 2D a 960x600. Aquí se restituye la escala y se fija un
 *     mínimo táctil explícito.
 *
 *  2. EL `:hover` SE QUEDA PEGADO.
 *     En táctil el primer toque deja el elemento en estado hover hasta que se
 *     toca otra cosa. El nav-drawer se abre por hover y se quedaba abierto
 *     tapando el visor. navigation.css ya lo neutraliza por debajo de 1024 px,
 *     pero un iPad Pro en horizontal mide 1194: fuera del breakpoint. Se
 *     neutraliza por dispositivo, no por ancho.
 *
 *  3. TRES COLUMNAS NO CABEN EN VERTICAL.
 *     El editor 2D es nav(84) + sidebar(300) + lienzo. En una tablet de 7" en
 *     vertical (600 px) el lienzo se quedaba con ~200 px. En vertical el
 *     sidebar pasa a ser un cajón deslizante sobre el lienzo, y el panel
 *     derecho del 3D una hoja inferior.
 *
 * @module tablet
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   1. ESCALA — deshacer el encogimiento de typography.css
   ═══════════════════════════════════════════════════════════════════════════════
   typography.css: 62.5% ≥1440 · 60% ≤1440 · 57% ≤1024 · 55% ≤768.
   En táctil se mantiene la escala completa (1rem = 10px) hasta 720 px de
   ancho, y solo por debajo se cede un poco para que quepan las tres columnas
   del editor. `!important` es necesario: las reglas de typography.css son
   `html {}` dentro de media queries, misma especificidad y cargan después.
   ═══════════════════════════════════════════════════════════════════════════════ */
html.touch-device {
    font-size: 62.5% !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media screen and (max-width: 720px) {
    html.touch-device {
        font-size: 60% !important;
    }
}

/* iOS hace zoom automático al enfocar un input con letra < 16px. Con la
   escala restituida los inputs quedan en 1.4rem = 14px, así que seguirían
   provocando el zoom: se suben a 16px reales solo en táctil. */
.touch-device input,
.touch-device select,
.touch-device textarea {
    font-size: max(1.4rem, 16px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. OBJETIVOS TÁCTILES — mínimo 44 px (guía de Apple; Android pide 48 dp)
   ═══════════════════════════════════════════════════════════════════════════════
   El mínimo va en PX y no en rem a propósito: 44 px son el ancho de un dedo,
   una constante física, no tipografía. En rem encogía con la escala y a 600 px
   de ancho (rem 9.6 px) los botones se quedaban en 42 px — medido.
   Se aplica `min-height` y no `height` para no romper los botones que ya son
   más altos, y se excluyen los que viven dentro de una fila de texto (chips
   de color, celdas de tabla) donde 44 px destrozaría la rejilla.
   ═══════════════════════════════════════════════════════════════════════════════ */
.touch-device button:not(.texture-item):not(.color-chip):not(.brand-header):not(.cbk-mn-card__x),
.touch-device .nav-item,
.touch-device .editor-nav-btn,
.touch-device .zoom-btn,
.touch-device .tool-btn,
.touch-device .desk-sidebar-btn,
.touch-device select,
.touch-device .accordion-header,
.touch-device .material-segment,
.touch-device .material-subtab {
    min-height: 44px;
    touch-action: manipulation;
}

/* Casillas y radios: 15 px medidos, imposibles de acertar.
   Ojo con la trampa: un pseudo-elemento `input::after` para ampliar el área de
   toque NO funciona — el navegador no genera cajas hijas dentro de un elemento
   reemplazado. Lo que sí funciona es que en app.html TODA casilla vive dentro
   de su `<label>` con el texto al lado, y tocar el label ya la conmuta: el
   objetivo real es el label, así que es al label al que se le dan los 44 px. */
.touch-device input[type="checkbox"],
.touch-device input[type="radio"] {
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
}
.touch-device label:has(> input[type="checkbox"]),
.touch-device label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 44px;
    padding: 0.2rem 0.6rem 0.2rem 0.2rem;
    touch-action: manipulation;
}

/* Los números del editor (ancho/alto/fondo) se teclean mucho: mano ancha. */
.touch-device input[type="number"],
.touch-device input[type="text"] {
    min-height: 44px;
}

.touch-device #refresh-floating-btn.girando svg {
    animation: cbk-girar 0.8s linear infinite;
}
@keyframes cbk-girar {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Los iconos flotantes del 3D ya eran redondos; solo el diámetro. */
.touch-device .undo-redo-btn,
.touch-device .nav-toggle-floating {
    min-width: 44px;
    min-height: 44px;
}
.touch-device .nav-toggle-floating {
    width: 3.2rem;   /* pestaña lateral: ancha de más estorbaría el lienzo */
    min-width: 3.2rem;
    height: 6.4rem;
    /* Sube desde el centro: la hoja inferior arranca en `left:7.2rem`, justo
       donde vive esta pestaña, y a media altura se montaban (medido: 33x58 px
       de solape a 768x1280). Al 24% queda centrada en la mitad útil del
       lienzo y no la alcanza la hoja ni con la hoja abierta. */
    top: 24%;
}

/* La barra flotante de la esquina desaparece en táctil. Ocupaba esquina de
   lienzo —que en una tablet es justo lo que falta— para tres botones que ahora
   viven en la barra inferior, donde ya se está mirando. El que NO se muda es
   el de atajos de teclado: es una chuleta de teclas en un aparato sin teclado.
   Se monta todo desde js/modules/touchBridge.js. El indicador de nube va
   dentro de esta barra y sí hace falta, así que se saca aparte, arriba a la
   derecha, donde no estorba. */
/* `!important` obligatorio: navigationController.showScreen() les pone
   `style.display="flex"` EN LÍNEA cada vez que se entra al 3D, y un estilo en
   línea gana a cualquier selector. Sin esto reaparecían los de atajos y figura
   humana en cuanto se navegaba (medido: seguían visibles en los 5 viewports). */
.touch-device #floating-utils-bar > button {
    display: none !important;
}
/* La barra no se borra entera porque dentro vive el indicador de sincronización
   con la nube, que sí hace falta ver. Se queda arriba a la IZQUIERDA y no a la
   derecha: en apaisado el panel de herramientas ocupa `right:1.2rem`. Estas
   coordenadas son las que el arnés ya da por limpias de solapes. */
.touch-device #floating-utils-bar {
    top: 7.6rem;
    bottom: auto;
    left: 11.6rem;
}

/* Sin resaltado azul de iOS al tocar, sin menú de copiar en el chrome. */
.touch-device button,
.touch-device .nav-item,
.touch-device .editor-nav-btn,
.touch-device .desk-project-card {
    -webkit-tap-highlight-color: transparent;
}
.touch-device .nav-drawer,
.touch-device #editor-nav,
.touch-device #floating-utils-bar,
.touch-device #undo-redo-bar {
    -webkit-user-select: none;
    user-select: none;
}

/* Momento de inercia en todo panel con scroll. */
.touch-device .right-panel,
.touch-device #editor-sidebar,
.touch-device .nav-drawer,
.touch-device .tab-content,
.touch-device .table-container,
.touch-device .erp-table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. HOVER PEGADO — el nav-drawer no se abre solo
   ═══════════════════════════════════════════════════════════════════════════════
   Réplica de lo que navigation.css hace bajo 1024 px, pero por dispositivo:
   un iPad Pro en horizontal mide 1194 px y se quedaba fuera.
   ═══════════════════════════════════════════════════════════════════════════════ */
.touch-device .nav-drawer:hover:not(.expanded) {
    width: 7.2rem;
}
.touch-device .nav-drawer:hover:not(.expanded) .nav-label,
.touch-device .nav-drawer:hover:not(.expanded) .nav-section-label,
.touch-device .nav-drawer:hover:not(.expanded) .nav-label-calibre,
.touch-device .nav-drawer:hover:not(.expanded) .nav-label-lang {
    display: none;
}
.touch-device .nav-drawer:hover:not(.expanded) .nav-brand-favicon {
    display: block;
}
.touch-device .nav-drawer:hover:not(.expanded) .nav-brand-logo {
    display: none;
}
.touch-device .nav-drawer:hover:not(.expanded) ~ .nav-toggle-floating {
    left: 7.2rem;
}
.touch-device .nav-drawer:hover:not(.expanded) ~ .nav-toggle-floating .toggle-icon {
    transform: none;
}
/* El toggle manual es la ÚNICA forma de abrirlo: tiene que verse siempre. */
.touch-device .nav-toggle-floating {
    display: flex;
}
/* Los tooltips del nav se disparaban por hover y se quedaban clavados. */
.touch-device .nav-item:hover[data-tooltip]::after {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. LIENZO 3D — el navegador no se queda con los gestos
   ═══════════════════════════════════════════════════════════════════════════════
   Sin `touch-action:none` el navegador interpreta el arrastre como scroll de
   página y el pellizco como zoom del documento: OrbitControls no recibe nada.
   ═══════════════════════════════════════════════════════════════════════════════ */
.touch-device #three-container,
.touch-device #three-container canvas {
    touch-action: none;
}
/* El editor 2D dibuja con divs: el arrastre lo gobierna touchBridge.js. */
.touch-device #editor-canvas-area,
.touch-device #plano-container {
    touch-action: none;
}
/* Y la app en conjunto no rebota ni hace scroll de goma. */
.touch-device body {
    overscroll-behavior: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. PANEL DERECHO DEL 3D
   ═══════════════════════════════════════════════════════════════════════════════
   En horizontal se queda a la derecha, un poco más estrecho. En vertical (o
   con poco ancho) pasa a hoja inferior a media pantalla, que es donde el
   pulgar llega. Se declara aquí entero para no depender del orden en que
   ganan style.css y panels.css, que se pisan entre sí en este selector.
   ═══════════════════════════════════════════════════════════════════════════════ */
.touch-device .right-panel {
    width: 32rem;
    right: 1.2rem;
    top: 1.2rem;
    left: auto;
    bottom: auto;
    max-height: calc(100vh - 2.4rem);
    border-radius: 1.6rem;
}

/* El nav-drawer del 3D se fija en 7.2rem en táctil (navigation.css lo baja a
   6rem por debajo de 768 px) para que la hoja inferior pueda arrancar justo
   donde acaba: con `left:0` el título y el botón Cerrar quedaban DEBAJO del
   menú, ilegibles. Se ve en scratch/shots-tablet/tab7-v-3d.png. */
.touch-device .nav-drawer:not(.expanded) {
    width: 7.2rem;
}

@media screen and (max-width: 900px) {
    .touch-device .right-panel {
        width: auto;
        max-width: none;
        left: 7.2rem;
        right: 0;
        top: auto;
        bottom: 0;
        /* La hoja se AJUSTA A SU CONTENIDO, con un tope. Estuvo un rato con
           `height:52vh` fija, y estaba mal: el panel de Muebles ocupa unos
           320 px y se comía media pantalla en blanco. La fijé para poder
           colocar la barra de navegación 3D justo encima con una referencia
           conocida, pero esa barra ya no se coloca encima — se aparta (ver más
           abajo), así que nada depende ya de cuánto mide la hoja.
           El tope al 50% es para los paneles largos (colores, texturas), que
           dentro hacen su propio scroll. */
        height: auto;
        max-height: 50vh;
        border-radius: 1.6rem 0 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .touch-device #geometry-resize-flyout,
    .touch-device #composition-properties-flyout {
        left: 7.2rem !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        transform: none !important;
        width: auto;
        max-width: none;
        max-height: 45vh;
        border-radius: 1.6rem 0 0 0;
    }
    /* La barra de navegación 3D se APARTA mientras la hoja está abierta, no se
       sube. Subirla la dejaba flotando en mitad del lienzo — 400x103 px opacos
       justo encima del mueble — y ahí no solo estorbaba a la vista: se comía
       los toques. Medido: al arrastrar sobre el mueble, `elementFromPoint`
       devolvía `.trackpad-nav-panel` en vez del canvas, y el arrastre no
       llegaba nunca al 3D.
       Quitarla no cuesta nada en táctil: es un apaño para portátiles sin ratón
       y con el dedo ya se orbita arrastrando y se hace zoom con dos dedos.
       Vuelve en cuanto se cierra la hoja.
       El panel arranca en `display:none` y toolPanelController.js lo enciende
       con `style.display="flex"`: ese estilo en línea es la única señal
       disponible sin tocar el controlador. */
    .touch-device body:has(#right-tools-panel[style*="flex"]) .trackpad-nav-panel {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. EDITOR 2D — el sidebar como cajón cuando no caben tres columnas
   ═══════════════════════════════════════════════════════════════════════════════
   Por encima de 900 px caben las tres columnas (nav + sidebar + lienzo). Por
   debajo, el sidebar se superpone al lienzo y se abre/cierra con el mismo
   botón del nav, que touchBridge.js conecta a `.sidebar-abierto`.
   ═══════════════════════════════════════════════════════════════════════════════ */
.touch-device #editor-nav {
    width: 9.6rem;
    min-width: 9.6rem;
}
.touch-device .editor-nav-btn {
    width: 8.8rem;
    padding: 1rem 0.4rem;
    font-size: 1.2rem;
}

@media screen and (max-width: 900px) {
    .touch-device #editor-sidebar {
        position: absolute;
        left: 9.6rem;
        top: 0;
        height: 100%;
        width: 32rem;
        max-width: calc(100vw - 9.6rem);
        z-index: 40;
        /* Ojo con el porcentaje: el cajón NO arranca en el borde izquierdo,
           arranca en `left:9.6rem`. Un `translateX(-102%)` desplaza solo su
           propio ancho y dejaba 90 px del cajón asomando ENCIMA del nav —
           medido a 768x1280: x=-230 con w=320, borde derecho en 90. Hay que
           restar también ese desplazamiento inicial. */
        transform: translateX(calc(-100% - 10.6rem));
        transition: transform 0.25s ease;
        box-shadow: 0.4rem 0 2.4rem rgba(15, 23, 42, 0.18);
    }

    /* style.css (dentro de `@media max-width:768px`) le da `height:50%` al
       lienzo y al sidebar, pensando en un apilado vertical que NUNCA ocurre:
       editor.css carga después y le gana el `flex-direction:row`. Resultado:
       la regla queda medio aplicada y el lienzo se queda a media altura con
       el resto en gris — 640 px de 1280, medido. En escritorio no se veía
       porque nadie abre el editor por debajo de 768 px. */
    .touch-device #editor-canvas-area {
        height: 100%;
    }
    .touch-device #screen-editor.sidebar-abierto #editor-sidebar {
        transform: none;
    }
    /* Velo para cerrar tocando fuera; lo inserta touchBridge.js. */
    .touch-device #editor-sidebar-velo {
        position: absolute;
        inset: 0;
        z-index: 35;
        background: rgba(15, 23, 42, 0.28);
        display: none;
    }
    .touch-device #screen-editor.sidebar-abierto #editor-sidebar-velo {
        display: block;
    }
    .touch-device #editor-canvas-area {
        padding: 1.6rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7. ESCRITORIO DE PROYECTOS (home)
   ═══════════════════════════════════════════════════════════════════════════════
   La rejilla de tarjetas ya es fluida; solo hacen falta manos más anchas y que
   la barra lateral no se coma media pantalla en vertical.
   ═══════════════════════════════════════════════════════════════════════════════ */
.touch-device .desk-project-card {
    -webkit-touch-callout: none;
}
@media screen and (max-width: 900px) {
    .touch-device .desk-projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    }
    .touch-device .desk-sidebar-btn-label {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8. MENÚ CONTEXTUAL (pulsación larga sobre el 3D)
   ═══════════════════════════════════════════════════════════════════════════════
   Lo pinta view3d.js con estilos en línea y medidas de ratón (13.5px, 8px de
   padding). En táctil hay que poder acertar la fila con el dedo.
   ═══════════════════════════════════════════════════════════════════════════════ */
.touch-device #cubikos-ctx-menu {
    min-width: 22rem !important;
    font-size: 1.5rem !important;
    padding: 0.8rem !important;
}
.touch-device #cubikos-ctx-menu > div {
    padding: 1.3rem 1.4rem !important;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.touch-device #cubikos-ctx-menu > div > div {
    /* submenú abierto por tap: se despliega debajo, no al lado */
    position: static !important;
    margin: 0.6rem 0 0 !important;
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
    width: 100%;
}
.touch-device #cubikos-ctx-menu > div > div > div {
    padding: 1.2rem 1.2rem !important;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.touch-device #cubikos-ctx-menu > div:has(> div) {
    flex-direction: column;
    align-items: stretch;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8 bis. MODO "PEGAR A OTRO MUEBLE" ARMADO
   ═══════════════════════════════════════════════════════════════════════════════
   Es un modo MODAL que dura un arrastre y por sí solo no se ve: sin este aviso,
   quien toca la entrada del menú y no acierta a arrastrar no sabe si pasó algo.
   La clase `cbk-pegando` la pone y la quita view3d.js (_armarPegado /
   _desarmarPegado); `pointer-events:none` para no robarle el toque al lienzo.
   ═══════════════════════════════════════════════════════════════════════════════ */
html.cbk-pegando #three-container::after {
    content: "Arrastra el mueble hasta el otro para pegarlo";
    position: absolute;
    left: 50%;
    top: 1.6rem;
    transform: translateX(-50%);
    z-index: 500;
    pointer-events: none;
    padding: 1rem 1.8rem;
    border-radius: 2.4rem;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    white-space: nowrap;
    max-width: calc(100vw - 3.2rem);
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 0.6rem 2rem rgba(245, 158, 11, 0.4);
}
/* El borde del lienzo también se tiñe: confirma el modo aunque la píldora
   quede fuera de la vista al girar la tablet. */
html.cbk-pegando #three-container {
    box-shadow: inset 0 0 0 3px rgba(245, 158, 11, 0.75);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8 ter. LOS AVISOS NO SE COMEN LOS GESTOS
   ═══════════════════════════════════════════════════════════════════════════════
   `#toast-container` ya es `pointer-events:none`, pero `.toast` se lo devuelve
   con `pointer-events:auto`, y el aviso vive abajo en el centro — justo encima
   del lienzo. Con ratón da igual (se pasa por encima); con el dedo, el toque
   muere en el aviso: tras tocar "Pegar a otro mueble" el arrastre no llegaba
   al 3D si el mueble caía en esa zona, que en vertical es lo normal.
   Los toasts de Cubikos son informativos (no hay ni un `onclick` en ninguno),
   así que dejarlos pasar el toque no quita nada; por si acaso, lo que sea
   botón o enlace dentro de uno recupera su capacidad de recibirlo.
   ═══════════════════════════════════════════════════════════════════════════════ */
.touch-device .toast {
    pointer-events: none;
}
.touch-device .toast button,
.touch-device .toast a {
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9. BARRA DE NAVEGACIÓN 3D (trackpad-nav-panel)
   ═══════════════════════════════════════════════════════════════════════════════
   Nació para portátiles sin ratón y en una tablet es justo lo que hace falta
   (orbitar, encuadrar, zoom sin gestos). Dos arreglos: sus botones son de
   2.4rem y en vertical el flex los comprimía a 21 px de ancho — medido en
   768x1024 con scratch/diag-tablet.mjs —, y la barra vive al 60% de opacidad
   esperando un `:hover` que en táctil no llega nunca.
   ═══════════════════════════════════════════════════════════════════════════════ */
.touch-device .trackpad-nav-panel {
    opacity: 1;
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100vw - 2.4rem);
    padding: 0.4rem 0.6rem;
    gap: 0;
    border-radius: 1.6rem;
    margin-bottom: env(safe-area-inset-bottom, 0);
    /* Sin esto NO cabe en una fila por mucho que se quiten botones: el panel es
       `position:absolute; left:50%` SIN `right`, así que su ancho disponible es
       solo la mitad derecha del contenedor y envolvía ahí, con media pantalla
       libre al lado. `max-content` deja que mida lo que ocupa su contenido, y
       el `max-width` de arriba sigue poniéndole el techo real. */
    width: max-content;
}

/* ── Menos botones, no botones más pequeños ─────────────────────────────────
   La barra se partía en DOS filas y ocupaba un tercio del ancho. La tentación
   es encoger los botones, pero eso reabre el problema de origen (44 px es un
   dedo). Lo que sobra son botones: con el dedo, ARRASTRAR ya orbita y el
   PELLIZCO ya hace zoom, así que las cuatro flechas de órbita son un mando a
   distancia para algo que se hace tocando la pantalla.
   Se queda el botón central de encuadrar: ese no tiene gesto equivalente.  */
.touch-device .trackpad-nav-orbit .trackpad-nav-btn:not(.trackpad-nav-center) {
    display: none;
}
/* Las vistas son letras y no necesitan 44 px de ancho: van en fila, se aciertan
   por su altura, y estrechándolas la barra cabe de una sola fila. */
.touch-device .trackpad-view-btn {
    width: 3.4rem;
    min-width: 3.4rem;
}
.touch-device .trackpad-nav-group {
    padding: 0;
    gap: 0.1rem;
}
/* En PX, no en rem — por la misma razón que el resto de mínimos táctiles: en
   rem encogían a 42 px en pantallas de 600 de ancho (rem 9.6). */
.touch-device .trackpad-nav-btn,
.touch-device .trackpad-nav-center {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
    border-radius: 1rem;
}
.touch-device .trackpad-nav-btn svg {
    width: 2rem;
    height: 2rem;
}
/* Las vistas rápidas son LETRAS (F/A/I/D/T/3D), no iconos: a 0 px de
   `font-size` heredado del botón salían microscópicas. */
.touch-device .trackpad-nav-btn .tnv-label {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.touch-device .trackpad-nav-separator {
    height: 2.4rem;
    margin: 0 0.3rem;
}
/* El indicador de "modo de entrada" (ratón/trackpad) no pinta nada en una
   tablet: no hay ni ratón ni trackpad que detectar. */
.touch-device .trackpad-mode-indicator {
    display: none;
}
/* Acciones mudadas desde la barra flotante (touchBridge.js). Se separan del
   resto con color propio: girar y actualizar ACTÚAN sobre el diseño, mientras
   que todo lo demás de esta barra solo mueve la cámara. */
.touch-device .cbk-tactil-btn {
    color: rgba(255, 255, 255, 0.9);
}
.touch-device .cbk-tactil-btn[data-cbk^="rotar"] {
    background: rgba(245, 158, 11, 0.22);
    color: #fbbf24;
}
.touch-device .cbk-tactil-btn:active {
    background: rgba(245, 158, 11, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10. ZONAS SEGURAS (iPad con barra de inicio, notch en horizontal)
   ═══════════════════════════════════════════════════════════════════════════════ */
.touch-device #floating-utils-bar,
.touch-device #undo-redo-bar {
    margin-bottom: env(safe-area-inset-bottom, 0);
}
.touch-device .nav-drawer {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10 bis. AVISO "GIRA LA TABLET"
   ═══════════════════════════════════════════════════════════════════════════════
   Solo aparece cuando NO se ha podido forzar el giro: en iPad no existe
   `screen.orientation.lock`, y en Android falla si la entrada al 3D no vino de
   un toque (recargar estando dentro, por ejemplo). Lo pinta touchBridge.js.
   ═══════════════════════════════════════════════════════════════════════════════ */
#cbk-aviso-giro {
    position: fixed;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100001;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: calc(100vw - 2.4rem);
    padding: 1rem 1.2rem 1rem 1.6rem;
    border-radius: 2.4rem;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    box-shadow: 0 0.6rem 2rem rgba(245, 158, 11, 0.4);
}
#cbk-aviso-giro svg {
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
}
#cbk-aviso-giro button {
    background: none;
    border: 0;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    padding: 0 0.4rem;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   11. TABLAS DE DESPIECE Y ERP — scroll horizontal, nunca desbordar la página
   ═══════════════════════════════════════════════════════════════════════════════ */
.touch-device .table-container,
.touch-device .erp-table-wrap,
.touch-device .despiece-wrap {
    overflow-x: auto;
    max-width: 100%;
}