.elementor-17 .elementor-element.elementor-element-eb3babe{--display:flex;--min-height:25vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-17 .elementor-element.elementor-element-eb3babe:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-eb3babe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-17 .elementor-element.elementor-element-2784bdb{text-align:start;}.elementor-17 .elementor-element.elementor-element-2784bdb .elementor-heading-title{font-family:"Barlow", Sans-serif;font-size:3rem;font-weight:700;letter-spacing:1px;color:#FFFFFF;}.elementor-17 .elementor-element.elementor-element-0074987{--display:flex;}body.elementor-page-17:not(.elementor-motion-effects-element-type-background), body.elementor-page-17 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F3F4F6;}:root{--page-title-display:none;}/* Start custom CSS *//* =========================================
   1. TÍTULO (FASE DE GRUPOS)
   ========================================= */
#matchinfo-1 .matchtype {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    background: transparent !important;
    color: #111111 !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    padding: 20px 0 10px 0 !important;
    text-transform: uppercase;
    border-bottom: 3px solid #FF2B47 !important; 
    margin-bottom: 30px !important;
    text-align: left !important;
}

/* =========================================
   2. REJILLA PRINCIPAL (CONTAINER)
   ========================================= */
#matchinfo-1 {
    display: grid !important;
    /* Usamos 400px como mínimo seguro para que no se aplasten */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
    gap: 30px !important;
    padding: 10px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    align-items: stretch !important; /* IMPORTANTE: Hace que todas las tarjetas tengan la misma altura */
}

/* =========================================
   3. LA TARJETA (ESTRUCTURA BLINDADA)
   ========================================= */
.match-card {
    background-color: white !important;
    border-radius: 12px !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important; /* Ocupa toda la altura que le da la rejilla */
    min-height: 200px !important; 

    /* GRID INTERNO SEGURO */
    display: grid !important;
    grid-template-columns: 80px 1fr 1fr 80px !important;
    
    /* TRUCO DE ALINEACIÓN SEGURO:
       Fila 1: Header (40px)
       Fila 2: Nombres (auto - se ajusta al texto)
       Fila 3: Inputs (1fr - ELÁSTICA: empuja el footer abajo suavemente)
       Fila 4: Footer (45px)
    */
    grid-template-rows: 40px auto 1fr 45px !important;
    
    row-gap: 5px !important; /* Espacio pequeño seguro */
    
    grid-template-areas: 
        "header header header header"
        "flagH nameH  nameA  flagA"
        "flagH inputH inputA flagA"
        "footer footer footer footer" !important;
}

