/* =========================================================
   SGQ Medical - global2.css
   REV87
   =========================================================
   OBJETIVO:
   Este arquivo será a BASE VISUAL GLOBAL dos módulos SGQ Medical.

   IMPORTANTE:
   - NÃO colocar CSS específico de módulos aqui.
   - NÃO colocar regras de layout exclusivas de PGR/PCMSO/etc.
   - Este arquivo deve conter SOMENTE:
       • identidade institucional;
       • containers reutilizáveis;
       • tipografia;
       • paleta;
       • botões globais;
       • cards genéricos;
       • estruturas reutilizáveis.

   A ideia é:
   - qualquer módulo novo conseguir nascer apenas usando:
       sgq_module_shell
       sgq_module_layout
       sgq_module_card
       sgq_module_toolbar
   ========================================================= */


/* =========================================================
   1. PALETA INSTITUCIONAL
   =========================================================
   Centralização das cores oficiais do sistema.
   Isso evita espalhar HEX pelo projeto inteiro.
   ========================================================= */

:root {
  --sgq-navy: #0C1F2D;
  --sgq-blue-dark: #12334D;
  --sgq-blue: #1E5A7A;
  --sgq-accent: #F28C38;
  --sgq-card: #FFFFFF;
  --sgq-text: #0C1F2D;
  --sgq-border: #BDBDBD;
}


/* =========================================================
   2. RESET GLOBAL
   =========================================================
   Padroniza comportamento do navegador.
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}


/* =========================================================
   3. BODY GLOBAL
   =========================================================
   Fundo institucional padrão do sistema.
   ========================================================= */

body {
  margin: 0;

  padding-top: 70px;

  font-family: 'Century Gothic', Arial, sans-serif;

  color: var(--sgq-text);

  background-color: var(--sgq-blue);

  background-image:
    linear-gradient(rgba(12, 31, 45, 0.14), rgba(12, 31, 45, 0.14)),
    url("./assets/home-bg-certifmed.png");

  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}


/* =========================================================
   4. CABEÇALHO OFICIAL SGQ MEDICAL
   =========================================================
   Estrutura oficial do cabeçalho:

   .sgq_header
      ├── .sgq_brand
      └── .sgq_header_right
            ├── .sgq_header_info        Organização ativa
            ├── .sgq_header_icon_button Botão de troca/voltar
            ├── .sgq_header_info        Usuário
            └── .sgq_header_logout      Sair

   Motivo desta estrutura:
   - O logo fica sempre à esquerda.
   - Todos os itens operacionais ficam em um único bloco à direita.
   - Isso evita quebra de linha, desalinhamento e itens “caindo” para baixo.
   ========================================================= */

.sgq_header {

  position: fixed;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  z-index: 9999;

  width: calc(100% - 24px);

  min-height: 60px;

  margin: 0 auto;

  padding: 10px 28px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  background: rgba(3, 35, 48, 0.96);

  border-bottom: 1px solid rgba(255,255,255,0.10);

  box-shadow: 0 8px 24px rgba(12,31,45,0.28);
}


/* =========================================================
   5. MARCA SGQ MEDICAL
   =========================================================
   Bloco esquerdo do cabeçalho.
   Contém ícone, nome e subtítulo.
   ========================================================= */

.sgq_brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 280px;
  flex: 0 0 auto;
}

.sgq_brand_icon {

  width: 42px;
  height: 42px;

  border: 3px solid var(--sgq-accent);

  border-radius: 12px;

  display: grid;
  place-items: center;

  color: var(--sgq-accent);

  font-size: 24px;
  font-weight: 900;
}

.sgq_brand_text strong {

  display: block;

  color: #ffffff;

  font-size: 25px;

  font-weight: 900;
}

.sgq_brand_text strong span {
  color: var(--sgq-accent);
}

.sgq_brand_text small {

  display: block;

  margin-top: 5px;

  color: #ffffff;

  font-size: 10px;

  font-weight: 600;

  text-transform: uppercase;
}


