/*
 * Resultados de Euromillones, Primitiva, Bonoloto y Gordo (16/10/2026).
 * Mismo lenguaje que las pantallas nuevas de acceso y cesta (React, Tailwind): Lato, tarjetas blancas con radio 12 px y
 * borde slate-200, títulos font-black slate-900, botones píldora #0d1b2e. Todo cuelga de .pl-res para no chocar con los
 * estilos antiguos del sitio (bootstrap 3, screen.css), que pintaban, por ejemplo, cualquier "nav a" como un bloque oscuro.
 */
.pl-res {
    --pl-tinta: #0f172a;          /* slate-900 */
    --pl-tinta-2: #334155;        /* slate-700 */
    --pl-suave: #64748b;          /* slate-500 */
    --pl-borde: #e2e8f0;          /* slate-200 */
    --pl-fondo: #f1f5f9;          /* slate-100 */
    --pl-boton: #0d1b2e;
    --pl-boton-hover: #1a2e47;
    --pl-ambar: #f7a800;
    --pl-radio: 12px;
    font-family: Lato, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--pl-tinta-2);
    font-size: 16px;
    line-height: 1.5;
    max-width: 1140px;
    margin: 24px auto 48px;
    padding: 0 16px;
    -webkit-font-smoothing: antialiased;
}
.pl-res *, .pl-res *::before, .pl-res *::after { box-sizing: border-box; }
/* Fondo gris claro a todo el ancho, como las pantallas nuevas de acceso y cesta */
.pl-res-fondo { background: #f1f5f9; padding: 24px 0 8px; }
.pl-res-fondo .pl-res { margin-top: 0; }
/* Lo que meten los estilos antiguos en h1/h2/p/tablas */
.pl-res h1, .pl-res h2, .pl-res h3 { padding: 0 !important; margin-top: 0 !important; border: 0; background: none; }
.pl-res p { font-size: inherit; }

/* Tarjetas */
.pl-res .pl-card {
    background: #fff;
    border: 1px solid var(--pl-borde);
    border-radius: var(--pl-radio);
    padding: 24px;
    margin: 0 0 16px;
}
.pl-res .pl-card-titulo {
    font-family: inherit;
    font-size: 18px;
    font-weight: 900;
    color: var(--pl-tinta);
    margin: 0 0 16px;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}

/* Cabecera: título, navegación entre sorteos y enlaces a otros sorteos */
.pl-res .pl-res-cabecera { padding: 24px 24px 20px; }
.pl-res .pl-res-cabecera-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: flex-end;
    justify-content: space-between;
}
.pl-res h1.pl-res-titulo {
    font-family: inherit;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--pl-tinta);
    margin: 0;
    width: auto !important;          /* los estilos antiguos lo dejaban en 180 px en móvil */
    max-width: none;
    float: none;
    display: block;
    text-align: left;
    text-transform: none;
    letter-spacing: -0.01em;
}
.pl-res .pl-res-sub { margin: 6px 0 0; color: var(--pl-suave); font-size: 16px; }
/* La frase que responde "¿qué salió?", arriba del todo (17/10/2026): visible también en móvil, donde el subtítulo se esconde */
.pl-res .pl-res-respuesta { margin: 8px 0 0; color: var(--pl-tinta); font-size: 17px; line-height: 1.5; max-width: 75ch; }

/* Selector de sorteo (los + y - son postback; el desplegable también) */
.pl-res .pl-res-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.pl-res .pl-res-selector .pl-boton-flecha,
.pl-res .pl-boton-sec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--pl-borde);
    background: #fff;
    color: var(--pl-tinta);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.pl-res .pl-res-selector .pl-boton-flecha:hover,
