/* ==========================================================================
   torneos.css — sistema visual del sitio público
   --------------------------------------------------------------------------
   Se carga DESPUÉS de Bootstrap 5.3 y hace dos cosas:
     1. redefine los tokens (color, tipografía, radios) y los mapea a las
        variables de Bootstrap, para claro y oscuro;
     2. define las piezas propias del sitio: escudos, filas de partido,
        tablas de datos, tira de forma, chips.
   Regla: el acento (azul) nunca se usa para resultados. Verde/gris/rojo son
   ganó/empató/perdió, y amarillo/rojo saturados son las tarjetas.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */

:root {
    /* neutros con leve sesgo verde-gris */
    --t-bg:            #EDEFEB;
    --t-surface:       #FFFFFF;
    --t-surface-2:     #F5F7F3;
    --t-ink:           #11171A;
    --t-ink-2:         #3C464A;
    --t-muted:         #6B7679;
    --t-line:          #DCE0DA;
    --t-line-strong:   #C4CAC1;

    /* acento: azul de planilla */
    --t-accent:        #1746A2;
    --t-accent-ink:    #FFFFFF;
    --t-accent-soft:   #E7EDF8;
    --t-accent-hover:  #0F3278;

    /* resultado */
    --t-win:           #1E7F4E;
    --t-draw:          #8A8F93;
    --t-loss:          #B0392C;

    /* juego */
    --t-amarilla:      #EAB308;
    --t-roja:          #D33B2C;
    --t-vivo:          #D33B2C;

    --t-radius:        10px;
    --t-radius-sm:     6px;
    --t-shadow:        0 1px 2px rgba(17,23,26,.05), 0 6px 20px -12px rgba(17,23,26,.22);

    --t-fuente-titulo: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --t-fuente-texto:  'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --t-fuente-dato:   'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* mapeo a Bootstrap 5.3 */
    --bs-body-bg:           var(--t-bg);
    --bs-body-color:        var(--t-ink);
    --bs-body-font-family:  var(--t-fuente-texto);
    --bs-body-font-size:    .9375rem;
    --bs-border-color:      var(--t-line);
    --bs-secondary-color:   var(--t-muted);
    --bs-emphasis-color:    var(--t-ink);
    --bs-link-color:        var(--t-accent);
    --bs-link-hover-color:  var(--t-accent-hover);
    --bs-primary:           var(--t-accent);
    --bs-primary-rgb:       23, 70, 162;
    --bs-secondary-bg:      var(--t-surface-2);
    --bs-tertiary-bg:       var(--t-surface-2);
}

[data-bs-theme="dark"] {
    --t-bg:            #0D1113;
    --t-surface:       #151A1D;
    --t-surface-2:     #1B2124;
    --t-ink:           #E8EDE9;
    --t-ink-2:         #B9C2BD;
    --t-muted:         #8A948F;
    --t-line:          #242B2E;
    --t-line-strong:   #333C40;

    --t-accent:        #7BA5FF;
    --t-accent-ink:    #0D1113;
    --t-accent-soft:   #1B2534;
    --t-accent-hover:  #9BBBFF;

    --t-win:           #4CB380;
    --t-draw:          #8A948F;
    --t-loss:          #E0705F;
    --t-amarilla:      #F5CE3E;
    --t-roja:          #E0705F;
    --t-vivo:          #E0705F;

    --t-shadow:        0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);

    --bs-primary-rgb:  123, 165, 255;
}

/* ---------- 2. BASE ------------------------------------------------------ */

body {
    background: var(--t-bg);
    color: var(--t-ink);
    font-family: var(--t-fuente-texto);
    font-size: .9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: var(--t-fuente-titulo);
    letter-spacing: -.015em;
}
h1, .h1 { font-size: 1.625rem; font-weight: 700; }
h2, .h2 { font-size: 1.1875rem; font-weight: 700; }
h3, .h3 { font-size: .9375rem; font-weight: 600; }

a { color: var(--t-accent); text-decoration: none; }
a:hover { color: var(--t-accent-hover); }

.t-eyebrow {
    font-family: var(--t-fuente-dato);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--t-muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.t-mono { font-family: var(--t-fuente-dato); }
.t-num  { font-variant-numeric: tabular-nums; }

.t-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 12px;
}

/* ---------- 3. PANEL (card del sitio) ------------------------------------ */

.t-panel {
    background: var(--t-surface);
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    overflow: hidden;
}
.t-panel + .t-panel { margin-top: 14px; }
.t-panel-cuerpo { padding: 14px; }
.t-panel-pie {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid var(--t-line);
    font-size: 12px;
    color: var(--t-muted);
}

/* ---------- 4. ESCUDOS --------------------------------------------------- */
/* Clubes y torneos comparten la pieza: caja cuadrada, imagen contenida.
   Cuando no hay archivo cargado, la misma caja muestra las iniciales.       */

.escudo {
    width: 22px; height: 22px;
    flex: none;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}
.escudo-sm { width: 18px; height: 18px; }
.escudo-lg { width: 40px; height: 40px; }
.escudo-xl { width: 56px; height: 56px; }

/* en oscuro, placa clara detrás: hay escudos con mucho negro */
[data-bs-theme="dark"] .escudo {
    background-color: rgba(255,255,255,.90);
    border-radius: 5px;
    padding: 2px;
}

.escudo-txt {
    display: inline-grid;
    place-items: center;
    background: var(--t-accent-soft);
    color: var(--t-accent);
    border-radius: 5px;
    font-family: var(--t-fuente-dato);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: -.02em;
    padding: 0;
}
.escudo-txt.escudo-sm { font-size: 7px; }
.escudo-txt.escudo-lg { font-size: 13px; }
.escudo-txt.escudo-xl { font-size: 18px; }
[data-bs-theme="dark"] .escudo-txt { background: var(--t-accent-soft); padding: 0; }

.bandera {
    width: 15px; height: 11px;
    border-radius: 2px;
    flex: none;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
    vertical-align: middle;
}

/* Escudo de confederación en lugar de bandera: mismo ancho que la bandera
   para que los nombres queden alineados, sin recortar (son escudos, no
   rectángulos). */
.escudo-conf {
    width: 15px; height: 15px;
    flex: none;
    object-fit: contain;
    vertical-align: middle;
}
/* Varios escudos (FIFA, Conmebol, AFC, Concacaf) son azul oscuro sobre
   transparente: en modo oscuro no se ven sin un fondo claro. */
[data-bs-theme="dark"] .escudo-conf {
    background: #fff;
    border-radius: 3px;
    padding: 1px;
}

/* ---------- 5. NAVEGACIÓN ------------------------------------------------ */

.t-navbar {
    background: color-mix(in srgb, var(--t-surface) 88%, transparent);
    border-bottom: 1px solid var(--t-line);
}
/* El desenfoque va sólo en escritorio: backdrop-filter convierte a la barra en
   bloque contenedor de los position:fixed y le come la altura al panel lateral. */
@media (min-width: 992px) {
    .t-navbar { backdrop-filter: saturate(1.4) blur(10px); }
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .t-navbar { background: var(--t-surface); }
}
.t-navbar .navbar-brand {
    font-family: var(--t-fuente-titulo);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.02em;
    color: var(--t-ink);
    display: flex; align-items: center; gap: 9px;
}

/* Marca «La Planilla»: el logo es un SVG en linea, asi que toma currentColor y
   sigue al tema claro/oscuro sin necesidad de dos archivos. */
.t-navbar .navbar-brand .t-logo   { flex: 0 0 auto; }
.t-navbar .navbar-brand .t-marca  { font-size: 1.0625rem; white-space: nowrap; }
.t-navbar .navbar-brand .t-marca-bajada {
    font-family: var(--t-fuente-texto);
    font-weight: 500;
    font-size: .8125rem;
    letter-spacing: 0;
    color: var(--t-muted);
    white-space: nowrap;
    padding-left: 10px;
    border-left: 1px solid var(--t-line);
}

