/**
 * CSS Cross-Browser Fixes - Design Reyes
 * Soluciona problemas de compatibilidad entre navegadores
 * Chrome, Firefox, Safari, Edge, Opera, Brave
 */

/* ============================================
   RESET Y NORMALIZACIÓN CROSS-BROWSER
   ============================================ */

/* Box sizing universal */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* Smooth scrolling con fallback */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Body defaults */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================
   FLEXBOX FIXES - Solo prefijos, sin cambiar display
   ============================================ */

/* Flex direction con prefijos */
.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
}

.flex-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
}

/* Flex wrap con prefijos */
.flex-wrap {
  -ms-flex-wrap: wrap;
}

/* Justify content con prefijos */
.justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}

.justify-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}

/* Align items con prefijos */
.align-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
}

/* ============================================
   GRID FIXES - Solo para clases específicas
   ============================================ */

/* Fallback para navegadores sin soporte de gap - solo si se necesita */
@supports not (gap: 1rem) {
  .grid > * {
    margin: calc(var(--gap, 1rem) / 2);
  }
}

/* ============================================
   BACKDROP FILTER / BLUR FIXES
   ============================================ */

/* Backdrop blur con fallbacks */
.panel,
.card,
.modal,
.dropdown,
[class*="blur"] {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Fallback para Firefox (no soporta backdrop-filter completamente) */
@supports not (backdrop-filter: blur(12px)) {
  .panel,
  .card,
  .modal,
  .dropdown,
  [class*="blur"] {
    background-color: rgba(15, 5, 30, 0.95) !important;
  }
}

/* ============================================
   PREFIJOS VENDOR - Sin sobrescribir valores
   ============================================ */

/* Hardware acceleration para animaciones */
[class*="animate"]:not(.no-gpu),
[class*="transition"]:not(.no-gpu) {
  -webkit-transform: translateZ(0);
  transform: translateZ(0
  height: auto;
}

/* Fallback para IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img,
  video {
    width: 100%;
  }
}

/* ============================================
   STICKY POSITIONING - Solo prefijos
   ============================================ */

/* Sticky con prefijo webkit */
.sticky:not([style*="position"]),
[class*="sticky"]:not([style*="position"]) {
  position: -webkit-sticky;
}

/* ============================================
   USER SELECT - Solo añade prefijos
   ============================================ */

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ============================================
   APPEARANCE FIXES
   ============================================ */

/* Remover appearance nativa en inputs */
input,
select,
textarea,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ============================================
   SCROLLBAR CUSTOMIZATION
   ============================================ */

/* Scrollbar para Webkit (Chrome, Safari, Edge, Opera, Brave) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 5, 30, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7c3aed, #a78bfa);
  border-radius: 10px;
  border: 2px solid rgba(15, 5, 30, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6d28d9, #8b5cf6);
}

/* Scrollbar para Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #7c3aed rgba(15, 5, 30, 0.3);
}

/* ============================================
   PLACEHOLDER FIXES
   ============================================ */

/* Placeholder con prefijos */
::-webkit-input-placeholder {
  color: var(--muted, #a5a3c7);
  opacity: 1;
}

::-moz-placeholder {
  color: var(--muted, #a5a3c7);
  opacity: 1;
}

:-ms-input-placeholder {
  color: var(--muted, #a5a3c7);
  opacity: 1;
}

::placeholder {
  color: var(--muted, #a5a3c7);
  opacity: 1;
}

/* ============================================
   FILTER FIXES
   ============================================ */

/* Filter con prefijos */
.blur,
.filter-blur {
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.grayscale,
.filter-grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* ============================================
   CLIP PATH FIXES
   ============================================ */

/* Clip path con prefijos */
.clip-path,
[class*="clip-"] {
  -webkit-clip-path: var(--clip-path, polygon(0 0, 100% 0, 100% 100%, 0 100%));
  clip-path: var(--clip-path, polygon(0 0, 100% 0, 100% 100%, 0 100%));
}

/* ============================================
   ASPECT RATIO FIXES
   ============================================ */

/* Aspect ratio con fallback */
@supports (aspect-ratio: 1) {
  .aspect-square {
    aspect-ratio: 1;
  }
  
  .aspect-video {
    aspect-ratio: 16 / 9;
  }
}

/* Fallback para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 1) {
  .aspect-square::before {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
  
  .aspect-video::before {
    content: "";
    display: block;
    padding-bottom: 56.25%; /* 16:9 */
  }
}

/* ============================================
   TOUCH ACTION FIXES
   ============================================ */

/* Touch action para mejor UX en móviles */
a,
button,
.btn,
.clickable {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

/* ============================================
   FIXES ESPECÍFICOS POR NAVEGADOR
   ============================================ */

/* Safari specific fixes */
@supports (-webkit-backdrop-filter: blur(1px)) {
  /* Safari tiene un bug con backdrop-filter y overflow */
  .panel,
  .modal {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
  /* Firefox tiene problemas con algunos gradients */
  .gradient {
    background-attachment: fixed;
  }
}

/* IE 11 specific fixes (si aún se necesita soporte) */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Fallbacks para IE */
  .flex {
    display: block;
  }
  
  .grid {
    display: block;
  }
}

/* ============================================
   PRINT FIXES
   ============================================ */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  img {
    page-break-inside: avoid;
  }
  
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  
  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */

/* Prevenir overflow horizontal */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Imágenes responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Videos responsive */
video {
  max-width: 100%;
  height: auto;
}

/* Tablas responsive */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}