@charset "utf-8";

/* --- General Styles --- */
body {
    background-color: #121212; /* Light background for the entire page */
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Added a font stack for better typography */
    color: #212529; /* Default text color */
}

.container-main {
    max-width: 1200px;
    margin: 2rem auto; /* Centers the container horizontally with auto */
    padding: 2.5rem;
    background-color: #ffffff;
    border-radius: 0.85rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08); /* Soft shadow for depth */
}

/* --- Section Headers --- */
.section-header {
    background-color: #e9ecef;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    margin-top: 2rem; /* Space above each new date/section */
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between; /* Aligns content to ends for date/buttons */
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: #495057;
}

/* --- Table Styles --- */
.table {
    width: 100%; /* Ensure tables take full width */
    border-collapse: collapse; /* Collapses borders between cells */
}

.table thead th {
    background-color: #343a40;
    color: white;
    border-bottom: none; /* No border at the bottom of the header */
    vertical-align: middle; /* Vertically aligns text in table headers */
    padding: 0.75rem; /* Consistent padding for table headers */
}

.table tbody tr:last-child {
    border-bottom: 1px solid #dee2e6; /* Ensures the last row has a bottom border if not already */
}

.table tbody td {
    padding: 0.75rem; /* Consistent padding for table data cells */
    border-bottom: 1px solid #ddd; /* Light border for table rows */
    text-align: left; /* Default text alignment for table cells */
}

/* Styles for date rows within the table */
.table-date-header {
    background-color: #e2f0f7; /* Background color for the date row */
    font-weight: bold;
    color: #212529;
    text-align: center;
    font-size: 1.1em;
    border-bottom: 2px solid #a8dcf0; /* Stronger border for date rows */
}

/* --- Badge Styles --- */
.badge-numero {
    font-size: 1.1rem;
    padding: 0.4em 0.8em;
    border-radius: 0.35rem;
    min-width: 45px;
    display: inline-block;
    text-align: center;
    /* Consider adding default background/color if it's always the same, or use specific classes */
}

.badge-status-pending {
    background-color: #ffc107;
    color: #212529;
}

.badge-status-paid {
    background-color: #28a745;
    color: #fff;
}

.badge-status-annulled {
    background-color: #dc3545;
    color: #fff;
}

/* --- Boleto (Ticket) Selection Styles --- */
#boletos-checkboxes {
    max-height: 300px; /* Set a reasonable max height for the scrollable area */
    overflow-y: auto; /* Enables vertical scrolling when content overflows */
    padding: 10px; /* Padding inside the box */
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    background-color: #f4f6f9;
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    align-content: flex-start; /* Aligns wrapped lines to the start */
    gap: 10px; /* Adds space between items in the flex container */
}

.boleto-item {
    /* Removed redundant margin as gap handles spacing */
    flex-shrink: 0; /* Prevents items from shrinking */
}

.boleto-label {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    cursor: pointer;
    background-color: #f8f9fa;
    transition: all 0.2s ease-in-out; /* Smooth transition for hover effects */
    font-weight: 500;
    color: #495057;
    min-width: 60px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.boleto-label:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.boleto-item input[type="checkbox"] {
    display: none; /* Hides the actual checkbox */
}

.boleto-label-active {
    background-color: #0d6efd !important; /* Bootstrap primary blue */
    color: white !important;
    border-color: #0d6efd !important;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2) !important;
    transform: translateY(-2px) !important; /* Slight lift effect */
}

/* --- Ticket List (for selected items, e.g., in a summary) --- */
.ticket-list-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.ticket-list-item:last-child {
    border-bottom: none;
}

.ticket-list-item input[type="checkbox"] {
    margin-right: 10px; /* Space between checkbox and text */
}

/* --- Jugadas en Ticket Table Styles --- */
#apuestas-en-ticket th,
#apuestas-en-ticket td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

#apuestas-en-ticket th {
    background-color: #f2f2f2;
}

/* --- Validation Error Messages --- */
.error-message {
    color: #dc3545; /* Bootstrap danger red */
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* --- Modal Specific Styles --- */
.modal-body .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body .list-group-item strong {
    color: #0d6efd; /* Primary blue for strong text in list items */
}

.modal-body .list-group-item.list-group-item-success strong {
    color: #198754; /* Green for success state in list items */
}

/* --- Card Styles --- */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* --- Report Form Group Styles --- */
.report-form-group > div {
    display: none; /* Hides report form fields by default */
}

/* Makes the active report field visible */
.report-form-group.active > div {
    display: block;
}

/* --- Estilo botones de pago --- */
/* Ocultar el radio button nativo */
    .form-check.payment-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* Estilo por defecto de la opción */
    .form-check.payment-option label {
        width: 120px;   /* Ancho fijo para cada botón */
        height: 120px;  /* Altura fija para cada botón */
        padding: 0.5rem; /* Padding interno, ajustable si es necesario */
        border: 2px solid #ced4da;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        
        /* Flexbox para alinear contenido (imagen y texto) */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between; /* Espacio entre imagen y texto */
        text-align: center;
    }

    /* Contenedor de la imagen dentro de la etiqueta */
    .form-check.payment-option .img-container {
        flex-grow: 1; /* Hace que el contenedor de la imagen ocupe el espacio disponible */
        display: flex; /* Asegura que la imagen se centre dentro de su contenedor */
        align-items: center;
        justify-content: center;
        width: 100%; /* El contenedor de la imagen ocupa todo el ancho disponible */
        overflow: hidden; /* Recorta si la imagen se desborda */
    }

    /* La imagen en sí, asegurando que se ajuste al contenedor */
    .form-check.payment-option .img-container img {
        max-width: 100%; /* Asegura que la imagen no se desborde del contenedor */
        max-height: 100%; /* Asegura que la imagen no se desborde del contenedor */
        object-fit: contain; /* Ajusta la imagen sin recortarla, manteniendo su aspecto */
        /* Puedes usar 'cover' si prefieres que la imagen cubra todo el espacio, recortando si es necesario */
    }

    /* Estilo al pasar el ratón */
    .form-check.payment-option label:hover {
        border-color: #0d6efd;
        box-shadow: 0 0 0.5rem rgba(13, 110, 253, 0.25);
    }

    /* Estilo cuando la opción está seleccionada (radio button checked) */
    .form-check.payment-option input[type="radio"]:checked + label {
        border-color: #0d6efd;
        background-color: #e7f0ff;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    /* Estilo del texto dentro de la opción */
    .form-check.payment-option span {
        font-weight: 500;
        color: #343a40;
        margin-top: 0.5rem; /* Añadir espacio entre la imagen y el texto */
    }