/* ==========================================================================
   FOSH API – Estilos v4.3.0
   Mobile-first. Paleta y fuentes originales 100% intactas.
   ========================================================================== */

:root {
    --fosh-bg:          #FFFFFF;
    --fosh-dark:        #081224;
    --fosh-dark-80:     rgba(8,18,36,.8);
    --fosh-dark-10:     rgba(8,18,36,.06);
    --fosh-dark-05:     rgba(8,18,36,.03);
    --fosh-red:         #E8000E;
    --fosh-red-soft:    rgba(232,0,14,.07);
    --fosh-border:      #E4E8EF;
    --fosh-border-lite: #F0F3F8;
    --fosh-row-alt:     #F7F9FC;
    --fosh-positive:    #1A7F37;
    --fosh-negative:    #C82020;
    --fosh-radius:      12px;
    --fosh-radius-sm:   7px;
    --fosh-shadow:      0 2px 16px rgba(8,18,36,.07);
    --fosh-font:        system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
    --fosh-font-mono:   'Bebas Neue',Impact,'Arial Narrow',sans-serif;
    --fosh-transition:  all 0.22s ease;
    --fosh-gold:        #F4B942;
    --fosh-silver:      #A8B5C2;
    --fosh-bronze:      #CD7F32;
    /* v4.3.0 */
    --fosh-ease-out:    cubic-bezier(.4,0,.2,1);
}

.fosh-widget *,
.fosh-widget *::before,
.fosh-widget *::after { box-sizing: border-box; }
.fosh-sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }

/* ── Widget container ────────────────────────────────────────────────────── */
.fosh-widget {
    background: var(--fosh-bg);
    border: 1px solid var(--fosh-border);
    border-radius: var(--fosh-radius);
    box-shadow: var(--fosh-shadow);
    overflow: hidden;
    font-family: var(--fosh-font);
    color: var(--fosh-dark);
    margin: 0 0 1.5rem 0;
    max-width: 100%;
    transition: box-shadow 0.3s var(--fosh-ease-out);
}
.fosh-widget:hover { box-shadow: 0 6px 28px rgba(8,18,36,.11); }

/* ── Label bar — premium (v4.3.0) ────────────────────────────────────────── */
/*
 * Diseño tipo componente nativo iOS/Android:
 * sombras multicapa sutiles, borde translúcido, highlight superior inset.
 * Sin fondos opacos pesados — el header vive "sobre" el widget.
 */
.fosh-widget__label-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px 10px;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,.95) 0%,
            rgba(248,249,252,.92) 100%);
    border-bottom: 1px solid rgba(8,18,36,.07);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 1px 0  rgba(8,18,36,.04),
        0 2px 8px rgba(8,18,36,.04);
    position: relative;
    z-index: 1;
}
.fosh-widget__label-text {
    font-family: var(--fosh-font-mono);
    font-size: .88rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fosh-dark);
    flex: 1;
}
.fosh-header-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--fosh-red);
    background: var(--fosh-red-soft);
    border: 1px solid rgba(232,0,14,.18);
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* ── Subheader ───────────────────────────────────────────────────────────── */
.fosh-widget__subheader {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--fosh-dark-05);
    border-bottom: 1px solid var(--fosh-border-lite);
    font-size: .78rem;
    min-height: 40px;
    flex-wrap: wrap;
}
.fosh-widget__subheader--today {
    background: linear-gradient(90deg, var(--fosh-red-soft) 0%, transparent 100%);
    border-bottom: 1px solid var(--fosh-border);
}
.fosh-widget__subtitle {
    font-size: .78rem;
    font-weight: 700;
    color: var(--fosh-dark-80);
    text-transform: uppercase;
    letter-spacing: .05em;
    flex: 1;
}
.fosh-widget__count {
    font-size: .7rem;
    font-weight: 600;
    color: var(--fosh-dark-80);
    background: var(--fosh-dark-10);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    margin-left: auto;
}
.fosh-stats__top-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    background: var(--fosh-red);
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    border-radius: 20px;
    text-transform: uppercase;
    margin-left: auto;
}

/* ── Título dinámico ─────────────────────────────────────────────────────── */
.fosh-widget-dynamic-title {
    margin: 0;
    padding: 6px 16px 8px;
    font-family: var(--fosh-font);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--fosh-dark-80);
    border-bottom: 1px solid var(--fosh-border-lite);
    transition: opacity 0.2s ease;
    min-height: 1.4em;
}
.fosh-widget-dynamic-title:empty { display: none; }

