/*
   Estilos específicos para la sección "Jornada Actual / Próxima"
   Tabla moderna y Pleno al 15 destacado
*/

#partidos-tabla-container {
    overflow-x: auto;
    margin-top: 1rem;
}

/* ============================================
   FILAS COMPACTAS (rediseño mobile-first, 15/08/26)
   Sustituye a la tabla <table class="quiniela-table"> por
   filas <div>: nombres de equipo sin cortar, hora bajo el
   número de partido, % LAE oculto hasta tocar la fila.
   ============================================ */
.qrows {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--card-bg);
}

.qrow {
    display: grid;
    /* Sin badge de signo, solo 2 columnas: el partido usa todo el ancho.
       Con badge (en directo/finalizado), se añade la 3ª columna para el círculo. */
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    cursor: pointer;
}

.qrow.q-has-badge {
    grid-template-columns: 40px 1fr auto;
}

/* Fila expandible: columna extra para el icono que avisa de que se puede
   tocar (ver .q-expand-icon). Con badge de signo Y expandible, van los dos
   codo con codo a la derecha. */
.qrow.q-expandable:not(.q-has-badge) {
    grid-template-columns: 40px 1fr auto;
}

.qrow.q-expandable.q-has-badge {
    grid-template-columns: 40px 1fr auto auto;
}

.q-expand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.7rem;
    opacity: 0.55;
    transition: transform 0.2s ease;
}

.qrow.q-expanded .q-expand-icon i {
    transform: rotate(180deg);
}

.qrow:last-child {
    border-bottom: none;
}

.qrow:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
}

.qrow.q-live {
    background: rgba(255, 46, 126, 0.06);
}

.qrow.q-live::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ff2e7e;
}

.qrow.q-postponed {
    opacity: 0.6;
}

.q-pos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 3px 1px 4px;
}

.q-pos-num {
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.q-pos-time {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
}

.qrow.q-live .q-pos {
    border-color: #ff2e7e;
}

.qrow.q-live .q-pos-num {
    color: #ff2e7e;
}

.q-match {
    min-width: 0;
}

.q-matchup {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.q-matchup .q-dash {
    color: var(--text-secondary);
    font-weight: 500;
    margin: 0 4px;
}

.q-pctrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
}

.q-bar {
    flex: 1;
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.08);
}

.q-bar span {
    display: block;
    height: 100%;
}

.q-bar .q-b1 {
    background: var(--bar-1);
}

.q-bar .q-bx {
    background: var(--bar-x);
}

.q-bar .q-b2 {
    background: var(--bar-2);
}

.qrow.q-postponed .q-bar span {
    filter: grayscale(0.6);
}

/* % LAE siempre visible junto a la barra */
.q-pctlabel {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.q-postponed-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #c1272d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 3px;
    display: block;
}

/* Marcador destacado + minuto, en su propia línea bajo la barra */
.q-resultline {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
}

.q-scorechip {
    font-weight: 900;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    padding: 2px 9px;
    border-radius: 7px;
    color: var(--chip-text);
    background: var(--chip-bg);
}

.q-scorechip.q-live {
    background: #ff2e7e;
    animation: q-pulse-chip 1.8s ease-out infinite;
}

@keyframes q-pulse-chip {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 46, 126, 0.45);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(255, 46, 126, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 46, 126, 0);
    }
}

.q-finaltag {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.q-minute {
    font-size: 0.72rem;
    font-weight: 800;
    color: #ff2e7e;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.q-minute .q-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff2e7e;
    animation: q-pulse-dot 1.6s ease-out infinite;
}

@keyframes q-pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 46, 126, 0.5);
    }

    70% {
        box-shadow: 0 0 0 5px rgba(255, 46, 126, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 46, 126, 0);
    }
}

.q-result {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Separa el "?" de un partido con incidencia de su signo */
    gap: 8px;
}

