/* ============================================================
Olho.pro — skin da landing aplicado ao painel
Arquivo: backend/css/custom_b.css (gancho oficial do script)
Carrega por último: sobrescreve o tema sem tocar no núcleo.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');
:root{
--olho-brand:#0D4FD8;
--olho-brand-d:#0A41B8;
--olho-navy:#0F2440;
--olho-bg:#F6F8FB;
--olho-line:#E4EAF3;
--olho-line2:#D2DCEA;
--olho-tint:#E9F0FD;
--oljo-mut:#5A6B85;
--olho-mut:#5A6B85;
}
/* ---------- tipografia (fonte da landing) ---------- */
*{ font-family:'Instrument Sans',-apple-system,'Segoe UI',Roboto,sans-serif; }
/* ---------- fundo geral ---------- */
body:not(.dark_mode){ background-color:var(--olho-bg); }
/* ---------- sidebar em navy (como o CTA da landing) ---------- */
.sidebar.sidebar-dark,
.sidebar-dark .sidebar-brand{
background:linear-gradient(180deg,#0F2440 0%,#0B1830 100%) !important;
}
.sidebar-dark .nav-item .nav-link{ color:rgba(234,239,234,.75); }
.sidebar-dark .nav-item .nav-link i{ color:rgba(234,239,234,.55); }
.sidebar-dark .nav-item .nav-link:hover{
background:rgba(13,79,216,.35) !important;
color:#fff;
}
.sidebar-dark .nav-item.active .nav-link{
background:var(--olho-brand) !important;
color:#fff;
}
.sidebar-dark .sidebar-brand-text{ font-weight:700; letter-spacing:-.01em; }
.sidebar-dark hr.sidebar-divider{ border-color:rgba(255,255,255,.08); }
/* ---------- topbar ---------- */
.topbar #sidebarToggleTop{ color:var(--oljo-mut); }
.topbar #sidebarToggleTop:hover{ color:var(--olho-brand); }
.topbar .nav-item .nav-link{ color:var(--oljo-mut); }
.topbar .nav-item .nav-link:hover{ color:var(--olho-navy); }
/* ---------- botões ---------- */
.btn{ border-radius:10px !important; font-weight:600; }
.btn-primary{
background:var(--olho-brand) !important;
border-color:var(--olho-brand) !important;
box-shadow:none !important;
}
.btn-primary:hover,.btn-primary:focus{
background:var(--olho-brand-d) !important;
border-color:var(--olho-brand-d) !important;
}
.btn-primary:active{ background:var(--olho-brand-d) !important; }
.btn-secondary{
background:#fff !important;
border-color:var(--olho-line2) !important;
color:#12233B !important;
}
.btn-secondary:hover{
border-color:var(--olho-brand) !important;
color:var(--olho-brand) !important;
}
.btn-success{ background:#0E8A54 !important; border-color:#0E8A54 !important; }
.btn-danger{ border-radius:10px !important; }
.btn-circle{ border-radius:50% !important; }
.btn-sm{ border-radius:8px !important; }
/* gradiente padrão do SB Admin → azul da marca */
.bg-gradient-primary{
background:linear-gradient(135deg,var(--olho-brand),var(--olho-brand-d)) !important;
}
/* ---------- cards ---------- */
body:not(.dark_mode) .card{
background:#fff;
border:1px solid var(--olho-line);
border-radius:16px;
box-shadow:0 1px 2px rgba(18,35,59,.05),0 10px 30px rgba(18,35,59,.07) !important;
}
.card .card-header{
background:transparent !important;
border-bottom:1px solid var(--olho-line);
border-radius:16px 16px 0 0 !important;
color:var(--olho-navy);
font-weight:700;
}
.card .card-body{ color:#12233B; }
.card .card-footer{ background:transparent; border-top:1px solid var(--olho-line); border-radius:0 0 16px 16px !important; }
/* ---------- formulários ---------- */
.form-control,.form-control-user,select.form-control{
border-radius:10px !important;
border:1.5px solid var(--olho-line2);
color:#12233B;
}
.form-control:focus,.form-control-user:focus{
border-color:var(--olho-brand) !important;
box-shadow:0 0 0 4px var(--olho-tint) !important;
}
.input-group-text{ border-radius:10px !important; border-color:var(--olho-line2) !important; }
.custom-control-input:checked ~ .custom-control-label::before{
background-color:var(--olho-brand) !important;
border-color:var(--olho-brand) !important;
}
/* ---------- dropdowns / modais ---------- */
.dropdown-menu{ border-radius:12px !important; border:1px solid var(--olho-line); box-shadow:0 10px 30px rgba(18,35,59,.12) !important; }
.dropdown-item:active{ background:var(--olho-tint) !important; color:var(--olho-brand) !important; }
.modal-content{ border-radius:16px !important; border:none !important; box-shadow:0 30px 90px rgba(13,26,46,.35) !important; }
.modal-header{ border-bottom:1px solid var(--olho-line) !important; }
.modal-footer{ border-top:1px solid var(--olho-line) !important; }
/* ---------- tabelas ---------- */
.table thead th{ border-bottom:1px solid var(--olho-line2) !important; font-weight:700; color:var(--olho-navy); }
.table td{ border-color:var(--olho-line) !important; }
/* ---------- paginação ---------- */
.pagination .page-link{
border-radius:8px !important;
border-color:var(--olho-line) !important;
margin:0 2px;
color:var(--olho-navy);
}
.pagination .page-item.active .page-link{
background:var(--olho-brand) !important;
border-color:var(--olho-brand) !important;
}
/* ---------- badges / alerts ---------- */
.badge{ border-radius:6px; font-weight:600; }
.alert{ border-radius:12px !important; }
/* ---------- scrollbar discreta ---------- */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#C9D5E4; border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--olho-line2); }
/* ============================================================
FASE 2 (v3) — sidebar blindada + polimento geral
============================================================ */
/* ---------- tipografia (hierarquia da landing) ---------- */
h1,h2,h3,h4,h5,h6{ letter-spacing:-.021em; }
body:not(.dark_mode) h1,body:not(.dark_mode) h2{ color:#0F2440; }
h4.card-title, .card-header h6{
font-size:15px !important;
font-weight:700 !important;
text-transform:none !important;
color:#0F2440 !important;
}
.text-xs{ font-size:11.5px !important; letter-spacing:.04em; }
body:not(.dark_mode) .text-xs,body:not(.dark_mode) .text-gray-300{ color:#5A6B85 !important; }
body:not(.dark_mode) .text-gray-800{ color:#12233B !important; }
body:not(.dark_mode) .text-primary{ color:#0D4FD8 !important; }
/* ---------- SIDEBAR v5: ativo sempre legível + setas ---------- */
.sidebar,
.sidebar ul.components,
.sidebar .sidebar-card{
background:linear-gradient(180deg,#0F2440 0%,#0B1830 100%) !important;
}
.sidebar .sidebar-brand{ background:transparent !important; color:#fff !important; }
.sidebar .sidebar-brand span,
.sidebar .sidebar-brand-text{ color:#fff !important; font-weight:700 !important; }
/* links principais */
.sidebar .nav-item .nav-link{
display:flex !important;
align-items:center !important;
color:rgba(234,239,234,.78) !important;
border-radius:10px;
margin:2px 8px !important;
padding:.6rem .9rem .6rem 1rem !important;
}
.sidebar .nav-item .nav-link i,
.sidebar .nav-item .nav-link svg{ color:rgba(234,239,234,.55) !important; }
.sidebar .nav-item .nav-link span,
.sidebar .nav-item .nav-link p{
flex:1 1 auto !important;
min-width:0 !important;
margin:0 !important;
color:rgba(234,239,234,.78) !important;
font-weight:600 !important;
font-size:14px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ATIVO/HOVER: fundo azul + TEXTO BRANCO em qualquer elemento interno
(o * cobre spans, smalls e qualquer tag que o tema pinte de azul) */
.sidebar .nav-item.active .nav-link,
.sidebar .nav-item .nav-link.active,
.sidebar .nav-item .nav-link[aria-expanded="true"],
.sidebar .nav-item .nav-link:hover{
background:#0D4FD8 !important;
color:#fff !important;
}
.sidebar .nav-item.active .nav-link *,
.sidebar .nav-item .nav-link.active *,
.sidebar .nav-item .nav-link[aria-expanded="true"] *,
.sidebar .nav-item .nav-link:hover *{
color:#fff !important;
}
/* herdado do hover: só para o texto de ação */
.sidebar .nav-item .nav-link[aria-expanded="true"] > i:not(:first-child){
color:rgba(255,255,255,.85) !important;
}
/* setas: sempre à direita, com folga, sem cobrir texto */
.sidebar .nav-item .nav-link > i:not(:first-child),
.sidebar .nav-item .nav-link > span:not(:first-of-type),
.sidebar .nav-item .nav-link .chevron,
.sidebar .nav-item .nav-link .arrow,
.sidebar .nav-item .nav-link i.fa-chevron-down,
.sidebar .nav-item .nav-link i.fa-chevron-right,
.sidebar .nav-item .nav-link i.fa-chevron-up,
.sidebar .nav-item .nav-link i.fa-angle-down,
.sidebar .nav-item .nav-link i.fa-angle-right,
.sidebar .nav-item .nav-link i.fa-caret-down,
.sidebar .nav-item .nav-link i.float-right{
order:3 !important;
flex:0 0 auto !important;
float:none !important;
position:static !important;
margin:0 0 0 auto !important;
padding:0 !important;
width:auto !important;
color:rgba(234,239,234,.5) !important;
font-size:.8rem !important;
}
/* submenu: fundo navy profundo (legível em qualquer tema) */
.sidebar .nav-item .collapse,
.sidebar .nav-item .collapsing{
background:rgba(5,12,26,.38) !important;
border-radius:12px !important;
margin:0 6px 8px !important;
padding:3px 0 !important;
}
.sidebar .nav-item .collapse .collapse-inner,
.sidebar .nav-item .collapse > div,
.sidebar .nav-item .collapse [class*="bg-"]{
background:transparent !important;
box-shadow:none !important;
}
.sidebar .nav-item .collapse .collapse-item{
display:block !important;
color:rgba(234,239,234,.78) !important;
border-radius:8px !important;
margin:1px 8px !important;
padding:.5rem .9rem !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.sidebar .nav-item .collapse .collapse-item:hover{
background:rgba(13,79,216,.45) !important;
color:#fff !important;
}
.sidebar .nav-item .collapse .collapse-item.active{
background:#0D4FD8 !important;
color:#fff !important;
}
.sidebar .nav-item .collapse .collapse-header{
color:rgba(234,239,234,.42) !important;
text-transform:none !important;
font-size:10.5px !important;
}
.sidebar hr.sidebar-divider,
.sidebar .sidebar-heading{
border-color:rgba(255,255,255,.08) !important;
color:rgba(234,239,234,.45) !important;
}
.sidebar-card{ border:1px solid rgba(255,255,255,.08) !important; }
#sidebarToggle{ color:rgba(234,239,234,.6) !important; }
#sidebarToggle:hover{ color:#fff !important; }
/* ---------- topbar ---------- */
body:not(.dark_mode) .topbar{ background:#fff; }
.topbar #sidebarToggleTop{ color:#5A6B85; }
.topbar #sidebarToggleTop:hover{ color:#0D4FD8; }
body:not(.dark_mode) .topbar .topbar-divider{ border-color:#E4EAF3 !important; }
.topbar .dropdown-menu{ border-radius:12px !important; }
/* ---------- dashboard ---------- */
body:not(.dark_mode) .card .h5, body:not(.dark_mode) .card .display-4{ color:#0F2440 !important; }
.card [class*="col-auto"] .h5{ font-size:1.1rem !important; }
.card .text-success{ color:#0E8A54 !important; }
.card .text-danger{ color:#B42323 !important; }
/* ---------- lista de tours ---------- */
body:not(.dark_mode) .card .img-thumbnail{
border:1px solid #E4EAF3 !important;
border-radius:12px !important;
background:#fff !important;
padding:4px !important;
}
body:not(.dark_mode) .container-fluid .h3,
body:not(.dark_mode) .container-fluid h1{
color:#0F2440 !important;
font-weight:700 !important;
}
/* ---------- modais ---------- */
.modal .form-control{ border-radius:10px !important; border:1.5px solid #D2DCEA !important; }
.modal .btn-secondary{ background:#fff !important; color:#12233B !important; }
.modal .btn-secondary:hover{ border-color:#0D4FD8 !important; color:#0D4FD8 !important; }
.modal .modal-title{ font-weight:700; color:#0F2440; }
.modal .custom-select,
.modal select.form-control{
border-radius:10px !important;
border:1.5px solid #D2DCEA !important;
background-color:#fff;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235A6B85'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 10px center;
background-size:18px;
padding-right:36px;
-webkit-appearance:none; -moz-appearance:none; appearance:none;
}
.modal .custom-select:focus,
.modal select.form-control:focus{
border-color:#0D4FD8 !important;
box-shadow:0 0 0 4px #E9F0FD !important;
}
/* ---------- upload/dropzone ---------- */
body:not(.dark_mode) .dropzone{
border:2px dashed #D2DCEA !important;
border-radius:14px !important;
background:#F7FAFE !important;
}
body:not(.dark_mode) .dropzone .dz-message{ color:#5A6B85 !important; }
/* ---------- alertas ---------- */
.alert{ border-radius:12px !important; border-width:1px !important; }
body:not(.dark_mode) .alert-info{ background:#E9F0FD !important; border-color:#C7DAF8 !important; color:#0A41B8 !important; }
body:not(.dark_mode) .alert-success{ background:#E9F7EF !important; border-color:#BFE5CE !important; color:#196B3E !important; }
body:not(.dark_mode) .alert-danger{ background:#FDECEC !important; border-color:#F3C4C4 !important; color:#B42323 !important; }
/* ---------- tooltips ---------- */
body:not(.dark_mode) .tooltipster-base{
background:#16283F !important; color:#E8EEF7 !important;
border-radius:8px !important; box-shadow:0 16px 40px rgba(13,26,46,.35) !important;
}
body:not(.dark_mode) .tooltipster-sidetip .tooltipster-box{
background:#16283F !important; border:none !important; border-radius:8px !important;
}
/* ---------- foco visível ---------- */
.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible{
outline:2px solid #0D4FD8 !important;
outline-offset:2px !important;
}
/* ============================================================
FASE 3 — de-quadrar: tabelas, selects, tabs, listas, rodapé
============================================================ */
/* ---------- selects GLOBAIS (seta custom, cantos suaves) ---------- */
body:not(.dark_mode) select.form-control,
body:not(.dark_mode) .custom-select{
border-radius:10px !important;
border:1.5px solid #D2DCEA !important;
background-color:#fff !important;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235A6B85'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;
background-position:right 10px center !important;
background-size:18px !important;
padding-right:38px !important;
-webkit-appearance:none !important;
-moz-appearance:none !important;
appearance:none !important;
height:auto !important;
color:#12233B !important;
}
body:not(.dark_mode) select.form-control:focus,
body:not(.dark_mode) .custom-select:focus{
border-color:#0D4FD8 !important;
box-shadow:0 0 0 4px #E9F0FD !important;
}
/* ---------- inputs de arquivo ---------- */
body:not(.dark_mode) .custom-file-label{
border-radius:10px !important;
border:1.5px solid #D2DCEA !important;
color:#12233B !important;
}
body:not(.dark_mode) .custom-file-input ~ .custom-file-label::after{
border-radius:0 9px 9px 0 !important;
background:#E9F0FD !important;
color:#0D4FD8 !important;
font-weight:600 !important;
padding:0 14px !important;
height:calc(100% - 3px) !important;
margin:1.5px 1.5px 1.5px 0 !important;
}
/* ---------- TABELAS: cabeçalho suave, linhas respirando ---------- */
body:not(.dark_mode) .table{ color:#12233B !important; }
body:not(.dark_mode) .table thead th{
background:#F7FAFE !important;
color:#5A6B85 !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.05em !important;
text-transform:uppercase !important;
border-bottom:1px solid #D2DCEA !important;
padding:.7rem .75rem !important;
border-top:none !important;
}
body:not(.dark_mode) .table th,
body:not(.dark_mode) .table td{
border-color:#E4EAF3 !important;
vertical-align:middle !important;
padding:.65rem .75rem !important;
}
body:not(.dark_mode) .table-hover tbody tr:hover{ background:#F7FAFE !important; }
body:not(.dark_mode) .table-striped tbody tr:nth-of-type(odd){ background:#FAFCFF !important; }
.dark_mode .table thead th{
background:rgba(255,255,255,.04) !important;
color:#B9C7DD !important;
border-color:rgba(255,255,255,.08) !important;
}
/* ---------- TABS / PILLS (settings) ---------- */
body:not(.dark_mode) .nav-tabs{ border-bottom:1px solid #E4EAF3 !important; }
body:not(.dark_mode) .nav-tabs .nav-link{
border:none !important;
border-radius:8px 8px 0 0 !important;
color:#5A6B85 !important;
font-weight:600 !important;
}
body:not(.dark_mode) .nav-tabs .nav-link:hover{ color:#0F2440 !important; }
body:not(.dark_mode) .nav-tabs .nav-link.active{
background:#fff !important;
border-bottom:2px solid #0D4FD8 !important;
color:#0D4FD8 !important;
}
.nav-pills .nav-link{
border-radius:999px !important;
font-weight:600 !important;
}
.nav-pills .nav-link.active{ background:#0D4FD8 !important; }
/* ---------- formulários de configuração: respirar ---------- */
.form-group{ margin-bottom:1.1rem !important; }
body:not(.dark_mode) .form-control:disabled,
body:not(.dark_mode) .form-control[readonly]{ background:#F0F5FD !important; }
body:not(.dark_mode) .input-group-text{
background:#F7FAFE !important;
border:1.5px solid #D2DCEA !important;
color:#5A6B85 !important;
border-radius:10px !important;
}
/* ---------- accordions de configuração (cards colados) ---------- */
.card + .card{ margin-top:.85rem; }
body:not(.dark_mode) #accordion .card,
body:not(.dark_mode) .accordion .card{ margin-bottom:.9rem; }
body:not(.dark_mode) #accordion .card-header,
body:not(.dark_mode) .accordion .card-header{
background:#fff !important;
border-bottom:1px solid #E4EAF3 !important;
}
body:not(.dark_mode) #accordion .card-header:hover,
body:not(.dark_mode) .accordion .card-header:hover{ background:#F7FAFE !important; }
/* ---------- listas ---------- */
body:not(.dark_mode) .list-group-item{
border-color:#E4EAF3 !important;
color:#12233B !important;
}
.list-group-item:first-child{ border-radius:12px 12px 0 0 !important; }
.list-group-item:last-child{ border-radius:0 0 12px 12px !important; }
.list-group-item:only-child{ border-radius:12px !important; }
body:not(.dark_mode) .list-group-item.active{ background:#0D4FD8 !important; border-color:#0D4FD8 !important; }
/* ---------- progress / badges ---------- */
.progress{ border-radius:99px !important; background:#E7EDF6 !important; }
.progress-bar{ border-radius:99px !important; }
/* ---------- itens de dropdown (menus soltos) ---------- */
.dropdown-item{
border-radius:8px !important;
margin:2px 6px !important;
padding:.5rem .9rem !important;
font-weight:500 !important;
}
/* ---------- rodapé do painel: cara de landing ---------- */
body:not(.dark_mode) .sticky-footer,
body:not(.dark_mode) footer.sticky-footer,
body:not(.dark_mode) .bg-white.py-4{
background:#fff !important;
border-top:1px solid #E4EAF3 !important;
padding:18px 0 !important;
font-size:13px !important;
color:#8B99B0 !important;
}
body:not(.dark_mode) .sticky-footer a,
body:not(.dark_mode) footer a{ color:#5A6B85 !important; font-weight:500 !important; }
body:not(.dark_mode) .sticky-footer a:hover,
body:not(.dark_mode) footer a:hover{ color:#0D4FD8 !important; }
/* ---------- breadcrumb discreto ---------- */
.breadcrumb{
background:transparent !important;
font-size:13px !important;
margin-bottom:.5rem !important;
}
body:not(.dark_mode) .breadcrumb-item a{ color:#5A6B85 !important; }
body:not(.dark_mode) .breadcrumb-item.active{ color:#12233B !important; }
.breadcrumb-item + .breadcrumb-item::before{ color:#8B99B0 !important; }
/* ---------- cabeçalhos grandes de página: menos "grito" ---------- */
body:not(.dark_mode) .container-fluid > h1,
body:not(.dark_mode) .container-fluid > .h1{
font-size:24px !important;
font-weight:700 !important;
color:#0F2440 !important;
margin-bottom:.8rem !important;
}
body:not(.dark_mode) .container-fluid > h1 small,
body:not(.dark_mode) .container-fluid > .h1 small{ color:#8B99B0 !important; font-size:60% !important; }
/* ============================================================
FASE 4 — cabeçalho de página vira header-card (padrão landing)
============================================================ */
body:not(.dark_mode) .container-fluid > .d-sm-flex.align-items-center.justify-content-between,
body:not(.dark_mode) .content .d-sm-flex.align-items-center.justify-content-between{
background:#fff !important;
border:1px solid #E4EAF3 !important;
border-radius:16px !important;
box-shadow:0 1px 2px rgba(18,35,59,.05),0 10px 30px rgba(18,35,59,.07) !important;
padding:16px 22px !important;
margin-bottom:1.3rem !important;
}
.dark_mode .container-fluid > .d-sm-flex.align-items-center.justify-content-between,
.dark_mode .content .d-sm-flex.align-items-center.justify-content-between{
background:#101a26 !important;
border:1px solid rgba(255,255,255,.07) !important;
border-radius:16px !important;
padding:16px 22px !important;
margin-bottom:1.3rem !important;
}
/* título dentro do header-card */
body:not(.dark_mode) .d-sm-flex.align-items-center.justify-content-between h1,
body:not(.dark_mode) .d-sm-flex.align-items-center.justify-content-between .h1,
body:not(.dark_mode) .d-sm-flex.align-items-center.justify-content-between .h3{
font-size:20px !important;
font-weight:700 !important;
color:#0F2440 !important;
margin:0 !important;
letter-spacing:-.021em !important;
}
.dark_mode .d-sm-flex.align-items-center.justify-content-between h1,
.dark_mode .d-sm-flex.align-items-center.justify-content-between .h3{
color:#E7ECF7 !important;
}
body:not(.dark_mode) .d-sm-flex.align-items-center.justify-content-between h1 small,
body:not(.dark_mode) .d-sm-flex.align-items-center.justify-content-between .h1 small{
color:#8B99B0 !important;
font-size:60% !important;
font-weight:500 !important;
}
/* botões de ação do header: peso visual da landing */
.d-sm-flex.align-items-center.justify-content-between .btn{ height:42px; }
.d-sm-flex.align-items-center.justify-content-between .btn i{ font-size:14px; }
/* botões outline (comuns em ações) na paleta da marca */
body:not(.dark_mode) .btn-outline-primary{
color:#0D4FD8 !important;
border-color:#C7DAF8 !important;
background:#E9F0FD !important;
}
body:not(.dark_mode) .btn-outline-primary:hover{
background:#0D4FD8 !important;
border-color:#0D4FD8 !important;
color:#fff !important;
}
body:not(.dark_mode) .btn-outline-secondary{
color:#5A6B85 !important;
border-color:#D2DCEA !important;
}
body:not(.dark_mode) .btn-outline-secondary:hover{
color:#0D4FD8 !important;
border-color:#0D4FD8 !important;
}
/* grupos de botões juntos (ações de tabela/lista) */
.btn-group .btn:first-child{ border-radius:10px 0 0 10px !important; }
.btn-group .btn:last-child{ border-radius:0 10px 10px 0 !important; }
.btn-group .btn:only-child{ border-radius:10px !important; }
/* ============================================================
FASE 5 — topbar e subheader no padrão da landing
============================================================ */
/* ---------- topbar: card fixo ---------- */
body:not(.dark_mode) .topbar{
background:#fff !important;
border-bottom:1px solid #E4EAF3 !important;
box-shadow:0 1px 2px rgba(18,35,59,.04) !important;
}
.dark_mode .topbar{
background:#0E1626 !important;
border-bottom:1px solid rgba(255,255,255,.07) !important;
}
/* título da página na topbar (header_menu_title) */
.header_menu_title{
display:inline-flex !important;
align-items:center !important;
gap:10px !important;
padding:8px 16px !important;
border-radius:10px !important;
background:#F7FAFE !important;
border:1px solid #E4EAF3 !important;
font-weight:700 !important;
font-size:15px !important;
letter-spacing:-.01em !important;
}
.dark_mode .header_menu_title{
background:rgba(255,255,255,.05) !important;
border-color:rgba(255,255,255,.08) !important;
}
body:not(.dark_mode) .header_menu_title .text-gray-800{ color:#0F2440 !important; }
.dark_mode .header_menu_title .text-gray-800{ color:#E7ECF7 !important; }
body:not(.dark_mode) .header_menu_title i.text-gray-700{ color:#0D4FD8 !important; }
/* badge de contagem ao lado do título */
.header_menu_title .badge-primary{
background:#0D4FD8 !important;
border-radius:999px !important;
font-weight:700 !important;
padding:.3em .7em !important;
}
/* ---------- subheader v3: seletor com dropdown ancorado + quick actions ---------- */
.vt_select_header{
display:flex !important;
align-items:center !important;
flex-wrap:wrap !important;
gap:10px !important;
background:#fff !important;
border:1px solid #E4EAF3 !important;
border-radius:16px !important;
box-shadow:0 1px 2px rgba(18,35,59,.05),0 10px 30px rgba(18,35,59,.07) !important;
padding:12px 16px !important;
margin:1.2rem 0 !important;
position:relative !important;
overflow:visible !important;
}
.dark_mode .vt_select_header{
background:#101a26 !important;
border-color:rgba(255,255,255,.07) !important;
box-shadow:none !important;
}
/* botão do seletor */
.vt_select_header .vt_selector_btn{
display:inline-flex !important;
align-items:center !important;
justify-content:space-between !important;
width:auto !important;
min-width:220px !important;
height:40px !important;
border-radius:10px !important;
border:1.5px solid #D2DCEA !important;
background:#fff !important;
font-weight:600 !important;
padding:0 12px 0 14px !important;
}
.dark_mode .vt_select_header .vt_selector_btn{
background:#0C1526 !important;
border-color:#22304F !important;
color:#E7ECF7 !important;
}
.vt_select_header .vt_selector_btn .filter-option{ display:block !important; flex:1 1 auto !important; min-width:0 !important; padding:0 !important; }
.vt_select_header .vt_selector_btn .filter-option-inner{ padding:0 !important; }
.vt_select_header .vt_selector_btn .filter-option-inner-inner{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body:not(.dark_mode) .vt_select_header .vt_selector_btn .filter-option-inner-inner{ color:#12233B !important; }
.dark_mode .vt_select_header .vt_selector_btn .filter-option-inner-inner{ color:#E7ECF7 !important; }
.vt_select_header .vt_selector_btn .filter-option-inner-inner i{ flex:none !important; }
.vt_select_header .vt_selector_btn.dropdown-toggle::after{
flex:none !important;
margin-left:12px !important;
margin-right:2px !important;
border-top-color:#5A6B85 !important;
}
.dark_mode .vt_select_header .vt_selector_btn.dropdown-toggle::after{ border-top-color:#9FB0D1 !important; }
.vt_select_header .vt_selector_btn:hover{ border-color:#0D4FD8 !important; }
.vt_select_header .vt_selector_btn:focus{
border-color:#0D4FD8 !important;
box-shadow:0 0 0 4px rgba(13,79,216,.12) !important;
outline:none !important;
}
/* ============================================================
LISTA DO SELETOR — ancorada abaixo do botão, sempre
O HTML que você mandou mostra a lista com .dropdown-menu.show
e position:absolute + transform (Popper). Neutralizamos o
transform e ancoramos no próprio wrapper do botão.
============================================================ */
.vt_select_header .dropdown.bootstrap-select{
position:relative !important;
display:inline-flex !important;
}
.vt_select_header .dropdown.bootstrap-select > .dropdown-menu.show{
position:absolute !important;
top:100% !important; /* colada abaixo do botão */
left:0 !important;
right:auto !important;
transform:none !important; /* mata o translate3d do Popper */
will-change:auto !important;
margin-top:6px !important;
width:max(220px,100%) !important;
background:#fff !important;
border:1px solid #E4EAF3 !important;
border-radius:12px !important;
box-shadow:0 16px 40px rgba(18,35,59,.16) !important;
padding:6px !important;
z-index:1050 !important;
}
.dark_mode .vt_select_header .dropdown.bootstrap-select > .dropdown-menu.show{
background:#101A2E !important;
border-color:rgba(255,255,255,.1) !important;
box-shadow:0 16px 40px rgba(0,0,0,.5) !important;
}
/* lista interna (ul.inner) sem posição própria */
.vt_select_header .dropdown-menu .inner,
.vt_select_header .dropdown-menu ul.dropdown-menu.inner{
position:static !important;
transform:none !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
max-height:320px !important;
overflow-y:auto !important;
}
/* caixa de busca */
.vt_select_header .bs-searchbox{ padding:4px 4px 8px !important; }
.vt_select_header .bs-searchbox .form-control{
border-radius:8px !important;
border:1.5px solid #D2DCEA !important;
background:#fff !important;
color:#12233B !important;
height:36px !important;
}
.dark_mode .vt_select_header .bs-searchbox .form-control{
background:#0C1526 !important;
border-color:#22304F !important;
color:#E7ECF7 !important;
}
/* itens */
.vt_select_header .dropdown-menu li a,
.vt_select_header .dropdown-menu li a.dropdown-item{
display:flex !important;
align-items:center !important;
border-radius:8px !important;
padding:8px 10px !important;
color:#12233B !important;
background:transparent !important;
min-height:38px !important;
}
.dark_mode .vt_select_header .dropdown-menu li a{ color:#D7DFEC !important; }
.vt_select_header .dropdown-menu li a:hover,
.vt_select_header .dropdown-menu li a:focus,
.vt_select_header .dropdown-menu li a.dropdown-item:hover{
background:#E9F0FD !important;
color:#0D4FD8 !important;
}
.dark_mode .vt_select_header .dropdown-menu li a:hover,
.dark_mode .vt_select_header .dropdown-menu li a:focus{
background:rgba(13,79,216,.3) !important;
color:#fff !important;
}
.vt_select_header .dropdown-menu li.selected a,
.vt_select_header .dropdown-menu li.active a{
background:#0D4FD8 !important;
color:#fff !important;
}
.vt_select_header .dropdown-menu li.selected a small.text-muted,
.vt_select_header .dropdown-menu li.selected a .text-muted{ color:rgba(255,255,255,.75) !important; }
.vt_select_header .dropdown-menu li a .text-muted{ color:#8B99B0 !important; }
.dark_mode .vt_select_header .dropdown-menu li a .text-muted{ color:#8FA0BC !important; }
/* caso o teleporte (data-container) ainda dispare: estilo de reserva
para a lista onde ela cair, dentro do subheader */
.vt_select_header > .dropdown-menu.show{
top:100% !important;
left:0 !important;
transform:none !important;
background:#fff !important;
border:1px solid #E4EAF3 !important;
border-radius:12px !important;
padding:6px !important;
box-shadow:0 16px 40px rgba(18,35,59,.16) !important;
}
.dark_mode .vt_select_header > .dropdown-menu.show{
background:#101A2E !important;
border-color:rgba(255,255,255,.1) !important;
}
/* ============================================================
QUICK ACTIONS — hover com contraste garantido
(o script pinta o i de branco no hover; invertemos o fundo
para o azul da marca — ícone branco sobre azul)
============================================================ */
.quick_action{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:40px !important;
height:40px !important;
border-radius:10px !important;
background:#E9F0FD !important;
color:#0D4FD8 !important;
border:1px solid transparent !important;
transition:background .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease !important;
margin:0 !important;
}
/* qualquer cor que o script tente pôr no ícone, o normal é sempre azul */
.quick_action i, .quick_action svg{ color:#0D4FD8 !important; }
.quick_action:hover{
background:#0D4FD8 !important;
border-color:#0D4FD8 !important;
box-shadow:0 6px 18px rgba(13,79,216,.28) !important;
transform:translateY(-1px) !important;
}
/* hover: ícone SEMPRE branco sobre o azul */
.quick_action:hover i,
.quick_action:hover svg,
.quick_action:hover i::before,
.quick_action:focus i{ color:#fff !important; }
.dark_mode .quick_action{
background:rgba(13,79,216,.18) !important;
border-color:rgba(13,79,216,.35) !important;
}
.dark_mode .quick_action i{ color:#7FA9F5 !important; }
.dark_mode .quick_action:hover{
background:#0D4FD8 !important;
border-color:#0D4FD8 !important;
}
.dark_mode .quick_action:hover i{ color:#fff !important; }
/* pills do plano na topbar (Ilimitado/Ativo) */
.topbar .badge-success{ background:#0E8A54 !important; border-radius:999px !important; }
body:not(.dark_mode) .topbar .btn-light{
border:1px solid #E4EAF3 !important;
border-radius:999px !important;
}
body:not(.dark_mode) .topbar .progress{ background:#E7EDF6 !important; }
body:not(.dark_mode) .topbar .text-gray-600{ color:#5A6B85 !important; }
/* ---------- submenu: legibilidade garantida (v6) ---------- */
html body .sidebar .collapse .collapse-item,
html body .sidebar .collapse-inner .collapse-item{
color:#E8EEF7 !important;
background:transparent !important;
}
html body .sidebar .collapse .collapse-item:hover,
html body .sidebar .collapse-inner .collapse-item:hover{
color:#fff !important;
background:rgba(13,79,216,.45) !important;
}
html body .sidebar .collapse .collapse-item.active,
html body .sidebar .collapse-inner .collapse-item.active,
html body .sidebar .collapse .collapse-item.active:hover,
html body .sidebar .collapse .collapse-item.active:visited,
html body .sidebar .collapse .collapse-item.active:focus{
color:#fff !important;
background:#0D4FD8 !important;
}
html body .sidebar .collapse .collapse-item.active i,
html body .sidebar .collapse .collapse-item.active span{
color:#fff !important;
}
/* container do submenu em navy profundo */
html body .sidebar .nav-item .collapse,
html body .sidebar .nav-item .collapsing{
background:rgba(5,12,26,.38) !important;
border-radius:12px !important;
margin:0 6px 8px !important;
}
html body .sidebar .collapse .collapse-inner,
html body .sidebar .collapse > div{
background:transparent !important;
}
/* ============================================================
FASE 6 v5 — subheader: em cima do conteúdo, grudado na topbar,
sem margens negativas mágicas — hierarquia simples e correta.
============================================================ */
/* ---------- subheader: PRIORIDADE CLARA acima do conteúdo ---------- */
.vt_select_header{
position:relative !important;
z-index:1000 !important; /* acima do conteúdo (que é z-index:1) */
margin:0 0 1.1rem !important;
min-height:64px;
height:auto !important;
align-items:center !important;
flex-wrap:wrap !important;
gap:10px !important;
background:#fff !important; /* opaco: conteúdo atrás NUNCA aparece */
}
.dark_mode .vt_select_header{ background:#101a26 !important; }
.vt_select_header > a.quick_action{ margin:0 !important; }
/* ---------- containers: sem respiro de topo (a "grudação") ---------- */
body:has(.vt_select_header) .content,
body:has(.vt_select_header) .content .container-fluid,
body:has(.vt_select_header) .content .container{
padding-top:0 !important;
margin-top:0 !important;
}
/* wrapper direto do subheader: também sem respiro — é ELE quem cola na topbar */
div:has(> .vt_select_header){
padding-top:0 !important;
margin-top:0 !important;
position:static !important;
}
/* ---------- conteúdo: chão explícito, ABAIXO do subheader ---------- */
.content{ position:relative; z-index:1; }
/* o conteúdo não sobe junto: o que vier depois do wrapper do subheader
recupera o respiro natural */
.content .container-fluid > *:nth-child(n+2){ margin-top:0; }
.vt_select_header ~ *{ margin-top:1.1rem; } /* irmãos do subheader respiram */
/* ---------- lista suspensa: acima de tudo do subheader ---------- */
.vt_select_header .dropdown.bootstrap-select{ position:relative; z-index:1030; }
.vt_select_header .dropdown.bootstrap-select > .dropdown-menu.show{
position:absolute !important;
top:100% !important;
left:0 !important;
transform:none !important;
z-index:1031 !important;
}
/* ============================================================
FASE 7 — RESPONSIVIDADE MOBILE
============================================================ */
/* ---------- sidebar mobile: textos inteiros (sem ...) ---------- */
/* minha regra de ellipsis cortava no mobile; aqui liberamos */
@media (max-width: 768px){
.sidebar .nav-item .nav-link span,
.sidebar .nav-item .nav-link p{
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
font-size:13.5px !important;
line-height:1.25 !important;
}
/* sidebar expandida no mobile ganha largura total de leitura */
.sidebar{
width:16rem !important;
}
/* submenu também sem corte */
.sidebar .collapse .collapse-item{
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
font-size:13px !important;
}
/* conteúdo desloca junto quando a sidebar mobile abre (SB Admin padrão) */
body.sidebar-toggled .sidebar{ width:16rem !important; }
}
/* ---------- topbar mobile: título da página compacto ---------- */
@media (max-width: 768px){
.header_menu_title{
max-width:52vw !important; /* título nunca empurra os itens da direita */
min-width:0 !important;
padding:6px 10px !important;
font-size:13px !important;
flex:0 1 auto !important;
}
.header_menu_title .text-gray-800{
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important; /* só O TÍTULO encurta, com ... */
}
/* badge de contagem: some em telas muito estreitas (é opcional) */
.header_menu_title .countelem_header{ display:none !important; }
/* avatar e dropdowns da direita sempre visíveis */
.topbar .navbar-nav{ flex-wrap:nowrap !important; }
.topbar .nav-item.dropdown{ flex:0 0 auto !important; }
.topbar .img-profile{ width:30px !important; height:30px !important; }
/* pílula do plano: só o pontinho de status em telas estreitas */
.topbar #planDropdown span span.mx-1,
.topbar #planDropdown span .d-none{ display:none !important; }
/* botão de alternar sidebar sempre alcançável */
#sidebarToggleTop{ order:-1 !important; }
}
/* ---------- subheader mobile: quebra organizada ---------- */
@media (max-width: 768px){
.vt_select_header{
flex-wrap:wrap !important;
padding:10px 12px !important;
gap:8px !important;
}
.vt_select_header .vt_selector_btn{
min-width:0 !important;
flex:1 1 180px !important; /* seletor ocupa a linha que precisar */
max-width:100% !important;
}
.quick_action{
width:38px !important;
height:38px !important;
flex:0 0 auto !important;
}
}
/* ---------- tabelas e cards em telas estreitas ---------- */
@media (max-width: 576px){
.table-responsive{ border-radius:12px !important; }
body:not(.dark_mode) .table-responsive{ border:1px solid #E4EAF3 !important; }
.card{ border-radius:14px !important; }
.modal-content{ border-radius:14px !important; }
}
/* ============================================================
FASE 8 — subheader compacto (o verde revelou: o espaço era INTERNO)
============================================================ */
/* ---------- compactação interna ---------- */
.vt_select_header{
padding:8px 12px !important; /* era 12px 16px — reduz o respiro interno */
min-height:0 !important; /* era 64px — altura definida pelo conteúdo */
height:auto !important;
gap:8px !important;
}
/* seletor de tours: 36px basta */
.vt_select_header .vt_selector_btn{
height:36px !important;
}
.quick_action{
width:36px !important;
height:36px !important;
}
/* ---------- válvula de calibração: ajuste este número ---------- */
/* Se ainda sobrar espaço ENTRE a topbar e o card: aumente (ex: -30px).
Se o card subir demais (por cima da topbar): diminua (ex: -10px).
O valor padrão é 0 porque o verde mostrou o card já colado. */
:root{ --oljo-lift: -50px; }
.vt_select_header{
margin-top:var(--oljo-lift) !important;
}
/* ============================================================
FASE 9 v3 — compensação por MEDIDA REAL (fim dos chutes)
O lift sobe o subheader até a topbar; o irmão usa a ALTURA
REAL do subheader para descer exatamente o necessário.
Pixel-perfeito: recalibrar o lift nunca mais deixa sobra.
============================================================ */
:root{
--oljo-lift: -50px; /* seu valor calibrado */
--oljo-ssh: 52px; /* altura REAL do subheader (veja como calibrar abaixo) */
}
.vt_select_header{
margin-top:var(--oljo-lift) !important;
margin-bottom:0 !important; /* o espaçamento abaixo agora é o irmão quem dá */
}
/* o irmão desce a altura real do subheader + respiro de design */
.vt_select_header ~ .container-fluid,
.vt_select_header ~ .content,
.vt_select_header ~ div,
.vt_select_header ~ main{
margin-top:calc(var(--oljo-ssh) + 14px) !important;
}
/* dropdown do plano: acima de tudo (mantém) */
.topbar .dropdown-menu{ z-index:1060 !important; }
.topbar{ z-index:1061 !important; position:relative; }
/* ============================================================
FASE 10 — lista de ambientes no padrão da landing
============================================================ */
/* ---- botões de ação por ambiente: uniformes e modernos ---- */
.room_buttons .btn-sm{
border-radius:8px !important;
height:32px !important;
min-width:32px !important;
display:inline-inline-flex !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 6px !important;
box-shadow:none !important;
}
/* os dois com inline "branco + borda preta": viram neutros da marca */
.room_buttons a.room_home,
.room_buttons a.handle{
background:#E9F0FD !important;
border:1px solid #C7DAF8 !important;
}
.room_buttons a.room_home i,
.room_buttons a.handle i{ color:#0D4FD8 !important; }
.room_buttons a.room_home:hover,
.room_buttons a.handle:hover{
background:#0D4FD8 !important;
border-color:#0D4FD8 !important;
}
.room_buttons a.room_home:hover i,
.room_buttons a.handle:hover i{ color:#fff !important; }
/* editar: azul da marca em vez de amarelo */
.room_buttons a.btn-warning{
background:#0D4FD8 !important;
border-color:#0D4FD8 !important;
color:#fff !important;
}
/* conexões/pois/medições: neutro com ícone azul */
.room_buttons a.btn-info{
background:#fff !important;
border:1px solid #D2DCEA !important;
color:#0D4FD8 !important;
}
.room_buttons a.btn-info:hover{
border-color:#0D4FD8 !important;
background:#E9F0FD !important;
}
.room_buttons a.btn-info .badge{
background:#0D4FD8 !important;
color:#fff !important;
border-radius:999px !important;
font-size:9.5px !important;
padding:.25em .5em !important;
}
/* preview externo: navy */
.room_buttons a.btn-dark{
background:#0F2440 !important;
border-color:#0F2440 !important;
}
/* duplicar: neutro */
.room_buttons a.btn-secondary{
background:#fff !important;
border:1px solid #D2DCEA !important;
color:#5A6B85 !important;
}
.room_buttons a.btn-secondary:hover{ border-color:#0D4FD8 !important; color:#0D4FD8 !important; }
/* excluir: vermelho suave */
.room_buttons a.btn-danger{
background:#FDECEC !important;
border:1px solid #F3C4C4 !important;
color:#B42323 !important;
}
.room_buttons a.btn-danger:hover{
background:#B42323 !important;
border-color:#B42323 !important;
color:#fff !important;
}
/* ---- card do ambiente ---- */
body:not(.dark_mode) .div_room{
border:1px solid #E4EAF3 !important;
border-radius:12px !important;
}
body:not(.dark_mode) .div_room:hover{ border-color:#C7DAF8 !important; }
.room_image_div{ border-radius:8px !important; }
.preview_room_overlay{
background:rgba(13,79,216,.45) !important;
border-radius:8px !important;
}
/* ---- faixa "CRIAR NOVA" e busca ---- */
body:not(.dark_mode) .card.border-left-success{
border:1px solid #E4EAF3 !important;
border-left:4px solid #0E8A54 !important;
border-radius:12px !important;
}
body:not(.dark_mode) .card.border-left-success .text-uppercase{
color:#0F2440 !important;
font-size:13px !important;
letter-spacing:.05em !important;
font-weight:700 !important;
}
body:not(.dark_mode) #search_div .input-group-text{
background:#fff !important;
border-color:#D2DCEA !important;
color:#5A6B85 !important;
}
#search_div .form-control{ border-radius:10px !important; }
/* ============================================================
FASE 11 — tabs do editor (nav-pills nav-fill) no padrão landing
============================================================ */
body:not(.dark_mode) .nav-pills.nav-fill{
background:#fff !important;
border:1px solid #E4EAF3 !important;
border-radius:14px !important;
padding:6px !important;
gap:4px !important;
}
.dark_mode .nav-pills.nav-fill{
background:#101a26 !important;
border:1px solid rgba(255,255,255,.07) !important;
border-radius:14px !important;
padding:6px !important;
}
.nav-pills.nav-fill .nav-item{ flex:1 1 auto; min-width:0; }
.nav-pills.nav-fill .nav-link{
border-radius:9px !important;
color:#5A6B85 !important;
font-weight:600 !important;
font-size:13px !important;
text-align:center !important;
padding:9px 10px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
transition:background .15s ease,color .15s ease !important;
}
.nav-pills.nav-fill .nav-link i{ margin-right:4px; }
.nav-pills.nav-fill .nav-link:hover{
background:#F0F5FD !important;
color:#0D4FD8 !important;
}
.dark_mode .nav-pills.nav-fill .nav-link{ color:#9FB0D1 !important; }
.dark_mode .nav-pills.nav-fill .nav-link:hover{
background:rgba(13,79,216,.25) !important;
color:#fff !important;
}
.nav-pills.nav-fill .nav-link.active{
background:#0D4FD8 !important;
color:#fff !important;
}
.nav-pills.nav-fill .nav-link.active i{ color:#fff !important; }
/* em telas estreitas: as 7 tabs rolam horizontalmente em vez de espremer */
@media (max-width: 992px){
.nav-pills.nav-fill{ flex-wrap:nowrap !important; overflow-x:auto !important; scrollbar-width:thin; }
.nav-pills.nav-fill .nav-item{ flex:0 0 auto !important; }
.nav-pills.nav-fill .nav-link{ white-space:nowrap !important; }
}
/* headers dos cards internos (CONFIGURAÇÕES, Geral etc.) */
body:not(.dark_mode) .card .card-header h6{
font-size:14px !important;
font-weight:700 !important;
color:#0F2440 !important;
}
body:not(.dark_mode) .card .card-header h6 .text-primary{ color:#0D4FD8 !important; }
.dark_mode .card .card-header h6{ color:#E7ECF7 !important; }
/* botões de split (voltar/avançar ambiente) do subheader */
.btn-icon-split{ border-radius:9px !important; overflow:hidden !important; }
.btn-icon-split .icon{ background:rgba(255,255,255,.15) !important; }
/* ============================================================
FASE 12 v2 — scroll-to-top: visibilidade NATIVA preservada
(o script controla display via JS; aqui só o visual)
============================================================ */
.scroll-to-top{
position:fixed !important;
right:1.5rem !important;
bottom:1.5rem !important;
z-index:1040 !important;
width:46px !important;
height:46px !important;
/* display: NÃO mexer — o painel esconde/mostra via JavaScript */
border-radius:12px !important;
background:#0D4FD8 !important;
border:1px solid #0D4FD8 !important;
box-shadow:0 8px 24px rgba(13,79,216,.35) !important;
transition:background .15s ease, transform .15s ease, box-shadow .15s ease !important;
/* centralização compatível com display:inline do script */
text-align:center !important;
line-height:44px !important;
}
.dark_mode .scroll-to-top{
box-shadow:0 8px 24px rgba(0,0,0,.5) !important;
}
/* ícone: herda o line-height do botão (centraliza sozinho) */
.scroll-to-top i{
color:#fff !important;
font-size:20px !important;
margin:0 !important;
position:static !important;
}
/* hover: eleva e escurece */
.scroll-to-top:hover{
background:#0A41B8 !important;
border-color:#0A41B8 !important;
text-decoration:none !important;
transform:translateY(-3px) !important;
box-shadow:0 12px 28px rgba(13,79,216,.45) !important;
}
/* foco visível (acessibilidade) */
.scroll-to-top:focus-visible{
outline:2px solid #0D4FD8 !important;
outline-offset:3px !important;
}
/* mobile: menor e mais perto do canto */
@media (max-width: 768px){
.scroll-to-top{
right:1rem !important;
bottom:1rem !important;
width:42px !important;
height:42px !important;
line-height:40px !important;
border-radius:11px !important;
}
.scroll-to-top i{ font-size:18px !important; }
}
/* ============================================================
FASE 13 — botões da lista de tours (vt_buttons): hierarquia
por função, hover que revela a cor do grupo
============================================================ */
/* ---------- base comum: quadrados uniformes ---------- */
.vt_buttons .btn,
.vt_buttons .btn_lock{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:34px !important;
height:34px !important;
padding:0 !important;
border-radius:9px !important;
flex:0 0 auto !important;
margin:2px !important;
box-shadow:none !important;
transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease !important;
}
.vt_buttons .btn i{
font-size:15px !important;
margin:0 !important;
}
/* espaçamento uniforme (os badges absolutos não empurram nada) */
.vt_buttons{ gap:2px !important; flex-wrap:wrap !important; justify-content:flex-end !important; }
/* ---------- GRUPO EDIÇÃO (era amarelo): azul sólido, ação principal ---------- */
.vt_buttons .btn-warning{
background:#0D4FD8 !important;
border-color:#0D4FD8 !important;
color:#fff !important;
}
.vt_buttons .btn-warning i{ color:#fff !important; }
.vt_buttons .btn-warning:hover{
background:#0A41B8 !important;
transform:translateY(-1px) !important;
box-shadow:0 5px 14px rgba(13,79,216,.35) !important;
}
/* ---------- GRUPO CONTEÚDO (era info): neutro com ícone azul ---------- */
.vt_buttons .btn-info{
background:#fff !important;
border:1px solid #D2DCEA !important;
color:#5A6B85 !important;
}
.vt_buttons .btn-info i{ color:#0D4FD8 !important; }
.vt_buttons .btn-info:hover{
background:#E9F0FD !important;
border-color:#0D4FD8 !important;
transform:translateY(-1px) !important;
}
.dark_mode .vt_buttons .btn-info{
background:#0C1526 !important;
border-color:#22304F !important;
color:#9FB0D1 !important;
}
.dark_mode .vt_buttons .btn-info:hover{
background:rgba(13,79,216,.3) !important;
border-color:#0D4FD8 !important;
}
/* badge de contagem: pílula azul compacta */
.vt_buttons .btn .badge{
background:#0D4FD8 !important;
color:#fff !important;
border-radius:999px !important;
font-size:9.5px !important;
font-weight:700 !important;
padding:.2em .5em !important;
top:-7px !important;
right:-6px !important;
box-shadow:0 0 0 2px #fff !important; /* recorte contra o botão */
line-height:1.3 !important;
}
.dark_mode .vt_buttons .btn .badge{ box-shadow:0 0 0 2px #0C1526 !important; }
/* ---------- GRUPO VISIBILIDADE (era dark): navy ---------- */
.vt_buttons .btn-dark{
background:#0F2440 !important;
border-color:#0F2440 !important;
color:#fff !important;
}
.vt_buttons .btn-dark i{ color:#fff !important; }
.vt_buttons .btn-dark:hover{
background:#1A3560 !important;
transform:translateY(-1px) !important;
}
/* ---------- GRUPO UTILIDADES (secondary): neutro ---------- */
.vt_buttons .btn-secondary,
.vt_buttons .btn_export,
.vt_buttons .btn_duplicate{
background:#fff !important;
border:1px solid #D2DCEA !important;
color:#5A6B85 !important;
}
.vt_buttons .btn-secondary i{ color:#5A6B85 !important; }
.vt_buttons .btn-secondary:hover{
border-color:#0D4FD8 !important;
color:#0D4FD8 !important;
}
.vt_buttons .btn-secondary:hover i{ color:#0D4FD8 !important; }
.dark_mode .vt_buttons .btn-secondary{
background:#0C1526 !important;
border-color:#22304F !important;
color:#9FB0D1 !important;
}
.dark_mode .vt_buttons .btn-secondary i{ color:#9FB0D1 !important; }
/* ---------- GRUPO DESTRUTIVO: vermelho suave → forte no hover ---------- */
.vt_buttons .btn-danger{
background:#FDECEC !important;
border:1px solid #F3C4C4 !important;
color:#B42323 !important;
}
.vt_buttons .btn-danger i{ color:#B42323 !important; }
.vt_buttons .btn-danger:hover{
background:#B42323 !important;
border-color:#B42323 !important;
color:#fff !important;
transform:translateY(-1px) !important;
}
.vt_buttons .btn-danger:hover i{ color:#fff !important; }
.dark_mode .vt_buttons .btn-danger{
background:rgba(180,35,35,.15) !important;
border-color:rgba(180,35,35,.4) !important;
}
/* ---------- TRAVAR (btn_lock): estado de contorno ---------- */
.vt_buttons .btn_lock.btn-outline-dark{
background:transparent !important;
border:1px dashed #C9D5E4 !important;
color:#8B99B0 !important;
}
.vt_buttons .btn_lock i{ color:#8B99B0 !important; }
.vt_buttons .btn_lock:hover{
background:#0F2440 !important;
border:1px solid #0F2440 !important;
color:#fff !important;
}
.vt_buttons .btn_lock:hover i{ color:#fff !important; }
.dark_mode .vt_buttons .btn_lock.btn-outline-dark{
border-color:rgba(255,255,255,.18) !important;
color:#9FB0D1 !important;
}
/* ---------- mobile: fileira vira grid 6 por linha ---------- */
@media (max-width: 768px){
.vt_buttons{ justify-content:center !important; }
.vt_buttons .btn,
.vt_buttons .btn_lock{
width:36px !important;
height:36px !important; /* alvo de toque confortável */
}
}
/* ============================================================
FASE 14 — topbar completa: plano, balão de limites, idioma,
modo escuro, usuário — tudo no padrão da landing
============================================================ */
/* ---------- botão hamburger (mobile) ---------- */
.topbar #sidebarToggleTop{
width:38px !important;
height:38px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:10px !important;
color:#5A6B85 !important;
transition:background .15s ease, color .15s ease !important;
}
.topbar #sidebarToggleTop:hover{ background:#E9F0FD !important; color:#0D4FD8 !important; }
/* ---------- pílula do plano (ponto verde + nome) ---------- */
.topbar .btn-light.rounded-pill{
background:#fff !important;
border:1px solid #E4EAF3 !important;
box-shadow:none !important;
height:34px !important;
transition:border-color .15s ease, box-shadow .15s ease !important;
}
.topbar .btn-light.rounded-pill:hover{
border-color:#0D4FD8 !important;
box-shadow:0 0 0 3px rgba(13,79,216,.1) !important;
}
.dark_mode .topbar .btn-light.rounded-pill{
background:#0C1526 !important;
border-color:#22304F !important;
}
.dark_mode .topbar .btn-light.rounded-pill:hover{ border-color:#0D4FD8 !important; }
.dark_mode .topbar .btn-light .text-gray-800{ color:#E7ECF7 !important; }
/* ponto verde com brilho suave (status "vivo") */
.topbar .btn-light .fa-circle{ text-shadow:0 0 6px rgba(40,167,69,.55); }
/* ---------- BALÃO de limites do plano (card de estatísticas) ---------- */
.topbar .dropdown-list.dropdown-menu{
border:1px solid #E4EAF3 !important; /* vence o inline border:none */
box-shadow:0 16px 40px rgba(18,35,59,.16) !important;
padding:18px !important;
}
.dark_mode .topbar .dropdown-list.dropdown-menu{
background:#101A2E !important;
border-color:rgba(255,255,255,.1) !important;
box-shadow:0 16px 40px rgba(0,0,0,.5) !important;
}
/* cabeçalho do balão: nome do plano + badge Ativo */
.topbar .dropdown-list h6{
font-size:15px !important;
font-weight:700 !important;
color:#0F2440 !important;
}
.dark_mode .topbar .dropdown-list h6{ color:#E7ECF7 !important; }
.topbar .dropdown-list .badge-success{
background:#0E8A54 !important;
border-radius:999px !important;
font-weight:600 !important;
font-size:11px !important;
padding:.35em .8em !important;
}
/* barras de progresso: trilha suave, preenchimento da marca */
.topbar .subscription-limits .progress{
background:#E7EDF6 !important;
border-radius:99px !important;
height:7px !important;
}
.dark_mode .topbar .subscription-limits .progress{ background:rgba(255,255,255,.08) !important; }
.topbar .subscription-limits .progress-bar{
background:#0D4FD8 !important;
border-radius:99px !important;
transition:width .4s ease !important;
}
/* alerta de limite próximo, se o script usar */
.topbar .subscription-limits .progress-bar.bg-warning{ background:#E8A13D !important; }
/* rótulos e valores */
.topbar .subscription-limits .text-gray-600{ color:#5A6B85 !important; font-size:12.5px !important; }
.topbar .subscription-limits .text-dark{ color:#0F2440 !important; }
.dark_mode .topbar .subscription-limits .text-gray-600{ color:#9FB0D1 !important; }
.dark_mode .topbar .subscription-limits .text-dark{ color:#E7ECF7 !important; }
.topbar .subscription-limits .fas.fa-infinity{ color:#0D4FD8 !important; }
/* estado "Carregando..." */
.topbar .text-gray-500{ color:#8B99B0 !important; }
.topbar #topbar_plan_limits_loading .fa-circle-notch{ color:#0D4FD8 !important; }
/* ---------- seletor de idioma ---------- */
.topbar .lang_switcher .nav-link img{
border-radius:4px !important;
transition:box-shadow .15s ease !important;
}
.topbar .lang_switcher .nav-link:hover img{
box-shadow:0 0 0 3px rgba(13,79,216,.18) !important; /* anel azul no hover */
}
.topbar .lang_switcher .dropdown-menu{ padding:6px !important; }
.topbar .lang_switcher .dropdown-item img{
margin-right:8px !important;
margin-bottom:0 !important;
}
.topbar .lang_switcher .dropdown-item.lang_active{
background:#E9F0FD !important;
color:#0D4FD8 !important;
font-weight:600 !important;
}
.dark_mode .topbar .lang_switcher .dropdown-item.lang_active{
background:rgba(13,79,216,.3) !important;
color:#fff !important;
}
/* ---------- botão modo claro/escuro ---------- */
.topbar .btn_mode_switcher{
width:34px !important;
height:34px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:10px !important;
padding:0 !important;
color:#5A6B85 !important;
transition:background .15s ease, color .15s ease !important;
}
.topbar .btn_mode_switcher:hover{ background:#E9F0FD !important; color:#0D4FD8 !important; }
.dark_mode .topbar .btn_mode_switcher{ color:#9FB0D1 !important; }
.dark_mode .topbar .btn_mode_switcher:hover{
background:rgba(13,79,216,.3) !important;
color:#fff !important;
}
/* ---------- área do usuário ---------- */
.topbar .img-profile{
border:2px solid #E4EAF3 !important;
transition:border-color .15s ease, box-shadow .15s ease !important;
}
.topbar #userDropdown:hover .img-profile{
border-color:#0D4FD8 !important;
box-shadow:0 0 0 3px rgba(13,79,216,.15) !important; /* anel azul no hover */
}
.topbar #userDropdown .text-gray-600{ font-weight:600 !important; color:#5A6B85 !important; }
.dark_mode .topbar #userDropdown .text-gray-600{ color:#9FB0D1 !important; }
.dark_mode .topbar .img-profile{ border-color:#22304F !important; }
/* itens do menu do usuário (e genéricos da topbar) */
.topbar .dropdown-menu{ padding:6px !important; }
.topbar .dropdown-item{
border-radius:8px !important;
padding:8px 12px !important;
font-weight:500 !important;
font-size:13.5px !important;
color:#12233B !important;
display:flex !important;
align-items:center !important;
transition:background .12s ease, color .12s ease !important;
}
.topbar .dropdown-item i{ color:#5A6B85 !important; }
.topbar .dropdown-item:hover{ background:#E9F0FD !important; color:#0D4FD8 !important; }
.topbar .dropdown-item:hover i{ color:#0D4FD8 !important; }
.dark_mode .topbar .dropdown-item{ color:#D7DFEC !important; }
.dark_mode .topbar .dropdown-item i{ color:#9FB0D1 !important; }
.dark_mode .topbar .dropdown-item:hover{
background:rgba(13,79,216,.3) !important;
color:#fff !important;
}
.dark_mode .topbar .dropdown-item:hover i{ color:#fff !important; }
/* "Sair" ganha vermelho suave no hover (convenção destrutiva) */
.topbar .dropdown-item[data-target="#logoutModal"]:hover{
background:#FDECEC !important;
color:#B42323 !important;
}
.topbar .dropdown-item[data-target="#logoutModal"]:hover i{ color:#B42323 !important; }
.dark_mode .topbar .dropdown-item[data-target="#logoutModal"]:hover{
background:rgba(180,35,35,.2) !important;
color:#FFB4B4 !important;
}
/* ---------- divisor ---------- */
.topbar .topbar-divider{ border-color:#E4EAF3 !important; }
.dark_mode .topbar .topbar-divider{ border-color:rgba(255,255,255,.08) !important; }
/* ---------- mobile ---------- */
@media (max-width: 768px){
.topbar{ padding-left:.8rem !important; padding-right:.8rem !important; }
.topbar .dropdown-list.dropdown-menu{ min-width:280px !important; }
}
/* ============================================================
FASE 17 — Hero de boas-vindas: SÓ na dashboard
Âncora: :has() com elementos que só existem lá
(.dashboard_stats e o botão wstep)
============================================================ */
/* o container de dashboard (identificado pelos seus filhos únicos) */
.container-fluid:has(.dashboard_stats),
.container-fluid:has(.dashboard_stats) > .row:first-child .card,
.container-fluid:has(a[href*="wstep"]):has(.dashboard_stats) > .row:first-child .card{
position:relative;
}
/* ---------- o card hero ---------- */
.container-fluid:has(.dashboard_stats) > .row:first-child .card,
.container-fluid:has(a[href*="wstep"]) > .row:first-child .card{
background:linear-gradient(135deg,#0F2440 0%,#0D4FD8 140%) !important;
border:none !important;
border-radius:18px !important;
color:#fff !important;
box-shadow:0 16px 40px rgba(13,79,216,.25) !important;
overflow:hidden;
position:relative;
}
/* textura de pontos */
.container-fluid:has(.dashboard_stats) > .row:first-child .card::before,
.container-fluid:has(a[href*="wstep"]) > .row:first-child .card::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px) !important;
background-size:22px 22px !important;
pointer-events:none;
}
/* header transparente */
.container-fluid:has(.dashboard_stats) > .row:first-child .card-header,
.container-fluid:has(a[href*="wstep"]) > .row:first-child .card-header{
background:transparent !important;
border-bottom:none !important;
}
/* título branco, grande, negrito (sua correção preservada) */
.container-fluid:has(.dashboard_stats) > .row:first-child .card h6,
.container-fluid:has(a[href*="wstep"]) > .row:first-child .card h6,
.container-fluid:has(.dashboard_stats) > .row:first-child .card h6.text-primary,
.container-fluid:has(a[href*="wstep"]) > .row:first-child .card h6.text-primary{
color:#FFFFFF !important;
font-size:19px !important;
font-weight:800 !important;
letter-spacing:-.01em !important;
text-shadow:0 1px 2px rgba(11,24,48,.25);
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
}
.container-fluid:has(.dashboard_stats) > .row:first-child .card h6 i,
.container-fluid:has(a[href*="wstep"]) > .row:first-child .card h6 i{
color:#C7DAF8 !important;
font-size:17px !important;
}
/* mensagem clara */
.container-fluid:has(.dashboard_stats) > .row:first-child .welcome_message,
.container-fluid:has(a[href*="wstep"]) > .row:first-child .welcome_message{
color:rgba(255,255,255,.88) !important;
font-size:15.5px !important;
}
/* dark: hero já é escuro — nada muda */
/* ============================================================
CARDS DE ESTATÍSTICA: forma "tile" — sem borda lateral,
sem sombra SB, rótulo E ícone no topo, número gigante
============================================================ */
.dashboard_stats .card,
.dashboard_stats .card[class*="border-left-"]{
border:none !important; /* adeus barrinha colorida */
background:#fff !important;
border-radius:16px !important;
padding:18px 18px 16px !important; /* padding no card, não no body */
box-shadow:0 1px 2px rgba(18,35,59,.04),0 10px 26px rgba(18,35,59,.07) !important;
position:relative !important;
transition:transform .15s ease, box-shadow .15s ease !important;
}
.dark_mode .dashboard_stats .card{
background:#101a26 !important;
box-shadow:none !important;
border:1px solid rgba(255,255,255,.06) !important;
}
/* layout interno do tile: coluna! rótulo + ícone na linha de cima */
.dashboard_stats .card-body{
display:flex !important;
flex-direction:column !important;
gap:2px !important;
padding:0 !important;
}
.dashboard_stats .card-body .row.no-gutters{
display:block !important;
margin:0 !important;
}
.dashboard_stats .card-body .row.no-gutters > .col.mr-2{
max-width:100% !important;
flex:none !important;
margin:0 !important;
}
.dashboard_stats .card-body .row.no-gutters > .col-auto{
position:absolute !important;
top:18px !important;
right:18px !important;
margin:0 !important;
}
/* chip do ícone: quadradinho com fundo da marca (identidade!) */
.dashboard_stats .card-body .col-auto .fa-2x{
width:44px !important;
height:44px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:19px !important; /* o FA estica o glifo pra caber */
background:#E9F0FD !important;
color:#0D4FD8 !important;
border-radius:11px !important;
line-height:1 !important;
transition:background .15s ease, color .15s ease !important;
}
.dark_mode .dashboard_stats .card-body .col-auto .fa-2x{
background:rgba(13,79,216,.22) !important;
color:#7FA9F5 !important;
}
/* chips por categoria (a hierarquia vive aqui agora) */
.dashboard_stats .card.border-left-primary + *,
.dashboard_stats .card .col-auto .fa-route,
.dashboard_stats .card .col-auto .fa-user-group{ }
.dashboard_stats .card.border-left-primary .col-auto .fa-2x{ background:#E9F0FD !important; color:#0D4FD8 !important; }
.dashboard_stats .card.border-left-success .col-auto .fa-2x{ background:#E5F5EC !important; color:#0E8A54 !important; }
.dashboard_stats .card.border-left-info .col-auto .fa-2x{ background:#E9F0FD !important; color:#5B8DEF !important; }
.dashboard_stats .card.border-left-warning .col-auto .fa-2x{ background:#FBF3E4 !important; color:#B47D1E !important; }
.dashboard_stats .card.border-left-dark .col-auto .fa-2x,
.dashboard_stats .card.border-left-secondary .col-auto .fa-2x{ background:#E8EDF5 !important; color:#3E5170 !important; }
.dark_mode .dashboard_stats .card.border-left-success .col-auto .fa-2x{ background:rgba(14,138,84,.25) !important; color:#57C98A !important; }
.dark_mode .dashboard_stats .card.border-left-warning .col-auto .fa-2x{ background:rgba(232,161,61,.22) !important; color:#E8B96A !important; }
/* rótulo: pequenino em cima, sem grito */
.dashboard_stats .text-xs{
font-size:11px !important;
font-weight:700 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
color:#8B99B0 !important;
margin-bottom:6px !important;
display:block !important;
}
.dark_mode .dashboard_stats .text-xs{ color:#7A8BA8 !important; }
/* as cores text-primary/success/etc do rótulo original: neutralizadas */
.dashboard_stats .text-xs.text-primary,
.dashboard_stats .text-xs.text-success,
.dashboard_stats .text-xs.text-info,
.dashboard_stats .text-xs.text-warning,
.dashboard_stats .text-xs.text-secondary,
.dashboard_stats .text-xs.text-dark,
.dashboard_stats .text-xs.blu_color{ color:#8B99B0 !important; }
/* NÚMERO: o protagonista absoluto */
.dashboard_stats .h5{
font-size:34px !important;
font-weight:800 !important;
color:#0F2440 !important;
letter-spacing:-.03em !important;
line-height:1.05 !important;
margin:2px 0 0 !important;
display:block !important;
}
.dark_mode .dashboard_stats .h5{ color:#F2F5FA !important; }
/* a legenda "/ 4 tours" alinhada na base do número */
.dashboard_stats .h5 + [id^="num_vt_"]{
display:block !important;
font-size:12.5px !important;
color:#9FB0C9 !important;
font-weight:500 !important;
margin-top:2px !important;
}
/* hover: elevação + chip acende (só clicáveis) */
.dashboard_stats .card[style*="cursor:default"]{ transform:none !important; }
.dashboard_stats .card:not([style*="cursor:default"]):hover{
transform:translateY(-3px) !important;
box-shadow:0 4px 10px rgba(18,35,59,.05),0 18px 34px rgba(13,79,216,.15) !important;
}
.dashboard_stats .card:not([style*="cursor:default"]):hover .col-auto .fa-2x{
background:#0D4FD8 !important;
color:#fff !important;
}
.dark_mode .dashboard_stats .card:not([style*="cursor:default"]):hover .col-auto .fa-2x{
background:#0D4FD8 !important;
color:#fff !important;
}
/* botão "analisar": discreto, pílula */
.dashboard_stats .btn-sm.btn-primary{
border-radius:999px !important;
font-size:11.5px !important;
font-weight:700 !important;
padding:4px 14px !important;
box-shadow:none !important;
margin-top:2px !important;
}
.dashboard_stats .btn-sm.btn-primary .fa-digital-ocean,
.dashboard_stats .btn-sm.btn-primary .fa-clock,
.dashboard_stats .btn-sm.btn-primary .fa-hourglass-half{ margin-right:4px !important; }
/* mini-cards de Subscrições: mesma linguagem de tile */
.dashboard_customers .card .card{
border:none !important;
box-shadow:0 1px 2px rgba(18,35,59,.04),0 8px 20px rgba(18,35,59,.06) !important;
border-radius:14px !important;
}
.dashboard_customers .card .card .h5{ font-size:26px !important; }
.dark_mode .dashboard_customers .card .card{ background:#0C1526 !important; box-shadow:none !important; border:1px solid rgba(255,255,255,.06) !important; }
/* ============================================================
VISITANTES E SUBSCRIÇÕES: listas com hierarquia própria
============================================================ */
#list_visitors h4.small,
#subscriptions_list h4.small{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
margin-bottom:8px !important;
font-size:13.5px !important;
font-weight:600 !important;
}
#list_visitors h4 a, #subscriptions_list h4{ color:#0F2440 !important; }
.dark_mode #list_visitors h4 a, .dark_mode #subscriptions_list h4{ color:#E7ECF7 !important; }
#list_visitors h4 a:hover{ color:#0D4FD8 !important; text-decoration:none !important; }
#list_visitors h4 .float-right, #subscriptions_list h4 .float-right{
float:none !important;
flex:none !important;
color:#8B99B0 !important;
font-weight:600 !important;
font-size:12px !important;
white-space:nowrap !important;
}
#list_visitors h4 b{ color:#0D4FD8 !important; font-size:14px !important; }
/* barras: fininhas, da marca */
#list_visitors .progress, #subscriptions_list .progress{
background:#EEF2F8 !important;
border-radius:99px !important;
height:7px !important;
}
.dark_mode #list_visitors .progress, .dark_mode #subscriptions_list .progress{ background:rgba(255,255,255,.07) !important; }
#list_visitors .progress-bar, #subscriptions_list .progress-bar{
background:#0D4FD8 !important;
border-radius:99px !important;
}
/* histórico: pílulas empilhadas (não list-group SB) */
#subscriptions_history .list-group-item{
border:none !important;
background:#F7FAFE !important;
border-radius:10px !important;
margin-bottom:6px !important;
font-size:13px !important;
color:#5A6B85 !important;
padding:9px 14px !important;
}
.dark_mode #subscriptions_history .list-group-item{ background:#0C1526 !important; color:#9FB0D1 !important; }
#subscriptions_history .list-group-item a{ color:#0D4FD8 !important; font-weight:600 !important; }
#subscriptions_history .list-group-item b{ color:#0F2440 !important; }
.dark_mode #subscriptions_history .list-group-item b{ color:#E7ECF7 !important; }
#subscriptions_history .badge-success{
background:#0E8A54 !important;
border-radius:999px !important;
font-size:10.5px !important;
font-weight:700 !important;
padding:.3em .8em !important;
}
#btn_subscriptions_view_all{
color:#0D4FD8 !important; font-weight:700 !important; font-size:12.5px !important;
}
/* rodapé tempo real: pílula viva */
#svt_stats_updated_at{
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
padding:7px 16px !important;
background:#fff !important;
border:1px solid #E4EAF3 !important;
border-radius:999px !important;
font-size:12px !important;
font-weight:600 !important;
color:#5A6B85 !important;
}
.dark_mode #svt_stats_updated_at{ background:#101a26 !important; border-color:rgba(255,255,255,.08) !important; color:#9FB0D1 !important; }
#svt_stats_updated_at i{ color:#0D4FD8 !important; }
@media (max-width:768px){
.dashboard_stats .h5{ font-size:28px !important; }
}
/* ============================================================
FASE 16 — assistente de criação (Shepherd.js): balões no
padrão da landing
============================================================ */
/* ---------- o balão (shepherd-element) ---------- */
.shepherd-element,
.shepherd-element.shepherd-enabled{
background:#fff !important;
border:1px solid #E4EAF3 !important;
border-radius:16px !important;
box-shadow:0 4px 12px rgba(18,35,59,.06),0 24px 48px rgba(13,26,46,.22) !important;
max-width:340px !important;
overflow:visible !important;
}
.dark_mode .shepherd-element{
background:#101A2E !important;
border-color:rgba(255,255,255,.1) !important;
box-shadow:0 24px 48px rgba(0,0,0,.55) !important;
}
/* a seta do Popper: combina com a borda/fundo do balão */
.shepherd-arrow,
.shepherd-element .shepherd-arrow{
border:none !important;
background:transparent !important;
}
.shepherd-arrow::before,
.shepherd-element[data-popper-placement="right"] .shepherd-arrow::before,
.shepherd-element[data-popper-placement="left"] .shepherd-arrow::before,
.shepherd-element[data-popper-placement="top"] .shepherd-arrow::before,
.shepherd-element[data-popper-placement="bottom"] .shepherd-arrow::before{
border-color:#fff !important; /* mesma cor do balão */
}
.dark_mode .shepherd-arrow::before,
.dark_mode .shepherd-element .shepherd-arrow::before{ border-color:#101A2E !important; }
/* ---------- conteúdo interno ---------- */
.shepherd-content{ padding:0 !important; }
/* header: faixa com fundo suave da marca */
.shepherd-header{
background:#E9F0FD !important;
border-bottom:1px solid #D8E5FA !important;
border-radius:15px 15px 0 0 !important; /* 15 = 16 - borda */
padding:13px 16px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
}
.dark_mode .shepherd-header{
background:rgba(13,79,216,.2) !important;
border-bottom-color:rgba(13,79,216,.3) !important;
}
/* título: peso de destaque, cor da marca */
.shepherd-title,
.shepherd-title[id^="step-"]{
font-size:14.5px !important;
font-weight:700 !important;
color:#0D4FD8 !important;
letter-spacing:-.01em !important;
margin:0 !important;
line-height:1.3 !important;
}
.dark_mode .shepherd-title{ color:#7FA9F5 !important; }
/* botão fechar (×): quadrado arredondado, vermelho suave no hover */
.shepherd-cancel-icon{
width:28px !important;
height:28px !important;
flex:none !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:8px !important;
background:transparent !important;
border:none !important;
color:#5A6B85 !important;
font-size:20px !important;
line-height:1 !important;
padding:0 !important;
margin:0 !important;
cursor:pointer !important;
transition:background .13s ease, color .13s ease !important;
}
.shepherd-cancel-icon span{ line-height:1 !important; }
.shepherd-cancel-icon:hover{
background:#FDECEC !important;
color:#B42323 !important;
}
.dark_mode .shepherd-cancel-icon{ color:#9FB0D1 !important; }
.dark_mode .shepherd-cancel-icon:hover{
background:rgba(180,35,35,.25) !important;
color:#FFB4B4 !important;
}
/* ---------- barra de progresso: fininha, da marca ---------- */
.shepherd-progress-bar{
height:5px !important;
background:#EAF0F8 !important;
border-radius:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
}
.shepherd-progress-bar span{
display:block !important;
height:100% !important;
background:linear-gradient(90deg,#0D4FD8,#5B8DEF) !important;
border-radius:0 !important;
transition:width .4s cubic-bezier(.2,.7,.2,1) !important;
}
.dark_mode .shepherd-progress-bar{ background:rgba(255,255,255,.08) !important; }
/* ---------- texto da etapa ---------- */
.shepherd-text,
.shepherd-text[id^="step-"]{
padding:16px 18px 18px !important;
font-size:14.5px !important;
line-height:1.6 !important;
color:#3E5170 !important;
background:transparent !important;
}
.dark_mode .shepherd-text{ color:#C9D4E4 !important; }
.shepherd-text b, .shepherd-text strong{
color:#0D4FD8 !important;
font-weight:700 !important;
}
.dark_mode .shepherd-text b{ color:#7FA9F5 !important; }
/* botões de navegação do tour (Anterior/Próximo/Finalizar), se existirem */
.shepherd-footer{
padding:0 18px 16px !important;
border-top:none !important;
background:transparent !important;
display:flex !important;
gap:8px !important;
justify-content:flex-end !important;
}
.shepherd-button{
border-radius:9px !important;
font-weight:600 !important;
font-size:13.5px !important;
padding:9px 18px !important;
background:#0D4FD8 !important;
color:#fff !important;
border:none !important;
cursor:pointer !important;
transition:background .14s ease, transform .12s ease !important;
}
.shepherd-button:hover{ background:#0A41B8 !important; transform:translateY(-1px) !important; }
.shepherd-button.shepherd-button-secondary{
background:#fff !important;
color:#5A6B85 !important;
border:1px solid #D2DCEA !important;
}
.shepherd-button.shepherd-button-secondary:hover{
border-color:#0D4FD8 !important;
color:#0D4FD8 !important;
background:#fff !important;
}
.dark_mode .shepherd-button.shepherd-button-secondary{
background:#0C1526 !important;
color:#9FB0D1 !important;
border-color:#22304F !important;
}
/* backdrop do tour (escurece a página), se ativo */
.shepherd-modal-overlay-container.shepherd-modal-is-visible{
opacity:.45 !important;
background:#0F2440 !important; /* navy da marca em vez de preto */
}
/* ============================================================
FASE 17b — cards da lista de tours: estilo tile do painel
============================================================ */
/* card de cada tour */
body:not(.dark_mode) .div_vt.card{
border:1px solid #E4EAF3 !important;
border-radius:14px !important;
box-shadow:0 1px 2px rgba(18,35,59,.04),0 8px 22px rgba(18,35,59,.06) !important;
transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
body:not(.dark_mode) .div_vt.card:hover{
border-color:#C7DAF8 !important;
transform:translateY(-2px) !important;
box-shadow:0 4px 10px rgba(18,35,59,.05),0 14px 28px rgba(13,79,216,.1) !important;
}
.dark_mode .div_vt.card{
background:#101a26 !important;
border:1px solid rgba(255,255,255,.06) !important;
box-shadow:none !important;
}
.dark_mode .div_vt.card:hover{ border-color:rgba(13,79,216,.5) !important; }
/* nome do tour */
body:not(.dark_mode) .vt_name{ color:#0F2440 !important; font-weight:700 !important; font-size:15px !important; }
.dark_mode .vt_name{ color:#F2F5FA !important; }
/* metadados (data, autor) */
body:not(.dark_mode) .vt_info span[style*="font-size:12px"]{ color:#8B99B0 !important; }
.vt_info a{ color:#0D4FD8 !important; }
.vt_info a:hover{ text-decoration:underline !important; }
.dark_mode .vt_info span[style*="font-size:12px"]{ color:#8FA0BC !important; }
/* thumbnail do tour */
.vt_content_div img{ border-radius:8px !important; }
/* botões de renomear (caneta/check/x) */
.btn_view_rename, .btn_save_rename, .btn_close_rename{
color:#8B99B0 !important;
padding:4px !important;
border-radius:6px !important;
cursor:pointer !important;
}
.btn_view_rename:hover{ color:#0D4FD8 !important; background:#E9F0FD !important; }
.btn_save_rename{ color:#0E8A54 !important; }
.btn_save_rename:hover{ background:#E5F5EC !important; }
.btn_close_rename:hover{ color:#B42323 !important; background:#FDECEC !important; }
/* ---- faixa "CRIAR NOVO TOUR" (voltou a ser card normal) ---- */
body:not(.dark_mode) .card.border-left-success{
border:1px solid #E4EAF3 !important;
border-left:4px solid #0E8A54 !important;
border-radius:12px !important;
box-shadow:0 1px 2px rgba(18,35,59,.04) !important;
}
body:not(.dark_mode) .card.border-left-success .text-uppercase{
color:#0F2440 !important;
font-size:13px !important;
font-weight:700 !important;
letter-spacing:.05em !important;
}
.dark_mode .card.border-left-success{
background:#101a26 !important;
border:1px solid rgba(255,255,255,.06) !important;
border-left:4px solid #0E8A54 !important;
}
.dark_mode .card.border-left-success .text-uppercase{ color:#E7ECF7 !important; }
/* ============================================================
FASE 18 — títulos de card: padrão global à prova de conflito
(Galeria, Publicar, Proteção, Metatag, RV — todas as páginas)
============================================================ */
/* ---------- o título de card padrão do painel inteiro ---------- */
.card .card-header h6,
.card .card-header h6.text-primary,
.card-header h6.font-weight-bold,
a.d-block.card-header h6{
color:#0F2440 !important; /* navy: legível em qualquer fundo */
font-size:14.5px !important;
font-weight:700 !important;
letter-spacing:-.01em !important;
line-height:1.35 !important;
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
flex-wrap:wrap !important;
}
.card .card-header h6 i{ color:#0D4FD8 !important; } /* ícone: acento azul */
/* nota pequena entre parênteses (ex: "(arrastar imagens...)") */
.card .card-header h6 i[style*="font-size:12px"],
.card .card-header h6 span[style*="font-size:12px"]{
color:#8B99B0 !important;
font-weight:500 !important;
font-style:normal !important;
}
/* card-header: fundo SEMPRE neutro (mata o azul-sobre-azul na raiz) */
body:not(.dark_mode) .card .card-header{
background:#fff !important;
}
.dark_mode .card .card-header{ background:#101a26 !important; }
/* dark mode: título claro, ícone azul-claro */
.dark_mode .card .card-header h6,
.dark_mode .card .card-header h6.text-primary{ color:#E7ECF7 !important; }
.dark_mode .card .card-header h6 i{ color:#7FA9F5 !important; }
/* headers clicáveis (collapse): feedback de hover */
a.d-block.card-header{ transition:background .13s ease !important; border-radius:14px 14px 0 0 !important; }
body:not(.dark_mode) a.d-block.card-header:hover{ background:#F7FAFE !important; }
.dark_mode a.d-block.card-header:hover{ background:rgba(13,79,216,.12) !important; }
a.d-block.card-header h6{ cursor:pointer !important; }
/* ============================================================
FASE 18b — página Publicar: toggles, botões de link, preview
============================================================ */
/* ---------- toggles (bootstrap-toggle): pílulas da marca ---------- */
.toggle{ border-radius:99px !important; overflow:hidden !important; border:1px solid #D2DCEA !important; }
.toggle .toggle-on,
.toggle .toggle-off,
.toggle .toggle-handle{
border-radius:99px !important;
font-weight:600 !important;
font-size:13px !important;
}
.toggle.btn-success{ background:#0E8A54 !important; border-color:#0E8A54 !important; }
.toggle.btn-success .toggle-on{ background:#0E8A54 !important; color:#fff !important; }
.toggle.btn-danger{ background:#B42323 !important; border-color:#B42323 !important; }
.toggle.btn-danger .toggle-off{ background:#B42323 !important; color:#fff !important; }
.toggle.btn-light{ background:#E7EDF5 !important; }
.toggle.btn-light .toggle-off{ background:#E7EDF5 !important; color:#5A6B85 !important; }
.toggle .toggle-handle{ border:none !important; box-shadow:0 1px 3px rgba(18,35,59,.25) !important; }
.dark_mode .toggle.btn-light{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.12) !important; }
.dark_mode .toggle.btn-light .toggle-off{ background:rgba(255,255,255,.08) !important; color:#9FB0D1 !important; }
/* ---------- botões de link (abrir/copiar/QR nos input-groups) ---------- */
.input-group-append .btn-success{
background:#0E8A54 !important;
border-color:#0E8A54 !important;
border-radius:0 10px 10px 0 !important;
}
.input-group-append .btn-primary{
background:#0D4FD8 !important;
border-color:#0D4FD8 !important;
}
.input-group-append .btn-secondary{
background:#fff !important;
border:1px solid #D2DCEA !important;
color:#5A6B85 !important;
}
.input-group-append .btn-secondary:hover{ border-color:#0D4FD8 !important; color:#0D4FD8 !important; }
.input-group-append .btn:last-child{ border-radius:0 10px 10px 0 !important; }
/* campo de link: leitura-only estilizada */
input[readonly].form-control.bg-white{
background:#F7FAFE !important;
font-family:'Spline Sans Mono',monospace !important;
font-size:12.5px !important;
color:#3E5170 !important;
}
.dark_mode input[readonly].form-control.bg-white{ background:#0C1526 !important; color:#C9D4E4 !important; }
/* ---------- badge "traduzir" ---------- */
.translate_deepl_btn{
background:#0D4FD8 !important;
border-radius:999px !important;
font-size:11px !important;
font-weight:600 !important;
padding:.35em .8em !important;
cursor:pointer !important;
transition:background .13s ease !important;
}
.translate_deepl_btn:hover{ background:#0A41B8 !important; }
.translate_deepl_btn i{ margin-left:2px !important; }
/* ---------- botões grandes de sessão/reunião ---------- */
#btn_open_live, #btn_open_meeting{
height:46px !important;
border-radius:12px !important;
font-weight:700 !important;
font-size:14px !important;
}
body:not(.dark_mode) #btn_open_live.btn-outline-warning{
color:#B47D1E !important;
border:1.5px solid #E8A13D !important;
background:#FBF3E4 !important;
}
#btn_open_live.btn-outline-warning:hover{
background:#E8A13D !important;
border-color:#E8A13D !important;
color:#fff !important;
}
body:not(.dark_mode) #btn_open_meeting.btn-outline-info{
color:#0D4FD8 !important;
border:1.5px solid #C7DAF8 !important;
background:#E9F0FD !important;
}
#btn_open_meeting.btn-outline-info:hover{
background:#0D4FD8 !important;
border-color:#0D4FD8 !important;
color:#fff !important;
}
/* ---------- preview do Facebook (Metatag) ---------- */
body:not(.dark_mode) .facebook-preview{
border:1px solid #E4EAF3 !important;
border-radius:12px !important;
overflow:hidden !important;
box-shadow:0 1px 2px rgba(18,35,59,.04) !important;
}
.facebook-preview__url{
background:#F0F3F8 !important;
color:#5A6B85 !important;
font-size:11px !important;
padding:6px 12px !important;
text-transform:lowercase !important;
}
.facebook-preview__title{
font-size:15px !important;
font-weight:700 !important;
color:#0F2440 !important;
line-height:1.3 !important;
}
.facebook-preview__description{
font-size:12.5px !important;
color:#5A6B85 !important;
line-height:1.45 !important;
}
.dark_mode .facebook-preview{ border-color:rgba(255,255,255,.08) !important; }
.dark_mode .facebook-preview__url{ background:rgba(255,255,255,.05) !important; color:#9FB0D1 !important; }
.dark_mode .facebook-preview__title{ color:#E7ECF7 !important; }
/* ---------- rótulos de formulário ---------- */
body:not(.dark_mode) label{ color:#3E5170 !important; font-weight:600 !important; font-size:13.5px !important; }
.dark_mode label{ color:#C9D4E4 !important; }
label .help_t{ color:#0D4FD8 !important; }
/* ============================================================
FASE 18 v3 — títulos de card: vence o theme.php
(theme.php carrega DEPOIS; !important empata — então vencemos
por ESPECIFICIDADE: html body + atributo + importante)
============================================================ */
/* fundo do header: neutro em qualquer tema */
html body .card .card-header,
html body .card .card-header.py-3,
html body a.d-block.card-header{
background:#fff !important;
background-image:none !important;
border-bottom:1px solid #E4EAF3 !important;
}
html body .dark_mode .card .card-header,
html body .dark_mode a.d-block.card-header{
background:#101a26 !important;
background-image:none !important;
border-bottom-color:rgba(255,255,255,.07) !important;
}
/* o título em si — ataque triplamente: classe do tema, variável e herança */
html body .card .card-header h6,
html body .card .card-header h6.text-primary,
html body .card .card-header h6[class*="text-"],
html body a.d-block.card-header h6,
html body a.d-block.card-header h6.text-primary{
color:#0F2440 !important;
font-size:14.5px !important;
font-weight:700 !important;
letter-spacing:-.01em !important;
line-height:1.35 !important;
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
flex-wrap:wrap !important;
}
html body .card .card-header h6 i{ color:#0D4FD8 !important; }
html body .card .card-header h6 i[style*="font-size:12px"],
html body .card .card-header h6 span[style*="font-size:12px"]{
color:#8B99B0 !important;
font-weight:500 !important;
}
html body .dark_mode .card .card-header h6,
html body .dark_mode .card .card-header h6.text-primary,
html body .dark_mode a.d-block.card-header h6{
color:#E7ECF7 !important;
}
html body .dark_mode .card .card-header h6 i{ color:#7FA9F5 !important; }
/* headers clicáveis: hover suave */
html body a.d-block.card-header{ transition:background .13s ease !important; }
html body a.d-block.card-header:hover{ background:#F7FAFE !important; }
html body .dark_mode a.d-block.card-header:hover{ background:rgba(13,79,216,.12) !important; }
/* reforço anti-tema: a regra EXATA do theme.php, anulada com mais força
(.text-primary dele é "classe !important" → nosso "html body classe !important" pesa mais) */
html body .card .card-header h6.text-primary{ color:#0F2440 !important; }
html body .dark_mode .card .card-header h6.text-primary{ color:#E7ECF7 !important; }
/* ---------- layout: linha 1 = copyright/versão · linha 2 = fileira de links ---------- */
footer.sticky-footer .copyright{
display:block !important; /* volta ao fluxo de texto: os grupos
de links fluem juntos numa linha */
text-align:center !important;
line-height:1.9 !important;
font-size:0 !important; /* colapsa os "|" e espaços soltos */
}
footer.sticky-footer .copyright > *{ font-size:12.5px !important; }
/* copyright sozinho na primeira linha: quebra de linha depois dele */
footer.sticky-footer .copyright > span:first-child{
display:block !important; /* block = ocupa a linha inteira */
color:#8B99B0 !important;
font-weight:600 !important;
letter-spacing:.01em !important;
margin-bottom:2px !important;
}
.dark_mode footer.sticky-footer .copyright > span:first-child{ color:#7A8BA8 !important; }
/* badge (quando visível) sobe para junto do copyright — inline na 1ª linha */
.update_notification_element:not(.d-none){
display:inline-flex !important; /* este PODE: o script já o tornou
visível tirando d-none — aqui só
alinhamos ícone+texto do badge */
vertical-align:middle !important;
margin-left:10px !important;
}
/* os links: inline-flex lado a lado, separados só pelo "|" colapsado */
footer.sticky-footer .footer_link{
display:inline-flex !important;
vertical-align:middle !important;
margin:0 2px !important;
}
/* ============================================================
FASE 20 v2 — popup de cookies: SVG no ícone + um único card
Estrutura real: .cm (âncora de posição, invisível)
└─ .cm__body (o card de verdade)
============================================================ */
/* ---------- a âncora: só posiciona, nada visual ---------- */
.cm,
.cm.cm--box,
.cm.cm--bottom,
.cm.cm--right{
background:transparent !important;
border:none !important;
box-shadow:none !important;
border-radius:0 !important;
padding:0 !important;
margin:0 !important;
font-family:'Instrument Sans',-apple-system,'Segoe UI',sans-serif !important;
z-index:1990 !important; /* abaixo do nosso boot (1997), acima do painel */
}
/* ---------- o card único ---------- */
.cm .cm__body{
background:#fff !important;
border:1px solid #E4EAF3 !important;
border-radius:16px !important;
box-shadow:0 4px 12px rgba(18,35,59,.06),0 24px 48px rgba(13,26,46,.22) !important;
padding:24px 26px !important;
max-width:400px !important;
margin:0 !important; /* a margem vem da âncora abaixo */
}
.cm.cm--bottom{ margin-bottom:20px !important; }
.cm.cm--right{ margin-right:20px !important; }
.cm.cm--bottom.cm--right{ margin:0 20px 20px 0 !important; }
.dark_mode .cm .cm__body{
background:#101A2E !important;
border-color:rgba(255,255,255,.1) !important;
box-shadow:0 24px 48px rgba(0,0,0,.55) !important;
}
/* ---------- título com cookie SVG (à prova de fontes) ---------- */
.cm .cm__title{
font-size:18px !important;
font-weight:700 !important;
color:#0F2440 !important;
letter-spacing:-.01em !important;
margin:0 0 10px !important;
display:inline-flex !important;
align-items:center !important;
gap:10px !important;
}
.dark_mode .cm .cm__title{ color:#F2F5FA !important; }
/* o biscoito: SVG desenhado em código — cor e forma garantidas */
.cm .cm__title::before{
content:"" !important;
width:22px !important;
height:22px !important;
flex:none !important;
background-color:#E8A13D !important; /* biscoito âmbar */
-webkit-mask-image:url("data:image/svg+xml;utf8,") !important;
mask-image:url("data:image/svg+xml;utf8,") !important;
-webkit-mask-repeat:no-repeat !important;
mask-repeat:no-repeat !important;
-webkit-mask-size:contain !important;
mask-size:contain !important;
-webkit-mask-position:center !important;
mask-position:center !important;
}
/* ---------- descrição ---------- */
.cm .cm__desc{
font-size:14px !important;
line-height:1.6 !important;
color:#5A6B85 !important;
margin:0 !important;
}
.dark_mode .cm .cm__desc{ color:#C9D4E4 !important; }
/* ---------- botões ---------- */
.cm .cm__btn{
border-radius:10px !important;
font-weight:700 !important;
font-size:14px !important;
padding:12px 20px !important;
min-height:46px !important;
border:none !important;
cursor:pointer !important;
transition:background .14s ease, color .14s ease, border-color .14s ease, transform .12s ease !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
.cm .cm__btn[data-role="all"]{
background:#0D4FD8 !important;
color:#fff !important;
box-shadow:0 6px 16px rgba(13,79,216,.3) !important;
}
.cm .cm__btn[data-role="all"]:hover{
background:#0A41B8 !important;
transform:translateY(-1px) !important;
box-shadow:0 10px 22px rgba(13,79,216,.4) !important;
}
.cm .cm__btn.cm__btn--secondary{
background:#fff !important;
color:#3E5170 !important;
border:1.5px solid #D2DCEA !important;
box-shadow:none !important;
}
.cm .cm__btn.cm__btn--secondary:hover{
border-color:#0D4FD8 !important;
color:#0D4FD8 !important;
}
.dark_mode .cm .cm__btn.cm__btn--secondary{
background:#0C1526 !important;
color:#C9D4E4 !important;
border-color:#22304F !important;
}
.dark_mode .cm .cm__btn.cm__btn--secondary:hover{
border-color:#0D4FD8 !important;
color:#7FA9F5 !important;
}
/* grupos: fileira principal + linha do gerenciar */
.cm .cm__btns{
display:flex !important;
flex-direction:column !important;
gap:10px !important;
margin-top:18px !important;
}
.cm .cm__btn-group{
display:flex !important;
gap:10px !important;
flex-wrap:wrap !important;
}
.cm .cm__btn-group .cm__btn{ flex:1 1 auto !important; }
/* ---------- painel de preferências (Gerenciar) ---------- */
.cm .cm__category,
.cm [class*="cm__cate"]{
font-size:14px !important;
}
.cm .cm__category{
border-radius:10px !important;
border:1px solid #E4EAF3 !important;
padding:12px 14px !important;
margin-bottom:8px !important;
}
.dark_mode .cm .cm__category{ border-color:rgba(255,255,255,.08) !important; }
/* ---------- mobile ---------- */
@media (max-width:576px){
.cm.cm--bottom, .cm.cm--right,
.cm.cm--bottom.cm--right{ margin:0 10px 10px 10px !important; }
.cm .cm__body{
padding:20px 18px !important;
max-width:none !important;
}
.cm .cm__btn-group .cm__btn{ flex:1 1 100% !important; }
}
/* ============================================================
FASE 21 v4 FINAL — modal de preferências de cookies (.pm)
Bloco completo e autossuficiente: substitui qualquer FASE 21
anterior. Estrutura: .pm é o card; header/body/footer são
partes. Linha da categoria: título+seta juntos à esquerda,
toggle absoluto à direita em corredor reservado.
============================================================ */
/* ---------- FIX da sobreposição: popup (cm) atrás do modal ---------- */
.cm{ z-index:1990 !important; }
.pm{ z-index:2100 !important; }
body:has(.pm[aria-hidden="false"]) .cm:not([aria-hidden="true"]){
opacity:0 !important;
pointer-events:none !important;
transition:opacity .18s ease !important;
}
/* ---------- O CARD é o próprio .pm ---------- */
.pm{
background:#fff !important;
border:1px solid #E4EAF3 !important;
border-radius:16px !important;
box-shadow:0 4px 12px rgba(18,35,59,.06),0 24px 48px rgba(13,26,46,.25) !important;
font-family:'Instrument Sans',-apple-system,'Segoe UI',sans-serif !important;
max-width:560px !important;
}
.dark_mode .pm{
background:#101A2E !important;
border-color:rgba(255,255,255,.1) !important;
box-shadow:0 24px 48px rgba(0,0,0,.55) !important;
}
/* div de foco vazio da lib: fora */
.pm > div[tabindex="-1"]{ display:none !important; }
/* ---------- HEADER ---------- */
.pm .pm__header{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
padding:18px 22px !important;
border-bottom:1px solid #E4EAF3 !important;
border-radius:15px 15px 0 0 !important;
}
.dark_mode .pm .pm__header{ border-bottom-color:rgba(255,255,255,.08) !important; }
.pm .pm__title{
font-size:17px !important;
font-weight:700 !important;
color:#0F2440 !important;
letter-spacing:-.01em !important;
margin:0 !important;
display:inline-flex !important;
align-items:center !important;
gap:9px !important;
}
.dark_mode .pm .pm__title{ color:#F2F5FA !important; }
/* cookie âmbar (máscara SVG — à prova de fontes) */
.pm .pm__title::before{
content:"" !important;
width:20px !important;
height:20px !important;
flex:none !important;
background-color:#E8A13D !important;
-webkit-mask-image:url("data:image/svg+xml;utf8,") !important;
mask-image:url("data:image/svg+xml;utf8,") !important;
-webkit-mask-repeat:no-repeat !important;
mask-repeat:no-repeat !important;
-webkit-mask-size:contain !important;
mask-size:contain !important;
}
/* botão fechar (X) */
.pm .pm__close-btn{
width:32px !important;
height:32px !important;
flex:none !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:8px !important;
background:transparent !important;
border:none !important;
cursor:pointer !important;
transition:background .13s ease, color .13s ease !important;
color:#5A6B85 !important;
padding:0 !important;
}
.pm .pm__close-btn:hover{ background:#FDECEC !important; color:#B42323 !important; }
.pm .pm__close-btn svg{ width:16px !important; height:16px !important; stroke:currentColor !important; fill:none !important; }
.dark_mode .pm .pm__close-btn{ color:#9FB0D1 !important; }
/* ---------- BODY ---------- */
.pm .pm__body{
padding:18px 22px !important;
max-height:calc(100vh - 260px) !important;
overflow-y:auto !important;
}
/* seção intro */
.pm .pm__section-title{
font-size:15px !important;
font-weight:700 !important;
color:#0F2440 !important;
margin:0 !important;
}
.dark_mode .pm .pm__section-title{ color:#E7ECF7 !important; }
.pm .pm__section-desc{
font-size:13.5px !important;
line-height:1.6 !important;
color:#5A6B85 !important;
margin:0 !important;
}
.dark_mode .pm .pm__section-desc{ color:#C9D4E4 !important; }
/* seções expandíveis: cards */
.pm .pm__section--toggle{
border:1px solid #E4EAF3 !important;
border-radius:12px !important;
padding:13px 15px !important;
margin-top:10px !important;
transition:border-color .14s ease !important;
}
.pm .pm__section--toggle:hover{ border-color:#C7DAF8 !important; }
.dark_mode .pm .pm__section--toggle{ border-color:rgba(255,255,255,.08) !important; }
.dark_mode .pm .pm__section--toggle:hover{ border-color:rgba(13,79,216,.5) !important; }
/* ============================================================
A LINHA DA CATEGORIA (título + seta à esquerda · toggle à
direita em corredor reservado — nunca sobrepõe, nunca estoura)
============================================================ */
.pm .pm__section-title-wrapper{
display:flex !important;
align-items:center !important;
gap:10px !important;
flex-wrap:nowrap !important;
position:relative !important;
padding-right:56px !important; /* corredor do toggle */
min-height:28px !important;
}
/* título: encolhe graciosamente */
.pm .pm__section-title[aria-expanded]{
flex:0 1 auto !important;
min-width:0 !important;
order:1 !important;
font-size:14px !important;
font-weight:700 !important;
color:#0F2440 !important;
background:none !important;
border:none !important;
cursor:pointer !important;
padding:0 !important;
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
white-space:normal !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
max-width:calc(100% - 130px) !important;
}
.dark_mode .pm .pm__section-title[aria-expanded]{ color:#E7ECF7 !important; }
/* seta: colada no título */
.pm .pm__section-arrow{
order:2 !important;
flex:none !important;
margin:0 !important;
width:14px !important;
display:inline-flex !important;
align-items:center !important;
color:#8B99B0 !important;
transition:transform .2s ease, color .2s ease !important;
}
.pm .pm__section-arrow svg{
width:13px !important;
height:13px !important;
stroke:currentColor !important;
fill:none !important;
}
.pm .pm__section--toggle:has(.pm__section-title[aria-expanded="true"]) .pm__section-arrow{
transform:rotate(180deg) !important;
color:#0D4FD8 !important;
}
/* toggle: absoluto na direita, dentro do corredor */
.pm .section__toggle-wrapper{
order:3 !important;
position:absolute !important;
right:0 !important;
top:50% !important;
transform:translateY(-50%) !important;
margin:0 !important;
padding:0 !important;
display:inline-flex !important;
align-items:center !important;
min-height:24px !important;
cursor:pointer !important;
}
/* label redundante da lib: fora */
.pm .toggle__label{ display:none !important; }
/* track e knob: dimensões estáveis */
.pm .toggle__icon{
display:inline-block !important;
width:44px !important;
height:24px !important;
position:relative !important;
flex:none !important;
background:#E7EDF5 !important;
border-radius:99px !important;
border:1px solid #D2DCEA !important;
transition:background .18s ease, border-color .18s ease !important;
}
.pm .toggle__icon-circle{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
position:absolute !important;
top:2px !important;
left:2px !important;
width:18px !important;
height:18px !important;
border-radius:50% !important;
background:#fff !important;
box-shadow:0 1px 3px rgba(18,35,59,.3) !important;
transition:transform .18s cubic-bezier(.2,.7,.2,1) !important;
}
/* glifos internos da lib: fora (knob limpo) */
.pm .toggle__icon-off,
.pm .toggle__icon-on{ display:none !important; }
/* estados: ON azul · necessário verde */
.pm .section__toggle:checked + .toggle__icon{
background:#0D4FD8 !important;
border-color:#0D4FD8 !important;
}
.pm .section__toggle:checked + .toggle__icon .toggle__icon-circle,
.pm .section__toggle:disabled + .toggle__icon .toggle__icon-circle{
transform:translateX(20px) !important;
}
.pm .section__toggle:disabled + .toggle__icon{
background:#0E8A54 !important;
border-color:#0E8A54 !important;
opacity:.9 !important;
}
/* badges */
.pm .pm__badge{
background:#E9F0FD !important;
color:#0D4FD8 !important;
border-radius:999px !important;
font-size:10.5px !important;
font-weight:700 !important;
padding:3px 10px !important;
white-space:nowrap !important;
}
.dark_mode .pm .pm__badge{
background:rgba(13,79,216,.25) !important;
color:#7FA9F5 !important;
}
/* descrições expandidas */
.pm .pm__section-desc-wrapper[aria-hidden="false"]{ padding-top:10px !important; }
/* serviços: mesma arquitetura (corredor à direita) */
.pm .pm__service{
display:flex !important;
align-items:center !important;
gap:12px !important;
position:relative !important;
border:1px dashed #D2DCEA !important;
border-radius:10px !important;
padding:10px 60px 10px 12px !important;
margin-bottom:8px !important;
}
.dark_mode .pm .pm__service{ border-color:rgba(255,255,255,.12) !important; }
.pm .pm__service-header{ min-width:0 !important; flex:1 1 auto !important; }
.pm .pm__service-title{
font-size:13px !important;
font-weight:600 !important;
color:#3E5170 !important;
}
.dark_mode .pm .pm__service-title{ color:#C9D4E4 !important; }
.pm .pm__service-icon{ display:none !important; }
.pm .pm__service .section__toggle-wrapper{
position:absolute !important;
right:10px !important;
top:50% !important;
transform:translateY(-50%) !important;
}
/* ---------- FOOTER ---------- */
.pm .pm__footer{
padding:16px 22px 20px !important;
border-top:1px solid #E4EAF3 !important;
border-radius:0 0 15px 15px !important;
}
.dark_mode .pm .pm__footer{ border-top-color:rgba(255,255,255,.08) !important; }
.pm .pm__btn-group{
display:flex !important;
gap:10px !important;
flex-wrap:wrap !important;
margin-bottom:10px !important;
}
.pm .pm__btn-group:last-child{ margin-bottom:0 !important; }
.pm .pm__btn{
border-radius:10px !important;
font-weight:700 !important;
font-size:13.5px !important;
padding:11px 18px !important;
min-height:44px !important;
border:none !important;
cursor:pointer !important;
flex:1 1 auto !important;
transition:background .14s ease, transform .12s ease !important;
}
.pm .pm__btn[data-role="all"]{
background:#0D4FD8 !important;
color:#fff !important;
box-shadow:0 6px 16px rgba(13,79,216,.3) !important;
}
.pm .pm__btn[data-role="all"]:hover{
background:#0A41B8 !important;
transform:translateY(-1px) !important;
}
.pm .pm__btn.pm__btn--secondary{
background:#fff !important;
color:#3E5170 !important;
border:1.5px solid #D2DCEA !important;
}
.pm .pm__btn.pm__btn--secondary:hover{
border-color:#0D4FD8 !important;
color:#0D4FD8 !important;
}
.dark_mode .pm .pm__btn.pm__btn--secondary{
background:#0C1526 !important;
color:#C9D4E4 !important;
border-color:#22304F !important;
}
.dark_mode .pm .pm__btn.pm__btn--secondary:hover{
border-color:#0D4FD8 !important;
color:#7FA9F5 !important;
}
/* ---------- mobile ---------- */
@media (max-width:576px){
.pm{ max-width:none !important; margin:10px !important; }
.pm .pm__header{ padding:15px 16px !important; }
.pm .pm__body{ padding:15px 16px !important; max-height:calc(100vh - 320px) !important; }
.pm .pm__footer{ padding:14px 16px 16px !important; }
.pm .pm__btn-group .pm__btn{ flex:1 1 100% !important; }
.pm .pm__section-title[aria-expanded]{
max-width:calc(100% - 80px) !important;
font-size:13px !important;
}
}
/* ============================================================
FASE 23b — Correção do hero da dashboard
BUG: em contas sem tour, o card vazio "Nenhum tour foi criado
ainda" contém um link com wstep=0 (o Assistente) — o que faz o
:has(a[href*="wstep"]) dar match na LISTA DE TOURS também.
E a linha 1731 usa seletor descendente (sem >), pegando
qualquer .row .card da página.
CORREÇÃO: o hero só vale na página que tem .dashboard_stats.
============================================================ */
/* 1) neutraliza a regra descendente problemática da linha 1731 */
.container-fluid:has(a[href*="wstep"]) .row:first-child .card{
background:#fff !important;
background-image:none !important;
color:#12233B !important;
border:1px solid #E4EAF3 !important;
border-radius:16px !important;
box-shadow:0 1px 2px rgba(18,35,59,.05),0 10px 30px rgba(18,35,59,.07) !important;
}
body.dark_mode .container-fluid:has(a[href*="wstep"]) .row:first-child .card{
background:#101a26 !important;
border-color:rgba(255,255,255,.06) !important;
}
/* 2) o hero azul SÓ na página que tem .dashboard_stats (a
dashboard real) — aqui reafirmamos com especificidade extra */
.container-fluid:has(.dashboard_stats) > .row:first-child .card,
.container-fluid:has(a[href*="wstep"]):has(.dashboard_stats) > .row:first-child .card{
background:linear-gradient(135deg,#0F2440 0%,#0D4FD8 140%) !important;
border:none !important;
border-radius:18px !important;
color:#fff !important;
box-shadow:0 16px 40px rgba(13,79,216,.25) !important;
}
/* ============================================================
FIX — badge do nome do plano (change_plan): texto branco
(fundo permanece o atual do tema)
============================================================ */
.badge-primary-soft,
.badge-primary-soft.text-primary,
.badge.badge-primary-soft.badge-pill.text-primary{ color:#ffffff !important; }
/* ============================================================
FIX · seletor Mensal/Anual nativo (change_plan): texto branco
O tema pintava os labels em escuro sobre o azul da marca.
============================================================ */
.toggle-group label[for^="switcher_"],
.toggle-group .toggle-on,
.toggle-group .toggle-off{
color:#ffffff !important;
text-shadow:none !important;
}
/* PIXP: seletor de tours do editor de interface acima de tudo (duelo de empilhamento resolvido no header) */
.vt_select_header { z-index: 2147483000 !important; position: relative !important; }
/* PIXP_ZFIX2 · dropdown da topbar (Perfil/Sair) por cima do subheader (ZFIX1) e do .content */
/* escada: header 2147483000 · dropdowns topo abertos 2147483200 · popups 2147483600 */
li.nav-item.dropdown.show{ position:relative !important; z-index:2147483200 !important; }
/* PIXP_ZFIX3 · a topbar inteira é stacking context (z 1061) preso abaixo do subheader (2147483000) */
/* eleva a topbar ENQUANTO qualquer dropdown dela está aberto · :has() já usado na linha 947 */
/* escada: header 2147483000 · topbar c/ dropdown aberto 2147483100 · popups 2147483600 */
.topbar:has(.dropdown.show){ z-index:2147483100 !important; }
/* PIXP_ZFIX4 · modais nativos (z 2000 · backdrop 1040) esmagados pelo subheader 2147483000 */
/* com qualquer modal aberto o subheader desce a 1030 · fecha o modal e o ZFIX1 volta */
/* escada: header normal 2147483000 · topbar c/ dropdown 2147483100 · header c/ modal 1030 · popups 2147483600 */
body:has(.modal.show) .vt_select_header{ z-index:1030 !important; }
/* PIXP_MSC1 · modais altos: body rola · header e footer sempre visíveis */
/* desenho do modal-dialog-scrollable oficial do Bootstrap 4 · aplicado a todos os modais do painel */
.modal .modal-dialog{ display:flex; flex-direction:column; max-height:calc(100vh - 3.5rem); }
.modal .modal-content{ display:flex; flex-direction:column; max-height:100%; overflow:hidden; }
.modal .modal-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.modal .modal-header, .modal .modal-footer{ flex:none; }
/* PIXP_LG1 · logo sempre visivel na sidebar (o core alterna para o favicon no mobile · !important vence o jQuery) */
#sidebar_logo{ display:inline !important; }
#sidebar_logo_small{ display:none !important; }
/* barra fina (desktop colapsado): logo compacta centrada */
.sidebar.toggled #sidebar_logo{ max-width:64px !important; }