/* Praxis — tema escuro "sala de cirurgia": verde-petróleo profundo + laranja da marca.
   Carrega depois do Bootstrap. Os nomes das variáveis (--bg-panel, --accent...) são usados
   por estilos locais de algumas telas; não renomear. */

:root {
  --bg-app: #0a1a1e;
  --bg-side: #071316;
  --bg-panel: #10262b;
  --bg-panel-2: #163239;
  --bg-input: #0c1e22;
  --border-subtle: #234148;
  --text-main: #e7f0ef;
  --text-muted: #8ca7aa;
  --accent: #f97316;
  --accent-2: #ea580c;
  --accent-soft: rgba(249, 115, 22, .14);
  --ok: #34d399;
  --alerta: #f87171;
  --atencao: #fbbf24;
  --marcada: #a78bfa;
  --radius: 10px;
  --side-w: 248px;
}

/* ---------- base ---------- */
body {
  background: var(--bg-app);
  color: var(--text-main);
  font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -.012em; font-weight: 700; }
h1, .h1, h2.h3, .h3 { font-size: 1.6rem; }
body, h1, h2, h3, h4, h5, h6, p, span, div, td, th, dt, dd, label { color: var(--text-main); }
.text-muted, small, .small, .form-text { color: var(--text-muted) !important; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: #fdba74; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); }

/* ---------- estrutura: barra lateral + conteúdo ---------- */
.app { display: block; }
.sidebar {
  background: var(--bg-side);
  border-right: 1px solid var(--border-subtle);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  width: var(--side-w);
}
.sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; overflow-y: auto; }
.sidebar-top { padding: 1.25rem 1.1rem .5rem; }
.brand {
  display: flex; align-items: center; gap: .65rem;
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--text-main); text-decoration: none;
}
.brand:hover { color: var(--text-main); }
.brand svg { flex-shrink: 0; }

.side-nav { padding: .5rem .65rem 1rem; flex: 1; }
.side-group { margin-top: .85rem; }
.side-group-title {
  padding: 0 .65rem .35rem;
  font-size: .82rem; font-weight: 600; color: var(--text-muted);
}
.side-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .38rem .65rem; border-radius: 8px; font-size: .95rem;
  color: #b9cccd; text-decoration: none; font-weight: 500;
  border-left: 3px solid transparent;
}
.side-link i { font-size: 1.05rem; width: 1.15rem; text-align: center; color: var(--text-muted); }
.side-link:hover { background: var(--bg-panel); color: var(--text-main); }
.side-link:hover i { color: var(--text-main); }
.side-link.ativo {
  background: var(--accent-soft); color: #fff;
  border-left-color: var(--accent);
  border-top-left-radius: 2px; border-bottom-left-radius: 2px;
}
.side-link.ativo i { color: var(--accent); }

.side-foot { padding: .9rem 1rem 1.1rem; border-top: 1px solid var(--border-subtle); }
.side-empresa {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .65rem; border-radius: 8px; margin-bottom: .75rem;
  background: var(--bg-panel); border: 1px solid var(--border-subtle);
  color: var(--text-main); text-decoration: none; font-weight: 600; font-size: .92rem;
}
a.side-empresa:hover { border-color: var(--accent); color: var(--text-main); }
.side-empresa i { color: var(--accent); }
.side-user { font-size: .92rem; line-height: 1.3; }
.side-user .papel { color: var(--text-muted); font-size: .82rem; }
.side-sair {
  margin-top: .65rem; width: 100%;
  background: transparent; border: 1px solid var(--border-subtle); color: var(--text-muted);
  border-radius: 8px; padding: .4rem .6rem; font-size: .9rem;
}
.side-sair:hover { color: var(--text-main); border-color: var(--text-muted); }

.topbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem; background: var(--bg-side); border-bottom: 1px solid var(--border-subtle);
}
.topbar .brand { font-size: 1.15rem; }
.topbar-toggle {
  background: transparent; border: 1px solid var(--border-subtle); color: var(--text-main);
  border-radius: 8px; width: 40px; height: 40px; font-size: 1.3rem; line-height: 1;
}
.main { padding: 1.5rem 1rem 3rem; min-width: 0; }

@media (min-width: 992px) {
  .app { display: flex; min-height: 100vh; }
  .sidebar {
    position: sticky; top: 0; height: 100vh; flex: 0 0 var(--side-w);
    visibility: visible !important; transform: none !important;
  }
  .main { flex: 1; padding: 2rem 2.25rem 3rem; }
}
.offcanvas.sidebar { --bs-offcanvas-bg: var(--bg-side); --bs-offcanvas-color: var(--text-main); }
.sidebar .offcanvas-header { border-bottom: 1px solid var(--border-subtle); }

