/* Shared semantic colors; the existing dark appearance remains the default. */
:root {
  color-scheme: dark;
  --success: #5FCB8A;
  --warning: #E0A24A;
  --cool-label: #9AA6FF;
  --surface-inset: #121318;
  --loading-surface: #141518;
  --topbar-bg: rgba(18, 17, 16, .88);
  --chart-guide: #f2f4f82b;
  --chart-cursor: #f2f4f8;
  --hover-border: #423C36;
  --metric-blue: #389dff;
  --metric-yellow: #ffc408;
  --record-label: #F2777B;
  --edit-label: #C09AE8;
  --idea-label: #5BC48E;
  --accent: var(--cool);
  --txt: var(--text);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #EEF0F4;
  --surface-3: #E2E6EC;
  --line: #B8C0CC;
  --line-soft: #DCE1E8;
  --text: #202530;
  --dim: #4C5665;
  --faint: #626C7B;
  --hot: #C33C29;
  --hot-soft: rgba(195, 60, 41, .09);
  --hot-line: rgba(195, 60, 41, .35);
  --grafica: #176AC4;
  --grafica-soft: rgba(23, 106, 196, .12);
  --cool: #5345C8;
  --cool-soft: rgba(83, 69, 200, .10);
  --cool-line: rgba(83, 69, 200, .35);
  --alert: #BA2941;
  --alert-soft: rgba(186, 41, 65, .09);
  --indice-sobre: #177344;
  --indice-medio: #8D5B08;
  --indice-bajo: #BA2941;
  --success: #177344;
  --warning: #8D5B08;
  --cool-label: #5345C8;
  --surface-inset: #F8F9FB;
  --loading-surface: #EEF0F4;
  --topbar-bg: rgba(244, 245, 247, .94);
  --chart-guide: #76819466;
  --chart-cursor: #4C5665;
  --hover-border: #8C97A6;
  --metric-blue: #176AC4;
  --metric-yellow: #865C00;
  --record-label: #B92B35;
  --edit-label: #7443A5;
  --idea-label: #177344;
  --shadow: 0 1px 3px rgba(29, 40, 57, .06), 0 8px 24px -12px rgba(29, 40, 57, .18);
}

/* Contrast for accent-filled controls and surfaces with photographic content. */
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .ob-chip[aria-pressed="true"],
html[data-theme="light"] .fmt-toggles .chip[aria-pressed="true"],
html[data-theme="light"] .channel-avatar,
html[data-theme="light"] .cfg-canal-av.letra,
html[data-theme="light"] .etq.admin { color: #FFFFFF; }
html[data-theme="light"] .btn.primary:hover { background: #A83122; border-color: #A83122; }
html[data-theme="light"] ::selection { background: var(--hot); color: #FFFFFF; }
html[data-theme="light"] .v-player-modal-x { color: #FFFFFF; }
html[data-theme="light"] .switch input:checked + .switch-track::after { background: #FFFFFF; }
html[data-theme="light"] .thumb-flag .badge { background: var(--surface); }
html[data-theme="light"] .feat .ic.blue { color: var(--cool); }
html[data-theme="light"] .feat .ic.green { color: var(--success); }
html[data-theme="light"] .feat .ic.yellow,
html[data-theme="light"] .tag.soon { color: var(--warning); }
html[data-theme="light"] .chart .ret-info circle { fill: var(--surface); }
html[data-theme="light"] .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); }
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-caja,
html[data-theme="light"] .user-menu,
html[data-theme="light"] .channel-menu,
html[data-theme="light"] .v-picker-menu,
html[data-theme="light"] .chart-tip { box-shadow: 0 12px 36px rgba(29,40,57,.16); }
html[data-theme="light"] .provider-logo { background: var(--surface-2) !important; color: var(--text) !important; }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--faint); opacity: 1; }

/* Appearance is configured only under User configuration > Preferences. */
.theme-fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.theme-fieldset legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.theme-help { font-size: 12.5px; color: var(--dim); margin-bottom: 14px; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.theme-option { position: relative; display: flex; align-items: start; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.theme-option:hover { border-color: var(--dim); }
.theme-option:has(input:checked) { border-color: var(--hot); background: var(--hot-soft); box-shadow: inset 0 0 0 1px var(--hot); }
.theme-option:focus-within { outline: 2px solid var(--hot); outline-offset: 3px; }
.theme-option input { flex: none; margin: 3px 0 0; accent-color: var(--hot); width: 16px; height: 16px; }
.theme-option strong { display: block; font-size: 13px; }
.theme-option small { display: block; color: var(--dim); font-size: 12px; margin-top: 4px; line-height: 1.5; }
#theme-status { font-size: 12px; color: var(--dim); margin-top: 12px; }
#theme-status:empty { display: none; }
@media (max-width: 700px) { .theme-options { grid-template-columns: 1fr; } }