/* 1. Fondo de todo el sitio: Negro */
        body { 
            background-color: black; 
            color: white; /* Texto blanco por defecto */
        }

        /* 2 & 3. Fondo plomo y borde blanco para las CARDS (y sidebar boxes) */
        .card, .sidebar-box { 
            background-color: #343a40; /* Gris oscuro para el 'plomo' */
            border: 1px solid white; 
            border-radius: 8px; 
            padding: 20px; 
            margin-bottom: 20px; 
            color: white; /* Texto blanco dentro de las cards */
            box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* Sombra para resaltar */
            overflow: hidden; /* Asegura que nada se desborde */
        }
        
        .card-body {
            padding: 0; /* Bootstrap ya tiene padding por defecto, lo quitamos aquí */
        }
        
        .navbar-brand { font-weight: bold; letter-spacing: 1px; }

        /* Efecto de hover para las blog cards */
        .blog-card { border-radius: 8px; transition: transform 0.2s; }
        .blog-card:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 8px 16px rgba(0,0,0,0.7);
        }

        /* 4. Titulares verdes (#00FF00) y alineados a la izquierda */
        h2, .card-title, h5 { 
            color: #00FF00 !important; /* Asegura que sobrescriba estilos de Bootstrap */
            font-weight: bold;
            text-align: left; /* Alineación a la izquierda */
            margin-bottom: 15px; /* Espacio debajo del título */
        }

        /* 5. Letras del texto blancas */
        .card-text, p { color: white !important; text-align: left; }
        .text-muted { color: #d1d1d1 !important; } /* Un blanco-grisáceo para no perder el contraste */

        /* Ajustes específicos para las imágenes de la card */
        .card-img-left {
            object-fit: cover; /* Asegura que la imagen llene el espacio sin deformarse */
            height: 100%; /* Toma todo el alto de la columna */
            width: 100%; /* Toma todo el ancho de la columna */
            border-radius: 4px; /* Un pequeño radio para suavizar */
        }

        /* Ajustes para enlaces dentro de las cards y sidebar */
        .card a.btn-outline-primary {
            color: #00FF00;
            border-color: #00FF00;
        }
        .card a.btn-outline-primary:hover {
            background-color: #00FF00;
            color: black;
            border-color: #00FF00;
        }
        
        .list-group-item {
            background-color: transparent !important;
            border: none !important;
            color: white !important;
            padding: 10px 0;
        }
        .list-group-item-action:hover, .list-group-item-action:focus {
            background-color: #495057 !important; /* Un gris un poco más claro en hover */
            color: #00FF00 !important; /* Titular verde en hover para los enlaces */
        }

        /* Ajustes para el Footer */
        footer { 
            background: #212529; 
            color: white; 
            padding: 40px 0; 
            margin-top: 50px; 
            border-top: 1px solid white; /* Borde superior blanco en el footer */
        }
        footer p { color: white !important; }
        footer .text-secondary { color: #aaaaaa !important; }

@media (max-width: 576px) {
    .navbar-brand img {
        height: 50px; /* Se reduce un poco solo en celulares */
    }
}


/* Estilo para la frase destacada */
.custom-quote p {
    line-height: 1.2;
    color: white;
    text-shadow: 2px 2px 10px rgba(0, 255, 0, 0.2); /* Un brillo verde muy suave */
    font-style: italic;
    margin-bottom: 0;
}

/* Adorno lateral verde para la cita */
.custom-quote {
    border-left: 5px solid #00FF00;
    padding-left: 20px;
    margin-left: 10px;
}

/* Animación sutil (opcional) */
.custom-quote:hover {
    border-left-color: white;
    transition: border-color 0.5s ease;
}

/* Ajuste para que en móviles no sea GIGANTE, pero sí legible */
@media (max-width: 768px) {
    .custom-quote p {
        font-size: 1.5rem !important;
    }
}