/* Fila expandible al tocarla: fecha/hora en grande + explicación de los
   porcentajes en una frase. Vive DENTRO de .qrow (no como hermano) para no
   descuadrar el :nth-child/:last-child que pintan el rayado y los bordes de
   .qrows; grid-column: 1/-1 la manda a su propia línea bajo las columnas
   existentes sin tocar la plantilla de la fila. */
.qrow.q-expandable {
    cursor: pointer;
}

.qrow.q-expandable:active {
    background: rgba(0, 0, 0, 0.035);
}

.q-detail {
    display: none;
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    cursor: default;
}

.q-detail.q-detail-open {
    display: block;
}

.q-detail-fecha {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--text-primary);
    background: rgba(0, 200, 83, 0.1);
    border-radius: 6px;
    padding: 3px 9px;
    margin-bottom: 8px;
}

.q-detail-explicacion {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* --- Pleno al 15 (rediseño) --- */
.q-pleno-box {
    background: linear-gradient(135deg, #7a5c00 0%, #b8860b 100%);
    color: #fff;
    border-radius: 0.75rem;
    padding: 1.1rem 1.2rem 1.3rem;
    margin-top: 0.75rem;
}

.q-pleno-tag {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 900;
    opacity: 0.9;
    margin-bottom: 0.4rem;
}

.q-pleno-teams {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 0.9rem;
}

/* Tira hacia arriba, pegada a .q-pleno-teams (su margen ya deja hueco antes
   de las barras de goles): sin esto quedaba un salto raro entre el nombre
   de los equipos y la fecha. Solo aparece si hay fecha (ver script.js), así
   que no afecta al espaciado cuando el partido está aplazado. */
.q-pleno-fecha {
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.85;
    margin: -0.6rem 0 0.9rem;
}

.q-goal-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.q-goal-line:last-child {
    margin-bottom: 0;
}

.q-goal-label {
    width: 48px;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.q-goal-cells {
    display: flex;
    gap: 4px;
    flex: 1;
}

.q-goal-cell {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding: 4px 2px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
}

.q-goal-cell.q-best {
    background: #fff;
    color: #7a5c00;
}

/* ============================================
   ESTILOS PARA JORNADA EN VIVO / AUTO-REFRESH
   ============================================ */

/* Animación de parpadeo para indicadores en vivo */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.blink {
    animation: blink 1.2s ease-in-out infinite;
}

/* Badge de jornada en vivo */
.jornada-badge.live {
    background: linear-gradient(135deg, #ff2e7e, #e0195e);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(255, 46, 126, 0.35);
}

.jornada-badge.live.blink {
    box-shadow: 0 2px 12px rgba(255, 46, 126, 0.55);
}

/* Badge de progreso */
.progreso-badge {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.3rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Número de jornada */
.jornada-numero {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}

/* Header info de jornada */
#jornada-actual-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Badges de Dificultad. "background" (shorthand), no solo "background-color":
   .jornada-badge (style.css) le pone a CUALQUIER badge un degradado verde de
   fondo vía "background: linear-gradient(...)" — un "background-color" suelto
   aquí no lo tapa (el degradado es background-image, una capa aparte que se
   sigue pintando encima), así que el badge de dificultad de "Jornada Actual"
   salía siempre verde fuera cual fuera la dificultad real. El shorthand sí
   resetea el degradado a "none". */
.diff-very-easy {
    background: #4CAF50;
    /* Green */
    color: white;
}

.diff-easy {
    background: #8BC34A;
    /* Light Green */
    color: white;
}

.diff-logical {
    background: #00BCD4;
    /* Cyan */
    color: white;
}

.diff-complicated {
    background: #FFC107;
    /* Amber */
    color: #333;
    /* Dark text for contrast */
}

.diff-hard {
    background: #FF9800;
    /* Orange */
    color: white;
}

.diff-very-hard {
    background: #F44336;
    /* Red */
    color: white;
}

.diff-bomb {
    background-color: #9C27B0;
    /* Purple */
    background-image: linear-gradient(45deg, #9C27B0 25%, #7B1FA2 25%, #7B1FA2 50%, #9C27B0 50%, #9C27B0 75%, #7B1FA2 75%, #7B1FA2 100%);
    background-size: 20px 20px;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- Panel de Análisis Detallado (Encima de la tabla) --- */
.difficulty-analysis-panel {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-left: 5px solid transparent;
    background: var(--card-bg);
}

/* En la tarjeta histórica el análisis es lo último de la tarjeta (no separa
   de nada que venga después), así que ese margen de abajo solo sumaba aire
   muerto contra el borde inferior de .jh-card. */
[id^="jh-analisis-"] .difficulty-analysis-panel {
    margin-bottom: 0;
}

.diff-very-easy .difficulty-analysis-panel {
    border-left-color: #4CAF50;
}

.diff-easy .difficulty-analysis-panel {
    border-left-color: #8BC34A;
}

.diff-logical .difficulty-analysis-panel {
    border-left-color: #00BCD4;
}

.diff-complicated .difficulty-analysis-panel {
    border-left-color: #FFC107;
}

.diff-hard .difficulty-analysis-panel {
    border-left-color: #FF9800;
}

.diff-very-hard .difficulty-analysis-panel {
    border-left-color: #F44336;
}

.diff-bomb .difficulty-analysis-panel {
    border-left-color: #9C27B0;
}

.difficulty-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.diff-badge-large {
    font-size: 1.4rem;
    font-weight: 800;
    padding: 0.5rem 1.5rem;
    border-radius: 2rem;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
}

.diff-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.diff-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
}

.diff-value {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
}

/* Sobre cuántos partidos está hecha la media. Con la jornada a medias solo
   entran los ya escrutados, y sin decirlo un 40% se lee como si fuera el
   balance de la jornada entera. */
.diff-sublabel {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 2px;
}

/* --- Grid de Categorías con Listas de Partidos --- */
.difficulty-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.diff-category-block {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
}

.diff-cat-header {
    padding: 0.8rem 1rem;
    font-weight: 700;
    color: white;
    /* Asumiendo que las clases de dificutlad tienen color de fondo */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ajustes específicos para headers (asegurar contraste) */
.diff-cat-header.diff-complicated {
    color: #333;
}

.diff-cat-header.diff-easy {
    color: white;
}

/* Light green mejor white */

.diff-cat-list {
    padding: 0.5rem 0;
}

.diff-match-item {
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    transition: background-color 0.2s;
}

.diff-match-item:last-child {
    border-bottom: none;
}

.diff-match-item:hover {
    background-color: rgba(0, 0, 0, 0.01);
}

.match-teams {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 1rem;
}

.match-result {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.match-pct {
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.match-sign {
    font-weight: 800;
    width: 24px;
    text-align: center;
}

.match-sign.sign-1 {
    color: var(--signo-1);
}

.match-sign.sign-X {
    color: var(--signo-x);
}

.match-sign.sign-2 {
    color: var(--signo-2);
}

/* ============================================
   RESULTADOS ANTERIORES (jornadas históricas)
   Reutiliza .glass-panel/.qrows/.qrow/.signo-badge/.q-pleno-box (mismas
   filas de partido que la jornada actual, ver renderPartidoRow() en
   script.js) y añade solo lo que el histórico tiene de más: premios y
   lugares agraciados. Prefijo .jh- para no chocar con .premio-row/
   .premio-cat, ya usados por el componente de "Sorteos" en style.css.
   ============================================ */

.jh-card {
    margin-bottom: 0;
}

/* Anclas rápidas (Análisis Jornada / Signos / Escrutinio): la tarjeta
   histórica es larga (15 filas + escrutinio + a veces análisis y lugares),
   esto salta directo a la sección sin tener que hacer scroll a mano. */
.jh-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.jh-anchor-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    text-decoration: none;
    white-space: nowrap;
}

.jh-anchor-link:active {
    background: rgba(0, 0, 0, 0.08);
}

/* Objetivo de las anclas de arriba: un pelín de aire respecto al borde de
   la pantalla al llegar con el scroll suave. */
.jh-section,
[id^="jh-analisis-"] {
    scroll-margin-top: 12px;
}

/* El Análisis Jornada no usa .jh-section porque .difficulty-analysis-panel
   ya trae su propio marco (fondo, franja de color, padding) — envolverlo
   en .jh-section habría sumado un padding-top encima de otro. Solo hace
   falta la línea separadora de arriba para no pegarlo al bloque anterior. */
[id^="jh-analisis-"] {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
}

/* El "Jornada N" ya lo dice la cabecera de navegación de arriba (‹ Jornada N
   ›): repetirlo aquí solo apilaba dos rótulos iguales uno encima del otro.
   Esta cabecera se queda solo con lo que la de navegación no tiene. */
.jh-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
}

.jh-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.jh-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Copiar/compartir el enlace directo a esta jornada (ver compartirJornada()
   en script.js) — para pegarlo en el grupo de la peña sin tener que
   explicar cómo llegar hasta aquí navegando. */
.jh-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.jh-share-btn:active {
    background: rgba(0, 0, 0, 0.08);
}

.jh-temporada {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.jh-fecha {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 700;
    background: rgba(0, 0, 0, 0.04);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.jh-rows {
    margin-bottom: 10px;
}

.jh-premio-pleno {
    margin-top: 8px;
    font-weight: 800;
    font-size: 0.85rem;
    color: #ffd700;
}

/* ---------- Cada bloque de la tarjeta histórica: Signos, Escrutinio,
   Elige 8 (y, aparte, el Análisis Jornada — ver más abajo, ya trae su
   propio marco de color y no necesita este). Mismo ritmo para los cuatro:
   título grande, línea separadora arriba. Antes el título iba casi al
   tamaño del texto normal (0.85rem) y se perdía entre el resto. ---------- */
.jh-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
}

.jh-section-title {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* Título de "Análisis Jornada" + botón "?" de ayuda (mostrarInfoAnalisisJornada,
   partidos-tabla.js). La línea de abajo es la misma que llevan "Jornada Actual"
   y "Mis Apuestas en Juego" vía .panel-header — mismos valores, para que se
   vea igual de consistente. Solo aquí, no en cada .jh-section-title suelto
   (Elige 8, etc. ya tienen su propia línea de separación por ARRIBA vía
   .jh-section). */
.jh-section-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jh-section-title-row .jh-section-title {
    margin-bottom: 0;
}

.difficulty-analysis-panel > .jh-section-title-row {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
}

.jh-info-btn {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--text-secondary);
    background: none;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.jh-info-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Área táctil de 40x40 (C-263) sin cambiar lo que se ve: el círculo sigue
   siendo de 20 px (el "?") o 30 px (compartir), y un ::after transparente
   centrado encima recoge el toque alrededor. */
.jh-info-btn,
.jh-share-btn {
    position: relative;
}

.jh-info-btn::after,
.jh-share-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
}

.jh-premio-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.jh-premio-row:last-child {
    border-bottom: none;
}

.jh-premio-cat {
    flex: 1;
    color: var(--text-primary);
    font-weight: 600;
}

.jh-premio-ganadores {
    color: var(--text-secondary);
    font-weight: 700;
    min-width: 46px;
    text-align: center;
}

.jh-premio-importe {
    font-weight: 900;
    color: #1f9d55;
    min-width: 72px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.jh-premio-row.jh-sin-ganadores .jh-premio-ganadores,
.jh-premio-row.jh-sin-ganadores .jh-premio-importe {
    color: var(--text-secondary);
    opacity: 0.65;
}

.jh-premio-row.jh-sin-premio .jh-premio-importe {
    color: var(--text-secondary);
}

.jh-no-data {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-align: center;
    padding: 8px 0;
    margin: 0;
}

/* ---------- Lugares agraciados ---------- */
.jh-lugares {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
}

.jh-lugares-heading {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.jh-lugares-group {
    margin-bottom: 12px;
}

.jh-lugares-group:last-child {
    margin-bottom: 0;
}

.jh-lugares-title {
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.jh-lugares-list {
    display: grid;
    gap: 6px;
}

.jh-lugar {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    border-left: 3px solid transparent;
}

.jh-lugar-1 {
    background: rgba(31, 157, 85, 0.08);
    border-left-color: #1f9d55;
}

.jh-lugar-2 {
    background: rgba(230, 154, 6, 0.08);
    border-left-color: #e69a06;
}

.jh-lugar-place {
    font-weight: 700;
    color: var(--text-primary);
}

/* --- Responsive: Panel de Análisis de Dificultad ---
   El panel vive anidado dentro de otro .glass-panel (ver
   #partidos-tabla-container en index.php), y hasta ahora este archivo no
   tenía NINGÚN @media: en móvil se sumaban el padding del .container
   (0.75rem), el del .glass-panel exterior y el de este panel (1.5rem fijo,
   nunca se reducía) más el padding interno de cada fila — hasta 65px de
   margen muerto POR LADO en un viewport de ~380px. Aquí se recorta ese
   padding en cascada y se deja que los nombres de equipo hagan salto de
   línea en vez de cortarse con "...". */
@media (max-width: 600px) {
    .difficulty-analysis-panel {
        padding: 0.85rem 0.6rem;
        border-left-width: 4px;
    }

    .difficulty-header {
        margin-bottom: 1rem;
        gap: 0.6rem;
    }

    .diff-badge-large {
        font-size: 1.05rem;
        padding: 0.4rem 1rem;
    }

    .diff-value {
        font-size: 1.5rem;
    }

    .difficulty-categories-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .diff-cat-header {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }

    .diff-match-item {
        padding: 0.5rem 0.75rem;
        align-items: flex-start;
    }

    .match-teams {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
    }

    .match-result {
        margin-top: 0.1rem;
    }

    /* Misma idea que las tarjetas de apuesta (ver .sg-card): la tabla de
       partidos ya trae su propio padding por fila, así que en móvil se pega
       a los bordes del panel en vez de sumar la sangría de los dos. */
    .qrows {
        margin-left: calc(var(--panel-pad-x, 0px) * -1);
        margin-right: calc(var(--panel-pad-x, 0px) * -1);
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    .qrow {
        padding: 8px 10px;
        gap: 8px;
    }

    /* .jh-card (tarjeta de jornada histórica) es ella misma un .glass-panel,
       metida dentro del panel exterior de "Resultados Anteriores" — la misma
       tarjeta-dentro-de-tarjeta que .sg-card más arriba, solo que esta se
       quedó fuera de aquel arreglo: sumaba el padding de los DOS paneles más
       el del .difficulty-analysis-panel de dentro, hasta 3 sangrías en
       cascada. Se cancela la del panel exterior y se deja la suya propia
       (0.85rem, la misma que ya lleva .difficulty-analysis-panel cuando vive
       sola en "Jornada Actual") como único margen lateral real. */
    .jh-card {
        margin-left: calc(var(--panel-pad-x, 0px) * -1);
        margin-right: calc(var(--panel-pad-x, 0px) * -1);
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    /* El comentario de arriba decía la intención pero no la cumplía: al
       vivir dentro de .jh-card (ya un solo gutter de 0.85rem), el análisis
       seguía sumando su propio padding lateral (0.6rem) encima — la misma
       sangría doble de siempre, solo que en el sitio nuevo de abajo del
       todo. Aquí se quita SOLO cuando está anidado en la tarjeta histórica;
       en "Jornada Actual" (un único panel) el suyo propio sigue haciendo
       falta y no se toca. */
    .jh-card .difficulty-analysis-panel {
        padding-left: 0;
        padding-right: 0;
    }
}

.jh-lugar-admin {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 2px;
}