.t-navbar .navbar-nav { flex-wrap: wrap; }
.t-navbar .nav-link {
    color: var(--t-ink-2);
    font-size: .875rem;
    font-weight: 500;
    padding: .4rem .7rem;
    border-radius: var(--t-radius-sm);
}
.t-navbar .nav-link:hover,
.t-navbar .nav-link:focus { color: var(--t-ink); background: var(--t-surface-2); }
.t-navbar .nav-link.active,
.t-navbar .show > .nav-link { color: var(--t-accent); background: var(--t-accent-soft); font-weight: 600; }

.t-navbar .dropdown-menu {
    --bs-dropdown-bg: var(--t-surface);
    --bs-dropdown-link-color: var(--t-ink-2);
    --bs-dropdown-link-hover-bg: var(--t-surface-2);
    --bs-dropdown-link-hover-color: var(--t-ink);
    --bs-dropdown-border-color: var(--t-line);
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-shadow);
    max-height: 70vh;
    overflow-y: auto;
    font-size: .875rem;
}

.t-boton-icono {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-sm);
    background: var(--t-surface);
    color: var(--t-ink-2);
    cursor: pointer;
    flex: none;
    padding: 0;
}
.t-boton-icono:hover { background: var(--t-surface-2); color: var(--t-ink); }
/* Cambio de idioma (ES / EN): mismo botón, con el código en vez de ícono */
.t-idioma {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .72rem; font-weight: 500; letter-spacing: .02em;
    text-decoration: none;
}

.t-seg {
    display: inline-flex;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-sm);
    overflow: hidden;
    background: var(--t-surface);
}
.t-seg button {
    border: 0; background: transparent;
    padding: 5px 9px;
    font-size: 12px;
    color: var(--t-muted);
    cursor: pointer;
}
.t-seg button.activo { background: var(--t-accent-soft); color: var(--t-accent); font-weight: 600; }

/* barra del torneo elegido */
.t-barra-torneo {
    background: var(--t-surface-2);
    border-bottom: 1px solid var(--t-line);
}
.t-barra-torneo .t-barra-inner {
    display: flex; align-items: center; gap: 14px;
    min-height: 44px;
    flex-wrap: wrap;
}
.t-barra-torneo .t-barra-titulo {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: .84375rem;
    white-space: nowrap;
    color: var(--t-ink);
}
.t-barra-torneo .nav-link {
    padding: 5px 10px;
    border-radius: 99px;
    font-size: .8125rem;
    color: var(--t-muted);
    white-space: nowrap;
}
.t-barra-torneo .nav-link:hover { color: var(--t-ink); background: var(--t-surface); }
.t-barra-torneo .nav-link.active { background: var(--t-ink); color: var(--t-bg); font-weight: 600; }

/* ---------- 6. LISTA DE PARTIDOS ----------------------------------------- */

.t-grupo {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 14px;
    background: var(--t-surface-2);
    border-bottom: 1px solid var(--t-line);
    border-top: 1px solid var(--t-line);
}
.t-grupo:first-child { border-top: 0; }
.t-grupo .t-grupo-nombre {
    font-family: var(--t-fuente-titulo);
    font-weight: 600;
    font-size: .84375rem;
    color: var(--t-ink);
}
.t-grupo .t-sep { color: var(--t-line-strong); }

.t-partido {
    display: grid;
    grid-template-columns: 52px 1fr auto 1fr 96px;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--t-line);
    cursor: pointer;
    transition: background .12s ease;
}
.t-partido:last-child { border-bottom: 0; }
.t-partido:hover { background: var(--t-surface-2); }
.t-partido .t-hora {
    font-family: var(--t-fuente-dato);
    font-size: 12px;
    color: var(--t-muted);
    font-variant-numeric: tabular-nums;
}
.t-partido .t-equipo {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
    color: var(--t-ink-2);
}
.t-partido .t-equipo.local { justify-content: flex-end; text-align: right; }
.t-partido .t-equipo a { color: inherit; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-partido .t-equipo.gana { color: var(--t-ink); }
.t-partido .t-equipo.gana a { font-weight: 600; }

.t-marcador {
    font-family: var(--t-fuente-titulo);
    font-weight: 700;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    background: var(--t-surface-2);
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-sm);
    padding: 2px 10px;
    white-space: nowrap;
    color: var(--t-ink);
}
.t-marcador small { font-size: 11px; font-weight: 500; color: var(--t-muted); }
.t-partido .t-estado { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.t-partido .t-chevron { color: var(--t-line-strong); }

@media (max-width: 640px) {
    .t-partido {
        grid-template-columns: 1fr auto;
        grid-template-areas: "meta meta" "local marcador" "visita marcador";
        gap: 4px 10px;
        padding: 10px 12px;
    }
    .t-partido .t-hora { grid-area: meta; display: flex; align-items: center; gap: 8px; }
    .t-partido .t-equipo.local { grid-area: local; justify-content: flex-start; text-align: left; }
    .t-partido .t-equipo.visita { grid-area: visita; }
    .t-partido .t-marcador { grid-area: marcador; align-self: center; }
    .t-partido .t-estado { display: none; }
}

/* ---------- 7. CHIPS ----------------------------------------------------- */

.t-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--t-surface-2);
    color: var(--t-muted);
    border: 1px solid var(--t-line);
    white-space: nowrap;
}
.t-chip-acento { background: var(--t-accent-soft); color: var(--t-accent); border-color: var(--t-accent-soft); }
.t-chip-vivo   { background: var(--t-surface); color: var(--t-vivo); border-color: var(--t-vivo); }
.t-chip-vivo .t-punto {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--t-vivo);
    animation: t-latido 1.6s ease-in-out infinite;
}
@keyframes t-latido { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .t-chip-vivo .t-punto { animation: none } }

/* ---------- 8. TABLAS DE DATOS ------------------------------------------- */

.t-tabla-wrap { overflow-x: auto; }

table.t-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .84375rem;
    margin: 0;
    color: var(--t-ink);
}
table.t-tabla th {
    font-family: var(--t-fuente-dato);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--t-muted);
    font-weight: 500;
    text-align: right;
    padding: 9px 8px;
    border-bottom: 1px solid var(--t-line-strong);
    white-space: nowrap;
    background: var(--t-surface);
}
table.t-tabla th:nth-child(-n+2) { text-align: left; }
table.t-tabla td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--t-line);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
table.t-tabla td:nth-child(-n+2) { text-align: left; }
table.t-tabla tbody tr:hover { background: var(--t-surface-2); }
table.t-tabla td.t-pts { font-weight: 700; font-family: var(--t-fuente-titulo); }
table.t-tabla .t-nombre { display: flex; align-items: center; gap: 8px; font-weight: 500; }

