/* ============================================================
   NeguWeb Hub - Estilos CSS de Alta Gama (Tema Crema-Slate-Oro)
   Diseño Refinado, Premium y Responsivo Adaptable a Móviles
   ============================================================ */

/* Estilos Base */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #fdfbf7 !important; /* Suave blanco crema */
    background-image: radial-gradient(rgba(47, 79, 79, 0.04) 1px, transparent 1px) !important; /* Sutil textura de lino */
    background-size: 24px 24px !important;
    color: #1c2a2a !important; /* Slate oscuro / pizarra */
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'Inter', sans-serif;
}

/* Scrollbar Personalizado */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1ebd9;
}

::-webkit-scrollbar-thumb {
    background: #2f4f4f; /* Verde pizarra */
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1e1b4b; /* Indigo oscuro */
}

/* Glassmorphism Refinado para el Tema Claro */
.glass-card {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(47, 79, 79, 0.08) !important;
    border-radius: 1rem;
    box-shadow: 0 10px 30px -10px rgba(47, 79, 79, 0.05) !important;
    transition: all 0.3s ease;
}

.glass-card:hover {
    box-shadow: 0 15px 35px -8px rgba(47, 79, 79, 0.1) !important;
}

/* Navbar de Alta Gama */
#main-nav {
    background-color: rgba(253, 251, 247, 0.8) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(47, 79, 79, 0.06) !important;
}

#main-nav a:not(.btn-premium-nav):not(.btn-comenzar-nav) {
    color: #2f4f4f !important; /* Verde pizarra profundo */
}

#main-nav a:not(.btn-premium-nav):not(.btn-comenzar-nav):hover {
    color: #0f766e !important; /* Teal */
    background-color: rgba(15, 118, 110, 0.05);
}

/* Botón Premium Nav (Índigo oscuro + Oro pulido) */
.btn-premium-nav {
    background-color: #1e1b4b !important; /* Índigo oscuro */
    color: #ffffff !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important; /* Oro pulido */
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(30, 27, 75, 0.15);
    transition: all 0.3s ease;
}

.btn-premium-nav:hover {
    border-color: #d4af37 !important; /* Oro brillante */
    box-shadow: 0 6px 16px rgba(30, 27, 75, 0.25);
    transform: translateY(-1px);
}

/* Botón Comenzar / CTA de Alta Gama */
.btn-comenzar-nav, .btn-primary {
    background: linear-gradient(135deg, #0f766e 0%, #0891b2 100%) !important; /* Teal a Cian Oscuro */
    color: #ffffff !important;
    font-weight: 600;
    border: none !important;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25) !important;
    transition: all 0.2s ease;
}

.btn-comenzar-nav:hover, .btn-primary:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.35) !important;
}

.btn-secondary {
    background-color: rgba(47, 79, 79, 0.05) !important;
    color: #2f4f4f !important;
    border: 1px solid rgba(47, 79, 79, 0.1) !important;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background-color: rgba(47, 79, 79, 0.1) !important;
    transform: translateY(-1px);
}

