/* Lexgrafo · design system: marinho profundo + dourado, serifada de display, claro/escuro */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
:root {
  --marinho: #1F2A44; --marinho-2: #151E36; --marinho-3: #0F1628; --dourado: #9C7A3C; --dourado-claro: #CBA25B; --dourado-suave: #F3ECDD; --creme: #F6F3EC;
  --fundo: #F6F3EC; --superficie: #FFFFFF; --superficie-2: #FBF9F4; --borda: #E7E1D4; --borda-forte: #D6CDB8; --texto: #1B2130; --texto-2: #4A5164; --texto-3: #7A8194;
  --primaria: var(--marinho); --destaque: var(--dourado); --sombra: 0 10px 30px -14px rgba(31,42,68,.22), 0 2px 6px -2px rgba(31,42,68,.08);
  --verde: #5E8C61; --vermelho: #A24B4B; --ambar: #C9A24B; --azul: #5B7B9C; --roxo: #8E6B9C;
  --raio: 16px; --raio-p: 10px; --fonte: 'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif; --fonte-titulo: 'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif;
  --lateral: 248px; --topo: 64px; --nav-texto: #E9E2D0; --nav-ativo: var(--dourado-claro);
}
:root[data-tema="escuro"] {
  --fundo: #0E1320; --superficie: #161D2F; --superficie-2: #1B2338; --borda: #263048; --borda-forte: #35405C; --texto: #ECE6D8; --texto-2: #B9B3A4; --texto-3: #838B9F; --dourado-suave: #2A2A22; --creme: #161D2F;
  --sombra: 0 10px 30px -14px rgba(0,0,0,.6);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--fonte); color: var(--texto); background: var(--fundo); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 700; margin: 0; letter-spacing: -.01em; line-height: 1.2; }
