/* ==========================================================================
   QUINIELA · POPUP ESTADÍSTICAS
   Archivo completo: quiniela-stats-popup.css
   ========================================================================== */

:root {
    --stats-primary: var(--colorQ1, #981314);
    --stats-primary-2: var(--colorQ2, #ca191b);
    --stats-primary-soft: rgba(152, 19, 20, .075);
    --stats-primary-soft-2: rgba(152, 19, 20, .14);

    --stats-bg: #f5f6f8;
    --stats-surface: #ffffff;
    --stats-surface-soft: #fbfcfe;

    --stats-border: #e0e5ec;
    --stats-border-strong: #cfd7e3;

    --stats-text: #132039;
    --stats-text-2: #40516b;
    --stats-muted: #69778d;

    --stats-success: #0d7a4a;
    --stats-success-bg: #ecfdf5;

    --stats-warning: #a85d00;
    --stats-warning-bg: #fff7e8;

    --stats-danger: #a61b1b;
    --stats-danger-bg: #fff1f1;

    --stats-radius-lg: 18px;
    --stats-radius-md: 14px;
    --stats-radius-sm: 10px;

    --stats-shadow: 0 16px 42px rgba(15, 23, 42, .14);
    --stats-shadow-soft: 0 7px 20px rgba(15, 23, 42, .055);

    --stats-font: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================================
   ESTADO ABIERTO Y BACKDROP
   ========================================================================== */

html.stats-popover-open,
body.stats-popover-open {
    overflow: visible !important;
}

body.stats-popover-open .quiniela-app,
body.stats-popover-open .quiniela-wrapper,
body.stats-popover-open .app-container,
body.stats-popover-open .app-shell,
body.stats-popover-open .main-content,
body.stats-popover-open .content-wrapper,
body.stats-popover-open .generator-card,
body.stats-popover-open .matches-container,
body.stats-popover-open .matches-list,
body.stats-popover-open .match-row,
body.stats-popover-open .left-panel,
body.stats-popover-open .coupon-panel {
    overflow: visible !important;
}

.match-stats-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147482900;
    display: none;
    background: rgba(15, 23, 42, .05);
    opacity: 0;
    transition: opacity .16s ease;
}

.match-stats-backdrop.show {
    display: block;
    opacity: 1;
}

.match-stats-backdrop[hidden] {
    display: none !important;
}

/* ==========================================================================
   CONTENEDOR PRINCIPAL
   ========================================================================== */

#match-stats-popover.match-stats-popover {
    box-sizing: border-box;
    container: statsPopup / inline-size;

    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    z-index: 2147483000 !important;

    display: none;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 8px auto 16px !important;

    color: var(--stats-text);
    font-family: var(--stats-font);
    font-size: 13px;
    line-height: 1.42;

   background: var(--stats-surface);
border: 2px solid rgba(152, 19, 20, .88);
border-radius: var(--stats-radius-lg);
box-shadow:
    0 16px 35px rgba(15, 23, 42, .22),
    0 4px 12px rgba(15, 23, 42, .15);

overflow: hidden;
}

#match-stats-popover.match-stats-popover.show {
    display: block !important;
    animation: statsPopoverIn .16s ease-out;
}

#match-stats-popover.match-stats-popover[aria-hidden="true"] {
    display: none !important;
}

#match-stats-popover.match-stats-popover *,
#match-stats-popover.match-stats-popover *::before,
#match-stats-popover.match-stats-popover *::after {
    box-sizing: border-box;
    min-width: 0;
}

@keyframes statsPopoverIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   CABECERA
   ========================================================================== */

.stats-popup-top {
    position: relative;
    padding: 13px 14px 11px;
    background:
        linear-gradient(135deg, rgba(152, 19, 20, .08), rgba(152, 19, 20, .025) 52%, rgba(255, 255, 255, .98));
    border-bottom: 1px solid var(--stats-border);
}

.stats-popup-header,
.stats-popup-header-redesign {
    padding-right: 40px;
}

.stats-popup-header h3,
.stats-popup-header-redesign h3 {
    margin: 0;
    color: var(--stats-text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.025em;
}

.stats-popup-header p,
.stats-popup-header-redesign p {
    margin: 4px 0 0;
    color: var(--stats-text-2);
    font-size: 12.7px;
    font-weight: 600;
    line-height: 1.25;
}

.stats-popup-close {
    position: absolute;
    top: 10px;
    right: 11px;
    z-index: 2147483001;

    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;

    color: var(--stats-text-2);
    font-size: 21px;
    font-weight: 600;
    line-height: 1;

    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--stats-border);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);

    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.stats-popup-close:hover,
.stats-popup-close:focus-visible {
    color: #ffffff;
    background: var(--stats-primary);
    border-color: var(--stats-primary);
    transform: translateY(-1px);
    outline: none;
}

/* ==========================================================================
   PESTAÑAS · SIN SCROLL HORIZONTAL
   ========================================================================== */

