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

/* Estilos generales */
body {
    font-family: sans-serif; /* Fuente legible */
    margin: 0; /* Elimina márgenes por defecto */
    padding: 0; /* Elimina paddings por defecto */
    background-color: #f8f9fa; /* Color de fondo suave */
}

.container {
    /* Ajusta max-width según tus preferencias, 1140px o 1320px son comunes en BS5 */
    max-width: 1140px;
    margin: 0 auto;  /* Centra el contenido */
    padding: 20px;
}

h1, h2, h3 {
    color: #333; /* Color de encabezado oscuro */
}

/* Estilos para la barra de navegación (ya los tienes con Bootstrap) */
.navbar {
    margin-bottom: 20px; /* Espacio debajo de la barra de navegación */
}

/* Estilos para los formularios */
/* .form-group (obsoleto en BS5, usar .mb-3 o similar) */
.mb-3 { /* Usar .mb-3 para margen inferior en grupos de formulario Bootstrap 5 */
    margin-bottom: 1rem !important;
}

.form-control {
    /* Los estilos de Bootstrap ya son buenos, pero puedes agregar más si quieres */
    /* width: 100%;  (Ya viene con BS) */
    padding: 0.375rem 0.75rem; /* Padding estándar BS5 */
    border: 1px solid #ced4da; /* Borde sutil */
    border-radius: 0.375rem; /* Bordes redondeados estándar BS5 */
}
/*Estilos para el radio button*/
.form-check-input{
    margin-right: 0.5em; /* Ajustar margen */
}

.form-control:focus {
    border-color: #86b7fe; /* Color de borde al enfocar BS5 */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Sombra al enfocar BS5 */
}

label, .form-label { /* Aplicar a etiquetas normales y .form-label de BS5 */
    font-weight: bold; /* Etiquetas en negrita */
    display: block; /* Etiquetas como bloque (ya es default en BS5 para .form-label) */
    margin-bottom: 0.5rem; /* Margen estándar BS5 */
}

/* Estilos para los mensajes flash (alert) */
.alert {
    /* Los estilos de Bootstrap ya son buenos */
    padding: 1rem; /* Padding estándar BS5 */
    margin-bottom: 1rem; /* Margen estándar BS5 */
    border-radius: 0.375rem; /* Bordes redondeados estándar BS5 */
}

/* Colores específicos de alertas (pueden variar ligeramente en BS5, pero estos son cercanos) */
.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}
.alert-success{
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}
.alert-info{
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}
.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

