/* =====================================================================
   Prisma — Design system compartilhado
   Tokens + overrides de componentes Bootstrap 5, usados em todas as
   telas internas (login, cadastro, shell, módulos). Ver referência
   visual: prisma-prototype.jsx e a folha de tokens do produto.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --prisma-primary: #3090DB;
  --prisma-primary-dark: #1E6FB8;
  --prisma-primary-light: #E6F2FE;

  --prisma-dark: #0F172A;
  --prisma-text: #334155;
  --prisma-text-2: #64748B;
  --prisma-border: #CBD5E1;
  --prisma-bg: #F1F5F9;
  --prisma-white: #FFFFFF;

  --prisma-success: #22C55E;
  --prisma-warning: #F59E0B;
  --prisma-error: #EF4444;
  --prisma-info: #3090DB;

  --prisma-radius-sm: 8px;
  --prisma-radius-md: 12px;
  --prisma-radius-lg: 16px;
  --prisma-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .06);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--prisma-text);
  background: var(--prisma-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--prisma-dark);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Botões — cor/peso/raio de .btn, .btn-primary, .btn-danger etc. já
   vêm prontos direto de lib/bootstrap-5.3.8/css/bootstrap.min.css (o
   próprio arquivo do Bootstrap foi editado com os tokens do Prisma, em
   vez de reescrever cada variante aqui). .btn-text é a única exceção:
   um variante próprio (botão "texto", sem fundo/borda) que o Bootstrap
   não tem pronto — não confundir com .btn-link, que sempre sublinha.
   --------------------------------------------------------------------- */
.btn-text {
  background: transparent;
  border: none;
  color: var(--prisma-primary);
  font-weight: 600;
  padding: 6px 4px;
}

.btn-text:hover {
  color: var(--prisma-primary-dark);
}

/* ---------------------------------------------------------------------
   Inputs
   --------------------------------------------------------------------- */
.form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--prisma-text);
  margin-bottom: 6px;
}

.form-control,
.form-select {
  border-color: var(--prisma-border);
  border-radius: var(--prisma-radius-sm);
  padding: 10px 14px;
  font-size: .875rem;
  color: var(--prisma-text);
  cursor: pointer;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--prisma-primary);
  box-shadow: 0 0 0 3px var(--prisma-primary-light);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--prisma-bg);
  color: var(--prisma-text-2);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--prisma-error);
}

.invalid-feedback {
  color: var(--prisma-error);
  font-size: .8125rem;
}

/* ---------------------------------------------------------------------
   SweetAlert2 — input dentro de um Swal.fire({ input: "text", ... })
   (ex.: motivo de "Marcar como não realizado"). O CSS da própria lib
   carrega antes deste arquivo em toda página, então uma regra aqui (mesma
   especificidade) já vence por ordem de cascata — sem isso o campo ficava
   com o visual padrão do swal2 (fundo transparente, borda apagada),
   que em alguns navegadores/temas passava a impressão de estar desabilitado.
   --------------------------------------------------------------------- */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea {
  background: #fff;
  color: var(--prisma-text);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-sm);
  box-shadow: none;
}

.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus {
  border-color: var(--prisma-primary);
  box-shadow: 0 0 0 3px var(--prisma-primary-light);
}

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.prisma-card {
  background: var(--prisma-white);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-lg);
  box-shadow: var(--prisma-shadow-sm);
  padding: 24px;
}

/* ---------------------------------------------------------------------
   Badges de status
   --------------------------------------------------------------------- */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.badge-status.st-ativo,
.badge-status.st-concluido {
  background: #F0FDF4;
  color: #15803D;
  border-color: #BBF7D0;
}

.badge-status.st-andamento {
  background: #F0F9FF;
  color: #0369A1;
  border-color: #BAE6FD;
}

.badge-status.st-programado {
  background: var(--prisma-primary-light);
  color: var(--prisma-primary-dark);
  border-color: #BFDBFE;
}

.badge-status.st-pendente {
  background: #FFFBEB;
  color: #B45309;
  border-color: #FDE68A;
}

.badge-status.st-cancelado {
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #FECACA;
}

.badge-status.st-inativo,
.badge-status.st-alta {
  background: #F1F5F9;
  color: #64748B;
  border-color: #E2E8F0;
}

/* ---------------------------------------------------------------------
   Listas em cards — substitui <table> nas telas de listagem (Pacientes,
   Profissionais, PAD, Farmácia). Mobile-first: cada item é um card
   independente que empilha em telas estreitas; os pares campo/valor
   quebram linha via flex-wrap em vez de colunas fixas de tabela.
   --------------------------------------------------------------------- */