/* ── Selects premium (v4.3.0) ────────────────────────────────────────────── */
/*
 * appearance:none total — destruye el estilo del OS.
 * Flecha SVG inline como background-image.
 * Transiciones cubic-bezier + focus-ring con var(--fosh-red-soft).
 */
.fosh-dropdown-pair { display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex:1 1 auto; }

.fosh-tournament-select,
.fosh-category-select {
    flex: 1;
    min-width: 0;
    max-width: 320px;

    /* Destruir estilo del OS */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Fondo + flecha SVG */
    background-color: var(--fosh-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23081224' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 14px;

    /* Forma */
    border: 1.5px solid var(--fosh-border);
    border-radius: var(--fosh-radius-sm);
    box-shadow:
        0 1px 2px rgba(8,18,36,.04),
        inset 0 1px 0 rgba(255,255,255,.8);

    /* Tipografía */
    padding: 7px 32px 7px 11px;
    font-family: var(--fosh-font);
    font-size: .81rem;
    font-weight: 600;
    color: var(--fosh-dark);
    line-height: 1.4;
    cursor: pointer;
    outline: none;

    /* Transición refinada */
    transition:
        border-color 0.18s var(--fosh-ease-out),
        box-shadow   0.18s var(--fosh-ease-out),
        background-color 0.15s ease;
}
.fosh-tournament-select:hover,
.fosh-category-select:hover {
    border-color: rgba(8,18,36,.28);
    box-shadow:
        0 2px 8px rgba(8,18,36,.09),
        inset 0 1px 0 rgba(255,255,255,.8);
}
.fosh-tournament-select:focus,
.fosh-category-select:focus {
    border-color: rgba(232,0,14,.55);
    box-shadow:
        0 0 0 3px var(--fosh-red-soft),
        0 1px 3px rgba(8,18,36,.06),
        inset 0 1px 0 rgba(255,255,255,.8);
}
.fosh-tournament-select:disabled,
.fosh-category-select:disabled {
    opacity: .5;
    cursor: not-allowed;
    background-color: var(--fosh-dark-05);
}

/* ── AJAX Loading ────────────────────────────────────────────────────────── */
.fosh-ajax-loading { display:flex; align-items:center; gap:8px; padding:10px 16px; font-size:.81rem; color:var(--fosh-dark-80); background:var(--fosh-dark-05); border-bottom:1px solid var(--fosh-border-lite); }
.fosh-spinner { display:inline-block; width:13px; height:13px; border:2px solid var(--fosh-border); border-top-color:var(--fosh-dark); border-radius:50%; animation:fosh-spin 0.65s linear infinite; flex-shrink:0; }
@keyframes fosh-spin { to { transform: rotate(360deg); } }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.fosh-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fosh-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.fosh-table thead tr { background:var(--fosh-dark-05); border-bottom:2px solid var(--fosh-border); }
.fosh-table thead th {
    font-family: var(--fosh-font-mono); font-size:.83rem; letter-spacing:.07em;
    text-transform:uppercase; color:var(--fosh-dark-80);
    padding:8px 7px; text-align:center; white-space:nowrap; border:none; font-weight:400;
}
.fosh-table thead th.fosh-col--team,
.fosh-table thead th.fosh-col--player { text-align:left; padding-left:14px; }

.fosh-table tbody tr {
    border-bottom: 1px solid var(--fosh-border-lite);
    transition: background-color 0.15s var(--fosh-ease-out);
}
.fosh-table tbody tr:last-child { border-bottom:none; }
.fosh-table tbody tr:nth-child(even) { background:var(--fosh-row-alt); }
.fosh-table tbody tr:hover { background:rgba(8,18,36,.034); }
.fosh-table td { padding:8px 7px; text-align:center; vertical-align:middle; border:none; }

.fosh-col--pos   { width:34px; font-weight:700; color:var(--fosh-dark-80); }
.fosh-col--num   { width:36px; font-variant-numeric:tabular-nums; color:var(--fosh-dark-80); }
.fosh-col--pts   { width:42px; font-weight:800; font-size:.91rem; color:var(--fosh-dark); }
.fosh-col--team,
.fosh-col--player { text-align:left!important; padding-left:14px!important; font-weight:600; min-width:110px; vertical-align:middle; }
.fosh-col--team-sm { min-width:80px; font-weight:400; color:var(--fosh-dark-80); font-size:.81rem; }
.fosh-team-name { display:inline; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; vertical-align:middle; }

.fosh-row--leader { background:var(--fosh-red-soft)!important; border-left:3px solid var(--fosh-red); }
.fosh-badge--leader { display:inline-flex; align-items:center; justify-content:center; background:var(--fosh-red); color:#fff; font-weight:800; font-size:.72rem; width:22px; height:22px; border-radius:50%; }

.fosh-rank-badge { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-weight:800; font-size:.72rem; color:#fff; }
.fosh-rank--1 { background:var(--fosh-gold); color:#3d2e00; }
.fosh-rank--2 { background:var(--fosh-silver); color:#2a3540; }
.fosh-rank--3 { background:var(--fosh-bronze); }

.fosh-positive { color:var(--fosh-positive); font-weight:600; }
.fosh-negative { color:var(--fosh-negative); font-weight:600; }
.fosh-goals    { color:var(--fosh-red); }

.fosh-card { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; border-radius:3px; font-size:.74rem; font-weight:700; color:#fff; padding:0 3px; }
.fosh-card--yellow { background:#E6A817; }
.fosh-card--red    { background:var(--fosh-red); }
.fosh-card--green  { background:#22c55e; }

/* ── Escudos ─────────────────────────────────────────────────────────────── */
.fosh-crest { display:inline-block; vertical-align:middle; margin-right:8px; border-radius:2px; object-fit:contain; flex-shrink:0; width:22px; height:22px; }
.fosh-crest--lg { width:34px; height:34px; margin:0; border-radius:4px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 1px 3px rgba(0,0,0,.12)); }

/* ── Load More ───────────────────────────────────────────────────────────── */
.fosh-loadmore-wrap { padding:11px 16px; border-top:1px solid var(--fosh-border-lite); text-align:center; background:var(--fosh-dark-05); }
.fosh-btn-loadmore { display:inline-flex; align-items:center; gap:6px; padding:7px 18px; background:#fff; color:var(--fosh-dark); border:1.5px solid var(--fosh-border); border-radius:var(--fosh-radius-sm); font-family:var(--fosh-font); font-size:.8rem; font-weight:600; cursor:pointer; transition:var(--fosh-transition); }
.fosh-btn-loadmore:hover { background:var(--fosh-dark); color:#fff; border-color:var(--fosh-dark); }
.fosh-btn-icon { width:14px; height:14px; transition:transform 0.25s ease; flex-shrink:0; }
.fosh-btn-loadmore[aria-expanded="true"] .fosh-btn-icon { transform:rotate(180deg); }

/* ── Fixture Nav / Date Strip (v4.3.0) ───────────────────────────────────── */
/*
 * Los botones usan flex:1 para repartirse el ancho disponible igualitariamente,
 * con min-width para no colapsar y max-width para no estirarse demasiado.
 * Touch-target mínimo: 44px de alto (WCAG AA).
 */
.fosh-fixture__nav {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--fosh-border);
    background: var(--fosh-bg);
}
.fosh-fixture__date-strip {
    display: flex;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.fosh-fixture__date-strip::-webkit-scrollbar { display:none; }

.fosh-date-btn {
    /* Flex para distribución equitativa */
    flex: 1 1 0;          /* crecen en proporción igual */
    min-width: 52px;      /* no colapsan en móvil */
    max-width: 96px;      /* no se estiran en desktop con pocas fechas */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 6px;    /* reducido: touch-target sin exceso de aire */
    min-height: 44px;     /* WCAG touch size */

    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-family: var(--fosh-font);
    white-space: nowrap;
    color: var(--fosh-dark-80);
    transition:
        background-color 0.18s var(--fosh-ease-out),
        color            0.18s var(--fosh-ease-out),
        border-color     0.18s var(--fosh-ease-out);
}
.fosh-date-btn:hover {
    background: var(--fosh-dark-05);
    color: var(--fosh-dark);
}
.fosh-date-btn--active {
    border-bottom-color: var(--fosh-red);
    color: var(--fosh-red);
    font-weight: 700;
    background: var(--fosh-red-soft);
}
.fosh-date-btn__label {
    font-size: .69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.fosh-date-btn__count {
    font-size: .62rem;
    font-weight: 700;
    background: var(--fosh-dark-10);
    color: var(--fosh-dark-80);
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}
/*
 * Contraste accesible: sobre fondo rojo del botón activo,
 * el badge usa texto blanco sobre fondo rojo saturado.
 * Ratio ≥ 4.5:1 (WCAG AA). Borde blanco semitransparente para separación.
 */
.fosh-date-btn--active .fosh-date-btn__count {
    background: rgba(255,255,255,.22);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.35);
}

.fosh-datepicker {
    border: none;
    border-left: 1px solid var(--fosh-border);
    padding: 0 10px;
    background: var(--fosh-dark-05);
    color: var(--fosh-dark);
    font-family: var(--fosh-font);
    font-size: .76rem;
    cursor: pointer;
    flex-shrink: 0;
    outline: none;
    min-width: 38px;
    transition: background-color 0.15s ease;
}
.fosh-datepicker:hover { background: var(--fosh-dark-10); }

/* ── Fixture Tabs ────────────────────────────────────────────────────────── */
.fosh-fixture__tabs { display:flex; border-bottom:1px solid var(--fosh-border); }
.fosh-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--fosh-font);
    font-size: .79rem;
    font-weight: 600;
    color: var(--fosh-dark-80);
    cursor: pointer;
    transition:
        color            0.18s var(--fosh-ease-out),
        background-color 0.18s var(--fosh-ease-out),
        border-color     0.18s var(--fosh-ease-out);
    white-space: nowrap;
}
.fosh-tab:hover { color:var(--fosh-dark); background:var(--fosh-dark-05); }
.fosh-tab--active { color:var(--fosh-dark); border-bottom-color:var(--fosh-dark); }

/* Iconos SVG de tabs (reemplaza .fosh-tab__dot en v4.3.0) */
.fosh-tab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    opacity: .65;
    transition: opacity 0.18s ease;
}
.fosh-tab--active .fosh-tab__icon { opacity: 1; }

/* Dot legacy — mantenido por retrocompat */
.fosh-tab__dot { display:inline-block; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.fosh-tab__dot--done     { background:var(--fosh-positive); }
.fosh-tab__dot--upcoming { background:#3B82F6; }

.fosh-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--fosh-dark-10);
    border-radius: 20px;
    font-size: .67rem;
    font-weight: 700;
    color: var(--fosh-dark-80);
    transition: background-color 0.18s var(--fosh-ease-out), color 0.18s var(--fosh-ease-out);
}
.fosh-tab--active .fosh-tab__count { background:var(--fosh-dark); color:#fff; }

/* ── Fixture Content ─────────────────────────────────────────────────────── */
.fosh-fixture__content { min-height:50px; }
.fosh-fixture__empty,
.fosh-fixture__empty-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:32px 20px; color:var(--fosh-dark-80); text-align:center; }
.fosh-fixture__empty-icon { font-size:2rem; opacity:.3; }
.fosh-fixture__empty p, .fosh-fixture__empty-tab p { margin:0; font-size:.85rem; }

/* ── Match Card ──────────────────────────────────────────────────────────── */
.fosh-match {
    padding: 11px 16px;
    border-bottom: 1px solid var(--fosh-border-lite);
    transition: background-color 0.15s var(--fosh-ease-out);
}
.fosh-match:last-child { border-bottom:none; }
.fosh-match:hover      { background:var(--fosh-row-alt); }
.fosh-match--live      { border-left:3px solid var(--fosh-red); background:var(--fosh-red-soft); padding-left:13px; }
.fosh-match--live:hover { background:rgba(232,0,14,.1); }

.fosh-match__meta { display:flex; align-items:center; gap:5px; margin-bottom:9px; padding-bottom:7px; border-bottom:1px solid var(--fosh-border-lite); }
.fosh-match__round,
.fosh-match__cat { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--fosh-dark-80); background:var(--fosh-dark-10); padding:2px 6px; border-radius:3px; }
.fosh-match__sep { color:var(--fosh-dark-80); font-size:.65rem; }

.fosh-match__body { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }

.fosh-match__team--home { display:flex; align-items:center; gap:8px; justify-content:flex-end; overflow:hidden; min-width:0; }
.fosh-match__team--away { display:flex; align-items:center; gap:8px; justify-content:flex-start; overflow:hidden; min-width:0; }
.fosh-match__team-name { font-size:.89rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }

.fosh-match__center { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; min-width:90px; }

.fosh-match__live-badge { display:flex; align-items:center; gap:4px; font-size:.58rem; font-weight:800; color:var(--fosh-red); text-transform:uppercase; letter-spacing:.08em; }

/* Score box oscuro */
.fosh-match__score-box { display:flex; align-items:center; gap:0; background:var(--fosh-dark); border-radius:6px; padding:4px 0; min-width:72px; justify-content:center; }
.fosh-match__score-num { font-family:var(--fosh-font-mono); font-size:1.35rem; letter-spacing:.02em; line-height:1; color:#fff; min-width:24px; text-align:center; }
.fosh-match__score-sep { color:rgba(255,255,255,.32); font-family:var(--fosh-font-mono); font-size:1rem; padding:0 4px; line-height:1; }

/* Hora SCHEDULED */
.fosh-match__time { font-family:var(--fosh-font-mono); font-size:1.35rem; letter-spacing:.04em; line-height:1; color:var(--fosh-dark); background:var(--fosh-dark-10); border-radius:6px; padding:4px 9px; min-width:72px; text-align:center; }
.fosh-match__time--no-score { font-family:var(--fosh-font); font-size:.92rem; color:var(--fosh-dark-80); background:var(--fosh-dark-05); letter-spacing:0; }

.fosh-match__status { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--fosh-dark-80); margin-top:1px; }
.fosh-match__status--finished    { color:var(--fosh-positive); }
.fosh-match__status--in_progress { color:var(--fosh-red); }
.fosh-match__status--postponed   { color:#856404; }
.fosh-match__status--cancelled,
.fosh-match__status--suspended   { color:var(--fosh-negative); }

.fosh-match__venue { display:flex; align-items:center; gap:4px; font-size:.69rem; color:var(--fosh-dark-80); margin-top:8px; padding-top:7px; border-top:1px solid var(--fosh-border-lite); }

/* ── Live dot ────────────────────────────────────────────────────────────── */
.fosh-live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--fosh-red); animation:fosh-pulse 1.2s ease-in-out infinite; flex-shrink:0; }
@keyframes fosh-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.fosh-widget__footer { background:var(--fosh-dark-05); border-top:1px solid var(--fosh-border-lite); padding:5px 16px; text-align:right; }
.fosh-widget__footer small { font-size:.64rem; color:var(--fosh-dark-80); }

/* ── Error / Empty ───────────────────────────────────────────────────────── */
.fosh-widget--error { display:flex; align-items:flex-start; gap:12px; padding:16px 20px; background:#FFF5F5; border-color:var(--fosh-red); }
.fosh-widget--error p { margin:0; color:#9B1A1A; font-size:.86rem; }
.fosh-widget--empty .fosh-widget__empty-msg { padding:24px 20px; text-align:center; color:var(--fosh-dark-80); font-size:.88rem; margin:0; }

/* ==========================================================================
   CUSTOM SELECT (v4.4.0 – reemplaza <select> nativo en móvil)
   El <select> original queda oculto; el portal se appenda al <body>
   para escapar de cualquier overflow:hidden en ancestros.
   ========================================================================== */

.fosh-cs {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: 320px;
}

/* Ocultar el select nativo */
.fosh-cs select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/* Botón trigger */
.fosh-cs__trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 32px 7px 11px;
    position: relative;
    appearance: none;
    background-color: var(--fosh-bg);
    background: var(--fosh-bg);
    border: 1.5px solid var(--fosh-border);
    border-radius: var(--fosh-radius-sm);
    box-shadow:
        0 1px 2px rgba(8,18,36,.04),
        inset 0 1px 0 rgba(255,255,255,.8);
    font-family: var(--fosh-font);
    font-size: .81rem;
    font-weight: 600;
    color: var(--fosh-dark);
    line-height: 1.4;
    cursor: pointer;
    outline: none;
    text-align: left;
    transition:
        border-color     0.18s var(--fosh-ease-out),
        box-shadow       0.18s var(--fosh-ease-out),
        background-color 0.15s ease;
    min-height: 36px;
    white-space: nowrap;
    overflow: hidden;
}
.fosh-cs__trigger:hover {
    border-color: rgba(8,18,36,.28);
    box-shadow: 0 2px 8px rgba(8,18,36,.09), inset 0 1px 0 rgba(255,255,255,.8);
}
.fosh-cs--open .fosh-cs__trigger,
.fosh-cs__trigger:focus {
    border-color: rgba(232,0,14,.55);
    box-shadow:
        0 0 0 3px var(--fosh-red-soft),
        0 1px 3px rgba(8,18,36,.06),
        inset 0 1px 0 rgba(255,255,255,.8);
}
.fosh-cs--disabled .fosh-cs__trigger {
    opacity: .5;
    cursor: not-allowed;
    background-color: var(--fosh-dark-05);
    pointer-events: none;
}

.fosh-cs__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fosh-cs__arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
    color: var(--fosh-dark);
    transition: transform 0.18s var(--fosh-ease-out);
    flex-shrink: 0;
}
.fosh-cs--open .fosh-cs__arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* Portal dropdown (appended to body) */
.fosh-cs__portal {
    background: var(--fosh-bg);
    border: 1.5px solid var(--fosh-border);
    border-radius: var(--fosh-radius-sm);
    box-shadow:
        0 8px 32px rgba(8,18,36,.16),
        0 2px 8px  rgba(8,18,36,.08);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: fosh-portal-in 0.14s var(--fosh-ease-out) both;
    font-family: var(--fosh-font);
}
@keyframes fosh-portal-in {
    from { opacity: 0; transform: scaleY(.95); transform-origin: top center; }
    to   { opacity: 1; transform: scaleY(1); }
}

.fosh-cs__group {
    padding: 5px 12px 4px;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--fosh-dark-80);
    background: var(--fosh-dark-05);
    border-bottom: 1px solid var(--fosh-border-lite);
    position: sticky;
    top: 0;
    z-index: 1;
}

.fosh-cs__option {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: .81rem;
    font-weight: 500;
    color: var(--fosh-dark);
    cursor: pointer;
    min-height: 44px;   /* touch target mínimo WCAG AA */
    border-bottom: 1px solid var(--fosh-border-lite);
    line-height: 1.4;
    transition: background-color 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}
.fosh-cs__option:last-child { border-bottom: none; }
.fosh-cs__option:hover,
.fosh-cs__option:active { background: var(--fosh-dark-05); }

.fosh-cs__option--sel {
    background: var(--fosh-red-soft);
    font-weight: 700;
    color: var(--fosh-dark);
}
.fosh-cs__option--sel::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fosh-red);
    margin-left: auto;
    flex-shrink: 0;
}

/* En el dropdown-pair, los wrappers custom también toman flex:1 */
.fosh-dropdown-pair .fosh-cs { max-width: 320px; }

/* ==========================================================================
   DATEPICKER – botón icono calendario (v4.4.0)
   Resuelve la invisibilidad en iOS/Android:
   el <input type="date"> se posiciona absolute transparente
   sobre el wrapper visual, disparando el picker nativo al tocar.
   ========================================================================== */

.fosh-datepicker-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    min-height: 44px;
    background: var(--fosh-dark-05);
    border-left: 1px solid var(--fosh-border);
    cursor: pointer;
    transition: background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.fosh-datepicker-btn:hover { background: var(--fosh-dark-10); }
.fosh-datepicker-btn:active { background: rgba(8,18,36,.1); }

.fosh-datepicker-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fosh-dark);
    opacity: .72;
    pointer-events: none;
    position: relative;
    z-index: 0;
}

