html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Fondo para el tema oscuro */
.dynamic-background {
    background-color: black;
    background-image:
        radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.2), transparent 70%),
        radial-gradient(ellipse at bottom right, rgba(255, 255, 255, 0.15), transparent 80%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.1) 10%, transparent 20%, transparent 40%, rgba(255, 255, 255, 0.2) 50%);
    background-size: cover;
    background-blend-mode: lighten;
}

/* Fondo para el tema claro */
.light-theme .dynamic-background {
    background-color: white;
    background-image:
        radial-gradient(ellipse at top left, rgba(218, 165, 32, 0.3), transparent 70%),
        radial-gradient(ellipse at bottom right, rgba(218, 165, 32, 0.25), transparent 80%),
        linear-gradient(45deg, rgba(218, 165, 32, 0.2) 10%, transparent 20%, transparent 40%, rgba(218, 165, 32, 0.3) 50%);
    background-size: cover;
    background-blend-mode: multiply;
}

.contenido {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* Ajusta el tamaño restando la navbar y el footer */
    min-height: calc(100vh - var(--altura-navbar) - var(--altura-footer));
    position: relative; /* Mantiene su lugar */
    z-index: 2; /* Lo pone por encima de todo */
    top: var(--altura-navbar)
}

.consulta-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#codigo-input {
    padding: 10px;
    font-size: 18px;  /* Aumentar el tamaño del texto */
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 250px;  /* Aumentar el ancho */
    min-width: 200px;
}

#buscar-btn {
    padding: 8px 15px;
    font-size: 16px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

#buscar-btn:hover {
    background-color: #0056b3;
}

/* Mantener la estructura original */
.resultado-container {
    text-align: left;
    margin-top: 15px;
}

.fila {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
}

#indicador{
    font-weight: bold;
}

#codigoIngresado{
    font-weight: normal;
}

.col {
    width: 50%;
    font-weight: bold;
}

.resultado {
    font-size: 18px;
    font-weight: normal;
    color: #333;
}

/* Mantener el modal centrado */
#resultadoModal .modal-dialog {
    width: 60%;
    max-width: 800px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    display: flex;
    flex-direction: column;
    z-index: 3;
}

/* Ajustar la estructura del modal */
#resultadoModal .modal-content {
    max-height: 80vh; /* Limita el tamaño total del modal */
    display: flex;
    flex-direction: column;
}

/* Limitar el tamaño del modal-body y permitir scroll interno */
#resultadoModal .modal-body {
    flex-grow: 1;
    overflow-y: auto; /* Permitir scroll si el contenido es grande */
    max-height: calc(80vh - 110px); /* Ajuste para no empujar el footer fuera */
    padding: 1rem;
}

/* Evitar scroll en el cuerpo de la página cuando el modal está abierto */
body.modal-open {
    overflow: hidden;
    padding-right: 0 !important;
}

/* Asegurar que el contenedor de boletas tenga su propio scroll */
#boletasContainer {
    max-height: 180px !important;
    overflow-y: auto !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px solid #ddd;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Mantener el footer siempre visible */
#resultadoModal .modal-footer {
    background: white;
    z-index: 3;
    border-top: 1px solid #ddd;
    padding: 10px;
    justify-content: center !important;
    text-align: center !important;
    display: block;
}

.boletas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#boletasContainer .ticket-base {
    margin-bottom: 5px;
    flex-basis: auto;
}

/* Estilos base para todos los tickets */
#resultadoModal .ticket-base {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    position: relative;
    font-family: 'Arial', sans-serif;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    margin: 0.5rem 0;
    overflow: hidden;
    min-width: 80px;
}

/* Ticket dorado - para uso general */
#resultadoModal .ticket-gold {
    background: linear-gradient(135deg, #ffd700 0%, #f9a602 50%, #ffd700 100%);
    color: #000;
    border: 1px solid #e6c200;
}

#resultadoModal .ticket-gold::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: repeating-linear-gradient(90deg, #ffd700, #ffd700 10px, #e6c200 10px, #e6c200 20px);
}

#resultadoModal .ticket-gold::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: repeating-linear-gradient(90deg, #ffd700, #ffd700 10px, #e6c200 10px, #e6c200 20px);
}

/* Ticket especial azul - para números especiales */
#resultadoModal .ticket-diamond {
    background: linear-gradient(135deg, #0077be 0%, #1e90ff 50%, #0077be 100%);
    color: white;
    border: 1px solid #005c91;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

#resultadoModal .ticket-diamond::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: repeating-linear-gradient(90deg, #0077be, #0077be 10px, #1e90ff 10px, #1e90ff 20px);
}