/* Gradientes */
.gradient-text {
    background-image: linear-gradient(135deg, #0f766e, #0891b2, #1e1b4b) !important;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.gradient-text-green {
    background-image: linear-gradient(135deg, #15803d, #0f766e) !important;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* Badges */
.badge-free {
    background-color: rgba(21, 128, 61, 0.1) !important; /* Verde bosque */
    color: #15803d !important;
    border: 1px solid rgba(21, 128, 61, 0.2) !important;
}

.badge-premium {
    background-color: rgba(30, 27, 75, 0.08) !important; /* Índigo */
    color: #1e1b4b !important;
    border: 1px solid rgba(30, 27, 75, 0.15) !important;
}

/* Tarjetas de Categorías con Iluminación */
.category-card {
    background-color: #ffffff !important;
    border: 1px solid rgba(47, 79, 79, 0.08) !important;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(47, 79, 79, 0.06);
    border-color: rgba(212, 175, 55, 0.2) !important; /* Borde oro sutil */
}

/* Tarjetas de PDF ("Más Descargados") */
.pdf-card {
    background-color: #ffffff !important;
    border: 1px solid rgba(47, 79, 79, 0.08) !important;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pdf-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(47, 79, 79, 0.08);
    border-color: rgba(15, 118, 110, 0.2) !important;
}

/* Sección Superior de las Tarjetas con Fondo Índigo Profundo */
.pdf-card-header-indigo {
    background: #1e1b4b !important; /* Índigo profundo */
}

/* Insignias de la tarjeta */
.pdf-card-badge-free {
    background-color: #15803d !important; /* Verde bosque */
    color: #ffffff !important;
}

/* Noise overlay */
.noise-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* Hero Background Gradient (Tema Claro Cream) */
.hero-bg {
    background: 
        radial-gradient(ellipse at 15% 40%, rgba(8, 145, 178, 0.05) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 15%, rgba(30, 27, 75, 0.03) 0%, transparent 45%),
        #fdfbf7 !important;
}

/* Estilos de Textos */
.text-white {
    color: #1c2a2a !important; /* Pizarra oscuro */
}

.text-gray-400, .text-gray-300 {
    color: #5a6e6e !important; /* Pizarra medio */
}

.text-gray-500 {
    color: #7a8e8e !important;
}

.border-white\/5, .border-white\/10, .border-white\/20, .border-white\/30 {
    border-color: rgba(47, 79, 79, 0.08) !important;
}

/* Inputs en Tema Claro */
.input-field {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #ffffff !important;
    border: 1px solid rgba(47, 79, 79, 0.15) !important;
    border-radius: 0.75rem;
    color: #1c2a2a !important;
    transition: all 0.2s ease;
}

.input-field:focus {
    outline: none;
    border-color: #0f766e !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

/* Estrellas de Calificación */
.star-filled { color: #d4af37 !important; } /* Oro */
.star-empty { color: #cbd5e1 !important; }

/* -------------------------------------------------------------
   WIDGETS FLOTANTES PERSONALIZADOS (ESTILO ALTA GAMA)
   ------------------------------------------------------------- */

/* Streaming Widget Flotante (Verde Pizarra Oscuro Limpio) */
#floating-streaming-panel .glass-card {
    background-color: #1e2e2e !important; /* Verde pizarra oscuro limpio */
    border: 1px solid rgba(13, 148, 136, 0.2) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15) !important;
}

#floating-streaming-panel .text-white {
    color: #ffffff !important;
}

#floating-streaming-panel .text-gray-500 {
    color: #94a3b8 !important;
}

#streaming-buy-btn {
    background: #0d9488 !important; /* Verde azulado brillante */
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3) !important;
}

#streaming-buy-btn:hover {
    background: #0f766e !important;
    transform: translateY(-1px);
}

/* Ofertas Widget Flotante (Cabecera Coral Oscuro) */
#floating-offers-widget .glass-card {
    background-color: #ffffff !important;
    border: 1px solid rgba(47, 79, 79, 0.08) !important;
    color: #1c2a2a !important;
    box-shadow: 0 20px 45px rgba(47, 79, 79, 0.12) !important;
}

#floating-offers-widget .border-b {
    background-color: #c2410c !important; /* Cabecera Coral Oscuro */
    color: #fef3c7 !important; /* Texto crema */
    border-bottom: none !important;
}

#floating-offers-widget .text-white {
    color: #1c2a2a !important;
}

#floating-offers-widget .timer-countdown {
    color: #c2410c !important;
}

#offers-buy-btn {
    background: linear-gradient(135deg, #06b6d4 0%, #c2410c 100%) !important; /* Cian a Coral */
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(194, 65, 12, 0.25) !important;
}

#offers-buy-btn:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-1px);
}