/* =========================================================
   6. BLOCO DIREITO DO CABEÇALHO
   =========================================================
   Mantém todos os itens operacionais alinhados em uma linha.

   Itens:
   - Organização ativa;
   - botão troca/voltar;
   - usuário;
   - sair.
   ========================================================= */

.sgq_header_right {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 18px;

  min-width: 0;

  flex: 1 1 auto;
}


/* =========================================================
   7. DIVISORES E INFORMAÇÕES DO CABEÇALHO
   ========================================================= */

.sgq_header_divider {

  width: 1px;

  height: 34px;

  background: rgba(255,255,255,0.20);

  flex: 0 0 auto;
}

.sgq_header_info {

  display: flex;

  align-items: center;

  gap: 10px;

  color: #ffffff;

  white-space: nowrap;
}

.sgq_header_icon {

  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;
}

.sgq_header_info small {

  display: block;

  color: #ffffff;

  font-size: 11px;

  font-weight: 600;

  line-height: 1.1;
}

.sgq_header_info strong {

  display: block;

  margin-top: 2px;

  color: #ffffff;

  font-size: 12px;

  font-weight: 800;

  line-height: 1.1;
}


/* =========================================================
   8. BOTÕES GLOBAIS
   ========================================================= */

button {

  font-family: 'Century Gothic', Arial, sans-serif;

  min-height: 36px;

  padding: 8px 14px;

  border-radius: 8px;

  border: 1px solid var(--sgq-navy);

  background: var(--sgq-navy);

  color: #ffffff;

  font-weight: 800;

  cursor: pointer;
}

button:hover {

  background: var(--sgq-blue);

  border-color: var(--sgq-blue);
}

button:disabled {

  opacity: 0.45;

  cursor: not-allowed;
}

.sgq_header_icon_button {

  width: 44px;
  min-width: 44px;

  height: 44px;
  min-height: 44px;

  padding: 0;

  border-radius: 8px;

  background: rgba(12,31,45,0.70);

  border: 1px solid rgba(255,255,255,0.12);

  color: var(--sgq-accent);

  font-size: 22px;
}

.sgq_header_logout {

  background: var(--sgq-accent);

  border-color: var(--sgq-accent);
}


/* =========================================================
   9. CAMPOS GLOBAIS
   ========================================================= */

input,
select,
textarea {

  font-family: 'Century Gothic', Arial, sans-serif;

  border: 1px solid rgba(30, 90, 122, 0.35);

  border-radius: 7px;

  background: #DDEEF7;

  color: var(--sgq-navy);

  padding: 8px 10px;
}


/* =========================================================
   10. ESTRUTURA PADRÃO DOS MÓDULOS
   ========================================================= */


/* =========================================================
   .sgq_module_shell
   =========================================================
   Container principal centralizado do módulo.

   Função:
   - controla largura máxima da página;
   - centraliza conteúdo;
   - cria espaçamento lateral.
   ========================================================= */

.sgq_module_shell {

  width: calc(100% - 24px);

  margin: 20px auto;
}


/* =========================================================
   .sgq_module_layout
   =========================================================
   Grid principal do módulo.

   Função:
   - separa:
       conteúdo principal
       toolbar lateral

   Estrutura:
   [ CARD PRINCIPAL ] [ TOOLBAR ]
   ========================================================= */

.sgq_module_layout {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    180px;

  gap: 20px;

  align-items: start;
}


/* =========================================================
   .sgq_module_card
   =========================================================
   Card branco institucional do módulo.

   Função:
   - container visual principal.
   ========================================================= */

.sgq_module_card {

  background: rgba(255,255,255,0.96);

  border-radius: 18px;

  border-top: 5px solid var(--sgq-blue);

  padding: 22px;

  box-shadow: 0 18px 38px rgba(12,31,45,0.24);
}


/* =========================================================
   .sgq_module_toolbar
   =========================================================
   Toolbar lateral institucional.

   Função:
   - agrupar ações do módulo;
   - salvar;
   - navegar;
   - novo;
   - etc.
   ========================================================= */