/* franja de zona en la columna de posición */
.t-pos {
    position: relative;
    padding-left: 16px !important;
    color: var(--t-muted);
    font-family: var(--t-fuente-dato);
    font-size: 12px;
}
.t-pos::before {
    content: "";
    position: absolute; left: 0; top: 2px; bottom: 2px;
    width: 3px; border-radius: 2px;
    background: transparent;
}
tr.t-clasifica  .t-pos::before { background: var(--t-win); }
tr.t-repechaje  .t-pos::before { background: var(--t-accent); }
tr.t-desciende  .t-pos::before { background: var(--t-loss); }
/* zonas de copa de las ligas (orden de las clasificaciones del torneo) */
tr.t-zona-1 .t-pos::before, .t-referencia.t-zona-1 i { background: var(--t-win); }
tr.t-zona-2 .t-pos::before, .t-referencia.t-zona-2 i { background: var(--t-accent); }
tr.t-zona-3 .t-pos::before, .t-referencia.t-zona-3 i { background: #D08A12; }
tr.t-zona-4 .t-pos::before, .t-referencia.t-zona-4 i { background: #7A5AB8; }
.t-referencia.t-desciende i { background: var(--t-loss); }

/* tira de últimos resultados */
.t-forma { display: inline-flex; gap: 3px; }
.t-forma i {
    width: 15px; height: 15px; border-radius: 3px;
    display: grid; place-items: center;
    font-style: normal; font-size: 9px; font-weight: 700;
    font-family: var(--t-fuente-titulo);
    color: #fff;
}
.t-forma .g { background: var(--t-win); }
.t-forma .e { background: var(--t-draw); }
.t-forma .p { background: var(--t-loss); }

.t-referencia { display: inline-flex; align-items: center; gap: 6px; }
.t-referencia i { width: 3px; height: 13px; border-radius: 2px; display: block; }

/* tarjetas */
.t-tarjeta-a, .t-tarjeta-r {
    width: 9px; height: 13px; border-radius: 1.5px;
    display: inline-block; vertical-align: -1px;
}
.t-tarjeta-a { background: var(--t-amarilla); }
.t-tarjeta-r { background: var(--t-roja); }

/* ---------- 9. DENSIDAD -------------------------------------------------- */

body[data-densidad="compacto"] .t-partido { padding-block: 5px; }
body[data-densidad="compacto"] table.t-tabla td { padding-block: 4px; }
body[data-densidad="compacto"] .table > :not(caption) > * > * { padding-block: .25rem; }

/* ---------- 10. PIE ------------------------------------------------------ */

.t-pie {
    border-top: 1px solid var(--t-line);
    margin-top: 26px;
    padding: 18px 0;
    color: var(--t-muted);
    font-size: 12.5px;
    background: var(--t-surface);
}
.t-pie .t-pie-inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- 11. HEREDADO DE app.css -------------------------------------- */
/* Se conserva lo que las vistas todavía usan. */

.imgCircle { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.image-cropper { width: 50px; height: 50px; position: relative; overflow: hidden; border-radius: 50%; }

/* sin subrayado en enlaces, como venía el sitio */
a, a:hover { text-decoration: none; }

/* sin flechitas en los inputs numéricos */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ---------- 12. AGREGADOS DE LISTA --------------------------------------- */

.t-subgrupo {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 14px;
    background: var(--t-surface);
    border-bottom: 1px solid var(--t-line);
    color: var(--t-ink-2);
    font-size: .8125rem;
}
.t-subgrupo .t-dia-nombre { font-weight: 500; }
.t-subgrupo .t-dia-nombre::first-letter { text-transform: uppercase; }

.t-navdia {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap;
}
.t-navdia .form-control { max-width: 190px; text-align: center; }

/* compatibilidad con clases de Bootstrap 4 que quedaron en algunas vistas */
.float-right { float: right !important; }
.float-left  { float: left  !important; }
.table .thead-light th {
    color: var(--t-ink-2);
    background-color: var(--t-surface-2);
    border-color: var(--t-line);
}
.table .thead-dark th {
    color: var(--t-surface);
    background-color: var(--t-ink);
    border-color: var(--t-line-strong);
}
.profile-pic { display: inline; margin: 0 auto 0 -25%; height: 100%; width: auto; }


/* ---------- 13. DETALLE DE PARTIDO --------------------------------------- */

.t-marcador-grande {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    text-align: center;
    padding: 22px 16px 18px;
    background: linear-gradient(180deg, var(--t-surface-2), var(--t-surface));
    border-bottom: 1px solid var(--t-line);
}
.t-marcador-grande .t-lado {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.t-marcador-grande .t-lado b {
    font-family: var(--t-fuente-titulo);
    font-size: 1rem;
    font-weight: 600;
}
.t-marcador-grande .t-lado a { color: var(--t-ink); }
.t-marcador-cifra {
    font-family: var(--t-fuente-titulo);
    font-weight: 800;
    font-size: 2.75rem;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.t-meta-partido {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--t-line);
    font-size: 12.5px;
    color: var(--t-muted);
}
.t-meta-partido b { color: var(--t-ink-2); font-weight: 500; }

@media (max-width: 560px) {
    .t-marcador-grande { gap: 8px; padding: 18px 10px 14px; }
    .t-marcador-cifra { font-size: 2.125rem; }
}

/* la vista de detalle traía su propio <style>; esto lo reemplaza */
.t-detalle .nav-tabs,
.t-ficha-pagina .nav-tabs {
    border-bottom: 1px solid var(--t-line);
    gap: 2px;
    justify-content: center;
    margin-bottom: 0;
}
.t-detalle .nav-tabs .nav-link,
.t-ficha-pagina .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--t-muted);
    font-size: .875rem;
    padding: .6rem .8rem;
    background: transparent;
}
.t-detalle .nav-tabs .nav-link:hover,
.t-ficha-pagina .nav-tabs .nav-link:hover { color: var(--t-ink); }
.t-detalle .nav-tabs .nav-link.active,
.t-ficha-pagina .nav-tabs .nav-link.active {
    color: var(--t-ink);
    border-bottom-color: var(--t-accent);
    font-weight: 600;
    background: transparent;
}
.t-detalle .tab-content,
.t-ficha-pagina .tab-content {
    background: var(--t-surface);
    border: 1px solid var(--t-line);
    border-top: 0;
    border-radius: 0 0 var(--t-radius) var(--t-radius);
    padding: 14px;
}
.t-detalle .tab-content .table,
.t-ficha-pagina .tab-content .table { --bs-table-bg: transparent; margin-bottom: 0; }
.t-detalle .imgCircle,
.t-ficha-pagina .imgCircle {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 6px;
    border: 1px solid var(--t-line);
}
.t-detalle .table > :not(caption) > * > *,
.t-ficha-pagina .table > :not(caption) > * > * { border-color: var(--t-line); }

/* ==========================================================================
   14. TABLAS Y TARJETAS DE TODO EL SITIO
   Las ~35 vistas usan el mismo molde: .card > .card-body > table.table con
   thead.table-dark. Se redefine acá para que todas mejoren sin tocarlas.
   ========================================================================== */

.card {
    background: var(--t-surface);
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
}
.card-body { padding: 16px; }

.t-titulo {
    font-family: var(--t-fuente-titulo);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 16px;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--t-ink);
    --bs-table-border-color: var(--t-line);
    --bs-table-striped-bg: rgba(17, 23, 26, .028);
    --bs-table-striped-color: var(--t-ink);
    --bs-table-hover-bg: var(--t-surface-2);
    --bs-table-hover-color: var(--t-ink);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    border-color: var(--t-line);
    margin-bottom: 0;
}
[data-bs-theme="dark"] .table { --bs-table-striped-bg: rgba(255, 255, 255, .03); }
.table > :not(caption) > * > * { padding: .5rem .6rem; }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }

/* Cabeceras: casi todas las vistas usan thead.table-dark (barra negra) */
.table > thead.table-dark,
.table > thead.thead-light { --bs-table-bg: transparent; --bs-table-color: var(--t-muted); }
.table > thead.table-dark > tr > th,
.table > thead.table-dark > th,
.table > thead.thead-light > tr > th,
.table > thead.thead-light > th {
    background: var(--t-surface-2);
    color: var(--t-muted);
    font-family: var(--t-fuente-dato);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
    border-bottom: 1px solid var(--t-line-strong);
    border-top: 1px solid var(--t-line);
    white-space: nowrap;
    vertical-align: middle;
}
.table > thead.table-dark a,
.table > thead.table-dark a.text-white,
.table > thead.thead-light a { color: var(--t-muted) !important; }
.table > thead.table-dark a:hover,
.table > thead.table-dark a.text-white:hover { color: var(--t-ink) !important; }

/* Filas con color de Bootstrap. En estas tablas el color de fila SIGNIFICA algo
   (Libertadores, Sudamericana, descenso), así que se ve: tinte claro pero
   presente, más una franja del color al costado. Hay que pisar también las
   variantes striped y hover, o el rayado de Bootstrap vuelve a poner su color
   y en oscuro queda texto claro sobre fondo claro. */
