/* =====================================================================
 * AXAM Município — aspeto "V18": moderno, minimalista, branco e azul.
 * Barra lateral escura em forma de cápsula só com ícones (o nome aparece
 * ao passar o rato), cartões brancos muito arredondados com sombra suave,
 * botões em pílula, gráficos em barras arredondadas e cabeçalho com
 * faixa em degradé lavanda/azul. Carrega DEPOIS de municipio.css.
 * ===================================================================== */
:root {
    --font: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
    --lateral-w: 96px;
    --acento: #7c9cff; --acento-escuro: #5a7cf0; --acento-claro: rgba(124,156,255,.14);
    --bg: #0e1118; --tela: #151924; --cartao: #1b2030; --cartao-borda: rgba(255,255,255,.06);
    --pilula: #f2f4f8; --pilula-texto: #0f1117;
    --lavanda: #b9b2f5; --lavanda-claro: rgba(185,178,245,.16);
    --heroi: linear-gradient(115deg, #3b3570 0%, #2d3f7d 60%, #24305c 100%);
    --sombra-cartao: 0 1px 2px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.25);
    --raio: 22px;
}
html.tema-claro {
    --acento: #3d63ea; --acento-escuro: #2747c4; --acento-claro: #ecf0ff;
    --bg: #e9ebf0; --tela: #f5f6f9; --cartao: #ffffff; --cartao-borda: rgba(16,24,40,.05);
    --pilula: #14151a; --pilula-texto: #ffffff;
    --lavanda: #8b7cf6; --lavanda-claro: #efecff;
    --heroi: linear-gradient(115deg, #ddd6fe 0%, #d9e2ff 55%, #e6ecff 100%);
    --texto: #15171c; --texto-muted: #6b7180;
    --linha: rgba(16,24,40,.08); --input-bg: #f3f4f7; --solido: #ffffff;
    --sombra-cartao: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.06);
}
body { font-family: var(--font); letter-spacing: -.005em; background: var(--bg); }
body::before { display: none; }
h1, h2, h3, .kpi b { letter-spacing: -.02em; }

/* ---------- moldura: tela arredondada sobre fundo cinzento ---------- */
.portal { grid-template-columns: var(--lateral-w) minmax(0, 1fr); padding: 14px 14px 14px 0; gap: 0; }
.principal { background: var(--tela); border-radius: 30px; min-height: calc(100vh - 28px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; }

/* ---------- barra lateral: cápsula escura só com ícones ---------- */
.lateral, html.tema-claro .lateral {
    position: sticky; top: 14px; height: calc(100vh - 28px); margin: 0 14px 0 14px; width: 68px; border-radius: 34px;
    background: #121318; color: #fff; border: none; box-shadow: 0 18px 40px rgba(16,24,40,.22); overflow: visible; align-items: center; padding: 14px 0;
}
.marca, html.tema-claro .marca { border: none; padding: 4px 0 14px; justify-content: center; }
.marca > div:not(.logo) { display: none; }
.marca .logo { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #121318; font-size: 1.05rem; }
.menu { padding: 6px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; overflow-y: auto; overflow-x: visible; scrollbar-width: none; width: 100%; }
.menu::-webkit-scrollbar { display: none; }
.menu .grupo { display: none; }
@media (min-width: 861px) {
    html[data-visual="v18"] .menu .axg-cab { display: none !important; }
    html[data-visual="v18"] .menu .axg > .axg-itens { display: flex !important; flex-direction: column; align-items: center; gap: 6px; }
    html[data-visual="v18"] .menu .axg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 8px; margin-top: 2px; border-top: 1px solid rgba(255,255,255,.08); width: 40px; }
}
.menu button, html.tema-claro .menu button {
    position: relative; width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 50%; justify-content: center; color: rgba(255,255,255,.62); opacity: 1;
    background: transparent; transition: background .18s, color .18s, transform .18s;
}
.menu button > span:not(.contador) { display: none; }
#v18Dica { position: fixed; z-index: 300; pointer-events: none; opacity: 0; transform: translate(-4px, -50%); background: #121318; color: #fff; padding: 6px 11px; border-radius: 10px;
    font-size: .78rem; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: opacity .12s, transform .12s; }