.match-card:hover {
    border-color: rgba(212, 175, 55, 0.8) !important;
    transform: translateY(-5px) !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

/* =========================================
   4. HEADER
   ========================================= */
.match-card-header {
    grid-area: header;
    background: white !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #334155 !important;
    margin-bottom: 10px !important;
}
.match-card-header span {
    font-family: 'Barlow', sans-serif !important;
    color: black !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* =========================================
   5. BANDERAS (CON FRENOS DE SEGURIDAD)
   ========================================= */
.flag.home, .flag.away {
    grid-row: 2 / 4 !important; /* La bandera ocupa la zona de nombre e input verticalmente */
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important; /* Evita desbordamientos */
}
.flag.home { grid-area: flagH; }
.flag.away { grid-area: flagA; }

.flag img {
    /* FRENOS DE SEGURIDAD: */
    width: 60px !important; 
    max-width: 60px !important; /* ¡ESTO EVITA QUE EXPLOTE! */
    height: 60px !important;
    max-height: 60px !important;
    
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 3px solid #D4AF37 !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    display: block !important;
}

/* =========================================
   6. NOMBRES E INPUTS (ALINEADOS)
   ========================================= */
.home, .away { 
    grid-area: auto; /* Reseteo */
    font-family: 'Barlow', sans-serif !important;
    color: black !important; 
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin: 0 !important;
    padding-top: 10px !important;
    align-self: end !important; /* Pegado abajo hacia el input */
    justify-self: center !important; /* Centrado horizontalmente */
    width: 100% !important;
}
.home { grid-area: nameH; }
.away { grid-area: nameA; }

/* INPUTS Y RESULTADOS */
.match-card div.score {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: start !important; /* Alineado arriba (cerca del nombre) */
    padding-top: 5px !important;
}
.match-card div.score:nth-of-type(1) { grid-area: inputH; }
.match-card div.score:nth-of-type(2) { grid-area: inputA; }

.match-card input.prediction {
    width: 60px !important;
    height: 50px !important;
    background: #FFFFFF !important;
    color: #111111 !important;
    border: none !important;
    border-bottom: 5px solid #D4AF37 !important;
    border-radius: 8px !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 0 !important;
}

/* RESULTADO REAL (GRIS) */
.actual-score {
    display: block !important;
    color: #94A3B8 !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 5px !important;
}

/* =========================================
   7. FOOTER (PEGADO AL FONDO)
   ========================================= */
.match-card-footer {
    grid-area: footer;
    width: 100% !important;
    height: 100% !important;
    background: white !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important; 
    gap: 10px !important;
    padding: 0 !important;
    
    /* Aseguramos posición */
    align-self: end !important;
    margin-top: auto !important;
}

/* Elementos internos footer */
.match-card-footer .user-score,
.match-card-footer .fp-icon:empty, 
.match-card-footer > div:nth-child(2) { display: none !important; }

.match-card-footer::before {
    content: "JUGADA MAESTRA (x2)";
    font-family: 'Barlow', sans-serif !important;
    color: #94A3B8 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fp-joker-box {
    width: 24px !important;
    height: 24px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    cursor: pointer !important;
    filter: invert(100%) brightness(200%) !important; 
    opacity: 0.8 !important;
    transition: all 0.3s ease !important;
}
.fp-joker-box:hover, .fp-joker-box.fp-joker { 
    opacity: 1 !important; 
    filter: sepia(100%) saturate(500%) brightness(120%) !important;
    transform: scale(1.2);
}

/* =========================================
   8. BOTÓN GUARDAR
   ========================================= */
.button-matches input[type="submit"] {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 40px auto !important;
    background: #FF2B47 !important;
    color: #fff !important;
    font-family: 'Kanit', sans-serif !important;
    padding: 15px !important;
    border-radius: 6px !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.3s;
}
.button-matches input[type="submit"]:hover {
    background: #111111 !important;
    color: #D4AF37 !important;
    border: 1px solid #D4AF37 !important;
    transform: translateY(-2px);
}

.matchinfo.new-layout .score {
    font-size: 160%;
    color: white !important;
    
}
/* =========================================
   9. MÓVIL (CORRECCIÓN IMPORTANTE)
   ========================================= */
@media (max-width: 768px) {
    #matchinfo-1 { grid-template-columns: 1fr !important; }
    .match-card { min-height: 220px !important; }
    .flag img { width: 50px !important; max-width: 50px !important; height: 50px !important; }
}

#predictionform-1 h2{
    display: none;
}





/* =========================================
   NOTIFICACIONES FLOTANTES (MODO NINJA)
   Target: #fp-toasts
   ========================================= */

/* 1. POSICIONAMIENTO DEL CONTENEDOR (Abajo a la derecha) */
#fp-toasts {
    position: fixed !important;
    bottom: 20px !important;    /* Pegado abajo */
    right: 20px !important;     /* Pegado derecha */
    left: auto !important;      /* No estirar a la izquierda */
    top: auto !important;
    width: auto !important;     /* Ancho automático según contenido */
    max-width: 90% !important;  /* Para que no se salga en móviles muy pequeños */
    z-index: 99999 !important;  /* Siempre encima de todo */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* Alinea las burbujas a la derecha */
}

/* 2. LA BURBUJA (Estilo Pastilla) */
#fp-toasts .toast {
    background-color: #10b981 !important; /* Verde Esmeralda (Éxito) */
    color: black !important;
    
    /* Hacemos la caja pequeña y compacta */
    padding: 8px 20px !important;
    border-radius: 50px !important; /* Bordes totalmente redondos */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    border: none !important;
    
    margin-top: 10px !important; /* Espacio entre burbujas si hay varias */
    min-width: auto !important;  /* Quitamos anchos mínimos molestos */
    width: fit-content !important;
    opacity: 1 !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* 3. TRUCO DE MAGIA: CAMBIAR EL TEXTO CON CSS */
