/* ========================================================== */
/* Sección de Pagos Mejorada */
/* ========================================================== */

.payments-section {
    padding: 30px; /* Más padding para que respire */
    background-color: #f8f9fa; /* Un gris muy claro, más suave */
    border-radius: 15px; /* Bordes más redondeados */
    margin-top: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra más pronunciada pero suave */
}

.payments-section h2 {
    font-size: 1.8em; /* Tamaño de fuente más grande */
    color: #343a40; /* Gris oscuro para el título */
    margin-bottom: 30px; /* Más espacio debajo del título */
    text-align: center;
    font-weight: 600; /* Ligeramente más negrita */
    letter-spacing: 0.5px; /* Ligero espaciado entre letras */
}

.payments-actions-top {
    display: flex;
    justify-content: flex-end; /* Alinear botones a la derecha */
    gap: 15px; /* Más espacio entre botones */
    margin-bottom: 30px; /* Más margen inferior */
    padding: 0 10px; /* Un poco de padding horizontal */
}

/* Estilos para los botones de acción (Registrar, Notificar) */
.action-button {
    padding: 12px 25px; /* Aumentar el padding para botones más grandes */
    border-radius: 8px; /* Bordes redondeados */
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease; /* Transición suave para hover y click */
    display: inline-flex; /* Para alinear el icono y el texto */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espacio entre icono y texto */
    text-decoration: none; /* Asegurar que no haya subrayado en <a> */
}

.action-button.add-button {
    background-color: #007bff; /* Azul primario */
    color: #fff;
    border: 1px solid #007bff;
}
.action-button.add-button:hover {
    background-color: #0056b3; /* Azul más oscuro en hover */
    border-color: #0056b3;
    transform: translateY(-2px); /* Efecto de "levantar" */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}

.action-button.whatsapp-button {
    background-color: #28a745; /* Verde de éxito */
    color: #fff;
    border: 1px solid #28a745;
}
.action-button.whatsapp-button:hover {
    background-color: #218838; /* Verde más oscuro en hover */
    border-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
}

.payments-list-container {
    padding: 0; /* Elimina padding del contenedor de la lista */
    margin: 0; /* Elimina margen del contenedor de la lista */
    list-style: none; /* Asegura que no haya bullets */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre cada item de pago */
}

.no-bullet-list { /* Asegura que la lista dentro de transition-group no tenga estilos predeterminados */
    list-style: none;
    padding: 0;
    margin: 0;
}


.payment-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #ffffff; /* Este background-color será sobrescrito por el inline de Vue */
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 15px 25px; /* Reducido el padding vertical, mantenido el horizontal */
    border-left: 5px solid; /* Solo define el ancho y estilo, el COLOR viene de JavaScript */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.payment-item:hover {
    transform: translateY(-3px); /* Ligero levantamiento al pasar el mouse */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Sombra más fuerte al pasar el mouse */
}


/* Ajuste del layout de los detalles del pago */
.payment-details {
    flex-grow: 1;
    display: grid;
    /* Define columnas explícitamente para mayor control y reducir el espacio */
    grid-template-columns: auto 1fr auto auto; /* Auto para PAGO, 1fr para FECHA, auto para VALOR y FORMA DE PAGO */
    gap: 5px 20px; /* Reducido el gap vertical, mantenido el horizontal */
    margin-bottom: 15px;
    width: 100%;
    align-items: center; /* Centrar verticalmente los items dentro del grid */
}
/* Alineación específica para el número de pago */
.payment-number {
    white-space: nowrap; /* Evita que "PAGO: " se rompa */
    padding-right: 10px; /* Un poco de espacio a la derecha del número de pago */
    text-align: left;
}
.payment-date {
    text-align: left;
    white-space: nowrap;
}

.payment-amount {
    text-align: right; /* Alinea el valor a la derecha */
    white-space: nowrap;
}

.payment-method {
    text-align: left; /* Alinea la forma de pago a la izquierda */
    white-space: nowrap;
}

.payment-details p {
    margin: 0; /* Eliminar margen predeterminado de los párrafos */
    font-size: 0.95em;
    color: #495057; /* Gris oscuro para el texto */
    white-space: nowrap; /* Evitar que el texto se rompa en varias líneas */
    overflow: hidden; /* Ocultar el desbordamiento si el texto es muy largo */
    text-overflow: ellipsis; /* Añadir puntos suspensivos si se oculta texto */
}

.payment-details strong {
    color: #007bff; /* Color azul para los valores importantes */
    font-weight: 600;
}

.payment-method, .payment-date, .payment-ref, .payment-desc {
    color: #6c757d; /* Gris más claro para información secundaria */
}
.payment-details b {
    color: #343a40; /* Asegurar que los labels "PAGO:", "FECHA:" sean oscuros */
    font-weight: 600;
}


.payment-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end; /* Alinear acciones a la derecha */
}