.pl-res .pl-boton-sec:hover { border-color: var(--pl-tinta-2); color: var(--pl-tinta); text-decoration: none; }
.pl-res .pl-res-selector .pl-desactivado { opacity: .4; pointer-events: none; cursor: default; }
.pl-res .pl-res-selector select {
    min-height: 44px;
    min-width: 190px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--pl-suave);
    border-radius: var(--pl-radio);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f172a' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
    -webkit-appearance: none;
    appearance: none;
    color: var(--pl-tinta);
    font: inherit;
    font-size: 16px;
    width: auto !important;
}
.pl-res .pl-res-selector .pl-res-jornada { color: var(--pl-suave); font-size: 14px; padding: 0 4px; }
.pl-res .pl-res-selector input[type=text] {
    border: 0; background: transparent; width: 2.6em; padding: 0; color: var(--pl-suave); font: inherit; font-size: 14px; box-shadow: none;
}

/* Otros sorteos: chips con enlaces normales (rastreables) */
.pl-res .pl-res-otros { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pl-borde); }
/* Los enlaces salen del selector, dentro de la fila flexible de la cabecera: ocupan su propia línea */
.pl-res .pl-res-cabecera-fila > .pl-res-otros { flex: 1 1 100%; min-width: 0; max-width: 100%; margin-top: 2px; }   /* min-width 0: si no, crece hasta el ancho de todos los chips */
.pl-res .pl-res-otros-titulo { font-size: 14px; font-weight: 700; color: var(--pl-tinta); margin: 0 0 10px; }
/* Una sola fila con scroll también en escritorio: la cabecera no empuja la combinación hacia abajo */
.pl-res .pl-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0; padding: 0 0 4px; list-style: none; scrollbar-width: thin; }
.pl-res .pl-chips > a, .pl-res .pl-chips > span { flex: 0 0 auto; }
.pl-res .pl-chips a, .pl-res .pl-chips span {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--pl-borde);
    background: #fff;
    color: var(--pl-tinta-2);
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.pl-res .pl-chips a:hover { border-color: var(--pl-tinta-2); color: var(--pl-tinta); text-decoration: none; }
.pl-res .pl-chips .pl-chip-actual { background: var(--pl-boton); border-color: var(--pl-boton); color: #fff; font-weight: 700; }
.pl-res .pl-chips .pl-chip-ultimo { font-weight: 700; color: var(--pl-tinta); }

/* Fecha sin sorteo */
.pl-res .pl-res-sinsorteo-enlaces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Rejilla de las dos tarjetas */
.pl-res .pl-res-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pl-res .pl-res-rejilla > .pl-card { margin: 0; }

/* Bolas */
.pl-res .pl-bolas-grupo { margin: 0 0 18px; }
.pl-res .pl-etq { display: block; font-size: 13px; font-weight: 700; color: var(--pl-suave); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.pl-res .pl-bolas { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-res .pl-bola {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pl-boton);
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.pl-res .pl-bola--comp { background: #fff; color: var(--pl-tinta); border: 2px solid var(--pl-tinta); }
.pl-res .pl-bola--rein, .pl-res .pl-bola--clave { background: var(--pl-ambar); color: var(--pl-tinta); }
.pl-res .pl-bola--estrella {
    background: var(--pl-ambar);
    color: var(--pl-tinta);
    border-radius: 0;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    width: 56px;
    height: 56px;
    font-size: 17px;
    padding-top: 4px;
}
.pl-res .pl-bolas-extra { display: flex; flex-wrap: wrap; gap: 24px; }
.pl-res .pl-nota { margin: 18px 0 0; font-size: 13px; color: var(--pl-suave); line-height: 1.5; }
.pl-res .pl-nota p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--pl-suave); }

/* Sorteos anteriores (ResultadosPagina.ANTERIORES) */
.pl-res .pl-res-anteriores { margin-top: 16px; }
.pl-res table.pl-tabla--anteriores td { white-space: nowrap; }
.pl-res table.pl-tabla--anteriores th:nth-child(2), .pl-res table.pl-tabla--anteriores td:nth-child(2) { text-align: left !important; }
.pl-res table.pl-tabla--anteriores td:nth-child(3) { font-weight: 400; color: var(--pl-tinta-2); }
.pl-res table.pl-tabla--anteriores .pl-ant-fecha a { color: var(--pl-tinta); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--pl-borde); }
.pl-res table.pl-tabla--anteriores .pl-ant-fecha a:hover { border-bottom-color: var(--pl-tinta); }

/* Resumen del sorteo en palabras (ComunW.TextoResultados) */
.pl-res .pl-res-resumen { margin-top: 16px; }
.pl-res .pl-res-resumen p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: var(--pl-tinta-2); max-width: 75ch; }
.pl-res .pl-res-resumen p:last-child { margin-bottom: 0; }

