/* ==========================================================================
   KONEXA360 — identidade própria (navy + dourado)
   Tipografia Century Gothic · tokens únicos · sidebar recolhível
   ========================================================================== */

:root{
  /* Tipografia */
  --ft:"Century Gothic", Questrial, "URW Gothic", "Apple Gothic", "Futura", "Trebuchet MS", sans-serif;
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-lg:15px; --fs-xl:19px; --fs-2xl:24px;

  /* Marca */
  --c-brand:#0A2444;      /* navy do logotipo */
  --c-brand-2:#123058;
  --c-gold:#D4A22C;       /* dourado do logotipo */
  --c-gold-soft:#FBF3E1;

  /* Neutros */
  --c-bg:#F4F5F7;
  --c-surface:#FFFFFF;
  --c-sidebar:var(--c-brand);
  --c-sidebar-2:var(--c-brand-2);
  --c-sidebar-tx:#BFCBDC;
  --c-line:#E2E5EA;
  --c-text:#1B2432;
  --c-text-2:#5A6472;
  --c-text-3:#8C95A3;

  /* Acento e status */
  --c-accent:var(--c-brand);   --c-accent-soft:#E9EEF6;
  --c-ok:#2E7D5B;          --c-ok-soft:#E6F2EC;
  --c-warn:#B07D18;        --c-warn-soft:#FBF2E0;
  --c-crit:#B3453C;        --c-crit-soft:#FAEAE8;
  --c-info:#3C6E9F;        --c-info-soft:#EAF1F8;

  /* Espaçamento */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* Forma */
  --r-sm:4px; --r-md:6px; --r-lg:10px;
  --sh:0 1px 2px rgba(10,36,68,.06), 0 1px 3px rgba(10,36,68,.05);

  /* Layout */
  --w-sidebar:232px; --w-sidebar-min:56px; --h-topbar:56px;
  --w-nav:var(--w-sidebar);
}
body.nav-collapsed{ --w-nav:var(--w-sidebar-min); }

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--c-bg);color:var(--c-text);
  font-family:var(--ft);font-size:var(--fs-md);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.25;margin:0;font-weight:700}
a{color:var(--c-accent);text-decoration:none}
a:hover{text-decoration:underline}
input,select,textarea,button{font-family:inherit}

/* ============================================================ LOGIN ===== */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--s5);background:var(--c-sidebar);
  background-image:
    linear-gradient(rgba(10,36,68,.90), rgba(6,24,46,.97)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px);
}
.login-card{
  width:100%;max-width:400px;background:var(--c-surface);
  border-radius:var(--r-lg);box-shadow:0 12px 40px rgba(0,0,0,.35);
  padding:var(--s6) var(--s6) var(--s5);
}
.login-marca{text-align:center;margin-bottom:var(--s6)}
.login-marca .barra{width:56px;height:2px;background:var(--c-gold);margin:var(--s3) auto 0}
.login-marca .logo{max-width:250px;width:80%;height:auto;display:block;margin:0 auto}
.login-marca .tag{
  margin-top:var(--s1);font-size:var(--fs-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-text-3)
}
.login-card .campo{margin-bottom:var(--s4)}
.login-rodape{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--c-line);
  font-size:var(--fs-xs);color:var(--c-text-3);text-align:center;line-height:1.6
}

