.gg-loteria-empty {
    padding: 20px;
    text-align: center;
    color: #4A5568;
    background: #F4F6F9;
    border-radius: 8px;
}

.gg-loteria-error {
    padding: 20px;
    text-align: center;
    color: #9B2C2C;
    background: #FFF5F5;
    border-radius: 8px;
}

.gg-loteria-tabla__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

/* Selector con más peso que la regla del tema ".gg-entry-content h2,h3,h4
   { margin: 30px 0 15px; }" (esa tiene 1 clase + 1 elemento; esta tiene 2
   clases), así que gana sin necesitar !important y sin tocar ningún otro
   encabezado del sitio: solo afecta a este título específico. */
.gg-loteria-tabla-wrap .gg-loteria-tabla__titulo {
    color: #1A382D;
    font-size: 1.6rem;
    margin: 0;
}

.gg-loteria-tabla__buscador {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 2px solid transparent;
    border-radius: 25px;
    padding: 4px 8px 4px 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gg-loteria-tabla__buscador:focus-within {
    border-color: var(--gg-green-dark, #2A5747);
    box-shadow: 0 4px 12px rgba(42, 87, 71, 0.15);
}

/* Línea de acento debajo de la barra, para darle más peso visual. */
.gg-loteria-tabla__buscador::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -7px;
    height: 3px;
    border-radius: 3px;
    background: #F5C800;
}

.gg-loteria-tabla__buscador-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--gg-font, inherit);
    font-size: 0.9rem;
    font-weight: 600;
    color: #1A382D;
    width: 220px;
    transition: width 0.3s ease;
}

.gg-loteria-tabla__buscador-input:focus {
    width: 280px;
}

.gg-loteria-tabla__buscador-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gg-green-dark, #2A5747);
    padding: 4px;
    border-radius: 50%;
}

.gg-loteria-tabla__sin-resultados {
    padding: 16px;
    text-align: center;
    color: #4A5568;
    background: #F4F6F9;
    border-radius: 8px;
}

.gg-loteria-tabla-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

.gg-loteria-tabla {
    width: 100%;
    /* Porcentajes fijos en cada <th> (ver render() del widget). */
    table-layout: fixed;
    min-width: 640px;
    border-collapse: collapse;
    text-align: left;
}

.gg-loteria-tabla thead th {
    background: #1A382D;
    color: #FFFFFF;
    font-weight: 700;
    padding: 12px 14px;
    white-space: nowrap;
    text-align: center;
}

.gg-loteria-tabla__fila {
    border-bottom: 1px solid #E2E8F0;
    animation: gg-loteria-fila-aparecer 1.5s ease-out both;
}

@keyframes gg-loteria-fila-aparecer {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gg-loteria-tabla__fila {
        animation: none;
    }
}

.gg-loteria-tabla__fila--alterna {
    background: #F4F6F9;
}

.gg-loteria-tabla__fila--clicable {
    cursor: pointer;
}

.gg-loteria-tabla__fila--clicable:hover {
    background: #EAF0EE;
}

.gg-loteria-tabla__fila--expandible:focus-visible {
    outline: 2px solid #1A382D;
    outline-offset: -2px;
}

.gg-loteria-tabla__celda {
    padding: 10px 14px;
    color: #1A382D;
    vertical-align: middle;
    text-align: center;
}

/* El ancho real de Número/Serie/Fecha y Plan de Premios ahora se fija
   inline en % desde render() (junto con Sorteo, siempre suman 100). Aquí
   solo queda el padding extra y el nowrap. */
.gg-loteria-tabla__col-angosta {
    white-space: nowrap;
    padding-left: 22px;
    padding-right: 22px;
}

.gg-loteria-tabla__chip--numero {
    display: inline-block;
    min-width: 51px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #FFFFFF;
    background: #2A5747;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.15);
}

.gg-loteria-tabla__chip--serie {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1.5px;
    color: #2A5747;
    background: #FFFFFF;
    border: 1.5px solid #2A5747;
}

.gg-loteria-tabla__celda--imagen {
    padding-left: 4px;
    padding-right: 4px;
}

.gg-loteria-tabla__celda--imagen img {
    display: block;
    margin: 0 auto;
    max-width: var(--gg-tabla-img-max-width, 60px);
    max-height: var(--gg-tabla-img-max-height, 40px);
    object-fit: contain;
}

.gg-loteria-tabla__nombre-sorteo {
    display: block;
    margin-top: 6px;
    font-weight: 700;
    color: #1A382D;
}

.gg-loteria-tabla__celda--premios {
    white-space: nowrap;
}

