/* public/css/style.css */

/* --- Variables CSS para consistencia --- */
:root {
    --primary-blue: #007bff; /* Un azul vibrante, similar al de la imagen */
    --light-blue-bg: #e6f0ff; /* Fondo muy claro para los inputs */
    --text-dark-gray: #495057; /* Gris oscuro para el texto */
    --light-gray-bg: #f8f9fa; /* Fondo general más claro */
    --payphone: #ff4500; /* Fondo general más claro */
    --card-border-radius: 18px; /* Bordes más redondeados */
    --input-border-radius: 12px; /* Bordes redondeados para inputs y botones */
    --spacing-lg: 25px; /* Espaciado generoso */
}

/* --- Estilos Generales y Tipografía --- */
body {
    font-family: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Preferencia de fuentes modernas */
    color: var(--text-dark-gray); /* Color de texto por defecto */
}

.text-pp{
    color: var(--payphone);
}

/* --- Centrado y Fondo --- */
html, body {
    height: 100%;
    /* Fondo muy claro, replicando la imagen */
    background-color: var(--light-gray-bg); 
}
.container-fluid.d-flex {
    min-height: 100vh;
}

/* --- Estilo de la Caja Principal (pay-box) --- */
.pay-box {
    max-width: 450px;
    width: 95%;
    padding: 15px; /* Un poco más de padding */
    border-radius: var(--card-border-radius);
    background-color: #fff;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease-in-out;
}

/* No hay efecto hover de elevación en la imagen, así que lo eliminamos o suavizamos */
/* .pay-box:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
} */

/* --- Títulos y Encabezados --- */
h2 {
    color: var(--primary-blue); /* Título en azul vibrante */
    font-weight: 700; /* Un poco más de peso para destacar */
    margin-bottom: var(--spacing-lg) !important;
}

/* --- Etiquetas de formulario --- */
.form-label {
    font-weight: 600; /* Labels con más peso */
    color: var(--text-dark-gray);
    margin-bottom: 8px; /* Pequeño espaciado entre label e input */
}

/* --- Estilos de Formulario (inputs y selects) --- */
.form-control, .form-select {
    border-radius: var(--input-border-radius);
    padding: 12px 15px; /* Más padding para una sensación espaciosa */
    border: none; /* Sin borde visible por defecto */
    background-color: var(--light-blue-bg); /* Fondo azul claro */
    color: var(--text-dark-gray);
    font-size: 1rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); /* Sombra interna sutil */
    transition: background-color 0.2s, box-shadow 0.2s;
}

.form-control::placeholder {
    color: #8c9096; /* Color de placeholder ligeramente más oscuro */
}

.form-control:focus, .form-select:focus {
    background-color: #f0f8ff; /* Ligeramente más claro al enfocar */
    border-color: #80bdff; /* Borde sutil al enfocar */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15); /* Sombra de enfoque más suave */
}

/* --- Botones --- */
.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    font-weight: 600;
    padding: 12px 20px; /* Más padding para el botón */
    border-radius: var(--input-border-radius); /* Bordes redondeados */
    font-size: 1.1rem; /* Texto del botón ligeramente más grande */
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}


.btn-primary:hover {
    background-color: #0056b3; /* Tono más oscuro al hover */
    border-color: #0056b3;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* Ligera sombra al hover */
}

.btn-pp {
    background-color: #ff6e35;
    border-color: #ff6e35;
    font: #ffff;
    font-weight: 600;
    padding: 12px 20px; /* Más padding para el botón */
    border-radius: var(--input-border-radius); /* Bordes redondeados */
    font-size: 1.1rem; /* Texto del botón ligeramente más grande */
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.btn-pp:hover {
    background-color: var(--payphone); /* Tono más oscuro al hover */    
    border-color: var(--payphone);
    box-shadow: 0 4px 10px rgba(255, 81, 0, 0.3); /* Ligera sombra al hover */
}

.btn-secondary {
    border-radius: var(--input-border-radius);
    padding: 10px 18px;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}


/* --- Espaciado en formularios --- */
form .mb-3 {
    margin-bottom: 20px !important; /* Más espacio entre grupos de formulario */
}

/* --- Estilo de Resumen de Pago (Caja 4) --- */
.card {
    border-radius: 12px; /* Bordes más redondeados */
    border: 1px solid #e9ecef; /* Borde sutil */
    background-color: #fdfdfd; /* Fondo ligeramente diferente para la tarjeta */
}

/* Total a pagar resaltado */
#c4-grand-total {
    color: #28a745; /* Verde de éxito */
    font-size: 1.6rem;
    font-weight: 700;
}

/* Swithes de aceptación */
.form-switch .form-check-input {
    width: 2.8em; /* Aumenta el ancho del switch */
    height: 1.6em; /* Aumenta la altura del switch */
    margin-top: 0.2em;
    cursor: pointer;
}

/* --- Mensajes de Alerta --- */
.alert-danger {
    border-radius: 10px;
    font-weight: 500;
    background-color: #fddddd; /* Fondo más suave para el error */
    color: #900; /* Texto de error más oscuro */
    border: 1px solid #fcc;
    padding: 12px 20px;
}

/* Estilos para las tarjetas de factura en Caja 2 */
#invoice-list-container .card {
    border-color: #007bff; /* Borde azul para destacar la factura seleccionada */
}

#invoice-list-container .form-check-label {
    padding-left: 10px; /* Espacio entre el radio y el texto */
    cursor: pointer;
}

#invoice-list-container .form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

/* Estilos para los iconos de éxito/fallo */
.success-icon {
    font-size: 4.5rem; /* Icono más grande */
}
.error-icon {
    font-size: 4.5rem;
    color: #dc3545; /* Rojo de error */
}

/* --- Estilos para el Modal de Términos y Condiciones --- */
#termsModal .modal-content {
    border-radius: var(--card-border-radius);
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

#termsModal .modal-header {
    background-color: var(--primary-blue);
    color: white;
    border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
    border-bottom: none;
}

#termsModal .modal-title {
    font-weight: 600;
    font-size: 1.25rem;
}

#termsModal .btn-close {
    filter: invert(1);
}

#termsModal .modal-body {
    padding: 2rem;
    line-height: 1.6;
}

#termsModal .terms-content h6 {
    color: var(--primary-blue);
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

#termsModal .terms-content h6:first-child {
    margin-top: 0;
}

#termsModal .terms-content p {
    margin-bottom: 1rem;
    text-align: justify;
}

#termsModal .terms-content ul {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

#termsModal .terms-content ul li {
    margin-bottom: 0.5rem;
}

#termsModal .modal-footer {
    border-top: 1px solid #e9ecef;
    padding: 1rem 2rem;
}