#v18Dica.ver { opacity: 1; transform: translate(0, -50%); }
.menu button:hover { background: rgba(255,255,255,.08); color: #fff; }
.menu button.ativo, html.tema-claro .menu button.ativo { background: #d9d3ff; color: #121318; box-shadow: 0 0 0 4px rgba(217,211,255,.12); }
.menu button.ativo::after { content: ''; position: absolute; right: -18px; width: 7px; height: 18px; border-radius: 0 6px 6px 0; background: #121318; }
.menu .contador { position: absolute; top: -2px; right: -4px; margin: 0; min-width: 18px; padding: 0 5px; font-size: .62rem; line-height: 18px; background: #ff6b4a; }
.lateral-rodape, html.tema-claro .lateral-rodape { border: none; flex-direction: column; padding: 8px 0 2px; gap: 6px; }
.lateral .btn-icone { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: none; color: rgba(255,255,255,.6); }
.lateral .btn-icone:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---------- topo ---------- */
.topo, html.tema-claro .topo { background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; height: 76px; padding: 0 30px; position: static; }
.topo h1 { font-size: 1.55rem; font-weight: 650; }
.topo .relogio { background: var(--cartao); border: none; border-radius: 999px; padding: 8px 14px; box-shadow: var(--sombra-cartao); font-weight: 650; }
.topo .btn-icone { width: 40px; height: 40px; border-radius: 50%; background: var(--cartao); border: none; box-shadow: var(--sombra-cartao); }
.chip-user { background: var(--cartao); border: none; box-shadow: var(--sombra-cartao); }
.chip-user .avatar { background: linear-gradient(135deg, #a79bff, #6f8bff); }
.conteudo { padding: 4px 30px 30px; }

/* ---------- cartões ---------- */
.vidro { background: var(--cartao); border: 1px solid var(--cartao-borda); box-shadow: var(--sombra-cartao); backdrop-filter: none; -webkit-backdrop-filter: none; }
.card { border-radius: var(--raio); padding: 20px 22px; }
.card > h3 { font-size: 1.02rem; font-weight: 650; }
.kpi { border-radius: var(--raio); padding: 16px 18px; transition: transform .2s ease, box-shadow .2s ease; }
.kpi:hover, .card.levanta:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 18px 40px rgba(16,24,40,.10); }
.kpi span { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 550; display: flex; align-items: center; gap: 8px; }
.kpi span .ico { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--lavanda-claro); color: var(--lavanda); font-size: .8rem; flex: 0 0 28px; }
.kpi b { font-size: clamp(1.15rem, 1.6vw, 1.75rem); font-weight: 650; margin-top: 10px; white-space: nowrap; }
.kpi small { display: block; margin-top: 4px; font-size: .76rem; }
.kpi i.fundo { display: none; }
.cabecalho h2 { font-size: 1.7rem; font-weight: 650; }
.cabecalho p { font-size: .9rem; }

/* ---------- botões em pílula ---------- */
.btn { border-radius: 999px; font-weight: 600; }
.btn-principal { background: var(--pilula); color: var(--pilula-texto); box-shadow: 0 6px 16px rgba(16,24,40,.16); }
.btn-principal:hover:not(:disabled) { box-shadow: 0 10px 22px rgba(16,24,40,.22); }
.btn-sec { background: var(--cartao); border: 1px solid var(--linha); }
.btn-sm { border-radius: 999px; }
.etq { border-radius: 999px; font-weight: 650; padding: 4px 10px; }
.etq.azul { background: var(--acento-claro); color: var(--acento); }

/* ---------- campos, tabelas, separadores ---------- */
.campo input, .campo select, .campo textarea, .entrada { border-radius: 12px; background: var(--input-bg); border-color: transparent; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus { background: var(--cartao); border-color: var(--acento); }
.tabela th { color: var(--texto-muted); font-weight: 600; text-transform: none; font-size: .76rem; letter-spacing: 0; border-bottom: 1px solid var(--linha); }
.tabela td { border-bottom: 1px solid var(--linha); }
.tabela tbody tr:hover { background: var(--input-bg); }
.separadores { border: none; gap: 4px; background: var(--input-bg); padding: 4px; border-radius: 999px; display: inline-flex; flex-wrap: wrap; }
.separadores button { border: none; border-radius: 999px; padding: 7px 14px; margin: 0; font-weight: 600; }
.separadores button.ativo { background: var(--pilula); color: var(--pilula-texto); }
.lista-simples > div { background: var(--input-bg); border-radius: 14px; padding: 10px 12px; }

/* ---------- janelas ---------- */
.modal { background: var(--cartao); border: none; border-radius: 26px; box-shadow: 0 30px 80px rgba(16,24,40,.25); }
.modal-fundo { background: rgba(20,22,30,.38); backdrop-filter: blur(6px); }

/* ---------- gráfico de barras em cápsula ---------- */
.barras { gap: 10px; height: 170px; }
.barras .b .col { max-width: 30px; border-radius: 999px; background: linear-gradient(180deg, #a79bff, #6f8bff); position: relative; }
.barras .b { position: relative; }
.barras .b::before { content: ''; position: absolute; bottom: 20px; top: 26px; width: min(30px, 100%); border-radius: 999px; background: var(--input-bg); z-index: 0; }
.barras .b > * { position: relative; z-index: 1; }
.barras .b .v { background: var(--pilula); color: var(--pilula-texto); border-radius: 999px; padding: 1px 6px; font-weight: 600; }

/* ---------- painel: faixa de boas-vindas e calendário ---------- */
.v18-grelha { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.v18-heroi { position: relative; overflow: hidden; border-radius: 26px; padding: 26px 28px; background: var(--heroi); margin-bottom: 18px; min-height: 150px; }
.v18-heroi h2 { font-size: 1.65rem; font-weight: 650; margin: 0; max-width: 560px; }
.v18-heroi h2 span { color: #6b5cf0; }
html:not(.tema-claro) .v18-heroi h2 span { color: #c4bcff; }
.v18-heroi p { margin: 8px 0 16px; color: var(--texto-muted); max-width: 520px; font-size: .92rem; }
.v18-heroi .acoes { position: relative; z-index: 1; }
.v18-flor { position: absolute; right: -30px; top: -40px; width: 260px; height: 260px; pointer-events: none; opacity: .95; }
.v18-lado .card { margin-bottom: 18px; }
.v18-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.v18-cal small { font-size: .7rem; color: var(--texto-muted); font-weight: 600; padding-bottom: 4px; }
.v18-cal span { font-size: .82rem; font-weight: 600; padding: 7px 0; border-radius: 999px; }
.v18-cal span.fora { opacity: .3; }
.v18-cal span.hoje { background: var(--pilula); color: var(--pilula-texto); }
.v18-cal span.com { position: relative; } .v18-cal span.com::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--lavanda); }
.v18-mini { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.v18-mini:last-child { border: none; }
.v18-mini .ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--lavanda-claro); color: var(--lavanda); flex: 0 0 38px; }
.v18-mini div { flex: 1; min-width: 0; } .v18-mini b { display: block; font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v18-mini small { color: var(--texto-muted); font-size: .74rem; }
.v18-prog { height: 6px; border-radius: 999px; background: var(--input-bg); overflow: hidden; margin-top: 6px; } .v18-prog i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a79bff, #6f8bff); }
.v18-escuro { background: #121318 !important; color: #fff; border: none !important; }
.v18-escuro .muted, .v18-escuro small { color: rgba(255,255,255,.62) !important; }

/* ---------- telemóvel: a cápsula vira gaveta com os nomes ---------- */
@media (max-width: 1180px) { .v18-grelha { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
    .portal { padding: 0; grid-template-columns: 1fr; }
    .principal { border-radius: 0; min-height: 100vh; }
    .lateral, html.tema-claro .lateral { position: fixed; top: 10px; left: 0; height: calc(100vh - 20px); width: min(270px, 84vw); margin: 0 10px; border-radius: 26px; align-items: stretch; padding: 14px 10px; transform: translateX(-110%); background: #121318; }
    body.menu-aberto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
    .marca { justify-content: flex-start; padding: 4px 8px 14px; } .marca > div:not(.logo) { display: block; color: #fff; }
    .menu { align-items: stretch; } .menu .grupo { display: block; color: rgba(255,255,255,.45); }
    .menu button, html.tema-claro .menu button { width: 100%; height: auto; border-radius: 14px; justify-content: flex-start; padding: 10px 12px; gap: 12px; }
    .menu button > span:not(.contador) { display: inline; font-size: .9rem; }
    #v18Dica { display: none; }
    .menu button.ativo::after { display: none; } .menu .contador { position: static; margin-left: auto; }
    .lateral-rodape { flex-direction: row; justify-content: center; }
    .topo, html.tema-claro .topo { height: 64px; padding: 0 14px; } .topo h1 { font-size: 1.2rem; }
    .conteudo { padding: 4px 14px 24px; }
    .v18-heroi { padding: 20px; } .v18-heroi h2 { font-size: 1.3rem; } .v18-flor { width: 170px; height: 170px; right: -40px; top: -30px; opacity: .55; }
}
@media print { .portal { padding: 0; } .principal { background: #fff; border-radius: 0; } }
/* um só título por página: no computador fica o do conteúdo; no telemóvel o da barra de cima */
@media (min-width: 861px) { .topo h1 { visibility: hidden; } }
@media (max-width: 860px) { .secao > .cabecalho h2 { display: none; } .secao > .cabecalho { margin-bottom: 10px; } }