h1 { letter-spacing: -.02em; }
h1 { font-size: 34px; } h2 { font-size: 26px; } h3 { font-size: 20px; } h4 { font-size: 17px; }
.serif { font-family: var(--fonte-titulo); font-weight: 700; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.mudo { color: var(--texto-3); } .suave { color: var(--texto-2); } .pequeno { font-size: 12px; } .menor { font-size: 11px; } .negrito { font-weight: 600; }
.dourado { color: var(--dourado); } .verde { color: var(--verde); } .vermelho { color: var(--vermelho); } .ambar { color: var(--ambar); }
.filete { height: 2px; width: 48px; background: linear-gradient(90deg, var(--dourado), var(--dourado-claro)); border-radius: 2px; margin: 8px 0 16px; }
.oculto { display: none !important; }
/* layout */
#app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; } #app.modo-login { grid-template-columns: 1fr; }
.lateral { background: linear-gradient(180deg, var(--marinho) 0%, var(--marinho-2) 60%, var(--marinho-3) 100%); color: var(--nav-texto); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden auto; border-right: 1px solid rgba(203,162,91,.18); }
.marca { padding: 24px 20px 16px; display: flex; justify-content: center; align-items: center; }
.marca .marca-logo { width: 84%; max-width: 182px; height: auto; object-fit: contain; filter: drop-shadow(0 3px 12px rgba(0,0,0,.28)); }
.marca .logo { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--dourado), var(--dourado-claro)); display: grid; place-items: center; color: var(--marinho-3); font-family: var(--fonte-titulo); font-weight: 700; font-size: 22px; box-shadow: 0 6px 18px -6px rgba(203,162,91,.7); }
.marca .marca-nome { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.marca .marca-sub { font-size: 10px; color: var(--dourado-claro); letter-spacing: .16em; text-transform: uppercase; margin-top: 2px; }
.login-logo { max-width: 260px; width: 70%; height: auto; margin-bottom: 8px; }
.marca .nome { font-family: var(--fonte-titulo); font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.marca .sub { font-size: 11px; color: var(--dourado-claro); letter-spacing: .14em; text-transform: uppercase; }
.nav { padding: 6px 12px 20px; display: flex; flex-direction: column; gap: 2px; }
.nav .grupo { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(233,226,208,.5); padding: 14px 12px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--nav-texto); font-weight: 500; font-size: 13.5px; transition: background .15s, color .15s; }
.nav a .ic { width: 20px; text-align: center; opacity: .9; font-size: 15px; }
.nav a:hover { background: rgba(255,255,255,.06); }
.nav a.ativo { background: linear-gradient(90deg, rgba(203,162,91,.22), rgba(203,162,91,.06)); color: var(--nav-ativo); box-shadow: inset 3px 0 0 var(--dourado-claro); }
.nav a.destaque { color: var(--nav-ativo); font-weight: 700; border: 1px solid rgba(203,162,91,.35); background: rgba(203,162,91,.08); }
.nav a.destaque .ic { opacity: 1; color: var(--dourado-claro); }
.nav a.destaque.ativo { border-color: transparent; }
.nav a .badge { margin-left: auto; background: var(--dourado); color: var(--marinho-3); font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; }
.lateral .rodape { margin-top: auto; padding: 14px 16px 18px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.topo { height: var(--topo); display: flex; align-items: center; gap: 14px; padding: 0 28px; background: color-mix(in srgb, var(--superficie) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 20; }
.topo .busca { flex: 1; max-width: 520px; position: relative; }
.topo .busca input { width: 100%; padding: 10px 14px 10px 38px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie-2); font: inherit; color: var(--texto); }
.topo .busca .lupa { position: absolute; left: 12px; top: 9px; color: var(--texto-3); }
.topo .busca .resultados { position: absolute; top: 44px; left: 0; right: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra); max-height: 420px; overflow: auto; z-index: 50; }
.topo .busca .resultados a { display: flex; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--borda); align-items: center; }
.topo .busca .resultados a:hover { background: var(--superficie-2); }
.topo .espaco { flex: 1; }
.conteudo { padding: 26px 28px 60px; max-width: 1500px; width: 100%; }
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.cabecalho .sobretitulo { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dourado); font-weight: 600; margin-bottom: 4px; }
.cabecalho .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas a, .abas button { padding: 10px 14px; border: 0; background: none; font: inherit; font-weight: 500; color: var(--texto-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas .ativo { color: var(--marinho); border-bottom-color: var(--dourado); font-weight: 600; }
:root[data-tema="escuro"] .abas .ativo { color: var(--dourado-claro); }
/* cartões e grids */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; }
.cartao.compacto { padding: 14px 16px; }
.cartao h3 { margin-bottom: 10px; }
.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.kpi::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--dourado), transparent); }
.kpi .rotulo { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; }
.kpi .valor { font-family: var(--fonte-titulo); font-size: 32px; font-weight: 700; color: var(--marinho); line-height: 1.1; margin-top: 6px; }
:root[data-tema="escuro"] .kpi .valor { color: var(--dourado-claro); }
.kpi .detalhe { font-size: 12px; color: var(--texto-2); margin-top: 4px; }
.kpi.alerta::after { background: linear-gradient(90deg, var(--vermelho), transparent); }
/* botões */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.btn:hover { border-color: var(--dourado); color: var(--dourado); }
.btn.primario { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.btn.primario:hover { background: var(--marinho-2); color: var(--dourado-claro); }
.btn.dourado { background: linear-gradient(135deg, var(--dourado), var(--dourado-claro)); border-color: transparent; color: var(--marinho-3); }
.btn.dourado:hover { filter: brightness(1.05); color: var(--marinho-3); }
.btn.perigo { color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 40%, var(--borda)); } .btn.perigo:hover { background: var(--vermelho); color: #fff; }
.btn.fantasma { border-color: transparent; background: transparent; } .btn.fantasma:hover { background: var(--superficie-2); }
.btn.pequeno { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn.icone { padding: 7px 9px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* formulários */
.form { display: grid; gap: 14px; }
.form.c2 { grid-template-columns: 1fr 1fr; } .form.c3 { grid-template-columns: 1fr 1fr 1fr; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo.largo { grid-column: 1 / -1; }
.campo label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--texto-2); text-transform: uppercase; }
.campo label .ob { color: var(--vermelho); }
.campo .ajuda { font-size: 11.5px; color: var(--texto-3); }
input, select, textarea { font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio-p); padding: 9px 12px; width: 100%; min-width: 0; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--dourado); box-shadow: 0 0 0 3px rgba(156,122,60,.15); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--dourado); }
input[type=color] { padding: 2px; height: 38px; width: 56px; }
textarea { min-height: 90px; resize: vertical; }
.caixa-check { display: flex; align-items: center; gap: 8px; padding: 9px 0; font-weight: 500; }
.rich { min-height: 120px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); padding: 10px 12px; background: var(--superficie); }
.rich:focus { outline: none; border-color: var(--dourado); }
.rich-barra { display: flex; gap: 4px; margin-bottom: 6px; } .rich-barra button { border: 1px solid var(--borda); background: var(--superficie-2); border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; color: var(--texto-2); }
/* seletor de nós (busca) */
.seletor { position: relative; }
.seletor .fichas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ficha { display: inline-flex; align-items: center; gap: 6px; background: var(--dourado-suave); border: 1px solid var(--borda); color: var(--texto); border-radius: 99px; padding: 3px 10px; font-size: 12.5px; }
.ficha button { border: 0; background: none; cursor: pointer; color: var(--texto-3); font-size: 14px; padding: 0; line-height: 1; }
.seletor .lista { position: absolute; z-index: 40; left: 0; right: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra); max-height: 260px; overflow: auto; }
.seletor .lista div { padding: 8px 12px; cursor: pointer; display: flex; gap: 8px; align-items: center; } .seletor .lista div:hover, .seletor .lista div.foco { background: var(--superficie-2); }
/* tabela */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--borda); background: var(--superficie-2); white-space: nowrap; }
.tabela td { padding: 11px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr { cursor: pointer; transition: background .12s; } .tabela tbody tr:hover { background: var(--superficie-2); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela th.ordenavel { cursor: pointer; } .tabela th.ordenavel:hover { color: var(--dourado); }
/* etiquetas, avatares, selos */
.etq { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; color: #fff; background: var(--dourado); letter-spacing: .02em; }
.etq.contorno { background: transparent; border: 1px solid currentColor; }
.selo { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); }
.selo.verde { background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde); border-color: transparent; }
.selo.vermelho { background: color-mix(in srgb, var(--vermelho) 14%, transparent); color: var(--vermelho); border-color: transparent; }
.selo.ambar { background: color-mix(in srgb, var(--ambar) 18%, transparent); color: #8a6a1e; border-color: transparent; }
.selo.azul { background: color-mix(in srgb, var(--azul) 16%, transparent); color: var(--azul); border-color: transparent; }
.selo.dourado { background: var(--dourado-suave); color: var(--dourado); border-color: transparent; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--marinho); border: 2px solid var(--superficie); }
.avatares { display: inline-flex; } .avatares .avatar { margin-left: -8px; } .avatares .avatar:first-child { margin-left: 0; }
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dourado); }
/* modal, toast, menu */
.modal-fundo { position: fixed; inset: 0; background: rgba(15,22,40,.55); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 1400; padding: 20px; animation: aparecer .15s ease; }
.modal { background: var(--superficie); border-radius: 20px; width: min(760px, 100%); max-height: 92vh; overflow: auto; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); border: 1px solid var(--borda); animation: subir .18s ease; }
.modal.largo { width: min(1100px, 100%); } .modal.estreito { width: min(460px, 100%); }
/* flutuante (arrastável): sem escurecer nem bloquear o fundo, pra ler/copiar da conversa; card menor e movível pelo cabeçalho */
.modal-fundo.arrastavel { background: transparent; backdrop-filter: none; pointer-events: none; place-items: center; padding: 12px; }
.modal-fundo.arrastavel .modal { pointer-events: auto; }
.modal.flutuante { width: min(430px, 94vw); max-height: 84vh; box-shadow: 0 26px 64px -18px rgba(0,0,0,.62); }
.modal.flutuante .modal-cab { cursor: move; user-select: none; touch-action: none; }
.modal.flutuante .modal-cab h3 { font-size: 15px; }
.modal.flutuante .modal-corpo { padding: 14px 18px; } .modal.flutuante .modal-pe { padding: 12px 18px 16px; }
.modal.flutuante .form.c2 { gap: 8px 10px; }
.modal .modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--superficie); z-index: 2; }
.modal .modal-corpo { padding: 20px 24px; } .modal .modal-pe { padding: 14px 24px 20px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--borda); position: sticky; bottom: 0; background: var(--superficie); }
.modal .fechar { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--texto-3); }
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } } @keyframes subir { from { transform: translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--marinho); color: #fff; padding: 11px 16px; border-radius: 12px; box-shadow: var(--sombra); font-size: 13px; border-left: 3px solid var(--dourado-claro); animation: subir .2s ease; max-width: 380px; }
.toast.erro { border-left-color: #E27D7D; } .toast.ok { border-left-color: #8FC79A; }
.menu-flut { position: absolute; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra); padding: 6px; z-index: 60; min-width: 220px; }
.menu-flut .titulo { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); padding: 8px 10px 4px; }
.menu-flut button, .menu-flut a { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; font: inherit; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--texto); }
.menu-flut button:hover, .menu-flut a:hover { background: var(--superficie-2); color: var(--dourado); }
/* util */
.linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .linha.entre { justify-content: space-between; } .linha.topo-alinhado { align-items: flex-start; }
.coluna { display: flex; flex-direction: column; gap: 8px; }
.vazio { text-align: center; color: var(--texto-3); padding: 40px 20px; font-style: italic; font-family: var(--fonte-titulo); font-size: 18px; }
.carregando { text-align: center; padding: 40px; color: var(--texto-3); }
.carregando::after { content: ''; display: block; width: 26px; height: 26px; margin: 10px auto 0; border-radius: 50%; border: 2px solid var(--borda-forte); border-top-color: var(--dourado); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg) } }
.mini-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .6s linear infinite; vertical-align: -1px; margin-right: 5px; }
button.enviando { opacity: .85; cursor: progress; }
.barra { height: 8px; background: var(--superficie-2); border-radius: 99px; overflow: hidden; border: 1px solid var(--borda); } .barra > div { height: 100%; background: linear-gradient(90deg, var(--dourado), var(--dourado-claro)); }
.pilula-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--borda-forte); background: var(--superficie); font-size: 12.5px; cursor: pointer; } .pilula-filtro.ativa { background: var(--marinho); color: #fff; border-color: var(--marinho); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .filtros input, .filtros select { width: auto; min-width: 140px; padding: 7px 10px; }
.paginacao { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: 12.5px; color: var(--texto-2); }
.timeline { position: relative; padding-left: 22px; } .timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--borda-forte); }
.timeline .item { position: relative; padding: 0 0 18px; } .timeline .item::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--dourado); border: 2px solid var(--superficie); box-shadow: 0 0 0 2px var(--dourado-suave); }
.timeline .dia { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 700; color: var(--marinho); margin: 10px 0 6px; } :root[data-tema="escuro"] .timeline .dia { color: var(--dourado-claro); }
.link { color: var(--dourado); cursor: pointer; font-weight: 500; } .link:hover { text-decoration: underline; }
.prose p { margin: 0 0 8px; }
/* login */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login .lado { background: radial-gradient(1200px 600px at 20% 10%, rgba(203,162,91,.25), transparent 60%), linear-gradient(160deg, var(--marinho) 0%, var(--marinho-3) 100%); color: #fff; padding: 60px; display: flex; flex-direction: column; justify-content: space-between; }
.login .lado h1 { font-size: clamp(32px, 4vw, 52px); color: #fff; max-width: 520px; } .login .lado h1 em { color: var(--dourado-claro); font-style: italic; }
.login .lado p { color: rgba(255,255,255,.7); max-width: 460px; font-size: 15px; }
.login .form-lado { display: grid; place-items: center; padding: 40px; background: var(--fundo); }
.login .cartao { width: 420px; max-width: 100%; justify-self: center; padding: 36px; }
.login .cartao h2 { margin-bottom: 4px; }
@media (max-width: 1000px) {
  #app { grid-template-columns: 1fr; } .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, var(--lateral)); transform: translateX(-100%); transition: transform .2s; z-index: 90; padding-top: env(safe-area-inset-top); }
  .lateral.aberta { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.45); }
  /* scrim: escurece o conteúdo e dá alvo pra fechar tocando fora (o clique cai no .principal, fechado via JS) */
  .lateral.aberta + .principal::before { content: ''; position: fixed; inset: 0; background: rgba(8,12,22,.5); z-index: 80; }
  .topo { height: auto; min-height: var(--topo); padding: env(safe-area-inset-top) 12px 0; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 10px; }
  .topo .busca input { padding: 9px 12px 9px 34px; }
  .conteudo { padding: 16px 14px calc(60px + env(safe-area-inset-bottom)); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .grid.c2, .grid.c3, .grid.c4, .grid.c6 { grid-template-columns: 1fr 1fr; } .form.c2, .form.c3 { grid-template-columns: 1fr; } .login { grid-template-columns: 1fr; } .login .lado { display: none; }
  .btn-menu { display: inline-flex !important; }
  /* nunca deixar a página rolar de lado no celular; conteúdo largo rola dentro do próprio wrap (.tabela-wrap, .abas) */
  html, body { overflow-x: hidden; }
}
@media (max-width: 560px) {
  .grid.c2, .grid.c3, .grid.c4, .grid.c6 { grid-template-columns: 1fr; }
  .cabecalho { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cabecalho .acoes { width: 100%; flex-wrap: wrap; }
  .topo .busca { max-width: none; }
  h1 { font-size: 1.4rem; }
  .btn { padding: 9px 12px; } .modal, .modal-corpo { max-width: 100vw; }
}
.btn-menu { display: none; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 99px; border: 2px solid var(--fundo); }
@media print { .lateral, .topo, .btn, .acoes { display: none !important; } #app { grid-template-columns: 1fr; } .cartao { box-shadow: none; } }

/* botão da IA vendedora no inbox */
.ib-ia-btn { font-weight: 600; border: 1px solid var(--borda); white-space: nowrap; transition: all .15s; }
.ib-ia-btn.ligado { background: rgba(107,142,107,.14); color: #3f7a45; border-color: rgba(107,142,107,.4); }
.ib-ia-btn.desligado { background: rgba(140,75,75,.1); color: #9a4b4b; border-color: rgba(140,75,75,.35); }
:root[data-tema="escuro"] .ib-ia-btn.ligado { color: #8fce95; }
:root[data-tema="escuro"] .ib-ia-btn.desligado { color: #d98a8a; }

/* Panorama 360 do cliente + conversas */
.p360-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.p360-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie-2); text-decoration: none; color: var(--texto); position: relative; overflow: hidden; transition: transform .12s, box-shadow .12s, border-color .12s; }
.p360-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.p360-card[href]:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--c); }
.p360-ic { font-size: 18px; } .p360-n { font-size: 22px; font-weight: 700; font-family: var(--fonte-titulo); line-height: 1; }
.p360-r { font-size: 11.5px; color: var(--texto-3); letter-spacing: .02em; }
.link-conversa { display: block; padding: 12px 16px; border-bottom: 1px solid var(--borda); text-decoration: none; color: var(--texto); transition: background .12s; }
.link-conversa:hover { background: var(--superficie-2); }
.link-conversa .lc-topo { display: flex; align-items: center; gap: 8px; }
.link-conversa .bd { margin-left: auto; background: var(--dourado); color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; }

/* botões: um toque mais confortável e responsivo */
.btn { transition: transform .1s, box-shadow .12s, background .12s, border-color .12s; }
.btn:not(:disabled):active { transform: translateY(1px); }
.btn.primario:not(:disabled):hover { box-shadow: 0 6px 16px -6px rgba(31,42,68,.5); }
.btn.dourado:not(:disabled):hover { box-shadow: 0 6px 16px -6px rgba(203,162,91,.6); }
.ib-aba-fixa { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; background: rgba(203,162,91,.14); border: 1px solid rgba(203,162,91,.35); color: var(--texto); font-weight: 700; font-size: 13px; }
.ib-aba-fixa .bd { background: var(--dourado); color: #fff; border-radius: 8px; padding: 0 6px; font-size: 11px; }

/* Menu em sanfona */
.nav-grupo { display: flex; flex-direction: column; margin-top: 6px; }
.grupo-titulo { color: rgba(233,226,208,.5); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; padding: 9px 12px 5px; }
.grupo-itens { display: flex; flex-direction: column; gap: 2px; }

/* "Ver como": aviso de que a administradora está vendo a visão de um colaborador */
.preview-faixa { background: linear-gradient(90deg, var(--dourado), var(--dourado-claro)); color: var(--marinho-3); font-size: 13px; font-weight: 700; padding: 8px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; box-shadow: 0 2px 8px -2px rgba(0,0,0,.2); }
.preview-faixa b { font-weight: 800; }
.preview-faixa .btn { margin-left: auto; background: var(--marinho-3); color: #fff; border: 0; }
.preview-faixa .btn:hover { background: var(--marinho); }