/*
public/assets/css/sistema.css
Este Projeto utiliza Aura OS - Desenvolvido Integralmente pelo Professor Thiago Szozda.

Função do documento:
- Design System central do shell do Aura OS.
- Define variáveis (tokens de design) e estilos para componentes globais, layouts e botões.
- Estiliza o cabeçalho personalizado e o card de rodapé do perfil do usuário.
*/

/* =========================================================
 * BLOCO: Tokens de Design
 * ========================================================= */
:root {
  /* Paleta institucional */
  --cor-primaria:       #1a2f5a;
  --cor-primaria-dark:  #0f1e3c;
  --cor-primaria-light: #2a4a8a;
  --cor-acento:         #e8a020;
  --cor-acento-dark:    #c07010;
  --cor-acento-light:   #f0c050;

  /* Neutros */
  --cor-bg:             #0d1526;
  --cor-bg-card:        #111e38;
  --cor-bg-card-hover:  #162344;
  --cor-borda:          rgba(255,255,255,0.08);
  --cor-borda-forte:    rgba(255,255,255,0.15);

  /* Texto */
  --cor-texto:          #e8edf5;
  --cor-texto-sec:      #a0aec0;
  --cor-texto-muted:    #5a6a82;

  /* Semântica */
  --cor-sucesso:        #22c55e;
  --cor-aviso:          #f59e0b;
  --cor-erro:           #ef4444;
  --cor-info:           #3b82f6;

  /* Status conexão */
  --cor-online:         #22c55e;
  --cor-offline:        #ef4444;

  /* Tipografia */
  --font-principal:     'Inter', system-ui, sans-serif;
  --font-mono:          'JetBrains Mono', monospace;
  --font-size-xs:       0.75rem;
  --font-size-sm:       0.875rem;
  --font-size-base:     1rem;
  --font-size-lg:       1.125rem;
  --font-size-xl:       1.25rem;
  --font-size-2xl:      1.5rem;
  --font-size-3xl:      2rem;

  /* Espaçamento */
  --esp-xs:   0.25rem;
  --esp-sm:   0.5rem;
  --esp-md:   1rem;
  --esp-lg:   1.5rem;
  --esp-xl:   2rem;
  --esp-2xl:  3rem;

  /* Layout shell */
  --topo-altura:   60px;
  --menu-largura:  240px;
  --rodape-altura: 0px;

  /* Border radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-pill:9999px;

  /* Sombras */
  --sombra-card:  0 2px 16px rgba(0,0,0,0.35);
  --sombra-modal: 0 8px 48px rgba(0,0,0,0.6);

  /* Transições */
  --trans-rapida: 150ms ease;
  --trans-media:  250ms ease;
}

/* =========================================================
 * BLOCO: Reset e Base
 * ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-principal);
  font-size: var(--font-size-base);
  color: var(--cor-texto);
  background: var(--cor-bg);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
}

a { color: var(--cor-acento); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; }

.noscript-aviso {
  padding: 2rem;
  text-align: center;
  background: var(--cor-erro);
  color: #fff;
  font-size: var(--font-size-lg);
}

/* =========================================================
 * BLOCO: Shell Layout
 * ========================================================= */
#app { min-height: 100dvh; display: flex; flex-direction: column; }

.aura-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* Topo */
.aura-topo {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--topo-altura);
  background: var(--cor-primaria-dark);
  border-bottom: 1px solid var(--cor-borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--esp-lg);
  gap: var(--esp-md);
  backdrop-filter: blur(8px);
}

.aura-topo__marca {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  min-width: 0;
}

.btn-toggle-menu {
  display: none;
  background: none;
  border: none;
  color: var(--cor-texto);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
}

.aura-topo__logo {
  font-size: 1.5rem;
  color: var(--cor-acento);
  line-height: 1;
}

.aura-topo__titulos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  min-width: 0;
}

.aura-topo__nome {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--cor-texto);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aura-topo__subtitulo {
  font-size: 10px;
  color: var(--cor-acento);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: 1px;
}

.aura-topo__campanha {
  font-size: var(--font-size-sm);
  color: var(--cor-acento);
  font-weight: 500;
  padding: 2px var(--esp-sm);
  border: 1px solid var(--cor-acento-dark);
  border-radius: var(--radius-pill);
}