.table > tbody > tr.table-success,
.table > tbody > tr.table-danger,
.table > tbody > tr.table-warning,
.table > tbody > tr.table-info,
.table > tbody > tr.table-primary,
.table > tbody > tr.table-secondary,
.table > tbody > tr.table-light {
    --bs-table-color: var(--t-ink);
    --bs-table-striped-color: var(--t-ink);
    --bs-table-hover-color: var(--t-ink);
    color: var(--t-ink);
}
.table > tbody > tr.table-success {
    --bs-table-bg: rgba(30, 127, 78, .15);
    --bs-table-striped-bg: rgba(30, 127, 78, .15);
    --bs-table-hover-bg: rgba(30, 127, 78, .24);
}
.table > tbody > tr.table-danger {
    --bs-table-bg: rgba(176, 57, 44, .15);
    --bs-table-striped-bg: rgba(176, 57, 44, .15);
    --bs-table-hover-bg: rgba(176, 57, 44, .24);
}
.table > tbody > tr.table-warning {
    --bs-table-bg: rgba(234, 179, 8, .20);
    --bs-table-striped-bg: rgba(234, 179, 8, .20);
    --bs-table-hover-bg: rgba(234, 179, 8, .30);
}
.table > tbody > tr.table-info,
.table > tbody > tr.table-primary {
    --bs-table-bg: rgba(23, 70, 162, .13);
    --bs-table-striped-bg: rgba(23, 70, 162, .13);
    --bs-table-hover-bg: rgba(23, 70, 162, .22);
}
.table > tbody > tr.table-secondary,
.table > tbody > tr.table-light {
    --bs-table-bg: rgba(107, 118, 121, .16);
    --bs-table-striped-bg: rgba(107, 118, 121, .16);
    --bs-table-hover-bg: rgba(107, 118, 121, .26);
}
[data-bs-theme="dark"] .table > tbody > tr.table-success  { --bs-table-bg: rgba(76, 179, 128, .17);  --bs-table-striped-bg: rgba(76, 179, 128, .17); }
[data-bs-theme="dark"] .table > tbody > tr.table-danger   { --bs-table-bg: rgba(224, 112, 95, .17);  --bs-table-striped-bg: rgba(224, 112, 95, .17); }
[data-bs-theme="dark"] .table > tbody > tr.table-warning  { --bs-table-bg: rgba(245, 206, 62, .17);  --bs-table-striped-bg: rgba(245, 206, 62, .17); }
[data-bs-theme="dark"] .table > tbody > tr.table-info,
[data-bs-theme="dark"] .table > tbody > tr.table-primary  { --bs-table-bg: rgba(123, 165, 255, .17); --bs-table-striped-bg: rgba(123, 165, 255, .17); }
[data-bs-theme="dark"] .table > tbody > tr.table-secondary,
[data-bs-theme="dark"] .table > tbody > tr.table-light    { --bs-table-bg: rgba(138, 148, 143, .20); --bs-table-striped-bg: rgba(138, 148, 143, .20); }

.table > tbody > tr.table-success   > td:first-child { box-shadow: inset 4px 0 0 var(--t-win); }
.table > tbody > tr.table-danger    > td:first-child { box-shadow: inset 4px 0 0 var(--t-loss); }
.table > tbody > tr.table-warning   > td:first-child { box-shadow: inset 4px 0 0 var(--t-amarilla); }
.table > tbody > tr.table-info      > td:first-child,
.table > tbody > tr.table-primary   > td:first-child { box-shadow: inset 4px 0 0 var(--t-accent); }
.table > tbody > tr.table-secondary > td:first-child,
.table > tbody > tr.table-light     > td:first-child { box-shadow: inset 4px 0 0 var(--t-muted); }

/* Las referencias de abajo de la tabla, con los mismos colores que las filas */
.badge { font-weight: 600; font-size: 11px; border-radius: 99px; padding: .35em .75em; }
.badge.bg-success   { background-color: var(--t-win) !important; color: #fff; }
.badge.bg-danger    { background-color: var(--t-loss) !important; color: #fff; }
.badge.bg-warning   { background-color: var(--t-amarilla) !important; color: #2A2100; }
.badge.bg-info,
.badge.bg-primary   { background-color: var(--t-accent) !important; color: var(--t-accent-ink); }
.badge.bg-secondary { background-color: var(--t-muted) !important; color: #fff; }

/* Los datos son enlaces en casi todas las tablas: que no griten en azul */
.table a { color: var(--t-ink-2); }
.table a:hover { color: var(--t-accent); text-decoration: underline; }

/* Imágenes dentro de tablas: escudos, fotos y banderas parejas */
.table td img { vertical-align: middle; }
.table td img[height="25"],
.table td img[height="20"],
.table td img[height="30"] {
    width: 24px; height: 24px !important;
    object-fit: contain;
}
[data-bs-theme="dark"] .table td img[height="25"],
[data-bs-theme="dark"] .table td img[height="20"],
[data-bs-theme="dark"] .table td img[height="30"] {
    background: rgba(255, 255, 255, .90);
    border-radius: 4px;
    padding: 1px;
}
.table td img[src$=".gif"] {
    width: 15px; height: 11px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
    background: none;
    padding: 0;
}
.table td img.imgCircle,
.table td .imgCircle {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--t-line);
    margin-right: 4px;
}

/* Botones: el verde estaba reservado para "ganó", así que "Volver" queda neutro */
.btn-success {
    --bs-btn-bg: var(--t-surface);
    --bs-btn-border-color: var(--t-line);
    --bs-btn-color: var(--t-ink-2);
    --bs-btn-hover-bg: var(--t-surface-2);
    --bs-btn-hover-border-color: var(--t-line-strong);
    --bs-btn-hover-color: var(--t-ink);
    --bs-btn-active-bg: var(--t-surface-2);
    --bs-btn-active-border-color: var(--t-line-strong);
    --bs-btn-active-color: var(--t-ink);
}
.btn-primary {
    --bs-btn-bg: var(--t-accent);
    --bs-btn-border-color: var(--t-accent);
    --bs-btn-color: var(--t-accent-ink);
    --bs-btn-hover-bg: var(--t-accent-hover);
    --bs-btn-hover-border-color: var(--t-accent-hover);
    --bs-btn-hover-color: var(--t-accent-ink);
}
.pagination { --bs-pagination-color: var(--t-ink-2); --bs-pagination-bg: var(--t-surface);
    --bs-pagination-border-color: var(--t-line); --bs-pagination-hover-bg: var(--t-surface-2);
    --bs-pagination-hover-color: var(--t-ink); --bs-pagination-active-bg: var(--t-accent);
    --bs-pagination-active-border-color: var(--t-accent); --bs-pagination-font-size: .84rem; }

/* utilidad para las tablas nuevas */
table.t-tabla td.t-izq, table.t-tabla th.t-izq { text-align: left; }
table.t-tabla td.t-centro, table.t-tabla th.t-centro { text-align: center; }

/* ==========================================================================
   15. MENÚ PRINCIPAL
   ========================================================================== */

.t-navbar .dropdown-menu {
    width: 330px;
    padding: 0 6px 6px;
}
.t-menu-buscador {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--t-surface);
    padding: 8px 2px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--t-line);
}
.t-menu-buscador .form-control { font-size: .8125rem; }
.t-navbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .38rem .5rem;
    border-radius: var(--t-radius-sm);
    white-space: normal;
}
.t-navbar .dropdown-item .t-anio {
    margin-left: auto;
    font-family: var(--t-fuente-dato);
    font-size: 10.5px;
    color: var(--t-muted);
    padding-left: 8px;
}
.t-navbar .dropdown-item.activo {
    background: var(--t-accent-soft);
    color: var(--t-accent);
    font-weight: 600;
}
.t-navbar .dropdown-item.activo .t-anio { color: var(--t-accent); }
.t-navbar .dropdown-menu .t-menu-vacio {
    padding: 10px 6px;
    color: var(--t-muted);
    font-size: .8125rem;
}

.t-navbar .dropdown-menu.t-menu-corto { width: auto; min-width: 210px; padding: 6px; }
.t-barra-torneo .dropdown-menu { min-width: 200px; padding: 6px; }
.t-barra-torneo .dropdown-item { border-radius: var(--t-radius-sm); padding: .35rem .5rem; font-size: .84rem; }

.t-panel-pie { align-items: center; }
.t-paginacion .pagination { margin: 0; }
.t-paginacion nav { display: flex; }

/* Los títulos en azul de Bootstrap quedaban gritando; el color se usa para otra cosa */
h1.text-primary, h2.text-primary, h3.text-primary,
h4.text-primary, h5.text-primary, h6.text-primary { color: var(--t-ink) !important; }

tr.t-desciende .t-pos::before { background: var(--t-loss); }

