/* Painel de Controle MI — padrão do GestorAppMI: azul da Mateus Informática, cards dentro de cards, nada de fundo preto. */
:root {
  --topo1: #071b3d; --topo2: #0d2b5e; --fundo: #f4f7fc; --card: #ffffff; --borda: #d8e1ef; --texto: #10213f; --suave: #5b6b86;
  --destaque: #1668e3; --ok: #1a8f4c; --alerta: #c26a00; --perigo: #c62828; --cinza: #9aa7bb; --placeholder: #c3ccda;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo); color: var(--texto); font: 15px/1.35 "Segoe UI", system-ui, sans-serif; display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }

.topo { background: linear-gradient(90deg, var(--topo1), var(--topo2)); color: #fff; display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-height: 56px; }
/* a logo igual à do GestorAppMI: sem fundo, com a luz branca contornando o triângulo */
.topo-logo { display: block; flex: 0 0 auto; }
.topo-logo img { height: 46px; width: auto; display: block;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #fff) drop-shadow(0 0 16px rgba(255,255,255,.85)); }
/* nome tudo junto, "Controle" no azul do GestorAppMI; embaixo Mateus Informática® na MESMA largura do nome */
.topo-nome { display: inline-flex; flex-direction: column; align-items: stretch; width: max-content; line-height: 1; margin-top: -6px; }
.topo-nome b { font-size: 28px; font-weight: 700; letter-spacing: -.3px; color: #fff; }
.topo-nome b em { font-style: normal; color: #63a6ff; font-weight: 900; }
.topo-nome span { width: 0; min-width: 100%; margin-top: 5px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85);
  white-space: nowrap; text-align: left; letter-spacing: 1px; }   /* o espaçamento exato vem do ajustarNome() no app.js */
.topo-usuario { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-left: auto; }
.rodape { background: linear-gradient(90deg, var(--topo1), var(--topo2)); color: #c9d6ee; font-size: 12px; padding: 6px 16px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.rodape > span:first-child { text-align: left; }
.rodape > span:last-child { text-align: right; }
.rodape b { color: #fff; font-size: 14px; text-align: center; }
.corpo { flex: 1; overflow: auto; padding: 16px; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; max-width: 1100px; margin: 0 auto; }
.card-menu { background: var(--card); border: 1px solid var(--borda); border-radius: 14px; padding: 22px 12px; text-align: center; cursor: pointer;
  box-shadow: 0 2px 6px rgba(16, 33, 63, .06); transition: transform .12s, box-shadow .12s; }
.card-menu:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(22, 104, 227, .16); }
.card-menu .ico { font-size: 42px; line-height: 1; height: 48px; display: flex; align-items: center; justify-content: center; }
.card-menu .ico img { height: 48px; }
.card-menu .nome { font-weight: 700; margin-top: 10px; }
.card-menu .sub { color: var(--suave); font-size: 12px; margin-top: 4px; }
.card-menu.depois { opacity: .7; }

.caixa { background: var(--card); border: 1px solid var(--borda); border-radius: 14px; padding: 14px; margin: 0 auto 14px; max-width: 1300px; }
.caixa h3 { margin: 0 0 10px; font-size: 15px; text-align: center; color: var(--topo2); }
.barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.voltar-titulo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; font-weight: 700; font-size: 17px; color: var(--topo2); }

.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.resumo .n { background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 6px; text-align: center; cursor: pointer; }
.resumo .n b { display: block; font-size: 22px; }
.resumo .n span { font-size: 12px; color: var(--suave); }

.filtros { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 100%; }
.filtro { border: 1px solid var(--borda); background: #fff; border-radius: 18px; padding: 5px 12px; cursor: pointer; font-size: 13px; }
.filtro.ativo { background: var(--destaque); color: #fff; border-color: var(--destaque); }

.licencas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.lic { background: #fff; border: 1px solid var(--borda); border-left: 5px solid var(--cinza); border-radius: 12px; padding: 12px; cursor: pointer; text-align: center; }
.lic:hover { box-shadow: 0 4px 12px rgba(22, 104, 227, .14); }
.lic.ATIVA { border-left-color: var(--ok); } .lic.SUSPENSA { border-left-color: var(--alerta); }
.lic.BLOQUEADA { border-left-color: var(--perigo); } .lic.VENCIDA { border-left-color: var(--perigo); }
.lic .nome { font-weight: 700; }
.lic .doc { color: var(--suave); font-size: 13px; }
.lic .linhas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 8px; font-size: 13px; }
.lic .linhas div { background: var(--fundo); border-radius: 8px; padding: 4px; }
.lic .linhas small { display: block; color: var(--suave); font-size: 11px; }

.sit { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: 12px; font-weight: 700; color: #fff; background: var(--cinza); margin-top: 4px; }
.sit.ATIVA, .sit.CONECTADO, .sit.EM.DIA { background: var(--ok); }
.sit.SUSPENSA { background: var(--alerta); }
.sit.BLOQUEADA, .sit.VENCIDA, .sit.ATRASO { background: var(--perigo); }

/* campos: texto centralizado, placeholder cinza claro */
.campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campo label { font-size: 12px; color: var(--suave); text-align: center; }
.campo input, .campo select, .campo textarea, input.busca { width: 100%; border: 1px solid var(--borda); border-radius: 9px; padding: 7px 9px; background: #fff; text-align: center; min-width: 0; }
.campo textarea { min-height: 60px; resize: vertical; }
::placeholder { color: var(--placeholder); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(22, 104, 227, .35); border-color: var(--destaque); }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.grade .largo { grid-column: 1 / -1; }
.tipo-doc { text-align: center; font-size: 12px; color: var(--destaque); font-weight: 700; min-height: 16px; }

/* botões: ícone + texto (no celular só o ícone) */
.bt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borda); background: #fff; border-radius: 20px; padding: 7px 14px; cursor: pointer; font-weight: 600; }
.bt:hover { border-color: var(--destaque); }
.bt:disabled { opacity: .45; cursor: default; }
.bt.azul { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.bt.verde { background: var(--ok); border-color: var(--ok); color: #fff; }
.bt.laranja { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.bt.vermelho { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.bt.claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.bt .i { font-size: 15px; }

/* janelas estilo Windows (centralizadas, arrastam pela barra; no celular ocupam a tela) */
.fundo-janela { position: fixed; inset: 0; background: rgba(7, 27, 61, .35); display: flex; align-items: center; justify-content: center; z-index: 10; }
.janela { background: #fff; border-radius: 10px; box-shadow: 0 16px 48px rgba(7, 27, 61, .35); width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; position: relative; }
.janela.pequena { width: min(460px, calc(100vw - 32px)); }
.janela-barra { background: linear-gradient(90deg, var(--topo1), var(--topo2)); color: #fff; font-weight: 700; padding: 8px 12px; border-radius: 10px 10px 0 0;
  display: flex; align-items: center; gap: 8px; cursor: grab; user-select: none; }
.janela-barra span { flex: 1; text-align: center; }
.janela-barra button { background: transparent; border: 0; color: #fff; font-size: 16px; cursor: pointer; width: 28px; height: 28px; border-radius: 6px; }
.janela-barra button:hover { background: rgba(255, 255, 255, .15); }
.janela-corpo { padding: 14px; overflow: auto; }
.janela-rodape { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--borda); }

/* MaTIA nas mensagens: fundo branco, MaTIA no canto direito, texto centralizado, OK no meio */
.matia-info { display: flex; align-items: center; gap: 12px; }
.matia-info .txt { flex: 1; text-align: center; font-weight: 600; white-space: pre-line; }
.matia-info img { height: 92px; }
.chave-grande { font: 700 26px/1.2 Consolas, monospace; letter-spacing: 2px; text-align: center; color: var(--topo2); background: var(--fundo); border-radius: 10px; padding: 10px; margin: 10px 0; word-break: break-all; }

.lista-simples { width: 100%; border-collapse: collapse; font-size: 13px; }
.lista-simples th, .lista-simples td { border-bottom: 1px solid var(--borda); padding: 5px 6px; text-align: center; }
.lista-simples th { color: var(--suave); font-weight: 600; }
.vazio { text-align: center; color: var(--suave); padding: 18px; }

/* LOGIN: card azul escuro, centralizado no vão entre o cabeçalho e o rodapé */
.sugestoes { max-height: 220px; overflow: auto; border-radius: 9px; }
.sugestoes:not(:empty) { border: 1px solid var(--borda); margin-top: 4px; }
.sug { padding: 7px 10px; text-align: center; cursor: pointer; border-bottom: 1px solid var(--borda); }
.sug:hover { background: var(--fundo); }
.sug span { display: block; font-size: 12px; color: var(--suave); }
.sug.tem span { color: var(--alerta); font-weight: 600; }
.sug.vazio { cursor: default; color: var(--suave); }
.perms { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 14px; }
.perm { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--fundo); border-radius: 8px; padding: 6px; cursor: pointer; }
.login-aviso { text-align: center; color: #c9d6ee; margin: -6px 0 12px; white-space: pre-line; }
.login-fundo { min-height: 100%; display: flex; align-items: center; justify-content: center; }
.login { width: min(400px, 100%); background: linear-gradient(160deg, #0d2b5e, #071b3d); color: #fff; border-radius: 18px; padding: 22px 26px 26px;
  box-shadow: 0 18px 44px rgba(7, 27, 61, .38); }
.login .matia-topo { text-align: center; }
.login .matia-topo img { height: 130px; filter: drop-shadow(0 0 12px rgba(120, 170, 255, .55)); }
.login h3 { margin: 6px 0 14px; font-size: 24px; text-align: center; color: #fff; letter-spacing: 1px; }
.login .campo label { color: #c9d6ee; font-size: 14px; font-weight: 600; }
.login .campo input, .login .campo select { padding: 11px 12px; font-size: 16px; border-color: transparent; color: var(--texto); text-align-last: center; }
@media (max-height: 820px) {   /* tela baixa (ou a janela estreita ao lado): tudo cabe sem esconder o último campo */
  .login { padding: 12px 20px 16px; }
  .login .matia-topo img { height: 70px; }
  .login h3 { margin: 2px 0 8px; font-size: 20px; }
  .login .grade { gap: 6px; }
  .login .campo input, .login .campo select { padding: 8px 10px; }
  .login-aviso { margin: -4px 0 8px; font-size: 13px; }
}
.login .bt.azul { padding: 10px 26px; font-size: 16px; background: #1668e3; border-color: #4d8ff0; }

@media (max-width: 640px) {
  .bt .t { display: none; }
  .bt { padding: 8px 12px; }
  .topo-nome b { font-size: 20px; }
  .topo-nome span { font-size: 8px; }
  .rodape > span { display: none; }
  .rodape { grid-template-columns: 1fr; }
  .janela, .janela.pequena { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .janela-barra { border-radius: 0; }
  .fundo-janela { align-items: stretch; }
  .corpo { padding: 10px; }
}

/* (12/10) PROGRAMAS (fechar com 10 minutos de aviso), MÓDULOS e os CLIENTES DO MATEUSINFO sem licença */
.sit.FECHANDO { background: var(--alerta); }
.sit.FECHADA { background: var(--perigo); }
.progs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.prog { background: var(--fundo); border: 1px solid var(--borda); border-left: 5px solid var(--ok); border-radius: 12px; padding: 10px; text-align: center; flex: 1 1 220px; max-width: 320px; }
.prog.FECHANDO { border-left-color: var(--alerta); } .prog.FECHADA { border-left-color: var(--perigo); }
.prog .nome { font-weight: 700; }
.prog .doc { color: var(--suave); font-size: 12px; margin-top: 4px; }
.mods { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mods .perm { min-width: 150px; }
.lic.cliente-mi { border-left-style: dashed; border-left-color: var(--destaque); }[hidden] { display: none !important; }