@charset "UTF-8"; /* ========================================================================== Conecta2 — camada de interface -------------------------------------------------------------------------- Reveste Bootstrap 3.3.7 + AdminLTE com a identidade do login (indigo -> roxo sobre fundo escuro, Outfit + Inter). Carrega DEPOIS de style.css, então as regras daqui vencem por ordem de cascata; !important só aparece onde há estilo inline ou !important legado para derrubar. Tema: atributo data-theme no ("dark" ou "light"). O padrão é dark. Sumário 01. Tokens 02. Base e tipografia 03. Layout: topbar, sidebar, conteúdo, rodapé 04. Cabeçalho de página e barra de ferramentas 05. Cards (box / panel) 06. Botões 07. Formulários 08. Tabelas, DataTables e paginação 09. Abas 10. Alertas, etiquetas e badges 11. Modais e dropdowns 12. Select2 e upload de arquivo 13. Trilha de canais (elemento-assinatura) 14. Cartões de número e estado vazio 15. Responsivo 16. Acessibilidade e movimento ========================================================================== */ /* 01. Tokens ============================================================== */ :root, [data-theme="dark"] { --c2-bg: #0b0f19; --c2-bg-elev: #0e1421; --c2-surface: #111827; --c2-surface-2: #161f31; --c2-surface-3: #1d2739; --c2-line: #223047; --c2-line-strong: #2e3d57; --c2-text: #eef2f9; --c2-text-2: #b3c0d4; --c2-muted: #8496b0; --c2-brand: #6366f1; --c2-brand-hi: #818cf8; --c2-brand-2: #a855f7; --c2-accent: #38bdf8; --c2-on-brand: #ffffff; --c2-ok: #34d399; --c2-warn: #fbbf24; --c2-danger: #fb7185; --c2-info: #38bdf8; --c2-ok-bg: rgba(52, 211, 153, .12); --c2-warn-bg: rgba(251, 191, 36, .12); --c2-danger-bg: rgba(251, 113, 133, .12); --c2-info-bg: rgba(56, 189, 248, .12); --c2-brand-bg: rgba(99, 102, 241, .14); --c2-grad: linear-gradient(135deg, #6366f1 0%, #818cf8 48%, #a855f7 100%); --c2-ring: rgba(129, 140, 248, .55); --c2-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 28px -18px rgba(0, 0, 0, .8); --c2-shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 28px 60px -28px rgba(0, 0, 0, .85); --c2-glass: rgba(148, 163, 184, .06); --c2-topbar-h: 64px; --c2-sidebar-w: 268px; --c2-sidebar-mini-w: 76px; --c2-r-xs: 6px; --c2-r-sm: 9px; --c2-r: 12px; --c2-r-lg: 16px; --c2-r-pill: 999px; --c2-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --c2-display: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --c2-ease: cubic-bezier(.4, 0, .2, 1); } [data-theme="light"] { --c2-bg: #f5f7fc; --c2-bg-elev: #ffffff; --c2-surface: #ffffff; --c2-surface-2: #f3f5fa; --c2-surface-3: #e9edf6; --c2-line: #e3e8f2; --c2-line-strong: #cdd6e6; --c2-text: #0e1729; --c2-text-2: #42536e; --c2-muted: #6b7c96; --c2-brand: #5457e5; --c2-brand-hi: #6366f1; --c2-brand-2: #9333ea; --c2-accent: #0284c7; --c2-ok: #059669; --c2-warn: #b45309; --c2-danger: #dc2626; --c2-info: #0284c7; --c2-ok-bg: rgba(5, 150, 105, .1); --c2-warn-bg: rgba(180, 83, 9, .1); --c2-danger-bg: rgba(220, 38, 38, .09); --c2-info-bg: rgba(2, 132, 199, .1); --c2-brand-bg: rgba(84, 87, 229, .1); --c2-ring: rgba(84, 87, 229, .4); --c2-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -18px rgba(15, 23, 42, .22); --c2-shadow-lg: 0 2px 4px rgba(15, 23, 42, .06), 0 26px 56px -26px rgba(15, 23, 42, .28); --c2-glass: rgba(15, 23, 42, .035); } /* 02. Base e tipografia =================================================== */ html { background-color: var(--c2-bg); } body.skin-blue, body { background-color: var(--c2-bg); color: var(--c2-text); font-family: var(--c2-sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv05", "cv08"; } .skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side, .wrapper { background-color: var(--c2-bg); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--c2-display); color: var(--c2-text); font-weight: 700; letter-spacing: -.015em; margin-top: 0; } h1, .h1 { font-size: 27px; } h2, .h2 { font-size: 22px; } h3, .h3 { font-size: 19px; } h4, .h4 { font-size: 16px; } h5, .h5 { font-size: 14px; } p { color: var(--c2-text-2); } a { color: var(--c2-brand-hi); text-decoration: none; transition: color .15s var(--c2-ease); } a:hover, a:focus { color: var(--c2-brand-2); text-decoration: none; } small, .small { font-size: 12.5px; } code, pre, kbd, samp { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; } pre { background: var(--c2-surface-2); border: 1px solid var(--c2-line); border-radius: var(--c2-r-sm); color: var(--c2-text-2); } code { background: var(--c2-brand-bg); color: var(--c2-brand-hi); border-radius: var(--c2-r-xs); padding: 2px 6px; } hr { border-top: 1px solid var(--c2-line); } .text-muted, .help-block, .description { color: var(--c2-muted); } .text-primary { color: var(--c2-brand-hi); } .text-success { color: var(--c2-ok); } .text-danger { color: var(--c2-danger); } .text-warning { color: var(--c2-warn); } .text-info { color: var(--c2-info); } /* Barras de rolagem: o tema antigo escondia todas, o que tira a única pista de que há mais conteúdo abaixo. Aqui elas voltam, discretas. */ * { scrollbar-width: thin; scrollbar-color: var(--c2-line-strong) transparent; } *::-webkit-scrollbar { display: block !important; width: 10px !important; height: 10px !important; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--c2-line-strong); border: 2px solid transparent; background-clip: content-box; border-radius: var(--c2-r-pill); } *::-webkit-scrollbar-thumb:hover { background: var(--c2-muted); background-clip: content-box; } /* 03. Layout ============================================================== */ /* --- Topbar --- */ .main-header { position: fixed; top: 0; left: 0; right: 0; height: var(--c2-topbar-h); z-index: 1030; } /* Barra opaca, sem backdrop-filter: o desfoque criava um contexto de empilhamento que apagava a marca posicionada atrás dela no mobile, e numa barra de 64px o efeito não acrescentava nada. */ .main-header .navbar, .skin-blue .main-header .navbar { background: var(--c2-bg-elev); border-bottom: 1px solid var(--c2-line); box-shadow: none; min-height: var(--c2-topbar-h); height: var(--c2-topbar-h); margin-left: var(--c2-sidebar-w); border-radius: 0; transition: margin-left .3s var(--c2-ease); } /* Marca, na coluna da sidebar */ .logo-class, .skin-blue .main-header .logo-class { width: var(--c2-sidebar-w); height: var(--c2-topbar-h); display: flex; align-items: center; padding: 0 20px; margin: 0; background: var(--c2-bg-elev); border-bottom: 1px solid var(--c2-line); border-right: 1px solid var(--c2-line); overflow: hidden; transition: width .3s var(--c2-ease); } /* O logo padrão vinha com color:#fff inline sobre sidebar clara — some no tema claro. Os tokens abaixo derrubam o inline nos dois temas. */ .logo-class > a { display: flex !important; align-items: center; gap: 10px !important; padding: 0 !important; color: var(--c2-text) !important; font-family: var(--c2-display); white-space: nowrap; } .logo-class > a > span, .logo-class > a span span { color: inherit !important; font-family: var(--c2-display) !important; font-size: 21px !important; font-weight: 800 !important; letter-spacing: -.5px !important; } .logo-class > a span span { background: var(--c2-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; } .logo-class > a > i { color: var(--c2-brand-hi) !important; font-size: 19px !important; } .logo-class img { max-height: 34px; width: auto; } .main-header .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 13px 0 13px 14px; padding: 0; border-radius: var(--c2-r-sm); color: var(--c2-text-2) !important; background: transparent; border: 1px solid transparent; float: left; transition: background .15s var(--c2-ease), color .15s var(--c2-ease); } .main-header .sidebar-toggle:before { content: none !important; display: none !important; } .main-header .sidebar-toggle .c2-hamburger { display: inline-flex !important; width: 18px; height: 14px; flex-direction: column; justify-content: space-between; flex: none; color: inherit; } .main-header .sidebar-toggle .c2-hamburger > span { display: block !important; width: 18px; height: 2px; min-height: 2px; border: 0; border-radius: 999px; background: currentColor !important; opacity: 1 !important; transform: none; } .main-header .sidebar-toggle:hover, .main-header .sidebar-toggle:focus, .main-header .sidebar-toggle:active, .skin-blue .main-header .navbar .sidebar-toggle:hover, .skin-blue .main-header .navbar .sidebar-toggle:focus, .skin-blue .main-header .navbar .sidebar-toggle:active { background: var(--c2-glass); color: var(--c2-text) !important; border-color: var(--c2-line); } .navbar-custom-menu { display: flex; align-items: center; gap: 4px; height: var(--c2-topbar-h); padding-right: 14px; float: right; } .navbar-custom-menu > .navbar-nav { margin: 0; display: flex; align-items: center; } .skin-blue .main-header .navbar .nav > li > a { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px 0 6px; border-radius: var(--c2-r-pill); color: var(--c2-text-2); font-size: 13.5px; font-weight: 500; line-height: normal; background: transparent; transition: background .15s var(--c2-ease), color .15s var(--c2-ease); } .skin-blue .main-header .navbar .nav > li > a:hover, .skin-blue .main-header .navbar .nav > li > a:focus, .skin-blue .main-header .navbar .nav .open > a, .skin-blue .main-header .navbar .nav .open > a:hover { background: var(--c2-glass); color: var(--c2-text); } /* Avatar em vez de um ícone solto */ .skin-blue .main-header .navbar .nav > li.user-menu > a > i.fa-user-circle { width: 30px; height: 30px; border-radius: 50%; background: var(--c2-grad); color: #fff; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; } .skin-blue .main-header .navbar .nav > li.user-menu > a > i.fa-angle-down { font-size: 13px; color: var(--c2-muted); margin: 0; } /* --- Botão de tema --- */ .c2-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 6px 0 0; border-radius: var(--c2-r-sm); border: 1px solid var(--c2-line); background: var(--c2-glass); color: var(--c2-text-2); cursor: pointer; transition: color .15s var(--c2-ease), border-color .15s var(--c2-ease), background .15s var(--c2-ease); } .c2-theme-toggle:hover { color: var(--c2-text); border-color: var(--c2-line-strong); } .c2-theme-toggle i { font-size: 15px; } [data-theme="dark"] .c2-theme-toggle .c2-icon-sun, [data-theme="light"] .c2-theme-toggle .c2-icon-moon { display: none; } [data-theme="dark"] .c2-theme-toggle .c2-icon-moon { color: var(--c2-accent); } [data-theme="light"] .c2-theme-toggle .c2-icon-sun { color: var(--c2-warn); } /* --- Sidebar --- */ .main-sidebar, .skin-blue .main-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--c2-sidebar-w); padding-top: var(--c2-topbar-h); background-color: var(--c2-bg-elev) !important; border-right: 1px solid var(--c2-line); z-index: 1020; min-height: 100%; transition: width .3s var(--c2-ease), transform .3s var(--c2-ease); } .main-sidebar .sidebar { padding: 14px 12px 24px; height: 100%; overflow-y: auto; overflow-x: hidden; } .sidebar-menu { display: flex; flex-direction: column; gap: 2px; } .sidebar-menu > li { position: relative; } .sidebar-menu > li > a, .skin-blue .sidebar-menu > li > a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--c2-r-sm); color: var(--c2-text-2); font-size: 14px; font-weight: 500; border-left: 0; white-space: nowrap; transition: background .15s var(--c2-ease), color .15s var(--c2-ease); } .sidebar-menu > li > a > i, .skin-blue .sidebar-menu > li > a > i { width: 20px; min-width: 20px; text-align: center; font-size: 16px; color: var(--c2-muted); transition: color .15s var(--c2-ease); } .sidebar-menu > li > a > span { overflow: hidden; text-overflow: ellipsis; } .sidebar-menu > li > a:hover, .skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li > a:focus { background: var(--c2-glass); color: var(--c2-text); } .sidebar-menu > li:hover > a > i { color: var(--c2-text-2); } /* Item ativo: barra em gradiente + fundo tingido, no lugar do bloco azul */ .sidebar-menu > li.active > a, .skin-blue .sidebar-menu > li.active > a, .skin-blue .sidebar-menu > li.active:hover > a { background: var(--c2-brand-bg); color: var(--c2-text); font-weight: 600; border-left: 0; } .sidebar-menu > li.active > a > i, .skin-blue .sidebar-menu > li.active > a > i { color: var(--c2-brand-hi); } .sidebar-menu > li.active > a::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 var(--c2-r-pill) var(--c2-r-pill) 0; background: var(--c2-grad); } /* Selo de atualização disponível */ .sidebar-menu .pull-right-container { margin-left: auto; display: inline-flex; align-items: center; } .sidebar-menu .pull-right-container .label { display: inline-block; min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--c2-danger) !important; box-shadow: 0 0 0 3px var(--c2-danger-bg); font-size: 0; line-height: 0; } .sidebar-menu .pull-right-container .label.fa-cloud-download::before { content: ""; } /* Título de grupo, quando houver */ .sidebar-menu > li.header { padding: 18px 12px 7px; color: var(--c2-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: transparent; } /* --- Sidebar recolhida (desktop) --- */ @media (min-width: 768px) { .sidebar-collapse .main-sidebar, .sidebar-mini.sidebar-collapse .main-sidebar { width: var(--c2-sidebar-mini-w); } .sidebar-collapse .logo-class { width: var(--c2-sidebar-mini-w); padding: 0; justify-content: center; } .sidebar-collapse .logo-class > a > span { display: none; } .sidebar-collapse .logo-class > a > i { font-size: 21px !important; } .sidebar-collapse .logo-class img { max-height: 28px; } .sidebar-collapse .main-header .navbar, .sidebar-collapse .content-wrapper, .sidebar-collapse .main-footer { margin-left: var(--c2-sidebar-mini-w); } .sidebar-collapse .main-sidebar .sidebar { padding: 14px 10px 24px; } .sidebar-collapse .sidebar-menu > li > a { justify-content: center; padding: 11px 0; } .sidebar-collapse .sidebar-menu > li > a > span, .sidebar-collapse .sidebar-menu .pull-right-container { display: none; } .sidebar-collapse .sidebar-menu > li.active > a::before { left: -10px; } /* Nome da seção ao passar o mouse */ .sidebar-collapse .sidebar-menu > li > a::after { content: attr(data-c2-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) scale(.96); padding: 6px 11px; border-radius: var(--c2-r-sm); background: var(--c2-surface-3); border: 1px solid var(--c2-line-strong); color: var(--c2-text); font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: var(--c2-shadow); opacity: 0; pointer-events: none; transition: opacity .14s var(--c2-ease), transform .14s var(--c2-ease); z-index: 1200; } .sidebar-collapse .sidebar-menu > li > a:hover::after, .sidebar-collapse .sidebar-menu > li > a:focus-visible::after { opacity: 1; transform: translateY(-50%) scale(1); } } /* --- Conteúdo --- */ .content-wrapper, .skin-blue .content-wrapper { background-color: var(--c2-bg) !important; margin-left: var(--c2-sidebar-w); padding-top: var(--c2-topbar-h); min-height: 100vh; transition: margin-left .3s var(--c2-ease); } section.content { padding: 22px 26px 40px; max-width: 1560px; } .content-header, .skin-blue .content-header { background: transparent; padding: 26px 26px 0; max-width: 1560px; } .content-header > h1, .content-header > h1 small { font-family: var(--c2-display); color: var(--c2-text); font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin: 0; display: flex; align-items: center; gap: 11px; } /* --- Rodapé --- */ .main-footer, .skin-blue .main-footer { background: transparent; border-top: 1px solid var(--c2-line); color: var(--c2-muted); font-size: 12.5px; margin-left: var(--c2-sidebar-w); padding: 16px 26px; transition: margin-left .3s var(--c2-ease); } .main-footer a { color: var(--c2-text-2); } .main-footer a:hover { color: var(--c2-brand-hi); } .main-footer b { color: var(--c2-text-2); font-weight: 600; } /* 04. Cabeçalho de página e barra de ferramentas =========================== */ .c2-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 26px 26px 4px; max-width: 1560px; } .c2-page-head__text { min-width: 0; } .c2-page-head__title { font-family: var(--c2-display); font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: var(--c2-text); margin: 0; display: flex; align-items: center; gap: 11px; } .c2-page-head__title > i { color: var(--c2-brand-hi); font-size: 20px; } .c2-page-head__sub { margin: 5px 0 0; color: var(--c2-muted); font-size: 13.5px; } .c2-page-head__actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .c2-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 16px; } .c2-toolbar__group { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } /* 05. Cards =============================================================== */ /* .box-primary aparece sozinho, sem .box, em duas telas: sem ele o card ficava sem fundo nem borda. */ .box, .box-primary, .panel, .panel-default, .nav-tabs-custom, .well { background: var(--c2-surface); border: 1px solid var(--c2-line); border-top: 1px solid var(--c2-line); border-radius: var(--c2-r-lg); box-shadow: var(--c2-shadow); color: var(--c2-text); margin-bottom: 20px; } .box.box-primary, .box.box-info, .box.box-success, .box.box-danger, .box.box-warning { border-top-color: var(--c2-line); } .box-header, .panel-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--c2-line); background: transparent; border-radius: var(--c2-r-lg) var(--c2-r-lg) 0 0; color: var(--c2-text); } .box-header.with-border { border-bottom: 1px solid var(--c2-line); } .box-header > .box-title, .box-title, .panel-title { font-family: var(--c2-display); font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--c2-text); margin: 0; line-height: 1.4; } .box-header > .box-tools { margin-left: auto; position: static; display: flex; align-items: center; gap: 6px; } .box-body, .panel-body { padding: 20px; background: transparent; border-radius: 0 0 var(--c2-r-lg) var(--c2-r-lg); } .box-header + .box-body { border-radius: 0; } .box-footer, .panel-footer { padding: 15px 20px; background: var(--c2-glass); border-top: 1px solid var(--c2-line); border-radius: 0 0 var(--c2-r-lg) var(--c2-r-lg); color: var(--c2-text-2); } .well { padding: 18px 20px; box-shadow: none; background: var(--c2-surface-2); } /* 06. Botões ============================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--c2-r-sm); font-family: var(--c2-sans); font-size: 13.5px; font-weight: 600; line-height: 1; letter-spacing: .005em; white-space: nowrap; box-shadow: none; transition: background .15s var(--c2-ease), border-color .15s var(--c2-ease), color .15s var(--c2-ease), transform .12s var(--c2-ease), opacity .15s var(--c2-ease); } .btn:active { transform: translateY(1px); } .btn-lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: var(--c2-r); } .btn-sm { height: 34px; padding: 0 12px; font-size: 12.5px; } .btn-xs { height: 29px; padding: 0 10px; font-size: 12px; } .btn-block { width: 100%; } /* .btn.btn-primary aparece com (0,2,0) no mingle-login.css e no style.css com um azul fixo; os seletores duplicam a classe para empatar e vencer. */ .btn-primary, .btn.btn-primary, .btn-primary:focus, .btn.btn-primary:focus { background: var(--c2-grad); border-color: transparent; color: var(--c2-on-brand); box-shadow: 0 1px 2px rgba(15, 23, 42, .25); } .btn-primary:hover, .btn.btn-primary:hover, .btn-primary:active, .btn.btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .open > .dropdown-toggle.btn-primary { background: linear-gradient(135deg, #5457e5 0%, #6f7bf2 48%, #9333ea 100%); border-color: transparent; color: var(--c2-on-brand); } .btn-default, .btn-default:focus { background: var(--c2-surface-2); border-color: var(--c2-line-strong); color: var(--c2-text); } .btn-default:hover, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background: var(--c2-surface-3); border-color: var(--c2-muted); color: var(--c2-text); } .btn-success, .btn-success:focus { background: var(--c2-ok); border-color: transparent; color: #05261b; } .btn-success:hover, .btn-success:active { background: color-mix(in srgb, var(--c2-ok) 86%, #000); color: #05261b; } .btn-danger, .btn-danger:focus { background: var(--c2-danger); border-color: transparent; color: #37060f; } .btn-danger:hover, .btn-danger:active { background: color-mix(in srgb, var(--c2-danger) 86%, #000); color: #37060f; } .btn-warning, .btn-warning:focus { background: var(--c2-warn); border-color: transparent; color: #331f01; } .btn-warning:hover, .btn-warning:active { background: color-mix(in srgb, var(--c2-warn) 86%, #000); color: #331f01; } .btn-info, .btn-info:focus { background: var(--c2-info); border-color: transparent; color: #04222f; } .btn-info:hover, .btn-info:active { background: color-mix(in srgb, var(--c2-info) 86%, #000); color: #04222f; } [data-theme="light"] .btn-success, [data-theme="light"] .btn-danger, [data-theme="light"] .btn-warning, [data-theme="light"] .btn-info { color: #fff; } [data-theme="light"] .btn-success:hover, [data-theme="light"] .btn-danger:hover, [data-theme="light"] .btn-warning:hover, [data-theme="light"] .btn-info:hover { color: #fff; } .btn-link { height: auto; padding: 0; color: var(--c2-brand-hi); font-weight: 500; border: 0; } .btn-link:hover { color: var(--c2-brand-2); text-decoration: none; } .btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: .5; box-shadow: none; } /* Botão só de ícone, usado nas colunas de ação das tabelas */ .c2-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; gap: 0; border-radius: var(--c2-r-sm); border: 1px solid transparent; background: transparent; color: var(--c2-muted); } .c2-icon-btn:hover { background: var(--c2-glass); border-color: var(--c2-line); color: var(--c2-text); } .c2-icon-btn--danger:hover { background: var(--c2-danger-bg); border-color: transparent; color: var(--c2-danger); } /* 07. Formulários ========================================================= */ label, .control-label { color: var(--c2-text-2); font-size: 13px; font-weight: 600; margin-bottom: 7px; letter-spacing: .002em; } .form-group { margin-bottom: 18px; } .form-control, select, select.form-control, textarea, textarea.form-control, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="datetime-local"], input[type="time"] { height: 40px; padding: 0 13px; background-color: var(--c2-surface-2); border: 1px solid var(--c2-line-strong); border-radius: var(--c2-r-sm); box-shadow: none; color: var(--c2-text); font-family: var(--c2-sans); font-size: 14px; transition: border-color .15s var(--c2-ease), box-shadow .15s var(--c2-ease), background .15s var(--c2-ease); } textarea, textarea.form-control { height: auto; min-height: 96px; padding: 11px 13px; line-height: 1.6; resize: vertical; } select, select.form-control { padding-right: 34px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238496b0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 11px 8px; } select[multiple], select[size] { height: auto; padding: 8px; background-image: none; } .form-control:focus, select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="date"]:focus { border-color: var(--c2-brand); box-shadow: 0 0 0 3px var(--c2-ring); background-color: var(--c2-surface-2); outline: 0; } .form-control::placeholder { color: var(--c2-muted); opacity: 1; } .form-control[readonly], .form-control[disabled], fieldset[disabled] .form-control { background-color: var(--c2-surface-3); color: var(--c2-muted); cursor: not-allowed; } .input-group-addon { background: var(--c2-surface-3); border: 1px solid var(--c2-line-strong); color: var(--c2-text-2); border-radius: var(--c2-r-sm); padding: 0 13px; font-size: 13.5px; } .input-group .form-control:first-child, .input-group-addon:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group .form-control:last-child, .input-group-addon:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .has-error .form-control, .has-error input, .has-error textarea, .has-error select { border-color: var(--c2-danger); } .has-error .form-control:focus { box-shadow: 0 0 0 3px var(--c2-danger-bg); } .has-error .control-label, .has-error .help-block, label.error, .error-msg, span.error { color: var(--c2-danger); } label.error, .error-msg { display: block; font-size: 12.5px; font-weight: 500; margin-top: 6px; } .has-success .form-control { border-color: var(--c2-ok); } /* Caixas de marcação nativas */ input[type="checkbox"], input[type="radio"] { accent-color: var(--c2-brand); width: 16px; height: 16px; margin-top: 1px; cursor: pointer; } .checkbox label, .radio label { font-weight: 500; color: var(--c2-text-2); } /* 08. Tabelas, DataTables e paginação ===================================== */ .table, table.dataTable { background: transparent; border-collapse: separate; border-spacing: 0; color: var(--c2-text); margin-bottom: 0; width: 100%; } .table > thead > tr > th, table.dataTable > thead > tr > th, table.dataTable thead th, .table > thead > tr > td { background: var(--c2-glass); border-bottom: 1px solid var(--c2-line); border-top: 0; color: var(--c2-muted); font-size: 11px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; padding: 12px 16px; vertical-align: middle; white-space: nowrap; } .table > tbody > tr > td, table.dataTable > tbody > tr > td, table.dataTable tbody td { background: transparent; border-top: 1px solid var(--c2-line); color: var(--c2-text-2); font-size: 13.5px; padding: 13px 16px; vertical-align: middle; } .table > tbody > tr:first-child > td, table.dataTable > tbody > tr:first-child > td { border-top: 0; } .table > tbody > tr > td strong, .table > tbody > tr > td b { color: var(--c2-text); font-weight: 600; } .table-hover > tbody > tr:hover, table.dataTable tbody tr:hover, table.dataTable.hover tbody tr:hover { background: var(--c2-glass); } .table-striped > tbody > tr:nth-of-type(odd), table.dataTable.stripe tbody tr.odd, table.dataTable tbody tr.odd { background: transparent; } .table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-color: var(--c2-line); } .table-bordered { border: 0; } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-left: 0; border-right: 0; } /* Tabelas largas rolam dentro do próprio card, sem empurrar a página */ .table-responsive, .dataTables_wrapper { border: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .dataTables_wrapper { color: var(--c2-text-2); } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: var(--c2-muted); font-size: 13px; } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { height: 36px; background: var(--c2-surface-2); border: 1px solid var(--c2-line-strong); border-radius: var(--c2-r-sm); color: var(--c2-text); } .dataTables_wrapper .dataTables_info { padding-top: 16px; } .dataTables_empty, td.dataTables_empty { background: transparent !important; color: var(--c2-muted) !important; padding: 40px 16px !important; text-align: center; font-size: 13.5px; } table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_disabled { background-color: var(--c2-glass) !important; color: var(--c2-muted) !important; cursor: pointer; } table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { color: var(--c2-text-2) !important; } .pagination { margin: 16px 0 0; display: inline-flex; gap: 4px; } .pagination > li > a, .pagination > li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 11px; background: var(--c2-surface-2); border: 1px solid var(--c2-line-strong); border-radius: var(--c2-r-sm) !important; color: var(--c2-text-2); font-size: 13px; font-weight: 500; transition: background .15s var(--c2-ease), color .15s var(--c2-ease), border-color .15s var(--c2-ease); } .pagination > li > a:hover, .pagination > li > a:focus { background: var(--c2-surface-3); border-color: var(--c2-muted); color: var(--c2-text); } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > a:focus { background: var(--c2-grad); border-color: transparent; color: var(--c2-on-brand); } .pagination > .disabled > a, .pagination > .disabled > span { background: transparent; border-color: var(--c2-line); color: var(--c2-muted); opacity: .6; } /* 09. Abas ================================================================ */ .nav-tabs, .nav-tabs-custom > .nav-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--c2-line); background: transparent; padding: 0 6px; margin: 0; } .nav-tabs > li, .nav-tabs-custom > .nav-tabs > li { margin: 0; float: none; border-top: 0; } .nav-tabs > li > a, .nav-tabs-custom > .nav-tabs > li > a { display: flex; align-items: center; gap: 8px; padding: 12px 15px; margin: 0; border: 0; border-radius: var(--c2-r-sm) var(--c2-r-sm) 0 0; background: transparent; color: var(--c2-muted); font-size: 13.5px; font-weight: 500; position: relative; transition: color .15s var(--c2-ease), background .15s var(--c2-ease); } .nav-tabs > li > a:hover, .nav-tabs-custom > .nav-tabs > li > a:hover { background: var(--c2-glass); border: 0; color: var(--c2-text-2); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus, .nav-tabs-custom > .nav-tabs > li.active > a { background: transparent; border: 0; color: var(--c2-brand-hi); font-weight: 650; } .nav-tabs > li.active > a::after, .nav-tabs-custom > .nav-tabs > li.active > a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: var(--c2-r-pill); background: var(--c2-grad); } .nav-tabs-custom > .nav-tabs > li.active { border-top-color: transparent; } .tab-content { background: transparent; padding: 20px; color: var(--c2-text); } .nav-pills > li > a { border-radius: var(--c2-r-pill); color: var(--c2-text-2); font-size: 13.5px; font-weight: 500; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background: var(--c2-grad); color: var(--c2-on-brand); } /* 10. Alertas, etiquetas e badges ========================================= */ .alert { display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; border: 1px solid transparent; border-radius: var(--c2-r); font-size: 13.5px; box-shadow: none; margin-bottom: 18px; } .alert .close { margin-left: auto; color: inherit; opacity: .55; font-size: 18px; text-shadow: none; font-weight: 500; } .alert .close:hover { opacity: 1; } .alert-success { background: var(--c2-ok-bg); border-color: color-mix(in srgb, var(--c2-ok) 40%, transparent); color: var(--c2-ok); } .alert-danger, .alert-error { background: var(--c2-danger-bg); border-color: color-mix(in srgb, var(--c2-danger) 40%, transparent); color: var(--c2-danger); } .alert-warning { background: var(--c2-warn-bg); border-color: color-mix(in srgb, var(--c2-warn) 40%, transparent); color: var(--c2-warn); } .alert-info { background: var(--c2-info-bg); border-color: color-mix(in srgb, var(--c2-info) 40%, transparent); color: var(--c2-info); } /* Alertas vazios não devem abrir um buraco no layout */ .alert:empty, .alert-error:empty, .alert:has(> .close:only-child) { display: none !important; } .label, .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--c2-r-pill); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.4; text-shadow: none; box-shadow: none; } .label-primary, .badge-primary { background: var(--c2-brand-bg); color: var(--c2-brand-hi); } .label-success, .badge-success { background: var(--c2-ok-bg); color: var(--c2-ok); } .label-danger, .badge-danger { background: var(--c2-danger-bg); color: var(--c2-danger); } .label-warning, .badge-warning { background: var(--c2-warn-bg); color: var(--c2-warn); } .label-info, .badge-info { background: var(--c2-info-bg); color: var(--c2-info); } .label-default, .badge { background: var(--c2-surface-3); color: var(--c2-text-2); } .bg-red { background: var(--c2-danger-bg) !important; color: var(--c2-danger) !important; } .bg-green { background: var(--c2-ok-bg) !important; color: var(--c2-ok) !important; } .bg-yellow { background: var(--c2-warn-bg) !important; color: var(--c2-warn) !important; } .bg-blue, .bg-aqua { background: var(--c2-info-bg) !important; color: var(--c2-info) !important; } /* Etiqueta de estado com ponto, para colunas de situação */ .c2-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: var(--c2-r-pill); background: var(--c2-surface-3); color: var(--c2-text-2); font-size: 12px; font-weight: 600; white-space: nowrap; } .c2-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .c2-status--ok { background: var(--c2-ok-bg); color: var(--c2-ok); } .c2-status--pending { background: var(--c2-warn-bg); color: var(--c2-warn); } .c2-status--fail { background: var(--c2-danger-bg); color: var(--c2-danger); } .c2-status--info { background: var(--c2-info-bg); color: var(--c2-info); } .c2-status--muted { background: var(--c2-surface-3); color: var(--c2-muted); } /* 11. Modais e dropdowns ================================================== */ .modal-backdrop.in { background: #05070d; opacity: .72; } .modal-content { background: var(--c2-surface); border: 1px solid var(--c2-line); border-radius: var(--c2-r-lg); box-shadow: var(--c2-shadow-lg); color: var(--c2-text); } .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--c2-line); background: transparent; } .modal-header .modal-title { font-family: var(--c2-display); font-size: 17px; font-weight: 650; color: var(--c2-text); } .modal-header .close { color: var(--c2-muted); opacity: 1; font-size: 22px; font-weight: 400; text-shadow: none; margin-top: -2px; } .modal-header .close:hover { color: var(--c2-text); } .modal-body { padding: 22px; background: transparent; color: var(--c2-text-2); } .modal-footer { padding: 15px 22px; border-top: 1px solid var(--c2-line); background: var(--c2-glass); border-radius: 0 0 var(--c2-r-lg) var(--c2-r-lg); display: flex; justify-content: flex-end; gap: 9px; } .modal-footer .btn + .btn { margin: 0; } .dropdown-menu, .main-header .navbar-custom-menu > .navbar-nav > li > .dropdown-menu { min-width: 208px; padding: 6px; background: var(--c2-surface); border: 1px solid var(--c2-line); border-radius: var(--c2-r); box-shadow: var(--c2-shadow-lg); margin-top: 8px; } .dropdown-menu > li > a, .main-header .navbar-custom-menu > .navbar-nav > li > .dropdown-menu li a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--c2-r-sm); color: var(--c2-text-2); font-size: 13.5px; font-weight: 500; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .main-header .navbar-custom-menu > .navbar-nav > li > .dropdown-menu li a:hover { background: var(--c2-glass); color: var(--c2-text); } .dropdown-menu > li > a > i { width: 16px; text-align: center; color: var(--c2-muted); } .dropdown-menu > li > a:hover > i { color: var(--c2-brand-hi); } .dropdown-menu .divider { background: var(--c2-line); margin: 6px 0; } .tooltip-inner { background: var(--c2-surface-3); border: 1px solid var(--c2-line-strong); color: var(--c2-text); border-radius: var(--c2-r-sm); padding: 7px 11px; font-size: 12.5px; box-shadow: var(--c2-shadow); } .tooltip.top .tooltip-arrow { border-top-color: var(--c2-line-strong); } .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--c2-line-strong); } .tooltip.left .tooltip-arrow { border-left-color: var(--c2-line-strong); } .tooltip.right .tooltip-arrow { border-right-color: var(--c2-line-strong); } /* 12. Select2 e upload de arquivo ========================================= */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .select2-container .select2-selection--single, .select2-container .select2-selection--multiple { min-height: 40px; background: var(--c2-surface-2); border: 1px solid var(--c2-line-strong); border-radius: var(--c2-r-sm); color: var(--c2-text); } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--c2-text); line-height: 38px; padding-left: 12px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--c2-muted); } .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--c2-brand-bg); border: 1px solid color-mix(in srgb, var(--c2-brand) 35%, transparent); border-radius: var(--c2-r-pill); color: var(--c2-brand-hi); padding: 3px 10px; font-size: 12.5px; font-weight: 500; margin: 5px 5px 0 0; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--c2-brand-hi); margin-right: 6px; } .select2-dropdown { background: var(--c2-surface); border: 1px solid var(--c2-line); border-radius: var(--c2-r); box-shadow: var(--c2-shadow-lg); } .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--c2-surface-2); border: 1px solid var(--c2-line-strong); border-radius: var(--c2-r-sm); color: var(--c2-text); height: 36px; padding: 0 11px; } .select2-container--default .select2-results__option { color: var(--c2-text-2); padding: 9px 12px; font-size: 13.5px; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--c2-brand-bg); color: var(--c2-text); } .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--c2-surface-3); color: var(--c2-text); } /* bootstrap-fileinput */ .file-input, .file-preview, .file-drop-disabled, .input-group.file-caption-main, .file-caption-main { background: transparent; border-color: var(--c2-line); color: var(--c2-text); } .file-preview { background: var(--c2-surface-2); border: 1px dashed var(--c2-line-strong); border-radius: var(--c2-r); padding: 10px; } .file-preview-thumbnails .file-preview-frame { background: var(--c2-surface-3); border: 1px solid var(--c2-line); border-radius: var(--c2-r-sm); box-shadow: none; margin: 6px; } input.file-caption-name, .file-caption-name { background: var(--c2-surface-2); color: var(--c2-text); } .btn-file, .fileinput-remove-button, .fileinput-upload-button { background: var(--c2-surface-2); border-color: var(--c2-line-strong); color: var(--c2-text); } .file-drop-zone { background: var(--c2-surface-2); border: 1px dashed var(--c2-line-strong); border-radius: var(--c2-r); color: var(--c2-muted); } .file-drop-zone-title { color: var(--c2-muted); } /* Datepicker / datetimepicker */ .bootstrap-datetimepicker-widget, .datepicker.dropdown-menu { background: var(--c2-surface); border: 1px solid var(--c2-line); border-radius: var(--c2-r); box-shadow: var(--c2-shadow-lg); color: var(--c2-text); padding: 10px; } .bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th, .datepicker table tr td, .datepicker table tr th { color: var(--c2-text-2); border-radius: var(--c2-r-sm); } .bootstrap-datetimepicker-widget table td.day:hover, .datepicker table tr td.day:hover { background: var(--c2-glass); color: var(--c2-text); } .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover, .datepicker table tr td.active, .datepicker table tr td.active.active { background: var(--c2-grad) !important; color: var(--c2-on-brand) !important; text-shadow: none; } .bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new, .datepicker table tr td.old, .datepicker table tr td.new { color: var(--c2-muted); } /* 13. Trilha de canais (elemento-assinatura) ============================== */ /* As 11 redes são o assunto do produto. Um mesmo objeto — o chip de canal — aparece na tabela de posts, no relatório, nos ajustes e no compositor, sempre carregando a cor da rede e o estado da entrega. */ .c2-channels { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; } .c2-chip { --c2-chip-color: var(--c2-muted); position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--c2-r-sm); background: color-mix(in srgb, var(--c2-chip-color) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c2-chip-color) 32%, transparent); color: var(--c2-chip-color); font-size: 13px; line-height: 1; transition: transform .15s var(--c2-ease), box-shadow .15s var(--c2-ease); } .c2-chip:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2-chip-color) 18%, transparent); } .c2-chip--lg { width: 36px; height: 36px; border-radius: var(--c2-r); font-size: 16px; } .c2-chip--sm { width: 22px; height: 22px; border-radius: var(--c2-r-xs); font-size: 11px; } /* Rede desconectada: presente, mas apagada */ .c2-chip--off { --c2-chip-color: var(--c2-muted); opacity: .45; } /* Estado da entrega, no canto do chip */ .c2-chip__dot { position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--c2-surface); } .c2-chip__dot--ok { background: var(--c2-ok); } .c2-chip__dot--pending { background: var(--c2-warn); } .c2-chip__dot--fail { background: var(--c2-danger); } /* Cores das redes */ .c2-chip--facebook { --c2-chip-color: #1877f2; } .c2-chip--instagram { --c2-chip-color: #e1306c; } .c2-chip--twitter, .c2-chip--x { --c2-chip-color: #94a3b8; } .c2-chip--linkedin { --c2-chip-color: #0a66c2; } .c2-chip--pinterest { --c2-chip-color: #e60023; } .c2-chip--reddit { --c2-chip-color: #ff4500; } .c2-chip--tumblr { --c2-chip-color: #7a5edb; } .c2-chip--gmb, .c2-chip--google { --c2-chip-color: #ea4335; } .c2-chip--blogger { --c2-chip-color: #ff8f00; } .c2-chip--youtube { --c2-chip-color: #ff0033; } .c2-chip--wordpress { --c2-chip-color: #3499cd; } .c2-chip--tiktok { --c2-chip-color: #22d3ee; } /* 14. Cartões de número e estado vazio ==================================== */ .c2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 16px; margin-bottom: 20px; } .c2-stat { position: relative; padding: 18px 20px; background: var(--c2-surface); border: 1px solid var(--c2-line); border-radius: var(--c2-r-lg); box-shadow: var(--c2-shadow); overflow: hidden; } .c2-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--c2-grad); opacity: .9; } .c2-stat__label { display: block; color: var(--c2-muted); font-size: 11px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; margin-bottom: 8px; } .c2-stat__value { display: block; font-family: var(--c2-display); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--c2-text); font-variant-numeric: tabular-nums; } .c2-stat__meta { display: block; margin-top: 7px; font-size: 12.5px; color: var(--c2-muted); } .c2-stat__meta--up { color: var(--c2-ok); } .c2-stat__meta--down { color: var(--c2-danger); } .c2-empty { padding: 52px 24px; text-align: center; } .c2-empty__icon { width: 56px; height: 56px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: var(--c2-r); background: var(--c2-brand-bg); color: var(--c2-brand-hi); font-size: 22px; } .c2-empty__title { font-family: var(--c2-display); font-size: 17px; font-weight: 650; color: var(--c2-text); margin: 0 0 6px; } .c2-empty__text { color: var(--c2-muted); font-size: 13.5px; max-width: 380px; margin: 0 auto 18px; } /* 15. Responsivo ========================================================== */ @media (max-width: 991px) { section.content, .content-header, .c2-page-head { padding-left: 18px; padding-right: 18px; } .main-footer { padding-left: 18px; padding-right: 18px; } } @media (max-width: 767px) { /* A sidebar passa a ser gaveta: sai da tela e volta pelo botão do topo */ .main-sidebar, .skin-blue .main-sidebar { width: var(--c2-sidebar-w); transform: translateX(calc(-1 * var(--c2-sidebar-w))); box-shadow: var(--c2-shadow-lg); max-height: none; padding-top: var(--c2-topbar-h); } .sidebar-open .main-sidebar, .sidebar-open.skin-blue .main-sidebar { transform: translateX(0); } /* Os seletores repetem .skin-blue de propósito: as regras de desktop acima usam .skin-blue .content-wrapper (0,2,0) e venceriam um .content-wrapper simples aqui dentro, deixando o conteúdo com a margem da sidebar. */ .content-wrapper, .main-footer, .main-header .navbar, body .content-wrapper, body .main-footer, .skin-blue .content-wrapper, .skin-blue .main-footer, .skin-blue .main-header .navbar { margin-left: 0 !important; } /* Marca fica no próprio topbar, junto do botão da gaveta. z-index acima de 1: a .navbar é position:relative com z-index 1 e, no empate, venceria por vir depois no DOM — apagando a marca. */ .logo-class, .skin-blue .main-header .logo-class { width: auto; border-right: 0; background: transparent; padding: 0 0 0 8px; position: absolute; left: 58px; top: 0; z-index: 6; } .logo-class > a > span, .logo-class > a span span { font-size: 19px !important; } .main-header .sidebar-toggle { margin-left: 10px; } /* Véu por cima do conteúdo enquanto a gaveta está aberta */ .sidebar-open .content-wrapper::before { content: ""; position: fixed; inset: 0; background: rgba(5, 7, 13, .6); z-index: 1010; } section.content { padding: 16px 14px 32px; } .content-header, .c2-page-head { padding: 18px 14px 0; } .c2-page-head { flex-direction: column; align-items: stretch; } .c2-page-head__actions .btn { flex: 1; } .content-header > h1, .c2-page-head__title { font-size: 21px; } .box-header, .box-body, .tab-content { padding: 15px; } .box, .panel { border-radius: var(--c2-r); } /* Tabelas rolam em vez de estourar a tela */ .box-body > .table, .box-body > table, .table-responsive { display: block; width: 100%; overflow-x: auto; } .c2-toolbar { flex-direction: column; align-items: stretch; } .c2-toolbar__group { width: 100%; } .c2-toolbar__group > .form-control, .c2-toolbar__group > .btn { flex: 1; } .c2-stats { grid-template-columns: 1fr 1fr; gap: 12px; } .c2-stat { padding: 14px 15px; } .c2-stat__value { font-size: 24px; } .nav-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 1px; } .nav-tabs > li > a { white-space: nowrap; } .modal-dialog { margin: 12px; } .modal-footer { flex-direction: column-reverse; } .modal-footer .btn { width: 100%; } .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { float: none; text-align: left; } .dataTables_wrapper .dataTables_filter input { width: 100%; } } @media (max-width: 479px) { .c2-stats { grid-template-columns: 1fr; } .skin-blue .main-header .navbar .nav > li.user-menu > a > span { display: none; } } /* 16. Acessibilidade e movimento ========================================== */ :focus-visible { outline: 2px solid var(--c2-brand-hi); outline-offset: 2px; border-radius: var(--c2-r-xs); } .btn:focus-visible, .sidebar-menu > li > a:focus-visible, .nav-tabs > li > a:focus-visible { outline: 2px solid var(--c2-brand-hi); outline-offset: 2px; } .form-control:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; left: auto; opacity: 1; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media print { .main-sidebar, .main-header, .main-footer, .c2-page-head__actions { display: none !important; } .content-wrapper { margin-left: 0 !important; padding-top: 0 !important; } .box { box-shadow: none; border-color: #ddd; } } /* 17. Compatibilidade com o tema legado =================================== */ /* style.css tem 228 declarações !important com cores fixas claras, e o _all-skins do AdminLTE pinta a skin "blue". Este bloco neutraliza só o que conflita, devolvendo o controle aos tokens. Cada grupo diz o que derruba. */ /* --- Ícones da sidebar --- O tema antigo trocava todo ícone por PNG (content:'' + background-image), o que só funcionava nos 7 arquivos existentes e não acompanha o tema. Aqui voltam os glifos do Font Awesome, que herdam currentColor. */ .sidebar-menu i.fa:before, .sidebar-menu > li i.fa:before, .mingle-user .sidebar-menu > li > a.subscription-menu .fa:before { background-image: none !important; background: none !important; width: auto !important; height: auto !important; display: inline !important; font: normal normal normal 16px/1 FontAwesome !important; } .sidebar-menu > li.active .fa:before, .sidebar-menu > li:hover .fa:before { filter: none !important; } /* ul.sidebar-menu li a i tem especificidade (0,1,4) no tema antigo e fixava 38px; os seletores abaixo empatam ou sobem para devolver o controle. */ .sidebar-menu li a i, ul.sidebar-menu li a i, .sidebar .sidebar-menu li a i, .sidebar-collapse .sidebar ul.sidebar-menu li a i, .sidebar-menu > li > a > i { opacity: 1 !important; width: 20px !important; min-width: 20px; font-size: 16px !important; text-align: center; } /* O selo de atualização vinha em position:absolute e caía sobre o rótulo. Em linha, ele fica depois do texto e o texto trunca antes dele. */ body .sidebar-menu > li > a > .pull-right-container, .sidebar-menu > li > a > .pull-right-container { position: static !important; right: auto !important; top: auto !important; margin: 0 0 0 auto !important; flex: none; display: inline-flex; align-items: center; } /* Rótulos longos como "Licença e Atualizações" quebram em duas linhas em vez de virarem reticências. */ .sidebar-menu > li > a > span { min-width: 0; white-space: normal; line-height: 1.3; } .sidebar-menu .pull-right-container .label { width: 7px; min-width: 7px; height: 7px; box-shadow: none; } .sidebar-menu i.fa.fa-bolt:before { content: "\f0e7" !important; } .sidebar-menu i.fa.fa-share-alt:before { content: "\f1e0" !important; } .sidebar-menu i.fa.fa-plug:before { content: "\f1e6" !important; } .sidebar-menu i.fa.fa-pie-chart:before { content: "\f200" !important; } .sidebar-menu i.fa.fa-list-ol:before { content: "\f0cb" !important; } .sidebar-menu i.fa.fa-bug:before { content: "\f188" !important; } .sidebar-menu i.fa.fa-id-card:before { content: "\f2c2" !important; } .sidebar-menu i.fa.fa-id-badge:before { content: "\f2c1" !important; } .sidebar-menu i.fa.fa-users:before { content: "\f0c0" !important; } .sidebar-menu i.fa.fa-user-plus:before { content: "\f234" !important; } .sidebar-menu i.fa.fa-credit-card-alt:before { content: "\f283" !important; } .sidebar-menu i.fa.fa-tag:before { content: "\f02b" !important; } .sidebar-menu i.fa.fa-cog:before { content: "\f013" !important; } .sidebar-menu i.fa.fa-refresh:before { content: "\f021" !important; } .sidebar-menu i.fa.fa-shield:before { content: "\f132" !important; } .sidebar-menu i.fa.fa-dashboard:before { content: "\f0e4" !important; } .sidebar-menu i.fa.fa-gears:before { content: "\f085" !important; } .sidebar-menu i.fa.fa-pencil-square-o:before { content: "\f044" !important; } .sidebar-menu i.fa.fa-list:before { content: "\f03a" !important; } /* Derruba: .skin-blue .sidebar-menu>li.header{background:#1a2226} */ .skin-blue .sidebar-menu > li.header, body .sidebar-menu > li.header { background: transparent !important; color: var(--c2-muted) !important; padding: 18px 12px 7px !important; font-size: 10.5px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; overflow: visible; } /* Derruba: .main-sidebar{background-color:#fff !important} */ body .main-sidebar, .skin-blue .main-sidebar { background-color: var(--c2-bg-elev) !important; width: var(--c2-sidebar-w); padding-top: var(--c2-topbar-h); max-height: none; } /* Derruba: .subscription-menu{background:#e0f3ff!important;color:#3f6ad8!important} */ .sidebar-menu > li > a.subscription-menu, .subscription-menu { background: transparent !important; color: var(--c2-text-2) !important; text-transform: none !important; font-weight: 500 !important; border-radius: var(--c2-r-sm) !important; } .sidebar-menu > li.active > a.subscription-menu, .sidebar-menu > li:hover > a.subscription-menu { background: var(--c2-brand-bg) !important; color: var(--c2-text) !important; } /* --- Botão da gaveta --- Derruba o SVG de hambúrguer fixo (invisível no tema escuro). */ .main-header .sidebar-toggle:before { content: none !important; display: none !important; } /* --- Cabeçalho de página --- Derruba: section.content-header{background-color:rgba(255,255,255,.45)!important} mais a sombra clara e os títulos em #111/#1958F4. */ section.content-header, .content-header { background-color: transparent !important; background: transparent !important; box-shadow: none !important; padding: 26px 26px 0 !important; } .content-header > h1, .content-header h1, .content-header > h1 > small { color: var(--c2-text) !important; font-family: var(--c2-display) !important; font-size: 25px !important; font-weight: 700 !important; /* space-between mantém o botão de ação encostado na direita, longe do título */ justify-content: space-between !important; gap: 16px; } /* Derruba: .content{background:#F1F1F1} — o fundo claro atrás dos cards */ body .content, body section.content { background: transparent !important; padding: 22px 26px 40px !important; } /* --- Ícones de título de página --- Eram PNG de tamanhos diferentes (20 a 40px), de cor fixa, colados no texto. Viram glifos do Font Awesome: mesmo tamanho, cor do tema, nítidos. */ .page-title-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 26px !important; height: 26px !important; margin: 0 12px 0 0 !important; color: var(--c2-brand-hi) !important; flex: none; } .page-title-icon:after { background: none !important; background-image: none !important; width: auto !important; height: auto !important; font: normal normal normal 21px/1 FontAwesome !important; content: "\f044" !important; /* padrão: publicação */ display: inline-block; } .multi-post-title-icon:after { content: "\f1e0" !important; } /* compartilhar */ .quick-post-icon:after { content: "\f0e7" !important; } /* raio */ .settings-title-iocn:after { content: "\f1e6" !important; } /* tomada */ .report-title-icon:after { content: "\f200" !important; } /* pizza */ .posting_logs-icon:after { content: "\f0cb" !important; } /* lista numerada */ .posting-debug-logs:after { content: "\f188" !important; } /* inseto */ .membership_level_icon:after { content: "\f2c1" !important; } /* crachá */ .customers_icon:after { content: "\f0c0" !important; } /* pessoas */ .membership_icon:after { content: "\f2c2" !important; } /* cartão de id */ .payments_icon:after { content: "\f283" !important; } /* cartão */ .coupons_icon:after { content: "\f02b" !important; } /* etiqueta */ .general_settings_icon:after { content: "\f013" !important; } /* engrenagem */ .register_license_update_icon:after { content: "\f021" !important; } /* atualizar */ .usage-license-icon:after { content: "\f132" !important; } /* escudo */ .your_subscription_icon:after { content: "\f2c2" !important; } /* cartão de id */ /* --- Formulários --- Derruba: .form-control{background-color:#F8FAFC!important; color:#838383} e label{font-size:16px!important; color:#111} */ body .form-control, .mingle-user .form-control, .mingle-admin .form-control { background-color: var(--c2-surface-2) !important; border-color: var(--c2-line-strong); color: var(--c2-text); font-size: 14px; padding: 0 13px; height: 40px; border-radius: var(--c2-r-sm); } body textarea.form-control, body textarea { height: auto !important; min-height: 96px; padding: 11px 13px !important; } body select.form-control, body select { padding-right: 34px !important; } body .form-group label, body label, body .control-label { color: var(--c2-text-2) !important; font-family: var(--c2-sans) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.5; } body label.error, body .error-msg, body span.error { color: var(--c2-danger) !important; } /* Derruba os selects de filtro com fundo claro fixo */ .filter-dropdown select, .filter-wrap select, .sap-logs-graph-filter-wrap input, .sap-logs-graph-filter-wrap select, .mingle-user .table-bordered [aria-label="Status"] select { background-color: var(--c2-surface-2) !important; border-color: var(--c2-line-strong) !important; color: var(--c2-text) !important; } .sap-logs-graph-filter-wrap label { color: var(--c2-text-2) !important; } /* --- Abas --- Derruba: ul.nav-tabs li a{color:#495057!important} e .nav-tabs-custom>.nav-tabs>li>a{border:1px solid #111!important; color:#111!important; background-color:#fff!important} */ body ul.nav-tabs li a, body .nav-tabs > li > a, body .nav-tabs-custom > .nav-tabs > li > a, .mingle-user ul.nav.nav-tabs li a { background-color: transparent !important; border: 0 !important; color: var(--c2-muted) !important; font-family: var(--c2-sans) !important; font-size: 13.5px !important; border-radius: var(--c2-r-sm) var(--c2-r-sm) 0 0 !important; } body ul.nav-tabs li.active a, body .nav-tabs > li.active > a, body .nav-tabs-custom > .nav-tabs > li.active > a, .mingle-user ul.nav.nav-tabs li.sap-tab-li-active a, .mingle-user .sap-post-social-list-wrap ul.nav-tabs li.active a, body ul.nav-tabs li a.sap-msg-tab-nav-active { background-color: transparent !important; border: 0 !important; color: var(--c2-brand-hi) !important; font-weight: 650 !important; } /* --- Tabelas --- Derruba os cabeçalhos e listras com cinza fixo. */ .mingle-user table.table-bordered.dataTable th, .mingle-admin table.table-bordered.dataTable th, body table.table-bordered.dataTable th, .membership_details-table th, .plan-preview-container th { background-color: var(--c2-glass) !important; color: var(--c2-muted) !important; border-color: var(--c2-line) !important; } .mingle-user .table-striped > tbody > tr:nth-of-type(odd), .mingle-admin .table-striped > tbody > tr:nth-of-type(odd), body .table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent !important; } .membership_details-table td, .plan-preview-container td { background-color: transparent !important; color: var(--c2-text-2) !important; border-color: var(--c2-line) !important; } /* Derruba: .view-Status{color:#1958F4!important} — etiqueta de situação */ .view-Status { color: var(--c2-brand-hi) !important; background-color: var(--c2-brand-bg) !important; border-radius: var(--c2-r-pill); padding: 4px 11px; font-size: 12px; font-weight: 600; } .mingle-user td.action_icons i, td.action_icons i, .remove-tx-init i { color: var(--c2-muted) !important; transition: color .15s var(--c2-ease); } .mingle-user td.action_icons a:hover i, td.action_icons a:hover i { color: var(--c2-brand-hi) !important; } td.sorting_1 a { color: var(--c2-text) !important; } /* --- Paginação legada (DataTables com classes .paginate_button) --- */ .pagination .paginate_button a, .pagination li.next a, .pagination li.previous a { background-color: var(--c2-surface-2) !important; border-color: var(--c2-line-strong) !important; color: var(--c2-text-2) !important; border-radius: var(--c2-r-sm) !important; } .pagination .paginate_button.active a { background: var(--c2-grad) !important; border-color: transparent !important; color: var(--c2-on-brand) !important; } /* --- Avisos e blocos de nota --- */ .note-text, .mingle-user .note-text { background-color: var(--c2-warn-bg) !important; border: 1px solid color-mix(in srgb, var(--c2-warn) 35%, transparent) !important; color: var(--c2-warn) !important; border-radius: var(--c2-r) !important; padding: 12px 14px; } .mingle-user .sap-quick-post-privew-wrap, .mingle-user .sap-quick-post-privew-users-wpar .success, .mingle-user button.fileinput-remove-button { background-color: var(--c2-surface-2) !important; border-color: var(--c2-line) !important; color: var(--c2-text) !important; } /* Derruba os pares cor/fundo fixos dos alertas do AdminLTE */ body .bg-green, body .callout.callout-success, body .alert-success, body .label-success { background-color: var(--c2-ok-bg) !important; color: var(--c2-ok) !important; border-color: color-mix(in srgb, var(--c2-ok) 38%, transparent) !important; } body .bg-red, body .callout.callout-danger, body .alert-danger, body .alert-error, body .label-danger { background-color: var(--c2-danger-bg) !important; color: var(--c2-danger) !important; border-color: color-mix(in srgb, var(--c2-danger) 38%, transparent) !important; } /* --- Blocos com fundo claro fixo no HTML das telas --- Várias views trazem style="background:#fff" ou #f8fafc direto na marcação. No tema escuro isso vira um retângulo branco no meio da página. */ [data-theme="dark"] [style*="background: #ffffff"], [data-theme="dark"] [style*="background:#ffffff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background-color: #ffffff"], [data-theme="dark"] [style*="background-color:#ffffff"], [data-theme="dark"] [style*="background-color: #fff"], [data-theme="dark"] [style*="background-color:#fff"], [data-theme="dark"] [style*="background: #f8fafc"], [data-theme="dark"] [style*="background:#f8fafc"], [data-theme="dark"] [style*="background-color: #f8fafc"], [data-theme="dark"] [style*="background-color:#f8fafc"], [data-theme="dark"] [style*="background: #f9fafb"], [data-theme="dark"] [style*="background:#f9fafb"], [data-theme="dark"] .sap-ai-config-box, [data-theme="dark"] .sap-plan-network { background-color: var(--c2-surface-2) !important; border-color: var(--c2-line) !important; color: var(--c2-text) !important; } [data-theme="dark"] [style*="color: #111"], [data-theme="dark"] [style*="color:#111"], [data-theme="dark"] [style*="color: #1e293b"], [data-theme="dark"] [style*="color:#1e293b"], [data-theme="dark"] [style*="color: #0f172a"] { color: var(--c2-text) !important; } .sap-ai-config-box, .sap-plan-network { background-color: var(--c2-surface-2); border: 1px solid var(--c2-line); border-radius: var(--c2-r); color: var(--c2-text); } .sap-plan-network label { color: var(--c2-text-2) !important; } .sap-plan-network .social-lbl-cls { color: var(--c2-brand-hi) !important; } /* --- Componentes próprios das telas de post/ajustes --- */ .sap-tab-nav-wrap, .sap-tab-content-wrap, .sap-tab-content, .sap-custom-drop-down-wrap, .sap-msg-wrap, .sap-custom-tab, .sap-message-tab-content, .sap-custom-link, .quick-image-wrap, .quick-video-wrap, .customSearch, .sap-ai-div, .sap-quick-post { background-color: var(--c2-surface) !important; border-color: var(--c2-line) !important; color: var(--c2-text) !important; } .sap-tab-nav, .sap-message-tab-nav, .msg-li > a { background-color: var(--c2-surface-2) !important; border-color: var(--c2-line) !important; color: var(--c2-muted) !important; } .sap-msg-tab-nav-active, .sap-tab-nav-active, .sap-msg-tab-li-active > a, .sap-tab-li-active > a { background-color: var(--c2-surface) !important; border-color: var(--c2-line) !important; color: var(--c2-brand-hi) !important; } .custom-search-input, #searchByGender, .searchByGender_div, .sap-schedule-input, #searchInputquickpost, #searchInputscheduleds { background-color: var(--c2-surface-2) !important; border-color: var(--c2-line-strong) !important; color: var(--c2-text) !important; } /* 18. Utilitários que a marcação usa e o Bootstrap 3 não tem ============== */ /* As telas foram escritas com classes do Bootstrap 4 (d-flex, mt-1, flex-wrap e afins). O style.css definiu só quatro delas, então boa parte do alinhamento nunca funcionou. Aqui entram as que faltavam. */ .d-flex { display: flex; } .d-inline-flex { display: inline-flex; } .d-block { display: block; } .d-inline-block { display: inline-block; } .d-none { display: none; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } .flex-grow-1 { flex-grow: 1; } .flex-fill { flex: 1 1 auto; } .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; } .align-items-start { align-items: flex-start; } .align-items-end { align-items: flex-end; } .align-items-center { align-items: center; } .align-items-baseline { align-items: baseline; } .align-self-center { align-self: center; } .w-100 { width: 100%; } .h-100 { height: 100%; } .gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; } .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 3rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; } .mb-5 { margin-bottom: 3rem; } .ml-1 { margin-left: .25rem; } .ml-2 { margin-left: .5rem; } .ml-3 { margin-left: 1rem; } .ml-5 { margin-left: 3rem; } .mr-1 { margin-right: .25rem; } .mr-2 { margin-right: .5rem; } .mr-3 { margin-right: 1rem; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } /* O botão de ação do cabeçalho fica encostado na direita mesmo quando o título não está dentro de um wrapper flex. */ .content-header > h1 > .sap-delete, .content-header > h1 > .pull-right { margin-left: auto; float: none; } /* 19. Ajustes finais sobre o tema legado ================================== */ /* --- Tipografia órfã --- O tema declarava "font-family: Source Sans Pro" sem fonte alternativa em 20 pontos. Como essa fonte não é mais carregada, o navegador caía no serif padrão — foi o que deixou os cabeçalhos de tabela com cara de jornal. */ .table-bordered > thead > tr > th, .table-bordered > thead > tr > td, .btn-primary, .btn-light, .filter-wrap select, .form-group label, label, .status-text > label.control-label, .auth-option span, .nav-tabs-custom > .nav-tabs > li > a, .renewal_email_content span.description, .main-header .logo, .membership_details-table td, .membership_details-table th { font-family: var(--c2-sans) !important; } /* --- Legibilidade das tabelas --- Derruba: .table th,.table td{color:#838383;font-size:16px} e table.dataTable td:nth-child(3) a{color:#101828} — cinza sobre cinza e quase-preto sobre fundo escuro deixavam a coluna Nome ilegível. */ body .table th, body .table td, body table.dataTable th, body table.dataTable td, /* Derruba color:#111111 em table.table-bordered.dataTable tbody td (0,2,3): quase-preto sobre fundo escuro deixava e-mail, perfil e data ilegíveis. */ body table.table-bordered.dataTable tbody th, body table.table-bordered.dataTable tbody td, body table.table-bordered.dataTable tbody td a, body .plan-preview-container tbody tr td, body table.dataTable tfoot tr th, body .table-striped tfoot tr th { border-top: 1px solid var(--c2-line) !important; font-size: 13.5px; color: var(--c2-text-2); } body table.table-bordered.dataTable tbody td a:hover { color: var(--c2-brand-hi); } body .table-bordered > thead > tr > th, body .table-bordered > thead > tr > td { color: var(--c2-muted); } body .table > thead > tr > th, body table.dataTable > thead > tr > th, body table.dataTable thead th { color: var(--c2-muted); font-size: 11px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; } body table.dataTable th:nth-child(3), body table.dataTable tr td:nth-child(3), body table.dataTable tr td:nth-child(3) a, body td.sorting_1, body td.sorting_1 a { color: var(--c2-text) !important; font-size: 13.5px; font-weight: 500; } body table.dataTable > thead > tr > th:nth-child(3) { color: var(--c2-muted) !important; font-size: 11px; font-weight: 700; } body #list-plans_wrapper tr td, body .table tbody tr td { border-bottom: 0; } body .table tbody tr:hover, body table.dataTable tbody tr:hover { background-color: var(--c2-glass) !important; } /* --- Etiquetas de situação --- Derruba os pares claros fixos (#ECFDF3/#027A48, #FFEAEA/#FF0000) das marcações .plan-active / .plan-inactive / .view-Status. */ .plan-active, .plan-inactive, .view-Status, .table-bordered .active { display: inline-flex !important; align-items: center; gap: 7px; padding: 4px 11px !important; border-radius: var(--c2-r-pill) !important; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; position: static !important; } .plan-active, .table-bordered .active { background-color: var(--c2-ok-bg) !important; color: var(--c2-ok) !important; } .plan-inactive { background-color: var(--c2-danger-bg) !important; color: var(--c2-danger) !important; } .view-Status { background-color: var(--c2-brand-bg) !important; color: var(--c2-brand-hi) !important; } /* O ponto vinha em position:absolute com left fixo; em linha ele acompanha o texto e dispensa o recuo de 19px. */ .plan-active:before, .plan-inactive:before, .view-Status:before, .table-bordered .active:before { position: static !important; transform: none !important; margin: 0 !important; left: auto !important; top: auto !important; width: 6px !important; height: 6px !important; background-color: currentColor !important; flex: none; } /* --- Caixas de marcação nas tabelas --- */ body table input[type="checkbox"], body .table input[type="checkbox"], body input[type="checkbox"], body input[type="radio"] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0; border: 1.5px solid var(--c2-line-strong); border-radius: 5px; background-color: var(--c2-surface-2); cursor: pointer; vertical-align: middle; position: relative; transition: border-color .15s var(--c2-ease), background .15s var(--c2-ease); } body input[type="radio"] { border-radius: 50%; } body input[type="checkbox"]:hover, body input[type="radio"]:hover { border-color: var(--c2-brand); } body input[type="checkbox"]:checked, body input[type="radio"]:checked { background: var(--c2-grad); border-color: transparent; } body input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } body input[type="radio"]:checked::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; } body input[type="checkbox"]:focus-visible, body input[type="radio"]:focus-visible { outline: 2px solid var(--c2-brand-hi); outline-offset: 2px; } /* --- Ícones de ação nas linhas --- */ body td.action_icons, body .action_icons { white-space: nowrap; } body .action_icons a, body td.action_icons a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--c2-r-sm); border: 1px solid transparent; transition: background .15s var(--c2-ease), border-color .15s var(--c2-ease); } body .action_icons a:hover { background: var(--c2-glass); border-color: var(--c2-line); } body .mingle-user td.action_icons i, body td.action_icons i, body .action_icons i { font-size: 15px !important; color: var(--c2-muted) !important; } body .action_icons a:hover i { color: var(--c2-brand-hi) !important; } body .action_icons a.sap-delete-record:hover i, body .action_icons a[onclick*="delete"]:hover i { color: var(--c2-danger) !important; } /* --- Títulos de card e bloco de situação --- Derruba: .box-header .box-title{color:rgba(17,17,17,1);font-size:20px!important} e .status-text{background:#f8fafc;border:#cbd5e1} — título preto e caixa branca flutuando sobre o fundo escuro. */ body .box-header .box-title, body .box-header > .box-title, body .box-title { color: var(--c2-text) !important; font-family: var(--c2-display) !important; font-size: 16px !important; font-weight: 650 !important; line-height: 1.4 !important; } body .status-text { background-color: var(--c2-surface-2) !important; border: 1px solid var(--c2-line) !important; border-radius: var(--c2-r-sm) !important; padding: 8px 14px !important; gap: 12px; } body .status-text > label.control-label { color: var(--c2-text-2) !important; font-size: 13px !important; font-weight: 600 !important; margin: 0 !important; } /* Asterisco de campo obrigatório */ .astric { color: var(--c2-danger); margin-left: 2px; font-weight: 600; } /* 20. Restos claros encontrados na varredura das telas =================== */ /* Cada item abaixo saiu de uma auditoria automática que percorreu as 22 telas procurando fundo claro e texto escuro sobre o tema escuro. */ /* Selects "pelados" nos filtros de tabela ainda vinham brancos. */ body select:not([multiple]), body .table select, body table select, body [aria-label] select { background-color: var(--c2-surface-2) !important; border-color: var(--c2-line-strong) !important; color: var(--c2-text) !important; } body select option { background-color: var(--c2-surface); color: var(--c2-text); } /* O input real do bootstrap-fileinput ficava visível e branco. */ body input.file, body input[type="file"].file { background: transparent !important; color: transparent; } /* Painéis brancos do compositor de post rápido. Derruba: section.sap-quick-post>div>form>.col-lg-6>div{background:#FFF} */ body section.sap-quick-post > div > form > .col-lg-6 > div, body section > div > .col-lg-6 > div, body section.sap-quick-post > div > form > .pull-left > .col-lg-12 { background-color: var(--c2-surface) !important; border: 1px solid var(--c2-line); border-radius: var(--c2-r) !important; box-shadow: none !important; } /* Visualizador de log de depuração: fundo branco e Source Sans Pro (que caía no serif). Vira um painel de código legível. */ body .debug_log_file-wrap { background-color: transparent !important; padding: 0 !important; } body .debug_log_file { background-color: var(--c2-bg) !important; border: 1px solid var(--c2-line); border-radius: var(--c2-r); padding: 16px 18px; color: var(--c2-text-2) !important; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 12.5px !important; line-height: 1.7 !important; } /* Véu de carregamento: era branco translúcido sobre o tema escuro. */ body .sap-loader-wrap { background: color-mix(in srgb, var(--c2-bg) 72%, transparent) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* Botão secundário "Select None" e afins. */ body .btn-light { background-color: var(--c2-surface-2) !important; border: 1px solid var(--c2-line-strong) !important; color: var(--c2-text) !important; font-size: 13px !important; font-weight: 600 !important; text-align: center !important; } body .btn-light:hover { background-color: var(--c2-surface-3) !important; border-color: var(--c2-muted) !important; } /* Etiqueta de situação por rede no compositor (Publicado / Não publicado). */ body .form-group label[class*="status-"], body label[class*="_status_lbl"] { background-color: var(--c2-surface-2) !important; border: 1px solid var(--c2-line) !important; border-radius: var(--c2-r-sm) !important; color: var(--c2-text-2) !important; padding: 8px 12px !important; font-size: 13px !important; } body label[class*="status-Published"] { background-color: var(--c2-ok-bg) !important; border-color: color-mix(in srgb, var(--c2-ok) 35%, transparent) !important; color: var(--c2-ok) !important; } /* Textos remanescentes em #111 dentro dos ajustes gerais. */ body .content span, body .content p, body .content .description, body span.description, body small { color: inherit; } body span.description, body .description, body p.description { color: var(--c2-muted) !important; } /* Links dentro das tabelas vinham em preto puro. */ body .content a:not(.btn):not(.back-btn), body table a:not(.btn), body td a:not(.btn) { color: var(--c2-text); } body .content a:not(.btn):not(.back-btn):hover, body table a:not(.btn):hover, body td a:not(.btn):hover { color: var(--c2-brand-hi); } /* Abas verticais dos ajustes gerais: são fora de uma .nav-tabs, então não pegavam o estilo de aba e ficavam brancas. */ body a[data-toggle="tab"], body li > a[data-toggle="tab"] { background-color: transparent !important; border: 1px solid transparent !important; border-radius: var(--c2-r-sm) !important; color: var(--c2-text-2) !important; font-weight: 500; } body a[data-toggle="tab"]:hover { background-color: var(--c2-glass) !important; color: var(--c2-text) !important; } body li.active > a[data-toggle="tab"], body a[data-toggle="tab"].active { background-color: var(--c2-brand-bg) !important; border-color: color-mix(in srgb, var(--c2-brand) 30%, transparent) !important; color: var(--c2-brand-hi) !important; font-weight: 600; } /* Abas dos Ajustes Gerais: as regras vencedoras moram no fileinput.css (CSS do app despejado num arquivo de terceiros) e chegam a (0,3,3) com !important — pílulas brancas de borda preta. Os seletores abaixo empatam em classes e somam um elemento para vencer. */ body .sap-general-setting-tab.nav-tabs-custom > ul.nav-tabs li a, body .sap-general-setting-tab.nav-tabs-custom > .nav-tabs > li > a { background-color: transparent !important; border: 1px solid var(--c2-line) !important; border-radius: var(--c2-r-pill) !important; color: var(--c2-text-2) !important; font-size: 13.5px !important; font-weight: 500 !important; padding: 8px 18px !important; } body .sap-general-setting-tab.nav-tabs-custom > ul.nav-tabs li a:hover { background-color: var(--c2-glass) !important; border-color: var(--c2-line-strong) !important; color: var(--c2-text) !important; } body .sap-general-setting-tab.nav-tabs-custom > .nav-tabs > li.active > a, body .sap-general-setting-tab.nav-tabs-custom > .nav-tabs > li.active:hover > a { background-color: var(--c2-brand-bg) !important; border-color: color-mix(in srgb, var(--c2-brand) 34%, transparent) !important; color: var(--c2-brand-hi) !important; font-weight: 600 !important; } /* O sublinhado da aba ativa era um PNG de largura fixa (137px). */ body .sap-general-setting-tab.nav-tabs-custom > .nav-tabs > li.active > a:after { display: none !important; } body .sap-general-setting-tab.nav-tabs-custom > .nav-tabs { border-bottom: 1px solid var(--c2-line) !important; padding-bottom: 14px; margin-bottom: 22px; } body .sap-general-setting-tab.nav-tabs-custom > .nav-tabs > li { margin: 0 8px 0 0 !important; border-top: 0; } body .box-header.sap-settings-box-header { color: var(--c2-text) !important; font-family: var(--c2-display); font-size: 16px !important; font-weight: 650 !important; margin-bottom: 20px !important; } /* fileinput.css também redeclara a fonte do título de página. */ body .content-wrapper .content-header h1 { font-family: var(--c2-display) !important; } /* A marcação usa (elemento inexistente) com texto em #111 para mostrar as dimensões esperadas da imagem. */ body .uploaded-info, body .uploaded-info span, body lable, body lable span { color: var(--c2-muted) !important; font-size: 12.5px; } /* Listras do DataTables: tr.even continuava branco. */ body table.dataTable tbody tr.even, body table.dataTable tbody tr.odd, body .table-striped > tbody > tr.even, body .table-striped > tbody > tr.odd, body .mingle-user .table-striped > tbody > tr:nth-of-type(odd), body .mingle-admin .table-striped > tbody > tr:nth-of-type(odd), body .mingle-user table.dataTable tbody tr.even, body .mingle-user table.dataTable tbody tr.odd { background-color: transparent !important; } /* Derruba: #list-post td a{color:#000} */ body #list-post td a, body #list-post-scheduled td a, body table#tblGrid td a { color: var(--c2-text) !important; } body #list-post td a:hover, body #list-post-scheduled td a:hover { color: var(--c2-brand-hi) !important; } /* Filtros de período do relatório: eram etiquetas claras fixas. */ body .sap-logs-graph-filter-wrap label, body .sap-logs-graph-filter-wrap input { background-color: var(--c2-surface-2) !important; border: 1px solid var(--c2-line-strong) !important; border-radius: var(--c2-r-sm) !important; color: var(--c2-text-2) !important; padding: 9px 15px !important; cursor: pointer; } body .sap-logs-graph-filter-wrap input[type="radio"]:checked + label, body .sap-logs-graph-filter-wrap label.active, body .sap-logs-graph-filter-wrap .active label { background: var(--c2-brand-bg) !important; border-color: color-mix(in srgb, var(--c2-brand) 32%, transparent) !important; color: var(--c2-brand-hi) !important; } body .sap-logs-graph-filter-wrap li.sap-graph-social-type select { color: var(--c2-text) !important; height: 40px; padding: 0 15px !important; } /* Botões de upload de imagem nos ajustes gerais. */ body .content a.btn-file, body .content .btn-file, body .fileinput-remove, body .krajee-default.file-preview-frame, body .file-preview-frame { background-color: var(--c2-surface-2) !important; border-color: var(--c2-line) !important; color: var(--c2-text) !important; } /* --- Cabeçalhos de painel do Bootstrap --- .panel-default > .panel-heading (0,2,1) do bootstrap.min.css pinta #f5f5f5 com texto #333: no tema escuro o título virava branco sobre branco. */ body .panel-default > .panel-heading, body .panel > .panel-heading { background-color: var(--c2-glass) !important; background-image: none !important; border-color: var(--c2-line) !important; color: var(--c2-text) !important; } body .panel-default > .panel-heading .panel-title, body .panel > .panel-heading .panel-title { color: var(--c2-text) !important; font-family: var(--c2-display); font-size: 16px; font-weight: 650; } body .panel-default { border-color: var(--c2-line) !important; } /* Faixas de pagamento (PIX e plano gratuito): o verde vinha chapado em style inline. Vira uma faixa tingida, mantendo o verde como pista da forma de pagamento sem dominar a tela. */ body #pix-payment-panel > .panel-heading, body #free-plan-container > .panel-heading { background: var(--c2-ok-bg) !important; border-bottom: 1px solid color-mix(in srgb, var(--c2-ok) 34%, transparent) !important; color: var(--c2-ok) !important; font-weight: 650; } body #pix-payment-panel, body #free-plan-container { border: 1px solid var(--c2-line) !important; border-radius: var(--c2-r-lg) !important; box-shadow: var(--c2-shadow) !important; } /* --- Painéis de aba --- Derruba: .tab-content .tab-pane{background-color:#fff} — era um retângulo branco emoldurando o conteúdo escuro. */ body .tab-content .tab-pane, body .tab-content, body .tab-pane { background-color: transparent !important; border-radius: var(--c2-r); } /* A trilha de abas rola na horizontal quando as 12 redes não cabem, em vez de cortar as últimas. */ body .nav-tabs, body .nav-tabs-custom > .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } body .nav-tabs > li > a, body .nav-tabs-custom > .nav-tabs > li > a { white-space: nowrap; } /* --- Interruptores (.tgl-ios) --- Derruba o azul fixo #1753f4 do estado ligado e o cinza #838383 do desligado. */ body .tgl-ios + .tgl-btn { background: var(--c2-surface-3); border: 1px solid var(--c2-line-strong); width: 40px; height: 22px; } body .tgl-ios + .tgl-btn:after { background: var(--c2-muted); box-shadow: none; } body .tgl-ios:checked + .tgl-btn, body .mingle-user .tgl-ios:checked + .tgl-btn { background: var(--c2-grad); border-color: transparent; } body .tgl-ios:checked + .tgl-btn:after { background: #fff; } body .tgl:focus-visible + .tgl-btn { outline: 2px solid var(--c2-brand-hi); outline-offset: 2px; } /* --- Botão "voltar" --- Vinha como .btn-primary em 12 telas, competindo com a ação principal da página. Volta a ser um botão secundário. */ body .back-btn, body .btn-primary.back-btn { background: var(--c2-surface-2) !important; border: 1px solid var(--c2-line-strong) !important; color: var(--c2-text) !important; box-shadow: none !important; } body .back-btn:hover, body .btn-primary.back-btn:hover { background: var(--c2-surface-3) !important; border-color: var(--c2-muted) !important; } /* O SVG da seta tem stroke="white" fixo; currentColor o alinha ao tema. */ body .back-btn svg path { stroke: currentColor; } body .back-btn svg { width: 9px; height: 15px; } /* --- Setas de ordenação do DataTables --- Ficavam colando no rótulo; aqui ganham um respiro e cor discreta. */ body table.dataTable thead th { padding-right: 26px !important; position: relative; } body table.dataTable thead .sorting:after, body table.dataTable thead .sorting_asc:after, body table.dataTable thead .sorting_desc:after { right: 8px !important; opacity: .45; color: var(--c2-muted); } body table.dataTable thead .sorting_asc:after, body table.dataTable thead .sorting_desc:after { opacity: .9; color: var(--c2-brand-hi); } /* 21. Roteiro de conexão Meta ============================================= */ /* A linha vertical representa o caminho real que a Meta exige: perfil, Página, vínculo e autorização. Facebook e Instagram compartilham a mesma estrutura, mas cada rede preserva sua própria assinatura cromática. */ .c2-connection-guide { --c2-guide-accent: var(--c2-brand-hi); --c2-guide-soft: var(--c2-brand-bg); margin: 4px 0 24px; padding: 22px; border: 1px solid var(--c2-line); border-top: 3px solid var(--c2-guide-accent); border-radius: var(--c2-r); background: linear-gradient(135deg, var(--c2-guide-soft), transparent 42%), var(--c2-surface-2); box-shadow: var(--c2-shadow); color: var(--c2-text); } .c2-connection-guide--facebook { --c2-guide-accent: #4f8df7; --c2-guide-soft: rgba(79, 141, 247, .12); } .c2-connection-guide--instagram { --c2-guide-accent: #d65db1; --c2-guide-soft: rgba(214, 93, 177, .12); } .c2-connection-guide__intro { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; } .c2-connection-guide__network { display: inline-flex; flex: 0 0 42px; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--c2-guide-accent) 42%, transparent); border-radius: 12px; background: var(--c2-guide-soft); color: var(--c2-guide-accent); font-size: 20px; } .c2-connection-guide__eyebrow { display: block; margin-bottom: 3px; color: var(--c2-guide-accent); font-size: 11px; font-weight: 800; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; } .c2-connection-guide h3 { margin: 0 0 5px; color: var(--c2-text); font-size: 18px; } .c2-connection-guide p { max-width: 850px; margin: 0; color: var(--c2-text-2); } .c2-connection-guide p strong, .c2-connection-guide__steps strong, .c2-connection-guide__check strong { color: var(--c2-text); } .c2-connection-guide__steps { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .c2-connection-guide__steps li { display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 14px; border: 1px solid var(--c2-line); border-radius: var(--c2-r-sm); background: color-mix(in srgb, var(--c2-surface) 88%, transparent); } .c2-connection-guide__number { display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c2-guide-accent); color: #fff; font-family: var(--c2-display); font-size: 13px; font-weight: 800; box-shadow: 0 0 0 4px var(--c2-guide-soft); } .c2-connection-guide__steps strong, .c2-connection-guide__steps span { display: block; } .c2-connection-guide__steps strong { margin: 2px 0 4px; font-size: 13.5px; } .c2-connection-guide__steps li div > span { color: var(--c2-text-2); font-size: 12.5px; line-height: 1.55; } .c2-connection-guide__steps b { color: var(--c2-text); font-weight: 650; } .c2-connection-guide__check { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--c2-warn) 28%, var(--c2-line)); border-radius: var(--c2-r-sm); background: var(--c2-warn-bg); color: var(--c2-text-2); font-size: 12.5px; } .c2-connection-guide__check i { margin-top: 3px; color: var(--c2-warn); } /* 22. Mobile, depois de tudo ============================================== */ /* Este bloco fica no fim de propósito: as regras de compatibilidade acima usam !important com especificidade alta e venceriam os ajustes de largura pequena se eles viessem antes. */ @media (max-width: 767px) { .c2-connection-guide { padding: 17px 15px; } .c2-connection-guide__steps { grid-template-columns: 1fr; } .c2-connection-guide__intro { gap: 11px; } .c2-connection-guide__network { flex-basis: 38px; width: 38px; height: 38px; } body .content, body section.content, body .content-wrapper > section.content { padding: 16px 14px 34px !important; } body section.content-header, body .content-header, body .c2-page-head { padding: 18px 14px 0 !important; } body .content-header > h1, body .content-header h1, body .c2-page-head__title { font-size: 21px !important; flex-wrap: wrap; gap: 10px; } /* Título e botão de ação em linhas separadas, com o botão ocupando a largura */ body .content-header > h1 > .sap-delete, body .content-header > h1 > .pull-right { width: 100%; margin-left: 0; } body .content-header > h1 > .sap-delete > .btn, body .content-header > h1 .back-btn { width: 100%; } body .box-header, body .box-body, body .panel-body, body .tab-content { padding: 15px !important; } body .box, body .box-primary, body .panel { border-radius: var(--c2-r); } /* Filtros e ações em coluna: no desktop ficam lado a lado e aqui estouravam */ body .filter-wrap, body .filter-wrap > .d-flex, body .sap-logs-graph-filter-wrap, body .dataTables_wrapper .row:first-child > div { flex-direction: column; align-items: stretch; width: 100%; } body .filter-wrap select, body .filter-wrap .btn, body .filter-wrap input, body .dataTables_filter input { width: 100% !important; max-width: none; } /* Colunas do Bootstrap 3 já empilham; o que faltava era o formulário não estourar a largura da tela. */ body .row.edit-plan-inner > [class*="col-"], body .row > [class*="col-md-"], body .row > [class*="col-lg-"] { padding-left: 0; padding-right: 0; } body .table-responsive, body .dataTables_wrapper, body .box-body > table, body .box-body > .table { display: block; width: 100%; overflow-x: auto; } /* As 12 abas de rede rolam na horizontal em vez de comprimir */ body .nav-tabs, body .nav-tabs-custom > .nav-tabs, body .sap-general-setting-tab.nav-tabs-custom > .nav-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } /* Rótulo e controle empilhados nos ajustes */ body .sap-settings-row, body .row.d-flex.align-items-center { flex-wrap: wrap; } } @media (max-width: 767px) { /* A marca ficava atrás da barra do topo: o backdrop-filter da navbar cria um contexto de empilhamento e ela é pintada depois no DOM. */ body .logo-class, body .skin-blue .main-header .logo-class { z-index: 5; } body .main-header .navbar, body .skin-blue .main-header .navbar { z-index: 1; } /* Derruba: .dataTables_wrapper .dataTables_info{position:absolute} — o texto "Mostrando 1 até N" era tirado do fluxo e caía sobre a paginação. */ body .dataTables_wrapper .dataTables_info, body .dataTables_wrapper .dataTables_paginate { position: static !important; float: none; width: 100%; text-align: left; padding-top: 8px; } body .dataTables_wrapper .dataTables_paginate { text-align: center; } body .pagination { flex-wrap: wrap; justify-content: center; } /* Interruptores achatavam ao entrar num container flex apertado. */ body .tgl + .tgl-btn, body .tgl-ios + .tgl-btn { flex: none; min-width: 40px; } } /* 23. Rodapé das tabelas ================================================== */ /* .dataTables_wrapper .dataTables_info vinha com position:absolute no tema antigo, o que fazia o texto de contagem flutuar sobre os botões de página. Em fluxo normal, contagem à esquerda e paginação à direita. */ body .dataTables_wrapper .dataTables_info { position: static !important; } body .dataTables_wrapper > .row:last-child { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0; } body .dataTables_wrapper > .row:last-child > [class*="col-"] { width: auto; float: none; padding: 0; } /* 24. Licença institucional ============================================== */ .c2-license-page { --c2-license-gold: #d8b56a; --c2-license-gold-soft: rgba(216, 181, 106, .13); } .c2-license-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 18px !important; } .c2-license-heading h1 { display: flex; align-items: center; gap: 12px; margin: 4px 0 5px; } .c2-license-heading p { margin: 0; color: var(--c2-text-2); } .c2-license-eyebrow, .c2-license-kicker { color: var(--c2-license-gold); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .c2-license-status { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 7px 11px; border: 1px solid rgba(52, 211, 153, .28); border-radius: var(--c2-r-pill); background: var(--c2-ok-bg); color: var(--c2-ok); font-size: 12px; font-weight: 700; } .c2-license-content { padding-top: 0 !important; } .c2-license-document { position: relative; overflow: hidden; max-width: 1180px; margin: 0 auto; border: 1px solid var(--c2-line); border-radius: var(--c2-r-lg); background: var(--c2-surface); box-shadow: var(--c2-shadow-lg); } .c2-license-document::before { position: absolute; z-index: 0; top: -140px; right: -130px; width: 360px; height: 360px; border: 1px solid rgba(216, 181, 106, .16); border-radius: 50%; box-shadow: 0 0 0 38px rgba(216, 181, 106, .035), 0 0 0 82px rgba(216, 181, 106, .025); content: ""; pointer-events: none; } .c2-license-cover { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(260px, 1fr) minmax(230px, auto); align-items: center; gap: 24px; padding: 34px 38px 30px; border-bottom: 1px solid var(--c2-line); } .c2-license-seal { display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid rgba(216, 181, 106, .46); border-radius: 20px; background: var(--c2-license-gold-soft); color: var(--c2-license-gold); font-size: 29px; box-shadow: inset 0 0 0 6px var(--c2-surface); } .c2-license-cover__copy h2 { margin: 1px 0 0; font-size: clamp(30px, 4vw, 48px); line-height: 1; letter-spacing: -.045em; } .c2-license-cover__copy p { margin: 9px 0 2px; color: var(--c2-text-2); } .c2-license-cover__copy strong { color: var(--c2-text); font-size: 14px; letter-spacing: .035em; } .c2-license-meta { display: grid; gap: 10px; min-width: 240px; margin: 0; padding-left: 24px; border-left: 1px solid var(--c2-line); } .c2-license-meta div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; } .c2-license-meta dt, .c2-license-meta dd { margin: 0; font-size: 11px; } .c2-license-meta dt { color: var(--c2-muted); font-weight: 600; } .c2-license-meta dd { color: var(--c2-text); font-weight: 700; } .c2-license-notice { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 13px; margin: 24px 38px 4px; padding: 15px 17px; border: 1px solid rgba(129, 140, 248, .24); border-radius: var(--c2-r); background: var(--c2-brand-bg); } .c2-license-notice i { margin-top: 3px; color: var(--c2-brand-hi); } .c2-license-notice p { margin: 0; color: var(--c2-text-2); font-size: 13px; } .c2-license-notice strong { color: var(--c2-text); } .c2-license-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px 38px 30px; } .c2-license-section { display: grid; grid-template-columns: 34px 1fr; gap: 13px; min-height: 150px; padding: 22px 26px 22px 0; border-bottom: 1px solid var(--c2-line); } .c2-license-section:nth-child(odd) { padding-right: 30px; border-right: 1px solid var(--c2-line); } .c2-license-section:nth-child(even) { padding-left: 30px; } .c2-license-section:nth-last-child(-n + 2) { border-bottom: 0; } .c2-license-section__mark { color: var(--c2-license-gold); font-family: var(--c2-display); font-size: 11px; font-weight: 800; letter-spacing: .06em; } .c2-license-section h3 { margin: -3px 0 8px; font-size: 16px; } .c2-license-section p { margin: 0; color: var(--c2-text-2); font-size: 13px; line-height: 1.7; } .c2-license-signature { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 38px; border-top: 1px solid var(--c2-line); background: var(--c2-surface-2); } .c2-license-signature div { display: grid; gap: 1px; } .c2-license-signature span { color: var(--c2-muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .c2-license-signature strong { color: var(--c2-text); letter-spacing: .03em; } .c2-license-signature p { margin: 0; color: var(--c2-text-2); font-size: 12px; } @media (max-width: 900px) { .c2-license-cover { grid-template-columns: auto 1fr; } .c2-license-meta { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 0 0; border-top: 1px solid var(--c2-line); border-left: 0; } .c2-license-meta div { grid-template-columns: 1fr; gap: 2px; } } @media (max-width: 700px) { .c2-license-heading { align-items: flex-start; flex-direction: column; gap: 12px; } .c2-license-cover { padding: 26px 22px; } .c2-license-seal { width: 56px; height: 56px; border-radius: 16px; font-size: 24px; } .c2-license-notice { margin: 20px 22px 0; } .c2-license-sections { grid-template-columns: 1fr; padding: 14px 22px 24px; } .c2-license-section, .c2-license-section:nth-child(odd), .c2-license-section:nth-child(even) { min-height: 0; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--c2-line); } .c2-license-section:nth-last-child(2) { border-bottom: 1px solid var(--c2-line); } .c2-license-signature { align-items: flex-start; flex-direction: column; padding: 20px 22px; } } @media (max-width: 479px) { .c2-license-cover { grid-template-columns: 1fr; } .c2-license-meta { grid-template-columns: 1fr; } } @media print { .c2-license-page { --c2-bg: #fff; --c2-surface: #fff; --c2-surface-2: #f7f7f7; --c2-text: #111827; --c2-text-2: #475569; --c2-muted: #64748b; --c2-line: #d9dee8; } .c2-license-document { max-width: none; border-radius: 0; box-shadow: none; } } /* 23. Compositor de posts: correções de layout ============================ */ /* O cabeçalho do card usa
— sem a classe .box-header. Sem padding, o título "Adicionar Conteúdo" ficava montado sobre a borda arredondada do card. */ body .add-new-post-title, body .box > .with-border:first-child, body .box-primary > .with-border:first-child { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--c2-line); } body .add-new-post-title h3.box-title, body .mingle-user .add-new-post-title h3.box-title { font-family: var(--c2-display) !important; font-size: 16px !important; font-weight: 650 !important; line-height: 1.4 !important; margin: 0 !important; } /* Derruba: .mingle-user .bg-white{background:#fff} e .ptb-30{padding:30px} — o card já tem fundo e espaçamento próprios. */ body .bg-white, body .mingle-user .bg-white, body .mingle-admin .bg-white { background-color: transparent !important; } body .ptb-30, body .mingle-user .ptb-30 { padding: 0 !important; } /* --- Abas de rede --- Derruba: ul.nav-tabs li{flex-basis:0; flex-grow:1} — com duas redes ativas, cada aba ocupava metade do card e o sublinhado da aba ativa esticava por centenas de pixels. Agora cada aba tem a largura do próprio nome. */ body ul.nav-tabs li, body .nav-tabs > li, body .nav-tabs-custom > .nav-tabs > li { flex: 0 0 auto; flex-basis: auto; flex-grow: 0; text-align: left; } /* --- Contador de caracteres --- Ficava solto embaixo do campo, azul e sem rótulo (a chave de idioma 'char_count' não existia). */ body .custom-char-count { display: block; margin: 6px 2px 0 0; text-align: right; color: var(--c2-muted); font-size: 12px; font-variant-numeric: tabular-nums; } body .custom-char-count #char-count { color: var(--c2-text-2); font-weight: 600; } /* --- Situação da publicação por rede --- Era um