/* TST — Widget Argentinos Hoy v3.0
   Implementa el patrón "arg-strip" del TST Design System v7
   ─────────────────────────────────────────────────────────── */

/* ── Outer: posición relativa para flechas ── */
.tst-arg-strip-outer {
    position: relative;
    margin-bottom: 32px;
}

/* ── Flechas de scroll ── */
.tst-arg-strip-arrow {
    display: none; /* JS las muestra cuando hay overflow */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 150ms;
    user-select: none;
    -webkit-user-select: none;
}
.tst-arg-strip-arrow:hover { background: var(--tst-brand); }
.tst-arg-strip-arrow--left  { left: -14px; }
.tst-arg-strip-arrow--right { right: -14px; }
.tst-arg-strip-arrow.visible { display: flex; }

/* ── Wrapper oscuro ── */
.tst-arg-strip-wrap {
    background: var(--tst-brand-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(225,250,89,.12);
}

/* ── Header ── */
.tst-arg-strip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(0,0,0,.18);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.tst-arg-strip-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tst-arg-strip-flag { font-size: 18px; line-height: 1; }
.tst-arg-strip-title {
    font-family: var(--font-headline);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
}
.tst-arg-strip-title span { color: var(--tst-lime); }
.tst-arg-strip-link {
    font-family: var(--font-headline);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tst-gold);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 150ms;
}
.tst-arg-strip-link:hover { opacity: .75; }

/* ── Scroll rail ── */
.tst-arg-strip-scroll {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.tst-arg-strip-scroll::-webkit-scrollbar { display: none; }

/* ── Tile individual ── */
.tst-ast-tile {
    flex: 0 0 210px;
    border-right: 1px solid rgba(255,255,255,.06);
    padding: 12px 14px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 150ms;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.tst-ast-tile:last-child { border-right: none; }
.tst-ast-tile:hover { background: rgba(255,255,255,.03); }

/* ── Tile header: torneo + estado ── */
.tst-ast-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

/* Tag de torneo con variantes de superficie */
.tst-ast-tournament-tag {
    font-family: var(--font-headline);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 7px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.tst-ast-tag--clay   { background: rgba(180,80,30,.25); color: #E8946A; border: 1px solid rgba(180,80,30,.3); }
.tst-ast-tag--hard   { background: rgba(48,81,128,.35); color: #A0C0E8; border: 1px solid rgba(48,81,128,.4); }
.tst-ast-tag--grass  { background: rgba(42,157,143,.2); color: #7ECEC6; border: 1px solid rgba(42,157,143,.3); }
.tst-ast-tag--indoor { background: rgba(100,76,147,.25); color: #C4A9E8; border: 1px solid rgba(100,76,147,.3); }
.tst-ast-tag--default{ background: rgba(255,255,255,.07); color: rgba(200,220,255,.6); border: 1px solid rgba(255,255,255,.1); }

/* Estado: en vivo / finalizado / hora / día+hora */
.tst-ast-status {
    font-family: var(--font-headline);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(200,220,255,.35);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}
.tst-ast-status--live {
    color: var(--tst-live);
    display: flex;
    align-items: center;
    gap: 4px;
}
.tst-ast-status-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--tst-live);
    animation: tst-ah-dot 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes tst-ah-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* Ronda */
.tst-ast-round {
    font-family: var(--font-headline);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(200,220,255,.3);
    text-transform: uppercase;
    margin-top: -4px;
}

/* ── Fila jugador ── */
.tst-ast-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.tst-ast-player-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.tst-ast-flag { font-size: 14px; flex-shrink: 0; line-height: 1; }
.tst-ast-name {
    font-family: var(--font-headline);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #E9F1F7;
}
/* Argentino: azul celeste, bold 800 */
.tst-ast-name--arg    { color: #A8CBEE; font-weight: 800; }
.tst-ast-name--winner { color: #fff; font-weight: 800; }
.tst-ast-name--loser  { color: rgba(233,241,247,.38); font-weight: 600; }

.tst-ast-seed {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(200,220,255,.3);
    flex-shrink: 0;
}

/* ── Sets ── */
.tst-ast-sets { display: flex; gap: 3px; flex-shrink: 0; }
.tst-ast-set {
    width: 22px; height: 22px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
}
.tst-ast-set--win   { background: var(--tst-win); color: #fff; }
.tst-ast-set--loss  { background: rgba(255,255,255,.08); color: rgba(233,241,247,.4); }
.tst-ast-set--live  { background: var(--tst-live); color: #fff; }
.tst-ast-set--empty { background: rgba(255,255,255,.05); color: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.08); }

/* ── Divider entre jugadores ── */
.tst-ast-divider {
    height: 1px;
    background: rgba(255,255,255,.06);
}

/* ── Estado vacío ── */
.tst-arg-strip-empty {
    padding: 32px 20px;
    text-align: center;
}
.tst-arg-strip-empty p {
    font-family: var(--font-headline);
    font-size: 12px;
    color: rgba(200,220,255,.3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0;
}

/* ── Skeleton loader ── */
.tst-arg-strip-loading {
    display: flex;
    gap: 0;
    padding: 14px 0;
}
.tst-arg-strip-skel {
    flex: 0 0 210px;
    padding: 12px 14px;
    border-right: 1px solid rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tst-arg-strip-skel-line {
    height: 10px;
    border-radius: 3px;
    background: rgba(255,255,255,.06);
    animation: tst-arg-skel 1.4s ease-in-out infinite alternate;
}
@keyframes tst-arg-skel {
    from { opacity: .4; }
    to   { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
    .tst-ast-status-dot,
    .tst-arg-strip-skel-line { animation: none; }
    .tst-ast-tile,
    .tst-arg-strip-link { transition-duration: .01ms !important; }
}