/* El input cubre todo el botón — invisible pero interactivo */
.fosh-datepicker-btn .fosh-datepicker {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    min-width: unset;
    /* font-size 16px evita el auto-zoom en iOS Safari */
    font-size: 16px;
    color: transparent;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .fosh-table { font-size:.81rem; }
    .fosh-table thead th, .fosh-table td { padding:7px 5px; }
    .fosh-col--team, .fosh-col--player { padding-left:10px!important; min-width:100px; }
    .fosh-table--standings th:nth-child(n+7),
    .fosh-table--standings td:nth-child(n+7) { display:none; }
    .fosh-match { padding:10px 14px; }
    .fosh-match--live { padding-left:11px; }
    .fosh-match__body { gap:7px; }
    .fosh-match__team-name { font-size:.85rem; }
    .fosh-match__score-box { min-width:66px; }
    .fosh-match__score-num { font-size:1.2rem; min-width:22px; }
    .fosh-match__score-sep { font-size:.9rem; padding:0 3px; }
    .fosh-match__time { font-size:1.2rem; padding:4px 7px; min-width:66px; }
    .fosh-match__center { min-width:78px; }
    .fosh-crest--lg { width:30px; height:30px; }
    .fosh-match__team--home,
    .fosh-match__team--away { gap:6px; }
    .fosh-tab { padding:8px 12px; font-size:.76rem; }
    .fosh-date-btn { min-width: 44px; max-width: none; padding: 9px 6px; }
    .fosh-category-select,
    .fosh-tournament-select { max-width: none; }
    .fosh-dropdown-pair { flex-direction: column; }
    /* Custom selects en móvil */
    .fosh-cs { max-width: none; }
    .fosh-cs__trigger { max-width: none; font-size: .85rem; min-height: 44px; padding: 10px 36px 10px 12px; }
    .fosh-dropdown-pair .fosh-cs { max-width: none; }
}