/* Paso A: Ocultamos el texto original "Partido 18 guardado" */
#fp-toasts .toast p {
    font-size: 0 !important; /* Hace invisible el texto original */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* Paso B: Inyectamos el nuevo texto "Predicción guardada" */
#fp-toasts .toast p::after {
    content: 'Predicción guardada' !important; /* EL NUEVO TEXTO */
    font-size: 13px !important; /* Tamaño legible */
    font-weight: 700 !important;
    font-family: 'Barlow', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    white-space: nowrap !important;
    padding: 10px;
}

/* 4. BOTÓN DE CERRAR (X) - Ajuste minimalista */
#fp-toasts .toast .close {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-left: 15px !important; /* Separación del texto */
    float: none !important;
    
    color: black !important;
    text-shadow: none !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    opacity: 0.8 !important;
    line-height: 1 !important;
}

.matchinfo.new-layout .score {
    font-size: 160%;
    color: #FF2B47 !important;
    font-family: Barlow;
    font-weight: bold;
}

/* =========================================
   PREGUNTA BONUS: TARJETA VIP
   ========================================= */

/* 1. EL CONTENEDOR (Hacemos que parezca una tarjeta hermana) */
.linked-question .bonus, 
.bonus.open {
    background-color: #ffffff !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important; /* Borde Dorado */
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
    padding: 25px !important;
    height: 100% !important; /* Para que tenga la misma altura que el partido */
    box-sizing: border-box !important;
    position: relative !important;
}

/* 2. EL TÍTULO DE LA PREGUNTA */
.bonus p:first-of-type {
    font-family: 'Kanit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
    
    /* Pequeña línea roja debajo para decorar */
    border-bottom: 3px solid #FF2B47 !important;
    display: inline-block !important;
    padding-bottom: 8px !important;
}

/* 3. LISTA DE OPCIONES (Limpieza) */
ul.multi-select {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
}

ul.multi-select li {
    margin-bottom: 10px !important;
    position: relative !important;
}

