:root {
    --bg: #f8f5ef;
    --panel: #ffffff;
    --text: #2f2a22;
    --brand: #2f7d5f;
    --brand-dark: #225f48;
    --line: #ddd4c5;
    --theme-header-bg: #fffdf8;
    --theme-header-border: #ddd4c5;
    --theme-link-bg: linear-gradient(180deg, #f8ebd6 0%, #efd9b8 100%);
    --theme-link-border: #d0b896;
    --theme-link-color: #2d2418;
    --theme-panel-bg: #ffffff;
    --theme-input-bg: #ffffff;

    /* Tokens del sistema de color real usado en styles.css (heading, texto
       tenue, superficies y acentos azul/verde). Por ahora solo definidos
       aqui con el valor actual como default; nada los consume todavia. */
    --ink-heading: #17284a;
    --ink-muted: #5d6f8f;
    --surface: #ffffff;
    --accent-blue: #2f6de1;
    --accent-blue-dark: #2a63cd;
    --accent-blue-soft: #f4f8ff;
    --accent-blue-soft-strong: #e8f0ff;
    --accent-green: #23846a;
    --accent-green-dark: #1f755e;

    /* Topbar de escritorio (el header real que ven los usuarios logueados;
       .header solo se usa en movil). Defaults = valores actuales exactos
       de styles.css, cero cambio visual hasta que dark.css los redefina. */
    --theme-topbar-bg: linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, rgba(247, 241, 230, 0.92) 100%);
    --theme-topbar-meta-color: #5a5246;
    --theme-topbar-meta-strong-color: #2f2619;
    --theme-topbar-context-bg: #ffffff;
    --theme-topbar-link-bg: linear-gradient(180deg, #fffaf2 0%, #f1e0c5 100%);
    --theme-topbar-link-border: #d4bc99;
    --theme-topbar-link-color: #2d2418;
    --theme-topbar-link-hover-bg: linear-gradient(180deg, #fff6ea 0%, #e9d1ae 100%);
    --theme-topbar-link-hover-border: #b9905d;
    --theme-topbar-options-menu-bg: linear-gradient(180deg, rgba(255, 253, 248, 0.99) 0%, rgba(247, 241, 230, 0.97) 100%);
    --theme-topbar-options-menu-border: #d4bc99;
    --theme-topbar-options-head-small-color: #7a6242;
    --theme-topbar-options-open-bg: linear-gradient(180deg, #d6ac72 0%, #b27c42 100%);
    --theme-topbar-options-open-border: #976a36;
    --theme-topbar-options-open-color: #fffaf4;
    --theme-topbar-module-btn-bg: linear-gradient(180deg, #ecd4af 0%, #d9b682 100%);
    --theme-topbar-module-btn-border: #c3955a;
    --theme-topbar-module-btn-hover-bg: linear-gradient(180deg, #e7c796 0%, #d4aa71 100%);
    --theme-topbar-module-btn-hover-border: #9d6d35;
    --theme-topbar-module-btn-active-bg: linear-gradient(180deg, #b8894f 0%, #9e713c 100%);
    --theme-topbar-module-btn-active-border: #7d572b;
    --theme-topbar-module-btn-active-color: #fff9ef;

    /* Variante "compacta a pantalla completa" del topbar, usada en las 22
       paginas internas (lobby, caja rapida, domicilios, reportes...).
       Defaults = valores actuales exactos de esas paginas. */
    --theme-topbar-soft-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 255, 0.94) 100%);
    --theme-topbar-soft-options-menu-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.985) 0%, rgba(244, 248, 255, 0.975) 100%);
    --theme-topbar-soft-options-menu-border: rgba(60, 108, 216, 0.18);
    --theme-topbar-soft-options-menu-shadow: rgba(43, 80, 160, 0.16);
    --theme-topbar-soft-module-btn-bg: linear-gradient(180deg, #ffffff 0%, #e9f1ff 100%);
    --theme-topbar-soft-module-btn-border: rgba(60, 108, 216, 0.2);
    --theme-topbar-soft-module-btn-shadow: rgba(43, 80, 160, 0.08);
    --theme-topbar-soft-module-btn-hover-bg: linear-gradient(180deg, #ffffff 0%, #dfeaff 100%);
    --theme-topbar-soft-module-btn-hover-border: rgba(60, 108, 216, 0.34);
    --theme-topbar-soft-module-btn-hover-shadow: rgba(43, 80, 160, 0.12);
    --theme-topbar-soft-module-btn-active-bg: linear-gradient(135deg, var(--accent-blue) 0%, #2457b8 100%);
    --theme-topbar-soft-module-btn-active-border: rgba(36, 87, 184, 0.88);

    /* Menu "Opciones" real (el bloque que gana la cascada por orden de
       aparicion en el archivo, mas abajo que el generico de arriba). */
    --theme-options-menu-bg: linear-gradient(180deg, rgba(235, 242, 255, 0.99) 0%, rgba(222, 232, 249, 0.99) 100%);
    --theme-options-menu-border: rgba(84, 116, 170, 0.2);
    --theme-options-menu-shadow: rgba(18, 39, 82, 0.18);
    --theme-options-head-border: rgba(84, 116, 170, 0.18);
    --theme-options-head-small: #64748f;
    --theme-options-module-border: rgba(115, 151, 215, 0.34);
    --theme-options-module-bg: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
    --theme-options-module-shadow: rgba(47, 109, 225, 0.08);
    --theme-options-module-hover-border: rgba(47, 109, 225, 0.42);
    --theme-options-module-hover-bg-end: #dce9ff;
    --theme-options-module-hover-shadow: rgba(47, 109, 225, 0.12);
    --theme-options-module-active-border: rgba(47, 109, 225, 0.28);
    --theme-options-module-active-bg: linear-gradient(180deg, #edf4ff 0%, #dbe9ff 100%);
    --theme-options-module-active-color: #12366d;
    --theme-options-module-active-shadow: rgba(47, 109, 225, 0.08);
}

body[data-theme] {
    background: var(--bg);
    color: var(--text);
}

body[data-theme] .header {
    background: var(--theme-header-bg);
    border-bottom-color: var(--theme-header-border);
}

body[data-theme] .header-meta {
    color: rgba(47, 42, 34, 0.78);
}

body[data-theme] .header-link {
    background: var(--theme-link-bg);
    border-color: var(--theme-link-border);
    color: var(--theme-link-color);
}

body[data-theme] .header-link:hover {
    filter: brightness(0.96);
}

body[data-theme] .header-actions .btn-small {
    border-color: #7d2a2a;
    background: linear-gradient(180deg, #c94848 0%, #9f2e2e 100%);
    color: #fff9f6;
}

body[data-theme] .header-actions .btn-small:hover {
    background: linear-gradient(180deg, #b73d3d 0%, #8b2424 100%);
}

body[data-theme] .license-pill {
    background: #e8f5eb;
    border-color: #9ac7a9;
}

body[data-theme] .panel {
    background: var(--theme-panel-bg);
    border-color: var(--line);
}

body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea {
    background: var(--theme-input-bg);
    color: var(--text);
    border-color: var(--line);
}

body[data-theme] .btn {
    background: var(--brand);
}

body[data-theme] .btn:hover {
    background: var(--brand-dark);
}

body[data-theme="dark"] .header-meta {
    color: rgba(231, 234, 240, 0.8);
}

body[data-theme] .topbar {
    background: var(--theme-topbar-bg);
    border-color: var(--line);
}

body[data-theme] .topbar-meta {
    color: var(--theme-topbar-meta-color);
}

body[data-theme] .topbar-meta strong,
body[data-theme] .topbar-context-label strong {
    color: var(--theme-topbar-meta-strong-color);
}

body[data-theme] .topbar-context-label {
    color: var(--theme-topbar-meta-color);
    background: var(--theme-topbar-context-bg);
    border-color: var(--line);
}

body[data-theme] .topbar-link {
    background: var(--theme-topbar-link-bg);
    border-color: var(--theme-topbar-link-border);
    color: var(--theme-topbar-link-color);
}

body[data-theme] .topbar-link:hover {
    color: var(--theme-topbar-link-color);
    background: var(--theme-topbar-link-hover-bg);
    border-color: var(--theme-topbar-link-hover-border);
}

body[data-theme] .topbar-options-menu {
    background: var(--theme-topbar-options-menu-bg);
    border-color: var(--theme-topbar-options-menu-border);
}

body[data-theme] .topbar-options-head strong {
    color: var(--theme-topbar-link-color);
}

body[data-theme] .topbar-options-head small {
    color: var(--theme-topbar-options-head-small-color);
}

body[data-theme] .topbar-options[open] > .topbar-link--button {
    color: var(--theme-topbar-options-open-color);
    border-color: var(--theme-topbar-options-open-border);
    background: var(--theme-topbar-options-open-bg);
}

body[data-theme] .topbar-options-grid .module-btn {
    background: var(--theme-topbar-module-btn-bg);
    border-color: var(--theme-topbar-module-btn-border);
    color: var(--theme-topbar-link-color);
}

body[data-theme] .topbar-options-grid .module-btn:hover {
    background: var(--theme-topbar-module-btn-hover-bg);
    border-color: var(--theme-topbar-module-btn-hover-border);
}

body[data-theme] .topbar-options-grid .module-btn--active {
    background: var(--theme-topbar-module-btn-active-bg);
    border-color: var(--theme-topbar-module-btn-active-border);
    color: var(--theme-topbar-module-btn-active-color);
}