#resultadoModal .ticket-diamond::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: repeating-linear-gradient(90deg, #0077be, #0077be 10px, #1e90ff 10px, #1e90ff 20px);
}

/* Efecto de brillo para tickets diamante */
#resultadoModal .ticket-diamond-glow {
    animation: ticket-blue-glow 1.5s ease-in-out infinite alternate;
}

@keyframes ticket-blue-glow {
    0% { box-shadow: 0 0 5px #1e90ff, 0 0 10px #1e90ff; }
    100% { box-shadow: 0 0 15px #1e90ff, 0 0 25px #4169e1, 0 0 35px #0000ff; }
}

/* Adornos laterales de tickets */
#resultadoModal .ticket-side-cut::before,
#resultadoModal .ticket-side-cut::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 100%;
    top: 0;
    background-size: 20px 20px;
    background-repeat: repeat-y;
}

#resultadoModal .ticket-side-cut::before {
    left: -5px;
    background-image: radial-gradient(circle at 10px 10px, transparent 8px, currentColor 8px, currentColor 10px, transparent 10px);
}

#resultadoModal .ticket-side-cut::after {
    right: -5px;
    background-image: radial-gradient(circle at 10px 10px, transparent 8px, currentColor 8px, currentColor 10px, transparent 10px);
}

#correoModal .modal-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

#correoModal .modal-dialog {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    z-index: 3; /* Asegura que esté por encima del modal de código */
    max-height: none !important; /* Evita que se recorte */
    overflow: visible !important; /* Asegura que el contenido no haga scroll */
}

/* Aplicar desenfoque SOLO al contenido del modal de código */
#resultadoModal .modal-content.blurred {
    filter: blur(4px);
}

/* Asegurar que el modal de correo NO se desenfoque */
#correoModal .modal-content {
    filter: none !important;
}

.modal-backdrop{
    z-index: 1;
}

/* Aplicar un fondo oscurecido difuminado */
.modal-backdrop.show {
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.3) !important;
}

#modalCorreo .modal-content {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

#modalCorreo input {
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    font-size: 16px;
}

#modalCorreo .btn {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}

/* Asegurar que la alerta está encima de todo */
/* Ajustar la alerta para que sea un cuadro compacto y centrado */
#alertaCorreo {
    position: fixed; /* Fijar en la pantalla */
    top: 5%; /* Ajustar la altura */
    left: 50%;
    transform: translate(-50%, -50%); /* Centrar horizontal y verticalmente */
    z-index: 4; /* Asegurar que esté encima del modal */
    width: 100%;
    max-width: 90%;
    padding: 10px 15px;
    text-align: center;
    background-color: rgb(0, 123, 255);
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 0;
}

/* Asegurar que no se vea afectada por el blur */
#correoModal .modal-content #alertaCorreo {
    filter: none !important;
}

/* Animación de entrada */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Animación de salida */
@keyframes fadeOutScale {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }
}

/* Aplicar animación al modal */
#resultadoModal.show .modal-dialog {
    animation: fadeInScale 0.3s ease-out;
}


#correoModal.show .modal-dialog{
    animation: fadeInScale 0.3s ease-out;
}

/* Mostrar alerta con animación */
.alerta-show {
    opacity: 1 !important;
    animation: fadeInScale 0.3s ease-out;
}

/* Ocultar alerta con animación */
.alerta-hide {
    animation: fadeOutScale 0.3s ease-in;
}

.light-theme .titulo-consulta{
    color: #e6c200!important;
    transition: cubic-bezier(0.39, 0.575, 0.565, 1);
}

/* Reset completo para el modal de confirmación */
#confirmarCorreoModal {
    padding-right: 0 !important;
    overflow-y: hidden !important;
}

#confirmarCorreoModal .modal-dialog {
    position: fixed !important;
    margin: 0 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 500px !important;
    height: 50% !important;
    max-height: 90vh !important;
}

#confirmarCorreoModal .modal-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
}

/* Evitar que el modal quede desplazado por otros elementos */
body.modal-open {
    overflow: hidden;
    padding-right: 0 !important;
}

/* Asegurar que el backdrop cubra toda la pantalla */
.modal-backdrop {
    width: 100vw !important;
    height: 100vh !important;
}

#confirmarCorreoBtn{
    height: 100%;
    background: #198754;
}

#confirmarCorreoBtn:hover{
    transform: translateY(0px);
    box-shadow: none;
    background: #157347;
}

.confirmar-first-field, .confirmar-third-field{
    font-weight: bold;
}

@media(max-width: 768px) {
    #resultadoModal .modal-dialog{
        top: 55%;
    }
}