:root {
    --mg-bg: #f5f8f5;
    --mg-surface: #ffffff;
    --mg-surface-soft: #f8faf8;
    --mg-text: #142019;
    --mg-muted: #66756d;
    --mg-border: #dce6df;
    --mg-input: #ffffff;
    --mg-shadow: rgba(20, 60, 38, 0.10);
}

html[data-mg-theme="dark"] {
    color-scheme: dark;

    --mg-bg: #0d1210;
    --mg-surface: #151c18;
    --mg-surface-soft: #1b241f;
    --mg-text: #f1f6f3;
    --mg-muted: #a8b7ae;
    --mg-border: #2d3a32;
    --mg-input: #111814;
    --mg-shadow: rgba(0, 0, 0, 0.35);
}

html,
body {
    background: var(--mg-bg) !important;
    color: var(--mg-text) !important;
}

body {
    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.card,
.game-card,
.player-row,
.player-side-block,
.modal-content,
.modal-card,
.dialog-card,
.score-card,
.scorecard,
.table-wrap {
    background-color: var(--mg-surface) !important;
    border-color: var(--mg-border) !important;
    color: var(--mg-text) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.golf-brand,
.game-title,
.game-section-title,
.section-title,
.page-heading h1,
.page-heading h2 {
    color: var(--mg-text) !important;
}

p,
small,
.section-help,
.game-description,
.game-section-help,
.golf-tagline,
.eyebrow {
    color: var(--mg-muted) !important;
}

input,
select,
textarea {
    background-color: var(--mg-input) !important;
    color: var(--mg-text) !important;
    border-color: var(--mg-border) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--mg-muted) !important;
    opacity: 0.8;
}

select option {
    background: var(--mg-surface);
    color: var(--mg-text);
}

table,
thead,
tbody,
tr,
th,
td {
    border-color: var(--mg-border) !important;
}

th,
td {
    color: var(--mg-text);
}

html[data-mg-theme="dark"] .game-card-soon {
    background: #121714 !important;
}

html[data-mg-theme="dark"] .game-card-soon,
html[data-mg-theme="dark"] .game-card-soon * {
    color: #748179 !important;
}

html[data-mg-theme="dark"] .game-badge {
    background: #21362a !important;
    color: #8fd3ac !important;
}

html[data-mg-theme="dark"] .player-number {
    background: #20372a !important;
    color: #8fd3ac !important;
}

.mg-theme-picker {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;

    display: inline-flex;
    align-items: center;
    gap: 3px;

    padding: 4px;

    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: 999px;

    box-shadow:
        0 8px 26px
        var(--mg-shadow);
}

.mg-theme-button {
    appearance: none;
    border: 0;
    background: transparent;

    color: var(--mg-muted);

    padding: 8px 11px;
    border-radius: 999px;

    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.mg-theme-button:hover {
    color: var(--mg-text);
}

.mg-theme-button[aria-pressed="true"] {
    background: #176f45;
    color: #ffffff;
}

@media (max-width: 640px) {
    .mg-theme-picker {
        top: 10px;
        right: 10px;
    }

    .mg-theme-button {
        padding: 7px 9px;
        font-size: 0.72rem;
    }
}

/* MG_APPEARANCE_MENU_V1 */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
}

html {
    background: #f7faf7;
}

body {
    overflow-x: hidden;
    background: #f7faf7;
}

html[data-mg-theme="dark"],
html[data-mg-theme="dark"] body {
    background: #0b1117;
}

.topbar {
    width: 100%;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand-app-icon {
    display: block;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    object-fit: cover;
    border-radius: 11px;
}

.golf-home-logo {
    object-fit: cover !important;
    overflow: hidden;
}

.mg-appearance {
    position: relative;
    flex: 0 0 auto;
}

.mg-appearance-toggle {
    appearance: none;
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(41, 62, 50, 0.18);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.88);
    color: #162018;
    cursor: pointer;
    box-shadow:
        0 4px 14px
        rgba(26, 46, 34, 0.08);
}

.mg-appearance-toggle:hover {
    background: rgba(255, 255, 255, 1);
}

.mg-appearance-toggle[aria-expanded="true"] {
    outline: 3px solid rgba(29, 121, 76, 0.22);
    border-color: #1d794c;
}

.mg-appearance-symbol {
    position: relative;
    display: block;
    width: 21px;
    height: 21px;
    border: 2px solid currentColor;
    border-radius: 50%;
    overflow: hidden;
}

.mg-appearance-symbol::after {
    content: "";
    position: absolute;
    inset: 0 0 0 50%;
    background: currentColor;
}

.mg-appearance-menu {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 10px);
    right: 0;
    width: 260px;
    padding: 14px 10px 10px;
    border: 1px solid rgba(42, 59, 49, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    color: #162018;
    box-shadow:
        0 18px 48px
        rgba(24, 40, 30, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mg-appearance-menu[hidden] {
    display: none;
}

.mg-appearance-title {
    padding: 4px 16px 10px;
    color: #78827c;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.mg-appearance-item {
    appearance: none;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
}

.mg-appearance-item:hover {
    background: rgba(27, 117, 73, 0.08);
}

.mg-appearance-check {
    visibility: hidden;
    color: #238252;
    font-size: 1.25rem;
    font-weight: 800;
}

.mg-appearance-item[aria-checked="true"]
.mg-appearance-check {
    visibility: visible;
}

html[data-mg-theme="dark"]
.mg-appearance-toggle {
    border-color: #34404b;
    background: #151d24;
    color: #f2f5f7;
    box-shadow: none;
}

html[data-mg-theme="dark"]
.mg-appearance-toggle:hover {
    background: #1b252e;
}

html[data-mg-theme="dark"]
.mg-appearance-menu {
    border-color: #303b46;
    background: rgba(21, 29, 36, 0.98);
    color: #f3f5f6;
    box-shadow:
        0 20px 48px
        rgba(0, 0, 0, 0.42);
}

html[data-mg-theme="dark"]
.mg-appearance-title {
    color: #98a2ad;
}

html[data-mg-theme="dark"]
.mg-appearance-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

html[data-mg-theme="dark"]
.mg-appearance-check {
    color: #63a9ff;
}

@media (max-width: 720px) {
    .brand-app-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 10px;
    }

    .mg-appearance-toggle {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .mg-appearance-menu {
        width: min(
            260px,
            calc(100vw - 28px)
        );
    }
}

/* /MG_APPEARANCE_MENU_V1 */

/* MG_APPEARANCE_DARK_V2_START */

/*
 * Selector global de apariencia.
 * Usa los selectores reales de Marc Golf.
 */


/* ----------------------------------------------------------
   BOTÓN SUPERIOR
   ---------------------------------------------------------- */

html[data-mg-theme="dark"]
.mg-appearance-toggle {
    background: #090e0b !important;
    color: #4ade80 !important;

    border:
        2px solid
        rgba(74, 222, 128, 0.72)
        !important;

    box-shadow:
        0 0 0 3px
        rgba(74, 222, 128, 0.08),
        0 8px 22px
        rgba(0, 0, 0, 0.32)
        !important;
}


html[data-mg-theme="dark"]
.mg-appearance-toggle:hover {
    background: #0e1712 !important;

    border-color:
        #4ade80 !important;

    box-shadow:
        0 0 0 4px
        rgba(74, 222, 128, 0.14),
        0 10px 26px
        rgba(0, 0, 0, 0.38)
        !important;
}


html[data-mg-theme="dark"]
.mg-appearance-toggle[
    aria-expanded="true"
] {
    background: #101c15 !important;

    border-color:
        #4ade80 !important;

    outline:
        3px solid
        rgba(74, 222, 128, 0.18)
        !important;
}


/* ----------------------------------------------------------
   CÍRCULO CLARO / OSCURO
   ---------------------------------------------------------- */

html[data-mg-theme="dark"]
.mg-appearance-symbol {
    width: 23px;
    height: 23px;

    color: #4ade80 !important;

    border:
        2px solid
        #4ade80 !important;

    background:
        transparent !important;

    box-shadow:
        0 0 0 3px
        rgba(74, 222, 128, 0.10),
        0 0 12px
        rgba(74, 222, 128, 0.20);
}


html[data-mg-theme="dark"]
.mg-appearance-symbol::after {
    background:
        #4ade80 !important;
}


/* ----------------------------------------------------------
   MENÚ
   ---------------------------------------------------------- */

html[data-mg-theme="dark"]
.mg-appearance-menu {
    background:
        rgba(
            5,
            9,
            7,
            0.99
        )
        !important;

    color:
        #f1f6f3 !important;

    border:
        1px solid
        #2f3d35
        !important;

    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, 0.55)
        !important;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


/* ----------------------------------------------------------
   TÍTULO
   ---------------------------------------------------------- */

html[data-mg-theme="dark"]
.mg-appearance-title {
    color:
        #aebbb4 !important;
}


/* ----------------------------------------------------------
   OPCIONES
   ---------------------------------------------------------- */

html[data-mg-theme="dark"]
.mg-appearance-item {
    margin:
        3px 0;

    background:
        #101713 !important;

    color:
        #f1f6f3 !important;

    border:
        1px solid
        #303d35 !important;

    border-radius:
        12px !important;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}


html[data-mg-theme="dark"]
.mg-appearance-item:hover {
    background:
        #17221c !important;

    border-color:
        #47574e !important;
}


/* ----------------------------------------------------------
   OPCIÓN ACTIVA
   ---------------------------------------------------------- */

html[data-mg-theme="dark"]
.mg-appearance-item[
    aria-checked="true"
] {
    background:
        #102419 !important;

    border-color:
        #4ade80 !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(74, 222, 128, 0.18)
        !important;
}


html[data-mg-theme="dark"]
.mg-appearance-item[
    aria-checked="true"
]
.mg-appearance-check {
    color:
        #4ade80 !important;

    visibility:
        visible;
}


/* ----------------------------------------------------------
   CHECK
   ---------------------------------------------------------- */

html[data-mg-theme="dark"]
.mg-appearance-check {
    color:
        #4ade80 !important;
}


/* ----------------------------------------------------------
   ACCESIBILIDAD
   ---------------------------------------------------------- */

html[data-mg-theme="dark"]
.mg-appearance-toggle:focus-visible,
html[data-mg-theme="dark"]
.mg-appearance-item:focus-visible {
    outline:
        3px solid
        rgba(74, 222, 128, 0.28)
        !important;

    outline-offset:
        2px;
}

/* MG_APPEARANCE_DARK_V2_END */

/* MG_GLOBAL_DARK_HEADER_V1_START */

html[data-mg-theme="dark"] .topbar {
    background: #050806 !important;
    border-bottom: 1px solid #263129 !important;
    box-shadow: none !important;
}

html[data-mg-theme="dark"] .topbar-inner {
    background: transparent !important;
}

html[data-mg-theme="dark"] .brand,
html[data-mg-theme="dark"] .brand span {
    color: #f3f7f5 !important;
    -webkit-text-fill-color: #f3f7f5 !important;
}

/* Mantener el logo original sin filtros */
html[data-mg-theme="dark"] .brand-app-icon {
    filter: none !important;
}

/* MG_GLOBAL_DARK_HEADER_V1_END */