/*
 * Resultados de la Lotería Nacional (/loteria-nacional-resultados/, 17/10/2026). Va después de pl-resultados.css (el de los juegos:
 * tarjetas, bolas, chips, tablas, variables --pl-*) y solo añade lo propio de la lotería, siempre colgado de .pl-res.pl-ln.
 * Subir el ?v= de Web/Loteria/loteria_resultados.aspx al cambiarlo.
 */

/* Premios principales: el número en grande, con su etiqueta y lo que paga por décimo */
.pl-res.pl-ln .pl-ln-sorteo-sub { margin: -8px 0 16px; color: var(--pl-suave); font-size: 14px; }
.pl-res.pl-ln .pl-ln-principales { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; }
.pl-res.pl-ln .pl-ln-premio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pl-res.pl-ln .pl-ln-premio .pl-etq { flex: 0 0 100%; margin: 0; }
.pl-res.pl-ln .pl-ln-numeros { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-res.pl-ln .pl-ln-numero {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 10px;
    border: 2px solid var(--pl-tinta);
    background: #fff;
    color: var(--pl-tinta);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.pl-res.pl-ln .pl-ln-premio--primero .pl-ln-numero { background: var(--pl-boton); border-color: var(--pl-boton); color: #fff; font-size: 34px; padding: 6px 18px; }
.pl-res.pl-ln .pl-ln-importe { color: var(--pl-tinta-2); font-weight: 700; font-size: 15px; white-space: nowrap; }
.pl-res.pl-ln .pl-ln-reintegros { margin-bottom: 14px; }
.pl-res.pl-ln .pl-ln-especial { margin: 0 0 14px; color: var(--pl-tinta-2); }

/* El décimo del sorteo (18/10/2026; solo si su imagen está en el servidor, ComunW.ImagenDecimoSorteo). En móvil y tableta, debajo de
   los premios principales (el primer premio sigue en el primer pantallazo); en escritorio, a su derecha. width/height del <img>
   reservan el hueco (530×290): sin saltos al cargar. */
.pl-res.pl-ln .pl-ln-decimo { margin: 0 0 18px; width: 50%; max-width: 200px; }
.pl-res.pl-ln .pl-ln-decimo picture { display: block; }
.pl-res.pl-ln .pl-ln-decimo img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 4px rgba(18, 31, 51, .18); }
@media (min-width: 900px) {
    .pl-res.pl-ln .pl-ln-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 0 24px; align-items: start; }
    .pl-res.pl-ln .pl-ln-cuerpo .pl-ln-decimo { width: auto; max-width: none; margin: 4px 0 18px; }
    /* En la rejilla de dos tarjetas de la portada solo hay sitio a partir de 1200 px, y algo más estrecha */
    .pl-res.pl-ln .pl-res-rejilla .pl-ln-cuerpo { display: block; }
    .pl-res.pl-ln .pl-res-rejilla .pl-ln-cuerpo .pl-ln-decimo { width: 50%; max-width: 200px; margin: 0 0 18px; }
}
@media (min-width: 1200px) {
    .pl-res.pl-ln .pl-res-rejilla .pl-ln-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 0 16px; }
    .pl-res.pl-ln .pl-res-rejilla .pl-ln-cuerpo .pl-ln-decimo { width: auto; max-width: none; margin: 4px 0 18px; }
}

/* Tabla con todas las categorías: la columna de números a la izquierda y con salto de línea */
.pl-res.pl-ln .pl-ln-subtitulo { font-size: 16px; font-weight: 900; color: var(--pl-tinta); margin: 22px 0 10px !important; }
.pl-res.pl-ln table.pl-tabla--ln th:nth-child(2), .pl-res.pl-ln table.pl-tabla--ln td:nth-child(2) { text-align: left !important; }
.pl-res.pl-ln table.pl-tabla--ln td:nth-child(2) { font-variant-numeric: tabular-nums; line-height: 1.7; }
.pl-res.pl-ln table.pl-tabla--ln td:first-child { color: var(--pl-tinta); font-weight: 700; min-width: 150px; }
.pl-res.pl-ln .pl-ln-patron { white-space: nowrap; }
/* Qué cobra cada fila, en palabras (18/10/2026), bajo el nombre de la categoría */
.pl-res.pl-ln .pl-ln-explica { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--pl-suave); }