/* 4. LOS BOTONES DE OPCIÓN (Transformamos los labels) */
ul.multi-select label {
    display: block !important;
    background-color: #f9fafb !important; /* Gris muy claro */
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    
    /* Espacio para que el texto no se monte sobre el circulito */
    padding: 12px 15px 12px 45px !important; 
    
    font-family: 'Barlow', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* El circulito del Radio Button */
ul.multi-select input[type="radio"] {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    
    /* Lo hacemos rojo corporativo */
    accent-color: #FF2B47 !important; 
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

/* EFECTO HOVER (Al pasar el mouse) */
ul.multi-select li:hover label {
    border-color: #FF2B47 !important;
    background-color: #fff1f2 !important; /* Rojo muy pálido */
}

/* 5. ESTADO SELECCIONADO (Cuando haces clic) */
/* Se pone Negro y Dorado, estilo "Confirmado" */
ul.multi-select input:checked + label {
    background-color: #111111 !important; /* Negro */
    color: #D4AF37 !important; /* Texto Dorado */
    border-color: #D4AF37 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    font-weight: 700 !important;
}

/* 6. FOOTER DE LA TARJETA (Info y Puntos) */
.bonus-card-footer {
    border-top: 1px solid #f3f4f6 !important;
    padding-top: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    
    font-family: 'Barlow', sans-serif !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Fecha límite (Gris discreto) */
.closing-time {
    color: #9ca3af !important; 
    font-weight: 600 !important;
}

/* Puntos (Dorado Brillante) */
.bonus-card-footer .points {
    color: #D4AF37 !important; 
    font-weight: 800 !important;
    font-size: 13px !important;
    background: #fffbeb !important; /* Fondo doradito suave */
    padding: 5px 10px !important;
    border-radius: 4px !important;
    align-self: flex-start !important; /* Que no ocupe todo el ancho */
}

/* =========================================
   COMPACTACIÓN MÓVIL (Rascacielos -> Tarjeta)
   (Reduce la altura drásticamente en celulares)
   ========================================= */

@media (max-width: 480px) {

    /* 1. REJILLA MÁS APRETADA */
    .match-card {
        /* Reducimos las filas del medio de 1fr a 'auto' para que se ajusten al contenido */
        grid-template-rows: 35px auto auto 35px !important;
        min-height: 180px !important; /* Forzamos que sea más bajita */
        gap: 2px !important; /* Menos espacio entre elementos */
    }

    /* 2. INPUTS (CAJAS DE GOLES) MÁS PEQUEÑOS */
    .match-card input.prediction {
        height: 45px !important; /* Bajamos de 65px a 45px */
        width: 60px !important;  /* Un poco más angostos */
        font-size: 22px !important; /* Número más pequeño */
        border-radius: 8px !important;
        border-bottom-width: 4px !important; /* Base un poco más fina */
    }
    
    /* 3. NOMBRES DE EQUIPOS */
    .match-card .home, 
    .match-card .away {
        font-size: 13px !important;
        margin-bottom: 2px !important; /* Pegaditos al input */
        line-height: 1.1 !important;
    }

    /* 4. BANDERAS */
    .match-card img.flag {
        width: 50px !important;
        height: 50px !important;
        border-width: 2px !important;
    }

    /* 5. HEADER Y FOOTER MÁS FINOS */
    .match-card-header, 
    .match-card-footer {
        font-size: 10px !important;
        height: 100% !important; /* Que llenen su fila de 35px */
        padding: 0 10px !important;
    }
    
    /* Ajuste del texto "JUGADA MAESTRA" */
    .match-card-footer::before {
        font-size: 9px !important;
    }
}

/* =========================================
   TERAPIA DE VOLUMEN (VERSIÓN COMPACTA)
   Sólida pero no alta. Elegancia Panorámica.
   ========================================= */

/* 1. REAJUSTE DE LA REJILLA (Quitamos aire vertical) */
.match-card {
    /* Usamos 'auto' para que las filas se ajusten al contenido, no al espacio libre */
    grid-template-rows: 40px auto auto 45px !important;
    align-items: center !important;
    background-color: #ffffff !important; 
    
    /* Reducimos la altura mínima general */
    min-height: 200px !important; 
    row-gap: 4px !important; /* Menos espacio entre filas */
}

/* 2. NOMBRES DE EQUIPOS */
.match-card .home, 
.match-card .away {
    align-self: end !important;
    margin-bottom: 2px !important; /* Pegaditos al input */
    font-size: 15px !important;
    font-weight: 700 !important;
    width: 100% !important;
    line-height: 1.2 !important;
    padding-top: 15px !important; /* Un poco de aire arriba */
}

/* 3. CONTENEDOR DE INPUTS */
.match-card div.score {
    align-self: start !important;
    margin-top: 0 !important;
    width: 100% !important;
    display: flex !important; justify-content: center !important;
}

/* 4. LOS INPUTS (BLOQUES SÓLIDOS PERO MÁS BAJOS) */
.match-card input.prediction {
    width: 80% !important;
    max-width: 90px !important;
    
    /* BAJAMOS LA ALTURA: De 65px a 50px */
    height: 50px !important; 
    
    background-color: #f9fafb !important; 
    border: 2px solid #e5e7eb !important;
    border-bottom: 4px solid #D4AF37 !important; /* Base un pelín más fina */
    border-radius: 10px !important;
    
    /* Ajustamos fuente para la nueva altura */
    font-family: 'Kanit', sans-serif !important;
    font-size: 26px !important; 
    font-weight: 800 !important;
    color: #111111 !important;
    
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06) !important;
    transition: all 0.2s ease !important;
}

.match-card input.prediction:focus {
    background-color: #ffffff !important;
    border-color: #111111 !important;
    border-bottom-color: #FF2B47 !important;
    outline: none !important;
}

/* 5. BANDERAS (Centrado) */
.match-card .flag.home,
.match-card .flag.away {
    grid-row: 2 / 4 !important;
    align-self: center !important;
    justify-self: center !important;
}
.match-card img.flag {
    /* Ajustamos ligeramente el tamaño para la nueva altura */
    width: 60px !important; height: 60px !important;
    border: 3px solid #f3f4f6 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}/* End custom CSS */