:root {
    --bg: #07111f;
    --surface: #101d2f;
    --surface2: #17263a;
    --text: #f5f7fb;
    --muted: #aab6c8;
    --line: #293a51;
    --accent: #36d399;
    --danger: #ff7b7b;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 4vw;
    border-bottom: 1px solid var(--line);
}
.brand, .session { display: flex; align-items: center; gap: 14px; }
.brand-mark {
    background: var(--accent);
    color: #04130e;
    padding: 14px 10px;
    border-radius: 12px;
    font-weight: 900;
}
.container { width: min(1100px, 92vw); margin: 0 auto; padding: 36px 0 70px; }
.login-card, .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px;
}
.login-card { max-width: 460px; margin: 80px auto; }
.form { display: grid; gap: 12px; }
input, select {
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #0a1627;
    color: var(--text);
}
.button {
    border: 0;
    border-radius: 10px;
    padding: 11px 15px;
    cursor: pointer;
    font-weight: 800;
}
.primary { background: var(--accent); color: #04130e; }
.secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--line); }
.danger { background: rgba(255,123,123,.12); color: var(--danger); }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.badge {
    display: inline-block;
    background: rgba(54,211,153,.12);
    color: var(--accent);
    padding: 7px 10px;
    border-radius: 999px;
}
.page-header, .league-row, .actions, .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.two-columns { display: grid; grid-template-columns: 340px 1fr; gap: 24px; }
.search { margin-bottom: 18px; }
.league-card { margin-bottom: 14px; }
.actions { justify-content: flex-end; margin-top: 16px; }
.alert { padding: 12px; border-radius: 10px; margin-bottom: 16px; }
.alert.success { background: rgba(54,211,153,.10); color: var(--accent); }
.alert.danger { background: rgba(255,123,123,.10); color: var(--danger); }
@media (max-width: 760px) {
    .grid, .two-columns { grid-template-columns: 1fr; }
    .page-header, .league-row { align-items: flex-start; flex-direction: column; }
}

select { appearance: auto; }
.muted { color: var(--muted); }
.search-wrap { flex-wrap: wrap; }
.search-wrap input { flex: 2 1 260px; }
.search-wrap select { flex: 1 1 180px; }
.edit-form { margin-top: 16px; }

.panel-form{background:#101d2e;border:1px solid #2a3d55;border-radius:16px;padding:22px;margin:18px 0 30px}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.form-grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.form-grid.stats{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}.panel-form label{display:flex;flex-direction:column;gap:7px;font-weight:600}.panel-form input,.panel-form select,.panel-form textarea{box-sizing:border-box;width:100%;padding:10px;border-radius:8px;border:1px solid #40536b;background:#091422;color:#fff}.panel-form textarea{resize:vertical}.muted{opacity:.75}pre{white-space:pre-wrap;font-family:inherit}

/* =========================================================
   MID TENIS
   ========================================================= */

.tennis-heading {
    margin-bottom: 24px;
}

.tennis-heading h1 {
    margin: 4px 0 8px;
    font-size: clamp(30px, 5vw, 46px);
}

.tennis-kicker {
    margin: 0;
    color: #c6ff35;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
}

.tennis-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.tennis-summary-card {
    background: linear-gradient(145deg, #101d2f, #13243a);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 17px;
}

.tennis-summary-card strong {
    display: block;
    color: #c6ff35;
    font-size: 25px;
}

.tennis-summary-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 5px;
}

.tennis-filter {
    margin-bottom: 26px;
}

.tennis-filter-action {
    display: flex;
    align-items: end;
}

.tennis-filter-action .button {
    width: 100%;
    min-height: 43px;
}

.tennis-section-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 28px 0 14px;
}

.tennis-section-title h2,
.tennis-section-title p {
    margin: 0 0 5px;
}

.tennis-list {
    display: grid;
    gap: 20px;
}

.tennis-match-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
}

.tennis-match-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.tennis-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tennis-tour,
.tennis-surface,
.tennis-confidence {
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 900;
}

.tennis-tour {
    background: rgba(198, 255, 53, .13);
    color: #c6ff35;
}

.tennis-surface.hard {
    background: rgba(73, 145, 255, .15);
    color: #76adff;
}

.tennis-surface.clay {
    background: rgba(255, 130, 73, .15);
    color: #ff9c70;
}

.tennis-surface.grass {
    background: rgba(54, 211, 153, .15);
    color: #55e9ad;
}

.tennis-confidence {
    background: var(--surface2);
    color: var(--muted);
}

.tennis-date {
    color: var(--muted);
    font-size: 12px;
    text-align: right;
}

.tennis-tournament {
    padding: 14px 20px 0;
    color: var(--muted);
    font-size: 13px;
}

.tennis-probabilities {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    padding: 20px;
}

.tennis-player {
    min-width: 0;
}

.tennis-player-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.tennis-player h3 {
    margin: 0 0 5px;
    font-size: 19px;
}

.tennis-percent {
    color: var(--text);
    font-size: 25px;
    white-space: nowrap;
}

