/* GPR 360 Standalone -- painel administrativo
   CSS minimo, sem framework. Cores do produto. */

:root {
    --azul: #1A2B4C;
    --azul-claro: #2E4A7D;
    --fundo: #F4F6FA;
    --branco: #FFFFFF;
    --texto: #1B1F26;
    --borda: #DDE3EC;
    --verde: #1B8A5A;
    --vermelho: #C2333B;
    --amarelo: #B8791B;
    --cinza: #6B7280;
}

* { box-sizing: border-box; }

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

.topo {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    background: var(--azul); color: var(--branco);
    padding: 12px 24px;
}
.topo .marca { font-weight: 700; font-size: 18px; }
.topo .marca span { font-weight: 400; opacity: .7; font-size: 13px; }
.topo .menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.topo .menu a {
    color: var(--branco); text-decoration: none; padding: 7px 12px;
    border-radius: 6px; font-size: 14px; opacity: .85;
}
.topo .menu a:hover { background: rgba(255,255,255,.12); opacity: 1; }
.topo .menu a.ativo { background: var(--azul-claro); opacity: 1; font-weight: 600; }
.topo .usuario { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.topo .usuario .tenant { opacity: .7; }
.topo .usuario .sair { color: var(--branco); opacity: .8; }

.conteudo { max-width: 1100px; margin: 0 auto; padding: 24px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 12px; }
.subtitulo { color: var(--cinza); margin: 0 0 20px; }
.dica { color: var(--cinza); font-size: 13px; margin: 4px 0 10px; }
.obs { color: var(--cinza); font-size: 13px; }

.cartao {
    background: var(--branco); border: 1px solid var(--borda);
    border-radius: 10px; padding: 20px; margin-bottom: 20px;
}
.formulario label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 500; }
.formulario label.check, label.check { font-weight: 400; display: flex; align-items: center; gap: 8px; }
.formulario input[type=text], .formulario input[type=email], .formulario input[type=password],
.formulario input[type=number], .formulario input[type=date], .formulario input[type=time],
.formulario select, .formulario textarea, .login input {
    width: 100%; padding: 9px 11px; border: 1px solid var(--borda);
    border-radius: 6px; font-size: 14px; margin-top: 4px; font-family: inherit;
}
.formulario textarea { resize: vertical; }
.linha { display: flex; gap: 14px; flex-wrap: wrap; }
.linha > label { flex: 1; min-width: 160px; }
button, .botao {
    background: var(--azul); color: var(--branco); border: 0; padding: 10px 18px;
    border-radius: 6px; cursor: pointer; font-size: 14px; text-decoration: none;
    display: inline-block; font-family: inherit;
}
button:hover, .botao:hover { background: var(--azul-claro); }

fieldset { border: 1px solid var(--borda); border-radius: 8px; padding: 12px; margin: 12px 0; }
legend { font-size: 13px; color: var(--cinza); padding: 0 6px; }
.checklista { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }

.tabela { width: 100%; border-collapse: collapse; background: var(--branco);
    border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.tabela th { background: #EDF1F7; text-align: left; padding: 10px 12px; font-size: 13px; color: var(--cinza); }
.tabela td { padding: 10px 12px; border-top: 1px solid var(--borda); font-size: 14px; }

.status { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.status.pendente, .status.aguardando_confirmacao { background: #FFF4E0; color: var(--amarelo); }
.status.em_andamento { background: #E3EDFB; color: var(--azul-claro); }
.status.atrasada, .status.rejeitada { background: #FCEAEA; color: var(--vermelho); }
.status.confirmada, .status.concluida { background: #E4F5EC; color: var(--verde); }
.status.concluida_atraso { background: #FFF4E0; color: var(--amarelo); }
/* estados de CONEXAO do canal de WhatsApp (nao se misturam com os de execucao) */
.status.conectado, .status.conectando { background: #E4F5EC; color: var(--verde); }
.status.aguardando_qr, .status.reconectando { background: #FFF4E0; color: var(--amarelo); }
.status.desconectado { background: #E7EBF3; color: var(--cinza); }
.status.erro, .status.bloqueado { background: #FCEAEA; color: var(--vermelho); }

.alerta { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.alerta.ok { background: #E4F5EC; color: var(--verde); }
.alerta.erro { background: #FCEAEA; color: var(--vermelho); }

.cartoes { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.cartoes .cartao { flex: 1; min-width: 150px; margin: 0; text-align: center; }
.cartoes .num { display: block; font-size: 30px; font-weight: 700; }
.cartoes .rot { display: block; color: var(--cinza); font-size: 13px; margin-top: 4px; }
.cartoes .destaque { border-color: var(--amarelo); }
.cartoes .ok { border-color: var(--verde); }
.cartoes .erro { border-color: var(--vermelho); }

.acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.filtros label { font-size: 13px; color: var(--cinza); }
.filtros input { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; }

.login { max-width: 380px; margin: 60px auto; }
.login label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 500; }
.login button { width: 100%; }

code { background: #EDF1F7; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
/* =========================================================================
   COMPONENTES DO BLOCO DE FECHAMENTO DO PAINEL
   =========================================================================
   O painel tem que parecer UM produto só. Estas peças (indicadores, etiqueta
   de situação, estado vazio, barra de filtros, cabeçalho de ocorrência)
   aparecem em várias telas: quando uma delas precisa de uma variação, a
   variação nasce daqui, não de um CSS novo na página.
   ========================================================================= */

/* --- Indicadores ---------------------------------------------------------
   Oito caixas na ordem do ciclo de vida da ocorrência. Um clique aplica o
   status como filtro na lista. `.alerta` marca o que está travado — é o que
   o gestor precisa ver primeiro, e não pode se perder numa parede de zeros. */
.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}
.indicador {
    display: block;
    padding: 14px 12px;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 10px;
    text-decoration: none;
    color: var(--texto);
    transition: border-color .12s, box-shadow .12s;
}
.indicador:hover { border-color: var(--azul-claro); box-shadow: 0 1px 4px rgba(26,43,76,.10); }
.indicador .num { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
.indicador .rot { display: block; color: var(--cinza); font-size: 12px; margin-top: 5px; }
.indicador.alerta { border-color: var(--vermelho); background: #FEF7F7; }
.indicador.alerta .num { color: var(--vermelho); }
.indicador.destaque { border-left: 3px solid var(--azul-claro); }
.indicador.marcado { outline: 2px solid var(--azul); outline-offset: -2px; }

/* --- Etiqueta de situação ------------------------------------------------
   Situação de execução e situação de conexão do canal são vocabulários
   diferentes; as duas famílias moram aqui, separadas de propósito. */
.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.badge.verde    { background: #E4F5EC; color: var(--verde); }
.badge.vermelho { background: #FCEAEA; color: var(--vermelho); }
.badge.amarelo  { background: #FFF4E0; color: var(--amarelo); }
.badge.azul     { background: #E3EDFB; color: var(--azul-claro); }
.badge.neutro   { background: #E7EBF3; color: var(--cinza); }

/* --- Estado vazio --------------------------------------------------------
   "0 registros" não ajuda ninguém. Dizer o que FALTA e para onde ir, sim. */
.vazio {
    padding: 32px 20px;
    text-align: center;
    background: var(--branco);
    border: 1px dashed var(--borda);
    border-radius: 10px;
    color: var(--cinza);
}
.vazio strong { display: block; color: var(--texto); font-size: 15px; margin-bottom: 6px; }
.vazio p { margin: 0 0 14px; font-size: 13px; }

/* --- Filtros -------------------------------------------------------------
   Uma faixa só. Filtro que ocupa três linhas empurra a tabela para fora da
   tela, e o gestor desiste. */
.filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.filtros label { font-size: 12px; color: var(--cinza); display: flex; flex-direction: column; gap: 4px; }
.filtros label.check { flex-direction: row; align-items: center; gap: 6px; }
.filtros select, .filtros input {
    padding: 7px 9px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: var(--branco);
    font-size: 13px;
    min-width: 150px;
}
.filtros.tenant-foco { padding: 10px 14px; background: var(--branco); border: 1px solid var(--borda); border-radius: 8px; }

/* --- Cabeçalho da ocorrência -------------------------------------------- */
.cabecalho-ocorrencia {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}
.cabecalho-ocorrencia h2 { margin: 0 0 4px; font-size: 19px; }
.cabecalho-ocorrencia .subtitulo { margin: 0; }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pares { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.pares dt { color: var(--cinza); }
.pares dd { margin: 0; }

/* --- Linhas que exigem gestão ------------------------------------------ */
.linha-alerta td { background: #FEF9F9; }
.texto-erro { color: var(--vermelho); }
.filtro-ativo { font-size: 12px; color: var(--cinza); font-weight: 400; }

/* --- Navegação de dia (Monitoramento) ----------------------------------- */
.dias { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.dia-atual { font-weight: 600; padding: 0 6px; }

.botao.pequeno { padding: 5px 10px; font-size: 12px; }
.botao.secundario { background: transparent; color: var(--azul-claro); border-color: var(--borda); }
.botao.perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.linha-botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

.lista-simples { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.lista-simples li { padding: 8px 0; border-bottom: 1px solid var(--borda); }
.historico { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.historico li { padding: 8px 0; border-bottom: 1px solid var(--borda); }
.historico .obs { display: block; color: var(--cinza); font-size: 12px; }

/* --- Supervisão --------------------------------------------------------- */
.supervisao-bloco { margin-bottom: 26px; }
.supervisao-bloco h2 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.supervisao-bloco.urgente h2 { color: var(--vermelho); }
.contador {
    display: inline-block; min-width: 22px; padding: 1px 7px;
    background: var(--borda); border-radius: 12px;
    font-size: 12px; text-align: center; color: var(--texto);
}
.urgente .contador { background: #FCEAEA; color: var(--vermelho); }

/* --- Formulário de cadastro/edição -------------------------------------- */
.formulario label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 500; }
.formulario label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.formulario input, .formulario select, .formulario textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    font-size: 14px;
    margin-top: 4px;
    font-family: inherit;
}
.formulario input[type="checkbox"] { width: auto; margin: 0; }
.formulario textarea { min-height: 70px; resize: vertical; }
.formulario .dica { font-size: 12px; color: var(--cinza); margin-top: -6px; }
.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.obs { color: var(--cinza); font-size: 12px; }
.acoes-inline { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 720px) {
    .indicadores { grid-template-columns: repeat(2, 1fr); }
    .pares { grid-template-columns: 1fr; }
    .filtros label, .filtros select, .filtros input { min-width: 130px; }
}

/* --- Checklist ordenado do Processo -------------------------------------
   O operador responde na ordem da lista e o Supervisor lê na mesma ordem.
   Por isso o item carrega a posição e os botões de reordenar ao lado: a ordem
   é parte do modelo, não um detalhe de exibição. */
.checklist-ordenado { list-style: none; padding: 0; margin: 12px 0; counter-reset: item; }
.checklist-ordenado li {
    counter-increment: item;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--branco);
}
.checklist-ordenado li::before {
    content: counter(item);
    display: inline-block;
    min-width: 24px;
    font-weight: 700;
    color: var(--cinza);
}
.checklist-ordenado li > div:first-of-type { flex: 1; }
form.inline { display: inline; }
.botao:disabled { opacity: .4; cursor: not-allowed; }
fieldset { border: 1px solid var(--borda); border-radius: 8px; margin: 14px 0; }
legend { font-size: 13px; color: var(--cinza); padding: 0 6px; }
.checklista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px; max-height: 260px; overflow-y: auto; }

/* --- Inicio executivo ----------------------------------------------------
   Linguagem visual alinhada ao dashboard do beta: saudacao, cards claros,
   acentos por area e atalhos de acesso. A regra de negocio continua nas
   consultas existentes do dashboard; aqui e somente a apresentacao. */
.dashboard-home {
    --dash-blue: #2f5ce3;
    --dash-green: #0d9488;
    --dash-purple: #7c3aed;
    --dash-orange: #ea580c;
}
.dashboard-home-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 4px 0 18px;
}
.dashboard-kicker {
    display: block;
    color: var(--dash-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.dashboard-home-head h2 {
    margin: 0;
    color: var(--texto);
    font-size: 28px;
    letter-spacing: -.02em;
}
.dashboard-home-head p {
    margin: 4px 0 0;
    color: var(--cinza);
    font-size: 13px;
}
.dashboard-refresh {
    white-space: nowrap;
    background: var(--branco);
    color: var(--azul);
    border: 1px solid var(--borda);
    box-shadow: 0 1px 3px rgba(20, 25, 45, .06);
}
.dashboard-refresh:hover { color: var(--branco); }
.dashboard-periodo { margin-bottom: 14px; }
.dashboard-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    padding: 18px 20px;
    background: linear-gradient(145deg, #fff 0%, #f7faff 100%);
    border: 1px solid #e2e4e9;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20, 25, 45, .06);
}
.dashboard-card-rotinas { border-top: 4px solid var(--dash-blue); }
.dashboard-card-rotinas::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--dash-blue), #6a8dff);
}
.dashboard-card-acesso { border-top: 4px solid var(--dash-purple); }
.dashboard-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.dashboard-card-title h2 {
    margin: 0;
    color: var(--texto);
    font-size: 15px;
    font-weight: 700;
}
.dashboard-card-title small {
    display: block;
    margin-top: 3px;
    color: var(--cinza);
    font-size: 12px;
}
.dashboard-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--dash-blue), #6a8dff);
    color: #fff;
    font-weight: 800;
}
.dashboard-card .indicadores { margin-bottom: 0; }
.dashboard-card .indicador {
    border-color: #e9eaee;
    border-radius: 10px;
    box-shadow: none;
}
.dashboard-card .indicador:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(20, 25, 45, .10);
}
.dashboard-card .indicador:nth-child(3n+2) { border-top: 3px solid var(--dash-green); }
.dashboard-card .indicador:nth-child(3n+3) { border-top: 3px solid var(--dash-orange); }
.dashboard-card .indicador.destaque { border-top: 3px solid var(--dash-blue); }
.dashboard-section-title {
    margin-top: 22px;
    padding: 0 2px 8px;
    border-bottom: 1px solid #dce5ef;
}
.dashboard-card-acesso .acoes { margin-bottom: 0; }

@media (max-width: 620px) {
    .dashboard-home-head { flex-direction: column; }
    .dashboard-refresh { width: 100%; text-align: center; }
    .dashboard-card { padding: 16px 14px; }
}

/* =========================================================================
   IDENTIDADE GPR 360 -- camada visual sobre o painel Standalone.
   A estrutura e as classes funcionais acima continuam intocadas; este bloco
   aproxima o cromo do layout beta sem importar Azzara/Bootstrap.
   ========================================================================= */
:root {
    --azul: var(--gpr-bg-900);
    --azul-claro: var(--gpr-blue-deep);
    --fundo: var(--gpr-page);
    --branco: var(--gpr-surface);
    --texto: var(--gpr-text-primary);
    --borda: var(--gpr-border);
    --verde: var(--gpr-success);
    --vermelho: var(--gpr-danger);
    --amarelo: var(--gpr-warning);
    --cinza: var(--gpr-muted);
}

html { min-height: 100%; }
body {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--gpr-page);
    color: var(--gpr-text-primary);
    line-height: 1.5;
}
.pagina-painel { min-height: 100vh; }
.painel-shell { display: flex; min-height: 100vh; }
.painel-sidebar {
    width: 248px;
    flex: 0 0 248px;
    min-height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow-y: auto;
    padding: 24px 14px 20px;
    color: #fff;
    background: linear-gradient(160deg, var(--gpr-bg-950) 0%, var(--gpr-bg-900) 62%, #020d1e 100%);
    box-shadow: 8px 0 24px rgba(4, 20, 46, .10);
    z-index: 20;
}
.painel-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    text-decoration: none;
    padding: 0 10px 24px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.painel-brand:hover { color: #fff; }
.painel-brand strong { display: block; font-size: 17px; letter-spacing: -.02em; }
.painel-brand small { display: block; margin-top: 2px; color: #9db8dc; font-size: 10px; }
.painel-brand-mark, .login-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    border: 1px solid rgba(0,224,255,.5);
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--gpr-blue), var(--gpr-cyan));
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 0 18px rgba(0,191,255,.20);
}
.painel-nav-label {
    margin: 24px 10px 8px;
    color: #6e8caf;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}
.painel-sidebar .menu { display: flex; flex-direction: column; gap: 3px; }
.painel-sidebar .menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 10px 12px;
    border-left: 3px solid transparent;
    border-radius: 9px;
    color: #c4d5e7;
    text-decoration: none;
    font-size: 13px;
    transition: background var(--gpr-motion), color var(--gpr-motion), border-color var(--gpr-motion);
}
.painel-sidebar .menu a:hover,
.painel-sidebar .menu a.ativo {
    color: #fff;
    background: rgba(0, 191, 255, .12);
    border-left-color: var(--gpr-green);
}
.menu-icon {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border: 1px solid #6e8caf;
    border-radius: 3px;
}
.menu a.ativo .menu-icon { border-color: var(--gpr-cyan); background: var(--gpr-cyan); box-shadow: 0 0 9px rgba(0,224,255,.6); }
.painel-main { min-width: 0; flex: 1; }
.painel-main .topo {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 32px;
    color: var(--gpr-text-primary);
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--gpr-border);
    box-shadow: 0 2px 12px rgba(15,23,42,.04);
    position: sticky;
    top: 0;
    z-index: 15;
}
.topo-context { display: flex; flex-direction: column; gap: 3px; }
.topo-context strong { font-size: 18px; letter-spacing: -.02em; }
.topo-eyebrow { color: var(--gpr-blue); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.painel-main .usuario { display: flex; align-items: center; gap: 11px; color: var(--gpr-text-primary); }
.usuario-nome { font-size: 13px; font-weight: 700; }
.usuario .tenant { color: var(--gpr-muted); font-size: 11px; }
.usuario-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--gpr-bg-900), var(--gpr-blue-deep)); font-size: 13px; font-weight: 800; }
.sair-form { margin: 0; }
.painel-main .sair { padding: 7px 11px; border: 1px solid var(--gpr-border); border-radius: 8px; color: var(--gpr-danger); background: #fff; font-size: 12px; }
.painel-main .topo .usuario .sair { color: var(--gpr-danger); }
.painel-main .sair:hover { background: var(--gpr-danger-bg); }
.conteudo { max-width: 1480px; margin: 0 auto; padding: 30px 34px 52px; }
.conteudo > h1 { margin: 0 0 5px; color: var(--gpr-text-primary); font-size: 25px; font-weight: 750; letter-spacing: -.03em; }
.subtitulo { color: var(--gpr-text-secondary); }
.cartao, .dashboard-card {
    border-color: var(--gpr-border);
    border-radius: var(--gpr-radius-md);
    box-shadow: var(--gpr-shadow-sm);
}
.cartao:hover { border-color: #c5d7e9; }
.formulario input, .formulario select, .formulario textarea, .filtros input, .filtros select, .login input {
    border-color: #c5d3e1;
    border-radius: var(--gpr-radius-sm);
    background: #fff;
    color: var(--gpr-text-primary);
    transition: border-color var(--gpr-motion), box-shadow var(--gpr-motion);
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus, .filtros input:focus, .filtros select:focus, .login input:focus {
    outline: none;
    border-color: var(--gpr-cyan);
    box-shadow: 0 0 0 3px rgba(0, 224, 255, .14);
}
button, .botao { border-radius: var(--gpr-radius-sm); transition: transform var(--gpr-motion), box-shadow var(--gpr-motion), background var(--gpr-motion); }
button:hover, .botao:hover { transform: translateY(-1px); box-shadow: var(--gpr-shadow-sm); }
.botao { background: var(--gpr-bg-900); }
.botao:hover { background: var(--gpr-blue-deep); }
.botao.secundario { background: #fff; border: 1px solid var(--gpr-border); color: var(--gpr-blue-deep); }
.botao.perigo { background: var(--gpr-danger); }
.tabela { border-color: var(--gpr-border); border-radius: var(--gpr-radius-md); box-shadow: var(--gpr-shadow-sm); }
.tabela th { padding: 13px 14px; border-bottom: 2px solid var(--gpr-border); color: var(--gpr-text-secondary); background: var(--gpr-surface-soft); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.tabela td { padding: 13px 14px; border-top-color: var(--gpr-border); }
.tabela tbody tr { transition: background var(--gpr-motion); }
.tabela tbody tr:hover td { background: rgba(0, 191, 255, .035); }
.badge, .status { border-radius: 999px; }
.alerta.ok { color: #08783e; background: var(--gpr-success-bg); border: 1px solid rgba(16,185,129,.2); }
.alerta.erro { color: #b4232c; background: var(--gpr-danger-bg); border: 1px solid rgba(239,68,68,.18); }
.indicador { border-radius: var(--gpr-radius-md); box-shadow: var(--gpr-shadow-sm); }
.indicador:hover { border-color: var(--gpr-blue); box-shadow: 0 5px 16px rgba(0,102,255,.12); }
.dashboard-home-head h2 { color: var(--gpr-text-primary); }
.dashboard-kicker { color: var(--gpr-blue); }
.dashboard-card { background: linear-gradient(145deg, #fff, #f7faff); }

/* Login aprovado: hero azul + formulario prioritario, sem controles falsos. */
.pagina-login { min-height: 100vh; background: #f5f8fb; }
.pagina-login .login-topo { display: none; }
.pagina-login .login-topo .marca { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; }
.pagina-login .login-topo .marca small { margin-left: 3px; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 400; }
.pagina-login .conteudo { max-width: none; margin: 0; padding: 0; }
.pagina-login .conteudo > h1 { display: none; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 55%) minmax(360px, 45%); }
.login-hero { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 116px 10vw 54px 9vw; color: #fff; background: radial-gradient(circle at 82% 14%, rgba(0,230,118,.22), transparent 30%), radial-gradient(circle at 12% 86%, rgba(0,224,255,.2), transparent 38%), linear-gradient(150deg, var(--gpr-bg-950), var(--gpr-bg-900) 60%, #020d1e); }
.login-grid { position: absolute; inset: 0; opacity: .30; background-image: linear-gradient(rgba(0,224,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0,224,255,.12) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); }
.login-orb { position: absolute; width: 280px; height: 280px; border: 1px solid rgba(0,224,255,.23); border-radius: 50%; pointer-events: none; }
.login-orb::after { content: ""; position: absolute; inset: 28px; border: 1px solid rgba(0,230,118,.18); border-radius: inherit; }
.login-orb-a { right: -120px; top: 22%; transform: rotate(24deg); }
.login-orb-b { left: -180px; bottom: -130px; transform: scale(1.35); }
.login-hero-brand, .login-hero-copy, .login-endorsement { position: relative; z-index: 1; }
.login-hero-brand { display: flex; align-items: center; gap: 12px; font-size: 25px; font-weight: 800; letter-spacing: -.04em; }
.login-mark { width: 45px; height: 45px; flex-basis: 45px; border-radius: 14px; font-size: 25px; }
.login-hero-copy { max-width: 520px; margin-top: auto; margin-bottom: auto; }
.login-eyebrow, .login-kicker { color: var(--gpr-cyan); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.login-hero-copy h2 { max-width: 650px; margin: 12px 0 16px; color: #fff; font-size: clamp(32px, 4vw, 56px); line-height: 1.08; letter-spacing: -.045em; }
.login-hero-copy p { max-width: 430px; margin: 0; color: rgba(255,255,255,.74); font-size: 17px; line-height: 1.65; }
.login-endorsement { margin: 0; color: rgba(255,255,255,.55); font-size: 12px; letter-spacing: .06em; }
.login-endorsement strong { color: rgba(255,255,255,.88); }
.login-side { display: flex; align-items: center; justify-content: center; padding: 56px clamp(28px, 7vw, 96px); background: #f7f9fb; }
.login-form-wrap { width: min(100%, 390px); }
.login-accent { display: block; width: 46px; height: 4px; margin-bottom: 24px; border-radius: 99px; background: linear-gradient(90deg, var(--gpr-green), var(--gpr-cyan)); }
.login-form-wrap .login-kicker { margin: 0 0 7px; color: var(--gpr-green-dark); font-size: 11px; }
.login-form-wrap h2 { margin: 0; color: var(--gpr-bg-950); font-size: 31px; letter-spacing: -.035em; }
.login-subtitle { margin: 8px 0 30px; color: var(--gpr-text-secondary); font-size: 14px; }
.login-form label { display: block; margin: 0 0 19px; color: var(--gpr-text-primary); font-size: 12px; font-weight: 800; }
.login-form input { width: 100%; height: 52px; margin-top: 7px; padding: 0 15px; border-radius: 10px; font-size: 15px; }
.login-password-field { display: block; position: relative; }
.login-password-field input { padding-right: 74px; }
.login-password-toggle { position: absolute; right: 8px; top: 50%; padding: 6px 8px; transform: translateY(-50%); color: var(--gpr-blue-deep); background: transparent; font-size: 11px; font-weight: 800; }
.login-password-toggle:hover { color: var(--gpr-cyan-dark, #0099cc); background: transparent; box-shadow: none; transform: translateY(-50%); }
.login-submit { position: relative; width: 100%; height: 54px; margin-top: 7px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(90deg, var(--gpr-green-dark), #00c9a0 45%, var(--gpr-blue)); font-size: 15px; font-weight: 800; box-shadow: 0 10px 26px rgba(0,153,255,.20); }
.login-submit:hover { background: linear-gradient(90deg, #00a943, #00b88e 45%, #005ce6); }
.login-submit:focus-visible, .login-password-toggle:focus-visible, .login-form input:focus-visible { outline: 3px solid rgba(0,191,255,.32); outline-offset: 2px; }
.login-submit:disabled { cursor: wait; opacity: .74; }
.login-spinner { display: none; width: 16px; height: 16px; margin-left: 8px; vertical-align: middle; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: gpr-spin .7s linear infinite; }
.login-submit.is-loading .login-spinner { display: inline-block; }
.login-security { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 27px 0 0; padding-top: 17px; border-top: 1px solid var(--gpr-border); color: var(--gpr-muted); font-size: 11px; }
.login-security span { color: var(--gpr-green); font-size: 9px; }
@keyframes gpr-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .painel-sidebar { width: 216px; flex-basis: 216px; }
    .conteudo { padding-left: 24px; padding-right: 24px; }
    .login-layout { grid-template-columns: 1fr; }
    .login-hero { min-height: 310px; padding: 92px 9vw 34px; }
    .login-hero-copy { margin: 55px 0 0; }
    .login-hero-copy h2 { font-size: clamp(30px, 7vw, 46px); }
    .login-hero-copy p { font-size: 15px; }
    .login-side { min-height: calc(100vh - 310px); padding-top: 50px; padding-bottom: 50px; }
}
@media (max-width: 640px) {
    .painel-shell { display: block; }
    .painel-sidebar { width: 100%; min-height: auto; position: relative; padding: 13px 14px; }
    .painel-brand { padding: 0 6px 12px; border-bottom: 0; }
    .painel-nav-label { display: none; }
    .painel-sidebar .menu { flex-direction: row; overflow-x: auto; padding: 7px 0 1px; }
    .painel-sidebar .menu a { flex: 0 0 auto; min-height: 36px; padding: 8px 10px; border-left: 0; border-bottom: 3px solid transparent; font-size: 12px; }
    .painel-sidebar .menu a.ativo { border-bottom-color: var(--gpr-green); }
    .menu-icon { display: none; }
    .painel-main .topo { min-height: 64px; padding: 12px 16px; }
    .topo-context strong { font-size: 15px; }
    .usuario-nome, .usuario .tenant { display: none; }
    .conteudo { padding: 22px 14px 40px; }
    .conteudo > h1 { font-size: 22px; }
    .tabela { display: block; overflow-x: auto; white-space: nowrap; }
    .login-topo { padding: 18px 20px !important; }
    .login-hero { min-height: 270px; padding: 78px 24px 28px; }
    .login-hero-brand { font-size: 21px; }
    .login-mark { width: 38px; height: 38px; flex-basis: 38px; font-size: 21px; }
    .login-hero-copy { margin-top: 34px; }
    .login-eyebrow { font-size: 9px; letter-spacing: .1em; }
    .login-hero-copy h2 { margin-top: 8px; font-size: 30px; }
    .login-hero-copy p { font-size: 13px; line-height: 1.45; }
    .login-endorsement { font-size: 11px; }
    .login-side { min-height: auto; padding: 42px 24px 50px; }
    .login-form-wrap h2 { font-size: 27px; }
}