.stats-popup-tabs,
.stats-popup-tabs-redesign {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr));
    gap: 7px;

    margin-top: 11px;
    padding: 0 !important;

    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    scrollbar-width: none;
}

.stats-popup-tabs::-webkit-scrollbar,
.stats-popup-tabs-redesign::-webkit-scrollbar {
    display: none !important;
}

.stats-popup-tabs button,
.stats-popup-tabs-redesign button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 8px 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--stats-text-2);
    font: 750 11.5px/1.13 var(--stats-font);
    text-align: center;
    white-space: normal !important;
    overflow-wrap: anywhere;

    background: #ffffff;
    border: 1px solid rgba(152, 19, 20, .13);
    border-radius: 11px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .045);

    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.stats-popup-tabs button:hover,
.stats-popup-tabs-redesign button:hover {
    color: var(--stats-primary);
    background: rgba(152, 19, 20, .055);
    border-color: rgba(152, 19, 20, .24);
}

.stats-popup-tabs button.is-active,
.stats-popup-tabs button[aria-selected="true"],
.stats-popup-tabs-redesign button.is-active,
.stats-popup-tabs-redesign button[aria-selected="true"] {
    color: #ffffff;
    background: linear-gradient(135deg, var(--stats-primary), var(--stats-primary-2));
    border-color: transparent;
    box-shadow: 0 8px 17px rgba(152, 19, 20, .23);
}

/* ==========================================================================
   CUERPO Y PANELES
   ========================================================================== */

.stats-popup-body,
.stats-popup-body-redesign {
    padding: 11px;
    background: var(--stats-bg);
    overflow-x: hidden;
}

.stats-popup-body-empty {
    min-height: 110px;
    display: grid;
    place-items: center;
}

.stats-tab-panel {
    display: none;
}

.stats-tab-panel.is-active {
    display: block;
}

.stats-tab-panel[hidden] {
    display: none !important;
}

.stats-tab-panel > * {
    margin-bottom: 10px !important;
}

.stats-tab-panel > *:first-child {
    margin-top: 0 !important;
}

.stats-tab-panel > *:last-child {
    margin-bottom: 0 !important;
}

.stats-popup-loading,
.stats-popup-empty {
    padding: 26px 16px;
    color: var(--stats-text-2);
    text-align: center;
    font-weight: 600;
}

.stats-popup-loading::before {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    margin: 0 auto 10px;
    border: 3px solid rgba(152, 19, 20, .15);
    border-top-color: var(--stats-primary);
    border-radius: 999px;
    animation: statsSpin .8s linear infinite;
}

@keyframes statsSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   TARJETAS BASE
   ========================================================================== */

.stats-card,
.stats-reading-box,
.stats-form-card,
.stats-human-comment,
.stats-warning-box,
.stats-summary-hero,
.stats-summary-advice,
.stats-summary-quality,
.stats-summary-card,
.stats-model-panel,
.stats-model-conclusion-card,
.stats-model-data-strip,
.stats-model-details,
.stats-summary-details {
    background: var(--stats-surface);
    border: 1px solid var(--stats-border);
    border-radius: 13px;
    box-shadow: var(--stats-shadow-soft);
}

.stats-card,
.stats-reading-box,
.stats-form-card,
.stats-human-comment,
.stats-warning-box,
.stats-summary-card,
.stats-model-panel,
.stats-model-details {
    padding: 11px 12px;
}

.stats-card > strong,
.stats-reading-box > strong,
.stats-form-card > strong,
.stats-summary-card > strong,
.stats-model-panel > strong {
    display: block;
    margin: 0 0 6px;
    color: var(--stats-text);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.01em;
}

.stats-card p,
.stats-reading-box p,
.stats-form-card p,
.stats-summary-card p,
.stats-model-panel p,
.stats-model-details p,
.stats-human-comment p {
    margin: 0;
    color: var(--stats-text-2);
    font-size: 12.25px;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.stats-card p + p,
.stats-reading-box p + p,
.stats-form-card p + p {
    margin-top: 7px;
}

.stats-card-note {
    background: #fbfcff;
    border-color: #dbe4f0;
}

.stats-card-warning,
.stats-warning-box {
    background: var(--stats-warning-bg);
    border-color: rgba(168, 93, 0, .23);
}

.stats-warning-box-soft {
    color: #704100;
    font-weight: 600;
}

.stats-muted-text {
    margin: 0;
    color: var(--stats-muted);
    font-size: 12.2px;
    line-height: 1.42;
}

/* ==========================================================================
   RESUMEN QUINIELISTA
   ========================================================================== */

.stats-client-summary {
    display: grid;
    gap: 10px;
}

.stats-summary-hero {
    position: relative;
    padding: 12px 13px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(152, 19, 20, .095), rgba(255, 255, 255, .98) 68%);
    border-color: rgba(152, 19, 20, .16);
}

.stats-summary-hero::after {
    content: "";
    position: absolute;
    right: -44px;
    top: -58px;
    width: 135px;
    height: 135px;
    background: radial-gradient(circle, rgba(152, 19, 20, .12), transparent 68%);
    pointer-events: none;
}

