@import url("themes.fead10d4bf85.css");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body, div, nav, button, input, span, a, select, textarea {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }
  
  /* =========================================
     SOLUCIÓN DEFINITIVA BUG DE TRANSPARENCIA EN MÓVILES (IOS SAFARI)
     ========================================= */
  body:not([data-theme="dark"]):not([data-theme="light"]):not([data-theme="enterprise"]):not([data-theme="custom"]) {
    background-color: #05000a !important; 
  }
  
  body:not([data-theme="dark"]):not([data-theme="light"]):not([data-theme="enterprise"]):not([data-theme="custom"])::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at 50% 40%, #581c87 0%, #2e1065 45%, #05000a 100%) !important;
    z-index: -9999; pointer-events: none;
  }

  /* Fix Degradado iOS Enterprise */
  body[data-theme="enterprise"] { background-color: #020617 !important; }
  body[data-theme="enterprise"]::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at 50% 40%, #1e3a8a 0%, #0f172a 60%, #020617 100%) !important;
    z-index: -9999; pointer-events: none;
  }
  
  /* ESTILOS GLOBALES PARA SELECTORES (DROPDOWNS) */
  select {
    background-color: var(--bg-tarjeta);
    color: var(--texto-principal);
  }

  select option {
    background-color: var(--bg-tarjeta);
    color: var(--texto-principal);
    padding: 8px;
  }
}

@layer components {
  .contenedor-principal {
    @apply min-h-screen flex items-center justify-center;
    background-color: var(--bg-pagina);
  }

  .botones-principales {
    @apply grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl w-full p-4;
  }

  .btn-principal {
    @apply flex flex-col items-center justify-center p-6 
           rounded-xl shadow-lg 
           transition-all duration-300 transform hover:-translate-y-1 
           text-center decoration-0 cursor-pointer backdrop-blur-md;
    
    background-color: var(--bg-tarjeta);
    border: 1px solid var(--borde-principal);
    color: var(--texto-principal);
  }

  .btn-principal:hover {
    box-shadow: 0px 8px 25px rgba(147, 51, 234, 0.4);
    border-color: var(--color-acento);
  }

  .btn-principal span {
    @apply text-xs font-light mt-2;
    color: var(--texto-secundario);
  }

  .tag-transaccion {
    background-color: var(--bg-tag);
    color: var(--color-info);
    border: 1px solid var(--border-tag);
    @apply backdrop-blur-sm;
  }
  
  .text-info-dinamico {
    color: var(--color-info);
  }

  /* EFECTO APPLE WALLET */
  .wallet-stack {
    @apply flex flex-col items-center pt-4 pb-32 w-full max-w-md mx-auto relative;
  }
  .wallet-card {
    @apply w-full rounded-2xl p-6 shadow-xl cursor-pointer text-white relative transition-all duration-500 ease-out flex flex-col justify-between backdrop-blur-md;
    background-color: var(--bg-tarjeta);
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 220px;
    margin-top: -140px; 
    transform-origin: top center;
  }
  .wallet-card:first-child {
    margin-top: 0;
  }
  .wallet-card:hover, .wallet-card.active {
    transform: translateY(-40px);
    margin-bottom: 40px;
    z-index: 50 !important;
    box-shadow: 0 -10px 30px rgba(147, 51, 234, 0.5);
  }

  /* SMART SAVE PILL (Efecto Dynamic Island) */
  .smart-pill-active {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 280px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    border-radius: 9999px !important;
    transform: translateY(calc(-50vh + 80px)) !important; 
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
  }

  .smart-pill-border {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: conic-gradient(from 0deg, transparent 40%, var(--color-acento) 80%, #ffffff 100%);
    animation: smart-spin 1s linear infinite;
    z-index: 0;
  }

  .smart-pill-inner {
    position: absolute;
    inset: 2px;
    background-color: var(--bg-tarjeta);
    border-radius: 9999px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .smart-pill-content {
    color: var(--texto-principal);
    font-size: 0.875rem; 
    font-weight: 700;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: fade-in-up 0.4s ease forwards 0.3s; 
  }
}

/* =========================================
   KEYFRAMES GLOBALES
   ========================================= */
@keyframes smart-spin {
  100% { transform: rotate(360deg); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   UTILIDADES REUTILIZABLES
   ========================================= */
.scrollbar-fino {
  scrollbar-width: thin; 
  scrollbar-color: var(--borde-principal) transparent; 
}

.scrollbar-fino::-webkit-scrollbar {
  width: 4px; 
  height: 4px; 
}

.scrollbar-fino::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-fino::-webkit-scrollbar-thumb {
  background-color: var(--borde-principal); 
  border-radius: 10px;
}

.scrollbar-fino::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-acento); 
}

.salto {
    margin: 20px 0 0 0;
    height: 1.5px;
    width:  100%;
    background: var(--borde-principal);
    opacity: 0.3;
}

/* =========================================
   FIXES DE COMPATIBILIDAD MÓVIL Y GESTOS
   ========================================= */
.backdrop-blur { -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; }
.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; }
.backdrop-blur-md { -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; }
.backdrop-blur-lg { -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; }
.backdrop-blur-xl { -webkit-backdrop-filter: blur(24px) !important; backdrop-filter: blur(24px) !important; }
.backdrop-blur-2xl { -webkit-backdrop-filter: blur(40px) !important; backdrop-filter: blur(40px) !important; }

.kpi-swiper-container, .swipe-content {
    touch-action: pan-y pinch-zoom;
}

.kpi-wrapper { 
    transition: transform 0.3s ease-out; 
}
.kpi-dot { 
    transition: all 0.3s ease; 
}