.sgq_module_toolbar {

  background: rgba(255,255,255,0.96);

  border-radius: 16px;

  border-left: 5px solid var(--sgq-accent);

  padding: 14px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  box-shadow: 0 12px 28px rgba(12,31,45,0.18);
}


/* =========================================================
   11. RESPONSIVIDADE BÁSICA
   ========================================================= */

@media (max-width: 980px) {

  .sgq_header {

    flex-direction: column;

    align-items: stretch;
  }

  .sgq_header_right {

    justify-content: flex-start;

    flex-wrap: wrap;
  }

  .sgq_header_divider {
    display: none;
  }

  .sgq_module_layout {

    grid-template-columns: 1fr;
  }
}



/* =========================================================
   cores dos campos - durante o uso --- LINK DE LIGAÇÃO COM JS ("LINK1")
   ========================================================= */
.campo-vazio {
   background: #FFE98A !important;
}

.campo-preenchido {
  background: #ffffff !important;
}


.campo-invalido {
  background: #ffd6d6 !important;
  border-color: #c62828 !important;
}

.campo-aviso-validacao {
  margin-top: 4px;
  font-size: 12px;
  color: #c62828;
  font-weight: 600;
}

/* =========================================================
   12. MODAL GLOBAL - TROCA DE ORGANIZAÇÃO ATIVA
   =========================================================
   Modal institucional usado pelo header_contexto.js.
   Regra LEI: este visual fica no global2.css para todos os módulos.
   ========================================================= */

#sgqModalTrocarOrganizacao,
.sgq_modal_empresa_contexto,
.modal-empresa-contexto {
  width: min(92vw, 720px) !important;
  max-width: 720px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow: 0 28px 70px rgba(12,31,45,0.42) !important;
}

#sgqModalTrocarOrganizacao::backdrop,
.sgq_modal_empresa_contexto::backdrop,
.modal-empresa-contexto::backdrop {
  background: rgba(12,31,45,0.68);
  backdrop-filter: blur(2px);
}

#sgqModalTrocarOrganizacao .sgq_modal_empresa_conteudo,
.sgq_modal_empresa_contexto .sgq_modal_empresa_conteudo,
.modal-empresa-contexto > div,
.modal-empresa-contexto .modal-empresa-content {
  padding: 24px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(30,90,122,0.18) !important;
  border-top: 5px solid var(--sgq-accent) !important;
  background: rgba(255,255,255,0.98) !important;
  color: var(--sgq-navy) !important;
  font-family: 'Century Gothic', Arial, sans-serif !important;
}

#sgqModalTrocarOrganizacao h3,
.sgq_modal_empresa_contexto h3,
.modal-empresa-contexto h3 {
  margin: 0 0 8px !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  color: var(--sgq-navy) !important;
}

#sgqModalTrocarOrganizacao p,
.sgq_modal_empresa_contexto p,
.modal-empresa-contexto p {
  margin: 0 0 16px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #4b6575 !important;
}

.sgq_lista_empresas_header,
.modal-empresa-lista {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: 320px !important;
  overflow: auto !important;
  padding: 2px 4px 2px 0 !important;
}

.sgq_empresa_card_header,
.modal-empresa-item {
  width: 100% !important;
  min-height: 58px !important;
  padding: 11px 13px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
  border-radius: 12px !important;
  border: 1px solid rgba(30,90,122,0.24) !important;
  background: #F4FAFD !important;
  color: var(--sgq-navy) !important;
  cursor: pointer !important;
}

.sgq_empresa_card_header:hover,
.sgq_empresa_card_header.selecionada,
.sgq_empresa_card_header:focus,
.modal-empresa-item:hover,
.modal-empresa-item.selecionada,
.modal-empresa-item:focus {
  background: #E4F2F8 !important;
  border-color: var(--sgq-blue) !important;
  box-shadow: 0 0 0 3px rgba(30,90,122,0.10) !important;
  outline: none !important;
}

.sgq_empresa_card_header span {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.sgq_empresa_card_header strong,
.modal-empresa-item strong {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--sgq-navy) !important;
}

