/**
 * Estilos específicos para Safari y dispositivos Apple
 * Correcciones cross-browser para Chrome, Safari, Firefox, Edge, Opera, Samsung Internet, UC Browser
 * Compatible con: iPhone, iPad, Android, Windows, macOS, Linux
 * Versión mejorada con soporte completo para sistema de rotación de temas
 */

/* ============================================
   CORRECCIONES PARA SAFARI iOS
   ============================================ */

/* Fix para viewport height en iOS Safari */
.safari-ios {
    --vh: 1vh; /* Fallback */
}

.safari-ios .full-height {
    height: calc(var(--vh, 1vh) * 100);
    min-height: -webkit-fill-available;
}

/* Fix para elementos con position: fixed en iOS */
.safari-ios [style*="position: fixed"],
.safari-ios .fixed {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Prevenir bounce scroll en iOS */
.safari-ios body {
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}

/* Fix para inputs en iOS */
.safari-ios input,
.safari-ios textarea,
.safari-ios select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    font-size: 16px; /* Previene zoom automático en iOS */
}

/* Fix para botones en iOS */
.safari-ios button {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Fix para scroll suave en iOS */
.safari-ios .smooth-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ============================================
   CORRECCIONES PARA SAFARI macOS
   ============================================ */

/* Fix para elementos con position: fixed en Safari macOS */
.safari-mac [style*="position: fixed"],
.safari-mac .fixed {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Fix para font rendering en Safari macOS */
.safari-mac * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix para flexbox en Safari */
.safari-mac .flex,
.safari-mac [class*="flex"] {
    display: -webkit-flex;
    display: flex;
}

/* Fix para grid en Safari */
.safari-mac .grid,
.safari-mac [class*="grid"] {
    display: -webkit-grid;
    display: grid;
}

/* ============================================
   CORRECCIONES PARA DISPOSITIVOS APPLE
   ============================================ */

/* Fix para dispositivos iOS */
.os-ios * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.os-ios a,
.os-ios button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Fix para macOS */
.os-macos * {
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   CORRECCIONES PARA FIREFOX
   ============================================ */

.browser-firefox * {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.browser-firefox input,
.browser-firefox textarea,
.browser-firefox button {
    -moz-appearance: none;
    appearance: none;
}

/* Fix para scrollbar en Firefox */
.browser-firefox * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* ============================================
   CORRECCIONES PARA EDGE
   ============================================ */

.browser-edge * {
    -ms-font-smoothing: antialiased;
}

/* ============================================
   CORRECCIONES PARA OPERA
   ============================================ */

.browser-opera * {
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   CORRECCIONES RESPONSIVE CROSS-BROWSER
   ============================================ */

/* Dispositivos móviles */
.device-mobile .container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.device-mobile img {
    max-width: 100%;
    height: auto;
}

/* Tablets */
.device-tablet .container {
    max-width: 768px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Desktop */
.device-desktop .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ============================================
   FIXES ESPECÍFICOS PARA ELEMENTOS COMUNES
   ============================================ */

/* Botón scroll to top - compatible con todos los navegadores */
#scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

#scrollToTop.visible {
    opacity: 1;
    visibility: visible;
}

/* Fix para Safari iOS - botón scroll to top */
.safari-ios #scrollToTop {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Fix para modales y overlays */
.modal,
.overlay {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Fix para animaciones en Safari */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.safari-ios .fade-in,
.safari-mac .fade-in {
    animation: fadeIn 0.3s ease;
    -webkit-animation: fadeIn 0.3s ease;
}

/* Fix para transiciones en Safari */
.safari-ios *,
.safari-mac * {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* ============================================
   MEDIA QUERIES CROSS-BROWSER
   ============================================ */

/* iPhone SE y dispositivos pequeños */
@media screen and (max-width: 375px) {
    .device-mobile .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* iPhone y dispositivos medianos */
@media screen and (min-width: 376px) and (max-width: 767px) {
    .device-mobile .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* iPad y tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .device-tablet .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Desktop y pantallas grandes */
@media screen and (min-width: 1025px) {
    .device-desktop .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================
   FIXES PARA ORIENTACIÓN EN DISPOSITIVOS MÓVILES
   ============================================ */

@media screen and (orientation: landscape) {
    .device-mobile .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (orientation: portrait) {
    .device-mobile .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ============================================
   FIXES PARA ALTA DENSIDAD DE PÍXELES (Retina)
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .safari-ios img,
    .safari-mac img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ============================================
   SOPORTE PARA SISTEMA DE ROTACIÓN DE TEMAS
   Compatible con todos los navegadores
   ============================================ */

/* Variables CSS con fallbacks cross-browser */
:root {
    /* Colores primarios con fallbacks */
    --color-primary: #1e3d73;
    --color-primary-light: #92b0e5;
    --color-primary-dark: #0f1f3a;
    --color-surface: #ffffff;
    --color-background: #f5f7fa;
    
    /* RGB para transparencias */
    --primary-rgb: 30, 61, 115;
    --primary-light-rgb: 146, 176, 229;
    --primary-dark-rgb: 15, 31, 58;
    
    /* Gradientes con prefijos */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

/* Soporte para navegadores antiguos */
html {
    /* Fallback para navegadores sin soporte de variables CSS */
    background-color: #f5f7fa;
}

/* ============================================
   FIXES PARA TRANSICIONES DE TEMAS
   ============================================ */

/* Transiciones suaves para cambios de tema */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
    -webkit-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
    -moz-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
    -o-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Prevenir parpadeo durante cambios de tema en Safari */
.safari-ios .theme-transition,
.safari-mac .theme-transition {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ============================================
   FIXES PARA GRADIENTES CROSS-BROWSER
   ============================================ */

/* Gradientes con prefijos para máxima compatibilidad */
.gradient-primary {
    background: -webkit-linear-gradient(top left, var(--color-primary), var(--color-primary-light));
    background: -moz-linear-gradient(top left, var(--color-primary), var(--color-primary-light));
    background: -o-linear-gradient(top left, var(--color-primary), var(--color-primary-light));
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

/* ============================================
   FIXES PARA BOTONES EN TODOS LOS NAVEGADORES
   ============================================ */

/* Botones con estilos de tema */
button,
.btn,
[type="button"],
[type="submit"],
[type="reset"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* Fix para hover en dispositivos táctiles */
@media (hover: none) {
    button:hover,
    .btn:hover,
    [type="button"]:hover,
    [type="submit"]:hover {
        /* Deshabilitar hover en dispositivos sin hover real */
    }
}

/* Fix para active en dispositivos táctiles */
@media (pointer: coarse) {
    button:active,
    .btn:active,
    [type="button"]:active,
    [type="submit"]:active {
        -webkit-transform: scale(0.98);
        -moz-transform: scale(0.98);
        transform: scale(0.98);
    }
}

/* ============================================
   FIXES PARA MODALES EN TODOS LOS NAVEGADORES
   ============================================ */

/* Modal de cantidad en pedidos.php */
.quantity-modal {
    -webkit-overflow-scrolling: touch;
}

.quantity-modal-content {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Botones de cantidad */
.quantity-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ============================================
   FIXES PARA FORMULARIOS EN TODOS LOS NAVEGADORES
   ============================================ */

/* Inputs y textareas */
input,
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px; /* Previene zoom en iOS */
}

/* Fix para autofill en Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface, #ffffff) inset !important;
    -webkit-text-fill-color: var(--color-text-primary, #333333) !important;
}

/* ============================================
   FIXES PARA SCROLLBARS EN TODOS LOS NAVEGADORES
   ============================================ */

/* Scrollbar personalizado - WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary, #1e3d73);
    border-radius: 4px;
    opacity: 0.7;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark, #0f1f3a);
}

/* Scrollbar personalizado - Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary, #1e3d73) rgba(0, 0, 0, 0.05);
}

/* ============================================
   FIXES PARA ANIMACIONES EN TODOS LOS NAVEGADORES
   ============================================ */

/* Animación de rotación para iconos de carga */
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@-o-keyframes spin {
    from { -o-transform: rotate(0deg); }
    to { -o-transform: rotate(360deg); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.fa-spin,
.spinner {
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

/* ============================================
   FIXES PARA SAMSUNG INTERNET Y UC BROWSER
   ============================================ */

.browser-samsung *,
.browser-ucbrowser * {
    -webkit-font-smoothing: antialiased;
}

.browser-samsung button,
.browser-ucbrowser button {
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================
   FIXES PARA DISPOSITIVOS ANDROID
   ============================================ */

.os-android * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.os-android input,
.os-android textarea,
.os-android select {
    font-size: 16px;
}

/* ============================================
   SOPORTE PARA PREFERS-COLOR-SCHEME
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Los temas se manejan dinámicamente por JavaScript */
    /* Este bloque está preparado para futuras implementaciones de modo oscuro */
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   FIXES PARA IMPRESIÓN
   ============================================ */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}