@media (max-width: 540px) {
    .fosh-widget { border-radius:8px; }
    .fosh-widget__label-bar { padding:9px 12px 8px; }
    .fosh-widget__label-text { font-size:.8rem; letter-spacing:.08em; }
    .fosh-widget__subheader { padding:7px 12px; gap:8px; }
    .fosh-table { font-size:.78rem; }
    .fosh-col--team, .fosh-col--player { padding-left:8px!important; min-width:86px; }
    .fosh-table--standings th:nth-child(n+7),
    .fosh-table--standings td:nth-child(n+7) { display:none; }
    .fosh-table--standings th:nth-child(6),
    .fosh-table--standings td:nth-child(6) { display:none; }
    .fosh-match { padding:9px 12px; }
    .fosh-match--live { padding-left:9px; }
    .fosh-match__body { gap:5px; }
    .fosh-match__team-name { font-size:.8rem; }
    .fosh-match__score-box { min-width:58px; padding:3px 0; border-radius:5px; }
    .fosh-match__score-num { font-size:1.1rem; min-width:20px; }
    .fosh-match__score-sep { font-size:.85rem; padding:0 2px; }
    .fosh-match__time { font-size:1.05rem; padding:3px 6px; min-width:58px; border-radius:5px; }
    .fosh-match__center { min-width:66px; }
    .fosh-match__status { font-size:.57rem; letter-spacing:.04em; }
    .fosh-match__live-badge { font-size:.56rem; }
    .fosh-crest--lg { width:26px; height:26px; }
    .fosh-match__team--home,
    .fosh-match__team--away { gap:5px; }
    .fosh-match__venue { display:none; }
    .fosh-match__meta { margin-bottom:7px; padding-bottom:6px; gap:4px; }
    .fosh-match__round, .fosh-match__cat { font-size:.59rem; padding:1px 5px; }
    .fosh-tab { padding:7px 10px; font-size:.73rem; gap:4px; }
    .fosh-tab__icon { width:12px; height:12px; }
    .fosh-tab__count { min-width:16px; height:16px; font-size:.63rem; }
    .fosh-date-btn { min-width: 38px; max-width: none; padding: 8px 5px; }
    .fosh-date-btn__label { font-size:.62rem; }
    .fosh-date-btn__count { font-size:.58rem; padding:0 4px; }
    .fosh-btn-loadmore { font-size:.77rem; padding:6px 14px; }
    /* Datepicker siempre visible */
    .fosh-datepicker-btn { width: 44px; min-height: 42px; }
    /* Date buttons: menos padding vertical */
    .fosh-date-btn { padding: 6px 5px; }
}

@media (max-width: 380px) {
    .fosh-match { padding:8px 10px; }
    .fosh-match--live { padding-left:7px; }
    .fosh-match__body { gap:4px; }
    .fosh-match__team-name { font-size:.74rem; }
    .fosh-match__score-box { min-width:52px; }
    .fosh-match__score-num { font-size:1rem; min-width:18px; }
    .fosh-match__time { font-size:.95rem; min-width:52px; padding:3px 5px; }
    .fosh-match__center { min-width:58px; }
    .fosh-crest--lg { width:22px; height:22px; }
    .fosh-match__team--home,
    .fosh-match__team--away { gap:4px; }
    .fosh-table--standings th:nth-child(n+5),
    .fosh-table--standings td:nth-child(n+5) { display:none; }
    .fosh-table--standings th:nth-child(10),
    .fosh-table--standings td:nth-child(10) { display:table-cell; }
    .fosh-tab { padding:6px 8px; font-size:.69rem; }
    .fosh-date-btn { min-width: 34px; padding: 6px 4px; }
    .fosh-date-btn__label { font-size:.59rem; }
}