/* MAM Connect - estilo do painel. Sem framework: tudo aqui. */

/* Cores da identidade MAM Connect (logo + site) */
:root {
  --marca: #1a82e2;
  --marca-escura: #1266b8;
  --destaque: #19c3a6;
  --degrade-botao: linear-gradient(90deg, #1e88e5, #19c3a6);
  --degrade-site: linear-gradient(120deg, #1a7fe0 0%, #1596a8 50%, #1fa37f 100%);
  --degrade-logo: linear-gradient(90deg, #7b2ff7, #1e90ff 30%, #00c9c8 55%, #a8d53b 78%, #ffc300);
  --lateral: #0f172a;
  --lateral-texto: #b6c2d6;
  --fundo: #f3f6fa;
  --cartao: #ffffff;
  --texto: #1b2433;
  --suave: #647086;
  --borda: #dde3ec;
  --verde: #12a150;
  --verde-fundo: #e3f6eb;
  --amarelo: #b7791f;
  --amarelo-fundo: #fdf3e1;
  --vermelho: #d33a3a;
  --vermelho-fundo: #fce8e8;
  --raio: 10px;
  --sombra: 0 1px 3px rgba(16, 32, 64, .08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: var(--texto);
  background: var(--fundo);
}

a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; font-weight: 800; margin: 0; }
h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; }

/* ---------- Estrutura ---------- */

.app { display: flex; min-height: 100vh; }

.lateral {
  width: 230px;
  flex-shrink: 0;
  background: var(--lateral);
  color: var(--lateral-texto);
  padding: 1.25rem .75rem;
  display: flex;
  flex-direction: column;
}

.lateral-topo { display: flex; align-items: flex-start; justify-content: space-between; }
.lateral-topo .logo { padding-right: 0; }
.logo-texto { white-space: nowrap; }
.logo {
  display: flex; align-items: center; gap: .6rem;
  padding: 0 .5rem 1.25rem;
}
.logo:hover { text-decoration: none; }
.logo img { width: 36px; height: 36px; }
.logo-texto {
  font-weight: 800; font-size: 1.15rem; letter-spacing: .02em;
  background: var(--degrade-logo);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.menu { display: flex; flex-direction: column; gap: 2px; }
.menu-titulo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: #6f83a3; padding: 1rem .75rem .35rem;
}

/* Grupos do menu: clicar no titulo abre/fecha (um aberto por vez) */
.menu-grupo { border-radius: 8px; margin-top: 2px; }
.menu-grupo > summary.menu-titulo {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .75rem; border-radius: 8px;
  font-size: .95rem; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--lateral-texto);
}
.menu-grupo > summary::-webkit-details-marker { display: none; }
/* Seta: > fechado, v aberto */
.menu-grupo > summary::after {
  content: ""; width: .45rem; height: .45rem; margin-right: .2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; opacity: .7;
}
.menu-grupo[open] > summary::after { transform: rotate(45deg); opacity: 1; }
.menu-grupo > summary:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu-grupo > summary:focus-visible { outline: 2px solid var(--destaque); outline-offset: -2px; }
/* Grupo aberto: titulo claro, fundo leve e itens recuados com uma linha a esquerda */
.menu-grupo[open] { background: rgba(255, 255, 255, .04); padding-bottom: .35rem; }
.menu-grupo[open] > summary { color: #fff; }
.menu-grupo > a {
  display: block; margin: 2px .35rem 0 1.1rem; padding: .45rem .75rem;
  border-left: 2px solid rgba(255, 255, 255, .12); border-radius: 0 7px 7px 0; font-size: .92rem;
}
.menu-grupo > a.ativo { border-left-color: var(--destaque); }

/* Ocultar o menu inteiro */
.botao-ocultar, .botao-menu {
  background: none; border: 0; cursor: pointer; font: inherit; line-height: 1; border-radius: 7px;
}
.botao-ocultar { color: #6f83a3; font-size: 1.2rem; padding: .3rem .35rem; margin-top: .2rem; }
.botao-ocultar:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.botao-menu { font-size: 1.35rem; padding: .45rem .65rem; color: var(--texto); }
.mostrar-menu {
  display: none; position: fixed; top: 1rem; left: 1rem; z-index: 30;
  background: var(--lateral); color: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
}
.mostrar-menu:hover { filter: brightness(1.3); }
.menu-oculto .lateral { display: none; }
.menu-oculto .mostrar-menu { display: block; }
.menu-oculto .conteudo { padding-left: 4.5rem; }
.barra-celular, .fundo-menu { display: none; }
.menu a {
  color: var(--lateral-texto); padding: .55rem .75rem; border-radius: 7px;
}
.menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.menu a.ativo { background: var(--degrade-botao); color: #fff; font-weight: 600; }

.usuario { margin-top: auto; padding: 1rem .75rem 0; font-size: .85rem; border-top: 1px solid rgba(255,255,255,.08); }
.usuario form { display: inline; }
.usuario a { color: var(--destaque); }
.usuario button { background: none; border: 0; color: var(--destaque); cursor: pointer; padding: 0; font: inherit; }

.conteudo { flex: 1; min-width: 0; padding: 1.75rem 2rem; }

.topo {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}

/* ---------- Componentes ---------- */

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.grade { display: grid; gap: 1.25rem; }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.indicadores { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1.25rem; }

.indicador { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.25rem; box-shadow: var(--sombra); }
a.indicador { color: inherit; text-decoration: none; }
a.indicador:hover { border-color: var(--marca); }
.indicador small { color: var(--suave); display: block; }
.indicador strong { font-size: 1.55rem; font-weight: 800; display: block; margin-top: .25rem; white-space: nowrap; }
.indicador.verde strong { color: var(--verde); }
.indicador.amarelo strong { color: var(--amarelo); }
.indicador.vermelho strong { color: var(--vermelho); }
.indicador.azul strong { color: var(--marca); }

.botao {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--degrade-botao); color: #fff; border: 0;
  padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 600; white-space: nowrap;
}
.botao:hover { filter: brightness(.93); text-decoration: none; }
.botao.secundario { background: #fff; color: var(--texto); border: 1px solid var(--borda); }
.botao.secundario:hover { background: var(--fundo); }
.botao.perigo { background: var(--vermelho); }
.botao.aviso { background: var(--amarelo); }
.botao.sucesso { background: var(--verde); }
.acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.acoes form { display: inline; }

.selo {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
}
.selo.ativo, .selo.online { background: var(--verde-fundo); color: var(--verde); }
.selo.bloqueado { background: var(--amarelo-fundo); color: var(--amarelo); }
.selo.cancelado, .selo.recusado { background: var(--vermelho-fundo); color: var(--vermelho); }
.selo.offline { background: #eef1f5; color: var(--suave); }
.selo.aberta { background: #e6f1fd; color: var(--marca-escura); }

/* ---------- Tabelas ---------- */

.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); font-weight: 600; }
tbody tr:hover { background: #f8fafd; }
td.vazio { text-align: center; color: var(--suave); padding: 2rem; }
th.col-acoes, td.col-acoes { width: 1%; text-align: right; }

/* ---------- Menu de acoes (coluna "Acoes" das tabelas) ---------- */

.acoes-menu { display: inline-block; }
.acoes-menu summary {
  list-style: none; cursor: pointer; user-select: none;
  width: 34px; height: 30px; border-radius: 7px;
  display: grid; place-items: center;
  border: 1px solid var(--borda); background: #fff;
  font-size: 1.15rem; line-height: 1; color: var(--suave);
}
.acoes-menu summary::-webkit-details-marker { display: none; }
.acoes-menu summary:hover, .acoes-menu[open] summary { border-color: var(--marca); color: var(--marca); }
.acoes-lista {
  position: fixed; z-index: 50; min-width: 210px;
  background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
  padding: .35rem; text-align: left;
}
.acoes-lista a, .acoes-lista button {
  display: block; width: 100%; text-align: left;
  padding: .5rem .75rem; border-radius: 6px;
  background: none; border: 0; font: inherit; color: var(--texto); cursor: pointer;
}
.acoes-lista a:hover, .acoes-lista button:hover { background: var(--fundo); text-decoration: none; }
.acoes-lista form { margin: 0; }
.acoes-lista .perigo { color: var(--vermelho); }
.acoes-lista .perigo:hover { background: var(--vermelho-fundo); }
.acoes-lista hr { border: 0; border-top: 1px solid var(--borda); margin: .3rem 0; }
.suave { color: var(--suave); }

.paginacao { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: 1rem; }

.filtros { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filtros input { flex: 1; min-width: 220px; }

/* ---------- Formularios ---------- */

input, select, textarea {
  width: 100%; font: inherit; color: var(--texto);
  padding: .55rem .7rem; border: 1px solid var(--borda); border-radius: 7px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(10, 91, 211, .25); border-color: var(--marca); }
input[type="checkbox"], input[type="radio"] { width: auto; }
/* Envio de arquivo: o botao "Escolher arquivo" com o mesmo jeito dos botoes secundarios */
input[type="file"] { padding: .35rem .5rem; cursor: pointer; color: var(--suave); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; color: var(--texto); background: #fff; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 999px; padding: .4rem 1rem; margin-right: .75rem;
}
input[type="file"]::file-selector-button:hover { background: var(--fundo); }

.formulario { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.campo label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.campo.largo { grid-column: 1 / -1; }
.campo .ajuda { color: var(--suave); font-size: .8rem; margin-top: .25rem; }
.campo .erro { color: var(--vermelho); font-size: .82rem; margin-top: .25rem; }
.campo.com-erro input, .campo.com-erro select { border-color: var(--vermelho); }
.campo.checkbox { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; align-self: end; }
.campo.checkbox .ajuda, .campo.checkbox .erro { flex-basis: 100%; margin-top: 0; }
.campo.checkbox label { margin: 0; }

/* ---------- Mensagens ---------- */

.mensagem { padding: .75rem 1rem; border-radius: 7px; margin-bottom: 1rem; border: 1px solid; }
.mensagem.success { background: var(--verde-fundo); border-color: #b5e4c8; color: #0c6b36; }
.mensagem.info { background: #e6f1fd; border-color: #bcd8f7; color: var(--marca-escura); }
.mensagem.warning { background: var(--amarelo-fundo); border-color: #f1d7a8; color: #7a5212; }
.mensagem.error { background: var(--vermelho-fundo); border-color: #f2bcbc; color: #9b2020; }

/* ---------- Detalhes ---------- */

.dados { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 0; }
.dados dt { color: var(--suave); }
.dados dd { margin: 0; }

/* ---------- Login ---------- */

.tela-login {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--degrade-site);
  padding: 1rem;
}
.tela-login .cartao { width: 100%; max-width: 380px; padding: 2rem; border: 0; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); border-radius: 16px; }
.marca-login { text-align: center; margin-bottom: 1.5rem; }
.marca-login img { width: 84px; height: 84px; }
.marca-login .logo-texto { display: block; font-size: 2rem; line-height: 1.1; margin-top: .5rem; }
.marca-login small { display: block; letter-spacing: .35em; font-weight: 600; color: var(--suave); margin-top: .15rem; }

/* ---------- Celular ---------- */

@media (max-width: 800px) {
  .app { flex-direction: column; }
  /* No celular o menu vira uma gaveta que abre pelo botao da barra de cima */
  .barra-celular {
    display: flex; align-items: center; gap: .5rem; position: sticky; top: 0; z-index: 20;
    background: var(--lateral); padding: .5rem .75rem;
  }
  .barra-celular .logo { padding: 0; }
  .barra-celular .logo img { width: 30px; height: 30px; }
  .barra-celular .botao-menu { color: #fff; }
  .lateral, .menu-oculto .lateral {
    display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: 260px;
    overflow-y: auto; transform: translateX(-100%); transition: transform .2s;
  }
  .menu-aberto .lateral { transform: none; }
  .menu-aberto .fundo-menu { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(15, 23, 42, .5); }
  .menu-oculto .mostrar-menu { display: none; }
  .conteudo, .menu-oculto .conteudo { padding: 1rem; }
}

/* ---------- Pecas pequenas ---------- */

button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--marca); cursor: pointer; }
button.link:hover { text-decoration: underline; }
.senha-gerada {
  font: 700 2rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .12em; margin: .75rem 0; color: var(--marca-escura);
}

/* ---------- Central do Assinante (area do cliente, feita para celular) ---------- */

.central-largura { max-width: 760px; margin: 0 auto; padding: 0 1rem; }
.central-topo { background: var(--degrade-site); color: #fff; }
.central-barra { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; }
.central-barra .logo { padding: 0; }
.logo-texto.branco { background: none; color: #fff; }
.central-sair { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: .35rem .9rem; font: inherit; cursor: pointer; }
.central-sair:hover { background: rgba(255,255,255,.25); }
.central-menu { display: flex; gap: .25rem; padding-top: .9rem; overflow-x: auto; }
.central-menu a { color: rgba(255,255,255,.85); padding: .6rem .9rem; border-radius: 8px 8px 0 0; white-space: nowrap; font-weight: 600; }
.central-menu a:hover { color: #fff; text-decoration: none; }
.central-menu a.ativo { background: var(--fundo); color: var(--marca-escura); }
.central-conteudo { padding-top: 1.5rem; padding-bottom: 2rem; }

.central-alerta { border-left: 5px solid var(--amarelo); }
.central-alerta p { margin-top: 0; }

.central-fatura {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--borda); color: inherit;
}
.central-fatura:last-of-type { border-bottom: 0; }
.central-fatura:hover { text-decoration: none; background: #f8fafd; }
.central-fatura-valor { text-align: right; white-space: nowrap; }
.central-fatura-valor strong { display: block; font-size: 1.1rem; margin-bottom: .2rem; }
.central-fatura.vencida .central-fatura-valor strong { color: var(--vermelho); }

.central-pagamento { padding: 1rem; margin-bottom: 1rem; background: var(--fundo); border-radius: var(--raio); }
.central-pagamento p { margin: .35rem 0 .75rem; }
.central-pagamento textarea, .central-pagamento input { margin: .5rem 0 .75rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }

.central-atendimento { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

@media (max-width: 520px) {
  .central-fatura { align-items: flex-start; }
  .central-pagamento .botao, .central-atendimento .botao { width: 100%; justify-content: center; }
  .dados { grid-template-columns: 1fr; gap: .1rem; }
  .dados dd { margin-bottom: .6rem; }
}

/* ---------- Fiscal (NFCom) ---------- */

.selo.nota-autorizada { background: var(--verde-fundo); color: var(--verde); }
.selo.nota-pendente, .selo.nota-verificar { background: var(--amarelo-fundo); color: var(--amarelo); }
.selo.nota-rejeitada { background: var(--vermelho-fundo); color: var(--vermelho); }
.selo.nota-cancelada { background: #eef1f5; color: var(--suave); }
.codigo-xml {
  background: var(--fundo); padding: 1rem; border-radius: 7px; overflow-x: auto;
  white-space: pre-wrap; word-break: break-all; font-size: .78rem; max-height: 480px; margin: 0;
}

/* ---------- Acesso (usuarios e perfis) ---------- */

.caixas { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.caixa-opcao { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400 !important; cursor: pointer; }
.caixa-opcao.bloco { display: flex; padding: .35rem 0; }
.caixa-opcao input { width: auto; }

/* Mensagens (WhatsApp) */
[hidden] { display: none !important; }
.selo.msg-enviada { background: var(--verde-fundo); color: var(--verde); }
.selo.msg-aguardando { background: #e6f1fd; color: var(--marca-escura); }
.selo.msg-falhou { background: var(--vermelho-fundo); color: var(--vermelho); }
.selo.msg-cancelada { background: #eef1f5; color: var(--suave); }
.balao-whatsapp {
  background: #dcf8c6; color: #111b21; border-radius: 8px 8px 8px 0; padding: .75rem 1rem;
  max-width: 480px; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

/* Carregando (formulario enviado) */
.botao-carregando { pointer-events: none; opacity: .75; cursor: progress; }
.rodinha {
  display: inline-block; width: .9em; height: .9em; margin-right: .45em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
html.carregando, html.carregando * { cursor: progress; }
html.carregando body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  background: linear-gradient(90deg, transparent, var(--destaque), var(--marca), transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
  animation: barra-carregando 1s ease-in-out infinite;
}
@keyframes barra-carregando { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .rodinha, html.carregando body::before { animation-duration: 2.5s; }
}

/* Configuracao de mensagens */
.icone { vertical-align: -.2em; flex-shrink: 0; }
.botao-icone {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--borda); border-radius: 8px; color: var(--suave); background: #fff;
}
.botao-icone:hover { color: var(--marca); border-color: var(--marca); text-decoration: none; }
.botao-icone .icone { width: 18px; height: 18px; }
.situacao-mensagens { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.situacao-mensagens .dados { margin: 0; }
.titulo-secao { margin: 1.5rem 0 .75rem; }
.canal { display: flex; flex-direction: column; }
.canal .acoes { margin-top: auto; padding-top: 1rem; }
.canal-topo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.canal-topo h2 { margin: 0 auto 0 0; }
.canal-sem-uso { opacity: .8; }
.pequeno { font-size: .8rem; margin-top: .15rem; }
.previa-meses { margin: 1.25rem 0 0; box-shadow: none; }

/* Janela de confirmacao (no lugar do confirm() do navegador) */
.dialogo {
  border: 0; border-radius: 12px; padding: 1.5rem; width: min(440px, calc(100vw - 2rem));
  box-shadow: 0 20px 50px rgba(15, 23, 42, .3); color: var(--texto); background: #fff;
}
.dialogo::backdrop { background: rgba(15, 23, 42, .55); }
.dialogo[open] { animation: aparecer .15s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.dialogo-titulo { margin: 0 0 .5rem; font-size: 1.15rem; }
.dialogo-texto { margin: 0 0 1.5rem; color: var(--suave); line-height: 1.5; white-space: pre-line; }
.dialogo-botoes { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .dialogo[open] { animation: none; } }

/* Caixa */
.valor-entrada { color: var(--verde); white-space: nowrap; }
.valor-saida { color: var(--vermelho); white-space: nowrap; }

/* Relatorios */
.grade-relatorios { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.relatorio-link { display: flex; flex-direction: column; gap: .35rem; margin: 0; color: inherit; }
.relatorio-link:hover { border-color: var(--marca); text-decoration: none; }
.relatorio-link strong { color: var(--marca-escura); font-size: 1.05rem; }
.indicador .pequeno { display: block; margin-top: .25rem; }

/* Barrinha dentro da tabela (uma serie, so magnitude) */
.barra-inline { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: #eef1f5; vertical-align: middle; overflow: hidden; }
.barra-inline.larga { width: 100%; }
.barra-inline > span { display: block; height: 100%; background: var(--marca); border-radius: 0 4px 4px 0; }

/* Grafico de colunas (uma serie): barras finas, ponta arredondada, grade discreta, dica no hover */
.grafico { display: flex; gap: .75rem; height: 260px; margin-top: .5rem; }
.grafico-eixo {
  display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 1.6rem;
  font-size: .72rem; color: var(--suave); text-align: right; white-space: nowrap;
}
.grafico-eixo span { transform: translateY(-50%); line-height: 1; }
.grafico-eixo span:last-child { transform: translateY(50%); }
.grafico-area { flex: 1; position: relative; min-width: 0; }
.grafico-grade { position: absolute; inset: 0 0 1.6rem 0; display: flex; flex-direction: column; justify-content: space-between; }
.grafico-grade span { border-top: 1px solid var(--borda); }
.grafico-colunas { position: absolute; inset: 0; display: flex; }
.grafico-coluna { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; outline: none; }
.grafico-barra-area { flex: 1; width: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.grafico-barra { width: min(24px, 60%); background: var(--marca); border-radius: 4px 4px 0 0; transition: background .15s; }
.grafico-coluna:hover .grafico-barra, .grafico-coluna:focus-visible .grafico-barra { background: var(--marca-escura); }
.grafico-valor {
  position: absolute; left: 50%; transform: translate(-50%, -4px); font-size: .75rem; font-weight: 600;
  color: var(--texto); white-space: nowrap; pointer-events: none;
}
.grafico-dica {
  display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  background: var(--texto); color: #fff; padding: .3rem .55rem; border-radius: 6px; font-size: .8rem; white-space: nowrap;
}
.grafico-coluna:hover .grafico-dica, .grafico-coluna:focus-visible .grafico-dica { display: block; }
.grafico-coluna:hover .grafico-valor, .grafico-coluna:focus-visible .grafico-valor { visibility: hidden; }
.grafico-rotulo { height: 1.6rem; line-height: 1.6rem; font-size: .72rem; color: var(--suave); white-space: nowrap; }
@media (max-width: 700px) {
  .grafico { height: 220px; }
  .grafico-coluna:nth-child(even) .grafico-rotulo { visibility: hidden; }
  .grafico-valor { display: none; }
}
@media (max-width: 520px) { .indicador strong { font-size: 1.2rem; } }

/* Pagina de aviso de bloqueio */
.aviso-cabeca { border-left: 4px solid var(--amarelo); }
.aviso-cabeca.liberado { border-left-color: var(--verde); }
.aviso-cabeca h1 { font-size: 1.35rem; margin-bottom: .5rem; }
.aviso-cabeca p { margin: 0; }
.aviso-passos { padding-left: 1.2rem; line-height: 1.6; }
td.vazio { white-space: normal; }

/* Almoxarifado: pecas para clicar na lista de seriais */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; max-height: 9rem; overflow-y: auto; }
.chip { font: .8rem ui-monospace, Menlo, Consolas, monospace; padding: .2rem .55rem; border: 1px solid var(--borda); border-radius: 999px; background: var(--cartao); color: inherit; cursor: pointer; }
.chip:hover { border-color: var(--marca); }
.chip.usado { background: var(--verde-fundo); border-color: var(--verde); }
textarea.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Contratos */
.contrato-texto { line-height: 1.65; max-width: 52rem; }
.contrato-texto h2 { text-align: center; font-size: 1.1rem; margin: 1.25rem 0 .75rem; }
.contrato-texto h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.contrato-texto p { margin: 0 0 .75rem; text-align: justify; }
.contrato-previa { border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.25rem; max-height: 28rem; overflow-y: auto; background: var(--fundo); }
.contrato-leitura { max-height: 60vh; overflow-y: auto; }
.modelo-contrato { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.lista-variaveis { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .85rem; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
@media (max-width: 900px) { .modelo-contrato { grid-template-columns: 1fr; } }
.contrato-texto strong { font-weight: 700; }
.concordo { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; cursor: pointer; }
.concordo input { width: auto; margin-top: .25rem; flex: none; }
.quebra { overflow-wrap: anywhere; }