/* Tinte de zona en las tablas nuevas (además de la franja) */
table.t-tabla tr.t-clasifica  { background: rgba(30, 127, 78, .07); }
table.t-tabla tr.t-repechaje  { background: rgba(23, 70, 162, .06); }
table.t-tabla tr.t-desciende  { background: rgba(176, 57, 44, .08); }
table.t-tabla tr.t-clasifica:hover { background: rgba(30, 127, 78, .14); }
table.t-tabla tr.t-repechaje:hover { background: rgba(23, 70, 162, .13); }
table.t-tabla tr.t-desciende:hover { background: rgba(176, 57, 44, .15); }
[data-bs-theme="dark"] table.t-tabla tr.t-clasifica { background: rgba(76, 179, 128, .12); }
[data-bs-theme="dark"] table.t-tabla tr.t-repechaje { background: rgba(123, 165, 255, .12); }
[data-bs-theme="dark"] table.t-tabla tr.t-desciende { background: rgba(224, 112, 95, .13); }
/* Zonas de copa (ZonasTabla): mismo tinte suave que t-clasifica, con el color de su franja */
table.t-tabla tr.t-zona-1 { background: rgba(30, 127, 78, .07); }
table.t-tabla tr.t-zona-2 { background: rgba(23, 70, 162, .06); }
table.t-tabla tr.t-zona-3 { background: rgba(208, 138, 18, .08); }
table.t-tabla tr.t-zona-4 { background: rgba(122, 90, 184, .07); }
table.t-tabla tr.t-zona-1:hover { background: rgba(30, 127, 78, .14); }
table.t-tabla tr.t-zona-2:hover { background: rgba(23, 70, 162, .13); }
table.t-tabla tr.t-zona-3:hover { background: rgba(208, 138, 18, .15); }
table.t-tabla tr.t-zona-4:hover { background: rgba(122, 90, 184, .14); }
[data-bs-theme="dark"] table.t-tabla tr.t-zona-1 { background: rgba(76, 179, 128, .12); }
[data-bs-theme="dark"] table.t-tabla tr.t-zona-2 { background: rgba(123, 165, 255, .12); }
[data-bs-theme="dark"] table.t-tabla tr.t-zona-3 { background: rgba(232, 170, 60, .12); }
[data-bs-theme="dark"] table.t-tabla tr.t-zona-4 { background: rgba(170, 140, 230, .12); }

/* ==========================================================================
   16. FILA DE PARTIDO ANCHA (listados que mezclan torneos y años)
   Misma fila que el fixture, con dos columnas más: competencia y día.
   ========================================================================== */

.t-lista-partidos { display: block; }

.t-partido-ancho {
    grid-template-columns: minmax(140px, 210px) 88px 1fr auto 1fr 30px;
}
.t-partido-ancho.sin-torneo {
    grid-template-columns: 88px 1fr auto 1fr 30px;
}

.t-competencia {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
}
.t-competencia-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.t-competencia-nombre {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--t-ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.t-competencia-fecha {
    font-family: var(--t-fuente-dato);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--t-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.t-cuando {
    display: flex; flex-direction: column;
    font-family: var(--t-fuente-dato);
    font-size: 11.5px;
    color: var(--t-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}
.t-cuando-hora { color: var(--t-line-strong); }

.t-partido .t-equipo.propio a { font-weight: 700; color: var(--t-ink); }

@media (max-width: 820px) {
    .t-partido-ancho,
    .t-partido-ancho.sin-torneo {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "comp comp"
            "cuando cuando"
            "local marcador"
            "visita marcador";
        gap: 3px 10px;
        padding: 10px 12px;
    }
    .t-partido-ancho .t-competencia { grid-area: comp; }
    .t-partido-ancho .t-competencia-txt { flex-direction: row; gap: 8px; align-items: baseline; }
    .t-partido-ancho .t-cuando { grid-area: cuando; flex-direction: row; gap: 8px; }
    .t-partido-ancho .t-equipo.local { grid-area: local; justify-content: flex-start; text-align: left; }
    .t-partido-ancho .t-equipo.visita { grid-area: visita; }
    .t-partido-ancho .t-marcador { grid-area: marcador; align-self: center; }
    .t-partido-ancho .t-estado { display: none; }
}

/* Los subtítulos de colores de las estadísticas también gritaban */
h5.text-warning, h5.text-success, h5.text-info, h5.text-danger { color: var(--t-ink) !important; }

/* ==========================================================================
   17. MENÚS: buscador general, panel lateral y torneos por año
   ========================================================================== */

.t-buscador { position: relative; display: flex; align-items: center; }
.t-buscador .bi-search {
    position: absolute; left: 9px;
    color: var(--t-muted);
    font-size: 13px;
    pointer-events: none;
}
.t-buscador .form-control {
    padding-left: 28px;
    width: 230px;
    background: var(--t-surface-2);
    border-color: var(--t-line);
    font-size: .8125rem;
}
.t-buscador .form-control:focus {
    background: var(--t-surface);
    border-color: var(--t-accent);
    box-shadow: none;
}
.t-buscador.d-lg-none .form-control { width: 100%; }

/* panel lateral en celular; en escritorio Bootstrap lo vuelve barra normal */
.t-offcanvas { --bs-offcanvas-width: 310px; }
.offcanvas.t-offcanvas {
    background: var(--t-surface);
    color: var(--t-ink);
    border-left: 1px solid var(--t-line);
}
.t-offcanvas .offcanvas-header { border-bottom: 1px solid var(--t-line); }
@media (max-width: 991.98px) {
    .t-offcanvas .navbar-nav { gap: 2px; }
    .t-offcanvas .nav-link { padding: .5rem .6rem; }
    .t-offcanvas .dropdown-menu {
        width: 100% !important;
        border: 0;
        box-shadow: none;
        background: var(--t-surface-2);
        margin: 2px 0 6px;
        max-height: 46vh;
    }
}

/* torneos agrupados por año */
.t-menu-torneos { max-height: 72vh; }
.t-menu-grupo { padding-bottom: 4px; }
.t-menu-anio {
    position: sticky;
    top: 44px;
    z-index: 1;
    background: var(--t-surface);
    font-family: var(--t-fuente-dato);
    font-size: 10.5px;
    letter-spacing: .1em;
    color: var(--t-muted);
    padding: 6px 6px 3px;
    border-bottom: 1px solid var(--t-line);
    margin-bottom: 2px;
}
@media (max-width: 991.98px) {
    .t-menu-anio { background: var(--t-surface-2); top: 40px; }
}

/* ---------- resultados del buscador ---------- */

.t-resultados { display: block; }
.t-resultado {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--t-line);
    color: var(--t-ink);
}
.t-resultado:last-child { border-bottom: 0; }
.t-resultado:hover { background: var(--t-surface-2); color: var(--t-ink); }
.t-resultado-nombre { font-weight: 500; }
.t-resultado-dato {
    margin-left: auto;
    font-size: 12px;
    color: var(--t-muted);
}
.t-resultado .t-chevron { color: var(--t-line-strong); }
.t-resultado .t-resultado-dato + .t-chevron { margin-left: 8px; }
.t-resultado .imgCircle {
    width: 30px; height: 30px; border-radius: 50%;
    object-fit: cover; border: 1px solid var(--t-line);
}
.t-grupo .t-eyebrow { margin-left: auto; }

/* En escritorio la barra tiene que entrar en una sola línea: el contenedor de
   Bootstrap tope en 1320 px, así que los enlaces van justos y el buscador corto. */
@media (min-width: 992px) {
    .t-buscador .form-control { width: 172px; }
    .t-navbar .nav-link { padding: .4rem .5rem; font-size: .84rem; }
}
@media (min-width: 1500px) {
    .t-buscador .form-control { width: 210px; }
}


/* ==========================================================================
   15. FICHAS DE PROTAGONISTAS  (jugador · técnico · árbitro)
   Una sola cabecera para las tres, más la tira de números de carrera y la
   tabla temporada por temporada. Todo con los tokens del sistema, así que
   funciona igual en claro y en oscuro.
   ========================================================================== */

.t-ficha-pagina .nav-tabs { justify-content: flex-start; }

/* ---------- cabecera ---------- */

.t-ficha {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 18px;
    margin-bottom: 14px;
    background: linear-gradient(180deg, var(--t-surface-2), var(--t-surface));
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
}

.t-ficha-foto {
    width: 116px;
    height: 116px;
    border-radius: 14px;
    object-fit: cover;
    object-position: top center;
    background: var(--t-surface);
    border: 1px solid var(--t-line);
    display: block;
}

.t-ficha-nombre {
    font-family: var(--t-fuente-titulo);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.12;
    margin: 6px 0 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.t-ficha-nombre .bandera { width: 22px; height: 16px; }
.t-ficha-obito { opacity: .75; }

.t-ficha-sub {
    color: var(--t-muted);
    font-size: .875rem;
}

.t-ficha-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.t-dato {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 4px 10px;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    background: var(--t-surface);
    font-size: .8125rem;
    color: var(--t-ink);
    max-width: 100%;
}
.t-dato > span {
    font-family: var(--t-fuente-dato);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--t-muted);
    flex: none;
}
.t-dato > b { font-weight: 600; }

.t-ficha-obs {
    margin: 12px 0 0;
    padding-top: 11px;
    border-top: 1px solid var(--t-line);
    color: var(--t-ink-2);
    font-size: .875rem;
    line-height: 1.5;
    max-width: 72ch;
}

@media (max-width: 575.98px) {
    .t-ficha {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 14px;
    }
    .t-ficha-nombre { justify-content: center; font-size: 1.5rem; }
    .t-ficha-chips  { justify-content: center; }
    .t-ficha-obs    { text-align: left; }
}

/* ---------- tira de números de carrera ---------- */

.t-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 1px;
    background: var(--t-surface);
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    overflow: hidden;
    margin-bottom: 14px;
}
/* La separación la pinta cada celda (outline sobre el gap de 1px) y no el
   fondo del grid: si la última fila queda incompleta, el hueco no se ve. */
.t-kpi {
    background: var(--t-surface);
    padding: 12px 14px;
    min-width: 0;
    outline: 1px solid var(--t-line);
}
.t-kpi-num {
    font-family: var(--t-fuente-titulo);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.t-kpi-num small {
    font-size: .75rem;
    font-weight: 600;
    color: var(--t-muted);
    margin-left: 3px;
}
.t-kpi-rot {
    font-family: var(--t-fuente-dato);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--t-muted);
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.t-kpi-acento .t-kpi-num { color: var(--t-accent); }
.t-kpi-win    .t-kpi-num { color: var(--t-win); }
.t-kpi-loss   .t-kpi-num { color: var(--t-loss); }
.t-kpi-apagado .t-kpi-num { color: var(--t-muted); }

/* renglón de detalle debajo de la tira (desglose de títulos, etc.) */
.t-kpis-pie {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: -8px 0 14px;
    padding: 0 2px;
    font-size: 12.5px;
    color: var(--t-muted);
}
.t-kpis-pie b { color: var(--t-ink-2); font-weight: 600; }

/* Aclaración debajo de los totales de una ficha: la base no tiene toda la historia. */
.t-alcance {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -6px 0 16px;
    padding: 0 2px;
    font-size: 12px;
    color: var(--t-muted);
}
.t-alcance i { font-size: 12px; opacity: .8; }

/* ---------- barra G / E / P ---------- */

.t-ge {
    display: inline-flex;
    width: 62px;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--t-line);
    vertical-align: middle;
}
.t-ge i { display: block; height: 100%; }
.t-ge .g { background: var(--t-win); }
.t-ge .e { background: var(--t-draw); }
.t-ge .p { background: var(--t-loss); }

/* ---------- tabla temporada por temporada ---------- */

.t-tabla .t-torneo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--t-ink);
    white-space: nowrap;
}
.t-tabla .t-torneo:hover { color: var(--t-accent); }