.list-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.list-card {
  position: relative;
  background: var(--prisma-white);
  border: 1px solid var(--prisma-border);
  border-radius: var(--prisma-radius-md);
  box-shadow: var(--prisma-shadow-sm);
  padding: 14px 44px 14px 16px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}

.list-card:hover {
  border-color: var(--prisma-primary);
}

.list-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.list-card-title {
  flex: 1;
  min-width: 0;
}

.list-card-name {
  font-weight: 600;
  color: var(--prisma-dark);
  font-size: .9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-card-meta {
  font-size: .75rem;
  color: var(--prisma-text-2);
  margin-top: 1px;
}

.list-card-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
}

.list-card-field {
  font-size: .8125rem;
  min-width: 0;
}

.list-card-field .label {
  display: block;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--prisma-text-2);
  margin-bottom: 1px;
}

.list-card-field .value {
  color: var(--prisma-text);
  font-weight: 500;
}

.list-card-delete {
  position: absolute;
  top: 8px;
  right: 6px;
}

.list-cards-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--prisma-text-2);
  font-size: 14px;
}

.list-cards-footer {
  padding: 4px 4px 0;
  font-size: 12px;
  color: var(--prisma-text-2);
}

/* ---------------------------------------------------------------------
   Botões de filtro por status ("Todos"/"Ativo"/"Inativo"...) da toolbar
   de listagem — pílulas simples, não o btn-group cru do Bootstrap (era
   duplicado byte-a-byte em Pacientes/Profissionais/PAD/Farmácia como
   .pac-filter-btn/.prof-filter-btn/.pad-filter-btn/.farm-filter-btn;
   Materiais/Usuários chegaram a usar .btn-group + .btn-outline-primary
   do Bootstrap — esta classe é agora o padrão pra qualquer filtro de
   status novo ou existente). Markup: <div class="d-flex gap-2"
   id="filtros-status"><button class="prisma-filter-btn active"
   data-status="Todos">Todos</button>...</div>
   --------------------------------------------------------------------- */
.prisma-filter-btn {
  border: 1px solid #E2E8F0;
  background: #fff;
  color: var(--prisma-text-2);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
}

.prisma-filter-btn.active {
  background: var(--prisma-primary-light);
  border-color: var(--prisma-primary);
  color: var(--prisma-primary-dark);
}

/* ---------------------------------------------------------------------
   Título de página — o nome do módulo no topo de toda tela de listagem
   (era .agn-titulo só em Agenda; Materiais/Atendimentos/Financeiro/
   Usuários/Produção/Relatórios usavam "h4 mb-0" cru do Bootstrap;
   Pacientes/Profissionais/PAD/Farmácia não tinham título nenhum). Esta
   classe é agora o padrão em todo módulo novo ou existente.
   --------------------------------------------------------------------- */
.prisma-page-title {
  font-size: 22px;
  margin: 0;
}

/* ---------------------------------------------------------------------
   Campo de busca com ícone — padrão único de todo campo de "buscar X"
   em toolbar de listagem (era duplicado quase byte-a-byte em
   Pacientes/Profissionais/PAD/Farmácia como .pac-search/.prof-search/
   .pad-search/.farm-search; Materiais/Usuários/Atendimentos chegaram a
   usar um .input-group cru do Bootstrap com ícone Font Awesome — esta
   classe é agora o padrão pra qualquer campo de busca novo ou
   existente). Markup: <div class="prisma-search"><svg>...</svg><input
   class="form-control" placeholder="Buscar..."></div>
   --------------------------------------------------------------------- */
.prisma-search {
  position: relative;
  width: 280px;
  max-width: 100%;
}

.prisma-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--prisma-text-2);
  pointer-events: none;
}

.prisma-search input {
  padding-left: 36px;
}

/* ---------------------------------------------------------------------
   Detalhe em abas — para modais modal-lg com Bootstrap nav-tabs (ex.:
   Atendimentos, Materiais). Cobre só o que o Bootstrap não tem pronto;
   o resto (grid de cards, .card, .nav-tabs, .badge) é Bootstrap puro.
   Usar estas classes em vez de CSS/style novo por módulo.
   --------------------------------------------------------------------- */

/* Corpo do modal com altura fixa e scroll — trocar de aba não pode
   redimensionar o modal (ver CLAUDE.md, "Modais de detalhe com abas"). */
.prisma-detail-body {
  height: min(520px, 65vh);
  overflow-y: auto;
}

/* Submenu de abas dos modais de detalhe — padrão visual único (era
   duplicado quase byte-a-byte em Pacientes/Profissionais/PAD/Farmácia
   como .pac-drawer-tab/.prof-drawer-tab/.pad-drawer-tab/.farm-drawer-tab;
   Atendimentos/Materiais chegaram a usar nav-tabs cru do Bootstrap —
   esta classe é agora o padrão pra qualquer modal novo ou existente). */