/* Estilos específicos para los botones de acción dentro de .payment-item */
.payment-actions .action-button {
    padding: 8px 15px; /* Más pequeños que los botones superiores */
    font-size: 0.9em;
    border-radius: 6px;
    gap: 5px;
}
.payment-actions .info-button {
    background-color: #17a2b8; /* Azul cian para imprimir */
    color: #fff;
    border: 1px solid #17a2b8;
}
.payment-actions .info-button:hover {
    background-color: #138496;
    border-color: #138496;
}
.payment-actions .delete-button {
    background-color: #dc3545; /* Rojo para eliminar */
    color: #fff;
    border: 1px solid #dc3545;
}
.payment-actions .delete-button:hover {
    background-color: #c82333;
    border-color: #c82333;
}


.no-payments-message {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    margin-top: 40px;
    padding: 15px;
    background-color: #e9ecef; /* Fondo claro para el mensaje */
    border-radius: 8px;
    border: 1px solid #dee2e6;
    font-size: 1.1em;
}

/* Resumen de Pagos */
.payments-summary {
    background-color: #e9f7ef; /* Un verde claro para el resumen, que sugiere "pagado" */
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 25px;
    margin-top: 30px;
    text-align: right;
    font-size: 1.2em; /* Fuente ligeramente más grande */
    font-weight: 500;
    border: 1px solid #d4edda; /* Borde sutil */
    margin-left: 10px;
    margin-right: 10px;
}
.payments-summary p {
    margin-bottom: 10px;
    color: #343a40;
}
.payments-summary p:last-child {
    margin-bottom: 0;
}
.payments-summary strong {
    font-weight: 700;
    color: #007bff; /* Color primario para los totales */
}
.payments-summary .text-success {
    color: #28a745; /* Verde para saldo cero/positivo */
    font-weight: bold; /* Hacer el saldo más visible */
}
.payments-summary .text-danger {
    color: #dc3545; /* Rojo para saldo pendiente */
    font-weight: bold; /* Hacer el saldo más visible */
}

.modal-content {
    background-color: #fff;
    border-radius: 15px; /* Más redondeado */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra más profunda */
    padding: 30px; /* Más padding */
    width: 90%; /* Ajuste de ancho */
    max-width: 500px; /* Limitar ancho máximo */
    transform: translateY(0); /* Reiniciar transform para que Vue maneje la animación del modal */
    opacity: 1;
}

.modal-content h2 {
    text-align: center;
    color: #343a40;
    margin-bottom: 25px;
    font-size: 1.6em;
}

.modal-content .close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5em;
    color: #6c757d;
    cursor: pointer;
    transition: color 0.2s ease;
}
.modal-content .close-button:hover {
    color: #343a40;
}

.input-group {
    margin-bottom: 20px; /* Espacio entre grupos de input */
}
.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #495057;
    font-size: 0.95em;
}
.input-group input[type="number"],
.input-group input[type="text"],
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 8px; /* Bordes redondeados para inputs */
    font-size: 1em;
    color: #495057;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

.price-input-container {
    display: flex;
    align-items: center;
}
.price-input-container span {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-right: none;
    padding: 12px 15px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    color: #495057;
    font-weight: 600;
}
.price-input-container input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.modal-footer {
    display: flex;
    justify-content: flex-end; /* Alinear botones a la derecha */
    gap: 15px; /* Espacio entre botones */
    margin-top: 30px;
}

.modal-footer .action-button {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
}
.modal-footer .save-button {
    background-color: #28a745; /* Verde para guardar */
    color: #fff;
    border: 1px solid #28a745;
}
.modal-footer .save-button:hover {
    background-color: #218838;
    border-color: #218838;
}
.modal-footer .cancel-button {
    background-color: #6c757d; /* Gris para cancelar */
    color: #fff;
    border: 1px solid #6c757d;
}
.modal-footer .cancel-button:hover {
    background-color: #5a6268;
    border-color: #545b62;
}


/* ========================================================== */
/* Media Queries para Responsividad */
/* ========================================================== */

@media (max-width: 992px) {
    .payment-item {
        flex-direction: column; /* Apilar elementos en tabletas */
        align-items: flex-start;
        padding: 15px 20px;
    }
    .payment-details {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
        gap: 8px;
    }
    .payment-actions {
        width: 100%;
        justify-content: center; /* Centrar botones de acción en móvil */
        margin-top: 15px;
    }
    .payments-actions-top {
        flex-direction: column; /* Apilar botones superiores */
        align-items: center;
        gap: 10px;
    }
    .action-button {
        width: 100%; /* Botones de acción ocupan todo el ancho */
        max-width: 250px; /* Limitar para que no sean demasiado grandes */
    }
    .payments-section, .payments-summary {
        padding: 20px;
        margin-top: 20px;
    }
}

