/**
 * ============================================================================
 * ESTILOS DE COMPATIBILIDAD CROSS-BROWSER
 * ============================================================================
 *
 * Este archivo CSS maneja las diferencias visuales y de comportamiento
 * entre diferentes navegadores y plataformas.
 *
 * Soporta:
 * - Chrome (todas las plataformas)
 * - Edge (Windows, macOS, Linux)
 * - Firefox (todas las plataformas)
 * - Safari (macOS, iOS)
 */

/* ============================================================================
   VARIABLES CSS PARA CADA NAVEGADOR
   ============================================================================ */

:root {
  --scrollbar-width: 0px;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

/* Ancho de scrollbar por navegador */
.browser-firefox {
  --scrollbar-width: 17px;
}

.browser-edge,
.browser-chrome {
  --scrollbar-width: 12px;
}

.browser-safari {
  --scrollbar-width: 15px;
}

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

/* Microsoft Edge */
.browser-edge {
  /* Edge soporta características modernas de CSS */
}

.browser-edge ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.browser-edge ::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.browser-edge ::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

.browser-edge ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Mozilla Firefox */
.browser-firefox {
  /* Firefox usa propiedades estándar de scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.browser-firefox * {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/* Fixes específicos de Firefox */
.browser-firefox input[type="date"],
.browser-firefox input[type="time"],
.browser-firefox input[type="datetime-local"] {
  /* Firefox renderiza inputs de fecha/hora diferente */
  min-height: 40px;
}

.browser-firefox select {
  /* Mejorar apariencia de selects en Firefox */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%;
  background-size: 1.2rem auto;
  padding-right: 2.5rem;
}

/* Safari (macOS & iOS) */
.browser-safari {
  /* Desactivar tap highlight en Safari iOS */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.browser-safari * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.browser-safari input,
.browser-safari textarea,
.browser-safari select {
  /* Safari iOS aplica estilos nativos - resetear */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 8px;
}

.browser-safari input[type="search"] {
  /* Safari añade decoración extra a search inputs */
  -webkit-appearance: none;
  appearance: none;
}

.browser-safari input[type="search"]::-webkit-search-decoration,
.browser-safari input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Standalone mode (PWA instalada) en Safari */
.browser-safari.safari-standalone {
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
}

/* Chrome */
.browser-chrome ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.browser-chrome ::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.browser-chrome ::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

.browser-chrome ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ============================================================================
   ESTILOS ESPECÍFICOS POR PLATAFORMA
   ============================================================================ */

/* Windows */
.platform-windows {
  /* Fuentes más legibles en Windows */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.platform-windows body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* macOS */
.platform-mac {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.platform-mac body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
}

/* Linux */
.platform-linux {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.platform-linux body {
  font-family: 'Inter', system-ui, 'Ubuntu', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* Android */
.platform-android {
  /* Prevenir zoom en inputs en Android */
  touch-action: manipulation;
}

.platform-android input,
.platform-android textarea,
.platform-android select {
  font-size: 16px; /* Previene zoom automático en iOS/Android */
}

/* iOS */
/* CRITICAL FIX: Apply safe-area to HTML, not BODY to prevent notch collision */
html.platform-ios {
  /* Use constant() for iOS 11.0-11.2 compatibility */
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.platform-ios body {
  /* Don't add padding to body - it's handled by html element */
  /* Ensure body fills the viewport properly */
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

.platform-ios input,
.platform-ios textarea,
.platform-ios select {
  font-size: 16px; /* Previene zoom automático */
}

/* ============================================================================
   FIXES PARA PWA INSTALADA (STANDALONE MODE)
   ============================================================================ */

.is-standalone {
  /* Cuando está instalada como PWA */
}

/* iOS Standalone (instalada en home screen) */
/* Safe area is now handled by html element, not body */
html.platform-ios.is-standalone {
  /* Ensure minimum padding even if safe-area-inset-top is 0 */
  padding-top: max(constant(safe-area-inset-top), 20px);
  padding-top: max(env(safe-area-inset-top), 20px);
}

/* Fixed positioned elements need safe-area adjustments */
.platform-ios.is-standalone .header,
.platform-ios.is-standalone .top-bar,
.platform-ios.is-standalone .navbar {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

/* Android Standalone (instalada como PWA) */
.platform-android.is-standalone {
  /* Android no tiene notch generalmente, pero sí bordes */
}

/* Desktop Standalone (instalada como PWA) */
.platform-windows.is-standalone,
.platform-mac.is-standalone,
.platform-linux.is-standalone {
  /* Ventana dedicada en desktop */
}

/* ============================================================================
   NOTIFICACIONES Y PERMISOS - ESPECÍFICO POR NAVEGADOR
   ============================================================================ */

/* Estilos para prompts de instalación */
.install-prompt {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: #1434CB;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  width: 400px;
}

/* Firefox no soporta beforeinstallprompt, mostrar instrucciones diferentes */
.browser-firefox .install-prompt {
  /* Instrucciones específicas de Firefox */
}

.browser-firefox .install-prompt::before {
  content: "Para instalar: Menú → Instalar sitio como app";
  display: block;
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

/* Edge muestra su propio prompt */
.browser-edge .install-prompt {
  /* Edge soporta beforeinstallprompt */
}

/* Safari iOS muestra instrucciones de "Add to Home Screen" */
.browser-safari.platform-ios .install-prompt {
  /* Instrucciones específicas de Safari iOS */
}

/* ============================================================================
   MEDIA QUERIES PARA DIFERENTES RESOLUCIONES
   ============================================================================ */

/* REMOVED: Font-size adjustments that were breaking responsive design
   The classes .browser-* are applied to <html> element and changing
   font-size there affects all rem/em calculations across the entire page.
   Let the existing responsive.css handle font sizing instead. */

/* ============================================================================
   ACCESIBILIDAD CROSS-BROWSER
   ============================================================================ */

/* Focus visible mejorado para todos los navegadores */
*:focus-visible {
  outline: 2px solid #1434CB;
  outline-offset: 2px;
}

/* Firefox usa outline diferente */
.browser-firefox *:focus-visible {
  outline: 2px dashed #1434CB;
}

/* Safari necesita prefix webkit */
.browser-safari *:focus-visible {
  -webkit-focus-ring-color: #1434CB;
}

/* Reducir motion para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   PRINT STYLES - CROSS-BROWSER
   ============================================================================ */

@media print {
  /* Estilos de impresión consistentes */
  .browser-firefox,
  .browser-safari,
  .browser-chrome,
  .browser-edge {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

/* ============================================================================
   FEATURES NO SOPORTADAS - FALLBACKS
   ============================================================================ */

/* CSS Grid fallback para navegadores muy antiguos (muy raro en 2024) */
@supports not (display: grid) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
}

/* Flexbox gap fallback para navegadores antiguos */
@supports not (gap: 1rem) {
  .flex-gap > * {
    margin: 0.5rem;
  }
}

/* ============================================================================
   ANIMACIONES Y TRANSICIONES OPTIMIZADAS
   ============================================================================ */

/* Chrome y Edge optimizan bien las animaciones con GPU */
.chromium-based .animated {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Firefox prefiere no usar will-change todo el tiempo */
.browser-firefox .animated {
  /* Solo aplicar will-change cuando sea necesario */
}

/* Safari necesita -webkit prefix para algunas animaciones */
.browser-safari .animated {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ============================================================================
   UTILIDADES DE DEBUG (SOLO DESARROLLO)
   ============================================================================ */

/* Mostrar qué navegador está siendo usado (solo si ?debug=browser) */
body[data-debug="browser"]::before {
  content: "Navegador: " attr(class);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #000;
  color: #0f0;
  padding: 5px 10px;
  font-family: monospace;
  font-size: 12px;
  z-index: 999999;
  text-align: center;
}

.browser-chrome body[data-debug="browser"]::before { content: "Chrome / Chromium"; background: #4285f4; }
.browser-edge body[data-debug="browser"]::before { content: "Microsoft Edge"; background: #0078d7; }
.browser-firefox body[data-debug="browser"]::before { content: "Mozilla Firefox"; background: #ff7139; }
.browser-safari body[data-debug="browser"]::before { content: "Safari"; background: #006cff; }

/* ============================================================================
   CORRECCIONES DE RESPONSIVIDAD ESPECÍFICAS PARA SAFARI
   ============================================================================ */

/**
 * Safari tiene problemas únicos de renderizado que afectan la responsividad:
 * 1. Cálculo de box-model diferente con borders + padding
 * 2. Renderizado de iconos dentro de elementos circulares
 * 3. Transforms sin prefijos -webkit- pueden fallar
 * 4. Line-height afecta el centrado vertical de iconos
 */

/* Asegurar box-sizing consistente en Safari */
.browser-safari *,
.browser-safari *::before,
.browser-safari *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Corrección global para botones flotantes en Safari */
.browser-safari .floating-button,
.browser-safari .tally-btn {
  /* Forzar box-sizing para evitar desbordamiento */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  /* Asegurar que los transforms usen prefijo webkit */
  -webkit-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);

  /* Forzar centrado preciso */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* FIX: Botón "Iniciar sesión" (.login-btn) se ve más grande en Safari */
.browser-safari .login-btn,
.browser-safari .tally-btn {
  /* Forzar box-sizing para incluir border en el tamaño total */
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;

  /* Ajustar padding para compensar el border */
  padding: 1.1rem 2.3rem;

  /* Asegurar que el tamaño sea consistente */
  min-height: auto;
  height: auto;
}

/* FIX: Logo de WhatsApp fuera del círculo verde (.chat-support) */
.browser-safari .chat-support,
.browser-safari .floating-button {
  /* Asegurar dimensiones exactas del círculo */
  width: 5.6rem;
  height: 5.6rem;
  min-width: 5.6rem;
  min-height: 5.6rem;
  max-width: 5.6rem;
  max-height: 5.6rem;

  /* Forzar border-radius perfecto */
  -webkit-border-radius: 50%;
  border-radius: 50%;

  /* Asegurar que el contenido no desborde */
  overflow: hidden;

  /* Line-height para centrado vertical perfecto */
  line-height: 1;
}

/* Corrección específica para iconos dentro de botones circulares */
.browser-safari .chat-support i,
.browser-safari .floating-button i {
  /* Tamaño del icono ajustado para Safari */
  font-size: 2.2rem !important;

  /* Centrado perfecto */
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;

  /* Eliminar line-height extra */
  line-height: 1;

  /* Asegurar que el icono no tenga margin/padding extra */
  margin: 0;
  padding: 0;

  /* Centrado vertical y horizontal preciso */
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

/* Corrección para iconos de FontAwesome específicamente */
.browser-safari .fab,
.browser-safari .fas,
.browser-safari .far,
.browser-safari .fal {
  /* Renderizado anti-aliasing mejorado */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Asegurar que los iconos se rendericen en su posición exacta */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Corrección para transforms en hover/active en Safari */
.browser-safari .floating-button:hover,
.browser-safari .tally-btn:hover {
  -webkit-transform: scale(1.1) translateY(-5px);
  transform: scale(1.1) translateY(-5px);
}

.browser-safari .floating-button:active,
.browser-safari .tally-btn:active {
  -webkit-transform: scale(1.05) translateY(-2px);
  transform: scale(1.05) translateY(-2px);
}

/* Corrección para la escala de botones en responsive (media queries) */
@media (max-width: 992px) {
  .browser-safari .floating-button,
  .browser-safari .tally-btn,
  .browser-safari .floating-promo {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@media (max-width: 768px) {
  .browser-safari .floating-button,
  .browser-safari .tally-btn,
  .browser-safari .floating-promo {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  /* Ajustar tamaño de iconos en mobile Safari */
  .browser-safari .chat-support i,
  .browser-safari .floating-button i {
    font-size: 2rem !important;
  }
}

@media (max-width: 576px) {
  .browser-safari .floating-button,
  .browser-safari .tally-btn,
  .browser-safari .floating-promo {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
}

/* FIX: Botones con ::before pseudo-elementos en Safari */
.browser-safari .floating-button::before,
.browser-safari .tally-btn::before {
  /* Asegurar que el pseudo-elemento no afecte el layout */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  /* Forzar posicionamiento absoluto correcto */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Pointer events none para que no interfiera con clics */
  pointer-events: none;
}

/* Corrección para tooltips en Safari */
.browser-safari .floating-button-tooltip {
  /* Asegurar que el tooltip se renderice correctamente */
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);

  /* Font smoothing para mejor legibilidad */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.browser-safari .floating-button:hover .floating-button-tooltip {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* Corrección para gaps en flexbox (Safari < 14.1) */
@supports not (gap: 1rem) {
  .browser-safari .floating-button,
  .browser-safari .tally-btn {
    /* Fallback para gap en Safari antiguo */
  }
}

/* Corrección para backdrop-filter en Safari */
.browser-safari .navbar,
.browser-safari .control-panel,
.browser-safari .mobile-menu,
.browser-safari .menu-overlay {
  /* Asegurar prefijo webkit para backdrop-filter */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Prevenir problemas de subpixel rendering en Safari */
.browser-safari .floating-button,
.browser-safari .tally-btn,
.browser-safari .chat-support {
  /* Forzar renderizado en pixels completos */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /* Anti-aliasing mejorado */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}