@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Tipografia base do app */
  font-size: 14px;
  line-height: 1.25;
  background-color: #f5f5f5;
  /* ✅ Usar variável garantida (evita Undefined variable) */
  color: #222;
}

.container-fluid {
  width: 100%;
  padding: 0 20px;
}

/* ==================================================
   🔲 Painéis padrão (Paciente / Endereço / Procedimentos, Header etc.)
   ================================================== */
.frame-input,
.form-panel {
  background-color: #f8f9fa;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 12px;
}

/* ==================================================
   🧱 Colunas internas do painel (Paciente/Endereço/Proc)
   ================================================== */
.frame-input .col-lg-4,
.frame-input .col-md-6,
.frame-input .col-md-12 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==================================================
   📦 Frames secundários (linhas abaixo do cabeçalho)
   ================================================== */
.frame2,
.frame4,
.frame5,
.frame6 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

/* ==================================================
   🧾 HEADER — NOVO PADRÃO (GRID 7 COLUNAS)
   (Neutraliza o layout antigo .frame1 flex)
   ================================================== */
.header-panel {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 12px;
  /* ✅ garante que não herde display:flex do .frame1 legado */
  display: block !important;
}

/* 7 colunas: logo + 6 grupos (Desktop-first, evita “micro-colunas”) */
.header-grid {
  display: grid;
  grid-template-columns: 72px minmax(260px, 2.2fr) minmax(220px, 1.6fr) minmax(260px, 2fr) minmax(220px, 1.4fr) minmax(320px, 2.6fr) minmax(240px, 1.8fr); /* autorização */
  -moz-column-gap: 12px;
       column-gap: 12px;
  row-gap: 8px;
  align-items: start;
}

/* separadores verticais como na sua 1ª imagem */
.header-grid > * {
  min-width: 0;
  padding-right: 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.header-grid > *:last-child {
  border-right: none;
  padding-right: 0;
}

/* Logo */
.header-logo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* separador do logo mais “limpo” */
  padding-right: 8px;
}

#app-logo {
  display: block;
  max-width: 60px;
  max-height: 60px;
  width: auto;
  height: auto;
}

/* Tooltip do logo */
.logo-wrapper {
  position: relative;
}

.logo-wrapper:hover .tooltip-content {
  display: block;
}

/* Cada coluna informativa (2 campos empilhados) */
.header-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Campo do header: label em cima + input abaixo */
.header-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.header-field label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  color: #222;
  margin: 0;
  /* evita quebrar em várias linhas e “empilhar palavra por palavra” */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-field .form-control {
  height: 30px;
  padding: 4px 8px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #ffffff;
  width: 100%;
  min-width: 0;
}

/* Ajuste fino: inner-grid no header (se usar em algum ponto) */
.header-panel .inner-grid {
  row-gap: 6px;
  -moz-column-gap: 10px;
       column-gap: 10px;
}

#header-section label,
#body-section label {
  font-weight: bold;
  font-size: 12px;
}

#header-section .input-small {
  max-width: 80px;
}
#header-section .input-medium {
  max-width: 100px;
}
#header-section .input-large {
  max-width: 500px;
}
#header-section label {
  min-width: 80px;
}

#body-section .input-small {
  max-width: 150px;
}
#body-section .input-medium {
  max-width: 250px;
}
#body-section .input-large {
  max-width: 400px;
}
#body-section label {
  min-width: 100px;
}
#body-section .form-control-inline {
  background-color: #f7f7f7;
  border-color: #ddd;
}

.inner-grid {
  display: grid;
  grid-template-columns: 1fr 0.55fr;
  -moz-column-gap: 12px;
       column-gap: 12px;
  row-gap: 6px;
  align-items: start;
}

/* Coluna lógica esquerda */
.inner-grid .col-a {
  grid-column: 1;
}

/* Coluna lógica direita (Qt, Tipo, UF, etc.) */
.inner-grid .col-b {
  grid-column: 2;
}

/* Campo que ocupa as 2 colunas (ex: nome do paciente, endereço completo, etc.) */
.inner-grid .full {
  grid-column: 1/-1;
}

.inner-grid--paciente {
  grid-template-columns: 1fr 0.55fr;
}

.inner-grid--endereco {
  grid-template-columns: 1fr 0.7fr;
}

.inner-grid--proc {
  grid-template-columns: 1fr 0.45fr;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Labels */
.form-group label {
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.1;
  color: #333;
}

/* Inputs padrão */
.form-group .form-control {
  height: 28px;
  padding: 2px 6px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  width: 100%;
  min-width: 0;
}

.input-mini {
  max-width: 90px;
}

.input-small {
  max-width: 140px;
}

.input-medium {
  max-width: 220px;
}

.input-large {
  max-width: 320px;
}

#cns {
  width: 180px !important;
}

#sexo {
  width: 100px !important;
}

#data_nascimento,
.date-input {
  width: 140px !important;
}

.error-message {
  color: #d9534f;
  font-size: 11px;
  margin-top: 2px;
}

.form-group .form-control.input-error {
  border-color: #d9534f;
  box-shadow: 0 0 0 0.2rem rgba(217, 83, 79, 0.25);
}

.form-control-inline {
  display: inline-block;
  width: auto !important;
  flex: none;
  height: 30px;
  padding: 2px 6px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #ffffff;
}

.frame1 .form-control-inline {
  width: 100% !important;
  max-width: 180px;
}

.table-container {
  max-height: 400px;
  overflow-y: auto;
}
.table-container tr.is-selected {
  background-color: #e8f2ff;
}
.table-container tr.grid-selected {
  background-color: #e8f2ff;
}

.af-box {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  background-color: #f8f9fa;
}

.tooltip-content {
  display: none;
  position: absolute;
  left: 110%;
  background-color: rgba(51, 51, 51, 0.9);
  color: #ffffff;
  padding: 10px;
  border-radius: 4px;
  width: 250px;
  z-index: 10;
}

.btn-check:checked + .btn-outline-secondary {
  color: #0d6efd;
  font-weight: 600;
}

.actions-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
}/*# sourceMappingURL=apac_bpa.css.map */