/* [Custom - UnlockSub] Dark mode (YouTube-like palette)
 * Active when <html data-theme="dark">. Set by /js/theme-toggle.js (button + system preference).
 */
html[data-theme="dark"] {
    --ytd-bg: #0f0f0f;
    --ytd-surface: #181818;
    --ytd-raised: #212121;
    --ytd-hover: #272727;
    --ytd-menu: #282828;
    --ytd-border: #303030;
    --ytd-border-strong: #3f3f3f;
    --ytd-text: #f1f1f1;
    --ytd-text-2: #aaaaaa;
    --ytd-text-3: #717171;
    --ytd-link: #3ea6ff;
    --ytd-red: #ff0033;
    --ytd-brand: #e21e1e;
    color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--ytd-bg) !important;
    color: var(--ytd-text);
}
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] strong, html[data-theme="dark"] b, html[data-theme="dark"] label,
html[data-theme="dark"] legend, html[data-theme="dark"] th, html[data-theme="dark"] dt {
    color: var(--ytd-text);
}
html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] td,
html[data-theme="dark"] dd, html[data-theme="dark"] span, html[data-theme="dark"] small {
    color: inherit;
}
html[data-theme="dark"] .text-muted, html[data-theme="dark"] .help-block,
html[data-theme="dark"] small.text-muted, html[data-theme="dark"] .small.text-muted {
    color: var(--ytd-text-2) !important;
}
html[data-theme="dark"] hr { border-color: var(--ytd-border) !important; }
html[data-theme="dark"] ::selection { background: #3ea6ff55; }

/* ------------------------------------------------------------- surfaces */
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-footer,
html[data-theme="dark"] .card,
html[data-theme="dark"] .well,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .thumbnail,
html[data-theme="dark"] .jumbotron {
    background-color: var(--ytd-raised) !important;
    border-color: var(--ytd-border) !important;
    color: var(--ytd-text);
}
html[data-theme="dark"] .dropdown-menu > li > a { color: var(--ytd-text) !important; }
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .list-group-item:hover { background-color: var(--ytd-hover) !important; }
html[data-theme="dark"] .modal-backdrop.in { opacity: .7; }
html[data-theme="dark"] .close { color: var(--ytd-text); text-shadow: none; opacity: .7; }

/* --------------------------------------------------------------- tables */
html[data-theme="dark"] table,
html[data-theme="dark"] .table { background-color: transparent !important; color: var(--ytd-text); }
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > td,
html[data-theme="dark"] th, html[data-theme="dark"] td {
    border-color: var(--ytd-border) !important;
    background-color: transparent !important;
}
html[data-theme="dark"] thead th, html[data-theme="dark"] .table > thead > tr > th { background-color: var(--ytd-surface) !important; }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,.03) !important; }
html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: var(--ytd-hover) !important; }

/* --------------------------------------------------------------- forms */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="range"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .input-group-addon {
    background-color: var(--ytd-bg) !important;
    border-color: var(--ytd-border-strong) !important;
    color: var(--ytd-text) !important;
}
html[data-theme="dark"] input[disabled], html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--ytd-raised) !important;
    color: var(--ytd-text-2) !important;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--ytd-text-3) !important; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus,
html[data-theme="dark"] .form-control:focus {
    border-color: var(--ytd-link) !important;
    box-shadow: 0 0 0 1px var(--ytd-link) !important;
}
html[data-theme="dark"] option { background: var(--ytd-raised); color: var(--ytd-text); }
html[data-theme="dark"] input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--ytd-bg) inset !important;
    -webkit-text-fill-color: var(--ytd-text) !important;
}

