html,
body {
   /* Asegura que el fondo cubra toda la altura de la pantalla */
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: sans-serif;
   /* Buena práctica para tener una fuente base */
}

body {
   /* --- REEMPLAZA ESTA LÍNEA con la ruta a tu imagen --- */
   background-image: url('https://techdinecom.net/contratos/img/bg.png');

   /* Fija la imagen para que no se mueva con el scroll (efecto parallax) */
   background-attachment: fixed;

   /* Centra la imagen horizontal y verticalmente */
   background-position: center;

   /* Evita que la imagen se repita */
   background-repeat: no-repeat;

   /* Escala la imagen para que cubra todo el espacio sin deformarse */
   background-size: cover;
}

/* =============================================== */
/* === ESTILOS PARA LA TABLA DE HISTORIAL DE PAGOS === */
/* =============================================== */

/* Contenedor general de la tabla para evitar que se desborde */
.table-responsive {
   max-width: 100%;
   overflow-x: auto;
}

/* Define un ancho fijo para la columna de la fecha */
.col-fecha {
   width: 150px;
   min-width: 150px;
   white-space: nowrap;
   /* Evita que la fecha se parta en dos líneas */
}

/* La columna de observación es la principal y debe ser flexible */
.col-observacion {
   /* No necesita un ancho fijo, tomará el espacio restante */
   word-wrap: break-word;
   /* Fuerza el ajuste de línea para palabras largas */
   white-space: normal !important;
   /* Asegura el ajuste de texto en varias líneas */
}

/* Define un ancho fijo y centra el contenido de las columnas de los botones */
.col-documentos {
   width: 120px;
   min-width: 120px;
   text-align: center;
}

/* Para alinear verticalmente el contenido de todas las celdas en el medio */
.table.align-middle td,
.table.align-middle th {
   vertical-align: middle;
}