/* ==========================================================================
   Hikvision Starter — app-shell.css (Fase 1, v2.1.0)
   "Des-webificador": la web se comporta como una app en móvil.
   Solo propiedades de interacción; NO toca layout ni colores. Se imprime
   DESPUÉS del CSS del plugin Hada para que estas reglas ganen.
   ========================================================================== */

/* 1. Sin rebote elástico ni pull-to-refresh accidental. El scroll de drawers
      y modales tampoco "escapa" hacia la página. */
html,
body {
    overscroll-behavior: none;
}

/* 2. Texto estable al rotar el teléfono (iOS agranda el texto en horizontal). */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 3. Toques sin retraso, sin zoom por doble toque y sin flash gris en enlaces
      y botones. `manipulation` conserva el scroll y el pinch-zoom de la página. */
a,
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
label,
summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 4. iOS hace zoom al enfocar un campo con texto menor de 16px. Solo en
      pantallas táctiles: el escritorio no cambia nada. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        font-size: max(16px, 1em);
    }
}

/* 5. user-select: none SOLO en el chrome de la app (barra, drawer, buscador,
      barra de comparar, snackbar/toast). Nunca en fichas, descripciones ni
      precios: el cliente debe poder copiar un modelo o un precio. */
.hada-bar,
.hada-drawer,
.hada-search-overlay,
.hik-compare-bar,
.fenix-snackbar-container,
.fenix-toast {
    -webkit-user-select: none;
    user-select: none;
}
.hada-search-overlay input {
    -webkit-user-select: text;
    user-select: text;
}

/* 6. Safe areas (viewport-fit=cover): en horizontal, la barra superior no se
      mete debajo del notch. Solo móvil; el padding de escritorio no cambia. */
@media (max-width: 768px) {
    .hada-bar {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* ==========================================================================
   7. View Transitions cross-document (Fase 2, v2.2.0)
   - Solo si el usuario NO pidió menos movimiento (prefers-reduced-motion).
   - En navegadores sin soporte (Firefox, Safari < 18.2) todo este bloque se
     ignora: navegación normal, sin errores.
   - El nombre `product-hero` lo asigna assets/js/view-transitions.js SOLO al
     elemento que viaja (foto de la tarjeta pulsada ↔ foto grande de la ficha).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

@supports (view-transition-name: none) {
    @media (prefers-reduced-motion: no-preference) {
        /* Documento: fundido corto con un leve ascenso (< 300 ms). */
        @keyframes flavor-vt-fade-out {
            from { opacity: 1; }
            to   { opacity: 0; }
        }
        @keyframes flavor-vt-fade-in {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        @keyframes flavor-vt-rise {
            from { transform: translateY(10px); }
            to   { transform: none; }
        }
        ::view-transition-old(root) {
            animation: flavor-vt-fade-out 160ms ease-out both;
        }
        ::view-transition-new(root) {
            animation:
                flavor-vt-fade-in 220ms ease-out both,
                flavor-vt-rise 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
        }

        /* Barra superior: elemento persistente, no se funde con el documento. */
        .hada-bar {
            view-transition-name: hada-bar;
        }
        ::view-transition-group(hada-bar) {
            animation-duration: 200ms;
        }

        /* Foto del producto: el grupo se desplaza y escala entre la tarjeta y la
           ficha; las dos imágenes encajan por `contain` sin deformarse. */
        ::view-transition-group(product-hero) {
            animation-duration: 280ms;
            animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        ::view-transition-image-pair(product-hero) {
            isolation: auto;
        }
        ::view-transition-old(product-hero),
        ::view-transition-new(product-hero) {
            animation: none;
            mix-blend-mode: normal;
            height: 100%;
            width: 100%;
            object-fit: contain;
        }
    }
}