.nl-widget {
    --nl-accent: #e8b84b;
    --nl-bg: #12182b;
    --nl-bg-alt: #1b2340;
    --nl-border: #2a3155;
    --nl-text: #e7e9f2;
    --nl-text-dim: #9aa1c2;
    --nl-verde: #3ecf6b;
    --nl-roja: #e2554f;
    background: var(--nl-bg);
    color: var(--nl-text);
    border-radius: 10px;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}
.nl-widget * { box-sizing: border-box; }

.nl-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--nl-border);
    margin-bottom: 18px;
    overflow-x: auto;
}
/* Los .nl-tab-btn son <button>: se sobre-especifican con !important para que
   el tema o los estilos globales de Elementor (hover/focus de botones, que en
   algunos temas es rosa/magenta) no se cuelen por encima de estos estilos. */
.nl-widget button.nl-tab-btn {
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    color: var(--nl-text-dim) !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
    padding: 0 0 12px 0;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0 !important;
}
.nl-widget button.nl-tab-btn:hover,
.nl-widget button.nl-tab-btn:focus,
.nl-widget button.nl-tab-btn:focus-visible {
    color: var(--nl-text) !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.nl-widget button.nl-tab-btn.is-active,
.nl-widget button.nl-tab-btn.is-active:hover,
.nl-widget button.nl-tab-btn.is-active:focus {
    color: var(--nl-text) !important;
    border-bottom-color: var(--nl-accent) !important;
}

.nl-panel { display: none; }
.nl-panel.is-active { display: block; }

.nl-scroll { width: 100%; overflow-x: auto; }

.nl-tabla, .nl-calendario, .nl-tabla-simple {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
    min-width: 480px;
}
/* La tabla de Estadísticas solo tiene 4 columnas cortas: con 480px de
   mínimo, las dos tablas lado a lado (goleadores + tarjetas) no cabían
   en anchos intermedios (por ejemplo, un móvil en horizontal) y volvía
   a aparecer scroll lateral. Con menos ancho mínimo, sí caben. */
.nl-tabla-simple {
    min-width: 300px;
}

/* Anchos de columna fijos por tipo de tabla: así todas las tablas del mismo
   tipo (por ejemplo, cada jornada del calendario) quedan perfectamente
   alineadas entre sí en vez de ajustarse al contenido de cada una. */
.nl-tabla--clasificacion th:nth-child(1) { width: 6%; }
.nl-tabla--clasificacion th:nth-child(2) { width: 32%; }
.nl-tabla--clasificacion th:nth-child(3),
.nl-tabla--clasificacion th:nth-child(4),
.nl-tabla--clasificacion th:nth-child(5),
.nl-tabla--clasificacion th:nth-child(6) { width: 7%; }
.nl-tabla--clasificacion th:nth-child(7),
.nl-tabla--clasificacion th:nth-child(8),
.nl-tabla--clasificacion th:nth-child(9) { width: 8%; }
.nl-tabla--clasificacion th:nth-child(10) { width: 10%; }

.nl-tabla--deportividad th:nth-child(1) { width: 6%; }
.nl-tabla--deportividad th:nth-child(2) { width: 40%; }
.nl-tabla--deportividad th:nth-child(3) { width: 16%; }
.nl-tabla--deportividad th:nth-child(4) { width: 12%; }
.nl-tabla--deportividad th:nth-child(5) { width: 14%; }
.nl-tabla--deportividad th:nth-child(6) { width: 12%; }

.nl-tabla-simple th:nth-child(1) { width: 6%; }
.nl-tabla-simple th:nth-child(2) { width: 40%; }
.nl-tabla-simple th:nth-child(3) { width: 34%; }
.nl-tabla-simple th:nth-child(4) { width: 20%; }

.nl-calendario th:nth-child(1) { width: 24%; }
.nl-calendario th:nth-child(2) { width: 14%; }
.nl-calendario th:nth-child(3) { width: 24%; }
.nl-calendario th:nth-child(4) { width: 12%; }
.nl-calendario th:nth-child(5) { width: 26%; }
.nl-tabla thead th, .nl-calendario thead th, .nl-tabla-simple thead th {
    background: var(--nl-bg-alt);
    color: var(--nl-text-dim);
    text-align: left;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.nl-tabla tbody td, .nl-calendario tbody td, .nl-tabla-simple tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--nl-border);
    white-space: normal;
    overflow-wrap: break-word;
}
.nl-tabla tbody tr:last-child td, .nl-calendario tbody tr:last-child td, .nl-tabla-simple tbody tr:last-child td {
    border-bottom: none;
}
.nl-pos { text-align: center; width: 30px; color: var(--nl-text-dim); }
.nl-equipo-col { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nl-nombre-equipo { font-weight: 600; }
.nl-pts { color: var(--nl-accent); font-weight: 700; }

.nl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    padding: 0 6px;
    border-radius: 5px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.nl-zona-verde { box-shadow: inset 3px 0 0 var(--nl-verde); }
.nl-zona-roja { box-shadow: inset 3px 0 0 var(--nl-roja); }

.nl-leyenda {
    margin-top: 14px;
    font-size: 12px;
    color: var(--nl-text-dim);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.nl-leyenda-verde { color: var(--nl-verde); }
.nl-leyenda-roja { color: var(--nl-roja); }

.nl-badge-nota {
    display: inline-block;
    border: 1px solid var(--nl-accent);
    color: var(--nl-accent);
    background: rgba(232, 184, 74, 0.08);
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    border-radius: 999px;
}

.nl-jornada { margin-bottom: 26px; }
.nl-jornada:last-child { margin-bottom: 0; }
.nl-jornada-titulo {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0 0 10px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}
.nl-jornada-fecha {
    font-size: 11px;
    font-weight: 600;
    color: var(--nl-text-dim);
    text-transform: uppercase;
}
.nl-jornada-estado {
    font-size: 10px;
    font-weight: 700;
    color: var(--nl-text-dim);
    text-transform: uppercase;
}
.nl-resultado { color: var(--nl-accent); font-weight: 700; }
.nl-campo-link { color: #7ea6e0; text-decoration: none; }
.nl-campo-link:hover { text-decoration: underline; }

.nl-estadisticas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}
@media (max-width: 700px) {
    .nl-estadisticas-grid { grid-template-columns: 1fr; }
}
.nl-col-titulo {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0 0 12px 0;
}

.nl-intro { color: var(--nl-text-dim); font-size: 13px; margin: 0 0 16px 0; }
.nl-nota-caja {
    margin-top: 16px;
    padding: 14px 16px;
    border-left: 3px solid var(--nl-accent);
    background: rgba(232, 184, 74, 0.06);
    color: var(--nl-text-dim);
    font-size: 12.5px;
    border-radius: 0 6px 6px 0;
}
.nl-vacio { color: var(--nl-text-dim); font-size: 13px; padding: 14px 0; text-align: center; }

@media (max-width: 480px) {
    .nl-widget { padding: 14px; }
    .nl-tabs { gap: 16px; }
}

/* ============================================================
   MÓVIL EN VERTICAL: seguimos siendo una tabla normal (con su
   cabecera), pero se ocultan las columnas menos esenciales para
   que quepa todo en una sola línea, sin scroll lateral. Al girar
   el móvil a horizontal (o en tablet/escritorio) ya hay ancho de
   sobra y se recupera la tabla completa con todas las columnas.
   ============================================================ */
@media (max-width: 640px) {
    .nl-scroll { overflow-x: visible; }

    /* Las 4 pestañas envuelven en dos líneas en vez de cortarse. */
    .nl-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        column-gap: 14px;
        row-gap: 10px;
    }
    .nl-widget button.nl-tab-btn {
        font-size: 12px;
        padding-bottom: 8px;
    }

    .nl-tabla, .nl-tabla-simple, .nl-calendario {
        min-width: 0;
        width: 100%;
        table-layout: auto;
        font-size: 12.5px;
    }
    .nl-tabla thead th, .nl-tabla-simple thead th, .nl-calendario thead th,
    .nl-tabla tbody td, .nl-tabla-simple tbody td, .nl-calendario tbody td {
        padding: 9px 6px;
    }
    .nl-equipo-col { gap: 6px; }
    .nl-badge { min-width: 26px; height: 20px; font-size: 10px; }

    /* Clasificación: solo #, Equipo, PJ, DG y Pts. */
    .nl-tabla--clasificacion th:nth-child(4),
    .nl-tabla--clasificacion th:nth-child(5),
    .nl-tabla--clasificacion th:nth-child(6),
    .nl-tabla--clasificacion th:nth-child(7),
    .nl-tabla--clasificacion th:nth-child(8),
    .nl-tabla--clasificacion td:nth-child(4),
    .nl-tabla--clasificacion td:nth-child(5),
    .nl-tabla--clasificacion td:nth-child(6),
    .nl-tabla--clasificacion td:nth-child(7),
    .nl-tabla--clasificacion td:nth-child(8) {
        display: none;
    }

    /* Deportividad: solo #, Equipo y Puntos. */
    .nl-tabla--deportividad th:nth-child(3),
    .nl-tabla--deportividad th:nth-child(4),
    .nl-tabla--deportividad th:nth-child(5),
    .nl-tabla--deportividad td:nth-child(3),
    .nl-tabla--deportividad td:nth-child(4),
    .nl-tabla--deportividad td:nth-child(5) {
        display: none;
    }

    /* Estadísticas (goleadores/tarjetas): solo #, nombre y el número. */
    .nl-tabla-simple th:nth-child(3),
    .nl-tabla-simple td:nth-child(3) {
        display: none;
    }

    /* Calendario: solo Local, Resultado y Visitante. */
    .nl-calendario th:nth-child(4),
    .nl-calendario th:nth-child(5),
    .nl-calendario td:nth-child(4),
    .nl-calendario td:nth-child(5) {
        display: none;
    }
}

/* Cuando hay más ancho -incluido el móvil en horizontal- se recupera
   la tabla completa de forma automática (no hace falta tocar nada). */