/* SIGEPAT — layout: barra de acessibilidade, sidebar clara (modelo), topbar, dropdowns */

.barra-acessibilidade {
    display: flex; gap: var(--esp-3); align-items: center; flex-wrap: wrap;
    background: var(--neutro-100); border-bottom: 1px solid var(--borda-padrao);
    padding: var(--esp-1) var(--esp-4); font-size: var(--fonte-tamanho-pequena);
    color: var(--texto-principal);
}
.barra-acessibilidade button {
    font: inherit; cursor: pointer; background: var(--fundo-superficie); color: var(--texto-principal);
    border: 1px solid var(--borda-padrao); border-radius: var(--raio-1);
    padding: var(--esp-1) var(--esp-2); min-height: 32px;
}
.barra-acessibilidade button[aria-pressed="true"] { background: var(--cor-primaria-700); color: #fff; }

.app-shell { display: flex; min-height: 100vh; }

/* ---------------- Sidebar clara com grupos e ícones (estilo do modelo) ----------------
   Largura controlada por variável, ajustável pelo usuário (alça de redimensionar). */
:root { --sidebar-largura: 220px; }
.sidebar {
    width: var(--sidebar-largura); flex-shrink: 0;
    min-width: 64px; max-width: 400px;
    background: var(--fundo-sidebar); color: var(--texto-sidebar);
    border-right: 1px solid var(--borda-padrao);
    padding: var(--esp-4) var(--esp-3);
    display: flex; flex-direction: column; gap: var(--esp-2);
    position: relative;
    overflow: hidden;
}

/* Alça de redimensionamento (arrastar ou setas do teclado; duplo clique restaura) */
.sidebar-redimensionar {
    position: absolute; top: 0; right: 0; width: 8px; height: 100%;
    cursor: col-resize; z-index: 5;
    background: transparent;
    border: none; padding: 0;
}
.sidebar-redimensionar:hover,
.sidebar-redimensionar:focus-visible { background: var(--cor-primaria-300); opacity: 0.6; outline: none; }

/* Modo estreito (largura < 150px): só ícones, com tooltip nativo via title */
.sidebar.sidebar-estreita .menu-rotulo,
.sidebar.sidebar-estreita .sidebar-grupo-titulo,
.sidebar.sidebar-estreita .sidebar-rodape,
.sidebar.sidebar-estreita .sidebar-nome { display: none; }
.sidebar.sidebar-estreita .sidebar-menu a { justify-content: center; padding: var(--esp-2); }
.sidebar.sidebar-estreita .sidebar-marca { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar-marca {
    display: flex; align-items: center; gap: var(--esp-3);
    padding: var(--esp-2) var(--esp-2) var(--esp-4);
    border-bottom: 1px solid var(--borda-padrao); margin-bottom: var(--esp-2);
}
.sidebar-logo {
    width: 40px; height: 40px; border-radius: var(--raio-3); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--cor-primaria-700); color: #fff; font-size: 1.2rem;
}
.sidebar-logo-img {
    width: 44px; height: 44px; object-fit: contain; flex-shrink: 0;
    border-radius: var(--raio-2); background: #fff; padding: 2px;
}
.sidebar-nome { font-weight: 800; letter-spacing: 0.03em; color: var(--texto-principal); line-height: 1.1; }
.sidebar-nome small { display: block; font-weight: 500; font-size: 0.7rem; letter-spacing: 0.12em; color: var(--texto-suave); text-transform: uppercase; }

.sidebar-grupo-titulo {
    text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; font-weight: 700;
    color: var(--texto-suave); padding: var(--esp-3) var(--esp-2) var(--esp-1); margin: 0;
}
.sidebar-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-menu a {
    display: flex; align-items: center; gap: var(--esp-3);
    color: var(--texto-sidebar); text-decoration: none; font-weight: 600; font-size: 0.94rem;
    padding: var(--esp-2) var(--esp-3); min-height: 42px;
    border-radius: var(--raio-full);
    transition: background var(--duracao-rapida) var(--curva-padrao);
}
.sidebar-menu a .icone { flex-shrink: 0; opacity: 0.85; }
.sidebar-menu a:hover { background: var(--fundo-sidebar-hover); color: var(--texto-principal); }
.sidebar-menu a[aria-current="page"] {
    background: var(--fundo-sidebar-ativo); color: var(--texto-sidebar-ativo);
    box-shadow: var(--sombra-1);
}
.sidebar-menu a[aria-current="page"] .icone { opacity: 1; }

.sidebar-rodape {
    margin-top: auto; padding: var(--esp-3);
    background: var(--cor-primaria-50); border: 1px solid var(--borda-padrao);
    border-radius: var(--raio-3); font-size: var(--fonte-tamanho-pequena);
    color: var(--texto-principal);
}
.sidebar-rodape .barra-grafico { margin: var(--esp-2) 0; }

/* ---------------- Corpo e topbar ---------------- */
.app-corpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    display: flex; align-items: center; gap: var(--esp-4);
    background: var(--fundo-superficie); border-bottom: 1px solid var(--borda-padrao);
    padding: var(--esp-3) var(--esp-5);
}
.topbar-busca { flex: 1; max-width: 420px; position: relative; }
.topbar-busca input {
    width: 100%; font: inherit; color: var(--texto-principal);
    background: var(--neutro-100); border: 1px solid transparent;
    border-radius: var(--raio-full); padding: var(--esp-2) var(--esp-4) var(--esp-2) 42px; min-height: 42px;
}
.topbar-busca input:focus { outline: none; box-shadow: var(--foco-anel); background: var(--fundo-superficie); }
.topbar-busca .icone { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--texto-suave); pointer-events: none; }
.topbar-acoes { display: flex; align-items: center; gap: var(--esp-2); margin-left: auto; }

