:root {
    --brand: #195025;
    --brand-dark: #123b1b;
    --bg: #f7f7f5;
    --card-bg: #ffffff;
    --border: #e2e2df;
    --text: #2a2a28;
    --muted: #767671;
    --danger: #b3261e;
    --ok: #1e6b3b;
    --off: #8a8a85;
    --topbar-bg: var(--brand);
    --mobile-menu-bg: linear-gradient(145deg, rgba(255,255,255,.92), rgba(235,244,237,.84));
    --mobile-menu-border: rgba(255,255,255,.76);
    --mobile-menu-item-bg: rgba(255,255,255,.34);
    --mobile-menu-backdrop: rgba(18,35,22,.24);
    --shadow-soft: 0 14px 34px rgba(18,35,22,.10);
    color-scheme: light;
}

html[data-theme="dark"] {
    --brand: #3f9d5e;
    --brand-dark: #2c7546;
    --bg: #14171a;
    --card-bg: #1e2226;
    --border: #33383d;
    --text: #eceeec;
    --muted: #9aa39c;
    --danger: #e5766a;
    --ok: #55b977;
    --off: #7f8780;
    --topbar-bg: #17231c;
    --mobile-menu-bg: linear-gradient(145deg, rgba(30,34,38,.94), rgba(20,32,24,.88));
    --mobile-menu-border: rgba(255,255,255,.09);
    --mobile-menu-item-bg: rgba(255,255,255,.07);
    --mobile-menu-backdrop: rgba(0,0,0,.54);
    --shadow-soft: 0 14px 34px rgba(0,0,0,.38);
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

body,
.topbar,
.panel,
.card,
.table,
.media-table,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

a { color: var(--brand); }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

h1 { font-size: 26px; margin-bottom: 20px; }
h2 { font-size: 18px; margin-top: 32px; }

/* Topbar */
.topbar {
    background: var(--topbar-bg);
    color: #fff;
}
.topbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.brand { font-weight: 700; font-size: 18px; }
.topbar nav { display: flex; gap: 16px; flex: 1; }
.topbar nav a {
    color: #e8f0e9;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
}
.topbar nav a.active, .topbar nav a:hover { background: rgba(255,255,255,0.15); color: #fff; }
.topbar-user { display: flex; align-items: center; gap: 10px; font-size: 14px; }

/* Cards */
.cards { display: flex; gap: 16px; margin: 20px 0; }
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 22px;
    min-width: 140px;
}
.card-number { display: block; font-size: 28px; font-weight: 700; color: var(--brand); }
.card-label { font-size: 13px; color: var(--muted); }

/* Panels & forms */
.panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-top: 16px;
}
form label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=number], input[type=file], select {
    width: 100%;
    max-width: 420px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
}
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.inline-form label { margin: 0; }
.inline-action { display: inline-block; margin: 0 4px 0 0; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}
.btn:hover { background: var(--brand-dark); }
.btn-primary { background: var(--brand); }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: rgba(25,80,37,0.08); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #8f1f19; }
.btn-small { padding: 5px 10px; font-size: 13px; }