/* --------------------------------------------------------------- buttons */
html[data-theme="dark"] .btn-default {
    background-color: var(--ytd-hover) !important;
    border-color: var(--ytd-border-strong) !important;
    color: var(--ytd-text) !important;
}
html[data-theme="dark"] .btn-default:hover { background-color: #3a3a3a !important; }
html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span {
    background-color: var(--ytd-raised) !important;
    border-color: var(--ytd-border) !important;
    color: var(--ytd-text) !important;
}
html[data-theme="dark"] .pagination > .active > a, html[data-theme="dark"] .pagination > .active > span {
    background-color: var(--ytd-brand) !important;
    border-color: var(--ytd-brand) !important;
    color: #fff !important;
}
html[data-theme="dark"] .nav-tabs { border-color: var(--ytd-border) !important; }
html[data-theme="dark"] .nav-tabs > li > a { color: var(--ytd-text-2) !important; }
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover {
    background-color: var(--ytd-raised) !important;
    border-color: var(--ytd-border) var(--ytd-border) transparent !important;
    color: var(--ytd-text) !important;
}

/* --------------------------------------------------------------- alerts */
html[data-theme="dark"] .alert-success { background: #0f2e1b !important; border-color: #1e5631 !important; color: #8ee6a6 !important; }
html[data-theme="dark"] .alert-danger, html[data-theme="dark"] .alert-error { background: #3a1214 !important; border-color: #6b1f23 !important; color: #ffb4b4 !important; }
html[data-theme="dark"] .alert-warning { background: #33270b !important; border-color: #5c4712 !important; color: #ffd98a !important; }
html[data-theme="dark"] .alert-info { background: #0d2536 !important; border-color: #17435f !important; color: #9fd4ff !important; }
html[data-theme="dark"] .label-default { background: var(--ytd-hover) !important; }

/* links (keep brand-colored links readable) */
html[data-theme="dark"] a:not(.btn):not([class*="nav"]):not([class*="header"]):not([class*="pill"]) { color: inherit; }
html[data-theme="dark"] .content a:not(.btn):not([class]), html[data-theme="dark"] p a:not(.btn) { color: var(--ytd-link); }

/* inline styles written in templates (white / light backgrounds, dark text) */
html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color:#ffffff"], html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background:#f9fafb"], html[data-theme="dark"] [style*="background:#f3f4f6"],
html[data-theme="dark"] [style*="background:#fafafa"], html[data-theme="dark"] [style*="background: #f9fafb"],
html[data-theme="dark"] [style*="background: #f3f4f6"], html[data-theme="dark"] [style*="background: #fafafa"] {
    background: var(--ytd-raised) !important;
}
html[data-theme="dark"] [style*="color:#111"], html[data-theme="dark"] [style*="color: #111"],
html[data-theme="dark"] [style*="color:#000"], html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#222"], html[data-theme="dark"] [style*="color: #222"],
html[data-theme="dark"] [style*="color:#333"], html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#374151"], html[data-theme="dark"] [style*="color: #374151"],
html[data-theme="dark"] [style*="color:#1f2937"], html[data-theme="dark"] [style*="color: #1f2937"],
html[data-theme="dark"] [style*="color:#111827"], html[data-theme="dark"] [style*="color: #111827"] {
    color: var(--ytd-text) !important;
}
html[data-theme="dark"] [style*="color:#6b7280"], html[data-theme="dark"] [style*="color: #6b7280"],
html[data-theme="dark"] [style*="color:#666"], html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#555"], html[data-theme="dark"] [style*="color: #555"],
html[data-theme="dark"] [style*="color:#4b5563"], html[data-theme="dark"] [style*="color: #4b5563"] {
    color: var(--ytd-text-2) !important;
}

/* --------------------------------------------------------- theme button */
.us-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    border: 0; cursor: pointer; padding: 0;
    background: rgba(0,0,0,.06); color: #0f0f0f;
    transition: background .15s;
    flex: 0 0 auto;
}
.us-theme-toggle:hover { background: rgba(0,0,0,.12); }
.us-theme-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.us-theme-toggle .us-moon { display: block; }
.us-theme-toggle .us-sun { display: none; }
html[data-theme="dark"] .us-theme-toggle { background: rgba(255,255,255,.1); color: #f1f1f1; }
html[data-theme="dark"] .us-theme-toggle:hover { background: rgba(255,255,255,.2); }
html[data-theme="dark"] .us-theme-toggle .us-moon { display: none; }
html[data-theme="dark"] .us-theme-toggle .us-sun { display: block; }
.us-theme-toggle.us-floating {
    position: fixed; right: 12px; top: 12px; z-index: 9990;
    width: 42px; height: 42px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
    background: #fff;
}
html[data-theme="dark"] .us-theme-toggle.us-floating { background: var(--ytd-menu); }

/* smooth switch */
html.us-theme-anim, html.us-theme-anim * { transition: background-color .2s, border-color .2s, color .2s !important; }

/* ============================================================ MEMBER PANEL */
html[data-theme="dark"] #memberHeader.header,
html[data-theme="dark"] .header#memberHeader {
    background-color: rgba(15,15,15,.92) !important;
    border-color: var(--ytd-border) !important;
}
html[data-theme="dark"] #toggle-change-icon { color: var(--ytd-text) !important; }
html[data-theme="dark"] .header-pill,
html[data-theme="dark"] .notification-bell {
    background-color: var(--ytd-hover) !important;
    color: var(--ytd-text) !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .header-pill:hover, html[data-theme="dark"] .notification-bell:hover { background-color: #3a3a3a !important; }
html[data-theme="dark"] .header-pill *, html[data-theme="dark"] .notification-bell * { color: inherit !important; }
html[data-theme="dark"] .notification-dropdown, html[data-theme="dark"] .notification-header,
html[data-theme="dark"] .notification-item, html[data-theme="dark"] .notification-list {
    background-color: var(--ytd-menu) !important;
    border-color: var(--ytd-border) !important;
    color: var(--ytd-text) !important;
}
html[data-theme="dark"] .notification-item:hover { background-color: var(--ytd-hover) !important; }
html[data-theme="dark"] .notif-message, html[data-theme="dark"] .notif-time { color: var(--ytd-text-2) !important; }

html[data-theme="dark"] aside#aside, html[data-theme="dark"] .yt-sidebar {
    background-color: var(--ytd-bg) !important;
    border-color: var(--ytd-border) !important;
}
html[data-theme="dark"] .yt-sidebar .nav-item, html[data-theme="dark"] .yt-sidebar .nav-item * { color: var(--ytd-text) !important; }
html[data-theme="dark"] .yt-sidebar .nav-item:hover { background-color: var(--ytd-hover) !important; }
html[data-theme="dark"] .yt-sidebar .nav-item.active { background-color: var(--ytd-hover) !important; }
html[data-theme="dark"] .yt-sidebar .nav-item.active * { color: #fff !important; }
html[data-theme="dark"] .yt-pd-sep, html[data-theme="dark"] .sidebar-bottom { border-color: var(--ytd-border) !important; }
html[data-theme="dark"] li.yt-pd-sep { background-color: var(--ytd-border) !important; }

html[data-theme="dark"] .report_box,
html[data-theme="dark"] .report_Statistics,
html[data-theme="dark"] section.box,
html[data-theme="dark"] .top_banner_body,
html[data-theme="dark"] .main-footer,
html[data-theme="dark"] summary,
html[data-theme="dark"] details {
    background-color: var(--ytd-raised) !important;
    border-color: var(--ytd-border) !important;
    color: var(--ytd-text) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .report_box *:not([class*="material"]):not(i) { color: inherit; }
html[data-theme="dark"] .report_box img, html[data-theme="dark"] .report_box svg { filter: invert(1) brightness(1.6); }
html[data-theme="dark"] .section_title, html[data-theme="dark"] h3.section_title { background: transparent !important; color: var(--ytd-text) !important; }
html[data-theme="dark"] .stats_range_pills { background-color: var(--ytd-hover) !important; }
html[data-theme="dark"] .stats_range_pills * { color: var(--ytd-text-2); }
html[data-theme="dark"] .stats_range_pills .active { background-color: var(--ytd-text) !important; color: var(--ytd-bg) !important; }
html[data-theme="dark"] .main-footer, html[data-theme="dark"] .main-footer * { color: var(--ytd-text-2) !important; }
html[data-theme="dark"] .telegram-float { background-color: var(--ytd-menu) !important; color: var(--ytd-text) !important; }

/* shorten modal */
html[data-theme="dark"] #Shorten_Page.Shorten-Page { background-color: rgba(0,0,0,.6) !important; }
html[data-theme="dark"] .Shorten-Page-content,
html[data-theme="dark"] .Shorten-Haider,
html[data-theme="dark"] .sm-action-section,
html[data-theme="dark"] .shorten-preview-column,
html[data-theme="dark"] .sm-preview-card,
html[data-theme="dark"] .sab-picker-choices,
html[data-theme="dark"] .sab-modal-footer,
html[data-theme="dark"] .shorten-sab-row,
html[data-theme="dark"] .sab-platform-group,
html[data-theme="dark"] .sm-success-panel {
    background-color: var(--ytd-raised) !important;
    border-color: var(--ytd-border) !important;
    color: var(--ytd-text) !important;
}
html[data-theme="dark"] .Shorten-Page-content h2, html[data-theme="dark"] .Shorten-Haider h2 { color: var(--ytd-text) !important; }
html[data-theme="dark"] .shorten-preview-column { background-color: var(--ytd-surface) !important; }
html[data-theme="dark"] #shorten-sab-add { background-color: var(--ytd-bg) !important; border-color: var(--ytd-border-strong) !important; color: var(--ytd-text) !important; }
html[data-theme="dark"] .sm-preview-progress-bar, html[data-theme="dark"] .btn-preview-unlock { background-color: var(--ytd-hover) !important; color: var(--ytd-text-2) !important; }
html[data-theme="dark"] .sab-platform-header, html[data-theme="dark"] .sab-cat { background-color: var(--ytd-surface) !important; color: var(--ytd-text) !important; border-color: var(--ytd-border) !important; }
html[data-theme="dark"] .sab-cat.active { background-color: var(--ytd-text) !important; color: var(--ytd-bg) !important; }

/* ============================================================ LOGOS / CHARTS / PILLS */
/* the wordmark image has dark letters: invert + rotate hue keeps the red icon red */
html[data-theme="dark"] img[src*="alQg8fB"],
html[data-theme="dark"] .header-logo-img,
html[data-theme="dark"] .navbar-brand img {
    filter: invert(1) hue-rotate(180deg) saturate(4) brightness(.92);
}
html[data-theme="dark"] .lst-chart-area path { fill: rgba(62,166,255,.15) !important; }
html[data-theme="dark"] .stats_pill.active,
html[data-theme="dark"] .stats_range_pills .active {
    background-color: var(--ytd-brand) !important;
    color: #fff !important;
}
html[data-theme="dark"] .section_title *, html[data-theme="dark"] .section_title { background-color: transparent !important; }
html[data-theme="dark"] .landing-glass-navbar,
html[data-theme="dark"] nav.navbar-default {
    background-color: rgba(15,15,15,.92) !important;
    border-color: var(--ytd-border) !important;
}
html[data-theme="dark"] .navbar-default .navbar-nav > li > a { color: var(--ytd-text) !important; }

/* ============================================================ MOBILE / MENUS */
/* front navbar hamburger (svg lines) */
html[data-theme="dark"] .hamburger svg, html[data-theme="dark"] .hamburger svg .line { stroke: var(--ytd-text) !important; }
html[data-theme="dark"] .navbar-toggle .icon-bar { background-color: var(--ytd-text) !important; }
html[data-theme="dark"] .navbar-collapse { background-color: var(--ytd-raised) !important; border-color: var(--ytd-border) !important; }
/* selects with forced dark text */
html[data-theme="dark"] body select.form-control,
html[data-theme="dark"] body select { color: var(--ytd-text) !important; background-color: var(--ytd-bg) !important; }
/* member panel: on phones the theme switch lives in the side menu, not in the crowded top bar */
.us-theme-side { display: none !important; }
@media (max-width: 600px) {
    #memberHeader .us-theme-toggle { display: none !important; }
    .us-theme-side { display: flex !important; }
}
html[data-theme="dark"] .navbar-toggle { background-color: var(--ytd-hover) !important; border-color: var(--ytd-border-strong) !important; }
@media (max-width: 767px) { .navbar-collapse .us-theme-li { justify-content: center; padding: 8px 0 !important; } }

/* ============================================================ GENERAL FIXES (both themes) */
/* front mobile menu: the theme placed it 69px down but the bar is ~61px tall -> 8px gap showing the page */
@media only screen and (max-width: 900px) {
    body.landing-glass-enabled .landing-glass-navbar #menu { top: 100%; }
}
html[data-theme="dark"] #menu { background: var(--ytd-raised) !important; }
html[data-theme="dark"] .landing-glass-navbar #menu > ul > li > a,
html[data-theme="dark"] .landing-glass-navbar .navbar-nav > li > a { color: var(--ytd-text) !important; }
html[data-theme="dark"] .landing-glass-navbar #menu > ul > li > a:hover { background: var(--ytd-hover) !important; }
/* member side menu: the profile block (avatar + name) was squeezed to ~40px and the last items
   (Soporte, Cerrar sesion) were cut off on short screens -> keep natural heights and let the menu scroll */
.yt-sidebar { overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; }
.yt-sidebar > * { flex-shrink: 0 !important; }
/* table headers must stay opaque: some tables (member "Informe") use sticky header cells */
html[data-theme="dark"] th,
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > th { background-color: var(--ytd-raised) !important; }
/* member "Informe" month selector had a fixed 300px width and overflowed small phones */
@media (max-width: 600px) {
    .section_title form { flex: 1 1 auto; min-width: 0; margin-left: 10px; }
    .section_title form .form-group { width: 100% !important; margin: 0; }
    .section_title select#month { width: 100% !important; max-width: 100%; }
}