.botao-icone {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--raio-full);
    background: transparent; border: none; cursor: pointer; color: var(--texto-suave);
}
.botao-icone:hover { background: var(--neutro-100); color: var(--texto-principal); }
.badge-notificacao {
    position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px;
    background: var(--cor-erro); color: #fff; border-radius: var(--raio-full);
    font-size: 0.65rem; font-weight: 700; line-height: 16px; text-align: center; padding: 0 3px;
}

/* Dropdowns (usuário e notificações) */
.dropdown { position: relative; }
.dropdown-gatilho {
    display: flex; align-items: center; gap: var(--esp-2); cursor: pointer;
    background: transparent; border: none; font: inherit; color: var(--texto-principal);
    padding: var(--esp-1) var(--esp-2); border-radius: var(--raio-2); min-height: 44px;
}
.dropdown-gatilho:hover { background: var(--neutro-100); }
.avatar {
    width: 38px; height: 38px; border-radius: var(--raio-full); flex-shrink: 0;
    background: var(--cor-primaria-700); color: #fff; font-weight: 700; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center;
}
.dropdown-usuario-nome { text-align: left; line-height: 1.15; }
.dropdown-usuario-nome small { display: block; color: var(--texto-suave); font-size: 0.72rem; }
.dropdown-painel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
    min-width: 260px; background: var(--fundo-superficie);
    border: 1px solid var(--borda-padrao); border-radius: var(--raio-3);
    box-shadow: var(--sombra-3); padding: var(--esp-2);
}
.dropdown-painel[hidden] { display: none; }
.dropdown-cabecalho { padding: var(--esp-3); border-bottom: 1px solid var(--borda-padrao); margin-bottom: var(--esp-2); }
.dropdown-cabecalho strong { display: block; }
.dropdown-cabecalho small { color: var(--texto-suave); }
.dropdown-item {
    display: flex; align-items: center; gap: var(--esp-3); width: 100%;
    padding: var(--esp-2) var(--esp-3); min-height: 42px; border-radius: var(--raio-2);
    color: var(--texto-principal); text-decoration: none; font: inherit;
    background: transparent; border: none; cursor: pointer; text-align: left;
}
.dropdown-item:hover { background: var(--neutro-100); }
.dropdown-item-perigo { color: var(--cor-erro); }
.dropdown-separador { border: none; border-top: 1px solid var(--borda-padrao); margin: var(--esp-2) 0; }

.breadcrumb { display: flex; gap: var(--esp-2); align-items: center; font-size: var(--fonte-tamanho-pequena); color: var(--texto-suave); padding: var(--esp-3) var(--esp-5) 0; }
.breadcrumb a { color: var(--texto-suave); }

.conteudo { flex: 1; padding: var(--esp-5); max-width: 1400px; width: 100%; }
.titulo-pagina { margin-bottom: var(--esp-5); }

.rodape {
    border-top: 1px solid var(--borda-padrao); padding: var(--esp-3) var(--esp-5);
    font-size: var(--fonte-tamanho-pequena); color: var(--texto-suave);
}

.grade-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--esp-5); }
.grade-3col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--esp-4); }

/* Autenticação */
.pagina-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--esp-4); background: var(--fundo-pagina); }
.auth-caixa {
    width: 100%; max-width: 420px; background: var(--fundo-superficie);
    border: 1px solid var(--borda-padrao); border-radius: var(--raio-4);
    padding: var(--esp-6); box-shadow: var(--sombra-2);
}
.auth-titulo { text-align: center; color: var(--cor-primaria-700); margin-bottom: var(--esp-1); }
.auth-subtitulo { text-align: center; color: var(--texto-suave); margin-bottom: var(--esp-5); }
.auth-rodape { text-align: center; margin-top: var(--esp-4); font-size: var(--fonte-tamanho-pequena); }

/* Público */
.pagina-publica .conteudo-publico { margin: 0 auto; }
.publico-cabecalho {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--esp-3);
    background: var(--cor-primaria-800); color: #fff; padding: var(--esp-3) var(--esp-5);
}
.publico-marca { font-weight: 700; margin: 0; }
.publico-cabecalho nav { display: flex; gap: var(--esp-4); }
.publico-cabecalho a { color: #fff; }

/* Responsivo */
@media (max-width: 1023px) {
    .app-shell { flex-direction: column; }
    .sidebar { width: 100%; max-width: 100%; border-right: none; border-bottom: 1px solid var(--borda-padrao); }
    .sidebar-redimensionar { display: none; }
    .sidebar.sidebar-estreita .menu-rotulo { display: inline; }
    .sidebar-menu { flex-direction: row; flex-wrap: wrap; }
    .sidebar-rodape { display: none; }
    .topbar { flex-wrap: wrap; }
    .topbar-busca { order: 3; max-width: 100%; flex-basis: 100%; }
    .conteudo { padding: var(--esp-4); }
    .lista-definicao { grid-template-columns: 1fr; }
    .lista-definicao dt { margin-top: var(--esp-2); }
}