.sgq_empresa_card_header small,
.modal-empresa-item small {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #5E7C8E !important;
}

.sgq_empresa_card_header em {
  flex: 0 0 auto !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  color: var(--sgq-accent) !important;
  text-transform: uppercase !important;
}

.sgq_modal_empresa_acoes,
.modal-empresa-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.sgq_modal_empresa_acoes button,
.modal-empresa-actions button {
  min-height: 38px !important;
  border-radius: 9px !important;
  padding: 9px 16px !important;
}

#sgqBtnCadastrarOrganizacao {
  background: var(--sgq-navy) !important;
  border-color: var(--sgq-navy) !important;
  color: #FFFFFF !important;
}

#sgqBtnCancelarTrocaOrganizacao {
  background: #E4EEF3 !important;
  border-color: #C6D4DD !important;
  color: var(--sgq-navy) !important;
}

@media (max-width: 680px) {
  #sgqModalTrocarOrganizacao,
  .sgq_modal_empresa_contexto,
  .modal-empresa-contexto {
    width: calc(100vw - 28px) !important;
  }

  .sgq_modal_empresa_acoes,
  .modal-empresa-actions {
    justify-content: stretch !important;
  }

  .sgq_modal_empresa_acoes button,
  .modal-empresa-actions button {
    flex: 1 1 100% !important;
  }
}

/* =========================================================
   SGQ Medical - Modal global de seleção de organização
   Uso:
   - Home
   - Futuras páginas/módulos que precisarem trocar organização
   Regra:
   - Este modal é componente compartilhado.
   - Não deve depender de CSS específico da Home.
   ========================================================= */
.home-modal-empresa {
  width: min(92vw, 560px);
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 20px;
}

.home-modal-empresa::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

/* =========================================================
   SGQ Medical - Toast / Notificação global
   Uso: utils_toast.js → mostrarToast(msg, tipo)
   ========================================================= */
.sgq_toast_container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.sgq_toast {
  padding: 12px 20px;
  border-radius: 8px;
  font-family: 'Century Gothic', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
  animation: sgq_toast_in 0.22s ease;
}

.sgq_toast_sucesso { background: #2a7a3b; }
.sgq_toast_erro    { background: #b42323; }
.sgq_toast_aviso   { background: #e07c20; }

@keyframes sgq_toast_in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.home-lista-empresas {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.home-empresa-item {
  width: 100%;
  text-align: left;
  background: #ffffff;
  color: #111111;
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
}

.home-empresa-item:hover {
  background: #f2f2f2;
}

.home-empresa-item strong {
  display: block;
}

.home-empresa-item small {
  display: block;
  color: #555555;
  margin-top: 4px;
}

.home-modal-actions {
  display: flex;
  justify-content: flex-end;
}

#btnCancelarTrocaEmpresa[hidden] {
  display: none;
}


/* =========================================================
   FIELDSET PADRÃO SGQ — sgq-field
   ========================================================= */

fieldset.sgq-field {
  border: 1px solid #8BBAD4;
  border-radius: 6px;
  padding: 2px 10px 8px 10px;
  margin: 0;
  background: #DDEEF7;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
fieldset.sgq-field legend {
  font-size: 10px;
  font-weight: 600;
  color: #1E5A7A;
  padding: 1px 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #DDEEF7;
  font-family: 'Century Gothic', Arial, sans-serif;
  border: 1.5px solid #6c7ef7;
  border-radius: 4px;
}
fieldset.sgq-field input,
fieldset.sgq-field select,
fieldset.sgq-field textarea {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
  color: #0C1F2D;
  outline: none;
  padding: 2px 0;
  font-family: 'Century Gothic', Arial, sans-serif;
}
fieldset.sgq-field input.campo-vazio,
fieldset.sgq-field select.campo-vazio,
fieldset.sgq-field textarea.campo-vazio {
  background: #FFE98A;
}
fieldset.sgq-field input.campo-preenchido,
fieldset.sgq-field select.campo-preenchido,
fieldset.sgq-field textarea.campo-preenchido {
  background: transparent;
}