/* NAFIA · Painel do cliente
   Layout: barra lateral escura com a marca + área de trabalho clara; no celular, barra no topo e abas embaixo.
   Cor: tinta NAFIA, papel claro levemente quente, ouro só para ação e destaque; dados em uma rampa de azul. */
:root {
  --papel: #F3F2EE;
  --cartao: #FDFDFB;
  --cartao-2: #F4F3EE;
  --cartao-3: #EAE8E1;
  --tinta: #15171B;
  --tinta-2: #464B54;
  --tinta-3: #6C717A;
  --linha: #E2E0D8;
  --linha-2: #CDCAC0;
  --ouro: #F2B33D;
  --ouro-forte: #E3A126;
  --ouro-tinta: #8A5D06;
  --ouro-fundo: #FBEFD2;
  --lateral: #15171B;
  --lateral-2: #20232A;
  --lateral-linha: #2A2E35;
  --lateral-tinta: #F2F1EC;
  --lateral-tinta-2: #A7AAB1;
  --bom: #0CA30C;
  --bom-texto: #006300;
  --bom-fundo: #E2F3DF;
  --aviso: #FAB219;
  --aviso-fundo: #FDF0CE;
  --aviso-borda: #EBC25E;
  --aviso-texto: #664600;
  --serio: #EC835A;
  --serio-fundo: #FBE5DA;
  --serio-texto: #8A3A18;
  --critico: #D03B3B;
  --critico-fundo: #FBE2DF;
  --ruim-texto: #B42318;
  --info: #2A78D6;
  --info-fundo: #E2EDFA;
  --info-texto: #1C5CAB;
  --equipe-fundo: #ECE9FB;
  --equipe-texto: #4A3AA7;
  --s-total: #86B6EF;
  --s-venda: #1C5CAB;
  --f1: #86B6EF;
  --f2: #5598E7;
  --f3: #2A78D6;
  --f4: #1C5CAB;
  --f5: #104281;
  --h0: #ECEBE5;
  --h1: #CDE2FB;
  --h2: #9EC5F4;
  --h3: #5598E7;
  --h4: #256ABF;
  --h5: #104281;
  --grade: #E8E6DF;
  --eixo: #C6C3B9;
  --bolha-cliente: #FFFFFF;
  --bolha-agente: #E4EEFA;
  --bolha-humano: #FAEDCB;
  --fundo-modal: rgba(12, 13, 16, 0.5);
  --sombra: 0 1px 2px rgba(21, 23, 27, 0.05), 0 8px 24px -12px rgba(21, 23, 27, 0.14);
  --sombra-alta: 0 18px 48px -14px rgba(21, 23, 27, 0.32);
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-titulo: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --raio: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0F1115; --cartao: #171A1F; --cartao-2: #1D2026; --cartao-3: #262A31; --tinta: #F2F1EC; --tinta-2: #BABCC2;
    --tinta-3: #8D9199; --linha: #2A2E35; --linha-2: #3A3F47; --ouro: #F2B33D; --ouro-forte: #F6C35F; --ouro-tinta: #F2B33D;
    --ouro-fundo: #352A12; --lateral: #0A0B0E; --lateral-2: #17191E; --lateral-linha: #23262C; --lateral-tinta: #F2F1EC;
    --lateral-tinta-2: #9A9DA4; --bom-texto: #3FC43F; --bom-fundo: #12301A; --aviso-fundo: #372B0F; --aviso-borda: #6B5114;
    --aviso-texto: #F5C75F; --serio-fundo: #3A2218; --serio-texto: #F2A584; --critico-fundo: #3A1A1A; --ruim-texto: #F97066;
    --info-fundo: #142740; --info-texto: #8DBBF1; --equipe-fundo: #221E40; --equipe-texto: #B9B0F4; --s-total: #184F95;
    --s-venda: #6DA7EC; --f1: #184F95; --f2: #256ABF; --f3: #3987E5; --f4: #6DA7EC; --f5: #9EC5F4; --h0: #1E2228; --h1: #0D366B;
    --h2: #184F95; --h3: #2A78D6; --h4: #5598E7; --h5: #9EC5F4; --grade: #24282E; --eixo: #3B4048; --bolha-cliente: #22262C;
    --bolha-agente: #15283F; --bolha-humano: #33290F; --fundo-modal: rgba(0, 0, 0, 0.6);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6); --sombra-alta: 0 18px 48px -14px rgba(0, 0, 0, 0.75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0F1115; --cartao: #171A1F; --cartao-2: #1D2026; --cartao-3: #262A31; --tinta: #F2F1EC; --tinta-2: #BABCC2;
  --tinta-3: #8D9199; --linha: #2A2E35; --linha-2: #3A3F47; --ouro: #F2B33D; --ouro-forte: #F6C35F; --ouro-tinta: #F2B33D;
  --ouro-fundo: #352A12; --lateral: #0A0B0E; --lateral-2: #17191E; --lateral-linha: #23262C; --lateral-tinta: #F2F1EC;
  --lateral-tinta-2: #9A9DA4; --bom-texto: #3FC43F; --bom-fundo: #12301A; --aviso-fundo: #372B0F; --aviso-borda: #6B5114;
  --aviso-texto: #F5C75F; --serio-fundo: #3A2218; --serio-texto: #F2A584; --critico-fundo: #3A1A1A; --ruim-texto: #F97066;
  --info-fundo: #142740; --info-texto: #8DBBF1; --equipe-fundo: #221E40; --equipe-texto: #B9B0F4; --s-total: #184F95;
  --s-venda: #6DA7EC; --f1: #184F95; --f2: #256ABF; --f3: #3987E5; --f4: #6DA7EC; --f5: #9EC5F4; --h0: #1E2228; --h1: #0D366B;
  --h2: #184F95; --h3: #2A78D6; --h4: #5598E7; --h5: #9EC5F4; --grade: #24282E; --eixo: #3B4048; --bolha-cliente: #22262C;
  --bolha-agente: #15283F; --bolha-humano: #33290F; --fundo-modal: rgba(0, 0, 0, 0.6);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6); --sombra-alta: 0 18px 48px -14px rgba(0, 0, 0, 0.75);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 15px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; }
#raiz { min-height: 100%; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sub { color: var(--tinta-3); font-size: 13.5px; }
.selecionavel { user-select: all; font-weight: 600; color: var(--tinta-2); }
.icone { flex: none; }
.recarregando { opacity: 0.55; transition: opacity 0.2s; }

/* ---------- estrutura ---------- */
.app.largo { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.principal { min-width: 0; padding-block: 0 56px; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
.app.estreito .principal { padding-block: 0 calc(96px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.tela { display: flex; flex-direction: column; gap: 16px; padding-top: 22px; max-width: 1320px; margin: 0 auto; }
.tela.estreita { max-width: 920px; }
.inicial { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--tinta-2); }

.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--lateral); color: var(--lateral-tinta); display: flex; flex-direction: column; gap: 6px; padding: 20px 14px 14px; }
.lateral-marca { display: flex; align-items: center; gap: 12px; padding: 2px 8px 16px; }
.lateral-marca strong { display: block; font: 700 17px/1.1 var(--fonte-titulo); letter-spacing: 0.06em; }
.lateral-marca span span { display: block; font-size: 12px; color: var(--lateral-tinta-2); }
.lateral-empresa select { background: var(--lateral-2); color: var(--lateral-tinta); border: 1px solid var(--lateral-linha); margin-bottom: 10px; }
.lateral-empresa-nome { display: block; padding: 8px 10px; margin-bottom: 10px; border-radius: 10px; background: var(--lateral-2); color: var(--lateral-tinta-2); font-size: 13.5px; }
.lateral-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lateral-itens a { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; color: var(--lateral-tinta-2); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.lateral-itens a:hover { background: var(--lateral-2); color: var(--lateral-tinta); }
.lateral-itens a.ativo { background: var(--lateral-2); color: var(--lateral-tinta); }
.lateral-itens a.ativo::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ouro); }
.lateral-itens.secundarios { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lateral-linha); }
.contador { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--lateral-linha); color: var(--lateral-tinta); font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.contador.alerta { background: var(--ouro); color: #15171B; }
.lateral-rodape { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 6px 2px; border-top: 1px solid var(--lateral-linha); }
.lateral-usuario { display: flex; flex-direction: column; min-width: 0; }
.lateral-usuario strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-usuario span { font-size: 12px; color: var(--lateral-tinta-2); }
.lateral-botoes { display: flex; gap: 2px; }
.lateral .btn-icone { color: var(--lateral-tinta-2); }
.lateral .btn-icone:hover { background: var(--lateral-2); color: var(--lateral-tinta); }

body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--lateral); }
.topo-movel { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: flex; align-items: center; gap: 12px; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); background: var(--lateral); color: var(--lateral-tinta); }
.topo-empresa { flex: 1; min-width: 0; font: 600 15px/1.2 var(--fonte-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
select.topo-empresa { background: transparent; color: inherit; border: 0; padding: 4px 0; width: auto; }
.topo-movel .sino { color: var(--lateral-tinta); }
.topo-movel .sino .contador { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; font-size: 10.5px; background: var(--ouro); color: #15171B; }
.abas-movel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--cartao); border-top: 1px solid var(--linha); padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px)); padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
.abas-movel a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 0; color: var(--tinta-3); text-decoration: none; font-size: 11.5px; font-weight: 600; }
.abas-movel a.ativo { color: var(--tinta); }
.aba-icone { position: relative; width: 48px; height: 28px; border-radius: 99px; display: grid; place-items: center; }
.abas-movel a.ativo .aba-icone { background: var(--ouro-fundo); color: var(--ouro-tinta); }
.aba-icone .contador { position: absolute; top: -5px; right: 2px; min-width: 18px; height: 18px; font-size: 10.5px; }

