/* =====================================================================
cardoso-nav.css — Navegação padrão Cardoso (rail de ícones + voltar)
Carregado por:
Pareado com /assets/cardoso-nav.js
---------------------------------------------------------------------
Convive com as sidebars existentes: reaproveita o dialeto dominante
(.sidebar / .sidebar-nav / .sidebar-link / .nav-section-title) usado no
software_leite/app e no portal/dashboard.
DUAS CLASSES, DE PROPOSITO:
.cc-has-rail -> a sidebar tem navegacao real (2+ itens): ganha gaveta
no mobile.
.cc-rail-var -> a pagina dirige a largura por --sidebar-w, entao o
conteudo acompanha o recolhimento. SO com esta classe
o rail recolhe no desktop.
Sem a segunda guarda, recolher a sidebar deixaria o .main deslocado pela
largura antiga — uma faixa morta. Quem nao usa a variavel fica como esta.
===================================================================== */
:root {
--cc-navy: #0b1528;
--cc-navy2: #16243c;
--cc-gold: #c97d1a;
--cc-gold2: #e8a030;
--cc-rail: 64px; /* largura recolhida */
--cc-open: 248px; /* largura expandida (classe .cc-open) */
}
/* ───────────────────────── Botão Voltar ───────────────────────── */
.cc-back {
display: inline-flex; align-items: center; gap: 7px;
border: 1px solid rgba(11,21,40,.14);
background: #fff; color: var(--cc-navy);
font-family: inherit; font-size: 12.5px; font-weight: 600;
padding: 7px 13px 7px 10px; border-radius: 9px;
cursor: pointer; text-decoration: none; white-space: nowrap;
transition: background .15s, border-color .15s, transform .15s;
}
.cc-back:hover { background: #f5f2ec; border-color: rgba(11,21,40,.28); transform: translateX(-2px); }
.cc-back:active { transform: translateX(-1px); }
.cc-back svg { width: 14px; height: 14px; flex-shrink: 0; }
.cc-back-label { font-weight: 600; }
.cc-back-parent { color: #6b7a96; font-weight: 500; }
/* Variante para barras escuras (topbar navy) */
.cc-back.cc-on-dark {
background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff;
}
.cc-back.cc-on-dark:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.cc-back.cc-on-dark .cc-back-parent { color: rgba(255,255,255,.6); }
/* Botão injetado no molde do "← Início" da casa.
Quando a pagina define .btn-back, o JS usa a classe DELA e este bloco nem
entra — o botao fica identico ao nativo daquela tela. Isto aqui e so o
fallback para as telas que nao tem esse estilo. */
.cc-back-std {
display: inline-flex; align-items: center;
font-family: inherit; font-size: 11px; font-weight: 600;
padding: 5px 12px; border-radius: 6px;
text-decoration: none; white-space: nowrap;
}
.cc-back.cc-back-std {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.7);
}
.cc-back.cc-back-std:hover { background: rgba(255,255,255,.14); color: #fff; transform: none; }
/* Sem barra onde encaixar: ancora no canto superior DIREITO.
Antes era à esquerda e caia por cima da logo da Cardoso. */
.cc-back-float {
position: fixed; top: 14px; right: 14px; z-index: 900;
box-shadow: 0 2px 10px rgba(11,21,40,.12);
}
/* Fora de barra escura o fallback precisa de contraste proprio */
.cc-back.cc-back-std.cc-back-float {
background: #fff; border-color: rgba(11,21,40,.14); color: var(--cc-navy);
}
.cc-back.cc-back-std.cc-back-float:hover { background: #f5f2ec; color: var(--cc-navy); }
/* ─────────────────── Rail: sidebar recolhida em ícones ─────────────────── */
body.cc-has-rail .sidebar .sidebar-link,
body.cc-has-rail .sidebar .sidebar-btn { white-space: nowrap; }
body.cc-has-rail .sidebar .nav-icon,
body.cc-has-rail .sidebar .sidebar-link svg { flex-shrink: 0; }
/* O recolhimento e a ocultação de rótulo vivem SÓ no desktop. O mobile não
precisa desfazer nada com !important — nenhuma regra de esconder chega lá. */
@media (min-width: 861px) {
/* A chave: redefinir a variável da própria página. A sidebar encolhe E o
.main (margin-left: var(--sidebar-w)) acompanha, sem faixa morta. */
body.cc-has-rail.cc-rail-var { --sidebar-w: var(--cc-rail); }
body.cc-has-rail.cc-rail-var .sidebar {
width: var(--cc-rail);
/* Contém qualquer rótulo de dialeto que eu não tenha previsto, em vez de
deixá-lo vazar por cima do conteúdo. */
overflow-x: hidden;
transition: width .18s ease;
z-index: 1000;
}
/* A sidebar é position:fixed nessas páginas, então expandir SOBREPÕE o
conteúdo em vez de empurrá-lo — sem reflow ao passar o mouse.
.cc-open é posta pelo JS (mouseenter/focusin), e não por :hover no CSS:
assim o estado e inspecionavel e o teclado tambem abre o rail. */
body.cc-has-rail.cc-rail-var .sidebar.cc-open,
body.cc-has-rail.cc-rail-var .sidebar.cc-pinned { width: var(--cc-open); }
/* NAO usar justify-content:center aqui. O conteudo do link (icone + rotulo)
mede ~150px; centrado numa caixa util de 16px ele transborda dos DOIS
lados, jogando o icone para fora da tela pela esquerda e deixando visivel
o miolo do texto. Com o flex-start natural o icone cai em x=24..42 e sobra
folga dentro dos 64px. */
/* A logo tem 40px e o .sidebar-brand tem padding lateral de 20px: 40+40 = 80
> 64, entao ela era cortada. Encolhe o padding so enquanto recolhido —
40+12+12 = 64, exato. Ao abrir, a regra deixa de casar e o padding
original da pagina volta sozinho. */
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .sidebar-brand {
padding-left: 12px; padding-right: 12px;
}
/* Rótulos: escondidos SO enquanto recolhido. Ao abrir, a regra para de
casar e o valor da propria pagina volta — sem segunda regra de "revelar".
.cc-rail-label e posto pelo JS em volta de rotulo solto: no portal o texto
do link e um text node puro (Radar Agro), e CSS nao alcanca
text node — por isso .sidebar-link > span nao escondia nada. */
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .cc-rail-label,
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .sidebar-link > span,
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .nav-section-title,
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .sidebar-section-label,
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .sidebar-brand-text,
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .sidebar-logo-text,
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .nav-badge,
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .session-name,
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .session-plan,
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .btn-logout,
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .sidebar-footer {
opacity: 0;
pointer-events: none;
transition: opacity .14s ease;
}
/* opacity esconde mas NAO tira do fluxo. Os 6 titulos de secao do portal
tem padding 16px/6px e seguiam ocupando ~34px cada — ~200px de espaco
morto, abrindo buracos entre os grupos de icones. No rail eles precisam
COLAPSAR. O mesmo vale para o rodape: ele so tem texto (nome, plano e um
"Sair do Portal" sem icone), entao nao ha o que mostrar em 64px.
Ao abrir, a regra deixa de casar e tudo volta ao natural. */
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .nav-section-title,
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .sidebar-section-label,
body.cc-has-rail.cc-rail-var .sidebar:not(.cc-open):not(.cc-pinned) .sidebar-footer {
height: 0;
min-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
border-top-width: 0;
border-bottom-width: 0;
overflow: hidden;
}
}
/* ───────────────────────── Mobile: drawer ───────────────────────── */
.cc-burger {
display: none;
position: fixed; bottom: 20px; right: 20px; z-index: 1100;
width: 40px; height: 40px; border-radius: 10px;
border: 1px solid rgba(11,21,40,.14);
background: #fff; color: var(--cc-navy);
align-items: center; justify-content: center; cursor: pointer;
box-shadow: 0 2px 10px rgba(11,21,40,.14);
}
.cc-burger svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
body.cc-has-rail .cc-burger { display: inline-flex; }
/* O nav compartilhado assume a gaveta do mobile. O toggle nativo da página
(ex.: .mobile-toggle do portal, no canto inferior direito) ficaria
redundante — e agora colidiria com o .cc-burger, que também mora nesse
canto. Some com ele onde o rail está ativo. */
body.cc-has-rail .mobile-toggle { display: none !important; }
/* Rail sai do fluxo e vira gaveta. Os rótulos não precisam de regra aqui:
como o bloco que os esconde vive em min-width:861px, no mobile eles já
nascem visíveis — o que importa, porque não há hover no toque. */
body.cc-has-rail .sidebar {
position: fixed; top: 0; left: 0; bottom: 0;
width: var(--cc-open);
transform: translateX(-100%);
transition: transform .22s ease;
overflow-y: auto;
}
body.cc-has-rail.cc-drawer-open .sidebar { transform: none; }
.cc-overlay {
position: fixed; inset: 0; background: rgba(11,21,40,.45);
opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 999;
}
body.cc-drawer-open .cc-overlay { opacity: 1; pointer-events: auto; }
/* O hambúrguer mora no canto INFERIOR direito (mais alcançável no toque). O
flutuante de "voltar" (.cc-back-float) fica no SUPERIOR direito, então são
cantos distintos e não colidem. */
}
/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
.cc-back, body.cc-has-rail .sidebar, .cc-overlay,
body.cc-has-rail .sidebar .sidebar-link > span { transition: none !important; }
}