.stats-summary-hero span,
.stats-human-kicker,
.stats-model-eyebrow {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    width: fit-content;

    margin: 0 0 6px;
    padding: 4px 8px;

    color: var(--stats-primary);
    font-size: 9.8px;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .055em;

    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(152, 19, 20, .13);
    border-radius: 999px;
}

.stats-summary-hero h4 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--stats-text);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.18;
    letter-spacing: -.028em;
}

.stats-summary-hero p {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 6px 0 0;
    color: var(--stats-text-2);
    font-size: 12.6px;
    line-height: 1.42;
}

/* ==========================================================================
   MÉTRICAS
   ========================================================================== */

.stats-summary-metric-grid,
.stats-redesign-summary-grid,
.stats-model-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 10px;
}

.stats-redesign-summary-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats-metric-card,
.stats-model-kpi-card {
    min-width: 0;
    min-height: 66px;
    padding: 9px 10px;

    background: var(--stats-surface);
    border: 1px solid var(--stats-border);
    border-radius: 11px;
}

.stats-metric-card span,
.stats-model-kpi-card span {
    display: block;
    margin: 0 0 4px;

    color: var(--stats-muted);
    font-size: 10.25px;
    font-weight: 750;
    line-height: 1.12;
}

.stats-metric-card b,
.stats-model-kpi-card b {
    display: block;

    color: var(--stats-text);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.stats-metric-main,
.stats-model-kpi-card.is-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--stats-primary), var(--stats-primary-2));
    border-color: transparent;
    box-shadow: 0 8px 16px rgba(152, 19, 20, .17);
}

.stats-metric-main span,
.stats-metric-main b,
.stats-model-kpi-card.is-primary span,
.stats-model-kpi-card.is-primary b {
    color: #ffffff;
}

/* ==========================================================================
   CONSEJO, CALIDAD Y LISTAS
   ========================================================================== */

.stats-summary-advice,
.stats-summary-quality {
    padding: 12px 13px;
    border-left: 4px solid var(--stats-primary);
}

.stats-summary-advice strong {
    display: block;
    margin-bottom: 5px;
    color: var(--stats-text);
    font-size: 12.75px;
    font-weight: 850;
}

.stats-summary-advice p,
.stats-summary-quality p,
.stats-summary-responsible-note {
    margin: 0;
    color: var(--stats-text-2);
    font-size: 12.25px;
    line-height: 1.42;
}

.stats-summary-advice.is-success,
.stats-summary-card.is-ok,
.stats-summary-quality.is-high {
    background: var(--stats-success-bg);
    border-color: rgba(15, 122, 74, .24);
    border-left-color: var(--stats-success);
}

.stats-summary-advice.is-warning,
.stats-summary-card.is-warning,
.stats-summary-quality.is-medium {
    background: var(--stats-warning-bg);
    border-color: rgba(168, 93, 0, .24);
    border-left-color: var(--stats-warning);
}

.stats-summary-quality.is-low {
    background: var(--stats-danger-bg);
    border-color: rgba(166, 27, 27, .22);
    border-left-color: var(--stats-danger);
}

.stats-summary-two-col,
.stats-model-decision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.stats-summary-card {
    padding: 11px 12px;
}

.stats-summary-list,
.stats-clean-list,
.stats-model-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stats-summary-list li,
.stats-clean-list li,
.stats-model-list li {
    position: relative;
    margin: 0 0 5px;
    padding-left: 14px;
    color: var(--stats-text-2);
    font-size: 12.1px;
    line-height: 1.38;
    overflow-wrap: anywhere;
}

.stats-summary-list li:last-child,
.stats-clean-list li:last-child,
.stats-model-list li:last-child {
    margin-bottom: 0;
}

.stats-summary-list li::before,
.stats-clean-list li::before,
.stats-model-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .57em;
    width: 5px;
    height: 5px;
    background: var(--stats-primary);
    border-radius: 999px;
}

.stats-positive-list li::before,
.stats-model-list-positive li::before {
    background: var(--stats-success);
}

.stats-warning-list li::before,
.stats-model-list-warning li::before {
    background: var(--stats-warning);
}

.stats-summary-quality-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.stats-summary-quality-head span {
    display: block;
    color: var(--stats-muted);
    font-size: 10.5px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.stats-summary-quality-head strong {
    display: block;
    margin-top: 2px;
    color: var(--stats-text);
    font-size: 12.75px;
    font-weight: 850;
    line-height: 1.2;
}

.stats-summary-quality-score {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 5px 7px;
    text-align: center;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 11px;
}

.stats-summary-quality-score b,
.stats-summary-quality-score small {
    display: block;
}

.stats-summary-quality-score b {
    color: var(--stats-text);
    font-size: 13.5px;
    font-weight: 850;
}

.stats-summary-quality-score small {
    color: var(--stats-muted);
    font-size: 10px;
    font-weight: 750;
}

.stats-summary-quality p {
    margin-top: 8px;
}

.stats-summary-responsible-note {
    padding: 9px 10px;
    color: var(--stats-muted);
    background: rgba(255, 255, 255, .75);
    border: 1px dashed var(--stats-border-strong);
    border-radius: 11px;
}

/* ==========================================================================
   PROBABILIDADES
   ========================================================================== */

.stats-prob-row {
    margin: 8px 0 0;
}

.stats-prob-row:first-of-type {
    margin-top: 7px;
}

.stats-prob-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin-bottom: 4px;
}