.faixa-demo { max-width: 1320px; margin: 18px auto 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--ouro-fundo); color: var(--tinta); font-size: 14px; }
.faixa-demo-texto { display: flex; align-items: center; gap: 8px; color: var(--tinta); }
.faixa-demo-texto .icone { color: var(--ouro-tinta); }
.faixa-demo .segmentado { background: var(--cartao); }
.faixa-demo .segmentado button.ativo { background: var(--tinta); color: var(--cartao); }

/* ---------- cabeçalho, cartões, grades ---------- */
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
.cabecalho-texto { min-width: 0; }
.cabecalho h1 { margin: 0; font: 700 27px/1.2 var(--fonte-titulo); letter-spacing: -0.02em; }
.cabecalho .sub { margin-top: 4px; font-size: 14.5px; color: var(--tinta-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cabecalho-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.voltar { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px -6px; padding: 4px 8px 4px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--tinta-2); font-size: 14px; font-weight: 600; cursor: pointer; }
.voltar:hover { background: var(--cartao-3); color: var(--tinta); }

.cartao { min-width: 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px 20px; }
.cartao.sem-padding { padding: 0; overflow: hidden; }
.cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }
.cartao-titulos { min-width: 0; }
.cartao h2 { margin: 0; font: 600 16px/1.3 var(--fonte-titulo); letter-spacing: -0.005em; }
.cartao .cartao-titulos .sub { margin-top: 3px; }
.cartao-acao, .acoes-linha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.grade-2.assimetrica { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.coluna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1180px) { .grade-2, .grade-2.assimetrica { grid-template-columns: minmax(0, 1fr); } }

