@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');

/* Global resets and variables for premium design */
:root {
    --primary-color: #2c9e45;
    --primary-dark: #146215;
    --primary-light: #60ad5e;
    --accent-color: #ffb300;
    --accent-dark: #ff8f00;
    --bg-gradient: linear-gradient(135deg, #e8f5e9 0%, #fff8e1 100%);
    --bg-dark-gradient: linear-gradient(135deg, #121813 0%, #1a1e1b 100%);
    --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    --card-shadow-hover: 0 16px 40px rgba(44, 158, 69, 0.12);
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.4);
    --border-radius-lg: 20px;
    --border-radius-md: 14px;
    --transition-premium: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Body Styling Enhancement */
body.siembra-web-active {
    font-family: 'Outfit', 'Roboto', sans-serif !important;
    background: var(--bg-gradient) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    color: #2c3e2e !important;
    padding-top: 0 !important; /* Managed by navbar sticky */
}

/* Dark Mode Support overriding */
body.siembra-web-active.dark-mode {
    background: var(--bg-dark-gradient) !important;
    color: #e2e8e3 !important;
}

/* Premium Injected Navbar */
.siembra-web-nav {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(44, 158, 69, 0.08) !important;
    padding: 14px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02) !important;
    font-family: 'Outfit', sans-serif !important;
}

body.dark-mode .siembra-web-nav {
    background: rgba(26, 30, 27, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.siembra-web-nav .logo-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    color: var(--primary-dark) !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    letter-spacing: -0.5px !important;
    transition: var(--transition-premium) !important;
}

body.dark-mode .siembra-web-nav .logo-container {
    color: #a5d6a7 !important;
}

.siembra-web-nav .logo-container:hover {
    transform: scale(1.03) !important;
}

.siembra-web-nav .logo-container i {
    color: var(--primary-color) !important;
    font-size: 24px !important;
}

.siembra-web-nav .nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.siembra-web-nav .nav-menu a {
    text-decoration: none !important;
    color: #4a5d4c !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    border-radius: 30px !important;
    transition: var(--transition-premium) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body.dark-mode .siembra-web-nav .nav-menu a {
    color: #b0c4b2 !important;
}

.siembra-web-nav .nav-menu a:hover,
.siembra-web-nav .nav-menu a.active {
    background: rgba(44, 158, 69, 0.08) !important;
    color: var(--primary-color) !important;
}

body.dark-mode .siembra-web-nav .nav-menu a:hover,
body.dark-mode .siembra-web-nav .nav-menu a.active {
    background: rgba(165, 214, 167, 0.1) !important;
    color: #a5d6a7 !important;
}

/* Hamburger for Mobile screen */
.siembra-web-hamburger {
    display: none !important;
    background: transparent !important;
    border: none !important;
    color: var(--primary-dark) !important;
    font-size: 24px !important;
    cursor: pointer !important;
}

body.dark-mode .siembra-web-hamburger {
    color: #e2e8e3 !important;
}

/* Responsive Navbar */
@media (max-width: 992px) {
    .siembra-web-hamburger {
        display: block !important;
    }
    .siembra-web-nav .nav-menu {
        display: none !important;
        position: absolute !important;
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        flex-direction: column !important;
        padding: 16px !important;
        border-bottom: 1px solid rgba(44, 158, 69, 0.1) !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
        gap: 12px !important;
    }
    body.dark-mode .siembra-web-nav .nav-menu {
        background: rgba(26, 30, 27, 0.98) !important;
    }
    .siembra-web-nav .nav-menu.active {
        display: flex !important;
    }
}

/* Premium Injected Footer */
.siembra-web-footer {
    background: #141e15 !important;
    color: #cfd8d0 !important;
    padding: 40px 20px !important;
    text-align: center !important;
    margin-top: 60px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-family: 'Outfit', sans-serif !important;
}

.siembra-web-footer h4 {
    color: white !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    font-size: 18px !important;
}

.siembra-web-footer p {
    font-size: 13px !important;
    color: #8c9c90 !important;
    margin-bottom: 16px !important;
}

.siembra-web-footer .social-icons {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.siembra-web-footer .social-icons a {
    color: #a5d6a7 !important;
    font-size: 20px !important;
    transition: var(--transition-premium) !important;
}

.siembra-web-footer .social-icons a:hover {
    transform: scale(1.2) rotate(8deg) !important;
    color: var(--accent-color) !important;
}

/* Center and Optimize Containers for Desktop */
@media (min-width: 992px) {
    .container-custom, 
    .container-fluid {
        max-width: 1040px !important;
        margin: 40px auto !important;
        padding: 0 20px !important;
    }
    
    /* Auto layout enhancement for mobile columns */
    .container-custom > .row,
    .container-fluid > .row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
    }
    
    .container-custom > .row > [class*="col-"],
    .container-fluid > .row > [class*="col-"] {
        flex: 1 1 300px !important;
        max-width: 100% !important;
    }
    
    /* Special grid for list systems */
    .network-grid,
    .autonomia-grid,
    .menu-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        gap: 20px !important;
    }
}

/* Card Optimizations (Sleek Glassmorphism look) */
.material-card, 
.card-custom, 
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--card-shadow) !important;
    transition: var(--transition-premium) !important;
    overflow: hidden !important;
    position: relative !important;
}