.aura-topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-md);
}

/* Layout principal */
.aura-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: calc(100dvh - var(--topo-altura) - var(--rodape-altura));
}

/* Menu lateral */
.aura-menu {
  width: var(--menu-largura);
  min-width: var(--menu-largura);
  background: var(--cor-primaria-dark);
  border-right: 1px solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.aura-menu__cabecalho {
  padding: var(--esp-md) var(--esp-lg);
  border-bottom: 1px solid var(--cor-borda);
}

.aura-menu__titulo {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cor-texto-muted);
}

.aura-menu__lista {
  flex: 1;
  padding: var(--esp-sm) 0 80px 0; /* Espaço para não sobrepor o rodapé fixo */
  display: flex;
  flex-direction: column;
}

.aura-menu__item {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  padding: var(--esp-sm) var(--esp-lg);
  color: var(--cor-texto-sec);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--trans-rapida), color var(--trans-rapida);
  border-left: 3px solid transparent;
}

.aura-menu__item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--cor-texto);
  text-decoration: none;
  border-left-color: var(--cor-acento);
}

.aura-menu__item--ativo {
  background: rgba(232,160,32,0.1);
  color: var(--cor-acento);
  border-left-color: var(--cor-acento);
}

.aura-menu__item-icone {
  font-size: 1.1rem;
  width: 1.4rem;
  text-align: center;
}

.aura-menu__item-nome { flex: 1; }

.aura-menu__vazio {
  padding: var(--esp-md) var(--esp-lg);
  font-size: var(--font-size-sm);
  color: var(--cor-texto-muted);
}

.aura-menu__rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  width: var(--menu-largura);
  background: var(--cor-primaria-dark);
  border-top: 1px solid var(--cor-borda);
  border-right: 1px solid var(--cor-borda);
  z-index: 10;
  padding: 0;
}

/* Card de Usuário no Rodapé do Menu (Estilo Listec) */
.usuario-card-sidebar {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  padding: var(--esp-md) var(--esp-lg);
  background: rgba(255, 255, 255, 0.02);
  width: 100%;
  box-sizing: border-box;
}

.usuario-card-sidebar__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--cor-acento);
}

.usuario-card-sidebar__avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cor-primaria-light);
  color: var(--cor-acento);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-sm);
  border: 1.5px solid var(--cor-acento);
}