/* La pedrea de Navidad (casi 1.800 números) plegada */
.pl-res.pl-ln .pl-ln-pedrea { margin: 18px 0 0; border: 1px solid var(--pl-borde); border-radius: var(--pl-radio); padding: 12px 16px; }
.pl-res.pl-ln .pl-ln-pedrea summary { cursor: pointer; font-weight: 700; color: var(--pl-tinta); }
.pl-res.pl-ln .pl-ln-pedrea-lista { margin: 12px 0 0; font-size: 14px; line-height: 1.9; color: var(--pl-tinta-2); font-variant-numeric: tabular-nums; word-spacing: .4em; }
.pl-res.pl-ln .pl-ln-pedrea-lista span { white-space: nowrap; }

/* Comprar: el botón oscuro, como los de las pantallas nuevas */
.pl-res.pl-ln .pl-ln-comprar { background: var(--pl-boton); border-color: var(--pl-boton); color: #fff; }
.pl-res.pl-ln .pl-ln-comprar:hover { background: var(--pl-boton-hover); color: #fff; }

/* Sorteos anteriores: el nombre del sorteo a la izquierda; primer y segundo premio en cifras normales */
.pl-res.pl-ln table.pl-tabla--ln-anteriores th:nth-child(2), .pl-res.pl-ln table.pl-tabla--ln-anteriores td:nth-child(2) { text-align: left !important; }
.pl-res.pl-ln table.pl-tabla--ln-anteriores td.pl-ant-premio { font-weight: 700; color: var(--pl-tinta); letter-spacing: .04em; }
.pl-res.pl-ln table.pl-tabla--ln-anteriores td.pl-ant-acertantes { letter-spacing: .04em; }

/* Navidad y El Niño por año: chips que pueden ocupar varias líneas */
.pl-res.pl-ln .pl-ln-extra .pl-ln-chips { flex-wrap: wrap; overflow: visible; margin: 0 0 14px; }

/* Permanentes de Navidad y del Niño (fase 2): aviso del próximo sorteo y buscador de un número */
.pl-res.pl-ln .pl-ln-aviso { background: #fff7e0; border-color: var(--pl-ambar); }
.pl-res.pl-ln .pl-ln-aviso p { margin: 0; color: var(--pl-tinta); font-weight: 700; font-size: 17px; }
.pl-res.pl-ln .pl-ln-buscador-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pl-res.pl-ln .pl-ln-buscador-fila .pl-etq { flex: 0 0 100%; margin: 0; }
.pl-res.pl-ln .pl-ln-buscador-fila input {
    width: 9ch !important; min-height: 48px; padding: 0 12px; border: 2px solid var(--pl-tinta); border-radius: 10px;
    font: inherit; font-size: 24px; font-weight: 900; letter-spacing: .1em; color: var(--pl-tinta); background: #fff; text-align: center;
    font-variant-numeric: tabular-nums;
}
.pl-res.pl-ln .pl-ln-buscador-ayuda { margin: 12px 0 0; font-size: 14px; color: var(--pl-suave); }
.pl-res.pl-ln .pl-ln-buscador-ayuda a { color: var(--pl-tinta); font-weight: 700; }

@media (max-width: 860px) {
    .pl-res.pl-ln .pl-ln-numero { font-size: 20px; padding: 3px 10px; }
    .pl-res.pl-ln .pl-ln-premio--primero .pl-ln-numero { font-size: 28px; padding: 4px 14px; }
    .pl-res.pl-ln .pl-res-selector { flex-wrap: wrap; }
    .pl-res.pl-ln table.pl-tabla--ln td:first-child { min-width: 110px; }
    .pl-res.pl-ln .pl-ln-extra .pl-ln-chips { margin: 0 0 12px; padding: 0; }
}