body.dark-mode .material-card,
body.dark-mode .card-custom,
body.dark-mode .card {
    background: rgba(30, 36, 32, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.material-card:hover, 
.card-custom:hover, 
.card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--card-shadow-hover) !important;
    border-color: rgba(44, 158, 69, 0.3) !important;
}

/* Smooth Scrolling and Custom Scrollbars */
html {
    scroll-behavior: smooth !important;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
}

::-webkit-scrollbar-thumb {
    background: rgba(44, 158, 69, 0.25);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(44, 158, 69, 0.45);
}

/* Unified back indicators on top bar */
.app-bar:not(.app-container .app-bar) {
    position: sticky !important;
    top: 64px !important; /* Stay below injected navbar */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    border-radius: 0 0 16px 16px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 20px rgba(44, 158, 69, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    padding: 16px 24px !important;
    height: auto !important;
}


.app-bar h1 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.app-bar .material-icons,
.app-bar .material-icons-round {
    margin-right: 16px !important;
    cursor: pointer !important;
    transition: var(--transition-premium) !important;
}

.app-bar .material-icons:hover {
    transform: scale(1.15) !important;
}

/* Premium Buttons overrides */
.btn, .btn-save, .btn-confirm {
    border-radius: 30px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 12px 28px !important;
    transition: var(--transition-premium) !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
}

.btn-primary, .btn-save {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(44, 158, 69, 0.25) !important;
}

.btn-primary:hover, .btn-save:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(44, 158, 69, 0.35) !important;
}

/* Custom interactive badges */
.status-badge {
    border-radius: 30px !important;
    padding: 6px 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Hide old obsolete simple elements when premium web unifier is active */
body.siembra-web-active nav.navbar,
body.siembra-web-active footer.footer,
body.siembra-web-active .overlay,
body.siembra-web-active .page-header {
    display: none !important;
}

/* Glassmorphic premium floating toast */
.siembra-toast {
    box-shadow: 0 10px 40px rgba(20, 98, 21, 0.3) !important;
}

/* Hero section premium visual uplift */
body.siembra-web-active .hero {
    background: linear-gradient(135deg, rgba(20, 98, 21, 0.85) 0%, rgba(26, 30, 27, 0.95) 100%), url('../img/hero-bg.png') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    border-bottom-left-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    padding: 10rem 2rem 12rem !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
    border-bottom: 2px solid rgba(44, 158, 69, 0.2) !important;
}

body.siembra-web-active.dark-mode .hero {
    background: linear-gradient(135deg, rgba(10, 48, 11, 0.9) 0%, rgba(13, 15, 14, 0.98) 100%), url('../img/hero-bg.png') !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05) !important;
}

