/* ═══════════════════════════════════════════════════════════════
   Tennis Live Widget — Frontend Styles
   TST Design System v5.0 — Layout: carousel horizontal
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500;700&display=swap');

/* ══ TOKENS DS ══ */
.tlw-widget {
    --tst-white:       #FFFFFF;
    --tst-off-white:   #F7F6F2;
    --tst-paper:       #EFEFEA;
    --tst-ink-100:     #1A1A1A;
    --tst-ink-60:      #5C5C5C;
    --tst-ink-30:      #A8A8A8;
    --tst-ink-10:      #E4E3DC;
    --tst-brand:       #305180;
    --tst-brand-dark:  #1E3A5F;
    --tst-brand-mid:   #254368;
    --tst-brand-light: #D6E3F0;
    --tst-lime:        #E1FA59;
    --tst-lime-dark:   #B8CC30;
    --tst-gold:        #F5B021;
    --tst-live:        #E63946;
    --tst-wta:         #6A4C93;
    --tst-win:         #2A9D8F;
    --font-headline:   "DM Sans", "Helvetica Neue", Arial, sans-serif;
    --font-mono:       "DM Mono", "Courier New", monospace;
    --radius-sm:       4px;
    --radius-md:       8px;
    --radius-lg:       12px;
    --shadow-card:     0 1px 3px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.06);

    background: var(--tst-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    border: 1px solid var(--tst-ink-10);
    width: 100%;
    font-family: var(--font-headline);
    color: var(--tst-ink-100);
    -webkit-font-smoothing: antialiased;
}

/* ══ HEADER ══ */
.tlw-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 10px;
    border-bottom: 2px solid var(--tst-lime-dark);
    background: var(--tst-white);
}

.tlw-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tst-live);
    flex-shrink: 0;
    animation: tlw-pulse 1.4s ease-in-out infinite;
}
@keyframes tlw-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(.8); }
}

.tlw-widget-title {
    font-family: var(--font-headline);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tst-lime-dark);
    margin: 0;
    flex: 1;
}
.tlw-last-update {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--tst-ink-30);
}

/* ══ LOADING / EMPTY ══ */
.tlw-loading {
    display: flex; align-items: center; gap: 10px;
    padding: 32px 16px;
    font-size: 11px; font-weight: 700; color: var(--tst-ink-30);
    text-transform: uppercase; letter-spacing: .06em;
    justify-content: center;
}
.tlw-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--tst-ink-10);
    border-top-color: var(--tst-brand);
    border-radius: 50%;
    animation: tlw-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes tlw-spin { to { transform:rotate(360deg); } }

.tlw-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--tst-ink-30);
}
.tlw-empty-icon { font-size: 28px; display: block; margin-bottom: 8px; }

/* ══ CAROUSEL WRAPPER ══ */
.tlw-carousel-outer {
    background: var(--tst-brand-dark);
    position: relative;
}

/* Track scrollable */
.tlw-carousel-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tlw-carousel-track::-webkit-scrollbar { display: none; }

/* ══ SCORE CARD — exactamente DS ══ */
.tlw-score-card {
    flex: 0 0 280px;
    min-width: 280px;
    background: var(--tst-brand-dark);
    padding: 16px;
    scroll-snap-align: start;
    border-right: 1px solid rgba(255,255,255,.06);
    transition: background .15s;
    cursor: default;
    position: relative;
}
.tlw-score-card:last-child { border-right: none; }
.tlw-score-card:hover { background: var(--tst-brand-mid); }

/* Meta (estado + torneo) */
.tlw-card-meta {
    font-family: var(--font-headline);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(225,250,89,.65); /* --tst-lime con opacidad */
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tlw-card-meta-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--tst-live);
    flex-shrink: 0;
    animation: tlw-pulse 1.4s ease-in-out infinite;
}
.tlw-card-meta-label {
    color: rgba(225,250,89,.65);
}
.tlw-card-meta-sched {
    color: rgba(200,220,255,.5);
}

/* Filas de jugador — score-row del DS */
.tlw-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.tlw-score-row:last-child { margin-bottom: 0; }

/* Jugador — score-player del DS */
.tlw-score-player {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.tlw-score-flag { font-size: 15px; line-height: 1; flex-shrink: 0; }

/* score-name del DS */
.tlw-score-name {
    font-family: var(--font-headline);
    font-size: 12px;
    font-weight: 600;
    color: #E9F1F7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tlw-score-name--winner { color: #fff; font-weight: 800; }

.tlw-score-seed {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #A8A8A8;
    flex-shrink: 0;
}

/* Dot de saque */
.tlw-serve-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tst-lime);
    flex-shrink: 0;
}
.tlw-serve-dot--hidden { visibility: hidden; }

/* Sets — score-sets del DS */
.tlw-score-sets { display: flex; gap: 6px; align-items: center; }