/* ============================================================ SHELL ===== */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--w-nav);flex:0 0 var(--w-nav);background:var(--c-sidebar);
  color:var(--c-sidebar-tx);display:flex;flex-direction:column;overflow:hidden;
  transition:width .16s ease, flex-basis .16s ease;position:sticky;top:0;
  height:100vh;max-height:100vh
}
.nav-brand{
  display:flex;align-items:center;gap:var(--s3);height:var(--h-topbar);
  padding:0 var(--s4);border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto
}
.nav-mark{width:24px;height:24px;flex:0 0 24px;display:none;object-fit:contain}
body.nav-collapsed .nav-mark{display:block}
.nav-brand .nav-logo{height:20px;width:auto;display:block}
.nav-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--s2) 0 var(--s3);
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#33507A transparent
}
.nav-scroll::-webkit-scrollbar{width:8px}
.nav-scroll::-webkit-scrollbar-track{background:transparent}
.nav-scroll::-webkit-scrollbar-thumb{background:#2C466C;border-radius:4px;border:2px solid var(--c-sidebar)}
.nav-scroll::-webkit-scrollbar-thumb:hover{background:#3D5C88}
body.nav-collapsed .nav-scroll{scrollbar-width:none}
body.nav-collapsed .nav-scroll::-webkit-scrollbar{width:0}
.nav-grupo{
  display:flex;align-items:flex-start;gap:var(--s2);width:100%;
  padding:var(--s4) var(--s4) var(--s1);font-family:inherit;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.12em;color:var(--c-gold);white-space:nowrap;
  font-weight:700;background:none;border:0;cursor:pointer;text-align:left
}
.nav-grupo:hover{color:#F0C766}
.nav-grupo:focus-visible{outline:2px solid var(--c-gold);outline-offset:-2px}
.nav-grupo small{display:block;text-transform:none;letter-spacing:.02em;color:#7F8CA0;
  font-size:var(--fs-xs);font-weight:400;margin-top:1px}
.nav-seta{flex:0 0 10px;line-height:1.5;transition:transform .15s ease;font-size:10px}
.nav-grupo[aria-expanded="false"] .nav-seta{transform:rotate(-90deg)}
.nav-grupo[aria-expanded="false"] + .nav-lista{display:none}
.nav-vazio{display:block;padding:0 var(--s4) var(--s2) calc(var(--s4) + 22px);
  font-size:var(--fs-xs);color:var(--c-text-3);font-style:italic}
.nav-item{
  display:flex;align-items:center;gap:var(--s3);height:34px;padding:0 var(--s4);
  color:var(--c-sidebar-tx);text-decoration:none;white-space:nowrap;
  border-left:3px solid transparent;font-size:var(--fs-sm)
}
.nav-item:hover{background:var(--c-sidebar-2);text-decoration:none;color:#fff}
.nav-item.is-active{background:var(--c-sidebar-2);border-left-color:var(--c-gold);color:#fff}
.nav-ico{width:20px;flex:0 0 20px;text-align:center;font-size:14px}
.nav-toggle{
  margin-top:auto;display:flex;align-items:center;gap:var(--s3);height:38px;
  padding:0 var(--s4);background:none;border:0;border-top:1px solid rgba(255,255,255,.08);
  color:var(--c-sidebar-tx);font:inherit;font-size:var(--fs-sm);cursor:pointer;flex:0 0 auto
}
.nav-toggle:hover{background:var(--c-sidebar-2)}
.nav-versao{
  padding:var(--s2) var(--s4) var(--s3);font-size:var(--fs-xs);color:var(--c-text-3);
  white-space:nowrap;flex:0 0 auto
}
body.nav-collapsed .nav-label,
body.nav-collapsed .nav-grupo,
body.nav-collapsed .nav-versao{display:none}
/* recolhida, a sidebar mostra todos os ícones — o agrupamento não faz sentido sem rótulo */
body.nav-collapsed .nav-grupo[aria-expanded="false"] + .nav-lista{display:block}
body.nav-collapsed .nav-item,
body.nav-collapsed .nav-toggle,
body.nav-collapsed .nav-brand{justify-content:center;padding:0}
body.nav-collapsed .nav-item{border-left-width:3px}
body.nav-collapsed .nav-toggle .nav-ico{transform:rotate(180deg)}

.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}

.topbar{
  height:var(--h-topbar);flex:0 0 var(--h-topbar);background:var(--c-surface);
  border-bottom:1px solid var(--c-line);display:flex;align-items:center;
  gap:var(--s4);padding:0 var(--s5);position:sticky;top:0;z-index:20
}
.topbar h1{font-size:var(--fs-lg);font-weight:700}
.topbar .ctx{font-size:var(--fs-sm);color:var(--c-text-2)}
.topbar .acoes{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.usr{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--c-text-2)}
.usr .avatar{
  width:28px;height:28px;border-radius:50%;background:var(--c-accent-soft);
  color:var(--c-accent);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:700
}

.conteudo{padding:var(--s5);max-width:1440px;width:100%}

/* ======================================================== COMPONENTES === */
.card{
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:var(--s5);margin-bottom:var(--s5)
}
.card > h2{font-size:var(--fs-lg);margin-bottom:var(--s1)}
.card > .sub{font-size:var(--fs-sm);color:var(--c-text-2);margin-bottom:var(--s4)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s4);margin-bottom:var(--s5)}
.kpi{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:var(--s4)}
.kpi .rot{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-2)}
.kpi .val{font-size:var(--fs-2xl);font-weight:700;margin-top:var(--s1);font-variant-numeric:tabular-nums}
.kpi .obs{font-size:var(--fs-xs);color:var(--c-text-3);margin-top:var(--s1)}

.grid-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s4)}
.tool{
  display:flex;flex-direction:column;gap:var(--s2);background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh);
  padding:var(--s4);color:var(--c-text);text-decoration:none;transition:border-color .12s ease
}
.tool:hover{border-color:var(--c-accent);text-decoration:none}
.tool .t-ico{
  width:34px;height:34px;border-radius:var(--r-md);background:var(--c-accent-soft);
  color:var(--c-accent);display:flex;align-items:center;justify-content:center;font-size:16px
}
.tool .t-nome{font-weight:700;font-size:var(--fs-md)}
.tool .t-desc{font-size:var(--fs-sm);color:var(--c-text-2);line-height:1.45}
.tool.indisponivel{opacity:.55;pointer-events:none}