.usuario-card-sidebar__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.usuario-card-sidebar__nome {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--cor-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.usuario-card-sidebar__email {
  font-size: 11px;
  color: var(--cor-texto-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-top: 2px;
}

.usuario-card-sidebar__sair {
  background: none;
  border: none;
  color: var(--cor-texto-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--trans-rapida);
}

.usuario-card-sidebar__sair:hover {
  color: var(--cor-erro);
}

/* Área de conteúdo */
.aura-conteudo {
  flex: 1;
  overflow-y: auto;
  padding: var(--esp-xl);
  background: var(--cor-bg);
}

/* Rodapé técnico ocultado visualmente */
.aura-rodape {
  display: none !important;
}

/* =========================================================
 * BLOCO: Status de Conexão
 * ========================================================= */
.status-conexao {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.status-conexao__ponto {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-conexao--online .status-conexao__ponto   { background: var(--cor-online); box-shadow: 0 0 6px var(--cor-online); }
.status-conexao--offline .status-conexao__ponto  { background: var(--cor-offline); box-shadow: 0 0 6px var(--cor-offline); }
.status-conexao--verificando .status-conexao__ponto { background: var(--cor-aviso); animation: piscar 1s infinite; }
.status-conexao--online  .status-conexao__texto  { color: var(--cor-online); }
.status-conexao--offline .status-conexao__texto  { color: var(--cor-offline); }

@keyframes piscar { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* =========================================================
 * BLOCO: Sessão Info
 * ========================================================= */
.sessao-info {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
}

.sessao-info__nome {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--cor-texto);
}

/* =========================================================
 * BLOCO: Badges
 * ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.badge--primario  { background: var(--cor-acento); color: var(--cor-primaria-dark); }
.badge--neutro    { background: rgba(255,255,255,0.08); color: var(--cor-texto-sec); }
.badge--sucesso   { background: rgba(34,197,94,0.15); color: var(--cor-sucesso); }
.badge--aviso     { background: rgba(245,158,11,0.15); color: var(--cor-aviso); }
.badge--erro      { background: rgba(239,68,68,0.15); color: var(--cor-erro); }
.badge--info      { background: rgba(59,130,246,0.15); color: var(--cor-info); }
.badge--fase      { background: rgba(255,255,255,0.06); color: var(--cor-texto-muted); font-size: 10px; }

/* =========================================================
 * BLOCO: Botões
 * ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-sm);
  padding: var(--esp-sm) var(--esp-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--trans-rapida);
  text-decoration: none;
}

.btn--primario {
  background: var(--cor-acento);
  color: var(--cor-primaria-dark);
}
.btn--primario:hover { background: var(--cor-acento-light); transform: translateY(-1px); text-decoration: none; }

.btn--secundario {
  background: rgba(255,255,255,0.06);
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
}
.btn--secundario:hover { background: rgba(255,255,255,0.1); text-decoration: none; }

.btn--perigo { background: var(--cor-erro); color: #fff; }
.btn--perigo:hover { opacity: 0.85; }

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

/* =========================================================
 * BLOCO: Cards
 * ========================================================= */
.card {
  background: var(--cor-bg-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  padding: var(--esp-lg);
  box-shadow: var(--sombra-card);
  transition: border-color var(--trans-media);
}

.card:hover { border-color: var(--cor-borda-forte); }
.card__titulo { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--esp-md); color: var(--cor-texto); }
.card__subtitulo { font-size: var(--font-size-sm); color: var(--cor-texto-sec); margin-bottom: var(--esp-md); }

/* =========================================================
 * BLOCO: Inputs e Formulários
 * ========================================================= */
.campo { display: flex; flex-direction: column; gap: var(--esp-xs); }

.campo__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--cor-texto-sec);
}

.campo__input,
.campo__select,
.campo__textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  padding: var(--esp-sm) var(--esp-md);
  color: var(--cor-texto);
  font-size: var(--font-size-sm);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
  width: 100%;
}

.campo__input:focus,
.campo__select:focus,
.campo__textarea:focus {
  outline: none;
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px rgba(232,160,32,0.15);
}

.campo__textarea { resize: vertical; min-height: 80px; }
.campo__select option { background: var(--cor-primaria-dark); }

/* =========================================================
 * BLOCO: Alertas
 * ========================================================= */
.alerta {
  display: flex;
  gap: var(--esp-sm);
  padding: var(--esp-sm) var(--esp-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  border: 1px solid;
}

.alerta--info    { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); color: #93c5fd; }
.alerta--sucesso { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #86efac; }
.alerta--aviso   { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); color: #fcd34d; }
.alerta--erro    { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #fca5a5; }

/* =========================================================
 * BLOCO: Telas de Estado do Sistema
 * ========================================================= */
.sistema-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--esp-2xl);
  gap: var(--esp-md);
  min-height: 40vh;
}

.sistema-estado__icone { font-size: 3rem; line-height: 1; }
.sistema-estado__titulo { font-size: var(--font-size-2xl); font-weight: 700; }
.sistema-estado__mensagem { font-size: var(--font-size-base); color: var(--cor-texto-sec); max-width: 480px; }

.sistema-estado--erro .sistema-estado__titulo          { color: var(--cor-erro); }
.sistema-estado--acesso-negado .sistema-estado__titulo { color: var(--cor-aviso); }
.sistema-estado--info .sistema-estado__titulo          { color: var(--cor-info); }

/* =========================================================
 * BLOCO: Tela Inicial
 * ========================================================= */
.tela-inicial {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--esp-xl) 0;
}

.tela-inicial__cabecalho {
  text-align: center;
  margin-bottom: var(--esp-2xl);
}

.tela-inicial__icone {
  font-size: 4rem;
  color: var(--cor-acento);
  margin-bottom: var(--esp-md);
  display: block;
}

.tela-inicial__titulo {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--cor-texto);
  letter-spacing: -0.03em;
  margin-bottom: var(--esp-sm);
}

.tela-inicial__subtitulo {
  font-size: var(--font-size-lg);
  color: var(--cor-texto-sec);
}