.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpis.q4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1439px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .kpis, .kpis.q4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.kpi { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); }
.kpi-rotulo { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--tinta-2); }
.kpi-valor { margin-top: 4px; font: 600 26px/1.15 var(--fonte); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.kpi-valor.menor { font-size: 20px; }
.kpi-sub { font-size: 12.5px; color: var(--tinta-3); }
.kpi-delta { margin-top: auto; padding-top: 6px; }
.kpi-delta:empty { display: none; }
.delta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12.5px; font-weight: 600; }
.delta.bom { color: var(--bom-texto); }
.delta.ruim { color: var(--ruim-texto); }
.delta.neutro { color: var(--tinta-3); font-weight: 500; }
.delta-ref { font-weight: 400; color: var(--tinta-3); }

.faixa-aviso, .faixa-info { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px 12px 16px; border-radius: 12px; font-size: 14.5px; }
.faixa-aviso { background: var(--aviso-fundo); color: var(--aviso-texto); border: 1px solid var(--aviso-borda); }
.faixa-aviso > span { flex: 1 1 260px; }
.faixa-info { background: var(--info-fundo); color: var(--info-texto); }
.faixa-info .icone, .faixa-aviso .icone { flex: none; }

/* ---------- controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; font: 600 14px/1 var(--fonte); white-space: nowrap; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; text-decoration: none; }
.btn.primario { background: var(--ouro); color: #15171B; }
.btn.primario:hover:not(:disabled) { background: var(--ouro-forte); }
.btn.secundario { background: var(--cartao); color: var(--tinta); border-color: var(--linha-2); }
.btn.secundario:hover:not(:disabled) { background: var(--cartao-2); }
.btn.fantasma { background: transparent; color: var(--tinta-2); }
.btn.fantasma:hover:not(:disabled) { background: var(--cartao-3); color: var(--tinta); }
.btn.perigo { background: var(--critico-fundo); color: var(--ruim-texto); }
.btn.perigo:hover:not(:disabled) { background: var(--critico); color: #fff; }
.btn.pequeno { height: 32px; padding: 0 10px; font-size: 13px; gap: 5px; }
.btn.largo { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icone { position: relative; width: 38px; height: 38px; display: inline-grid; place-items: center; flex: none; border: 0; border-radius: 10px; background: transparent; color: var(--tinta-2); cursor: pointer; text-decoration: none; }
.btn-icone:hover { background: var(--cartao-3); color: var(--tinta); }
.botao-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--tinta-2); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linha-2); }
.botao-link:hover { color: var(--tinta); text-decoration-color: currentColor; }

.segmentado { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--cartao-3); }
.segmentado button { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--tinta-2); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.segmentado button.ativo { background: var(--cartao); color: var(--tinta); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--linha-2); border-radius: 99px; background: var(--cartao); color: var(--tinta-2); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; }
.chip:hover:not(:disabled) { border-color: var(--tinta-3); color: var(--tinta); }
.chip.ativo { background: var(--tinta); border-color: var(--tinta); color: var(--cartao); }
.chip.c-aviso:not(.ativo) { background: var(--aviso-fundo); border-color: var(--aviso-borda); color: var(--aviso-texto); }
.chip-qtd { font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.75; }
.chip:disabled { opacity: 0.5; cursor: not-allowed; }

.abas { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--linha); }
.abas button { margin-bottom: -1px; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--tinta-3); font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.abas button:hover { color: var(--tinta); }
.abas button.ativo { color: var(--tinta); border-bottom-color: var(--ouro); }

.interruptor { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; cursor: pointer; }
.interruptor input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.trilho-int { position: relative; flex: none; width: 40px; height: 24px; border-radius: 99px; background: var(--linha-2); transition: background 0.2s; }
.bolinha { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.interruptor input:checked + .trilho-int { background: var(--bom); }
.interruptor input:checked + .trilho-int .bolinha { transform: translateX(16px); }
.interruptor input:focus-visible + .trilho-int { outline: 2px solid var(--ouro); outline-offset: 2px; }
.interruptor.desab { opacity: 0.55; cursor: not-allowed; }

.pilula { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 99px; background: var(--cartao-3); color: var(--tinta-2); font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.pilula.pequena { padding: 2px 7px 2px 6px; font-size: 11.5px; gap: 4px; }
.pilula.t-aviso { background: var(--aviso-fundo); color: var(--aviso-texto); }
.pilula.t-bom { background: var(--bom-fundo); color: var(--bom-texto); }
.pilula.t-serio { background: var(--serio-fundo); color: var(--serio-texto); }
.pilula.t-info { background: var(--info-fundo); color: var(--info-texto); }
.pilula.t-equipe { background: var(--equipe-fundo); color: var(--equipe-texto); }
.pilula.t-mudo { background: var(--cartao-3); color: var(--tinta-3); }

.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--cartao-3); color: var(--tinta-2); font-weight: 600; letter-spacing: 0.02em; }

/* ---------- formulários ---------- */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.form { display: flex; flex-direction: column; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label, .rotulo-campo { font-size: 14px; font-weight: 600; color: var(--tinta); }
.campo label .sub { font-weight: 400; }
.dica { font-size: 12.5px; color: var(--tinta-3); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--linha-2); border-radius: 10px; background: var(--cartao); color: var(--tinta); font: 15px/1.4 var(--fonte); }
textarea { min-height: 76px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--tinta-3); opacity: 0.85; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ouro); outline-offset: -1px; border-color: transparent; }
input:disabled, select:disabled, textarea:disabled { background: var(--cartao-2); color: var(--tinta-2); }
@media (max-width: 700px) { input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; } }
.linha-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .linha-campos { grid-template-columns: minmax(0, 1fr); } }
.form-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.acoes-coluna { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.erro-texto { color: var(--ruim-texto); font-size: 14px; }
.nota-regra { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--cartao-2); color: var(--tinta-2); font-size: 13.5px; }
.nota-regra .icone { color: var(--bom-texto); margin-top: 1px; }
.nota-fonte { margin-top: 12px; font-size: 12.5px; color: var(--tinta-3); max-width: 70ch; }
.busca { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.busca .icone { position: absolute; left: 12px; color: var(--tinta-3); pointer-events: none; }
.busca input[type="search"] { padding-left: 38px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; }
.seletor { width: auto; flex: 0 1 220px; }

/* ---------- estados ---------- */
.vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; text-align: center; color: var(--tinta-2); }
.vazio strong { color: var(--tinta); }
.vazio p { max-width: 42ch; font-size: 14px; color: var(--tinta-3); }
.vazio-icone { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px; background: var(--cartao-3); color: var(--tinta-2); }
.carregando { display: flex; align-items: center; gap: 10px; padding: 18px 4px; color: var(--tinta-3); font-size: 14px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); animation: pulso 1.1s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.erro-caixa { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--critico-fundo); color: var(--ruim-texto); font-size: 14px; }
.erro-caixa > span { flex: 1 1 200px; }