.prisma-drawer-tabs {
  display: flex;
  gap: 20px;
  padding: 0 1.5rem;
  border-bottom: 1px solid #F1F5F9;
  margin-top: 12px;
  overflow-x: auto;
}

.prisma-drawer-tab {
  padding: 12px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--prisma-text-2);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  white-space: nowrap;
}

.prisma-drawer-tab.active {
  color: var(--prisma-primary);
  border-bottom-color: var(--prisma-primary);
}

/* ---------------------------------------------------------------------
   Abas "segmentadas" (nível de página, não de modal de detalhe — pra
   isso ver .prisma-drawer-tabs acima) — pílula com fundo neutro e a aba
   ativa destacada em branco+sombra, estilo segmented control. Criado
   pra substituir o nav-tabs cru do Bootstrap no Financeiro; reutilizável
   em qualquer tela nova que precise de 2-4 visões alternáveis na mesma
   página. Markup: <div class="prisma-segmented"><button
   class="prisma-segmented-tab active" data-view="x">Label</button>...
   </div> — JS alterna a classe "active" e mostra/esconde o painel
   correspondente, igual ao padrão antigo de nav-tabs.
   --------------------------------------------------------------------- */
.prisma-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--prisma-bg);
  border-radius: var(--prisma-radius-md);
  padding: 4px;
  gap: 4px;
  max-width: 100%;
}

.prisma-segmented-tab {
  border: none;
  background: transparent;
  color: var(--prisma-text-2);
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 20px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.prisma-segmented-tab:hover:not(.active) {
  color: var(--prisma-text);
}

.prisma-segmented-tab.active {
  background: #fff;
  color: var(--prisma-primary-dark);
  box-shadow: var(--prisma-shadow-sm);
}

@media (max-width: 576px) {
  .prisma-segmented { width: 100%; }
  .prisma-segmented-tab { flex: 1; text-align: center; padding: 9px 10px; }
}

/* ---------------------------------------------------------------------
   Padrão de tela com TABELA (não card) — criado na Farmácia (set/2026),
   promovido aqui porque o PAD passou a usar também. Pedido explícito do
   usuário: a tela não rola, só a tabela rola por dentro (cabeçalho
   fixo), e isso exige uma cadeia de 4 classes (seção → painel → card →
   wrapper da tabela), cada uma repassando flex:1 pra próxima. Markup de
   referência: <section class="prisma-view-scroll"> ... <div
   class="shadow bg-white p-4 rounded-4 prisma-painel-scroll"> ... <div
   class="card border-0 shadow-sm rounded-4 overflow-hidden
   prisma-tabela-card"><div class="table-responsive
   prisma-tabela-scroll"><table>...<thead><tr
   class="bg-primary text-white"><th class="bg-primary text-white">...
   (aplicar bg-primary/text-white também em cada <th>, não só na <tr> —
   o <th> do Bootstrap tem background-color próprio que cobre o da linha
   por cima, então só pintar a <tr> não aparece).
   --------------------------------------------------------------------- */
.prisma-view-scroll {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.prisma-view-scroll > * {
  flex: 0 0 auto;
}

.prisma-painel-scroll,
.prisma-tabela-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.prisma-tabela-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.prisma-tabela-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Título de seção dentro de uma aba de detalhe. */
.prisma-detail-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--prisma-primary-dark);
  margin-top: 18px;
  margin-bottom: 10px;
}

.prisma-detail-title:first-child {
  margin-top: 0;
}

/* Par rótulo/valor (rótulo pequeno em cima, valor embaixo). */
.prisma-detail-field {
  margin-bottom: 12px;
}

.prisma-detail-field .label {
  font-size: 12px;
  color: var(--prisma-text-2);
  display: block;
  margin-bottom: 2px;
}

.prisma-detail-field .value {
  font-size: 13.5px;
  color: var(--prisma-text);
  white-space: pre-wrap;
}

/* Caixa de item de lista dentro de uma aba (procedimento, medicamento,
   intercorrência, retificação, movimentação...). */
.prisma-detail-item {
  border: 1px solid var(--prisma-border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}

.prisma-detail-item-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--prisma-dark);
}

.prisma-detail-item-meta {
  font-size: 12px;
  color: var(--prisma-text-2);
}

/* Estado vazio dentro de uma aba/lista ("Nenhum X registrado"). */
.prisma-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--prisma-text-2);
  font-size: 13.5px;
}