.stats-prob-row-head span,
.stats-prob-row-head b {
    font-size: 12px;
    line-height: 1.2;
}

.stats-prob-row-head span {
    color: var(--stats-text-2);
    font-weight: 700;
}

.stats-prob-row-head b {
    color: var(--stats-text);
    font-weight: 850;
}

.stats-prob-bar {
    position: relative;
    height: 7px;
    overflow: hidden;
    background: #e8edf3;
    border-radius: 999px;
}

.stats-prob-bar span {
    display: block;
    height: 100%;
    min-width: 3px;
    background: linear-gradient(90deg, var(--stats-primary), var(--stats-primary-2));
    border-radius: inherit;
}

/* ==========================================================================
   CALIDAD DE ANÁLISIS
   ========================================================================== */

.stats-analysis-quality {
    border-left: 4px solid var(--stats-primary);
}

.stats-analysis-quality.is-high {
    border-left-color: var(--stats-success);
}

.stats-analysis-quality.is-medium {
    border-left-color: var(--stats-warning);
}

.stats-analysis-quality.is-low {
    border-left-color: var(--stats-danger);
}

.stats-analysis-quality-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.stats-analysis-quality-head span {
    color: var(--stats-muted);
    font-size: 10.5px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.stats-analysis-quality-head b {
    color: var(--stats-text);
    font-size: 12.6px;
    font-weight: 850;
    line-height: 1.2;
    text-align: right;
}

.stats-analysis-quality-main-text,
.stats-analysis-quality-advice,
.stats-analysis-quality-line,
.stats-analysis-note {
    margin: 6px 0 0;
    color: var(--stats-text-2);
    font-size: 12.2px;
    line-height: 1.4;
}

.stats-analysis-quality-advice {
    color: var(--stats-primary);
    font-weight: 700;
}

.stats-analysis-chip-row,
.stats-model-source-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.stats-analysis-chip,
.stats-model-source-chips span,
.stats-pill {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 4px 7px;

    color: var(--stats-text-2);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.12;

    background: #f0f3f7;
    border: 1px solid var(--stats-border);
    border-radius: 999px;
}

.stats-analysis-chip.is-ok,
.stats-model-source-chips span.is-ok {
    color: var(--stats-success);
    background: var(--stats-success-bg);
    border-color: rgba(15, 122, 74, .22);
}

.stats-analysis-chip.is-muted,
.stats-model-source-chips span.is-muted {
    color: var(--stats-muted);
    background: #f3f5f8;
}

.stats-analysis-reasons {
    margin-top: 9px;
    padding: 9px 10px;
    background: rgba(255, 255, 255, .72);
    border: 1px dashed var(--stats-border-strong);
    border-radius: 11px;
}

.stats-analysis-reasons strong {
    display: block;
    margin-bottom: 5px;
    font-size: 11.8px;
}

.stats-analysis-reasons ul {
    margin: 0;
    padding-left: 15px;
    color: var(--stats-text-2);
    font-size: 11.8px;
}

/* ==========================================================================
   DETAILS
   ========================================================================== */

.stats-summary-details,
.stats-model-details {
    overflow: hidden;
}

.stats-summary-details {
    margin: 0 0 10px;
}

.stats-summary-details summary,
.stats-model-details summary {
    padding: 11px 12px;
    color: var(--stats-text);
    font-size: 12.6px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.stats-summary-details summary::-webkit-details-marker,
.stats-model-details summary::-webkit-details-marker {
    display: none;
}

.stats-summary-details summary::after,
.stats-model-details summary::after {
    content: "+";
    float: right;
    color: var(--stats-primary);
    font-size: 16px;
    line-height: 1;
}

.stats-summary-details[open] summary::after,
.stats-model-details[open] summary::after {
    content: "−";
}

.stats-summary-details-body {
    padding: 0 12px 12px;
}

/* ==========================================================================
   FORMA RECIENTE / LOCAL-FUERA
   ========================================================================== */

.modern-data-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.modern-data-card {
    padding: 10px;
    background: var(--stats-surface);
    border: 1px solid var(--stats-border);
    border-radius: 12px;
    box-shadow: var(--stats-shadow-soft);
}

.modern-data-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;

    margin-bottom: 6px;
    padding-bottom: 6px;

    color: var(--stats-text);
    font-size: 11.8px;
    font-weight: 850;
    line-height: 1.2;

    border-bottom: 1px solid var(--stats-border);
}

.modern-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.modern-compare-item {
    padding: 8px;
    background: var(--stats-surface-soft);
    border: 1px solid var(--stats-border);
    border-radius: 10px;
}

.modern-compare-item span {
    display: block;
    color: var(--stats-muted);
    font-size: 10.25px;
    font-weight: 750;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.modern-compare-item b {
    display: block;
    margin-top: 3px;
    color: var(--stats-text);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.08;
}

.stats-mobile-only {
    display: none;
}

.stats-desktop-only {
    display: block;
}

/* ==========================================================================
   HISTÓRICO
   ========================================================================== */

.stats-h2h-layout {
    display: grid;
    gap: 10px;
}

.stats-h2h-mid-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 9px;
}

.stats-h2h-summary-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.stats-h2h-metric-item {
    padding: 8px;
    background: var(--stats-surface-soft);
    border: 1px solid var(--stats-border);
    border-radius: 10px;
}

.stats-h2h-metric-item.highlight {
    background: var(--stats-primary-soft);
    border-color: rgba(152, 19, 20, .18);
}

.stats-h2h-metric-item span {
    display: block;
}

.stats-h2h-metric-item span:first-child {
    color: var(--stats-muted);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.15;
}

.stats-h2h-metric-item span:last-child {
    margin-top: 3px;
    color: var(--stats-text);
    font-size: 13.5px;
    font-weight: 850;
    line-height: 1.1;
}

/* ==========================================================================
   TABLAS
   ========================================================================== */

.stats-recent-table-wrap,
.stats-h2h-matches-wrap,
.stats-bucket-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    background: #ffffff;
    border: 1px solid var(--stats-border);
    border-radius: 11px;
}

