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

@layer base {
  /* =========================================
     1. TEMA PREDETERMINADO (Deep Purple Glow - Basado en la imagen)
     ========================================= */
  :root {
    color-scheme: dark; /* Habilita el modo oscuro en elementos nativos del navegador */
    
    /* El fondo real ahora es un degradado aplicado directamente al body, 
       pero mantenemos un color base oscuro como fallback */
    --bg-pagina: linear-gradient(180deg, #420f8e 0%, #621b85 50%, #6a2ca9 100%); 
    
    /* Tarjetas con un morado muy oscuro y translúcido para dejar ver el degradado */
    --bg-tarjeta: rgba(25, 10, 45, 1); 
    
    --borde-principal: #7e22ce; /* Morado vibrante */
    --borde-secundario: #a855f7;
    
    /* Letras blancas y morado claro para que resalten fuertemente sobre el fondo oscuro */
    --texto-principal: #ffffff; 
    --texto-secundario: #e9d5ff; 
    --color-acento: #c084fc;
    
    /* Nuevas variables para etiquetas y textos informativos */
    --color-info: #d8b4fe; 
    --bg-tag: rgba(126, 34, 206, 0.25); 
    --border-tag: #9333ea;
  }

  /* =========================================
     2. TEMA OSCURO (Luxury: Negro + Dorado)
     ========================================= */
  [data-theme="dark"] {
    color-scheme: dark; /* Elementos nativos en oscuro */
    
    --bg-pagina: #000000;
    --bg-tarjeta: #0a0a0a;
    --borde-principal: #D4AF37;
    --borde-secundario: #B8860B;
    --texto-principal: #F5F5F5;
    --texto-secundario: #D4AF37;
    --color-acento: #D4AF37;

    /* Etiquetas Doradas */
    --color-info: #D4AF37; 
    --bg-tag: rgba(212, 175, 55, 0.15);
    --border-tag: #B8860B;
  }

  /* =========================================
     3. TEMA CLARO (Beige Orgánico + Morado)
     ========================================= */
  [data-theme="light"] {
    color-scheme: light; /* Elementos nativos en claro */
    
    /* Fondo: BEAN SPROUTS SEED */
    --bg-pagina: #F4E6C3;        
    
    /* Tarjetas: LIGHT BEAN SPROUTS (Crema suave, mejor que blanco puro) */
    --bg-tarjeta: #FAF4E1;       

    --borde-principal: #4B0082;  
    --borde-secundario: #D4AF37; 

    --texto-principal: #2c2c2c;  
    --texto-secundario: #4B0082; 

    --color-acento: #4B0082;

    /* Etiquetas Moradas */
    --color-info: #4B0082;
    --bg-tag: rgba(75, 0, 130, 0.1); 
    --border-tag: #4B0082;     
  }
  
  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;
  }
  
  body.js-loading {
    visibility: hidden;
  }

  /* =========================================
     SOLUCIÓN DEFINITIVA BUG DE TRANSPARENCIA EN MÓVILES (IOS SAFARI)
     El background-attachment: fixed en el body rompe los backdrop-filter.
     Lo solucionamos moviendo el degradado fijo a un ::before
     ========================================= */
  body:not([data-theme="dark"]):not([data-theme="light"]) {
    background-color: #05000a !important; /* Fallback de color sólido */
  }

  body:not([data-theme="dark"]):not([data-theme="light"])::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;
  }

  /* =========================================
     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; /* Pequeño respiro interno para las opciones */
  }
}

@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);
  }

  /* Clase de utilidad para las etiquetas (Tags) */
  .tag-transaccion {
    background-color: var(--bg-tag);
    color: var(--color-info);
    border: 1px solid var(--border-tag);
    @apply backdrop-blur-sm;
  }
  
  /* Clase para texto informativo (números de transferencia) */
  .text-info-dinamico {
    color: var(--color-info);
  }

  /* =========================================
     EFECTO APPLE WALLET (NUEVO)
     ========================================= */
  .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; /* Solapamiento drástico */
    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);
  }
}

/* =========================================
   UTILIDADES REUTILIZABLES (Scrollbars, Helpers)
   ========================================= */

/* Scrollbar Fino y Elegante (Reutilizable) */
.scrollbar-fino {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--borde-principal) transparent; /* Firefox */
}

.scrollbar-fino::-webkit-scrollbar {
  width: 4px; /* Ancho delgado */
  height: 4px; /* Alto delgado (para scroll horizontal) */
}

.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); /* Brilla al hacer hover */
}

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


@layer components {
  /* =========================================
     SMART SAVE PILL (Efecto Dynamic Island)
     ========================================= */
  
  /* Contenedor mutado */
  .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;
    
    /* MAGIA: Lo sube suavemente a la parte superior de la pantalla */
    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;
  }

  /* Borde giratorio con degradado cónico */
  .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;
  }

  /* Fondo interno de la píldora (para tapar el centro del degradado) */
  .smart-pill-inner {
    position: absolute;
    inset: 2px; /* Grosor del borde */
    background-color: var(--bg-tarjeta);
    border-radius: 9999px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* Texto y layout dentro de la píldora */
  .smart-pill-content {
    color: var(--texto-principal);
    font-size: 0.875rem; /* text-sm */
    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; /* Aparece después del morphing */
  }

  @keyframes smart-spin {
    100% { transform: rotate(360deg); }
  }

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

/* =========================================
   FIXES DE COMPATIBILIDAD MÓVIL Y GESTOS
   ========================================= */

/* Agregamos TODAS las variantes de blur de Tailwind para asegurar soporte webkit global */
.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;
}

/* Animaciones para KPIs (Movidas desde base.html) */
.kpi-wrapper { 
    transition: transform 0.3s ease-out; 
}
.kpi-dot { 
    transition: all 0.3s ease; 
}