/* Linha clicável estilo link (ex.: lista de anexos). */
.prisma-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--prisma-border);
  border-radius: 10px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--prisma-text);
}

.prisma-link-row:hover {
  border-color: var(--prisma-primary);
  color: var(--prisma-text);
}

/* Card Bootstrap (.card) usado como item clicável de uma listagem em
   grid (.row/.col-*) — ex.: os cards de Atendimentos/Materiais. */
.prisma-card-click {
  cursor: pointer;
  transition: border-color .12s;
}

.prisma-card-click:hover {
  border-color: var(--prisma-primary);
}

/* ---------------------------------------------------------------------
   Avatar de iniciais
   --------------------------------------------------------------------- */
.prisma-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--prisma-primary);
  color: #fff;
  font-weight: 600;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Card de resumo "de hoje" — cabeçalho com ícone + título/subtítulo +
   data à direita, seguido de uma lista de itens (hora + nome + status
   ou ação). Usar em cima de .prisma-card (que já dá fundo/borda/sombra/
   padding); esta classe só soma o friso colorido à esquerda. Modificador
   .violeta troca o acento de azul pra violeta — outras cores futuras
   seguem o mesmo padrão de modificador.
   --------------------------------------------------------------------- */
.prisma-today-card {
  border-left: 4px solid var(--prisma-primary);
  border-top-left-radius: var(--prisma-radius-lg);
  border-bottom-left-radius: var(--prisma-radius-lg);
}

.prisma-today-card.violeta {
  border-left-color: #8B5CF6;
}

.prisma-today-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.prisma-today-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--prisma-primary-light);
  color: var(--prisma-primary);
}

.prisma-today-icon svg {
  width: 22px;
  height: 22px;
}

.prisma-today-card.violeta .prisma-today-icon {
  background: #F1EBFC;
  color: #8B5CF6;
}

.prisma-today-header-text {
  flex: 1;
  min-width: 0;
}

.prisma-today-header-text h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--prisma-dark);
  margin: 0;
}

.prisma-today-header-text span {
  font-size: 12.5px;
  color: var(--prisma-text-2);
}

.prisma-today-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--prisma-text-2);
  white-space: nowrap;
  flex-shrink: 0;
}

.prisma-today-date svg {
  width: 14px;
  height: 14px;
}

.prisma-today-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prisma-today-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--prisma-bg);
  border-radius: var(--prisma-radius-md);
  padding: 10px 14px;
}

.prisma-today-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--prisma-primary);
}

.prisma-today-item-icon svg {
  width: 16px;
  height: 16px;
}

.prisma-today-card.violeta .prisma-today-item-icon {
  color: #8B5CF6;
}

.prisma-today-item-time {
  font-weight: 700;
  color: var(--prisma-dark);
  font-size: 13.5px;
  flex-shrink: 0;
}

.prisma-today-item-divider {
  width: 1px;
  height: 20px;
  background: var(--prisma-border);
  flex-shrink: 0;
}

.prisma-today-item-info {
  flex: 1;
  min-width: 0;
}

.prisma-today-item-name {
  font-weight: 600;
  color: var(--prisma-dark);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prisma-today-item-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--prisma-text-2);
  margin-top: 1px;
  min-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prisma-today-item-sub svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.prisma-today-item-chevron {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--prisma-text-2);
}

.prisma-today-item-chevron svg {
  width: 13px;
  height: 13px;
}

/* ---------------------------------------------------------------------
   Diff amigável antes/depois — usado pelo botão de Auditoria de cada
   módulo (padrão obrigatório desde set/2026, ver CLAUDE.md: cada módulo
   tem seu próprio botão + modal de auditoria, escopado só naquele
   módulo — não existe mais um módulo Auditoria centralizado). Promovido
   pra cá porque agora tem mais de um consumidor (era só do antigo
   app/modulos/auditoria/css/style.css). JS que monta isso:
   mainJS.montarDiffAmigavel() em js/main.js.
   --------------------------------------------------------------------- */
.aud-json {
  background: var(--prisma-bg);
  border-radius: var(--prisma-radius-sm);
  padding: 12px;
  font-size: 12px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.aud-diff-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid #F1F5F9;
  font-size: 13px;
}
.aud-diff-row:last-child { border-bottom: none; }

.aud-diff-campo {
  font-weight: 600;
  color: var(--prisma-dark);
  min-width: 140px;
}

.aud-diff-antes {
  color: #B91C1C;
  background: #FEF2F2;
  border-radius: 6px;
  padding: 2px 8px;
  text-decoration: line-through;
}

.aud-diff-depois {
  color: #15803D;
  background: #F0FDF4;
  border-radius: 6px;
  padding: 2px 8px;
}