.stats-recent-table,
.stats-h2h-matches-table,
.stats-bucket-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;

    color: var(--stats-text-2);
    font-size: 11.5px;
}

.stats-bucket-table {
    min-width: 380px;
}

.stats-recent-table th,
.stats-recent-table td,
.stats-h2h-matches-table th,
.stats-h2h-matches-table td,
.stats-bucket-table th,
.stats-bucket-table td {
    padding: 7px 8px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--stats-border);
}

.stats-recent-table th,
.stats-h2h-matches-table th,
.stats-bucket-table th {
    color: var(--stats-text);
    font-size: 10.5px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: #f3f5f8;
}

.stats-recent-table tr:last-child td,
.stats-h2h-matches-table tr:last-child td,
.stats-bucket-table tr:last-child td {
    border-bottom: 0;
}

.stats-recent-table-form,
.col-score,
.col-sign {
    color: var(--stats-text);
    font-weight: 850;
    text-align: center;
}

.stats-bucket-table th:not(:first-child),
.stats-bucket-table td:not(:first-child),
.stats-h2h-matches-table .col-score,
.stats-h2h-matches-table .col-sign {
    text-align: center;
}

/* ==========================================================================
   HISTÓRICO · ÚLTIMOS ENFRENTAMIENTOS
   Mantiene formato tabla en escritorio y evita cortes verticales.
   ========================================================================== */

.stats-h2h-last-card {
    overflow: hidden;
}

.stats-h2h-matches-wrap {
    overflow: hidden;
    background: #ffffff;
}