/* ---------- cabeçalho de página ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--text-muted); }

/* ---------- cartões, painéis, números ---------- */
.card, .panel, .stat-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-main);
}
.panel { padding: 1.25rem; }
.stat-card { padding: 1rem 1.2rem; }
.stat-card .stat-label { color: var(--text-muted); font-size: .9rem; font-weight: 500; }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; line-height: 1.15; margin-top: .15rem; letter-spacing: -.02em; }

/* Percurso da guia: Solicitada → Autorizada → Marcada → Realizada */
.etapas {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius);
  overflow: hidden;
}
.etapa {
  position: relative; display: block; padding: 1.15rem 1.35rem 1.2rem;
  color: var(--text-main); text-decoration: none;
  border-right: 1px solid var(--border-subtle);
}
.etapa:last-child { border-right: 0; }
.etapa:hover { background: var(--bg-panel-2); color: var(--text-main); }
.etapa::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cor-etapa, var(--accent)); }
.etapa .n { display: block; font-size: 2.6rem; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.etapa .t { display: block; margin-top: .25rem; font-weight: 600; }
.etapa .d { display: block; margin-top: .1rem; font-size: .86rem; color: var(--text-muted); }
.etapa-solicitado { --cor-etapa: #60a5fa; }
.etapa-autorizado { --cor-etapa: #38bdf8; }
.etapa-marcado { --cor-etapa: var(--marcada); }
.etapa-realizado { --cor-etapa: var(--ok); }
@media (max-width: 767.98px) {
  .etapas { grid-template-columns: repeat(2, 1fr); }
  .etapa:nth-child(2) { border-right: 0; }
  .etapa:nth-child(-n+2) { border-bottom: 1px solid var(--border-subtle); }
}

.aviso-pendencia { border-left: 4px solid var(--alerta); background: linear-gradient(90deg, rgba(248,113,113,.10), transparent 60%), var(--bg-panel); }
.lado-a-lado { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.lado-a-lado > * { flex: 1 1 260px; }
.resumo-linha { color: var(--text-main); display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--border-subtle); }
.resumo-linha:last-child { border-bottom: 0; }
.resumo-linha:is(a):hover { color: var(--text-main); background: var(--bg-panel-2); }
.resumo-linha strong { font-weight: 700; color: inherit; }

/* Números grandes: zero sem a barra da fonte (a barra fica só no texto e nos códigos) */
.etapa .n, .stat-card .stat-value, .resumo-linha strong { font-feature-settings: "ss02"; }

/* Cor de destaque do Bootstrap ('primary') passa a ser o laranja da marca */
.text-primary { color: var(--accent) !important; }
.bg-primary { background-color: var(--accent) !important; color: #1a0d02 !important; }

/* ---------- tabelas ---------- */
table { color: var(--text-main); }
.table-responsive.panel { padding: 0; overflow: hidden; }
.table > :not(caption) > * > * {
  background: transparent; color: var(--text-main);
  border-bottom-color: var(--border-subtle); box-shadow: none;
  padding-top: .65rem; padding-bottom: .65rem;
}
.table thead th {
  color: var(--text-muted); font-size: .88rem; font-weight: 600;
  background: var(--bg-panel-2); border-bottom-color: var(--border-subtle);
}
.table-hover > tbody > tr:hover > * { background: var(--bg-panel-2); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255,255,255,.015); }
.table-bordered > :not(caption) > * { border-color: var(--border-subtle); }
.cell-vazia { background: rgba(255,255,255,.02); }

/* ---------- formulários ---------- */
.form-control, .form-select {
  background: var(--bg-input); color: var(--text-main);
  border: 1px solid var(--border-subtle); border-radius: 8px;
}
.form-control::placeholder { color: #5f7b7f; }
.form-control:focus, .form-select:focus {
  background: var(--bg-input); color: var(--text-main);
  border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(249,115,22,.22);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background: var(--bg-panel); }
.form-label { color: var(--text-muted); font-size: .92rem; font-weight: 500; }
select.form-select option { background: var(--bg-input); color: var(--text-main); }
.form-check-input { background-color: var(--bg-input); border-color: var(--text-muted); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(249,115,22,.22); }

.input-group-text { background: var(--bg-panel-2); color: var(--text-muted); border: 1px solid var(--border-subtle); }

/* ---------- botões ---------- */
.btn { border-radius: 8px; font-weight: 600; }
.btn-primary { background: var(--accent); border: 1px solid var(--accent); color: #1a0d02; box-shadow: none; }
.btn-primary:hover, .btn-primary:focus { background: #fb923c; border-color: #fb923c; color: #1a0d02; }
.btn-primary:active { background: var(--accent-2) !important; border-color: var(--accent-2) !important; }
.btn-outline-secondary { color: var(--text-muted); border-color: var(--border-subtle); }
.btn-outline-secondary:hover { background: var(--bg-panel-2); color: var(--text-main); border-color: var(--text-muted); }
.btn-outline-primary { color: var(--accent); border-color: rgba(249,115,22,.55); }
.btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); color: #1a0d02; }
.btn-outline-success { color: var(--ok); border-color: #2f7d55; }
.btn-outline-success:hover { background: #1e3a2a; color: var(--ok); border-color: #2f7d55; }
.btn-outline-light { color: var(--text-main); border-color: var(--border-subtle); }
.btn-outline-light:hover { background: var(--bg-panel-2); color: var(--text-main); }
.btn-icon {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bg-panel-2); border: 1px solid var(--border-subtle); color: var(--text-muted);
}
.btn-icon:hover { color: var(--text-main); border-color: var(--accent); }

/* ---------- avisos, modais, listas, paginação ---------- */
.alert { border-radius: var(--radius); border-width: 1px; }
.alert, .alert * { color: inherit; }
.alert-danger  { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.45); color: #fecaca; }
.alert-success { background: rgba(52,211,153,.12);  border-color: rgba(52,211,153,.45);  color: #a7f3d0; }
.alert-warning { background: rgba(251,191,36,.12);  border-color: rgba(251,191,36,.45);  color: #fde68a; }
.alert-info    { background: rgba(56,189,248,.12);  border-color: rgba(56,189,248,.45);  color: #bae6fd; }
.alert-danger .alert-link, .alert-danger a { color: #fff; }
.alert .text-muted, .alert small { color: inherit !important; opacity: .85; }
input[type="file"]::file-selector-button {
  background: var(--bg-panel-2); color: var(--text-main); border: 0; border-right: 1px solid var(--border-subtle);
  padding: .4rem .75rem; margin-right: .75rem; font-weight: 600;
}
input[type="file"].form-control::file-selector-button { background: var(--bg-panel-2); color: var(--text-main); }
.modal-content { background: var(--bg-panel); color: var(--text-main); border: 1px solid var(--border-subtle); border-radius: 12px; }
.modal-header, .modal-footer { border-color: var(--border-subtle); }
.btn-close { filter: invert(1) grayscale(100%) brightness(1.6); }
.list-group-item { background: var(--bg-panel-2); color: var(--text-main); border-color: var(--border-subtle); }
.list-group-item-action:hover { background: var(--bg-input); color: var(--text-main); }
.dropdown-menu { background: var(--bg-panel-2); border-color: var(--border-subtle); }
.dropdown-item { color: var(--text-main); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-panel); color: var(--text-main); }
.page-link { background: var(--bg-panel); color: var(--text-main); border-color: var(--border-subtle); }
.page-link:hover { background: var(--bg-panel-2); color: var(--text-main); }
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #1a0d02; }
.page-item.disabled .page-link { background: var(--bg-panel); color: var(--text-muted); }

/* ---------- avatar, status, planos ---------- */
.avatar {
  width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: #0a1a1e; flex-shrink: 0;
}
.avatar-c0 { background: #6ee7b7; } .avatar-c1 { background: #93c5fd; }
.avatar-c2 { background: #fca5a5; } .avatar-c3 { background: #fcd34d; }
.avatar-c4 { background: #c4b5fd; } .avatar-c5 { background: #67e8f9; }
.avatar-c6 { background: #fdba74; } .avatar-c7 { background: #f9a8d4; }

.badge-status { padding: .35em .7em; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.badge-status-solicitado { background: rgba(96,165,250,.15); color: #60a5fa; }
.badge-status-autorizado { background: rgba(56,189,248,.15); color: #38bdf8; }
.badge-status-marcado    { background: rgba(167,139,250,.15); color: #a78bfa; }
.badge-status-realizado  { background: rgba(52,211,153,.15); color: #34d399; }
.badge-status-negado     { background: rgba(248,113,113,.15); color: #f87171; }
.badge-status-eletiva    { background: rgba(147,197,253,.12); color: #93c5fd; }
.badge-status-urgencia   { background: rgba(248,113,113,.18); color: #f87171; font-weight: 700; }
.badge-status-pendencia  { background: rgba(248,113,113,.2); color: #f87171; font-weight: 700; }
.badge-status-pendente   { background: rgba(251,191,36,.15); color: #fbbf24; }
.badge-status-paga       { background: rgba(52,211,153,.15); color: #34d399; }
.badge-status-cancelada  { background: rgba(148,163,184,.15); color: #94a3b8; }
.badge-status-entrada    { background: rgba(248,113,113,.15); color: #f87171; }
.badge-status-saida      { background: rgba(52,211,153,.15); color: #34d399; }
.text-realizada { color: var(--ok) !important; font-weight: 600; }
/* Guia ambulatorial autorizada/marcada que ainda não tem data de vencimento */
.badge-sem-vencimento { padding: .3em .65em; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; display: inline-block; background: var(--accent-soft); color: #fb923c; border: 1px solid rgba(249,115,22,.55); }
/* Guia faturada pela pessoa física de um médico (fora do faturamento da clínica) */
.badge-pf { padding: .3em .65em; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; display: inline-block; background: rgba(167,139,250,.18); color: #c4b5fd; border: 1px solid rgba(167,139,250,.5); }
.alert-sem-vencimento { background: var(--accent-soft); border-color: rgba(249,115,22,.55); color: #fdba74; }

/* Calendário: quadro "Marcar cirurgia" na janelinha do dia — tracejado, como uma vaga livre
   na agenda, para se distinguir dos cartões cheios das cirurgias já marcadas. */
.vaga-agenda { border: 1.5px dashed rgba(249,115,22,.5); border-radius: var(--radius); padding: 1rem; }
.vaga-agenda-titulo { color: var(--text-main); font-weight: 700; margin-bottom: .75rem; }
.vaga-agenda .form-label { color: var(--text-muted); }

/* Selo de cobrança ao convênio (depois de realizada) */
.badge-cobranca { padding: .3em .65em; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; display: inline-block; }
.badge-cobranca-sem_cobranca    { background: rgba(148,163,184,.15); color: #94a3b8; }
.badge-cobranca-nota_solicitada { background: rgba(251,191,36,.15); color: #fbbf24; }
.badge-cobranca-paga            { background: rgba(52,211,153,.15); color: #34d399; }
.badge-cobranca-glosada         { background: rgba(248,113,113,.2); color: #f87171; font-weight: 700; }
.badge-cobranca-glosa_parcial   { background: rgba(251,146,60,.18); color: #fb923c; font-weight: 700; }

.badge-plano { padding: .35em .7em; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.badge-plano-c0 { background: rgba(110,231,183,.12); color: #6ee7b7; }
.badge-plano-c1 { background: rgba(147,197,253,.12); color: #93c5fd; }
.badge-plano-c2 { background: rgba(252,165,165,.12); color: #fca5a5; }
.badge-plano-c3 { background: rgba(252,211,77,.12); color: #fcd34d; }
.badge-plano-c4 { background: rgba(196,181,253,.12); color: #c4b5fd; }
.badge-plano-c5 { background: rgba(103,232,249,.12); color: #67e8f9; }
.badge-plano-c6 { background: rgba(253,186,116,.12); color: #fdba74; }
.badge-plano-c7 { background: rgba(249,168,212,.12); color: #f9a8d4; }
.badge-muted { background: var(--bg-panel-2); color: var(--text-muted); border: 1px solid var(--border-subtle); font-weight: 500; }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: .4em; }
.dot-on { background: var(--ok); }
.dot-off { background: #6b7280; }

/* ---------- seletores ---------- */
.swatch-picker { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.swatch-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch-picker label {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; color: #0a1a1e;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.swatch-picker input:checked + label { border-color: #fff; }
.swatch-picker input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch-c0 { background: #6ee7b7; } .swatch-c1 { background: #93c5fd; }
.swatch-c2 { background: #fca5a5; } .swatch-c3 { background: #fcd34d; }
.swatch-c4 { background: #c4b5fd; } .swatch-c5 { background: #67e8f9; }
.swatch-c6 { background: #fdba74; } .swatch-c7 { background: #f9a8d4; }
.swatch-auto { background: conic-gradient(from 0deg, #6ee7b7, #93c5fd, #fca5a5, #fcd34d, #c4b5fd, #67e8f9, #fdba74, #f9a8d4); }

/* Indicador de documentos completos */
.doc-indicator {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--bg-input); border: 1px solid #3b5f67; color: transparent; font-size: .9rem;
}
.doc-indicator.doc-completo { background: var(--ok); border-color: var(--ok); color: #0a1a1e; }
.doc-check-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.doc-check-item {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem; border-radius: 8px;
  background: var(--bg-input); border: 1px solid var(--border-subtle);
  cursor: pointer; user-select: none; margin: 0;
}
.doc-check-item input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.doc-check-item input[type="checkbox"]:checked ~ .doc-indicator { background: var(--ok); border-color: var(--ok); color: #0a1a1e; }
.doc-check-item input[type="checkbox"]:focus-visible ~ .doc-indicator { outline: 2px solid var(--accent); }

/* ---------- entrar ---------- */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.entrar-caixa { width: 100%; max-width: 380px; }
.entrar-marca { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.75rem; }
.entrar-marca .nome { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.entrar-marca .lema { color: var(--text-muted); font-size: .95rem; margin-top: .25rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}