/* Estilos para los botones */
.btn {
    /* Los estilos de Bootstrap ya son buenos */
    padding: 0.375rem 0.75rem; /* Padding estándar BS5 */
    border-radius: 0.375rem;  /* Bordes redondeados estándar BS5 */
    text-decoration: none; /* Quita el subrayado de los enlaces */
    display: inline-block; /* Permite establecer ancho y alto */
    cursor: pointer;
    line-height: 1.5; /* Line-height estándar BS5 */
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* Colores de botones estándar BS5 (puedes mantener los tuyos si prefieres) */
.btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}
.btn-primary:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-secondary:hover{
    color: #fff;
    background-color: #5c636a;
    border-color: #565e64;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger:hover {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.btn-warning{
    /* color: #000; */ /* BS5 usa texto negro para warning */
    color: #fff; /* Mantener blanco si prefieres */
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-warning:hover{
    /* color: #000; */
    color: #fff;
    background-color: #ffca2c;
    border-color: #ffc720;
}

.btn-info{
    /* color: #000; */ /* BS5 usa texto negro para info */
     color: #fff; /* Mantener blanco si prefieres */
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}
.btn-info:hover{
    /* color: #000; */
     color: #fff;
    background-color: #31d2f2;
    border-color: #25cff2;
}

.btn-success{
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}
.btn-success:hover{
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}

/* Estilos para tablas */
table {
     width: 100%;
     border-collapse: collapse; /* Combina los bordes de las celdas */
     margin-bottom: 1rem;
     vertical-align: top; /* Alineación vertical por defecto */
     border-color: #dee2e6; /* Color de borde BS5 */
}
 th, td {
     padding: 0.5rem 0.5rem; /* Padding estándar BS5 para tablas */
     text-align: left;
     border-bottom: 1px solid #dee2e6; /* Línea separadora */
}
/* Corregir borde inferior en tablas bordered dentro de accordion */
.accordion-body table.table-bordered th,
.accordion-body table.table-bordered td {
     border-bottom-width: 1px;
}
/* Corregir borde en la última fila de tablas bordered dentro de accordion */
.accordion-body table.table-bordered tbody tr:last-child td,
.accordion-body table.table-bordered tbody tr:last-child th {
    border-bottom-width: 0;
}


 th {
     /* background-color: #f8f9fa; (Ya no es default en BS5, usar clases como .table-light si se desea) */
     font-weight: bold;
}

/* Estilos para fieldset (opcional, puedes usar divs con bordes si prefieres) */
fieldset {
    border: 1px solid #dee2e6; /* Borde similar a BS5 */
    padding: 1rem; /* Padding interno */
    margin-bottom: 1.5rem; /* Margen inferior */
    border-radius: 0.375rem; /* Bordes redondeados */
}

legend {
    font-size: 1.25rem; /* Tamaño de fuente BS5 */
    font-weight: 500; /* Peso de fuente BS5 */
    color: #212529; /* Color de texto BS5 */
    width: auto; /* Importante para que el legend no ocupe todo el ancho */
    padding: 0 0.5rem; /* Espacio a los lados del legend */
    margin-bottom: 0.5rem; /* Margen inferior BS5 */
    float: none; /* Asegurar que no flote (BS5) */
    line-height: inherit;
}
/* Limpiar float si se usa legend flotante (no es el caso aquí con width:auto) */
fieldset::after {
    content: "";
    display: table;
    clear: both;
}

/* --- ESTILOS PARA EL HISTORIAL --- */

/* Estilo para resaltar filas donde hubo cambios */
.history-changed {
    /* background-color: #fff3cd; Ya no se usa en la fila completa */
}

/* Estilo para la leyenda del historial en el texto introductorio */
.history-changed-legend {
    background-color: #fff3cd; /* Amarillo claro */
    border: 1px solid #ffecb5; /* Borde amarillo */
    border-radius: 0.2rem;
}

/* Ajustes generales para el acordeón del historial */
.accordion-button:not(.collapsed) {
    background-color: #e7f1ff; /* Azul claro cuando está expandido */
    color: #052c65;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}
.accordion-button:focus {
     box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
     z-index: 3;
}
.accordion-body {
    padding: 0.75rem 1rem;
}
/* Quitar margen inferior de la tabla dentro del acordeón */
.accordion-body .table {
    margin-bottom: 0;
}

/* Estilos para la tabla de comparación LADO A LADO dentro del historial */
.history-comparison-table td {
    vertical-align: middle !important; /* Forzar alineación vertical */
    padding-top: 0.4rem;    /* Ajustar padding vertical */
    padding-bottom: 0.4rem;
}

.history-value-old {
    /* Estilo sutil para el valor "anterior" en la comparación */
    color: #6c757d; /* Gris */
    /* text-decoration: line-through; */ /* Podría ser demasiado */
}

.history-value-new {
    /* Estilo para el valor "posterior" cuando hay cambio */
    font-weight: 500; /* Un poco más de énfasis */
    color: #198754; /* Verde éxito */
}
.history-comparison-table td:last-child .text-muted {
     /* Asegurar que el '---' de 'sin cambio' no herede el color verde */
     color: #6c757d !important;
}


/* Estilo para iconos dentro de botones (si usas Bootstrap Icons) */
.btn .bi {
    vertical-align: middle;
    margin-top: -0.15em; /* Ajuste fino vertical */
    margin-right: 0.25em; /* Espacio antes del texto (si lo hubiera) */
}
/* Iconos pequeños en botones pequeños (ej. descarga historial) */
.btn-sm .bi {
     margin-top: -0.1em;
     font-size: 0.9em; /* Hacer el icono un poco más pequeño */
}

/* Reducir tamaño de botones de descarga en historial */
.accordion-body .btn-sm {
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
    line-height: 1.2; /* Ajustar line-height para botones pequeños */
}
.accordion-body .btn-sm .bi {
     vertical-align: baseline; /* Probar baseline para iconos en botones pequeños */
     margin-right: 0.1em;
}