.gg-loteria-tabla__link-premios {
    display: inline-block;
    background: #F5C800;
    color: #1A382D;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}

.gg-loteria-tabla__link-premios:hover {
    background: #E0B400;
}

/* Chevron de la fila colapsable: oculto en escritorio, solo se ve y
   funciona por debajo del punto de quiebre móvil (ver media query). */
.gg-loteria-tabla__toggle-indicador {
    display: none;
    margin-left: 8px;
    color: #6B7280;
    transition: transform 0.2s ease;
    vertical-align: middle;
}

.gg-loteria-tabla__fila--expandida .gg-loteria-tabla__toggle-indicador {
    transform: rotate(180deg);
}

.gg-loteria-tabla__fila-detalle td {
    padding: 0;
    text-align: left;
}

.gg-loteria-tabla__detalle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 18px;
}

.gg-loteria-tabla__detalle-campo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gg-loteria-tabla__detalle-etiqueta {
    min-width: 64px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6B7280;
}

.gg-loteria-tabla__btn-historico {
    display: inline-block;
    background: #1A382D;
    color: #FFFFFF;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.8rem;
}

.gg-loteria-tabla__btn-historico:hover {
    background: #2A5747;
}

/* Tabla colapsable en móvil: de las 5 columnas solo Sorteo queda visible
   (siempre la primera celda de cada <tr>, incluida la de la fila de
   detalle porque es su única celda); tocar la fila expande la de detalle
   con Número/Serie/Fecha/Premios + el botón de histórico. */
@media (max-width: 768px) {
    .gg-loteria-tabla {
        min-width: 0;
        table-layout: auto;
    }

    .gg-loteria-tabla th,
    .gg-loteria-tabla td {
        display: none;
    }

    .gg-loteria-tabla th:first-child,
    .gg-loteria-tabla td:first-child {
        display: table-cell;
        width: 100% !important;
    }

    .gg-loteria-tabla__fila--expandible {
        cursor: pointer;
    }

    .gg-loteria-tabla__celda--imagen {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .gg-loteria-tabla__toggle-indicador {
        display: inline-flex;
        margin-left: auto;
    }
}

/* Widget Astros (Tabs de Resultados Astro): esferas (una por dígito de
   _result_number) y el signo zodiacal debajo. Colores más apagados que el
   amarillo/verde de marca (#ffe82c / #1A382D) para buen contraste dentro
   de la esfera. */

.gg-loteria-astros {
    position: relative;
}

.gg-loteria-astros__nav {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 16px;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .gg-loteria-astros__nav {
        grid-template-columns: repeat(2, auto);
    }
}

.gg-loteria-astros__btn {
    background-color: #FFFFFF;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    outline: none;
    /* Redondeado solo arriba: abajo queda cuadrado a propósito para que se
       conecte sin quiebres con el borde superior del panel (margin-bottom:0
       en .gg-loteria-astros__nav ya los deja pegados). */
    border-radius: 10px 10px 0 0;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
}

.gg-loteria-astros__btn:focus-visible {
    outline: 2px solid #2A5747;
    outline-offset: 2px;
}

.gg-loteria-astros__btn img {
    display: block;
    object-fit: contain;
}

.gg-loteria-astros__btn-texto {
    font-weight: 700;
    color: #1A382D;
}

.gg-loteria-astros__panel {
    display: none;
    text-align: center;
    padding: 24px 20px;
    border-radius: 16px;
    background-color: #FFFFFF;
}

.gg-loteria-astros__panel.is-active {
    display: block;
}

/* El "cuadrado" del resultado (fecha + esferas + signo): es el único
   elemento que recibe la imagen de fondo (_astro_fondo_imagen_id), tanto en
   el resultado vigente como en cada fila expandida del histórico — nunca el
   panel completo, para que la imagen no se estire con el alto variable del
   resto del contenido (próximo sorteo, lista de histórico, etc.). */
.gg-loteria-astros__resultado-card {
    margin-bottom: 16px;
    padding: 20px 16px;
    border-radius: 14px;
    background-color: #FFFFFF;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gg-loteria-astros__historico-contenido .gg-loteria-astros__resultado-card {
    margin-bottom: 0;
}

.gg-loteria-astros__fecha {
    margin: 0 0 18px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gg-astro-color-texto, #2A5747);
}

.gg-loteria-astros__esferas {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 20px;
}

/* Fuerza las 4 esferas en una sola fila incluso en pantallas angostas:
   en vez de dejar que envuelvan a "3 y 1" (feo), se encoge el tamaño
   (y con él el dígito, que ya es proporcional vía calc() arriba) según
   el ancho de pantalla. El !important es necesario porque el tamaño
   base lo fija helpers-loteria.php con --gg-esfera-size inline (ajuste
   del admin en Elementor), que de otro modo gana por especificidad. */
@media (max-width: 600px) {
    .gg-loteria-astros__esferas {
        gap: 8px;
        --gg-esfera-size: clamp(26px, 13vw, 60px) !important;
    }
}

@media (max-width: 360px) {
    .gg-loteria-astros__esferas {
        gap: 6px;
        --gg-esfera-size: clamp(24px, 12vw, 60px) !important;
    }
}

.gg-loteria-astros__esfera {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gg-esfera-size, 44px);
    height: var(--gg-esfera-size, 44px);
    font-size: calc(var(--gg-esfera-size, 44px) * 0.42);
    overflow: hidden;
    border-radius: 50%;
    border: none;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at 70% 78%, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 55%),
        radial-gradient(circle at 42% 40%, #FFFFFF 0%, #F3F3F3 55%, #D9D9D9 85%, #C2C2C2 100%);
    box-shadow:
        inset -6px -8px 12px rgba(0, 0, 0, 0.22),
        inset 5px 7px 9px rgba(255, 255, 255, 0.85),
        0 6px 10px rgba(0, 0, 0, 0.25),
        0 2px 3px rgba(0, 0, 0, 0.15);
    color: #000000;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.gg-loteria-astros__esfera::before {
    content: '';
    position: absolute;
    top: 12%;
    left: 18%;
    width: 34%;
    height: 24%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
}