/* Table */
.table { width: 100%; border-collapse: collapse; margin-top: 14px; background: var(--card-bg); }
.table th, .table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    vertical-align: middle;
}
.table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.url-field { font-size: 12px; color: var(--muted); background: #fafaf8; }
.actions-cell form { display: inline; }
.thumb { width: 70px; height: 44px; object-fit: cover; border-radius: 4px; background: #eee; }

/* Badges */
.badge { padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-ok { background: #e4f3e8; color: var(--ok); }
.badge-off { background: #eee; color: var(--off); }

/* Alerts */
.alert { padding: 10px 14px; border-radius: 6px; font-size: 14px; margin: 12px 0; }
.alert-error { background: #fbeaea; color: var(--danger); border: 1px solid #f3cccb; }
.alert-ok { background: #e4f3e8; color: var(--ok); border: 1px solid #c7e6cf; }
.hint { font-size: 12px; color: var(--muted); }

/* Login */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.login-box {
    background: #fff;
    padding: 36px 32px;
    border-radius: 12px;
    width: 100%;
    max-width: 340px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.login-box h1 { margin: 0; color: var(--brand); }
.login-box .subtitle { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.login-box form { text-align: left; }
.login-box .btn { width: 100%; margin-top: 16px; }

html[data-theme="dark"] a { color: var(--brand); }
html[data-theme="dark"] .btn:not(.btn-outline),
html[data-theme="dark"] a.btn:not(.btn-outline),
html[data-theme="dark"] button.btn:not(.btn-outline) {
    color: #fff !important;
}
html[data-theme="dark"] .topbar { border-bottom: 1px solid var(--border); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .col,
html[data-theme="dark"] .tv-card,
html[data-theme="dark"] .tv-card.off,
html[data-theme="dark"] .backup-card,
html[data-theme="dark"] .user-card,
html[data-theme="dark"] .dev-card,
html[data-theme="dark"] .lib-card,
html[data-theme="dark"] .tv-item,
html[data-theme="dark"] .tv-item.inactive,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .trash-row,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .doc,
html[data-theme="dark"] .doc-toc,
html[data-theme="dark"] .media-table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .dropzone,
html[data-theme="dark"] .queue-item,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .token-box,
html[data-theme="dark"] .pv-body,
html[data-theme="dark"] .tv-menu,
html[data-theme="dark"] .user-dropdown,
html[data-theme="dark"] .screen-pick,
html[data-theme="dark"] .load-error,
html[data-theme="dark"] .sec-item,
html[data-theme="dark"] .media-table tr,
html[data-theme="dark"] .tv-card .tv-body,
html[data-theme="dark"] .empty-tv {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .sec-item.ok {
    background: #18211b !important;
    border-color: #294732 !important;
}
html[data-theme="dark"] .sec-item.warn {
    background: #241f14 !important;
    border-color: #5a431c !important;
}
html[data-theme="dark"] .dropzone {
    border-color: #565d62 !important;
}
html[data-theme="dark"] .dropzone:hover,
html[data-theme="dark"] .dropzone.dragover,
html[data-theme="dark"] .tv-list.dropping,
html[data-theme="dark"] .drop-hint.dropping {
    background: #183222 !important;
    border-color: var(--brand) !important;
    box-shadow: inset 0 0 0 3px rgba(63,157,94,.13) !important;
}
html[data-theme="dark"] .dropzone .dz-title,
html[data-theme="dark"] .dev-name,
html[data-theme="dark"] .trash-name,
html[data-theme="dark"] .ti-name,
html[data-theme="dark"] .metric b,
html[data-theme="dark"] .doc h2,
html[data-theme="dark"] .doc h3,
html[data-theme="dark"] .doc strong,
html[data-theme="dark"] .note strong,
html[data-theme="dark"] .warn strong,
html[data-theme="dark"] .tip strong {
    color: var(--text) !important;
}
html[data-theme="dark"] .dropzone .dz-sub,
html[data-theme="dark"] .metric span,
html[data-theme="dark"] .log,
html[data-theme="dark"] .trash-meta,
html[data-theme="dark"] .lc-name,
html[data-theme="dark"] .ti-meta,
html[data-theme="dark"] .col .col-hint,
html[data-theme="dark"] .doc p,
html[data-theme="dark"] .doc li {
    color: var(--muted) !important;
}
html[data-theme="dark"] .sec-title,
html[data-theme="dark"] .file-name,
html[data-theme="dark"] .tv-name,
html[data-theme="dark"] .backup-card h2 {
    color: var(--text) !important;
}
html[data-theme="dark"] .sec-detail,
html[data-theme="dark"] .file-meta,
html[data-theme="dark"] .tv-meta,
html[data-theme="dark"] .tv-now,
html[data-theme="dark"] .backup-card .desc,
html[data-theme="dark"] .backup-card .size {
    color: var(--muted) !important;
}
html[data-theme="dark"] .sec-fix {
    background: #171b1f !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .media-table th,
html[data-theme="dark"] .media-table td,
html[data-theme="dark"] .doc th,
html[data-theme="dark"] .doc td,
html[data-theme="dark"] .sched th,
html[data-theme="dark"] .sched td {
    border-color: var(--border) !important;
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .media-table th,
html[data-theme="dark"] .doc th {
    background: #20252a !important;
    color: var(--muted) !important;
}
html[data-theme="dark"] .media-table tbody tr:hover,
html[data-theme="dark"] .tv-opt:hover,
html[data-theme="dark"] .user-dropdown a:hover {
    background: #262b2e !important;
}
html[data-theme="dark"] .media-table tr.selected {
    background: #17321f !important;
}
html[data-theme="dark"] .act,
html[data-theme="dark"] .tv-btn,
html[data-theme="dark"] .trash-btn,
html[data-theme="dark"] .pager a,
html[data-theme="dark"] .pager span {
    background: #171b1f !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .act:hover,
html[data-theme="dark"] .tv-btn:hover,
html[data-theme="dark"] .trash-btn:hover,
html[data-theme="dark"] .pager a:hover {
    background: #262b2e !important;
    border-color: var(--brand) !important;
}
html[data-theme="dark"] .act.danger,
html[data-theme="dark"] .trash-btn.has {
    background: #251b18 !important;
    border-color: #5a302b !important;
    color: var(--danger) !important;
}
html[data-theme="dark"] .pager .current {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .url-field {
    background: #171b1f !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #7f8780;
}
html[data-theme="dark"] .alert,
html[data-theme="dark"] .alert-orphan,
html[data-theme="dark"] .warn-box,
html[data-theme="dark"] .tip,
html[data-theme="dark"] .pill-warn {
    background: #252115 !important;
    border-color: #4a3d1c !important;
    color: #d3ad63 !important;
}
html[data-theme="dark"] .alert-ok,
html[data-theme="dark"] .note,
html[data-theme="dark"] .role-help,
html[data-theme="dark"] .clip-note {
    background: #17231c !important;
    border-color: #2b4a37 !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .sec-item.fail,
html[data-theme="dark"] .warn,
html[data-theme="dark"] .metric.bad {
    background: #2a1917 !important;
    border-color: #4a2b27 !important;
    color: var(--danger) !important;
}
html[data-theme="dark"] .metric.warn {
    background: #252115 !important;
    border-color: #4a3d1c !important;
}
html[data-theme="dark"] .metric.warn b {
    color: #d3ad63 !important;
}
html[data-theme="dark"] .metric.bad b {
    color: var(--danger) !important;
}
html[data-theme="dark"] .btn-outline {
    color: var(--brand);
    border-color: var(--brand);
}
html[data-theme="dark"] .btn-outline:hover {
    background: rgba(63,157,94,.16);
}
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] button:disabled {
    opacity: .52;
    cursor: not-allowed;
}
html[data-theme="dark"] .badge-off,
html[data-theme="dark"] .chip.muted,
html[data-theme="dark"] .pill.off,
html[data-theme="dark"] .dot.off {
    background: #2a2f34 !important;
    color: var(--muted) !important;
}
html[data-theme="dark"] .badge-ok,
html[data-theme="dark"] .pill.on,
html[data-theme="dark"] .pill.live,
html[data-theme="dark"] .saved,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .dot.on {
    background: #17321f !important;
    color: var(--ok) !important;
}
html[data-theme="dark"] .where-warn {
    color: #d3ad63 !important;
}
html[data-theme="dark"] .where-off {
    color: var(--muted) !important;
}
html[data-theme="dark"] .thumb-video,
html[data-theme="dark"] .lc-video,
html[data-theme="dark"] .ti-video,
html[data-theme="dark"] .thumb-wrap img,
html[data-theme="dark"] .thumb,
html[data-theme="dark"] .lc-media,
html[data-theme="dark"] .ti-thumb,
html[data-theme="dark"] .trash-row img,
html[data-theme="dark"] .trash-ph {
    background: #252b31 !important;
    color: var(--muted) !important;
}
html[data-theme="dark"] .qi-placeholder,
html[data-theme="dark"] .qi-bar,
html[data-theme="dark"] .doc code,
html[data-theme="dark"] .placeholder,
html[data-theme="dark"] .meter,
html[data-theme="dark"] .url-row input {
    background: #252b31 !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .drop-hint {
    border-color: #565d62 !important;
    color: var(--muted) !important;
}
html[data-theme="dark"] .doc pre {
    background: #101316 !important;
    color: #e7ece8 !important;
}
html[data-theme="dark"] .doc-toc a {
    color: var(--text) !important;
}
html[data-theme="dark"] .doc-toc a.sub {
    color: var(--muted) !important;
}
html[data-theme="dark"] .doc-toc a:hover {
    background: #26342b !important;
}
html[data-theme="dark"] .doc-toc a.active {
    background: var(--brand) !important;
    color: #fff !important;
}
html[data-theme="dark"] .token-box code {
    background: #101316 !important;
    color: #7ee2a8 !important;
}
html[data-theme="dark"] .token-box p,
html[data-theme="dark"] .note-box {
    color: var(--text) !important;
}
html[data-theme="dark"] .tag {
    background: #2a2f34 !important;
    color: var(--muted) !important;
}
html[data-theme="dark"] .tag.opt,
html[data-theme="dark"] .chip.none,
html[data-theme="dark"] .days-left.soon {
    background: #252115 !important;
    color: #d3ad63 !important;
}
html[data-theme="dark"] .days-left.now,
html[data-theme="dark"] .pill-fail {
    background: #2a1917 !important;
    color: var(--danger) !important;
}
html[data-theme="dark"] .days-left {
    background: #17321f !important;
    color: var(--ok) !important;
}
html[data-theme="dark"] .badge-off-tv {
    background: #2a2f34 !important;
    color: var(--muted) !important;
}
html[data-theme="dark"] .login-box {
    background: var(--card-bg);
    color: var(--text);
}
html[data-theme="dark"] .login-body {
    background: linear-gradient(160deg, #101612 0%, #203225 100%);
}

/* Base responsive segura para el panel actual */
img, video { max-width: 100%; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 80;
}

.topbar-inner {
    max-width: min(1560px, 94vw);
}

.container {
    max-width: min(1560px, 94vw);
}

.brand-link {
    min-height: 34px;
}

.brand-logo {
    max-height: 30px;
}

.table,
.media-table {
    width: 100%;
}

.table-wrap,
.table-scroll,
.panel:has(.table),
.panel:has(.media-table) {
    overflow-x: auto;
}

@media (max-width: 900px) {
    .container {
        padding: 18px 14px 48px;
        max-width: 100%;
    }

    .topbar-inner {
        max-width: 100%;
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .topbar nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }

    .topbar nav a {
        flex: 0 0 auto;
        padding: 8px 10px;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .panel {
        padding: 16px;
    }

    .inline-form {
        align-items: stretch;
    }

    .inline-form > * {
        min-width: min(100%, 220px);
    }

    input[type=text],
    input[type=password],
    input[type=number],
    input[type=file],
    select,
    textarea {
        max-width: 100%;
        font-size: 16px;
    }
}

@media (max-width: 560px) {
    h1 {
        font-size: 22px;
        line-height: 1.2;
    }

    .topbar-user,
    .user-menu {
        margin-left: auto;
    }

    .btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .table th,
    .table td {
        padding: 9px 10px;
    }

    .login-body {
        padding: 18px;
    }
}