/* ==========================================================================
   Sistemas Visão - o que muda em relação à folha herdada (soma.css)

   Carregada DEPOIS de soma.css. Três assuntos, e só eles:
     1. a navegação em coluna lateral (no soma-sistema era uma barra em cima);
     2. a marca Sistemas Visão (cores do logotipo, tela de entrada);
     3. as telas que só existem aqui (Dashboards, Configurador, Assinantes).
   ========================================================================== */

:root{
  --lateral: 236px;

  /* Paleta do logotipo (IMAGENS/cores.css) */
  --sv-azul: #0060df;
  --sv-azul-claro: #12a3f9;
  --sv-azul-escuro: #0b3a8c;
  --sv-grafite: #24282f;
}

/* --------------------------------------------------------------------------
   1. Coluna lateral
   -------------------------------------------------------------------------- */
.app-lateral{ padding-left:var(--lateral); }

.lateral{
  position:fixed;
  top:0; bottom:0; left:0;
  z-index:75;
  width:var(--lateral);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  background:var(--navy-900);
  color:var(--white);
  box-shadow:2px 0 10px rgba(14,27,48,.18);
}

.lateral-marca{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  height:84px;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.lateral-marca img{ display:block; width:100%; max-width:196px; height:auto; }

.lateral-nav{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:14px 0;
}

.lateral-item{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:0 18px 0 15px;
  border-left:3px solid transparent;
  color:rgba(255,255,255,.76);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:.2px;
  text-decoration:none;
  white-space:nowrap;
}
.lateral-item svg{ flex:none; width:19px; height:19px; opacity:.9; }
.lateral-item:hover{ color:var(--white); background:var(--navy-800); }
.lateral-item.ativo{
  color:var(--white);
  background:var(--navy-700);
  border-left-color:var(--sv-azul-claro);
}
.lateral-item:focus-visible{ outline:2px solid var(--white); outline-offset:-3px; }

/* O painel da plataforma fica separado: não é uma área da empresa. */
.lateral-divisor{
  margin:14px 18px 6px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

.lateral-pe{
  flex:none;
  padding:14px 18px 16px;
  border-top:1px solid rgba(255,255,255,.10);
  line-height:1.3;
}
.lateral-pe strong{
  display:block;
  font-size:var(--fs-sm);
  font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lateral-pe small{ display:block; margin-top:2px; font-size:var(--fs-xs); color:rgba(255,255,255,.62); }

/* A faixa de cima perdeu o menu: sobra a empresa à esquerda e a conta à direita. */
.app-lateral .topo{
  grid-template-columns:1fr auto;
  grid-template-areas:"marca direita";
  height:56px;
  padding:0 24px;
  row-gap:0;
}
.topo-empresa-nome{
  display:block;
  max-width:46vw;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:var(--fs-md);
  font-weight:600;
  letter-spacing:.2px;
  color:var(--white);
}

.lateral-botao{
  display:none;
  align-items:center; justify-content:center;
  width:38px; height:38px; padding:0;
  color:var(--white); background:transparent;
  border:1px solid rgba(255,255,255,.28);
  cursor:pointer;
}
.lateral-botao svg{ width:20px; height:20px; }
.lateral-botao:hover{ background:rgba(255,255,255,.10); }

.lateral-fundo{
  position:fixed; inset:0; z-index:84;
  background:rgba(14,27,48,.45);
}

/* Celular e tablet em pé: a coluna recolhe e abre por cima da tela. */
@media (max-width:900px){
  .app-lateral{ padding-left:0; }
  .lateral{
    z-index:85;
    transform:translateX(-100%);
    transition:transform .18s ease;
  }
  .lateral.aberta{ transform:none; }
  .lateral-botao{ display:inline-flex; }
  .app-lateral .topo{ padding:0 14px; }
}
@media (min-width:901px){
  .lateral-fundo{ display:none; }
}

/* No papel não existe navegação. */
@media print{
  .lateral, .lateral-fundo, .lateral-botao{ display:none !important; }
  .app-lateral{ padding-left:0; }
}

/* --------------------------------------------------------------------------
   2. Marca - tela de entrada
   -------------------------------------------------------------------------- */
.tela-login{
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(18,163,249,.34) 0%, transparent 62%),
    linear-gradient(155deg, #0b2f73 0%, #071a3d 52%, #050f24 100%);
}
.login-cartao{ border-top-color:var(--sv-azul); }
.lg-marca img{ width:230px; max-width:80%; }
.lg-entrar{ background:var(--sv-azul); }
.lg-entrar:hover{ background:var(--sv-azul-escuro); }

.lg-ok{
  margin:0 0 16px; padding:10px 12px;
  border-radius:9px;
  background:#E8F6EE; border:1px solid #B5E0C6; color:#145C33;
  font-size:var(--fs-sm);
}
.lg-link{ color:var(--sv-azul); font-weight:600; text-decoration:none; }
.lg-link:hover{ text-decoration:underline; }

/* A tela de criar conta tem mais campos: o cartão alarga e os campos andam em
   duas colunas quando cabem. */
.login-cartao.cartao-conta{ max-width:620px; }
.conta-grade{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.conta-grade .inteira{ grid-column:1 / -1; }
@media (max-width:620px){ .conta-grade{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   3. Telas próprias
   -------------------------------------------------------------------------- */

/* Dashboards: os indicadores da manutenção em uma linha. */
.kpis.kpis-visao{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:1100px){ .kpis.kpis-visao{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .kpis.kpis-visao{ grid-template-columns:1fr; } }
.kpis-visao .kpi{ border-left-color:var(--sv-azul); }
.kpis-visao .kpi.kpi-atencao{ border-left-color:var(--red); }
a.kpi{ display:block; color:inherit; text-decoration:none; }
a.kpi:hover{ box-shadow:var(--shadow-2, 0 4px 14px rgba(16,24,40,.12)); }

.painel-duplo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:1000px){ .painel-duplo{ grid-template-columns:1fr; } }
.painel-duplo .bloco{ margin-bottom:0; }

/* A barra do mês: quanto da preventiva já foi baixada. */
.barra-mes{
  height:14px; margin:10px 0 8px;
  background:var(--gray-100);
  border:1px solid var(--gray-200);
  overflow:hidden;
}
.barra-mes span{ display:block; height:100%; background:var(--sv-azul); }
.barra-mes-legenda{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:var(--fs-sm); color:var(--gray-700); }
.barra-mes-legenda b{ color:var(--ink); }

/* Primeiros passos: o assinante novo abre o sistema vazio e precisa de um
   caminho, e não de quatro zeros. */
.passos-inicio{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
@media (max-width:900px){ .passos-inicio{ grid-template-columns:1fr; } }
.passo-inicio{
  display:block; padding:16px 18px;
  color:inherit; text-decoration:none;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-top:3px solid var(--sv-azul);
}
.passo-inicio:hover{ background:var(--gray-050); }
.passo-inicio b{ display:block; margin-bottom:4px; font-size:var(--fs-md); }
.passo-inicio span{ font-size:var(--fs-sm); color:var(--gray-700); }
.passo-inicio.feito{ border-top-color:#1E7A3C; }
.passo-inicio.feito b::after{ content:" ✓"; color:#1E7A3C; }

/* Configurador: os cartões de entrada. */
.cfg-grade{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width:1000px){ .cfg-grade{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:620px){ .cfg-grade{ grid-template-columns:1fr; } }
.cfg-cartao{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px;
  color:inherit; text-decoration:none;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-left:4px solid var(--sv-azul);
  box-shadow:var(--shadow-1);
}
.cfg-cartao:hover{ background:var(--gray-050); }
.cfg-cartao svg{ flex:none; width:26px; height:26px; color:var(--sv-azul); }
.cfg-cartao b{ display:block; margin-bottom:4px; font-size:var(--fs-md); }
.cfg-cartao span{ font-size:var(--fs-sm); color:var(--gray-700); line-height:1.4; }
.cfg-cartao.cfg-plataforma{ border-left-color:var(--sv-grafite); }
.cfg-cartao.cfg-plataforma svg{ color:var(--sv-grafite); }

/* Assinantes: uso do plano dentro da célula. */
.uso-plano{ font-size:var(--fs-sm); white-space:nowrap; }
.uso-plano.cheio{ color:var(--red); font-weight:700; }
.form-linha{ display:inline; }
.acoes-linha{ display:flex; gap:6px; flex-wrap:wrap; }

/* O carimbo ao lado do nome (Em gestão) não ocupa a linha inteira. */
td strong + .carimbo{ display:inline-block; width:auto; margin-left:6px; vertical-align:middle; }

/* Seletor de plano na tela de criar conta (mesmo desenho do campo de entrada). */
.lg-select{ width:100%; border:0; background:transparent; font:inherit; font-size:15px; font-weight:500; color:var(--ink); padding:2px 0; outline:none; cursor:pointer; }