/* ════════════════════════════════════════════════════════════ TEMAS CENTERTEC - Clássico: usa main.css como está (nenhuma regra aqui). - Moderno e Android: skins via variáveis, claro/escuro. Ativados por + classe .tema-skin ════════════════════════════════════════════════════════════ */ /* ── Paletas (variáveis por combinação tema × modo) ─────────── */ html[data-tema="moderno"][data-modo="claro"] { --bg:#f5f6f8; --chrome:#ffffff; --chrome-txt:#444; --chrome-line:#e7e7e7; --accent:#e87000; --accent-txt:#ffffff; --accent-soft:#fff3e0; --accent-soft-txt:#e87000; --panel:#ffffff; --panel-txt:#1d1d1f; --line:#ececec; --soft:#fafafa; --soft-txt:#555; --title-bg:#e87000; --title-txt:#ffffff; --btn-bg:#f5f5f5; --btn-txt:#333; --btn-line:#dcdcdc; --input-bg:#ffffff; --input-txt:#1d1d1f; --input-line:#d4d4d4; --thead-bg:#f3f3f3; --thead-txt:#666; --row-alt:#fafafa; --rowhov-bg:#fff3e0; --rowhov-txt:#7a3d00; --tela-bg:#ffffff; --tela-txt:#e87000; --tela-line:#ececec; --sidebar-bg:#fafafa; --sidebar-txt:#555; --sidebar-hov:#fff3e0; --sidebar-hov-txt:#e87000; --radius:8px; --radius-lg:12px; } html[data-tema="moderno"][data-modo="escuro"] { --bg:#0c0c0c; --chrome:#141414; --chrome-txt:#bbb; --chrome-line:#222222; --accent:#e87000; --accent-txt:#ffffff; --accent-soft:#2c2009; --accent-soft-txt:#ff9d3d; --panel:#111111; --panel-txt:#e8e8e8; --line:#222222; --soft:#1a1a1a; --soft-txt:#aaa; --title-bg:#1c1c1c; --title-txt:#ff9d3d; --btn-bg:#1d1d1d; --btn-txt:#ddd; --btn-line:#333; --input-bg:#181818; --input-txt:#e8e8e8; --input-line:#2c2c2c; --thead-bg:#181818; --thead-txt:#999; --row-alt:#151515; --rowhov-bg:#2c2009; --rowhov-txt:#ff9d3d; --tela-bg:#101010; --tela-txt:#ff9d3d; --tela-line:#242424; --sidebar-bg:#111111; --sidebar-txt:#bbb; --sidebar-hov:#2c2009; --sidebar-hov-txt:#ff9d3d; --radius:8px; --radius-lg:12px; } html[data-tema="android"][data-modo="claro"] { --bg:#f4eefb; --chrome:#ffffff; --chrome-txt:#49454f; --chrome-line:#eae3f3; --accent:#e87000; --accent-txt:#ffffff; --accent-soft:#fbe7d6; --accent-soft-txt:#a8430a; --panel:#ffffff; --panel-txt:#1d1b20; --line:#eae3f3; --soft:#f7f2fc; --soft-txt:#5b5560; --title-bg:#e87000; --title-txt:#ffffff; --btn-bg:#f1eafa; --btn-txt:#4a4458; --btn-line:#e0d7ee; --input-bg:#ffffff; --input-txt:#1d1b20; --input-line:#d8cfe6; --thead-bg:#f1eafa; --thead-txt:#6b6577; --row-alt:#faf6ff; --rowhov-bg:#fbe7d6; --rowhov-txt:#a8430a; --tela-bg:#ffffff; --tela-txt:#e87000; --tela-line:#eae3f3; --sidebar-bg:#f7f2fc; --sidebar-txt:#5b5560; --sidebar-hov:#fbe7d6; --sidebar-hov-txt:#a8430a; --radius:14px; --radius-lg:18px; } html[data-tema="android"][data-modo="escuro"] { --bg:#0b0a0e; --chrome:#141218; --chrome-txt:#cac4d0; --chrome-line:#231f29; --accent:#e87000; --accent-txt:#ffffff; --accent-soft:#2c2009; --accent-soft-txt:#ffb77a; --panel:#110f15; --panel-txt:#e6e0e9; --line:#231f29; --soft:#191620; --soft-txt:#cac4d0; --title-bg:#1c1922; --title-txt:#ffb77a; --btn-bg:#1c1922; --btn-txt:#e6e0e9; --btn-line:#312d38; --input-bg:#191620; --input-txt:#e6e0e9; --input-line:#312d38; --thead-bg:#17141d; --thead-txt:#a39fab; --row-alt:#151220; --rowhov-bg:#2c2009; --rowhov-txt:#ffb77a; --tela-bg:#110f15; --tela-txt:#ffb77a; --tela-line:#231f29; --sidebar-bg:#0f0e13; --sidebar-txt:#cac4d0; --sidebar-hov:#2c2009; --sidebar-hov-txt:#ffb77a; --radius:14px; --radius-lg:18px; } /* Corporativo (estilo dashboard azul da foto) */ html[data-tema="corporativo"][data-modo="claro"] { --bg:#eef2f7; --chrome:#ffffff; --chrome-txt:#3a4654; --chrome-line:#e3e8ef; --accent:#1f6fe5; --accent-txt:#ffffff; --accent-soft:#e8f1ff; --accent-soft-txt:#1f6fe5; --panel:#ffffff; --panel-txt:#27313c; --line:#e6ebf1; --soft:#f5f8fc; --soft-txt:#5b6b7d; --title-bg:#1f6fe5; --title-txt:#ffffff; --btn-bg:#f2f6fc; --btn-txt:#33414f; --btn-line:#d7e0ea; --input-bg:#ffffff; --input-txt:#27313c; --input-line:#d3dce6; --thead-bg:#eef4fb; --thead-txt:#5a6b7d; --row-alt:#f7fafd; --rowhov-bg:#e8f1ff; --rowhov-txt:#11589e; --tela-bg:#ffffff; --tela-txt:#1f6fe5; --tela-line:#e6ebf1; --sidebar-bg:#1f6fe5; --sidebar-txt:#ffffff; --sidebar-hov:#ffffff; --sidebar-hov-txt:#1f6fe5; --radius:8px; --radius-lg:12px; } html[data-tema="corporativo"][data-modo="escuro"] { --bg:#08090b; --chrome:#0e0f12; --chrome-txt:#c2c6cc; --chrome-line:#1c1e21; --accent:#3b8bff; --accent-txt:#ffffff; --accent-soft:#152232; --accent-soft-txt:#7fb4ff; --panel:#0b0c0e; --panel-txt:#e6e8ec; --line:#212327; --soft:#141518; --soft-txt:#a2a6ad; --title-bg:#1a4f9e; --title-txt:#ffffff; --btn-bg:#181a1d; --btn-txt:#dbe0e6; --btn-line:#2a2d32; --input-bg:#121316; --input-txt:#e6e8ec; --input-line:#2a2d32; --thead-bg:#141518; --thead-txt:#a2a6ad; --row-alt:#111214; --rowhov-bg:#15304c; --rowhov-txt:#9fc4ff; --tela-bg:#0b0c0e; --tela-txt:#7fb4ff; --tela-line:#212327; --sidebar-bg:#0d1319; --sidebar-txt:#cfd6df; --sidebar-hov:#1f6fe5; --sidebar-hov-txt:#ffffff; --radius:8px; --radius-lg:12px; } /* ── Regras consumidoras (só quando .tema-skin está ativo) ──── */ html.tema-skin body { background: var(--bg); color: var(--panel-txt); } /* Barra de abas / menu topo */ html.tema-skin #tab-bar { background: var(--chrome); border-bottom: 1px solid var(--chrome-line); } html.tema-skin .tab-btn { background: transparent; color: var(--chrome-txt); border: none; border-radius: var(--radius) var(--radius) 0 0; } html.tema-skin .tab-btn:hover { background: var(--soft); } html.tema-skin .tab-btn.active { background: transparent; color: var(--accent); border: none; font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); } /* Menu superior (faixa de itens) */ html.tema-skin #top-menu { background: var(--chrome); border-bottom: 1px solid var(--chrome-line); } html.tema-skin #top-menu .menu-item { color: var(--chrome-txt); } html.tema-skin #top-menu .menu-item:hover { background: var(--accent); color: var(--accent-txt); } /* Sidebars / conteúdo */ html.tema-skin #left-sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--chrome-line); } html.tema-skin .sidebar-btn { color: var(--sidebar-txt); } html.tema-skin .sidebar-btn:hover, html.tema-skin .sidebar-btn.active { background: var(--sidebar-hov); color: var(--sidebar-hov-txt); border-color: transparent; border-radius: var(--radius); } html.tema-skin .sidebar-btn:hover .btn-icon { filter: none; } html.tema-skin .sidebar-subitem { background: var(--soft); color: var(--soft-txt); } html.tema-skin .sidebar-section { color: var(--soft-txt); border-top-color: var(--line); } html.tema-skin #main-content { background: var(--panel); } /* Barra DIREITA (relógio, calendário, avisos) — segue o tema igual à esquerda */ html.tema-skin #right-sidebar { background: var(--sidebar-bg); border-left: 1px solid var(--chrome-line); } html.tema-skin #clock-area { background: var(--soft); border-bottom: 1px solid var(--line); } html.tema-skin #clock-day { color: var(--soft-txt); } html.tema-skin #clock-digital { color: var(--accent); } html.tema-skin .cal-block { border-bottom: 1px solid var(--line); } html.tema-skin .cal-title { color: var(--accent); } html.tema-skin .cal-grid .day-name { color: var(--soft-txt); } html.tema-skin .cal-grid .day { color: var(--panel-txt); } html.tema-skin .cal-grid .day.today { background: var(--accent); color: var(--accent-txt); } /* Barra inferior */ html.tema-skin #bottom-bar { background: var(--chrome); border-top: 1px solid var(--chrome-line); color: var(--chrome-txt); } html.tema-skin #bottom-bar .reg-info { color: var(--accent); } html.tema-skin .code-info { color: var(--chrome-txt); } /* Modais */ html.tema-skin .modal-window { background: var(--panel); color: var(--panel-txt); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 8px 30px rgba(0,0,0,.25); overflow: hidden; } html.tema-skin .modal-titlebar { background: var(--title-bg); color: var(--title-txt); } html.tema-skin .win-ctrl { background: transparent; color: var(--title-txt); border: none; } html.tema-skin .win-ctrl.cls:hover { background: rgba(0,0,0,.2); color: #fff; } /* Botões */ html.tema-skin .win-btn, html.tema-skin .btn-padrao, html.tema-skin .btn-mini { background: var(--btn-bg); color: var(--btn-txt); border: 1px solid var(--btn-line); border-radius: var(--radius); } html.tema-skin .win-btn:hover, html.tema-skin .btn-padrao:hover, html.tema-skin .btn-mini:hover { background: var(--soft); } html.tema-skin .win-btn:active { border-color: var(--btn-line); } html.tema-skin .win-btn.primary { background: var(--accent); color: var(--accent-txt); border-color: var(--accent); } html.tema-skin .win-btn.danger, html.tema-skin .btn-mini-danger { color: #e0484a; border-color: #e0484a; } /* Inputs */ html.tema-skin .win-input, html.tema-skin .win-select, html.tema-skin #bottom-search { background: var(--input-bg); color: var(--input-txt); border: 1px solid var(--input-line); border-radius: var(--radius); } html.tema-skin .win-input:focus, html.tema-skin .win-select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); } /* Tabelas */ html.tema-skin .win-table th { background: var(--thead-bg); color: var(--thead-txt); border: 1px solid var(--line); font-weight: 600; } html.tema-skin .win-table td { border: 1px solid var(--line); color: var(--panel-txt); } html.tema-skin .win-table tr:nth-child(even) td { background: var(--row-alt); } html.tema-skin .win-table tr:hover td { background: var(--rowhov-bg); color: var(--rowhov-txt); } /* Telas de módulo */ html.tema-skin .tela-modulo { background: var(--panel); } html.tema-skin .tela-header { background: var(--tela-bg); color: var(--tela-txt); border-bottom: 1px solid var(--tela-line); font-weight: 600; } html.tema-skin .tela-body { background: var(--panel); color: var(--panel-txt); } /* Abas internas (OS, contas) */ html.tema-skin .os-tabs, html.tema-skin .os-tab { background: var(--soft); color: var(--soft-txt); border-color: var(--line); } html.tema-skin .os-tab.active { background: var(--panel); color: var(--accent); } html.tema-skin .contas-aba { background: var(--soft); color: var(--soft-txt); border-color: var(--line); } html.tema-skin .contas-aba.aba-ativa { background: var(--panel); color: var(--accent); border-bottom-color: var(--panel); } html.tema-skin .field-label, html.tema-skin .os-client-label, html.tema-skin .os-footer label { color: var(--accent-soft-txt); } /* Painéis e caixas */ html.tema-skin .win-panel-box { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); } html.tema-skin .os-values-block, html.tema-skin .os-client-block, html.tema-skin .search-form-right { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); color: var(--panel-txt); } /* Transição suave ao trocar de tema */ html.tema-skin body, html.tema-skin #tab-bar, html.tema-skin #main-content, html.tema-skin .modal-window { transition: background .15s ease, color .15s ease; } /* ── Ícones SVG planos: SÓ no tema corporativo (substituem os emojis) ── */ html[data-tema="corporativo"] .btn-icon { font-size: 0; /* esconde o emoji */ background-color: var(--sidebar-txt); -webkit-mask: var(--ico) center / 24px 24px no-repeat; mask: var(--ico) center / 24px 24px no-repeat; } html[data-tema="corporativo"] .sidebar-btn:hover .btn-icon, html[data-tema="corporativo"] .sidebar-btn.active .btn-icon { background-color: var(--sidebar-hov-txt); /* ícone azul sobre o item branco ativo */ } html[data-tema="corporativo"] .sidebar-subitem .btn-icon { background-color: var(--accent); } /* ── Botão claro/escuro na barra de abas ────────────────────── */ #tema-toggle { margin-left: auto; display: flex; align-items: center; gap: 4px; padding: 0 10px; cursor: pointer; font-size: 11px; color: inherit; user-select: none; border: none; background: transparent; } #tema-toggle:hover { background: rgba(128,128,128,.18); }