.gg-loteria-astros__esfera::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 -10px 14px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* Oculto por CSS desde el primer render (no solo por JS al empezar cada
   esfera) para que las que aún no giran no muestren su número real antes
   de tiempo. widget-astros-esferas.js la revela con visibility:visible
   inline para que esta regla ya no la vuelva a ocultar. */
.gg-loteria-astros__esferas--animar .gg-loteria-astros__esfera-digito {
    visibility: hidden;
}

/* Animación de caída (widget-astros-esferas.js): el "carrete" es una tira
   vertical de 10 dígitos (9 al azar + el real al final). Su altura se fija
   en 1000% para que translateY(-90%) siempre caiga exacto sobre el último
   dígito sin calcular píxeles en JS. */
.gg-loteria-astros__esfera-carrete {
    position: absolute;
    inset: 0;
    height: 1000%;
    display: flex;
    flex-direction: column;
    will-change: transform, filter;
}

.gg-loteria-astros__esfera-carrete-item {
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-weight: inherit;
    text-shadow: inherit;
}

.gg-loteria-astros__esfera-carrete--cayendo {
    animation: gg-loteria-astro-carrete-caida 0.8s linear forwards;
}

@keyframes gg-loteria-astro-carrete-caida {
    0% {
        transform: translateY(0%);
        filter: blur(0px);
    }

    10% {
        transform: translateY(-8%);
        filter: blur(1.5px);
    }

    45% {
        transform: translateY(-45%);
        filter: blur(6px);
    }

    70% {
        transform: translateY(-72%);
        filter: blur(4px);
    }

    88% {
        transform: translateY(-86%);
        filter: blur(1px);
    }

    100% {
        transform: translateY(-90%);
        filter: blur(0px);
    }
}

.gg-loteria-astros__signo {
    margin: 0 0 8px;
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gg-astro-color-texto, #1A382D);
}

.gg-loteria-astros__proximo {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gg-astro-color-texto, #4A5568);
}

.gg-loteria-astros__placeholder {
    padding: 20px;
    text-align: center;
    color: #4A5568;
    background: #F4F6F9;
    border-radius: 8px;
}

/* Lista colapsable de histórico, debajo del resultado vigente de cada
   panel. El contenido de cada fila expandida reutiliza tal cual las
   clases __fecha/__esferas/__esfera/__signo de arriba (mismo estilo,
   ver gg_loteria_renderizar_bloque_resultado_astro() en helpers-loteria.php). */
.gg-loteria-astros__historico {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #E2E8F0;
    text-align: left;
}

.gg-loteria-astros__historico-titulo {
    margin: 0 0 12px;
    color: #1A382D;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
}

.gg-loteria-astros__historico-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gg-loteria-astros__historico-item {
    border-bottom: 1px solid #E2E8F0;
}

.gg-loteria-astros__historico-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    outline: none;
    padding: 12px 4px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #2A5747;
}

.gg-loteria-astros__historico-toggle[aria-expanded="true"] {
    color: #1A382D;
    font-weight: 700;
}

.gg-loteria-astros__historico-contenido {
    padding: 4px 0 20px;
    text-align: center;
}

.gg-loteria-astros__historico-contenido .gg-loteria-astros__fecha,
.gg-loteria-astros__historico-contenido .gg-loteria-astros__esferas,
.gg-loteria-astros__historico-contenido .gg-loteria-astros__signo {
    margin-top: 0;
}