/* score-set del DS */
.tlw-score-set {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: #E9F1F7;
    min-width: 14px;
    text-align: center;
}
/* score-set--w del DS → verde tst-win */
.tlw-score-set--won { color: var(--tst-win); }
/* Set en curso → rojo live */
.tlw-score-set--current { color: var(--tst-live); }

/* Game score (punto actual) */
.tlw-current-game {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: rgba(225,250,89,.8);
    min-width: 22px;
    text-align: center;
}

/* score-divider del DS */
.tlw-score-divider {
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: 8px 0;
}

/* ══ CONTROLES CAROUSEL ══ */
.tlw-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--tst-brand-dark);
    border-top: 1px solid rgba(255,255,255,.06);
}

/* Dots */
.tlw-carousel-dots {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1;
    justify-content: center;
}
.tlw-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    transition: background .2s, transform .2s;
    cursor: pointer;
    border: none;
    padding: 0;
}
.tlw-dot--active {
    background: var(--tst-lime);
    transform: scale(1.3);
}
.tlw-dot--live {
    background: var(--tst-live);
}

/* Botones prev / next */
.tlw-carousel-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.6);
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    line-height: 1;
}
.tlw-carousel-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.tlw-carousel-btn:disabled { opacity: .3; cursor: default; }

/* Contador de partidos */
.tlw-match-counter {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(255,255,255,.35);
    letter-spacing: .06em;
    min-width: 38px;
    text-align: right;
}

/* ══ DETALLE EXPANDIDO (PbP / Stats) ══ */
.tlw-match-detail-panel {
    background: var(--tst-white);
    border-top: 1px solid var(--tst-ink-10);
}

.tlw-tabs {
    display: flex;
    border-bottom: 1px solid var(--tst-ink-10);
    background: var(--tst-off-white);
}
.tlw-tab {
    font-family: var(--font-headline);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--tst-ink-60);
    padding: 10px 16px;
    cursor: pointer;
    border: none; background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.tlw-tab:hover { color: var(--tst-brand); }
.tlw-tab-active { color: var(--tst-brand); border-bottom-color: var(--tst-lime-dark); }

.tlw-tab-content { display: none; padding: 14px 16px; }
.tlw-tab-content.tlw-tab-active { display: block; }

/* Stats */
.tlw-stats-table { width: 100%; border-collapse: collapse; }
.tlw-stats-table td { padding: 6px 4px; vertical-align: middle; }
.tlw-stats-label {
    font-family: var(--font-headline); font-size: 10px;
    font-weight: 700; text-align: center;
    color: var(--tst-ink-60); text-transform: uppercase;
    letter-spacing: .06em; padding: 0 8px; white-space: nowrap;
}
.tlw-stats-val {
    font-family: var(--font-mono); font-size: 11px;
    font-weight: 700; color: var(--tst-ink-100);
    width: 30%;
}
.tlw-stats-val-home { text-align: right; }
.tlw-stats-val-away { text-align: left; }
.tlw-stat-bar-wrap { height: 3px; background: var(--tst-ink-10); border-radius: 2px; margin-top: 2px; }
.tlw-stat-bar { height: 3px; border-radius: 2px; }
.tlw-stat-bar-home { background: var(--tst-brand); float: right; }
.tlw-stat-bar-away { background: var(--tst-live); }

/* PbP */
.tlw-pbp-wrapper { display: flex; flex-direction: column; gap: 10px; }
.tlw-pbp-set-header {
    font-family: var(--font-headline); font-size: 10px;
    font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
    color: var(--tst-lime-dark); padding: 4px 0 2px;
    border-bottom: 1px solid var(--tst-ink-10);
}
.tlw-pbp-game {
    background: var(--tst-off-white);
    border-radius: var(--radius-sm);
    padding: 8px;
}
.tlw-pbp-game-header {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 10px; color: var(--tst-ink-60);
    margin-bottom: 6px;
}
.tlw-pbp-points { display: flex; gap: 4px; flex-wrap: wrap; }
.tlw-pbp-point {
    width: 20px; height: 20px; border-radius: 3px;
    font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
}
.tlw-pbp-point-home { background: var(--tst-brand-light); color: var(--tst-brand); }
.tlw-pbp-point-away { background: #f0eff0; color: var(--tst-ink-60); }
.tlw-pbp-point-ace  { background: var(--tst-lime-bg); color: var(--tst-lime-dark); }
.tlw-pbp-point-df   { background: #FDECEA; color: var(--tst-live); }

/* ══ RESPONSIVE ══ */
@media (max-width: 600px) {
    .tlw-score-card {
        flex: 0 0 calc(100vw - 32px);
        min-width: calc(100vw - 32px);
    }
}

@media (min-width: 601px) {
    .tlw-score-card {
        flex: 0 0 300px;
        min-width: 300px;
    }
}