.t-equipos-celda {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.t-equipo-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--t-ink-2);
}
.t-equipo-chip:hover { color: var(--t-accent); }

.t-ficha-pos {
    font-family: var(--t-fuente-dato);
    font-size: 10px;
    letter-spacing: .04em;
    color: var(--t-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.t-ficha-pos img { height: 13px; width: auto; }
.t-ficha-pos.t-campeon { color: var(--t-accent); font-weight: 600; }

.t-tabla tfoot td,
.t-tabla tr.t-totales td { white-space: nowrap;
    border-top: 1px solid var(--t-line-strong);
    border-bottom: 0;
    font-weight: 700;
    background: var(--t-surface-2);
}
.t-tabla tr.t-totales:hover td { background: var(--t-surface-2); }

.t-prom {
    color: var(--t-muted);
    font-size: 11.5px;
    margin-left: 3px;
    font-variant-numeric: tabular-nums;
}

.t-cero { color: var(--t-line-strong); }

/* ---------- vacíos ---------- */

.t-vacio {
    padding: 26px 16px;
    text-align: center;
    color: var(--t-muted);
    font-size: .875rem;
}
.t-vacio .bi { font-size: 1.5rem; display: block; margin-bottom: 6px; opacity: .5; }


/* ---------- 15.b FICHA DE CLUB ------------------------------------------- */

/* El escudo NO se recorta como una foto: entra entero en la misma caja. */
.t-ficha-foto.t-ficha-escudo {
    object-fit: contain;
    object-position: center;
    padding: 8px;
    background: var(--t-surface);
}

/* Texto largo (historia del club): ancho de lectura y aire entre renglones. */
.t-prosa {
    max-width: 74ch;
    line-height: 1.7;
    color: var(--t-ink-2);
    margin: 0;
}
.t-prosa strong, .t-prosa b { color: var(--t-ink); }

/* Encabezados que ordenan la tabla */
table.t-tabla th a {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
table.t-tabla th a:hover { color: var(--t-ink); }
table.t-tabla th.t-orden-activo a { color: var(--t-accent); }
table.t-tabla th .bi { font-size: 10px; }

/* Nombre de jugador dentro de una tabla */
.t-persona-celda {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}
.t-persona-celda img {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--t-line);
    flex: none;
}
.t-persona-celda a { color: var(--t-ink); font-weight: 500; }
.t-persona-celda a:hover { color: var(--t-accent); }

/* Pie de las listas paginadas */
.t-pie-lista {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--t-muted);
}
.t-pie-lista .pagination { margin: 0; }

/* ---------- 16. LISTADO DE TÉCNICOS -------------------------------------- */
/* La columna "Equipos" traía todos los clubes con puntos y % en texto y hacía
   filas de 400 px. Ahora la fila muestra sólo escudos y el detalle vive en una
   fila que se abre con el botón "+N". */

.t-lista-busqueda { display: flex; gap: 8px; }
.t-lista-busqueda input[type="search"] { width: 220px; }

/* mosaico de la tira que además filtra */
a.t-kpi-enlace { color: inherit; display: block; }
a.t-kpi-enlace:hover { background: var(--t-surface-2); color: inherit; }
a.t-kpi-enlace .t-kpi-rot::after {
    content: " \203A"; /* › : evita depender del font de iconos */
    font-size: 12px;
    opacity: .55;
}

.t-lista-filtros {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: -4px 0 12px;
}
.t-lista-filtros .t-chip .bi { font-size: 10px; }
.t-lista-ayuda {
    font-size: 11.5px;
    color: var(--t-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ---------- celda del técnico ---------- */

.t-lista-tabla .t-persona-celda { align-items: center; }
.t-lista-txt {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.t-lista-nombre { display: inline-flex; align-items: center; gap: 6px; }
.t-lista-nombre a { color: var(--t-ink); font-weight: 500; }
.t-lista-nombre a:hover { color: var(--t-accent); }
/* .t-persona-celda img redondea a 30 px CUALQUIER imagen de la celda y se comia
   la banderita: acá se la devuelve al tamaño del resto del sitio. */
.t-persona-celda .t-lista-txt .bandera,
.t-lista-tabla .t-persona-celda .bandera {
    width: 15px; height: 11px;
    border-radius: 2px;
    border: 0;
}
.t-lista-sub {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--t-fuente-dato);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t-muted);
}
.t-lista-punto {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--t-win);
    display: inline-block;
    flex: none;
}

/* ---------- efectividad y diferencia ---------- */

.t-lista-ef {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.t-lista-ef b { font-weight: 600; }
.t-lista-ef-pista {
    display: block;
    width: 46px; height: 3px;
    border-radius: 2px;
    background: var(--t-line);
    overflow: hidden;
}
.t-lista-ef-pista i { display: block; height: 100%; background: var(--t-accent); }

td.t-dif-pos { color: var(--t-win); }
td.t-dif-neg { color: var(--t-loss); }

/* ---------- columna de equipos ---------- */

.t-lista-escudos {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
.t-lista-mas {
    border: 1px solid var(--t-line);
    background: var(--t-surface-2);
    color: var(--t-muted);
    border-radius: 99px;
    font-family: var(--t-fuente-dato);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 8px;
    min-width: 26px;
    cursor: pointer;
    flex: none;
}
.t-lista-mas:hover { color: var(--t-accent); border-color: var(--t-accent-soft); }
.t-lista-mas.activo {
    background: var(--t-accent-soft);
    border-color: var(--t-accent-soft);
    color: var(--t-accent);
}
.t-lista-mas.activo .bi { transform: rotate(180deg); }
.t-lista-mas .bi { display: inline-block; font-size: 10px; transition: transform .15s ease; }

/* ---------- fila desplegable con el detalle por club ---------- */

.t-lista-detalle > td {
    background: var(--t-surface-2);
    box-shadow: inset 3px 0 0 var(--t-accent-soft);
    padding: 10px 12px 12px 24px !important;
    text-align: left !important;
}
.t-lista-clubes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 4px 16px;
}
.t-lista-club {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 7px;
    color: var(--t-ink-2);
    font-size: 12.5px;
    min-width: 0;
}
.t-lista-club:hover { background: var(--t-surface); color: var(--t-accent); }
.t-lista-club-nom {
    font-weight: 500;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.t-lista-club-dato {
    margin-left: auto;
    font-family: var(--t-fuente-dato);
    font-size: 11px;
    color: var(--t-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .t-lista-busqueda { width: 100%; }
    .t-lista-busqueda input[type="search"] { width: auto; flex: 1; }
    .t-lista-clubes { grid-template-columns: 1fr; }
}

/* números de tarjetas en la tira de KPIs */
.t-kpi-num.t-num-amarilla { color: var(--t-amarilla); }
.t-kpi-num.t-num-roja     { color: var(--t-roja); }

/* tarjetita al lado del número, en la tabla de Tarjetas */
.t-lista-tabla .t-tarjeta-a,
.t-lista-tabla .t-tarjeta-r { margin-right: 3px; }

/* ---------- 17. LISTADOS DE EQUIPOS -------------------------------------- */

/* celda de equipo: escudo + nombre + bandera del país */
.t-equipo-celda {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}
.t-equipo-celda a { color: var(--t-ink); font-weight: 500; }
.t-equipo-celda a:hover { color: var(--t-accent); }

/* rótulo que agrupa chips de filtro ("Torneo", "Ámbito") */
.t-lista-rot {
    font-family: var(--t-fuente-dato);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--t-muted);
    margin-left: 6px;
}
.t-lista-filtros > .t-lista-rot:first-child { margin-left: 0; }

/* selector compacto dentro de la barra de filtros (zona, competencia, país) */
.t-lista-select {
    max-width: 240px;
    padding: 2px 24px 2px 8px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--t-ink);
    background: var(--t-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23888' stroke-width='2' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center / 10px;
    border: 1px solid var(--t-line);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.t-lista-select:focus { outline: 2px solid var(--t-accent-soft); outline-offset: 1px; }
@media (max-width: 575px) { .t-lista-select { max-width: 100%; } }

/* reparto de títulos: ligas / copas / internacionales */
.t-reparto {
    display: inline-flex;
    width: 62px;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--t-line);
    vertical-align: middle;
}
.t-reparto i { display: block; height: 100%; }
.t-reparto .l, .t-ref-liga  { background: var(--t-accent); }
.t-reparto .c, .t-ref-copa  { background: var(--t-win); }
.t-reparto .n, .t-ref-inter { background: var(--t-amarilla); }

.t-lista-ayuda .t-referencia { margin-left: 12px; }
.t-lista-ayuda .t-referencia i { width: 3px; height: 11px; border-radius: 2px; display: block; }

/* ---------- historial cara a cara ---------- */

.t-duelo-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.t-duelo-form select { min-width: 220px; }
.t-duelo-vs {
    font-family: var(--t-fuente-titulo);
    font-weight: 700;
    color: var(--t-muted);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .08em;
}

.t-duelo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 20px 18px;
}
.t-duelo-lado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--t-ink);
    text-align: center;
    min-width: 0;
}
.t-duelo-lado:hover { color: var(--t-accent); }
.t-duelo-nombre { font-weight: 600; font-size: .9375rem; }