.sec-mod{margin-bottom:var(--s6)}

.sec-mod > .sec-cab{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3);
  width:100%;background:none;border:0;font-family:inherit;cursor:pointer;text-align:left;padding:0}
.sec-mod > .sec-cab:hover h2{color:var(--c-brand-2)}
.sec-mod .sec-seta{font-size:11px;color:var(--c-gold);transition:transform .15s ease;line-height:2}
.sec-mod > .sec-cab[aria-expanded="false"] .sec-seta{transform:rotate(-90deg)}
.sec-mod > .sec-cab[aria-expanded="false"] + .sec-corpo{display:none}
.sec-mod h2{font-size:var(--fs-lg);text-transform:uppercase;letter-spacing:.10em;color:var(--c-brand)}
.sec-mod .sub-mod{font-size:var(--fs-sm);color:var(--c-text-2)}

.sec-mod > .sec-cab{border-bottom:2px solid var(--c-gold);padding-bottom:var(--s2)}
.sec-mod .cnt{font-size:var(--fs-xs);color:var(--c-text-3)}

/* Tabela */
table.tb{width:100%;border-collapse:collapse;background:var(--c-surface)}
table.tb th{
  position:sticky;top:0;background:var(--c-bg);text-align:left;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-2);font-weight:700;
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--c-line);white-space:nowrap;z-index:1
}
table.tb td{padding:0 var(--s3);height:36px;border-bottom:1px solid var(--c-line);font-size:var(--fs-sm)}
table.tb tbody tr:hover{background:var(--c-accent-soft)}
table.tb .num,table.tb .dt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-wrap{overflow-x:auto;border:1px solid var(--c-line);border-radius:var(--r-md)}

/* Logomarcas */
.logo-previa{border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s3);background:var(--c-bg);text-align:center}
.logo-previa img{max-width:220px;max-height:70px;display:block;object-fit:contain}
.logo-mini{max-width:96px;max-height:34px;object-fit:contain;display:block}

/* Coluna de ações fixada à direita em tabelas largas */
table.tb th.acoes,table.tb td.acoes{
  position:sticky;right:0;background:var(--c-surface);
  box-shadow:-6px 0 6px -6px rgba(10,36,68,.18)
}
table.tb th.acoes{background:var(--c-bg);z-index:2}
table.tb tbody tr:hover td.acoes{background:var(--c-accent-soft)}

