/* =========================================
       1. ESTILOS GENERALES (FONDO Y ESTRUCTURA)
       ========================================= */
    body {
        background-image: url('../../Public/Img/FONDO.jpg'); 
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        min-height: 100vh;
        margin: 0;
        overflow-x: hidden;
    }

    /* Limpieza de estructura */
    .wrapper, .main, main.content {
        background: transparent !important;
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .main {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    
    main.content {
        flex: 1;
    }

    /* =========================================
       2. NAVBAR Y FOOTER (FLEXBOX BASE)
       ========================================= */
    /* Por defecto (PC), se ven en fila horizontal */
    footer, .footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 30px !important;
        width: 100% !important;
        position: relative;
        z-index: 9999;
    }

    /* Altura fija solo para PC para que se vea elegante */
    footer, .footer {
        height: 60px !important; 
    }

    /* =========================================
       3. MEDIA QUERY: MÓVIL (EL ARREGLO CLAVE)
       ========================================= */
    @media (max-width: 768px) {
        
        /* Arreglo del Footer en celular */
        footer, .footer {
            flex-direction: column !important; /* Poner uno encima de otro */
            height: auto !important;           /* La altura se adapta al contenido */
            padding: 15px !important;          /* Relleno suave */
            justify-content: center !important;
            text-align: center;                /* Texto centrado */
            gap: 10px;                         /* Espacio entre el texto de arriba y abajo */
            font-size: 12px;                   /* Letra un poco más chica para que quepa */
        }

        /* Arreglo del Navbar en celular */
        .navbar {
            flex-direction: column !important;
            padding: 10px !important;
            height: auto !important;
        }

        /* Si tienes una imagen en el navbar, la hacemos un poco más pequeña en celular */
        .navbar img {
            width: 80px; /* Ajusta este valor según tu logo */
            height: auto;
        }
        
        .navbar h3 {
            font-size: 1.2rem; /* Texto del título más pequeño */
            margin-top: 5px;
        }
    }

    /* =========================================
       4. TEMAS (DARK / LIGHT) - ESTILO SANDWICH
       ========================================= */
    
    /* --- TEMA OSCURO --- */
    [data-bs-theme="dark"] .navbar,
    [data-bs-theme="dark"] footer {
        background-color: #212529 !important; 
        color: white !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    }

    [data-bs-theme="dark"] .card {
        background-color: rgba(33, 37, 41, 0.85) !important;
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,0.1);
    }

    /* --- TEMA CLARO --- */
    [data-bs-theme="light"] .navbar,
    [data-bs-theme="light"] footer {
        background-color: #ffffff !important;
        color: #212529 !important;
        border-bottom: 1px solid #dee2e6;
        /* En móvil el footer claro necesita un borde arriba para separarse de la foto */
        border-top: 1px solid #dee2e6; 
    }

    [data-bs-theme="light"] .card {
        background-color: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(8px);
        border: 1px solid rgba(0,0,0,0.1);
        color: #000;
    }