.t-duelo-centro { text-align: center; min-width: 200px; }
.t-duelo-marcador {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    font-family: var(--t-fuente-titulo);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.t-duelo-marcador .g { color: var(--t-win); }
.t-duelo-marcador .e { color: var(--t-draw); }
.t-duelo-marcador .p { color: var(--t-loss); }
.t-duelo-rot {
    font-family: var(--t-fuente-dato);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--t-muted);
    margin: 7px 0 9px;
}
.t-duelo-pie { font-size: 12.5px; color: var(--t-muted); margin-top: 8px; }
.t-ge.t-ge-ancha { width: 100%; height: 6px; }

@media (max-width: 575.98px) {
    .t-duelo { grid-template-columns: 1fr; gap: 14px; }
    .t-duelo-form select { min-width: 0; width: 100%; }
}

/* ==========================================================================
   16. MENÚ TORNEOS POR PAÍS / REGIÓN (panel grande) y página /competiciones
   Clases compartidas: .t-mega-zona, .t-mega-comp, .t-mega-anio… se usan en
   el desplegable (armado por torneos.js) y en torneos/explorar.blade.php.
   ========================================================================== */

.t-navbar > .container { position: relative; }

.t-navbar .dropdown-menu.t-mega {
    padding: 0;
    overflow: hidden;
    max-height: none;
    font-size: .875rem;
}
.t-navbar .dropdown-menu.t-mega.show { display: flex; flex-direction: column; }

@media (min-width: 992px) {
    /* el panel se centra en la barra, no bajo el ítem */
    .t-navbar .t-nav-mega { position: static; }
    .t-navbar .dropdown-menu.t-mega {
        left: 50%;
        transform: translateX(-50%);
        top: 100%;
        margin-top: 2px;
        width: min(880px, calc(100vw - 32px));
        height: min(620px, calc(100vh - 90px));
    }
}

.t-mega-cabeza {
    padding: 10px 12px;
    border-bottom: 1px solid var(--t-line);
    display: flex; flex-direction: column; gap: 8px;
}
.t-mega-buscador {
    display: flex; align-items: center; gap: 8px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-sm);
    background: var(--t-surface-2);
    color: var(--t-muted);
}
.t-mega-buscador:focus-within { border-color: var(--t-accent); background: var(--t-surface); }
.t-mega-buscador input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    padding: 7px 0;
    font-size: .875rem;
    color: var(--t-ink);
}

.t-mega-recientes { display: flex; align-items: center; gap: 8px; min-width: 0; }
.t-mega-recientes[hidden] { display: none; }
.t-mega-chips {
    display: flex; gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}
.t-mega-chips::-webkit-scrollbar { display: none; }
.t-mega-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px 3px 4px;
    border: 1px solid var(--t-line);
    border-radius: 99px;
    background: var(--t-surface);
    color: var(--t-ink-2);
    font-size: .78rem;
    white-space: nowrap;
    flex: none;
}
.t-mega-chip:hover { background: var(--t-accent-soft); color: var(--t-accent); border-color: transparent; }

.t-mega-rot {
    font-family: var(--t-fuente-dato);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-muted);
    padding: 10px 10px 4px;
    white-space: nowrap;
}
.t-mega-recientes .t-mega-rot { padding: 0; }

.t-mega-cuerpo { display: flex; flex: 1; min-height: 0; }

