/* ============================================================
   SURA SYSTEM 2026 - HYPEROS 3 PREMIUM (FINAL SPACING)
   ============================================================ */

:root {
    --sura-primary: #f39237;
    --sura-primary-hover: #d67d2a;
    --sura-dark: #1a1c1e;
    --sura-bg: #f5f7f9;
    --sura-text: #1d1d1f;
    --sura-radius: 24px;
    --sura-glass: rgba(255, 255, 255, 0.85);
    --sura-blur: blur(12px);
    --sura-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    --sura-transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body { 
    background-color: var(--sura-bg);
    background-image: radial-gradient(at 0% 0%, rgba(243, 146, 55, 0.03) 0px, transparent 50%);
    font-family: 'Inter', sans-serif; 
    color: var(--sura-text);
    margin: 0;
    overflow-x: hidden;
}

.uppercase { text-transform: uppercase; letter-spacing: 1px; }

/* --- ETIQUETAS DE SECCIÓN (CORREGIDAS) --- */
.section-label { 
    font-weight: 800; 
    text-transform: uppercase; 
    font-size: 0.75rem; 
    letter-spacing: 1.5px; 
    color: #adb5bd; 
    margin-bottom: 25px; /* Más espacio hacia abajo */
    display: block;
}

/* --- NAVBAR CRISTAL --- */
.navbar-sura {
    background: var(--sura-glass) !important;
    backdrop-filter: var(--sura-blur);
    -webkit-backdrop-filter: var(--sura-blur);
    height: 70px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: fixed; top: 0; width: 100%; z-index: 1030; 
}
.navbar-sura .navbar-brand { margin-left: 100px; font-weight: 800 !important; color: var(--sura-dark) !important; letter-spacing: -0.5px; }

/* --- SIDEBAR FLOTANTE --- */
#sura-sidebar {
    position: fixed !important;
    top: 15px; left: 15px; bottom: 15px; width: 75px;
    background: var(--sura-dark); z-index: 1060;
    border-radius: var(--sura-radius); transition: var(--sura-transition);
    display: flex; flex-direction: column;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
#sura-sidebar.expanded { width: 260px; }

/* --- CÁPSULAS DINÁMICAS --- */
.capsule-dynamic {
    background: #1a1c1e; border-radius: 40px; padding: 12px 20px;
    display: flex; align-items: center; text-decoration: none !important;
    transition: var(--sura-transition); border: 1px solid rgba(255,255,255,0.08);
}
.capsule-timer { font-family: monospace; color: #fff; font-weight: 800; font-size: 1.1rem; }
.capsule-label { font-size: 0.65rem; color: rgba(255,255,255,0.5); text-transform: uppercase; font-weight: 700; }

/* --- CARDS E INTERFAZ --- */
.card-hyper {
    background: #fff; border-radius: var(--sura-radius);
    border: 1px solid rgba(0,0,0,0.02); box-shadow: var(--sura-shadow);
    transition: var(--sura-transition);
}
.press-effect:active { transform: scale(0.96) !important; }

#main-content-area { padding-top: 100px; margin-left: 105px; transition: var(--sura-transition); }
body.sidebar-is-expanded #main-content-area { margin-left: 290px; }

@media (max-width: 992px) {
    #sura-sidebar { left: -90px; }
    #sura-sidebar.expanded { left: 15px; }
    #main-content-area { margin-left: 0 !important; padding: 100px 15px; }
    .navbar-sura .navbar-brand { margin-left: 50px !important; }
}