/* Linha clean da Virtual Service aplicada ao sistema (skill virtual-service-clean).
   Fundo claro em degrade, cartoes brancos com sombra tingida de azul, azul usado
   com intencao, titulos em Montserrat e corpo em Inter. Carregado por ultimo. */

:root {
  --vs-azul: #0084B1;
  --vs-azul-profundo: #0A6F94;
  --vs-azul-abismo: #064A63;
  --vs-azul-vivo: #3FB4DD;
  --vs-azul-nevoa: #E3F1F7;
  --vs-grafite: #1F1B1E;
  --vs-texto: #6B656A;
  --vs-linha: #E4E8EE;
  --vs-fundo: linear-gradient(120deg, #FFFFFF 0%, #FFFFFF 40%, #EEF3F7 100%);
  --vs-fita: radial-gradient(circle at 30% 42%, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(160deg, #3FB4DD 0%, #0084B1 42%, #0A6F94 72%, #064A63 100%);
  --vs-selo: linear-gradient(135deg, #3FB4DD 0%, #0084B1 55%, #0A6F94 100%);
  --sombra: 0 1px 2px rgba(6, 74, 99, .05), 0 12px 28px rgba(6, 74, 99, .08);
  --raio: 18px;
  --raio-pequeno: 10px;
  --largura-sidebar: 248px;
}

body {
  background: var(--vs-fundo) fixed;
  color: var(--vs-grafite);
}

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

.login {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--vs-fundo);
  display: flex;
  align-items: center;
  padding: 48px 8vw;
}

.login__caixa {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, .92);
  border-radius: 24px;
  padding: 36px 34px 28px;
  box-shadow: 0 22px 44px rgba(6, 74, 99, .12);
  border: 1px solid rgba(228, 232, 238, .8);
  text-align: left;
}

.login__logo { width: 180px; display: block; margin: 0 0 18px; }
.login__traco { width: 36px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #3FB4DD, #0084B1); margin-bottom: 18px; }
.login__titulo { font-family: var(--titulo); font-weight: 700; font-size: 32px; line-height: 1.05; letter-spacing: -1px; color: var(--vs-grafite); margin: 0 0 10px; }
.login__titulo span { color: var(--vs-azul); }
.login__apoio { color: var(--vs-texto); font-size: 14px; line-height: 1.5; margin: 0 0 22px; }
.login__formulario { display: grid; gap: 14px; background: none; border: 0; box-shadow: none; padding: 0; }
.login__formulario .campo__rotulo { color: var(--vs-grafite); }
.login__formulario input { background: #fff; color: var(--vs-grafite); border-color: var(--vs-linha); }
.login__rodape { color: var(--vs-texto); font-size: 12px; margin: 18px 0 0; text-align: left; }

.login__fita { position: absolute; z-index: 1; border-radius: 64px; transform: rotate(14deg); width: 34vw; max-width: 520px; height: 130vh; top: -15vh; }
.login__fita--tras { right: -6vw; background: linear-gradient(160deg, #6CC6E8, #3FA9D6); opacity: .8; }
.login__fita--frente { right: -10vw; background: var(--vs-fita); }
.login__brilho { position: absolute; z-index: 1; right: 14vw; top: -10vh; width: 2px; height: 120vh; transform: rotate(14deg); background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0)); }
.login__anel { position: absolute; z-index: 0; border-radius: 50%; box-sizing: border-box; }
.login__anel--grosso { left: -180px; bottom: -160px; width: 460px; height: 460px; border: 30px solid rgba(0, 132, 177, .07); }
.login__anel--fino { left: -100px; bottom: -80px; width: 300px; height: 300px; border: 1.5px solid rgba(0, 132, 177, .18); }

/* Shell --------------------------------------------------------------- */

.sidebar {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(8px);
  border-right: 1px solid var(--vs-linha);
  color: var(--vs-grafite);
  padding: 24px 14px 18px;
  overflow-y: auto;
}
.sidebar__logo { max-width: 150px; margin: 0 8px 14px; }
.sidebar__traco { width: 32px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #3FB4DD, #0084B1); margin: 0 10px 14px; }
.sidebar__menu { display: grid; gap: 14px; }
.sidebar__grupo { display: grid; gap: 2px; }
.sidebar__grupo-titulo { font-family: var(--titulo); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vs-azul); padding: 0 12px 4px; }
.sidebar__link { color: #4A4448; padding: 9px 12px; border-radius: 10px; font-size: 14px; }
.sidebar__link:hover { background: var(--vs-azul-nevoa); color: var(--vs-azul-profundo); }
.sidebar__link.ativo { background: var(--vs-selo); color: #fff; box-shadow: 0 8px 18px rgba(0, 132, 177, .25); }
.sidebar__rodape { color: #9A949A; }

.topbar { background: rgba(255, 255, 255, .8); backdrop-filter: blur(8px); border-bottom: 1px solid var(--vs-linha); }
.topbar__titulo { color: var(--vs-grafite); }
.topbar__menu { display: none; }
.botao--pequeno { padding: 7px 12px; font-size: 13px; }
.botao--largo { width: 100%; }
.botao { border-radius: 10px; }

.pagina__titulo { font-size: 24px; letter-spacing: -.4px; }
.cartao { background: #fff; border: 1px solid var(--vs-linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.tabela-envolucro { border-color: var(--vs-linha); border-radius: 14px; box-shadow: var(--sombra); }
thead th { background: #F3F5F8; color: #4A4448; letter-spacing: .08em; }
tbody tr:nth-child(even) { background: #FAFBFC; }

/* Pecas novas --------------------------------------------------------- */

.kicker { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; background: var(--vs-azul-nevoa); border-radius: 99px; font: 600 10.5px var(--corpo); letter-spacing: 1.1px; color: var(--vs-azul-profundo); text-transform: uppercase; }
.kicker::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: var(--vs-azul); }

.grade-funcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.funcao { position: relative; background: #fff; border: 1px solid var(--vs-linha); border-radius: 16px; padding: 18px; box-shadow: var(--sombra); display: grid; gap: 8px; text-decoration: none; color: inherit; }
.funcao--bloqueada { opacity: .55; }
.funcao__nome { font-family: var(--titulo); font-weight: 700; font-size: 15px; }
.funcao__linha { display: flex; gap: 6px; flex-wrap: wrap; }
.funcao__selo { position: absolute; top: -12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--vs-selo); box-shadow: 0 8px 16px rgba(0, 132, 177, .3); }
.secao-titulo { font-family: var(--titulo); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vs-azul); margin: 8px 0 10px; }

.matriz { display: grid; gap: 14px; }
.matriz__grupo { background: #fff; border: 1px solid var(--vs-linha); border-radius: 14px; padding: 14px 16px; }
.matriz__titulo { font-family: var(--titulo); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.matriz__itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.matriz__item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; padding: 4px 0; }
.matriz__item input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--vs-azul); flex: none; }
.matriz__marca { font-size: 11px; color: var(--vs-azul-profundo); background: var(--vs-azul-nevoa); border-radius: 99px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }
.matriz__marca--tirado { color: var(--erro-texto); background: var(--erro-fundo); }

.numero-grande { font-family: var(--titulo); font-weight: 800; font-size: 30px; color: var(--vs-azul); line-height: 1; }
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.indicador { background: #fff; border: 1px solid var(--vs-linha); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sombra); display: grid; gap: 6px; }
.indicador__rotulo { font-size: 12px; color: var(--vs-texto); }

.alerta { border-left: 4px solid var(--atencao-borda); background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: var(--sombra); display: grid; gap: 4px; }
.alerta__titulo { font-weight: 600; }
.alerta__apoio { font-size: 13px; color: var(--vs-texto); }

.chave-salva { font-family: ui-monospace, Menlo, monospace; background: #F3F5F8; border-radius: 8px; padding: 4px 8px; }

@media (max-width: 900px) {
  .login { padding: 32px 18px; }
  .login__fita { width: 60vw; right: -40vw; opacity: .55; }
  .login__brilho { display: none; }
  .login__titulo { font-size: 28px; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 82vw; max-width: 300px; height: 100vh;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    transform: translateX(-102%); transition: transform .2s ease; z-index: 30;
    padding: 24px 14px; box-shadow: 0 0 40px rgba(6, 74, 99, .2);
  }
  .shell--menu-aberto .sidebar { transform: none; }
  .sidebar__logo, .sidebar__rodape { display: block; }
  .sidebar__link { flex-direction: row; font-size: 15px; justify-content: flex-start; text-align: left; flex: none; }
  .topbar__menu { display: inline-grid; gap: 4px; background: none; border: 0; padding: 6px; cursor: pointer; }
  .topbar__menu span { width: 20px; height: 2px; background: var(--vs-grafite); border-radius: 2px; display: block; }
  .topbar__papel, .topbar__usuario .botao--secundario[href] { display: none; }
  .conteudo { padding: 16px; }
}

/* Seletor de condominio do topo, no padrao do Service Hub */
.seletor-cond { position: relative; margin-right: auto; min-width: 0; }
.seletor-cond__botao {
  display: grid; text-align: left; gap: 1px; min-width: 220px; max-width: 340px;
  background: #fff; border: 1px solid var(--vs-linha); border-radius: 12px;
  padding: 6px 34px 6px 12px; cursor: pointer; position: relative; font: inherit; color: var(--vs-grafite);
}
.seletor-cond__botao::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--vs-azul); border-bottom: 2px solid var(--vs-azul); transform: rotate(45deg);
}
.seletor-cond__botao:hover, .seletor-cond__botao[aria-expanded="true"] { border-color: var(--vs-azul-vivo); box-shadow: 0 0 0 3px var(--vs-azul-nevoa); }
.seletor-cond__kicker { font-family: var(--titulo); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vs-azul); }
.seletor-cond__nome { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seletor-cond--todos .seletor-cond__nome { color: var(--vs-texto); font-weight: 500; }
.seletor-cond:not(.seletor-cond--todos) .seletor-cond__botao { background: var(--vs-azul-nevoa); border-color: rgba(0, 132, 177, .35); }
.seletor-cond__painel {
  position: absolute; top: calc(100% + 6px); left: 0; width: min(380px, 92vw); z-index: 40;
  background: #fff; border: 1px solid var(--vs-linha); border-radius: 14px; box-shadow: 0 18px 40px rgba(6, 74, 99, .16); padding: 10px;
}
.seletor-cond__busca { width: 100%; box-sizing: border-box; border: 1px solid var(--vs-linha); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px; }
.seletor-cond__busca:focus { outline: none; border-color: var(--vs-azul-vivo); box-shadow: 0 0 0 3px var(--vs-azul-nevoa); }
.seletor-cond__lista { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.seletor-cond__item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.seletor-cond__item small { color: var(--vs-texto); font-size: 12px; white-space: nowrap; }
.seletor-cond__item.foco { background: var(--vs-azul-nevoa); }
.seletor-cond__item.ativo { color: var(--vs-azul-profundo); font-weight: 600; }
.seletor-cond__item.ativo::after { content: ''; width: 6px; height: 11px; border-right: 2px solid var(--vs-azul); border-bottom: 2px solid var(--vs-azul); transform: rotate(45deg); flex: none; }
.linha--ativa td { background: var(--vs-azul-nevoa); }
.link-botao { background: none; border: 0; padding: 0; font: inherit; color: var(--vs-azul-profundo); font-weight: 600; cursor: pointer; text-align: left; }
.link-botao:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .topbar__titulo { display: none; }
  .seletor-cond { flex: 1; }
  .seletor-cond__botao { min-width: 0; max-width: none; width: 100%; }
}

/* Menu em modulos que abrem e fecham, no padrao do Service Hub */
.sidebar__menu { gap: 6px; }
.sidebar__grupo--fixo { margin-bottom: 8px; }
.sidebar__modulo {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--vs-grafite); cursor: pointer; text-align: left;
}
.sidebar__modulo:hover { background: var(--vs-azul-nevoa); color: var(--vs-azul-profundo); }
.sidebar__icone { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--vs-azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar__modulo-nome { flex: 1; }
.sidebar__seta { width: 7px; height: 7px; border-right: 2px solid #9A949A; border-bottom: 2px solid #9A949A; transform: rotate(-45deg); transition: transform .15s ease; margin-right: 4px; }
.sidebar__grupo--modulo.aberto .sidebar__seta { transform: rotate(45deg); border-color: var(--vs-azul); }
.sidebar__grupo--modulo.tem-ativo .sidebar__modulo { color: var(--vs-azul-profundo); }
.sidebar__sublista { display: grid; gap: 2px; margin: 2px 0 6px 21px; padding-left: 10px; border-left: 1px solid var(--vs-linha); }
.sidebar__sublista[hidden] { display: none; }
.sidebar__sublista .sidebar__link { font-size: 13.5px; padding: 8px 12px; }

/* Tela generica das funcoes */
.funcao-escolhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.funcao-escolha { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.funcao-resultado__texto { font-size: 15px; line-height: 1.5; color: var(--vs-grafite); margin: 0; }
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover td { background: var(--vs-azul-nevoa); }
.campo.funcao-escolha { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.campo.funcao-escolha input { width: auto; }
.funcao-escolhas .funcao-escolha,
label.campo.funcao-escolha { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; }
.funcao-escolhas .funcao-escolha input[type="checkbox"],
label.campo.funcao-escolha input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; margin: 0; padding: 0; flex: none; }