/* 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); }