@media (max-width: 576px) {
    .payments-section h2 {
        font-size: 1.5em;
    }
    .modal-content {
        padding: 20px;
    }
    .modal-footer {
        flex-direction: column;
        gap: 10px;
    }
    .modal-footer .action-button {
        width: 100%;
    }
}
@media (min-width: 768px) {
    .payment-item {
        flex-direction: row; /* En pantallas medianas y grandes, vuelve a ser una fila */
        align-items: center; /* Centrar verticalmente */
    }
    .payment-details {
        margin-bottom: 0;
        /* En escritorio, ajusta el grid para que los elementos se distribuyan bien */
        grid-template-columns: auto 1fr auto 1.5fr; /* Ejemplo: Auto para Pago, 1fr para Fecha, auto para Valor, 1.5fr para Forma de Pago (más espacio) */
        gap: 0px 20px; /* Elimina el gap vertical, solo horizontal */
        justify-content: flex-start;
        flex-grow: 1;
    }

    /* Asegúrate de que el primer elemento (PAGO:) empiece al inicio del contenedor */
    .payment-details .payment-number {
        grid-column: 1; /* Posiciona en la primera columna */
        text-align: left;
    }
    .payment-details .payment-date {
        grid-column: 2; /* Posiciona en la segunda columna */
        text-align: left;
    }
    .payment-details .payment-amount {
        grid-column: 3; /* Posiciona en la tercera columna */
        text-align: right;
    }
    .payment-details .payment-method {
        grid-column: 4; /* Posiciona en la cuarta columna */
        text-align: left;
    }

    .payment-actions {
        width: auto;
        margin-top: 0;
    }
}
/* ========================================================== */
/* Estilos para el Modal de Pago (SweetAlert2) */
/* ========================================================== */

/* Estilos para el contenedor principal del popup (sin cambios aquí si ya funciona bien) */

.swal2-popup.custom-swal-popup {
    padding: 2em;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 90vh;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.swal2-content-container {
    display: flex; /* Habilitar flexbox */
    flex-direction: column; /* Apilar los elementos verticalmente */
    align-items: center; /* Centrar horizontalmente los items hijos */
    padding: 10px;
    margin-bottom: 10px;
}
/* Estilos para el contenedor de los botones de acción (OK/Cancel) */
.swal2-actions.custom-swal-actions {
    margin-top: 20px; /* Más espacio entre el contenido y los botones */
    display: flex;
    justify-content: center; /* Centrar los botones OK/Cancel */
    gap: 15px; /* Espacio entre los botones */
    padding-bottom: 10px; /* Pequeño padding en la parte inferior para que no estén pegados */
}

/* Estilos para los botones de SweetAlert2 */
.swal2-confirm,
.swal2-cancel {
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none; /* Eliminar borde predeterminado */
}

.swal2-confirm {
    background-color: #28a745; /* Verde para OK */
    color: #fff;
}
.swal2-confirm:hover {
    background-color: #218838;
    transform: translateY(-1px);
}

.swal2-cancel {
    background-color: #6c757d; /* Gris para Cancelar */
    color: #fff;
}
.swal2-cancel:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
}

/* Estilos para los campos de entrada dentro del modal */
.swal2-input,
.swal2-select {
    width: 100% !important; /* Asegura que ocupen el 100% del ancho de su contenedor flex */
    max-width: 350px; /* Opcional: Limita el ancho máximo para que no se vean demasiado anchos en pantallas grandes */
    padding: 12px !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    font-size: 1em !important;
    color: #495057 !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
    text-align: center; /* Centrar el texto dentro del select/input */
    -webkit-appearance: none; /* Eliminar estilos predeterminados del navegador para selects */
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%236c757d%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E'); /* Flecha personalizada para selects */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
}
.swal2-select option[value="default"] {
    color: #6c757d; /* Color para el placeholder "Seleccione..." */
}
.swal2-select:not([value="default"]) {
    color: #343a40; /* Color para los valores seleccionados */
}
.swal2-actions.custom-swal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center; /* Centrar los botones OK/Cancel */
    gap: 15px;
    padding-bottom: 10px;
}

/* Opcional: Estilo para el contenedor de los inputs dentro del modal, si tienes uno */
.swal2-content-container {
    padding: 10px; /* Un poco de padding interno si lo deseas */
    margin-bottom: 10px; /* Espacio antes de los botones, si no es gestionado por los inputs individuales */
}

/* Quitar clases bg-info de los selects si las quieres más neutras */
.swal2-select.bg-info {
    background-color: #e2f4fb !important; /* Un azul muy claro para los selects */
    /* Puedes ajustar el color de texto si no contrasta bien */
    color: #343a40 !important;
}

/* Estilo para el icono del modal */
.swal2-icon.swal2-info {
    color: #007bff; /* Color azul para el icono de información */
    border-color: #007bff;
}

/* Estilo para el título del modal */
.swal2-title {
    color: #343a40;
    font-size: 1.8em;
    font-weight: 600;
}


/* Media Queries para responsividad del modal */
@media (max-width: 576px) {
    .swal2-popup.custom-swal-popup {
        width: 95%; /* Más ancho en pantallas pequeñas */
        padding: 1.5em;
        max-height: 95vh; /* Puede ser más alto en móvil */
    }
    .swal2-actions.custom-swal-actions {
        flex-direction: column; /* Apilar botones en pantallas muy pequeñas */
        gap: 10px;
    }
    .swal2-confirm,
    .swal2-cancel {
        width: 100%; /* Botones ocupan todo el ancho apilados */
    }
}