/* Estilo general para la fila de cobro */
/* Agregar un ícono de fondo en el pseudo-elemento :before de .elementoCobro */
.elementoCobro:before {
    content: "";
    display: inline-block;
    background-image: url('../images/payment.png'); /* Ruta relativa al archivo CSS */
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px; /* Ajusta el tamaño del ícono */
    height: 20px;
    margin: 10px; /* Espaciado entre el ícono y el contenido */
    vertical-align: bottom; /* Alineación vertical */
}

.elementoCobro {
    transition: background-color 0.2s;
    display: table-row; /* Asegura comportamiento de fila de tabla */
    height: 100%; /* Importante para el centrado vertical */
}

    .elementoCobro:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

/* Estructura para la celda de fecha y descripción */
.fecha-descripcion {
    display: flex;
    flex-direction: column;
    padding-right: 10px;
    height: 100%;
    justify-content: center; /* Centra verticalmente el contenido flex */
}

/* Estilo para la fecha */
.fecha {
    font-weight: 500;
    margin-bottom: 4px;
    font-size: 0.9rem;
    color: #444;
}

/* Estilo para la descripción */
.descripcion {
    font-size: 0.9rem;
    line-height: 1.3;
    color: #555;
    word-break: break-word;
}

/* Estilo para el importe */
.importe {
    font-size: 1.15rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    text-align: right;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end; /* Alinea a la derecha */
}

.elementoCobro .fecha-descripcion {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* Ajustes para la tabla existente */
.lista table {
    border-collapse: collapse; /* Importante para consistencia en altura */
}

    .lista table .elementoCobro td {
        padding: 12px 10px;
        vertical-align: middle;
        height: 100%;
    }

        /* Celda de fecha-descripción */
        .lista table .elementoCobro td.celda-fecha-descripcion {
            width: 60%;
        }

        /* Celda de importe */
        .lista table .elementoCobro td.celda-importe {
            text-align: right;
            white-space: nowrap;
            padding-right: 15px;
            height: 100%;
        }


        /* Celda de botón - Centrado horizontal */
        .lista table .elementoCobro td.celda-boton {
            text-align: center; /* Centra el contenido de la celda */
            width: 60px; /* Mantén un ancho fijo para la celda */
            padding-right: 10px;
        }

            /* Color de fondo del botón más suave */
            .lista table .elementoCobro td.celda-boton .btn {
                width: 30px;
                height: 30px;
                border-radius: 15px;
                padding: 0px;
                margin: 0 auto; /* Esto centra el botón horizontalmente si tiene display: block */
                display: block; /* Asegura que margin: 0 auto funcione */
            }

            .lista table .elementoCobro td.celda-boton .btn > img {
                width: 100%;
                height: 100%;
                filter: contrast(0) brightness(100);
            }

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .lista table .elementoCobro td.celda-fecha-descripcion {
        width: auto;
    }

    .lista table .elementoCobro td.celda-importe {
        padding-right: 10px;
    }

    .lista table .elementoCobro td.celda-boton {
        padding-left: 0;
        padding-right: 10px;
    }
}