/* js/styles.css */

/* --- UTILIDADES GENERALES --- */
body {
    -webkit-tap-highlight-color: transparent;
    font-family: 'Quicksand', sans-serif;
}

/* Ocultar scrollbar pero permitir scroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Animaciones */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.animate-slide-up { animation: slideUp 0.4s cubic-bezier(0.19, 1, 0.22, 1); }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in { animation: fadeIn 0.3s ease-in; }

/* Scrollbar personalizada para el contenido principal (Estética) */
#main-content::-webkit-scrollbar { width: 5px; }
#main-content::-webkit-scrollbar-thumb { background-color: #E1BEE7; border-radius: 10px; }
#main-content::-webkit-scrollbar-track { background-color: transparent; }

/* Inputs Bonitos */
.input-bocaccio:focus { box-shadow: 0 0 0 2px #BA68C8; }

/* --- IOS PICKER (RUEDA 3D) --- */
.wheel-container {
    perspective: 1000px;
    transform-style: preserve-3d;
    position: relative;
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

.wheel-item {
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s, color 0.2s;
    transform-origin: center center;
    opacity: 0.3;
    transform: scale(0.85) rotateX(25deg);
    height: 48px; /* Debe coincidir con el JS */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.wheel-item-active {
    opacity: 1 !important;
    transform: scale(1.15) rotateX(0deg) !important;
    color: #BA68C8 !important; /* Brand Main */
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(186, 104, 200, 0.3);
}

/* --- CLASES BPM (ADMIN REPORTS) --- */
.bpm-label {
    display: block; font-size: 0.65rem; font-weight: 800; color: #9CA3AF; 
    margin-bottom: 4px; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.05em;
}
.bpm-input {
    width: 100%; padding: 10px; background-color: #F9FAFB; border: 1px solid #E5E7EB; 
    border-radius: 10px; font-size: 0.85rem; color: #37474F; outline: none; transition: all 0.2s; font-weight: 600;
}
.bpm-input:focus {
    border-color: #BA68C8; background-color: #fff; box-shadow: 0 0 0 3px rgba(186, 104, 200, 0.1);
}

/* Safe Area para iPhone X+ */
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* --- ESTILOS DE GUIDE / TOUR --- */
.tour-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); z-index: 90;
    transition: opacity 0.3s; pointer-events: auto;
}

.tour-highlight {
    position: relative; z-index: 95;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8), 0 0 0 8px #BA68C8; /* Anillo doble */
    transition: all 0.3s;
    background-color: white !important; /* Forzar fondo blanco para legibilidad */
    border-radius: 16px;
}

.tour-tooltip {
    position: absolute; z-index: 100;
    width: 280px; background: white; padding: 20px;
    border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: fadeIn 0.3s ease-out;
}
.tour-tooltip::after { /* Triangulito */
    content: ''; position: absolute; width: 16px; height: 16px;
    background: white; transform: rotate(45deg);
}
.tour-tooltip.top::after { bottom: -8px; left: 50%; margin-left: -8px; }
.tour-tooltip.bottom::after { top: -8px; left: 50%; margin-left: -8px; }

@keyframes pulseRing {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}
.tour-pulse-btn {
    animation: pulseRing 2s infinite;
}