/* Chips */
.chip{display:inline-block;border-radius:var(--r-sm);font-size:var(--fs-xs);padding:2px 8px;white-space:nowrap}
.chip-ok{background:var(--c-ok-soft);color:var(--c-ok)}
.chip-warn{background:var(--c-warn-soft);color:var(--c-warn)}
.chip-crit{background:var(--c-crit-soft);color:var(--c-crit)}
.chip-info{background:var(--c-info-soft);color:var(--c-info)}
.chip-off{background:var(--c-bg);color:var(--c-text-3)}

/* Formulário */
.campo{display:block;margin-bottom:var(--s3)}
.campo > span{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-2);margin-bottom:var(--s1)}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  width:100%;height:32px;padding:0 var(--s2);border:1px solid var(--c-line);
  border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-text);font-size:var(--fs-sm)
}
textarea{height:auto;min-height:64px;padding:var(--s2);line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 2px var(--c-accent-soft)}
.linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3)}

/* Botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:32px;padding:0 14px;border-radius:var(--r-md);border:1px solid transparent;
  font-size:var(--fs-sm);cursor:pointer;text-decoration:none;white-space:nowrap
}
.btn:hover{text-decoration:none}
.btn-primario{background:var(--c-accent);color:#fff}
.btn-primario:hover{background:var(--c-brand-2);color:#fff}
.btn-sec{background:var(--c-surface);border-color:var(--c-line);color:var(--c-text)}
.btn-sec:hover{border-color:var(--c-text-3)}
.btn-ter{background:none;color:var(--c-accent);padding:0 var(--s2)}
.btn-crit{background:var(--c-surface);border-color:var(--c-line);color:var(--c-crit)}
.btn-bloco{width:100%}
.btn-sm{height:26px;padding:0 10px;font-size:var(--fs-xs)}

/* Avisos */
.aviso{border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:var(--fs-sm);margin-bottom:var(--s4);border:1px solid transparent}
.aviso-ok{background:var(--c-ok-soft);color:var(--c-ok);border-color:var(--c-ok)}
.aviso-erro{background:var(--c-crit-soft);color:var(--c-crit);border-color:var(--c-crit)}
.aviso-warn{background:var(--c-warn-soft);color:var(--c-warn);border-color:var(--c-warn)}
.aviso-info{background:var(--c-info-soft);color:var(--c-info);border-color:var(--c-info)}

/* Estado vazio */
.vazio{
  text-align:center;padding:var(--s7) var(--s5);color:var(--c-text-2);
  border:1px dashed var(--c-line);border-radius:var(--r-lg);background:var(--c-surface)
}
.vazio .ico{font-size:28px;color:var(--c-text-3);margin-bottom:var(--s3)}
.vazio h3{font-size:var(--fs-lg);margin-bottom:var(--s2)}
.vazio p{margin:0 auto;max-width:520px;font-size:var(--fs-sm);line-height:1.6}

/* Abas do admin */
.abas{display:flex;gap:var(--s1);border-bottom:1px solid var(--c-line);margin-bottom:var(--s5)}
.abas a{
  padding:var(--s2) var(--s4);font-size:var(--fs-sm);color:var(--c-text-2);
  border-bottom:2px solid transparent;margin-bottom:-1px
}
.abas a:hover{color:var(--c-text);text-decoration:none}
.abas a.is-active{color:var(--c-accent);border-bottom-color:var(--c-accent);font-weight:700}

/* Matriz de permissões */
.matriz{overflow:auto;max-height:60vh;border:1px solid var(--c-line);border-radius:var(--r-md)}
.matriz table{border-collapse:separate;border-spacing:0;width:100%}
.matriz th,.matriz td{border-bottom:1px solid var(--c-line);padding:var(--s2) var(--s3);font-size:var(--fs-sm)}
.matriz thead th{position:sticky;top:0;background:var(--c-bg);z-index:2;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-2)}
.matriz tbody th{position:sticky;left:0;background:var(--c-surface);text-align:left;font-weight:400;z-index:1}
.matriz td{text-align:center}
.matriz input[type=checkbox]{width:16px;height:16px;accent-color:var(--c-accent);cursor:pointer}

/* Visualizador de ferramenta */
.viewer{flex:1 1 auto;display:flex;min-height:0}
.viewer iframe{flex:1 1 auto;width:100%;border:0;background:var(--c-surface)}