/* ---------- gráficos ---------- */
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -6px 0 8px; font-size: 13px; color: var(--tinta-2); }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.legenda-amostra { width: 12px; height: 12px; border-radius: 3px; }
.grafico { position: relative; border-radius: 8px; }
.grafico svg { display: block; overflow: visible; }
.grade { stroke: var(--grade); stroke-width: 1; }
.eixo-base { stroke: var(--eixo); stroke-width: 1; }
.eixo-rotulo { fill: var(--tinta-3); font: 11px var(--fonte); font-variant-numeric: tabular-nums; }
.barra-total { fill: var(--s-total); }
.barra-venda { fill: var(--s-venda); }
.banda-foco { fill: var(--cartao-3); }
.dica-grafico { position: absolute; z-index: 3; transform: translateX(-50%); display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 1px solid var(--linha-2); border-radius: 10px; background: var(--cartao); box-shadow: var(--sombra-alta); font-size: 13px; color: var(--tinta-2); white-space: nowrap; pointer-events: none; }
.dica-grafico strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.dica-titulo { margin-bottom: 2px; font-size: 12px; color: var(--tinta-3); }

.funil { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.funil-linha { display: grid; grid-template-columns: minmax(150px, 32%) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 34px; }
.funil-rotulo { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 500; }
.funil-num { display: grid; place-items: center; flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--cartao-3); color: var(--tinta-2); font-size: 11px; font-weight: 700; }
.funil-trilho { display: flex; align-items: center; gap: 8px; min-width: 0; }
.funil-barra { flex: none; height: 20px; min-width: 3px; border-radius: 0 4px 4px 0; }
.funil-valor { font-size: 13px; color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.funil-valor strong { color: var(--tinta); }
.funil-passo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 0 0 8px calc(min(32%, 100%) + 12px); font-size: 12.5px; color: var(--tinta-3); }
.funil-seguiram { display: inline-flex; align-items: center; gap: 3px; }
.funil-desist { color: var(--serio-texto); font-weight: 600; }
.funil-desist.zero { color: var(--tinta-3); font-weight: 400; }
.funil-desist.botao-link { font-size: 12.5px; color: var(--serio-texto); text-decoration-color: currentColor; }
.funil-desist.botao-link.ativo { text-decoration: none; background: var(--serio-fundo); padding: 2px 6px; border-radius: 6px; }
.funil.compacto .funil-linha { min-height: 30px; }
.funil.compacto .funil-rotulo { font-size: 13px; }
.funil.compacto .funil-barra { height: 16px; }
@media (max-width: 640px) {
  .funil-linha { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .funil-passo { padding-left: 0; padding-top: 4px; }
}

.mapa { position: relative; border-radius: 8px; }
.mapa-rolagem { overflow-x: auto; padding-top: 2px; }
.mapa-grade { display: grid; grid-template-columns: 34px repeat(24, minmax(9px, 1fr)); gap: 2px; min-width: 310px; }
.mapa-hora { font-size: 10.5px; color: var(--tinta-3); white-space: nowrap; overflow: visible; }
.mapa-dia { align-self: center; font-size: 12px; color: var(--tinta-2); }
.mapa-celula { height: 20px; border-radius: 3px; background: var(--h0); }
.mapa-celula.n1 { background: var(--h1); } .mapa-celula.n2 { background: var(--h2); } .mapa-celula.n3 { background: var(--h3); }
.mapa-celula.n4 { background: var(--h4); } .mapa-celula.n5 { background: var(--h5); }
.mapa-celula.foco { outline: 2px solid var(--tinta); outline-offset: -1px; }
.mapa-rodape { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.mapa-escala { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--tinta-3); }
.mapa-escala .mapa-celula { width: 14px; height: 12px; }
.mapa-dica { position: absolute; top: -8px; right: 0; z-index: 3; padding: 5px 10px; border-radius: 8px; background: var(--tinta); color: var(--cartao); font-size: 12.5px; pointer-events: none; }
@media (max-width: 520px) { .mapa-hora:not(.forte) { visibility: hidden; } }

.medidor { height: 8px; border-radius: 99px; background: var(--h1); overflow: hidden; }
.medidor span { display: block; height: 100%; border-radius: 99px; background: var(--f3); }
.medidor.alto span { background: var(--aviso); }
.medidor.cheio span { background: var(--serio); }

.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { padding: 10px 12px; border-bottom: 1px solid var(--linha); color: var(--tinta-3); font-size: 12.5px; font-weight: 600; text-align: left; white-space: nowrap; }
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela.clicavel tbody tr { cursor: pointer; }
.tabela.clicavel tbody tr:hover, .tabela.clicavel tbody tr:focus-visible { background: var(--cartao-2); outline: none; }
.tabela.compacta th, .tabela.compacta td { padding: 6px; font-size: 12px; }
.rodape-tabela { padding: 0 16px 14px; }
.cel-cliente { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.cel-cliente > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.marcadores { display: flex; flex-wrap: wrap; gap: 4px; }
.marcadores:empty { display: none; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 6px; background: var(--cartao-3); color: var(--tinta-2); font-size: 11.5px; font-weight: 600; }
.tag button { display: inline-grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }

/* ---------- listas ---------- */
.lista-conversas, .lista-desistentes, .linha-tempo, .lista-pedidos, .notificacoes, .membros, .menu-mais, .pedidos-nafia { margin: 0; padding: 0; list-style: none; }
.item-conversa { display: flex; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.item-conversa:hover { background: var(--cartao-2); }
.item-conversa.ativo { background: var(--cartao-3); }
.item-meio { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.item-linha1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.item-nome { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.item-quando { flex: none; font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
.item-previa { display: -webkit-box; overflow: hidden; color: var(--tinta-2); font-size: 13.5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.item-linha3 { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.item-valor { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lista-conversas .mais { display: flex; justify-content: center; padding: 10px; }
.lista-desistentes li + li, .linha-tempo li + li { border-top: 1px solid var(--linha); }
.lista-desistentes button, .linha-tempo button { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 6px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.lista-desistentes button:hover, .linha-tempo button:hover { background: var(--cartao-2); }
.linha-tempo .item-linha1 { justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.lista-pedidos li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.lista-pedidos li:last-child { border-bottom: 0; }
.dica-funil { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--cartao-2); color: var(--tinta-2); font-size: 14px; }

.insight-resumo { max-width: 68ch; margin-bottom: 16px; font-size: 15.5px; line-height: 1.6; }
.insight-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .insight-colunas { grid-template-columns: minmax(0, 1fr); } }
.insight-colunas h3 { margin: 0 0 8px; color: var(--tinta-3); font: 600 12px var(--fonte); letter-spacing: 0.06em; text-transform: uppercase; }
.lista-contagem { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lista-contagem li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--linha); font-size: 13.5px; }
.lista-contagem strong { font-variant-numeric: tabular-nums; }

/* ---------- conversas ---------- */
.conversas.dividida { display: grid; grid-template-columns: minmax(320px, 410px) minmax(0, 1fr); gap: 20px; height: calc(100vh - 44px); min-height: 560px; }
.app.com-demo .conversas.dividida { height: calc(100vh - 116px); }
.conversas.dividida .conversas-lista { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.conversas.dividida .lista-conversas.rolavel { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.conversas-lista { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.conversas-detalhe { min-height: 0; min-width: 0; }
.conversas-detalhe > .vazio { height: 100%; justify-content: center; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); }
.conversas .chip { min-height: 30px; padding: 3px 10px; font-size: 12.5px; }
@media (max-width: 1023px) { .conversas .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .conversas .chip { flex: none; } }

.detalhe { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); }
.app.estreito .detalhe { height: auto; overflow: visible; margin-top: 12px; }
.detalhe-topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
.detalhe-quem { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.detalhe-quem strong { font: 600 16px/1.25 var(--fonte-titulo); }
.detalhe-quem .sub { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.detalhe-status { flex: none; }
@media (max-width: 1023px) {
  .detalhe-topo { flex-wrap: wrap; row-gap: 8px; padding: 12px; }
  .detalhe-status { flex-basis: 100%; }
  .detalhe-acoes { padding: 8px 12px; }
  .detalhe-acoes .btn { height: 34px; padding: 0 10px; font-size: 13px; }
  .detalhe-corpo { padding: 6px 12px 12px; }
}
.detalhe-acoes { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--linha); background: var(--cartao-2); }
.detalhe-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 12px; }
.app.estreito .detalhe-corpo { overflow: visible; }
.etapas-conversa { display: flex; margin: 10px 0 14px; padding: 0; list-style: none; overflow-x: auto; }
.etapas-conversa li { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 5px; min-width: 84px; color: var(--tinta-3); font-size: 12px; text-align: center; }
.etapas-conversa li::before { content: ""; position: absolute; top: 10px; left: -50%; right: 50%; height: 2px; background: var(--linha-2); }
.etapas-conversa li:first-child::before { display: none; }
.etapas-conversa li.feita::before { background: var(--f3); }
.etapas-conversa li.feita { color: var(--tinta-2); }
.etapas-conversa em { font-style: normal; font-weight: 600; color: var(--serio-texto); }
.etapa-marca { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--linha-2); border-radius: 50%; background: var(--cartao); color: var(--tinta-3); font-size: 11px; font-weight: 700; }
.feita .etapa-marca { background: var(--f3); border-color: var(--f3); color: #FFFFFF; }
.parou .etapa-marca { background: var(--serio); border-color: var(--serio); color: #FFFFFF; }
.resumo-ia { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: var(--cartao-2); font-size: 13.5px; color: var(--tinta-2); }
.resumo-ia p { display: flex; gap: 8px; align-items: flex-start; }
.resumo-ia .icone { margin-top: 2px; color: var(--tinta-3); }
.transcricao { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 4px 0 8px; list-style: none; }
.bolha { align-self: flex-start; max-width: min(80%, 560px); padding: 8px 12px 5px; border: 1px solid var(--linha); border-radius: 14px; border-bottom-left-radius: 4px; background: var(--bolha-cliente); }
.bolha.agente, .bolha.humano { align-self: flex-end; border-color: transparent; border-radius: 14px; border-bottom-right-radius: 4px; }
.bolha.agente { background: var(--bolha-agente); }
.bolha.humano { background: var(--bolha-humano); }
.bolha p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bolha-autor { display: block; margin-bottom: 2px; color: var(--tinta-2); font-size: 12px; font-weight: 600; }
.bolha-rodape { display: flex; justify-content: flex-end; gap: 4px; margin-top: 2px; color: var(--tinta-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.bolha-rodape .falhou { color: var(--ruim-texto); font-weight: 600; }
.msg-sistema { align-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 92%; color: var(--tinta-3); font-size: 12.5px; text-align: center; }
.msg-sistema time { font-variant-numeric: tabular-nums; }
.separador-dia { align-self: center; margin: 8px 0 2px; }
.separador-dia span { padding: 2px 10px; border-radius: 99px; background: var(--cartao-3); color: var(--tinta-2); font-size: 12px; font-weight: 600; }
.compositor { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 14px; border-top: 1px solid var(--linha); background: var(--cartao); }
.app.estreito .compositor { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); border-radius: 0 0 var(--raio) var(--raio); }
.compositor-linha { display: flex; align-items: flex-end; gap: 8px; }
.compositor textarea { min-height: 44px; max-height: 160px; }
.compositor .btn { height: 44px; }
.aviso-24h { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 13px; }
.detalhe-fim { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--linha); background: var(--cartao-2); color: var(--tinta-2); font-size: 14px; }

/* ---------- agentes ---------- */
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.cartao-agente { display: flex; flex-direction: column; gap: 14px; color: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.cartao-agente:hover { border-color: var(--linha-2); box-shadow: var(--sombra); }
.agente-topo { display: flex; align-items: center; gap: 12px; }
.agente-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--lateral); color: var(--ouro); font: 700 20px/1 var(--fonte-titulo); }
.agente-avatar.pequeno { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.agente-nomes { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.agente-nomes strong { font: 600 17px/1.2 var(--fonte-titulo); }
.agente-nomes .sub { display: flex; align-items: center; gap: 4px; }
.agente-metricas { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--tinta-2); font-size: 14px; }
.agente-metricas strong { margin-right: 4px; color: var(--tinta); font-size: 20px; font-weight: 600; }
.agente-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linha); }
.grade-ofertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.oferta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 1px dashed var(--linha-2); border-radius: 12px; }
.oferta .sub { flex: 1; }
.oferta-icone { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 2px; border-radius: 10px; background: var(--ouro-fundo); color: var(--ouro-tinta); }
.form-config { display: flex; flex-direction: column; gap: 16px; }
.form-config .cartao { display: flex; flex-direction: column; gap: 14px; }
.form-config .cartao-topo { margin-bottom: 0; }
.config-com-chat { display: grid; grid-template-columns: minmax(0, 1fr) 390px; align-items: start; gap: 20px; }
.config-com-chat .form-config, .config-com-chat .barra-salvar { grid-column: 1; }
.chat-lateral { position: sticky; top: 20px; grid-column: 2; grid-row: 1 / span 2; }
.barra-salvar { position: sticky; bottom: 14px; z-index: 6; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; padding: 10px 12px; border: 1px solid var(--linha-2); border-radius: 14px; background: var(--cartao); box-shadow: var(--sombra-alta); }
.barra-salvar.pendente { border-color: var(--ouro); }
.barra-status { flex: 1 1 160px; color: var(--tinta-2); font-size: 14px; }
.nota-versao { flex: 2 1 220px; width: auto !important; }
.app.estreito .barra-salvar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.aba-testar { max-width: 560px; }

.chat-teste { display: flex; flex-direction: column; height: 640px; max-height: calc(100vh - 120px); overflow: hidden; border: 1px solid var(--linha); border-radius: 18px; background: var(--cartao); }
.app.estreito .chat-teste { height: calc(100vh - 230px); min-height: 440px; max-height: none; }
.chat-topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linha); background: var(--cartao-2); }
.chat-topo > span:last-child { display: flex; flex-direction: column; }
.chat-msgs { display: flex; flex: 1; flex-direction: column; gap: 8px; margin: 0; padding: 14px; overflow-y: auto; list-style: none; background: var(--papel); }
.chat-msgs .bolha.cliente { align-self: flex-end; border-color: transparent; border-radius: 14px; border-bottom-right-radius: 4px; background: var(--bolha-humano); }
.chat-msgs .bolha.agente { align-self: flex-start; border: 1px solid var(--linha); border-radius: 14px; border-bottom-left-radius: 4px; background: var(--bolha-cliente); }
.chat-msgs .bolha { padding-bottom: 8px; }
.chat-msgs .bolha.erro { align-self: center; border: 0; background: var(--critico-fundo); color: var(--ruim-texto); font-size: 13px; }
.chat-vazio { margin: auto 0; padding: 18px; color: var(--tinta-3); font-size: 14px; text-align: center; }
.digitando { display: flex; gap: 4px; padding: 12px 14px !important; }
.digitando span { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); animation: pulso 1s infinite; }
.digitando span:nth-child(2) { animation-delay: 0.15s; }
.digitando span:nth-child(3) { animation-delay: 0.3s; }
.chat-sugestoes { display: flex; gap: 6px; padding: 10px 12px 0; overflow-x: auto; }
.chat-sugestoes .chip { flex: none; font-size: 12.5px; }
.chat-compor { display: flex; gap: 8px; padding: 10px 12px; }
.chat-compor .btn { width: 44px; padding: 0; flex: none; }
.chat-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 12px 12px; }
.chat-rodape .sub { flex: 1; font-size: 12px; }
.etapas-lista { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.etapas-lista li { display: flex; align-items: flex-start; gap: 12px; }
.etapas-lista li > span:last-child { display: flex; flex-direction: column; }
.versoes { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.versoes > li { padding: 12px 0; border-bottom: 1px solid var(--linha); }
.versoes > li:last-child { border-bottom: 0; }
.versao-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.versao-texto { display: flex; flex: 1 1 260px; flex-direction: column; min-width: 0; }
.versao-acoes { display: flex; align-items: center; gap: 6px; }
.difs { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; padding: 12px; border-radius: 10px; background: var(--cartao-2); }
.difs dt { color: var(--tinta-3); font-size: 12.5px; font-weight: 600; }
.difs dd { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 0; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.difs .antes { color: var(--tinta-3); text-decoration: line-through; }
.difs .icone { margin-top: 3px; color: var(--tinta-3); }

/* ---------- outras telas ---------- */
.notificacoes button { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--linha); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.notificacoes li:last-child button { border-bottom: 0; }
.notificacoes button:hover { background: var(--cartao-2); }
.notificacoes .nao-lida button { background: var(--cartao-2); }
.notif-icone { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; }
.notif-icone.t-aviso { background: var(--aviso-fundo); color: var(--aviso-texto); }
.notif-icone.t-bom { background: var(--bom-fundo); color: var(--bom-texto); }
.notif-icone.t-info { background: var(--info-fundo); color: var(--info-texto); }
.notif-texto { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ponto-nao-lida { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--ouro); }
.membros li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.membros li:last-child { border-bottom: 0; }
.membro-texto { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.papeis, .dados-lista { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.papeis dt, .dados-lista dt { color: var(--tinta-3); font-size: 13px; font-weight: 600; }
.papeis dd, .dados-lista dd { margin: 2px 0 0; }
.dados-lista { margin-bottom: 16px; }
.dados-lista > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--linha); }
.dados-lista dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.meta-uso { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.meta-valor { font-size: 15px; }
.subtitulo { margin: 20px 0 8px; font: 600 14px var(--fonte-titulo); }
.pedidos-nafia li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.cartao.sem-padding .pedidos-nafia li { padding: 14px 18px; }
.pedidos-nafia li:last-child { border-bottom: 0; }
.pedidos-nafia li > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pedido-lado { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; }
.menu-mais button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 18px; border: 0; border-bottom: 1px solid var(--linha); background: transparent; color: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.menu-mais li:last-child button { border-bottom: 0; }
.menu-mais button .icone:last-child:not(:first-child) { margin-left: auto; color: var(--tinta-3); }
.tags-edicao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tags-edicao input { flex: 1 1 140px; width: auto !important; }
.arquivo-conteudo { min-height: 260px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- modal e avisos ---------- */
.modal-fundo { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: var(--fundo-modal); }
.modal { display: flex; flex-direction: column; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 18px; background: var(--cartao); box-shadow: var(--sombra-alta); }
.modal.largo { width: min(760px, 100%); }
.modal-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 16px 6px 20px; }
.modal-topo h2 { margin: 0; font: 600 18px/1.3 var(--fonte-titulo); }
.modal-corpo { display: flex; flex-direction: column; gap: 14px; padding: 4px 20px 10px; }
.modal-rodape { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 20px 18px; }
.toasts { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(460px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none; }
.app.estreito .toasts { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--tinta); color: var(--cartao); font-size: 14px; box-shadow: var(--sombra-alta); pointer-events: auto; animation: subir 0.2s ease-out; }
.toast.erro { background: var(--critico); color: #FFFFFF; }
@keyframes subir { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- entrada ---------- */
.entrada { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.entrada.so-form { grid-template-columns: minmax(0, 1fr); }
.entrada-lado { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; overflow: hidden; padding-block: 44px; padding-left: max(44px, env(safe-area-inset-left, 0px)); padding-right: 44px; background: var(--lateral); color: var(--lateral-tinta); }
.entrada-marca { display: flex; align-items: center; gap: 14px; }
.entrada-nome { display: block; font: 700 22px/1.1 var(--fonte-titulo); letter-spacing: 0.08em; }
.entrada-desc { display: block; font-size: 13px; color: var(--tinta-3); }
.entrada-lado .entrada-desc { color: var(--lateral-tinta-2); }
.entrada-tese h1 { max-width: 17ch; margin: 0 0 16px; font: 700 clamp(30px, 3.4vw, 44px)/1.12 var(--fonte-titulo); letter-spacing: -0.025em; }
.entrada-tese p { max-width: 46ch; color: var(--lateral-tinta-2); font-size: 16px; line-height: 1.6; }
.entrada-lista { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--lateral-tinta); }
.entrada-lista li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.entrada-lista .icone { color: var(--ouro); }
.entrada-form { display: grid; place-items: center; padding-block: 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.entrada-caixa { display: flex; flex-direction: column; gap: 22px; width: min(400px, 100%); }
.entrada-caixa h2 { margin: 0; font: 700 24px/1.2 var(--fonte-titulo); letter-spacing: -0.015em; }
.entrada-caixa .form .botao-link { align-self: center; }
.entrada-demo { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid var(--linha); }
.so-movel { display: none; }
@media (max-width: 860px) {
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada-lado { display: none; }
  .so-movel { display: block; }
}
@media (max-width: 1023px) { .so-largo { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}