/* app/static/css/style.css */

/* --- Paleta de Colores Sugerida (Sobria: Grises, Negros, un acento) --- */
:root {
    --color-primario-app: #007bff; /* Azul Bootstrap por defecto, podrías cambiarlo a un gris oscuro o negro si prefieres */
    --color-fondo-app: #f0f2f5;    /* Un gris muy claro para el fondo general del body */
    --color-contenido-fondo: #ffffff; /* Fondo blanco para las "tarjetas" de contenido */
    --color-texto-principal: #212529; /* Negro Bootstrap estándar para texto */
    --color-texto-secundario: #6c757d; /* Gris Bootstrap para texto secundario */
    --color-bordes: #dee2e6;        /* Gris claro para bordes */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Una fuente sans-serif limpia */
    background-color: var(--color-fondo-app); /* Aplicar el color de fondo */
    color: var(--color-texto-principal);
}

/* --- Ajustes para la Barra de Navegación --- */
/* Si quieres que la barra de navegación tenga un estilo más oscuro */
.navbar.bg-primary { /* Asumiendo que _nav.html usa bg-primary */
    background-color: #343a40 !important; /* Un gris oscuro Bootstrap (dark) o #212529 (black) */
    /* O puedes usar tu variable: background-color: var(--color-primario-app) !important; */
}

/* --- Contenedor Principal del Contenido --- */
.main-content-area {
    background-color: var(--color-contenido-fondo);
    /* Podrías añadir más estilos aquí si es necesario, como un min-height si quieres */
    margin-bottom: 2rem; /* Espacio antes del footer */
}

/* --- Títulos de Página --- */
.page-title-container { /* Si decides envolver el {% block page_title %} en un div con esta clase */
    border-bottom: 1px solid var(--color-bordes);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.page-title-container .h2 {
    color: var(--color-texto-principal);
}

/* --- Tarjetas (Cards) --- */
.card {
    border: 1px solid var(--color-bordes); /* Borde más sutil para las cards */
}
/* Puedes estilizar .card-header si los usas */
.card-header {
    background-color: #f8f9fa; /* Un gris muy sutil para encabezados de tarjeta */
    border-bottom: 1px solid var(--color-bordes);
    color: var(--color-texto-principal);
    font-weight: 500;
}


/* --- Botones --- */
/* Puedes definir estilos base para botones si no te gustan los de Bootstrap por defecto */
/* .btn-primary {
    background-color: var(--color-primario-app);
    border-color: var(--color-primario-app);
}
.btn-primary:hover {
    background-color: darken(var(--color-primario-app), 10%);
    border-color: darken(var(--color-primario-app), 10%);
} */

/* --- Tablas --- */
.table {
    /* Estilos generales para tablas */
    color: var(--color-texto-principal);
}
.table thead th {
    background-color: #e9ecef; /* Un fondo ligeramente más oscuro para los encabezados de tabla */
    color: var(--color-texto-principal);
    border-bottom-width: 2px;
    border-color: var(--color-bordes);
}
.table-hover tbody tr:hover {
    background-color: #f8f9fa; /* Un hover sutil para filas de tabla */
}

/* --- Modales --- */
.modal-header {
    background-color: #e9ecef;
    border-bottom: 1px solid var(--color-bordes);
}
.modal-title {
    color: var(--color-texto-principal);
}

/* --- Footer --- */
.footer {
    background-color: #343a40; /* Un footer oscuro */
    color: rgba(255, 255, 255, 0.7); /* Texto claro para el footer oscuro */
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.footer .text-muted { /* Sobrescribir el text-muted de Bootstrap para este contexto */
    color: rgba(255, 255, 255, 0.5) !important;
}


/* --- Alertas --- */
/* No es necesario modificar _alerts.html, pero puedes personalizar los colores si quieres */
/* #alert-placeholder .alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
}
#alert-placeholder .alert-danger {
    background-color: #f8d7da;
    color: #842029;
} */

/* Para asegurar que el contenido no se pegue al footer si es corto */
body.d-flex.flex-column.min-vh-100 main.flex-grow-1 {
    /* Ya lo tienes con flex-grow-1, esto es solo para enfatizar */
}