hr.sep{border:0;border-top:1px solid var(--c-line);margin:var(--s5) 0}
.mut{color:var(--c-text-2)}
.mut-3{color:var(--c-text-3)}
.fs-xs{font-size:var(--fs-xs)}
.mt4{margin-top:var(--s4)}
.mb0{margin-bottom:0}
.dir{text-align:right}
.flex{display:flex;align-items:center;gap:var(--s2)}
.flex-end{margin-left:auto}

@media (max-width:768px){
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:40;box-shadow:0 0 40px rgba(0,0,0,.4)}
  body:not(.nav-open) .sidebar{transform:translateX(-100%)}
  .conteudo{padding:var(--s4)}
  .topbar{padding:0 var(--s4)}
}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}
@media print{
  .sidebar,.topbar,.nav-toggle,.no-print,.abas{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid var(--c-line);break-inside:avoid}
  table{break-inside:auto} tr{break-inside:avoid} thead{display:table-header-group}
  @page{size:A4 portrait;margin:12mm}
}

/* ---------- Painel: abas de Minhas demandas ---------- */
.kx-aba.is-on{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.kx-aba.is-on:hover{border-color:var(--c-brand)}

/* ---------- Dashboard: grade dos gráficos ---------- */
.grid-viz{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--s4);margin-bottom:var(--s4)}
.grid-viz .card{margin:0}
.mb0{margin-bottom:0}
@media print{.grid-viz{grid-template-columns:1fr 1fr}}

/* ================================================== KX 1.2.0 ============ */
/* Gaveta do menu no celular: abre sempre inteira — "recolhida" é estado de desktop */
.nav-fechar{
  display:none;align-items:center;gap:var(--s3);height:38px;padding:0 var(--s4);
  background:none;border:0;border-top:1px solid rgba(255,255,255,.08);
  color:var(--c-sidebar-tx);font:inherit;font-size:var(--fs-sm);cursor:pointer;flex:0 0 auto
}
.nav-fechar:hover{background:var(--c-sidebar-2)}

@media (max-width:768px){
  body.nav-collapsed{ --w-nav:var(--w-sidebar) }
  .sidebar{width:min(280px,86vw);flex-basis:min(280px,86vw)}
  body.nav-collapsed .nav-label,
  body.nav-collapsed .nav-versao{display:block}
  body.nav-collapsed .nav-grupo{display:flex}
  body.nav-collapsed .nav-mark{display:none}
  body.nav-collapsed .nav-item,
  body.nav-collapsed .nav-brand{justify-content:flex-start;padding:0 var(--s4)}
  body.nav-collapsed .nav-grupo[aria-expanded="false"] + .nav-lista{display:none}
  .nav-toggle{display:none}
  .nav-fechar{display:flex}
  body.nav-open::after{content:'';position:fixed;inset:0;background:rgba(10,36,68,.45);z-index:35}
}

/* Linha de grupo nas listas de demandas */
table.tb tr.kx-grp td{
  background:var(--c-bg);border-top:2px solid var(--c-line);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-2)
}
table.tb tr.kx-grp td strong{font-size:var(--fs-sm);letter-spacing:0;text-transform:none;color:var(--c-text)}
.kx-barra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.kx-barra label{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-2)}
.kx-barra select{width:auto;height:28px}
.kx-pag{display:flex;align-items:center;gap:var(--s3);justify-content:flex-end;
  padding:var(--s3) 0 0;font-size:var(--fs-sm);color:var(--c-text-2)}

/* GD embed: restaura os botoes do padrao do portal sobre fundo claro (sobrepoe #gdEmbed .btn) */
#gdEmbed .btn.btn-primario{background:var(--c-accent);color:#fff}
#gdEmbed .btn.btn-primario:hover{background:var(--c-brand-2);color:#fff}
#gdEmbed .btn.btn-sec{background:var(--c-surface);border:1px solid var(--c-line);color:var(--c-text)}
#gdEmbed .btn.btn-sec:hover{background:var(--c-surface);border-color:var(--c-text-3);color:var(--c-text)}