body.siembra-web-active .hero h1 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 3.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    text-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
    background: linear-gradient(120deg, #ffffff 0%, #fff8e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.siembra-web-active .hero p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    opacity: 0.9 !important;
    max-width: 800px !important;
    margin: 0 auto 3rem !important;
}

/* Enhancements for main portal cards and layout */
body.siembra-web-active .grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 24px !important;
}

body.siembra-web-active .card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--card-shadow) !important;
    padding: 2.5rem 2rem !important;
    text-align: center !important;
    transition: var(--transition-premium) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

body.siembra-web-active.dark-mode .card {
    background: rgba(30, 36, 32, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.siembra-web-active .card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--card-shadow-hover) !important;
    border-color: rgba(44, 158, 69, 0.4) !important;
}

body.siembra-web-active .card-icon {
    font-size: 3rem !important;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin-bottom: 1.5rem !important;
    transition: var(--transition-premium) !important;
}

body.siembra-web-active .card:hover .card-icon {
    transform: scale(1.15) !important;
}

body.siembra-web-active .card-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--primary-dark) !important;
    margin-bottom: 10px !important;
}

body.siembra-web-active.dark-mode .card-title {
    color: #a5d6a7 !important;
}

/* ============================================================
   CORRECCIONES DE LAYOUT PARA PÁGINAS MÓVILES EN ESCRITORIO
   (Violentómetro, Juego Apiario, CONPES, Quiz VBG, etc.)
   ============================================================ */

/* ── 1. FLUJO VERTICAL FORZADO ──
   Evitar que Navbar + AppContainer + Footer se alineen en fila.
   El body nativo de muchas páginas usa display:flex + justify-content:center
   lo cual, al inyectar navbar/footer, genera un layout horizontal roto. */

body.siembra-web-active {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

/* ── 2. EXPANSIÓN DE .app-container EN ESCRITORIO ──
   Pasar de 480px fijo a un panel central responsive con glassmorphism */

body.siembra-web-active .app-container {
    max-width: 760px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    overflow-y: auto !important;
    margin: 24px auto 40px !important;
    border-radius: var(--border-radius-lg) !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(44, 158, 69, 0.08) !important;
    flex: none !important;
    position: relative !important;
}

body.siembra-web-active.dark-mode .app-container {
    background: rgba(30, 36, 32, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
}

/* ── 3. APP-BAR: Permitir colores dinámicos del JS ──
   NO forzar background con gradiente para que el violentómetro
   pueda cambiar el color (azul -> naranja -> rojo) en tiempo real */

body.siembra-web-active .app-container .app-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
    padding: 16px 24px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    font-family: 'Outfit', 'Open Sans', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    /* SIN background override → el JS controla el color dinámicamente */
}

/* ── 4. MODALES FIXED + GLASSMORPHISM ──
   Redefinir de position:absolute a position:fixed para cubrir toda la pantalla */

body.siembra-web-active .modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999 !important;
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
}

body.siembra-web-active .modal-overlay.show {
    display: flex !important;
    opacity: 1 !important;
}