.tennis-percent.recommended {
    color: #c6ff35;
    text-shadow: 0 0 18px rgba(198, 255, 53, .30);
}

.tennis-bar {
    height: 7px;
    background: #07111f;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 12px;
}

.tennis-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #36d399, #c6ff35);
    border-radius: inherit;
}

.tennis-versus {
    color: var(--muted);
    font-weight: 900;
}

.tennis-pick {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 20px 18px;
    padding: 14px 16px;
    background: rgba(198, 255, 53, .08);
    border: 1px solid rgba(198, 255, 53, .24);
    border-radius: 12px;
}

.tennis-pick span {
    color: var(--muted);
    font-size: 13px;
}

.tennis-pick strong {
    color: #c6ff35;
}

.tennis-comparison {
    overflow-x: auto;
    border-top: 1px solid var(--line);
}

.tennis-comparison table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}

.tennis-comparison th,
.tennis-comparison td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 13px;
}

.tennis-comparison th {
    color: var(--muted);
    background: rgba(7, 17, 31, .35);
}

.tennis-explanation {
    padding: 16px 20px 20px;
}

.tennis-explanation summary {
    color: #c6ff35;
    cursor: pointer;
    font-weight: 800;
}

.tennis-explanation li {
    margin-bottom: 7px;
    color: var(--muted);
}

.tennis-errors {
    margin-top: 20px;
    border-color: rgba(255, 123, 123, .4);
}

@media (max-width: 900px) {
    .tennis-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .tennis-probabilities {
        grid-template-columns: 1fr;
    }

    .tennis-versus {
        text-align: center;
    }
}

@media (max-width: 560px) {
    .tennis-summary {
        grid-template-columns: 1fr;
    }

    .tennis-match-top,
    .tennis-pick {
        align-items: flex-start;
        flex-direction: column;
    }

    .tennis-date {
        text-align: left;
    }

    .tennis-player-line {
        align-items: flex-start;
    }
}

/* MID Tenis: partidos en vivo */
.tennis-live-section {
    margin: 28px 0 34px;
}

.tennis-live-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.tennis-live-card {
    padding: 18px 20px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 73, 91, .08),
            rgba(18, 34, 54, .96) 45%
        );
    border: 1px solid rgba(255, 73, 91, .42);
    border-radius: 16px;
}

.tennis-live-top,
.tennis-live-player {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.tennis-live-top {
    margin-bottom: 13px;
}

.tennis-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ff7b86;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
}

.tennis-live-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    background: #ff495b;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 73, 91, .12);
    animation: tennis-live-pulse 1.5s infinite;
}

.tennis-live-tournament {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 13px;
}

.tennis-live-player {
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.tennis-live-player strong:first-of-type {
    color: var(--text);
}

.tennis-live-sets {
    min-width: 38px;
    color: #c6ff35;
    font-size: 25px;
    text-align: right;
}

.tennis-server {
    margin-right: 7px;
    color: #c6ff35;
    font-size: 11px;
}

.tennis-live-score,
.tennis-live-points {
    margin-top: 12px;
    color: var(--muted);
    font-size: 13px;
}

.tennis-live-score strong,
.tennis-live-points strong {
    color: var(--text);
}

.tennis-live-warning {
    margin: 12px 0 0;
    color: #ffcc66;
    font-size: 12px;
}

@keyframes tennis-live-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.82);
    }
}

@media (max-width: 760px) {
    .tennis-live-grid {
        grid-template-columns: 1fr;
    }
}

.tennis-control-title {
    margin-top: 28px;
}

.tennis-control-summary {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 26px;
}

@media (max-width: 1000px) {
    .tennis-control-summary {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .tennis-control-summary {
        grid-template-columns: 1fr;
    }
}

.tennis-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.tennis-profit-results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 22px 0;
}

.tennis-profit-won {
    border-color: rgba(54, 211, 153, .45);
}

.tennis-profit-lost {
    border-color: rgba(255, 73, 91, .45);
}

.tennis-profit-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.tennis-profit-result span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
}

.tennis-profit-positive {
    color: #36d399;
    white-space: nowrap;
}

.tennis-profit-negative {
    color: #ff6573;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .tennis-profit-results {
        grid-template-columns: 1fr;
    }
}

.tennis-odds-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0;
}

.tennis-odds-market {
    padding: 16px;
    border: 1px solid #314965;
    border-radius: 10px;
    background: #0d1b2c;
}

.tennis-odds-market h4 {
    margin-top: 0;
}

.tennis-odds-saved {
    color: #b7ff00;
    font-weight: 700;
}

@media (max-width: 760px) {
    .tennis-odds-grid {
        grid-template-columns: 1fr;
    }
}

.football-context {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #314965;
    border-radius: 10px;
    background: #0b1828;
}

.football-context > summary {
    color: #b7ff00;
    font-weight: 700;
    cursor: pointer;
}

.football-context-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

@media (max-width: 760px) {
    .football-context-grid {
        grid-template-columns: 1fr;
    }
}