/* Estilos generales del cuerpo y la tipografía */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa; /* Un gris muy claro para el fondo */
    color: #343a40; /* Color de texto principal oscuro */
}

/* Paleta de colores principal */
.bg-primary { background-color: #f8f9fa; }
.bg-secondary { background-color: #e9ecef; } /* Un gris ligeramente más oscuro para secciones destacadas */
.text-header { color: #0056b3; } /* Azul oscuro para los encabezados */
.text-accent { color: #E8A88B; } /* Un color salmón/naranja como acento */
.border-accent { border-color: #E8A88B; }

/* Estilos de la barra de navegación */
.btn-nav {
    transition: all 0.3s ease;
    color: #495057; /* Color de texto para los enlaces */
}
.btn-nav:hover, .btn-nav.active {
    color: #E8A88B; /* Color de acento al pasar el mouse o cuando está activo */
    border-bottom-color: #E8A88B;
}

/* Estilos para los nodos del diagrama de flujo */
.diagram-node {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.diagram-node.active, .diagram-node:hover {
    border-color: #0056b3; /* Borde azul al estar activo o al pasar el mouse */
    transform: scale(1.03); /* Ligero zoom para dar feedback */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Sombra suave */
}

/* Contenedor para los gráficos de Chart.js */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: auto;
    height: 400px;
    max-height: 50vh; /* Limita la altura en pantallas pequeñas */
}
@media (min-width: 768px) {
    .chart-container {
        height: 500px; /* Mayor altura en pantallas de escritorio */
    }
}

/* Tarjetas de sección con sombra y bordes redondeados */
.section-card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    padding: 2rem;
}

/* Color de texto para el cuerpo de los párrafos */
.text-body-color {
    color: #495057;
}

/* Bloque de notas destacadas */
.note-block {
    background-color: #e3f2fd; /* Fondo azul claro */
    border-left: 4px solid #1e88e5; /* Borde izquierdo azul más oscuro */
    padding: 1rem;
    margin-top: 1.5rem;
    border-radius: 0.25rem;
}

/* Estilos para la animación de aparición (fade-in) */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}