:root {
    /* Paleta de colores minimalista original */
    --color-primary-text: #333333; /* Texto principal */
    --color-secondary-text: #6c757d; /* Texto secundario/enlaces */
    --color-background: #ffffff;
    --color-light-gray: #f8f9fa; /* Fondo suave */
    --color-border: #e9ecef;
    --font-stack: "Montserrat", sans-serif;

    /* Colores personalizados recurrentes (Agregados para limpieza) */
    --color-bingo-yellow: #ffd700;
    --color-bingo-red: #d80000;
    --color-dark-input: #4a4a4a;
    --color-dark-fieldset: #383838;
}

/* Importación de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: var(--font-stack);
    margin: 0;
    padding: 0;
    background: #363535;
    color: #EBEBEB;
    line-height: 1.5;
    font-size: 18px;
}
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 15px;
}
/* Z-INDEX para asegurar el orden de apilamiento */
.navbar { z-index: 1000; position: relative; } /* Added position: relative for z-index to work */
.mascot-area { z-index: 100; }
.modal { z-index: 1001; }
.form-section { z-index: 1010; }

/* ============================================== */
/* === 2. MENÚ DE NAVEGACIÓN (HEADER) - Estilos Originales === */
/* ============================================== */
.navbar nav {
    margin: 5px 0 0 0;
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap; /* Permite que los botones salten de línea */
    gap: 5px; /* Espacio entre botones */
}
.navbar {
    background: linear-gradient(180deg, #292929 0%, #0d0d0d 100%);
    border-bottom: 3px solid #3B3A3A;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 10px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-size: 13px;
    top: 0;
    z-index: 1000;
}
.logo { max-width: 250px; height: auto; }
/* Botones de Navegación */
.navbar nav a, .dropdown {
    margin: 0 2px;
    font-size: 1.1em;
    text-decoration: none;
    font-weight: bold;
    color: #000;
    padding: 2px 2%;
    border-radius: 30px;
    background: linear-gradient(180deg, #ffd700 0%, #e8b000 100%);
    border: 1px solid #ccaa00;
    color: #333;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    display: inline-block; /* Added for better padding/margin handling */
    cursor: pointer;
}
.navbar nav a:hover, .btndrop:hover {
    background: linear-gradient(180deg, #ffffb3 0%, #ffd966 100%);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.navbar nav a:active, .btndrop:active {
    background: linear-gradient(180deg, #e8b000 0%, #ffd700 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset;
}

/* Dropdown - Estilos Originales Preservados */
.dropdown { position: relative; }
.dropdown .dropdown-content {
    position: absolute;
    min-width: 200px;
    z-index: 1;
    left: 0px; /* Este valor podría ser problemático en responsive */
    max-height: 0;
    opacity: 0;
    overflow: hidden; /* Added to hide content */
    transition: max-height 0.4s ease-out, opacity 0.3s ease-in-out;
    margin-top:6px;
}
.dropdown-content.show { max-height: 200px; opacity: 1; }
.dropdown .dropdown-content a {
    margin: 3px 0;
    padding: 1px 6%;
    font-size: 1em;
}
.dropdown-content a { display: block; }
/* ============================================== */
/* === 3. LAYOUT PRINCIPAL Y SLIDER - Estilos Originales === */
/* ============================================== */
.main-content-grid {
    display: flex;
    flex-direction: column;
    padding: 15px;
    margin-bottom: 20px;
}
.mascot-area img {
    max-width: 100%;
    width: 250px;
    height: auto;
    cursor: pointer;
}
.mascot-area img:hover {
    transform: scale(1.05) rotate(-1deg);
}
/* Mascot Area background/position (Se movió al final del archivo para mantener la estructura original) */
.mascot-area {
    order: -1;
    position: relative;
    text-align: center;
    margin: 25px 0 15px 0;
    padding: 10px;
    background: radial-gradient(circle at 50% 70%, #ffffff 0%, #fffacd 15%, #ffd700 40%, #cc9900 100%);
    border-radius: 12px;
    box-shadow: 0 22px 15px rgba(0, 0, 0, 0.1);
}
/* --- ANIMACIONES PARA EL CLICK EN LA MASCOTA --- */

/* 1. Definición de la animación de sacudida */
@keyframes sacudir {
    /* Mantenemos el ligero aumento de escala */
    0% { transform: translate(1px, 1px) rotate(0deg) scale(1.05); } 
    25% { transform: translate(-1px, -2px) rotate(-1deg) scale(1.05); }
    50% { transform: translate(-3px, 0px) rotate(1deg) scale(1.05); }
    75% { transform: translate(1px, 2px) rotate(-1deg) scale(1.05); }
    100% { transform: translate(1px, -2px) rotate(0deg) scale(1.05); }
}

/* 2. Clase que aplica la animación (activada por JS) */
.mascot-area .mascota.mascota-activa {
    /* La animación se llama 'sacudir', dura 0.5s, se ejecuta 3 veces */
    animation: sacudir 0.5s cubic-bezier(.36,.07,.19,.97) 3;
    backface-visibility: hidden; 
    perspective: 1000px;
}

/* 3. Estilos para las Estrellas */
.estrellas-animadas {
    position: absolute;
    top: -20px; /* Ajusta la altura de salida sobre la mascota */
    left: 50%;
    transform: translateX(-50%);
    font-size: 3em; 
    pointer-events: none; 
    opacity: 0;
    z-index: 10;
    
    /* Animación de subida y desvanecimiento */
    animation: brillar-y-subir 0.8s ease-out forwards; 
}

@keyframes brillar-y-subir {
    0% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -60px); /* Sube 60px */
    }
}
/* Títulos y Slider */
.main-title {
    text-align: center;
    color: var(--color-primary-text); /* Color claro si no se cambia */
    color: #EBEBEB; /* Fuerza el color claro */
    margin: 40px 0 30px;
    font-size: 1.8em;
    font-weight: 600;
}
.main-title span {
    color: var(--color-accent);
}
.bingo-slider h2 {
    color: #EBEBEB;
    font-size: 1.2em;
    font-weight: 600;
    border-left: 4px solid #eab410;
    padding-left: 10px;
    margin: 10px 0px 10px 0px;
}
.bingo-slider {
    margin-bottom: 30px;
    padding: 10px 0;
    width: 100%;
}
.bingo-slider div img {
    width: 90%;
    border-radius: 10% 10% 0 0;
}
.slider-content {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 0px 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.bingo-card img {
    width: 300px;
}
.bingo-card {
    background: linear-gradient(180deg, #292929 0%, #0d0d0d 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 300px; /* Corrected typo 'widh' */
    flex: 0 0 auto;
    padding: 15px;
    text-align: center;
    border-radius: 25px;
    background-color: #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    font-size: 0.9em;
    scroll-snap-align: start;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: 20px 22px 15px rgba(0, 0, 0, 0.3);
}
.bingo-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}
.bingo-card h3 {
    margin-top: 0;
    font-size: 1.1em;
    text-align: center;
}
/* Botón de la tarjeta (Mismos estilos dorados) */
.bingo-card button {
    margin-top: 10px;
    width: 100%;
    padding: 8px;
    background: linear-gradient(180deg, #ffd700 0%, #e8b000 100%);
    border: 1px solid #ccaa00;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #333;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}
.bingo-card button:hover {
    background: linear-gradient(180deg, #ffffb3 0%, #ffd966 100%);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
/* ======================================================= */
/* === 4. FORMULARIO DE COMPRA (OVERLAY) - AJUSTE DE LAYOUT === */
/* ======================================================= */
.form-section {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.70);
    backdrop-filter: blur(8px);
    z-index: 1010;
    overflow-y: auto;
    padding: 10px;
    overflow: hidden;
}
.form-section.is-active {
    display: flex;
    justify-content: center;
    /* Mantenemos el align-items: flex-start para móvil */
    align-items: flex-start;
}
.form-content-wrapper {
    background: #2b2b2b;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.9);
    padding: 15px;
    max-width: 650px;
    width: 98%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    color: #ffffff;
    margin-top: 5vh;
}
/* Botón de Cerrar (Original) */
.close-form-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 32px;
    color: #ffcc00;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
}
.close-form-btn:hover {
    color: #d80000;
}

/* Títulos y Fieldsets (Originales) */
.form-section .mtitle {
    font-weight: 700;
    color: #F2F2F2;
    text-shadow: none;
    padding: 6px 0;
    border-bottom: 1px dashed #ffcc00;
    margin-top: 5px;
    text-align: center;
    font-size: .9em;
}
.form-section .mtitle span {
    font-weight: 700;
    color: #ffcc00;
}
.bingo-flyer-container { max-width: 500px; margin: 0 auto 20px auto; text-align: center; border-radius: 8px; overflow: hidden; background-color: #333333; }
.flyer-image { max-width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.compra-form { display: contents; gap: 20px; margin-bottom: 10%;} /* Mantenemos el 'display: contents' original */
.form-fieldset { border: 1px solid #555555; padding: 15px; border-radius: 8px; background-color: #383838; margin-bottom: 15px; }
.form-fieldset legend { font-weight: 700; color: #ffcc00; padding: 0 8px; font-size: 1em; }
.form-group label { display: block; margin-bottom: 3px; font-weight: 600; font-size: 0.85em; color: #ffffff; }
/* Estilos de Input (Originales) */
.form-group input:not([type="file"]),
.input-group-prefix .prefix-select,
.input-group-prefix .country-select {
    width: 100%; padding: 8px; border: 1px solid #555555; border-radius: 6px; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s;
    font-size: 0.9em; background-color: #4a4a4a; color: #ffffff; height: auto;
}
.form-group input:focus { border-color: #d80000; box-shadow: 0 0 0 1px #d80000; outline: none; }

/* CORRECCIÓN: Prefijo de Teléfono (Usando Flexbox para que funcione bien) */
.input-group-prefix {
    display: flex;
    gap: 5px;
    align-items: center;
}
.input-group-prefix .prefix-select {
    width: 65px;
    flex-shrink: 0;
}
.input-group-prefix .country-select {
    width: 100px;
    flex-shrink: 0;
}
.input-group-prefix input {
    flex-grow: 1;
    min-width: 0;
}

/* --- Search bingo (Limpieza de float) --- */
.carton-result-area {
    display: block;
    width: 100%;
}
.carton-result-area .cardsci-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    background-color: #4a4a4a;
    padding: 10px; /* Added padding for content */
}
.cardsci-list .item { /* Assuming each result is wrapped in a container */
    display: flex; /* Use flex to control internal layout */
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px dashed #666;
}
.cardsci-list .item:last-child {
    border-bottom: none;
}
.cardd p { margin: 0; padding: 0; }
.cardsci-list img {
    width: 20%;
    /* float: left; - REMOVED */
}
.cardd {
    /* width: 70%; - REMOVED */
    /* float: right; - REMOVED */
    flex-grow: 1;
    text-align: right;
}

/* Tickets y botones de selección */
.zoomeable-carton {
    padding: 6px 10px; border: 1px solid var(--color-border); background-color: var(--color-background);
    color: var(--color-secondary-text); border-radius: 4px; cursor: pointer; font-size: 0.8em; font-weight: 500;
    transition: background-color 0.2s, color 0.2s; flex: 1 1 45px; min-width: 45px; text-align: center;
}
.carton-result-area .citicket.selected { background-color: var(--color-accent-yellow); color: white; border-color: var(--color-accent-yellow); }
.carton-result-area .citicket.unavailable { background-color: #f1f1f1; color: #b1b1b1; border: 1px dashed #ccc; cursor: not-allowed; text-decoration: none; }
.tickets-list {
    display: flex; flex-wrap: wrap; justify-content: space-around; gap: 5px; max-height: 200px;
    overflow-y: auto; padding: 10px 5px; border: 1px solid #ffcc00; border-radius: 8px;
    background-color: #4a4a4a; margin-bottom: 15px;
}
.ticket-btn {
    width: 36px; height: 36px; line-height: 36px; padding: 0; border-radius: 50%; border: 2px solid #555555;
    background-color: #2b2b2b; color: #cccccc; cursor: pointer; font-size: 0.8em; font-weight: 700;
    text-align: center; flex: 0 0 36px; min-width: 36px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    transition: all 0.2s;
}
.ticket-btn.selected { background-color: #d80000; color: #ffcc00; border-color: #ffcc00; box-shadow: 0 0 8px #d80000; }
.ticket-btn.unavailable { background-color: #333333; color: #666666; border: 2px dashed #444444; cursor: not-allowed; box-shadow: none; }
/* --- SECCIÓN DE RESUMEN Y PAGO (Originales) --- */
.summary { background-color: #383838; padding: 5px; border-radius: 6px; font-size: 0.7em; line-height: 1.4; border-left: 4px solid #ffcc00; color: #ffffff; margin-bottom: 15px; }
.summary strong { color: #ffcc00; font-weight: 700; }
.payment-area { background-color: #383838; min-width: 100%; border: 1px dashed #ffcc00; padding: 15px;border-radius: 8px; margin-top: 15px; display: flex; flex-direction: column; }
.payment-title { font-size: 1.2em; color: #ffcc00; font-weight: 700; padding-bottom: 10px; margin-bottom: 15px; text-align: center; }
.payment-area h2, .payment-area h3 {
    font-size: 1.2em; color: #ffcc00; border-bottom: 1px dashed #555555; padding-bottom: 5px; margin-top: 0; margin-bottom: 15px; text-align: center;
    background: transparent; text-shadow: none;
}
.payment-info-box { padding: 10px; background-color: #2b2b2b; border: 1px solid #555555; border-radius: 8px; margin-bottom: 10px; }
.payment-info-box h3 { font-size: .9em; color: #ffcc00; margin-top: 0; margin-bottom: 8px; }
.payment-info-box p { font-size: 0.7em; line-height: 1.4; margin-bottom: .5px; color: #ffffff; }
.payment-info-box p strong { font-weight: 700; color: #ffcc00; }

/* Botón Final de Enviar (Original) */
.submit-btn, .fclose-btn {
    width: 100%; padding: 12px; border-radius: 8px; font-size: .9em; font-weight: 800; cursor: pointer;
    margin-top: 10px; transition: background-color 0.2s, color 0.2s; text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); text-decoration: none; font-weight: bold; color: #000;
    padding: 10px 20px; /* Ajuste para que se parezca al botón original */
    border-radius: 30px; /* Se mantiene el redondeo */
    background: linear-gradient(180deg, #ffd700 0%, #e8b000 100%);
    border: 1px solid #ccaa00;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #333;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
.submit-btn:hover:not(:disabled) { background: linear-gradient(180deg, #ffffb3 0%, #ffd966 100%); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); }
.submit-btn:disabled { background: linear-gradient(180deg, #ffffb3 0%, #ffd966 100%); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); color: #cccccc; cursor: not-allowed; box-shadow: none; }

/* Input de Archivo (Original) */
#captura { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.form-group label[for="captura"] {
    display: block; cursor: pointer; text-align: center; padding: 10px; border-radius: 8px; font-weight: 700; font-size: 1em; margin-top: 5px;
    background-color: var(--color-bingo-yellow); color: #1e1e1e; border: 2px solid #ccaa00; transition: background-color 0.2s, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.form-group label[for="captura"]::before { content: "\F473"; font-family: "bootstrap-icons"; font-weight: normal; font-style: normal; margin-right: 8px; vertical-align: middle; }
.form-group label[for="captura"]:hover { background-color: #e8b000; transform: translateY(-1px); }
.form-group label[for="captura"].file-selected { background-color: var(--color-bingo-red); color: #ffffff; border-color: #ffcc00; }
.form-group label[for="captura"].file-selected::before { content: "\F269"; }

/* ============================================== */
/* === 5. FOOTER Y SOCIAL LINKS - Originales === */
/* ============================================== */
.footer {
    background: linear-gradient(0deg, #0d0d0d 0%, #292929 100%);
    color: white; text-align: center; font-size: 0.6em; position: relative; padding: 3% 15%; z-index: 10;
}
.social-links { display: flex; justify-content: center; gap: 15px; }
.social-icon { color: var(--color-light-gray); text-decoration: none; transition: color 0.2s; font-size: 0.9em; margin: 0px; }
.social-icon:hover { color: var(--color-accent); }
.social-links a.whatsapp i { color: #25D366; }
.social-links a.instagram i { color: #fd5949; }
.social-links a.telegram i { color: #0088CC; }
.social-links a.facebook i { color: #1877F2; }
.social-links a i:hover { opacity: 0.8; }
.social-links a { font-size: 24px; text-decoration: none; }

/* ============================================== */
/* === 6. MODALES - Originales === */
/* ============================================== */
.modal {
    display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(3px); overflow-y: auto;
}
.modal-content {
    background-color: #2b2b2b; color: #F2F2F2; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%); padding: 0; border-radius: 8px; width: 90%; max-width: 400px;
    text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); max-height: 80vh; overflow-y: auto;
}
.modal .proceso-title {
    background-color: #ffcc00; color: black; text-align: center; font-size: .9em; padding: 15px 20px;
    margin: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; position: relative;
}
.modal .close-btn { font-size: 25px; font-weight: bold; position: absolute; right: 15px; top: 10px; line-height: 1; cursor: pointer; z-index: 100000; color: #BD2C0F; }
.modal .close-btn:hover { color: #000; }
.carton-container .carton-number { font-size: .7em; }
.carton-container #modal-carton-img { width:17em; }
.modal-content .confirm-text { font-size: .7em; }
.button-group #modal-confirm-btn, .button-group #modal-cancel-btn { font-size: .7em; width: 90%; border-radius: 5px; padding: 1% 0; }
.button-group #modal-cancel-btn {
    cursor: pointer; margin-top: 5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); text-decoration: none;
    font-weight: bold; color: #fff; border: 2px solid #555555; background-color: #2b2b2b; margin-bottom: 10px;
}
.button-group #modal-cancel-btn:hover { background-color: #5b5b5b; }

/* Estilos de búsqueda (Corrección de Layout) */
.view-cartones-modal .modal-content { max-width: 550px; padding-bottom: 20px; }
.search-container {
    padding: 20px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    display:flow-root;
}
#ver-mis-cartones-modal .search-container {
    flex-direction: column;
    gap: 15px;
}
.input-group-search { /* Nuevo contenedor para agrupar input y prefijo/botón */
    display: flex;
    width: 100%;
    align-items: center;
}
#input-group-prefix {
    /* CORRECCIÓN: Estilos para que se vea como un grupo y ocupe el espacio */
    flex-shrink: 0;
    width: 10%;
    padding: 8px;
    border-radius: 6px 0px 0px 6px;
    font-size: 16px;
    border: 1px solid #555555;
    box-sizing: border-box;
    background-color: #4a4a4a;
    color: #ffffff;
    /* float:left; - REMOVED */
}
#carton-search-input {
    /* CORRECCIÓN: Para que ocupe el espacio restante y se junte con el botón/prefijo */    
    float: left;
    min-width: 0;
    width: 70%; 
    padding: 8px;
    border-radius: 0; /* Quitamos el redondeo para que se junte */
    border: 1px solid #555555;
    border-left: none;
    font-size: 0.7em;
    background-color: #4a4a4a;
    color: #ffffff;
    /* float:left; - REMOVED */
}
#carton-search-input:focus { border-color: #5a7d9a; box-shadow: 0 0 0 1px #5a7d9a; outline: none; }
.search-btn {
    /* CORRECCIÓN: Para que se pegue al input y ocupe el ancho restante (30%) */
    width: 30%;
    padding: 8px;
    margin: 0;
    background-color: #5a7d9a;
    border: 1px solid #5a7d9a;
    border-radius: 0 6px 6px 0;
    font-size: .7em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    position:;
    float: right;
    /* float:right; / float:left; - REMOVED */
}
#carton-search-btn:hover { background-color: #4a6880; }
#carton-search-btn:active { transform: translateY(1px); }
.carton-result-area { padding: 0 20px; text-align: center; }
.message-text {
    font-size: .7em; font-weight: 500; color: var(--color-primary-text); margin: 10px 0;
    padding: 50px 30px; border-radius: 4px; color:ghostwhite; background-color: #4A4949; border: 1px dashed #5C5C5C;
}
.searched-carton-img { width:17em;margin-bottom: 20px; }
/* Estilo para CI/Input de búsqueda (duplicado pero ajustado) */
.input-group-prefix2 {
    display: flex; /* Usamos flex para ordenar */
    align-items: center;
    width: 100%; /* Aseguramos el 100% de ancho */
}
.input-group-prefix2 .pf-right {
    flex-shrink: 0; /* No se encoge */
    width: 16%;
    font-size:.7em;
    padding: 7px;
    border: 1px solid #555555;
    border-radius: 6px 0px 0px 6px;
    box-sizing: border-box;
    background-color: #4a4a4a;
    color: #ffffff;
    height: auto;
    text-align: center;
    /* float: left; - REMOVED */
}
.input-group-prefix2 .ci {
    flex-grow: 1; /* Crece para llenar el espacio */
    min-width: 0; /* Para evitar desbordamiento */
    width: 59%;
    font-size: 16px;
    padding: 8px;
    border: 1px solid #555555;
    border-left: none; /* Se une con el prefijo */
    box-sizing: border-box;
    font-size: 0.7em;
    background-color: #4a4a4a;
    color: #ffffff;
    /* float:left; - REMOVED */
}
.input-group-prefix2 .search-ci {
    flex-shrink: 0;
    width: 25%;
    text-align: center;
    font-size:.7em;
    /* float:left; - REMOVED */
    padding: 8px;
    margin:0;
    background-color: #5a7d9a;
    border: 1px solid #5a7d9a;
    border-radius: 0 6px 6px 0;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ============================================== */
/* === 7. RESPONSIVE DESIGN (MEDIA QUERIES) - AJUSTES PARA MÓVILES PEQUEÑOS === */
/* ============================================== */

@media (max-width: 400px) {
    body {
        font-size: 16px; /* Ajuste ligero */
    }
    .container {
        padding: 10px;
    }
    /* Contenido Principal */
    .bingo-slider h2 {
        font-size: 1em;
    }
    .mascot-area img {
        width: 180px;
    }
    .bingo-card {
        width: 250px; /* Reducción de ancho */
        font-size: 0.7em;
        padding: 10px;
    }
    .bingo-card img {
        width: 100%;
        max-width: 230px; /* Limita la imagen */
    }
    /* Formulario */
    .form-content-wrapper { padding: 10px; }
    .form-section .mtitle { font-size: 0.8em; }
    .form-group { font-size: 12px; }
    .input-group-prefix .prefix-select { width: 50px; } /* Prefijo más pequeño */
    .input-group-prefix .country-select { width: 80px; } /* País más pequeño */
    .ticket-btn {
        width: 30px; /* Pelotas de bingo más pequeñas */
        height: 30px;
        line-height: 30px;
        flex: 0 0 30px;
        min-width: 30px;
        font-size: 0.7em;
    }
    /* Búsqueda de Cartones en Modal */
    .search-container {
        padding: 10px;
    }
    .input-group-search #input-group-prefix { width: 15%; font-size: 0.7em; }
    .search-btn { width: 20%; font-size: 0.7em; }
    .input-group-search #carton-search-input { width: 65%; }

    /* CI de Búsqueda (input-group-prefix2) */
    .input-group-prefix2 .pf-right { width: 20%; font-size: 0.6em; }
    .input-group-prefix2 .ci { width: 55%; font-size: 0.6em; }
    .input-group-prefix2 .search-ci { width: 25%; font-size: 0.6em; }
}

/* Cleanup de estilos movidos fuera del media query */
.form-content-wrapper { padding: 15px; }
.form-section .main-title { font-size: 1.5em; margin-bottom: 15px; }
.close-form-btn { top: 8px; right: 10px; font-size: 24px; }
.form-fieldset { margin-bottom: 15px; padding: 15px 20px; }
.tickets-list { max-height: 150px; }
/* AJUSTE ANTI-ZOOM: Garantizar que los campos de formulario tengan al menos 16px en móviles */
@media (max-width: 1100px) {
    .submit-btn {
        margin-bottom: 20%;
    }
}
@media (max-width: 400px) {
    /* Mantienes tus estilos existentes para body */
    body {
        font-size: 16px; /* Ajuste ligero */
        /* ... otros estilos */
    }

    /* AUMENTO DE FUENTE EN INPUTS/SELECTS PARA EVITAR EL ZOOM EN iOS */
    .form-group input:not([type="file"]),
    .input-group-prefix .prefix-select,
    .input-group-prefix .country-select,
    /* También se aplica a los campos de búsqueda en modales */
    #carton-search-input,
    .input-group-prefix2 .ci {
        font-size: 16px !important; /* Fuerza a 16px para prevenir el auto-zoom en iOS */
        /* width: 100%; - Se mantiene, pero se debe usar con cuidado si está dentro de flexbox */
        height: auto;
    }

    /* Ajustes específicos para evitar problemas de layout con el nuevo font-size */
    .input-group-prefix .prefix-select { width: 50px; flex-shrink: 0; }
    .input-group-prefix .country-select { width: 80px; flex-shrink: 0; }
    
    /* El resto de tus estilos del media query @media (max-width: 400px) */
    .container {
        padding: 10px;
    }
    .bingo-slider h2 { font-size: 1em; }
    .mascot-area img { width: 180px; }
    /* ... otros estilos existentes ... */
}

#floating-modal {
    display: none; /* Oculto por defecto */
    position: fixed; 
    z-index: 1000; /* Asegura que esté por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo semi-transparente */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}
/* Contenido del modal (la caja flotante) */
.fmodal-content {
    background-color: #2b2b2b; 
    color: #F2F2F2; 
    border-radius: 8px; 
    width: 100%; 
    max-width: 400px;
    text-align: center; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); max-height: 80vh;
    margin: auto; /* Para navegadores que no soportan flexbox */
    padding: 20px;
    text-align: center;
    transform: scale(1); /* Inicio de animación */
    transition: transform 0.3s ease-out;
}
/* Estilos específicos por tipo de mensaje */
.fmodal-content .success {
    border-top: 5px solid #4CAF50; /* Borde verde para éxito */
}

.fmodal-content .error {
    border-top: 5px solid #f44336; /* Borde rojo para error */
}

.fmodal-content.info {
    border-top: 5px solid #2196F3; /* Borde azul para información */
}
/* Mensaje dentro del modal */
#fmodal-message {
    font-size: .9em;
    margin-bottom: 20px;
    font-weight: bold;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea {
    font-size: 16px; /* O superior */
}