.t-mega-zonas {
    width: 220px;
    flex: none;
    overflow-y: auto;
    background: var(--t-surface-2);
    border-right: 1px solid var(--t-line);
    padding: 4px 6px 10px;
}
.t-mega-zonas .t-mega-rot:first-child { padding-top: 6px; }
.t-mega-zonas .t-mega-rot { white-space: normal; line-height: 1.35; }
.t-mega-zona {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--t-radius-sm);
    background: transparent;
    color: var(--t-ink-2);
    font-size: .84rem;
    text-align: left;
    cursor: pointer;
}
.t-mega-zona:hover { background: var(--t-surface); color: var(--t-ink); }
.t-mega-zona.activo { background: var(--t-accent-soft); color: var(--t-accent); font-weight: 600; }
.t-mega-zona .bi { width: 15px; text-align: center; color: var(--t-muted); }
.t-mega-zona.activo .bi { color: var(--t-accent); }
.t-mega-zona-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-mega-cuenta {
    font-family: var(--t-fuente-dato);
    font-size: 10.5px;
    color: var(--t-muted);
    font-weight: 400;
}

.t-mega-lista {
    flex: 1; min-width: 0;
    overflow-y: auto;
    padding: 0 14px 12px;
}
.t-mega-lista-cab {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 0 8px;
    margin-bottom: 2px;
    background: var(--t-surface);
    border-bottom: 1px solid var(--t-line);
}
.t-mega-lista-cab .bi { color: var(--t-muted); }
.t-mega-lista-titulo {
    font-family: var(--t-fuente-titulo);
    font-weight: 700;
    font-size: .95rem;
    color: var(--t-ink);
}
.t-mega-lista-link { margin-left: auto; font-size: .78rem; white-space: nowrap; }
.t-mega-volver {
    display: none;
    border: 0; background: transparent;
    padding: 2px 4px 2px 0;
    color: var(--t-ink-2);
}
.t-mega-lista > .t-mega-rot { padding-left: 2px; }

.t-mega-comp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 14px;
    padding: 7px 2px;
    border-bottom: 1px solid var(--t-line);
}
.t-mega-comp:last-child { border-bottom: 0; }
.t-mega-comp-nombre {
    display: flex; align-items: center; gap: 9px;
    min-width: 0;
    color: var(--t-ink);
    font-weight: 500;
}
.t-mega-comp-nombre:hover { color: var(--t-accent); }
.t-mega-comp-txt { display: flex; flex-direction: column; min-width: 0; }
.t-mega-comp-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-mega-comp-zona {
    display: flex; align-items: center; gap: 5px;
    font-size: .75rem; font-weight: 400;
    color: var(--t-muted);
}
.t-mega-comp-zona .bi { font-size: 11px; }

.t-mega-anios {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px;
    max-width: 400px;
}
.t-mega-anio {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--t-line);
    border-radius: 99px;
    background: var(--t-surface);
    color: var(--t-ink-2);
    font-family: var(--t-fuente-dato);
    font-size: 11.5px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
}
.t-mega-anio:hover { background: var(--t-accent-soft); color: var(--t-accent); border-color: transparent; }
.t-mega-anio.activo { background: var(--t-accent); color: var(--t-accent-ink); border-color: var(--t-accent); }
.t-mega-anio[hidden] { display: none; }
.t-mega-mas { border-style: dashed; color: var(--t-muted); }

.t-mega-historicas { margin-top: 8px; }
.t-mega-toggle {
    display: flex; align-items: center; gap: 4px;
    width: 100%;
    border: 0; background: transparent;
    padding: 8px 2px;
    color: var(--t-muted);
    font-size: .8125rem;
    text-align: left;
}
.t-mega-toggle:hover { color: var(--t-ink); }
.t-mega-toggle .bi { transition: transform .15s ease; }
.t-mega-toggle[aria-expanded="true"] .bi { transform: rotate(90deg); }

.t-mega-aviso { padding: 18px 2px; color: var(--t-muted); font-size: .84rem; }

.t-mega-pie {
    border-top: 1px solid var(--t-line);
    padding: 8px 14px;
    text-align: right;
    font-size: .8125rem;
}

/* celular: dentro del panel lateral, primero países y al tocar uno sus torneos */
@media (max-width: 991.98px) {
    /* .navbar-nav tiene flex-wrap: sin esto el ítem toma el ancho de su contenido */
    .t-offcanvas .t-nav-mega { width: 100%; min-width: 0; }
    .t-offcanvas .dropdown-menu.t-mega {
        max-height: none;
        background: var(--t-surface);
        border: 1px solid var(--t-line) !important;
        border-radius: var(--t-radius);
    }
    .t-mega-cabeza { padding: 8px; }
    .t-mega-cuerpo { display: block; }
    .t-mega-zonas { width: auto; border-right: 0; background: transparent; padding: 0 4px 6px; }
    .t-mega-lista { display: none; padding: 0 10px 10px; overflow: visible; }
    .t-mega--detalle .t-mega-zonas { display: none; }
    .t-mega--detalle .t-mega-lista { display: block; }
    .t-mega-lista-cab { position: static; }
    .t-mega-volver { display: inline-flex; }
    .t-mega-comp { grid-template-columns: 1fr; }
    .t-mega-anios { justify-content: flex-start; max-width: none; padding-left: 29px; }
    .t-mega-pie { text-align: left; }
}

/* barra del torneo: país › torneo [temporada] */
.t-barra-torneo .t-barra-titulo { flex-wrap: wrap; row-gap: 4px; }
.t-barra-zona {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--t-muted);
    font-weight: 500;
}
.t-barra-zona:hover { color: var(--t-accent); }
.t-barra-sep { color: var(--t-line-strong); font-size: 11px; }
.t-barra-temporada {
    border: 1px solid var(--t-line-strong);
    border-radius: 99px;
    background: var(--t-surface);
    color: var(--t-ink);
    padding: 1px 9px;
    font-family: var(--t-fuente-dato);
    font-size: 12px;
    font-weight: 500;
}
.t-barra-temporada:hover { border-color: var(--t-accent); color: var(--t-accent); }
.t-barra-torneo .dropdown-menu.t-menu-temporadas {
    min-width: 120px;
    max-height: 50vh;
    overflow-y: auto;
    font-family: var(--t-fuente-dato);
}
.t-barra-torneo .t-menu-temporadas .dropdown-item.activo { background: var(--t-accent-soft); color: var(--t-accent); font-weight: 600; }

/* página /competiciones */
.t-explorar { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.t-explorar-zonas { padding: 4px 6px 10px; position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; }
.t-explorar-zonas a.t-mega-zona { text-decoration: none; }
.t-explorar-lista { padding: 0 16px 8px; }
.t-explorar .t-mega-anios { max-width: 60%; }
@media (max-width: 767.98px) {
    .t-explorar { grid-template-columns: 1fr; }
    .t-explorar-zonas { position: static; max-height: 240px; }
    .t-explorar .t-mega-comp { grid-template-columns: 1fr; }
    .t-explorar .t-mega-anios { justify-content: flex-start; max-width: none; padding-left: 29px; }
}

/* ---------- estadísticas totales ---------- */

.t-seccion { margin: 26px 0 10px; }
.t-graf-tit {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--t-ink-2);
    margin: 0 0 8px;
}
.t-graf { height: 220px; }
.t-graf-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.t-graf-grilla > .t-panel + .t-panel { margin-top: 0; }
.t-grilla-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 992px) { .t-grilla-2 { grid-template-columns: 1fr 1fr; } }

/* barras horizontales con rótulo y valor (marcadores, tipos de gol…) */
.t-barras { display: grid; gap: 7px; }
.t-barras-fila {
    display: grid;
    grid-template-columns: minmax(84px, 38%) 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
}
.t-barras-rot { color: var(--t-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-barras-pista {
    height: 8px;
    border-radius: 4px;
    background: var(--t-surface-2);
    overflow: hidden;
}
.t-barras-pista i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--t-accent); }
.t-barras-l i { background: var(--t-win); }
.t-barras-e i { background: var(--t-draw); }
.t-barras-v i { background: var(--t-loss); }
.t-barras-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--t-ink); text-align: right; min-width: 64px; }
.t-barras-val small { font-weight: 500; color: var(--t-muted); }
table.t-tabla th.t-orden-activo { color: var(--t-accent); }