/* Vualá — app.css */

/* Scrollbar personalizado */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0F0F1A; }
::-webkit-scrollbar-thumb { background: #2A2A45; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #7B2FF7; }

/* Selección de texto */
::selection { background: rgba(255,51,102,0.3); color: #fff; }

/* Input focus global */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,51,102,0.4);
}

/* Input dark styles */
.input-dark {
    background: #1A1A2E;
    border: 1px solid #2A2A45;
    color: #f3f4f6;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    width: 100%;
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}
.input-dark:focus { border-color: #FF3366; box-shadow: 0 0 0 2px rgba(255,51,102,0.15); }
.input-dark::placeholder { color: #6b7280; }

/* Card base */
.card { background: #1A1A2E; border: 1px solid #2A2A45; border-radius: 1rem; }
.card-hover:hover { border-color: rgba(255,51,102,0.3); transition: border-color 0.2s; }

/* BTN primario */
.btn-primary {
    background: linear-gradient(90deg, #FF3366, #FF6B35);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: 50px;
    transition: opacity 0.2s;
    border: none;
    cursor: pointer;
    font-family: 'Sora', system-ui, sans-serif;
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* BTN secundario */
.btn-secondary {
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.12);
    transition: background 0.2s;
    cursor: pointer;
    font-family: 'Sora', system-ui, sans-serif;
}
.btn-secondary:hover { background: rgba(255,255,255,0.14); }

/* Badge tier */
.badge-basico       { background: rgba(255,255,255,0.08); color: #9ca3af; }
.badge-profesional  { background: rgba(123,47,247,0.2);   color: #9B4FF9; }
.badge-premium      { background: rgba(255,184,0,0.2);    color: #FFB800; }

/* Gradient text utility */
.text-gradient {
    background: linear-gradient(90deg, #FF3366, #FF6B35, #FFB800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Page fade in */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.4s ease-out both; }

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #1A1A2E 25%, #252540 50%, #1A1A2E 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 0.5rem;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Story ring */
.story-ring {
    background: linear-gradient(135deg, #FF3366, #FF6B35, #FFB800);
    padding: 2px;
    border-radius: 50%;
}
.story-ring-inner {
    background: #0F0F1A;
    border-radius: 50%;
    padding: 2px;
}

/* Pulso card accent */
.pulso-oferta       { border-left: 3px solid #FF3366; }
.pulso-evento       { border-left: 3px solid #7B2FF7; }
.pulso-disponibilidad { border-left: 3px solid #FFB800; }