body.siembra-web-active .modal-card {
    background: white !important;
    border-radius: var(--border-radius-lg) !important;
    padding: 28px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
    max-width: 420px !important;
    width: 90% !important;
    transform: scale(1) !important;
    animation: modalEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.siembra-web-active.dark-mode .modal-card {
    background: rgba(30, 36, 32, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e2e8e3 !important;
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ── 5. TERMÓMETRO DE RESULTADOS CENTRADO ──
   Envolver en sub-card premium con glassmorphism y centrado */

body.siembra-web-active .thermometer-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    margin: 20px auto 28px !important;
    max-width: 400px !important;
    padding: 24px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: var(--border-radius-md) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

body.siembra-web-active.dark-mode .thermometer-container {
    background: rgba(30, 36, 32, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.siembra-web-active .result-message-card {
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: var(--border-radius-md) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

body.siembra-web-active .result-title {
    font-family: 'Outfit', 'Open Sans', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

/* ── 6. PANTALLA/SCREEN: scroll natural ── */

body.siembra-web-active .screen {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 28px !important;
}

body.siembra-web-active .screen.active {
    display: flex !important;
    flex-direction: column !important;
}

/* ── 7. WELCOME CONTENT: espacio generoso ── */

body.siembra-web-active .welcome-content {
    max-width: 550px !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
}

body.siembra-web-active .welcome-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    color: var(--primary-dark) !important;
}

body.siembra-web-active.dark-mode .welcome-title {
    color: #a5d6a7 !important;
}

body.siembra-web-active .welcome-icon {
    font-size: 72px !important;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── 8. QUESTION CARD: premium look ── */

body.siembra-web-active .question-card {
    max-width: 550px !important;
    margin: 0 auto 24px !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04) !important;
}

body.siembra-web-active .question-text {
    font-family: 'Outfit', 'Open Sans', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--primary-dark) !important;
}

body.siembra-web-active.dark-mode .question-text {
    color: #e2e8e3 !important;
}

body.siembra-web-active .progress-container {
    max-width: 550px !important;
    margin: 0 auto 28px !important;
    border-radius: 6px !important;
    height: 8px !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

body.siembra-web-active .question-counter {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* ── 9. PANIC BUTTON: flotante premium ── */

body.siembra-web-active .panic-btn {
    position: fixed !important;
    bottom: 28px !important;
    right: 28px !important;
    z-index: 99998 !important;
    background: linear-gradient(135deg, #546E7A, #37474F) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    transition: var(--transition-premium) !important;
}

body.siembra-web-active .panic-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

/* ── 10. JUEGO APIARIO: Grid Desktop Layout ──
   Sidebar + Main content lado a lado en escritorio */

@media (min-width: 992px) {
    body.siembra-web-active .game-layout,
    body.siembra-web-active .juego-container {
        display: grid !important;
        grid-template-columns: 280px 1fr !important;
        gap: 24px !important;
        max-width: 1100px !important;
        margin: 24px auto !important;
        padding: 0 20px !important;
    }

    body.siembra-web-active .game-sidebar,
    body.siembra-web-active .sidebar {
        background: var(--glass-bg) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid var(--glass-border) !important;
        border-radius: var(--border-radius-lg) !important;
        padding: 20px !important;
        height: fit-content !important;
        position: sticky !important;
        top: 80px !important;
    }

    body.siembra-web-active .game-main,
    body.siembra-web-active .main-content {
        background: var(--glass-bg) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid var(--glass-border) !important;
        border-radius: var(--border-radius-lg) !important;
        padding: 24px !important;
        min-height: 400px !important;
    }
}

/* ── 11. BOTTOM-NAV: Floating Glassmorphic Pill Bar ──
   Convertir pestañas fijas inferiores en pill flotante en escritorio */

@media (min-width: 768px) {
    body.siembra-web-active .bottom-nav,
    body.siembra-web-active .tab-bar,
    body.siembra-web-active .navigation-tabs {
        position: fixed !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        max-width: 600px !important;
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 50px !important;
        padding: 8px 16px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 10px rgba(44, 158, 69, 0.08) !important;
        display: flex !important;
        justify-content: center !important;
        gap: 4px !important;
        z-index: 9999 !important;
    }

    body.siembra-web-active.dark-mode .bottom-nav,
    body.siembra-web-active.dark-mode .tab-bar,
    body.siembra-web-active.dark-mode .navigation-tabs {
        background: rgba(26, 30, 27, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    }

    body.siembra-web-active .bottom-nav a,
    body.siembra-web-active .bottom-nav button,
    body.siembra-web-active .tab-bar a,
    body.siembra-web-active .tab-bar button {
        border-radius: 30px !important;
        padding: 10px 18px !important;
        font-family: 'Outfit', sans-serif !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        transition: var(--transition-premium) !important;
        white-space: nowrap !important;
    }

    body.siembra-web-active .bottom-nav a:hover,
    body.siembra-web-active .bottom-nav button:hover,
    body.siembra-web-active .tab-bar a:hover,
    body.siembra-web-active .tab-bar button:hover {
        background: rgba(44, 158, 69, 0.1) !important;
        color: var(--primary-color) !important;
    }

    body.siembra-web-active .bottom-nav a.active,
    body.siembra-web-active .bottom-nav button.active,
    body.siembra-web-active .tab-bar a.active,
    body.siembra-web-active .tab-bar button.active {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
        color: white !important;
        box-shadow: 0 4px 15px rgba(44, 158, 69, 0.25) !important;
    }

    /* Compensar espacio para el pill bar flotante */
    body.siembra-web-active .app-container {
        padding-bottom: 80px !important;
    }
}

/* ── 12. HEADERS NATIVOS: debajo del Navbar inyectado ── */

body.siembra-web-active > header,
body.siembra-web-active .app-container > header {
    position: relative !important;
    top: auto !important;
    z-index: 50 !important;
    margin-top: 0 !important;
}

/* Header dentro del app-container: redondeo superior */
body.siembra-web-active .app-container > header:first-child {
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
    overflow: hidden !important;
}

/* ── 13. RISK INDICATOR: Premium micro-animation ── */

body.siembra-web-active .risk-indicator {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    border-radius: 30px !important;
    padding: 6px 16px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(4px) !important;
}

/* ── 14. ACTIONS CONTAINER: centrado premium ── */

body.siembra-web-active .actions-container {
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* ── 15. LAST RESULT CARD: premium styling ── */

body.siembra-web-active .last-result-card {
    border-radius: var(--border-radius-md) !important;
    background: rgba(248, 249, 250, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-left-width: 5px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    max-width: 450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.siembra-web-active.dark-mode .last-result-card {
    background: rgba(30, 36, 32, 0.5) !important;
}

/* ── 16. RESPONSIVE: mantener compatibilidad móvil ──
   En pantallas estrechas (< 600px), mantener el layout original */

@media (max-width: 600px) {
    body.siembra-web-active .app-container {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    body.siembra-web-active .app-container .app-bar {
        border-radius: 0 !important;
    }

    body.siembra-web-active .panic-btn {
        position: absolute !important;
    }

    body.siembra-web-active .thermometer-container {
        padding: 16px !important;
        margin: 12px auto 20px !important;
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
    }
}

/* ── 17. PROFILE LINKED CARD: premium ── */

body.siembra-web-active #profile-linked {
    border-radius: var(--border-radius-md) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 16px rgba(44, 158, 69, 0.08) !important;
}

/* ── 18. SMOOTH TRANSITIONS para feedback dinámico ── */

body.siembra-web-active .progress-bar {
    transition: width 0.4s ease, background-color 0.8s ease !important;
    border-radius: 6px !important;
}

/* ── 19. TYPOGRAPHY upgrades para screens ── */

body.siembra-web-active .screen h1,
body.siembra-web-active .screen h2,
body.siembra-web-active .screen h3 {
    font-family: 'Outfit', 'Open Sans', sans-serif !important;
}

body.siembra-web-active .btn-clean-history {
    max-width: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 30px !important;
    font-family: 'Outfit', sans-serif !important;
    transition: var(--transition-premium) !important;
}

body.siembra-web-active .btn-clean-history:hover {
    background: #fff5f5 !important;
    color: var(--level-rojo) !important;
    border-color: var(--level-rojo) !important;
    transform: translateY(-2px) !important;
}

/* ── 20. CONPES / TABS dentro de app-container ── */

body.siembra-web-active .tab-content,
body.siembra-web-active .conpes-content {
    padding: 20px !important;
    max-width: 700px !important;
    margin: 0 auto !important;
}

/* ── 21. INPUT FIELDS: premium ── */

body.siembra-web-active .modal-card input[type="text"],
body.siembra-web-active .modal-card input[type="number"],
body.siembra-web-active .modal-card input[type="email"] {
    font-family: 'Outfit', sans-serif !important;
    border-radius: var(--border-radius-md) !important;
    border: 2px solid rgba(44, 158, 69, 0.15) !important;
    transition: var(--transition-premium) !important;
    padding: 14px !important;
}

body.siembra-web-active .modal-card input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(44, 158, 69, 0.1) !important;
    outline: none !important;
}