.stats-h2h-matches-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.stats-h2h-matches-table th,
.stats-h2h-matches-table td {
    padding: 7px 6px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.stats-h2h-matches-table .stats-h2h-date-head,
.stats-h2h-matches-table .stats-h2h-date-cell {
    width: 76px;
}

.stats-h2h-matches-table .stats-h2h-match-head,
.stats-h2h-matches-table .stats-h2h-match-cell {
    width: auto;
}

.stats-h2h-matches-table .stats-h2h-result-head,
.stats-h2h-matches-table .stats-h2h-result-cell {
    width: 78px;
}

.stats-h2h-matches-table .stats-h2h-sign-head,
.stats-h2h-matches-table .stats-h2h-sign-cell {
    width: 54px;
}
.stats-h2h-match-cell {
    line-height: 1.22;
}

.stats-h2h-match-name {
    display: block;
    color: var(--stats-text);
    font-size: 11.45px;
    font-weight: 800;
    line-height: 1.22;
    overflow-wrap: break-word;
    word-break: normal;
}

.stats-h2h-league-inline {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-top: 3px;
    padding: 2px 6px;
    color: var(--stats-muted);
    font-size: 9.7px;
    font-weight: 750;
    line-height: 1.1;
    background: #f3f5f8;
    border: 1px solid var(--stats-border);
    border-radius: 999px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.stats-h2h-date-cell {
    color: var(--stats-text-2);
    font-size: 10.8px;
    font-weight: 700;
}

.stats-h2h-result-cell,
.stats-h2h-sign-cell {
    font-size: 11.5px;
    line-height: 1.1;
}

/* ==========================================================================
   TRANSPARENCIA / MODELO
   ========================================================================== */

.stats-model-layout-v2 {
    display: grid;
    gap: 10px;
}

.stats-model-topline {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
    gap: 9px;
    align-items: stretch;
}

.stats-model-conclusion-card {
    padding: 12px 13px;
    background: linear-gradient(135deg, rgba(152, 19, 20, .08), #ffffff 72%);
    border-color: rgba(152, 19, 20, .15);
}

.stats-model-conclusion-card strong {
    display: block;
    color: var(--stats-text);
    font-size: 13.7px;
    font-weight: 850;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.stats-model-conclusion-card p {
    margin: 6px 0 0;
    color: var(--stats-text-2);
    font-size: 12.2px;
    line-height: 1.42;
}

.stats-model-kpi-strip {
    align-self: stretch;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats-model-data-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .75fr);
    gap: 9px;
    align-items: center;
    padding: 12px 13px;
}

.stats-model-data-copy strong {
    display: block;
    margin-bottom: 5px;
    color: var(--stats-text);
    font-size: 12.7px;
    font-weight: 850;
}

.stats-model-data-copy p {
    margin: 0;
    color: var(--stats-text-2);
    font-size: 12.2px;
    line-height: 1.42;
}

.stats-model-source-chips {
    justify-content: flex-end;
    margin-top: 0;
}

.stats-model-signal-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.stats-model-signal-grid > div,
.stats-model-technical-grid > div {
    padding: 8px;
    background: var(--stats-surface-soft);
    border: 1px solid var(--stats-border);
    border-radius: 10px;
}

.stats-model-signal-grid > div.is-ok {
    border-color: rgba(15, 122, 74, .22);
}

.stats-model-signal-grid > div.is-muted {
    opacity: .8;
}

.stats-model-signal-grid span,
.stats-model-technical-grid span {
    display: block;
    color: var(--stats-muted);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.15;
}

.stats-model-signal-grid b,
.stats-model-technical-grid b {
    display: block;
    margin-top: 4px;
    color: var(--stats-text);
    font-size: 12.8px;
    font-weight: 850;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.stats-model-signal-grid small {
    display: block;
    margin-top: 5px;
    color: var(--stats-muted);
    font-size: 10.6px;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.stats-model-technical-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    padding: 0 12px 12px;
}

.stats-model-details p {
    padding: 0 12px 12px;
    color: var(--stats-muted);
    font-size: 11.8px;
}

/* ==========================================================================
   GOLES / PLENO
   ========================================================================== */

.stats-pill {
    margin: 2px;
}

.stats-bucket-table-redesign td:not(:first-child) {
    color: var(--stats-text);
    font-weight: 850;
}

/* ==========================================================================
   ADAPTACIÓN POR ANCHO REAL DEL POPUP
   ========================================================================== */

@container statsPopup (max-width: 680px) {
    .stats-summary-metric-grid,
    .stats-redesign-summary-grid,
    .stats-model-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-summary-two-col,
    .stats-model-decision-grid,
    .stats-h2h-mid-grid,
    .stats-model-topline,
    .stats-model-data-strip,
    .modern-data-list {
        grid-template-columns: 1fr;
    }

    .stats-model-source-chips {
        justify-content: flex-start;
    }

    .stats-model-signal-grid,
    .stats-model-technical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container statsPopup (max-width: 460px) {
    .stats-popup-top {
        padding: 11px 11px 9px;
    }

    .stats-popup-header,
    .stats-popup-header-redesign {
        padding-right: 36px;
    }

    .stats-popup-header h3,
    .stats-popup-header-redesign h3 {
        font-size: 15.5px;
    }

    .stats-popup-header p,
    .stats-popup-header-redesign p {
        font-size: 12px;
    }

    .stats-popup-close {
        top: 9px;
        right: 9px;
        width: 30px;
        height: 30px;
        font-size: 19px;
    }

    .stats-popup-tabs,
    .stats-popup-tabs-redesign {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin-top: 9px;
    }

    .stats-popup-tabs button,
    .stats-popup-tabs-redesign button {
        min-height: 33px;
        padding: 7px 8px;
        font-size: 10.8px;
        border-radius: 10px;
    }

    .stats-popup-body,
    .stats-popup-body-redesign {
        padding: 9px;
    }

    .stats-card,
    .stats-reading-box,
    .stats-form-card,
    .stats-human-comment,
    .stats-warning-box,
    .stats-summary-card,
    .stats-model-panel,
    .stats-model-details,
    .stats-summary-hero,
    .stats-summary-advice,
    .stats-summary-quality,
    .stats-model-conclusion-card {
        padding: 10px;
        border-radius: 12px;
    }

    .stats-summary-hero h4 {
        font-size: 15px;
    }

    .stats-summary-hero p,
    .stats-card p,
    .stats-reading-box p,
    .stats-form-card p,
    .stats-summary-card p,
    .stats-model-panel p {
        font-size: 12px;
    }

    .stats-metric-card,
    .stats-model-kpi-card {
        min-height: 60px;
        padding: 8px;
    }

    .stats-metric-card span,
    .stats-model-kpi-card span {
        font-size: 9.8px;
    }

    .stats-metric-card b,
    .stats-model-kpi-card b {
        font-size: 13.2px;
    }

    .modern-compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-model-signal-grid,
    .stats-model-technical-grid {
        grid-template-columns: 1fr;
    }

    .stats-mobile-only {
        display: grid;
    }

    .stats-desktop-only {
        display: none;
    }

    .stats-recent-table {
        min-width: 520px;
    }

    .stats-bucket-table {
        min-width: 370px;
    }
}

@container statsPopup (max-width: 340px) {
    .stats-popup-tabs,
    .stats-popup-tabs-redesign {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .stats-popup-tabs button,
    .stats-popup-tabs-redesign button {
        min-height: 27px;
        padding: 5px 4px;
        font-size: 9.2px;
        letter-spacing: -.04em;
    }

    .stats-summary-metric-grid,
    .stats-redesign-summary-grid,
    .stats-redesign-summary-grid-two,
    .stats-model-kpi-strip,
    .modern-compare-grid,
    .stats-h2h-summary-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-model-signal-grid,
    .stats-model-technical-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   FALLBACK RESPONSIVE PARA NAVEGADORES SIN CONTAINER QUERIES
   ========================================================================== */

@media (max-width: 605px) {
    #match-stats-popover.match-stats-popover {
        margin: 8px 8px 12px !important;
        width: auto !important;
        max-width: none !important;

        border: 2px solid rgba(152, 19, 20, .88) !important;
        border-radius: 12px !important;

        box-shadow:
            0 16px 35px rgba(15, 23, 42, .22),
            0 4px 12px rgba(15, 23, 42, .15) !important;

        overflow: hidden !important;
    }

    .stats-h2h-matches-wrap {
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .stats-h2h-matches-table,
    .stats-h2h-matches-table thead,
    .stats-h2h-matches-table tbody,
    .stats-h2h-matches-table tr,
    .stats-h2h-matches-table th,
    .stats-h2h-matches-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .stats-h2h-matches-table {
        border-collapse: separate;
        border-spacing: 0;
        font-size: 11.7px;
    }

    .stats-h2h-matches-table thead {
        display: none;
    }

    .stats-h2h-matches-table tbody {
        display: grid;
        gap: 8px;
    }

    .stats-h2h-matches-table tr {
        position: relative;
        padding: 9px 10px;
        background: #ffffff;
        border: 1px solid var(--stats-border);
        border-radius: 12px;
        box-shadow: var(--stats-shadow-soft);
    }

    .stats-h2h-matches-table td {
        padding: 0;
        border: 0;
        text-align: left;
    }

    .stats-h2h-matches-table .stats-h2h-date-cell {
        display: inline-flex;
        width: auto;
        margin-bottom: 6px;
        padding: 3px 7px;
        color: var(--stats-primary);
        font-size: 10.5px;
        font-weight: 850;
        line-height: 1;
        background: var(--stats-primary-soft);
        border-radius: 999px;
    }

    .stats-h2h-matches-table .stats-h2h-match-cell {
        margin-bottom: 8px;
    }

    .stats-h2h-match-name {
        font-size: 12.3px;
        line-height: 1.25;
    }

    .stats-h2h-league-inline {
        margin-top: 5px;
        font-size: 10.2px;
        line-height: 1.12;
        white-space: normal;
    }

    .stats-h2h-matches-table .stats-h2h-result-cell,
    .stats-h2h-matches-table .stats-h2h-sign-cell {
        display: grid;
        width: 100%;
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        padding-top: 6px;
        color: var(--stats-text-2);
        font-size: 11.7px;
        line-height: 1.25;
        border-top: 1px solid rgba(224, 229, 236, .75);
        text-align: left;
    }

    .stats-h2h-matches-table .stats-h2h-result-cell::before,
    .stats-h2h-matches-table .stats-h2h-sign-cell::before {
        content: attr(data-label);
        color: var(--stats-muted);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .025em;
    }

    .stats-h2h-matches-table .col-score,
    .stats-h2h-matches-table .col-sign {
        text-align: left;
    }

    .stats-popup-tabs,
    .stats-popup-tabs-redesign {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-summary-metric-grid,
    .stats-redesign-summary-grid,
    .stats-redesign-summary-grid-two,
    .stats-model-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-summary-two-col,
    .stats-model-decision-grid,
    .stats-h2h-mid-grid,
    .stats-model-topline,
    .stats-model-data-strip,
    .modern-data-list {
        grid-template-columns: 1fr;
    }

    .stats-model-signal-grid,
    .stats-model-technical-grid {
        grid-template-columns: 1fr;
    }

    .stats-mobile-only {
        display: grid;
    }

    .stats-desktop-only {
        display: none;
    }
}

@media (max-width: 380px) {
    .stats-popup-tabs,
    .stats-popup-tabs-redesign {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .stats-popup-tabs button,
    .stats-popup-tabs-redesign button {
        min-height: 27px;
        padding: 5px 4px;
        font-size: 9.2px;
        letter-spacing: -.04em;
    }

    .stats-summary-metric-grid,
    .stats-redesign-summary-grid,
    .stats-redesign-summary-grid-two,
    .stats-model-kpi-strip,
    .modern-compare-grid,
    .stats-h2h-summary-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-model-signal-grid,
    .stats-model-technical-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    #match-stats-popover.match-stats-popover.show,
    .stats-popup-loading::before {
        animation: none;
    }

    .stats-popup-close,
    .stats-popup-tabs button,
    .stats-popup-tabs-redesign button {
        transition: none;
    }
}
/* ==========================================================================
   AJUSTES MÓVILES EXCLUSIVOS
   ========================================================================== */
@media (max-width: 605px) {
    #match-stats-popover.match-stats-popover {
        margin: 8px 8px 12px !important;
        width: auto !important;
        max-width: none !important;

        border: 2px solid rgba(152, 19, 20, .88) !important;
        border-radius: 12px !important;

        box-shadow:
            0 16px 35px rgba(15, 23, 42, .22),
            0 4px 12px rgba(15, 23, 42, .15) !important;

        overflow: hidden !important;
    }

    /*
       Aire interior del popup.
       Esto es lo que evita que las tarjetas queden pegadas al perímetro rojo.
    */
    #match-stats-popover.match-stats-popover .stats-popup-body,
    #match-stats-popover.match-stats-popover .stats-popup-body-redesign {
        padding: 10px 10px 12px !important;
    }

    /*
       En móvil mantenemos tarjetas compactas, pero no pegadas ni cortadas.
       No quitamos sus bordes laterales para que respiren dentro del popup.
    */
    #match-stats-popover.match-stats-popover .stats-card,
    #match-stats-popover.match-stats-popover .stats-reading-box,
    #match-stats-popover.match-stats-popover .stats-form-card,
    #match-stats-popover.match-stats-popover .stats-warning-box,
    #match-stats-popover.match-stats-popover .stats-summary-card,
    #match-stats-popover.match-stats-popover .stats-summary-hero,
    #match-stats-popover.match-stats-popover .stats-summary-details,
    #match-stats-popover.match-stats-popover .modern-data-card {
        border-radius: 12px;
        border-left: 1px solid var(--stats-border);
        border-right: 1px solid var(--stats-border);
        box-shadow: var(--stats-shadow-soft);
    }

    /*
       Quitamos el padding extra que antes compensaba el cuerpo sin margen.
       Ahora el margen lo da .stats-popup-body.
    */
    #match-stats-popover.match-stats-popover .stats-summary-metric-grid,
    #match-stats-popover.match-stats-popover .stats-redesign-summary-grid,
    #match-stats-popover.match-stats-popover .stats-model-kpi-strip {
        padding: 0 !important;
    }
}

/* ==========================================================================
   HOMOLOGACIÓN ANCHO POPUP ESTADÍSTICAS CON QUINIGOL
   ========================================================================== */

/*
   El JS de Quiniela ya inserta el popup debajo del partido pulsado y añade
   .is-inline-flow / .is-inline-anchored.
   En Quiniela mantenemos overflow:hidden en el contenedor para que el fondo
   interior respete los bordes redondeados inferiores.
*/
.quiniela-ticket-table {
    overflow: visible;
}

#match-stats-popover.match-stats-popover.is-inline-flow,
#match-stats-popover.match-stats-popover.is-inline-anchored,
#match-stats-popover.match-stats-popover.is-mobile-inline.is-inline-flow {
    max-height: none !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 14px !important;
}

#match-stats-popover.match-stats-popover.is-inline-flow .stats-popup-body,
#match-stats-popover.match-stats-popover.is-inline-flow .stats-popup-body-redesign,
#match-stats-popover.match-stats-popover.is-inline-anchored .stats-popup-body,
#match-stats-popover.match-stats-popover.is-inline-anchored .stats-popup-body-redesign,
#match-stats-popover.match-stats-popover.is-mobile-inline.is-inline-flow .stats-popup-body,
#match-stats-popover.match-stats-popover.is-mobile-inline.is-inline-flow .stats-popup-body-redesign {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    border-radius: 0 0 12px 12px !important;
}

/*
   En Quinigol el ajuste móvil entra hasta 700px.
   En Quiniela lo igualamos, pero manteniendo overflow:hidden en el contenedor
   para que el borde inferior no quede cuadrado.
*/
@media (max-width: 700px) {
    #match-stats-popover.match-stats-popover {
        width: auto !important;
        max-width: none !important;
        margin: 8px 8px 12px !important;

        border: 2px solid rgba(152, 19, 20, .88) !important;
        border-radius: 12px !important;

        box-shadow:
            0 16px 35px rgba(15, 23, 42, .22),
            0 4px 12px rgba(15, 23, 42, .15) !important;

        overflow: hidden !important;
    }

    #match-stats-popover.match-stats-popover .stats-popup-body,
    #match-stats-popover.match-stats-popover .stats-popup-body-redesign {
        padding: 10px 10px 12px !important;
        border-radius: 0 0 10px 10px !important;
    }
}