/* Painel: claro, denso e calmo — para trabalhar horas seguidas. */
@font-face { font-family: 'Inter'; src: url('../fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Mono'; src: url('../fonts/mono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'Grotesk'; src: url('../fonts/grotesk.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
:root { --fundo: #f3f5f8; --branco: #fff; --linha: #e1e6ec; --linha-2: #cdd5df; --texto: #18212b; --mudo: #66768a; --escuro: #0f151c;
  --acento: #ff7a1a; --azul: #1673d1; --ok: #138a5b; --erro: #c93434; --raio: 10px; }
* { box-sizing: border-box; }
body { margin: 0; font: 14.5px/1.5 'Inter', system-ui, sans-serif; color: var(--texto); background: var(--fundo); }
a { color: var(--azul); }
h1, h2, h3 { font-family: 'Grotesk', 'Inter', sans-serif; letter-spacing: -0.01em; margin: 0 0 .6em; }
h2 { font-size: 1.1rem; }
h3 { font-size: .98rem; margin-top: 1.4em; }
.mono { font-family: 'Mono', ui-monospace, monospace; font-size: .92em; }
.mudo { color: var(--mudo); }
.pequeno { font-size: .85rem; }
.dica { color: var(--mudo); font-size: .86rem; margin: 6px 0 14px; }
.painel { display: flex; min-height: 100vh; }
.lateral { width: 240px; flex: none; background: var(--escuro); color: #c9d3de; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.lat-marca { display: flex; flex-direction: column; padding: 22px 20px; text-decoration: none; color: #fff; border-bottom: 1px solid #1f2a36; }
.lat-marca strong { font: 600 1.05rem 'Grotesk', sans-serif; }
.lat-marca small { color: #7b8a9c; font: .72rem 'Mono', monospace; }
.lateral nav { padding: 10px 10px 20px; flex: 1; }
.lat-grupo { font: .66rem 'Mono', monospace; text-transform: uppercase; letter-spacing: .14em; color: #6a7a8d; padding: 18px 10px 6px; }
.lateral nav a { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 7px; color: #c9d3de; text-decoration: none; }
.lateral nav a:hover { background: #18222d; color: #fff; }
.lateral nav a.ativo { background: #1d2935; color: #fff; box-shadow: inset 3px 0 0 var(--acento); }
.lat-n { background: var(--acento); color: #1a0d00; font: 700 .7rem 'Mono', monospace; border-radius: 9px; padding: 1px 7px; }
.lat-pe { border-top: 1px solid #1f2a36; padding: 14px 20px; display: flex; flex-direction: column; gap: 6px; font-size: .84rem; }
.lat-pe a { color: #8fa0b3; text-decoration: none; }
.lat-pe a:hover { color: #fff; }
.principal { flex: 1; min-width: 0; }
.barra { display: flex; align-items: center; gap: 16px; padding: 16px 30px; background: var(--branco); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 5; }
.barra h1 { font-size: 1.3rem; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.menu-bt { display: none; background: none; border: 1px solid var(--linha-2); border-radius: 8px; padding: 6px 11px; font-size: 1.1rem; cursor: pointer; }
.conteudo { padding: 26px 30px 60px; max-width: 1400px; }
.bloco { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px 24px; margin-bottom: 20px; }
.bloco-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.estreito { max-width: 560px; }
.grelha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.grelha-ficha { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.bt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border: 1px solid var(--linha-2); background: var(--branco); color: var(--texto); border-radius: 8px; font: 500 .88rem 'Inter', sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap; }
.bt:hover { border-color: var(--mudo); }
.bt-acento { background: var(--acento); border-color: var(--acento); color: #1a0d00; font-weight: 600; }
.bt-acento:hover { background: #ff8f3d; border-color: #ff8f3d; }
.bt-perigo { color: var(--erro); }
.bt-perigo:hover { border-color: var(--erro); }
.bt-peq { padding: 4px 10px; font-size: .8rem; }
.bt-grande { width: 100%; justify-content: center; padding: 13px; font-size: 1rem; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 5px; }
.form label > span { font-size: .82rem; color: var(--mudo); font-weight: 500; }
input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--linha-2); border-radius: 7px; font: 14px 'Inter', sans-serif; background: var(--branco); color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(22,115,209,.12); }
textarea { resize: vertical; }
.caixa { flex-direction: row !important; align-items: center; gap: 9px !important; font-size: .9rem; }
.caixa input { width: auto; accent-color: var(--acento); }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.em-linha { display: inline; }
.em-linha select { width: auto; padding: 4px 8px; }
.filtro { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filtro select, .filtro input { width: auto; min-width: 200px; }
.tab { width: 100%; border-collapse: collapse; }
.tab th { text-align: left; font: 500 .72rem 'Mono', monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--mudo); padding: 8px 10px; border-bottom: 1px solid var(--linha-2); }
.tab td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tab tr.clicavel { cursor: pointer; }
.tab tr.clicavel:hover td { background: #f7f9fb; }
.tab tr.inativo td { opacity: .5; }
.tab tr.alerta td { background: #fff4ec; }
.tab tfoot td { border: 0; color: var(--mudo); }
.tab .linha-total td { font-weight: 600; color: var(--texto); }
.tab-form td { padding: 5px; }
.tab-form input { padding: 6px 8px; }
.num { text-align: right; white-space: nowrap; }
input.ordem { width: 70px; }
.verif .ok { color: var(--ok); font-weight: 700; }
.verif .falha { color: var(--erro); font-weight: 700; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 500 .74rem 'Mono', monospace; border: 1px solid; white-space: nowrap; text-decoration: none; }
.pill-novo { color: var(--azul); border-color: #b8d5f3; background: #eef5fd; }
.pill-curso { color: #b45309; border-color: #f5cfa4; background: #fff6ec; }
.pill-ok { color: var(--ok); border-color: #b5e2cf; background: #eefaf4; }
.pill-off { color: var(--mudo); border-color: var(--linha-2); background: #f6f7f9; }
.aviso { padding: 12px 16px; border-radius: 8px; border: 1px solid; margin-bottom: 14px; display: block; }
.aviso-ok { background: #eefaf4; border-color: #b5e2cf; color: #0f5c3d; }
.aviso-erro { background: #fdeeee; border-color: #f1c0c0; color: #8f1f1f; }
.aviso-alerta { background: #fff6ec; border-color: #f5cfa4; color: #8a4a06; }
.aviso-link { text-decoration: none; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; text-decoration: none; color: var(--texto); display: flex; flex-direction: column; gap: 2px; }
.kpi span { font-size: .8rem; color: var(--mudo); }
.kpi strong { font: 600 1.9rem 'Grotesk', sans-serif; letter-spacing: -0.02em; }
.kpi small { color: var(--mudo); }
.kpi-acento { border-top: 3px solid var(--acento); }
.barras { display: flex; align-items: flex-end; gap: 12px; height: 160px; margin: 10px 0 26px; padding-top: 18px; border-bottom: 1px solid var(--linha-2); }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.barra-g { width: 100%; max-width: 46px; background: #c3cfdc; border-radius: 4px 4px 0 0; }
.barra-col:last-child .barra-g { background: var(--acento); }
.barra-v { font-size: .7rem; color: var(--mudo); margin-bottom: 4px; }
.barra-r { position: absolute; bottom: -22px; font-size: .7rem; color: var(--mudo); }
.dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; margin: 6px 0 18px; }
.dados dt { font-size: .76rem; color: var(--mudo); }
.dados dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.conversa { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 20px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.msg { max-width: 85%; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--linha); }
.msg-cliente { background: #f6f8fa; align-self: flex-start; }
.msg-empresa { background: #eef5fd; border-color: #cfe1f5; align-self: flex-end; }
.msg-cab { font-size: .74rem; color: var(--mudo); margin-bottom: 5px; }
.msg-tx { overflow-wrap: anywhere; }
.lista-fich { list-style: none; padding: 0; margin: 0; }
.lista-fich li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--linha); font-size: .88rem; }
.lista-fich a { overflow-wrap: anywhere; }
.lista-fich small { color: var(--mudo); white-space: nowrap; }
.pag-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.pag-acoes { display: flex; gap: 6px; }
.lista-media { display: flex; flex-direction: column; }
.media { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.media-img { width: 88px; height: 66px; border-radius: 6px; overflow: hidden; background: #e8edf2 repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,.03) 8px 16px); display: block; }
.media-img img { width: 100%; height: 100%; object-fit: cover; }
.media-tx { display: flex; flex-direction: column; min-width: 0; }
.media-tx a { text-decoration: none; color: var(--texto); }
.media-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.zona-envio { position: relative; border: 1.5px dashed var(--linha-2); border-radius: 10px; padding: 26px; text-align: center; color: var(--mudo); cursor: pointer; display: block !important; }
.zona-envio:hover { border-color: var(--azul); background: #f7fbff; }
.zona-envio input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zona-envio.tem { border-color: var(--ok); color: var(--ok); }
.fotos-adm { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 16px; }
.foto-adm { border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background: #fafbfc; }
.foto-adm.e-capa { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(255,122,26,.25); }
.foto-adm img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.foto-adm input { border: 0; border-top: 1px solid var(--linha); border-radius: 0; font-size: .82rem; }
.foto-acoes { display: flex; gap: 6px; align-items: center; padding: 6px; flex-wrap: wrap; }
.foto-acoes .ordem { width: 56px; padding: 4px 6px; }
.separadores { border: 1px solid var(--linha); border-radius: 8px; padding: 14px; }
.sep-bts { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--linha); }
.sep-bts button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; font: 500 .88rem 'Inter', sans-serif; color: var(--mudo); margin-bottom: -1px; }
.sep-bts button.ativo { color: var(--texto); border-bottom-color: var(--acento); }
.sep-bts button.cheio::after { content: ' ●'; color: var(--ok); font-size: .6rem; vertical-align: middle; }
.sep-pain { display: flex; flex-direction: column; gap: 12px; }
.sub-nav { display: flex; gap: 6px; margin-bottom: 16px; }
.sub-nav a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linha-2); text-decoration: none; color: var(--mudo); background: var(--branco); }
.sub-nav a.ativo { color: var(--texto); border-color: var(--texto); }
.corpo-email { white-space: pre-wrap; font: .8rem 'Mono', monospace; background: #f6f8fa; padding: 10px; border-radius: 6px; max-height: 300px; overflow: auto; }
.copia { user-select: all; background: #f6f8fa; padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }
.painel-entrar { min-height: 100vh; display: grid; place-items: center; background: var(--escuro) radial-gradient(circle at 80% 10%, rgba(255,122,26,.15), transparent 40%); padding: 20px; }
.caixa-entrar { width: 100%; max-width: 420px; background: var(--branco); border-radius: 14px; padding: 34px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.caixa-entrar .bt { justify-content: center; padding: 12px; }
@media (max-width: 1100px) { .grelha-2, .grelha-ficha { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .lateral { position: fixed; left: 0; top: 0; z-index: 20; transform: translateX(-100%); transition: transform .3s; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .menu-aberto .lateral { transform: none; }
  .menu-bt { display: block; }
  .barra { padding: 12px 16px; flex-wrap: wrap; }
  .barra h1 { font-size: 1.1rem; }
  .conteudo { padding: 16px 12px 50px; }
  .bloco { padding: 16px; }
  .tab { display: block; overflow-x: auto; }
  .media { grid-template-columns: 64px 1fr; }
  .media-img { width: 64px; height: 50px; }
  .media-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .campos-2 { grid-template-columns: 1fr; }
}