/* Tabla de premios */
.pl-res table.pl-tabla { width: 100%; border-collapse: collapse; margin: 0; font-size: 15px; background: transparent; }
.pl-res table.pl-tabla thead, .pl-res table.pl-tabla tr, .pl-res table.pl-tabla tbody { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.pl-res table.pl-tabla th {
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pl-suave);
    padding: 0 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--pl-borde);
    background: transparent;
}
.pl-res table.pl-tabla td {
    padding: 12px 8px;
    border: 0;
    border-bottom: 1px solid var(--pl-borde);
    color: var(--pl-tinta-2);
    background: transparent !important;
    text-align: left !important;
    vertical-align: middle;
}
.pl-res table.pl-tabla tr:last-child td { border-bottom: 0; }
.pl-res table.pl-tabla th:nth-child(n+2), .pl-res table.pl-tabla td:nth-child(n+2) { text-align: right !important; font-variant-numeric: tabular-nums; }
.pl-res table.pl-tabla td:last-child { font-weight: 700; color: var(--pl-tinta); white-space: nowrap; }
.pl-res table.pl-tabla span:not(.pl-bola) { font: inherit; color: inherit; }   /* no a las bolas: dejaba el número oscuro sobre azul */

/* Lista de todas las combinaciones */
.pl-res .pl-res-columnas-cab { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.pl-res .pl-res-categoria { color: var(--pl-suave); font-size: 14px; }
.pl-res .pl-res-columnas-cab select { min-height: 44px; padding: 0 14px; border: 1px solid var(--pl-suave); border-radius: var(--pl-radio); background: #fff; font: inherit; }
.pl-res .pl-tabla-scroll { overflow-x: auto; }
.pl-res .pl-tabla .pl-bolas { gap: 4px; flex-wrap: nowrap; }
.pl-res .pl-tabla .pl-bola { width: 32px; height: 32px; font-size: 14px; }
.pl-res .pl-tabla .pl-bola--estrella { width: 36px; height: 36px; font-size: 12px; padding-top: 3px; }
.pl-res table.pl-tabla--columnas td:nth-child(2) { text-align: left !important; }
.pl-res table.pl-tabla--columnas th:nth-child(2) { text-align: left !important; }
.pl-res table.pl-tabla--columnas td { white-space: nowrap; }
/* El sorteo que se estaba viendo, destacado en la lista */
.pl-res table.pl-tabla tr.pl-fila-actual td { background: #fff7e0 !important; }
.pl-res table.pl-tabla tr.pl-fila-actual td:first-child { box-shadow: inset 4px 0 0 var(--pl-ambar); font-weight: 700; color: var(--pl-tinta); }

/* Hasta 800 px la cabecera del sitio es fija (position: fixed, 65 px de alto) y tapaba el principio de la página */
@media (max-width: 800px) {
    .pl-res-fondo { padding-top: 77px !important; }
}
/* Móvil: la cabecera tiene que dejar ver la combinación sin hacer scroll */
@media (max-width: 860px) {
    .pl-res-fondo { padding-top: 12px; }
    .pl-res { margin-bottom: 24px; padding: 0 12px; }
    .pl-res .pl-res-rejilla { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .pl-res .pl-card { padding: 16px; margin-bottom: 12px; }
    .pl-res .pl-res-cabecera { padding: 16px 16px 12px; }
    .pl-res .pl-res-cabecera-fila { gap: 12px; }
    .pl-res .pl-res-cabecera-fila > div:first-child { width: 100%; }
    .pl-res h1.pl-res-titulo { font-size: 20px; line-height: 1.25; }
    .pl-res .pl-res-sub { display: none; }
    .pl-res .pl-res-respuesta { margin-top: 6px; font-size: 14px; line-height: 1.45; }
    /* Selector en una fila: flecha · desplegable · flecha; el texto de las flechas solo en escritorio */
    .pl-res .pl-res-selector { width: 100%; flex-wrap: nowrap; gap: 8px; }
    .pl-res .pl-res-selector .pl-boton-flecha { flex: 0 0 44px; width: 44px; padding: 0; font-size: 22px; line-height: 1; }
    .pl-res .pl-res-selector .pl-txt { display: none; }
    .pl-res .pl-res-selector select { flex: 1 1 auto; min-width: 0; min-height: 44px; }
    .pl-res .pl-res-otros { margin-top: 12px; padding-top: 10px; }
    .pl-res .pl-res-cabecera-fila > .pl-res-otros { margin-top: 0; }
    .pl-res .pl-res-otros-titulo { font-size: 12px; margin-bottom: 6px; color: var(--pl-suave); text-transform: uppercase; letter-spacing: .04em; }
    .pl-res .pl-chips { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .pl-res .pl-chips::-webkit-scrollbar { display: none; }
    .pl-res .pl-chips a, .pl-res .pl-chips span { flex: 0 0 auto; padding: 5px 12px; font-size: 13px; }
    .pl-res .pl-card-titulo { font-size: 17px; margin-bottom: 12px; }
    .pl-res .pl-bolas-grupo { margin-bottom: 12px; }
    .pl-res .pl-bolas { gap: 6px; }
    .pl-res .pl-bola { width: 40px; height: 40px; font-size: 17px; }
    .pl-res .pl-bola--estrella { width: 48px; height: 48px; font-size: 15px; }
    .pl-res table.pl-tabla { font-size: 14px; }
    .pl-res table.pl-tabla td { padding: 10px 6px; }
    .pl-res table.pl-tabla th { padding: 0 6px 8px; font-size: 12px; }
    /* Sorteos anteriores: cada sorteo en dos líneas (fecha y premio; bolas debajo) en vez de una tabla ancha */
    .pl-res table.pl-tabla--anteriores thead { display: none; }
    .pl-res table.pl-tabla--anteriores, .pl-res table.pl-tabla--anteriores tbody { display: block; }
    .pl-res table.pl-tabla--anteriores tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 12px 0; border-bottom: 1px solid var(--pl-borde) !important; }
    .pl-res table.pl-tabla--anteriores tr:last-child { border-bottom: 0 !important; }
    .pl-res table.pl-tabla--anteriores td { display: block; padding: 0; border: 0 !important; }
    .pl-res table.pl-tabla--anteriores .pl-ant-fecha { grid-column: 1; grid-row: 1; }
    .pl-res table.pl-tabla--anteriores .pl-ant-premio { grid-column: 2; grid-row: 1; text-align: right !important; }
    .pl-res table.pl-tabla--anteriores .pl-ant-bolas { grid-column: 1 / -1; grid-row: 2; }
    .pl-res table.pl-tabla--anteriores .pl-ant-acertantes { display: none; }
    .pl-res .pl-res-anteriores .pl-tabla-scroll { overflow: visible; }
}

/* Últimos resultados (/ultimos-resultados/, 17/10/2026): una tarjeta por juego con su último sorteo */
.pl-res .pl-res-ultimo { margin-top: 16px; }
.pl-res .pl-res-ultimo .pl-bolas { margin: 0 0 14px; }
.pl-res .pl-res-ultimo .pl-res-premio { margin: 0 0 12px; font-weight: 700; color: var(--pl-tinta); }
.pl-res .pl-res-ultimo .pl-res-resumen p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: var(--pl-tinta-2); max-width: 75ch; }
.pl-res .pl-res-ultimo .pl-res-resumen p:last-child { margin-bottom: 0; }
.pl-res .pl-res-enlaces { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.pl-res .pl-res-sub a { color: var(--pl-tinta); font-weight: 700; }

/* ------------------------------------------------------------------------------------------------------------------------------
 * Piezas comunes del diseño nuevo fuera de los resultados (17/10/2026): la página 404 útil (Web/General/General_NoEncontrada.aspx),
 * los bloques nuevos de las páginas de lotería (pl-historico-loteria.css) y comprobar lotería. Mismo lenguaje que lo de arriba.
 * ------------------------------------------------------------------------------------------------------------------------------ */
/* Dentro de una página con su propia rejilla (bootstrap): sin el ancho máximo ni los márgenes de la página de resultados */
.pl-res.pl-res--incrustado { max-width: none; margin: 0; padding: 0; }
/* Botón principal: píldora oscura, como "Entrar" o "Pagar" en acceso y cesta */
.pl-res .pl-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid var(--pl-boton);
    background: var(--pl-boton);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.pl-res .pl-boton:hover, .pl-res .pl-boton:focus { background: var(--pl-boton-hover); border-color: var(--pl-boton-hover); color: #fff; text-decoration: none; }
.pl-res .pl-res-enlaces .pl-boton, .pl-res .pl-res-enlaces .pl-boton-sec { white-space: normal; text-align: center; }
/* Tres tarjetas en fila (una debajo de otra en móvil) */
.pl-res .pl-res-rejilla.pl-res-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Lista de enlaces dentro de una tarjeta */
.pl-res ul.pl-lista-enlaces { list-style: none; margin: 0; padding: 0; }
.pl-res ul.pl-lista-enlaces li { margin: 0; padding: 0; border-bottom: 1px solid var(--pl-borde); background: none; }
.pl-res ul.pl-lista-enlaces li:last-child { border-bottom: 0; }
.pl-res ul.pl-lista-enlaces a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 0; color: var(--pl-tinta); font-weight: 700; text-decoration: none; }
.pl-res ul.pl-lista-enlaces a::after { content: "›"; color: var(--pl-suave); font-size: 20px; line-height: 1; }
.pl-res ul.pl-lista-enlaces a:hover { color: var(--pl-tinta); text-decoration: underline; }
/* Buscador de décimos (página 404) */
.pl-res .pl-buscador-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.pl-res .pl-buscador-campo { display: flex; flex-direction: column; margin: 0; font-weight: 400; }
.pl-res .pl-buscador-campo select,
.pl-res .pl-buscador-campo input {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--pl-suave);
    border-radius: var(--pl-radio);
    background: #fff;
    color: var(--pl-tinta);
    font: inherit;
    font-size: 16px;
    box-shadow: none;
}
.pl-res .pl-buscador-campo select { min-width: 240px; }
.pl-res .pl-buscador-campo input { width: 190px; font-size: 18px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.pl-res .pl-nota--aviso { color: #b45309; }
@media (max-width: 860px) {
    .pl-res .pl-res-rejilla.pl-res-rejilla--3 { grid-template-columns: minmax(0, 1fr); }
    .pl-res .pl-buscador-campo { flex: 1 1 100%; }
    .pl-res .pl-buscador-campo select, .pl-res .pl-buscador-campo input { width: 100%; min-width: 0; }
    .pl-res .pl-buscador-fila .pl-boton { flex: 1 1 100%; }
    .pl-res .pl-res-enlaces .pl-boton, .pl-res .pl-res-enlaces .pl-boton-sec { flex: 1 1 100%; }
}