/* Grade de módulos */
.modulos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--esp-lg);
}

.modulo-card {
  background: var(--cor-bg-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  padding: var(--esp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  text-decoration: none;
  transition: all var(--trans-media);
}

.modulo-card:hover {
  border-color: var(--cor-acento);
  background: var(--cor-bg-card-hover);
  transform: translateY(-2px);
  box-shadow: var(--sombra-card);
  text-decoration: none;
}

.modulo-card__icone { font-size: 2rem; line-height: 1; }
.modulo-card__nome  { font-size: var(--font-size-base); font-weight: 700; color: var(--cor-texto); }
.modulo-card__desc  { font-size: var(--font-size-sm); color: var(--cor-texto-sec); }

/* =========================================================
 * BLOCO: Notificações
 * ========================================================= */
.aura-notificacoes {
  position: fixed;
  bottom: calc(var(--rodape-altura) + var(--esp-md));
  right: var(--esp-lg);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  max-width: 360px;
  width: calc(100% - 2rem);
  pointer-events: none;
}

.notificacao {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-sm);
  padding: var(--esp-sm) var(--esp-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  box-shadow: var(--sombra-modal);
  pointer-events: all;
  border: 1px solid;
  animation: notificacaoEntrar 0.25s ease;
}

@keyframes notificacaoEntrar {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.notificacao--saindo { opacity: 0; transform: translateX(20px); transition: all 0.3s ease; }

.notificacao--info    { background: #1e2d4a; border-color: rgba(59,130,246,0.4); color: #93c5fd; }
.notificacao--sucesso { background: #0d2e1a; border-color: rgba(34,197,94,0.4); color: #86efac; }
.notificacao--aviso   { background: #2d2010; border-color: rgba(245,158,11,0.4); color: #fcd34d; }
.notificacao--erro    { background: #2d0f0f; border-color: rgba(239,68,68,0.4); color: #fca5a5; }

.notificacao__icone  { flex-shrink: 0; line-height: 1.4; }
.notificacao__texto  { flex: 1; line-height: 1.5; }
.notificacao__fechar {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: 0.6; font-size: 1.1rem;
  padding: 0; line-height: 1; flex-shrink: 0;
}
.notificacao__fechar:hover { opacity: 1; }

/* =========================================================
 * BLOCO: Splash de Carregamento
 * ========================================================= */
.aura-carregando {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  gap: var(--esp-md);
  color: var(--cor-texto-muted);
}

.aura-carregando__icone {
  font-size: 3rem;
  color: var(--cor-acento);
  animation: girar 2s linear infinite;
}

@keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.aura-carregando__texto { font-size: var(--font-size-lg); }

/* =========================================================
 * BLOCO: Responsividade Mobile
 * ========================================================= */
@media (max-width: 768px) {
  .btn-toggle-menu { display: block; }
  
  .aura-menu {
    position: fixed;
    top: var(--topo-altura);
    left: 0;
    height: calc(100dvh - var(--topo-altura));
    transform: translateX(-100%);
    transition: transform var(--trans-media);
    z-index: 1000;
    box-shadow: var(--sombra-modal);
  }
  
  .aura-menu.is-open {
    transform: translateX(0);
  }
  
  .aura-menu__rodape {
    position: absolute;
    width: 100%;
  }

  .aura-topo {
    padding: 0 var(--esp-md);
    gap: var(--esp-sm);
  }

  .aura-topo__nome {
    font-size: var(--font-size-sm);
  }

  .aura-topo__logo {
    font-size: 1.25rem;
  }

  .aura-conteudo { padding: var(--esp-md); }

  .aura-topo__campanha { display: none; }

  .sessao-info__nome { display: none; }

  .modulos-grade { grid-template-columns: 1fr 1fr; }

  .aura-notificacoes { bottom: calc(var(--rodape-altura) + var(--esp-sm)); right: var(--esp-sm); }
}

@media (max-width: 480px) {
  .aura-topo {
    padding: 0 var(--esp-sm);
  }
  .modulos-grade { grid-template-columns: 1fr; }
  .tela-inicial__titulo { font-size: var(--font-size-2xl); }
}

/* =========================================================
 * BLOCO: Acessibilidade
 * ========================================================= */
:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}