/* ==========================================================================
 * CENTERMED — Tema do portal do paciente
 * Identidade própria: bordô da marca (#8d3132) + neutros cinza-azulados.
 * Camada sobre o Bootstrap 5 (carregada depois) — redefine a aparência para
 * NÃO parecer um tema pronto/SB-Admin.
 * ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Marca */
  --cm-wine:        #8d3132;
  --cm-wine-600:    #7c2a2b;
  --cm-wine-700:    #672122;
  --cm-wine-900:    #4a1718;
  --cm-wine-tint:   #f4e9e9;
  --cm-wine-tint-2: #ead6d6;

  /* Neutros cinza-azulados (frios) */
  --cm-ink:    #1f2730;   /* texto forte */
  --cm-slate:  #5a6b7b;   /* texto secundário */
  --cm-slate-2:#8294a4;
  --cm-mist:   #eef2f6;   /* superfície clara */
  --cm-bg:     #f4f6f9;   /* fundo do app */
  --cm-line:   #e2e8ef;   /* bordas */
  --cm-card:   #ffffff;

  /* Estados (dessaturados, combinando com o tema) */
  --cm-ok:    #3f7d6a;
  --cm-warn:  #b07d2b;
  --cm-bad:   #b23b3b;

  --cm-radius: 16px;
  --cm-shadow: 0 6px 24px -12px rgba(31, 39, 48, .25);
  --cm-shadow-sm: 0 2px 10px -6px rgba(31, 39, 48, .25);

  --bs-primary: var(--cm-wine);
}

/* ---------- Base ---------- */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 480px at 100% -10%, var(--cm-wine-tint) 0%, transparent 55%),
    var(--cm-bg);
  color: var(--cm-ink);
  letter-spacing: .1px;
}
h1,h2,h3,h4,h5,h6,.navbar-brand { font-family: 'Sora', 'Inter', sans-serif; }
a { color: var(--cm-wine-600); }
a:hover { color: var(--cm-wine-900); }
.text-primary { color: var(--cm-wine) !important; }
.text-muted   { color: var(--cm-slate) !important; }

/* Faixa fininha da marca no topo da página */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 1031;
  background: linear-gradient(90deg, var(--cm-wine-700), var(--cm-wine), var(--cm-wine-600));
}

/* ---------- Navbar ---------- */
.navbar {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--cm-line);
  box-shadow: none !important;
  /* Garante barra no TOPO, largura total, acima do conteúdo. */
  position: sticky; top: 0; left: 0; right: 0;
  width: 100%; z-index: 1030;
}
/* A barra interna da navbar ocupa a largura toda. */
.navbar > .container { width: 100%; }
.navbar .navbar-brand img { filter: none; }
.navbar .nav-link {
  color: var(--cm-slate) !important;
  font-weight: 500; border-radius: 10px; padding: .4rem .8rem !important;
  transition: background .15s, color .15s;
}
.navbar .nav-link:hover { color: var(--cm-wine) !important; background: var(--cm-wine-tint); }
.navbar .nav-link.active { color: var(--cm-wine) !important; background: var(--cm-wine-tint); }
.navbar-text { color: var(--cm-slate) !important; }
.navbar-text b { color: var(--cm-ink); }

/* ---------- Cards ---------- */
.card {
  background: var(--cm-card);
  border: 1px solid var(--cm-line);
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow-sm);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--cm-line);
  font-weight: 600;
}

/* Painel: cartão de identidade do paciente */
.cm-hero {
  background: linear-gradient(120deg, var(--cm-wine-700), var(--cm-wine) 60%, var(--cm-wine-600));
  color: #fff; border: none; border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow);
}
.cm-hero .cm-doc { color: #f3dede; }
.cm-hero .badge-tipo {
  background: rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.28);
  font-weight: 500;
}

/* KPIs */
.card-kpi {
  border: 1px solid var(--cm-line);
  border-radius: var(--cm-radius);
  background:
    linear-gradient(180deg, #fff, #fff) padding-box,
    var(--cm-card);
  position: relative; overflow: hidden; height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-kpi::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--cm-wine);
  opacity:.85;
}
.card-kpi:hover { transform: translateY(-3px); box-shadow: var(--cm-shadow); }
.kpi-icon {
  width:42px; height:42px; border-radius:12px; display:inline-flex;
  align-items:center; justify-content:center;
  background: var(--cm-wine-tint); color: var(--cm-wine); font-size:1.25rem;
}
.kpi-value { font-family:'Sora',sans-serif; font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--cm-ink); }
.kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cm-slate-2); font-weight:600; }

/* Cartão de exame */
.card-exame { transition: transform .15s ease, box-shadow .15s ease; }
.card-exame:hover { transform: translateY(-3px); box-shadow: var(--cm-shadow); }
.exame-dia { cursor: pointer; }
.cm-datechip {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'Sora',sans-serif; font-weight:600; color: var(--cm-ink);
}
.cm-datechip .ico {
  width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background: var(--cm-wine-tint); color: var(--cm-wine);
}
.cm-tag-recente {
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  color: var(--cm-wine); background: var(--cm-wine-tint); border-radius: 999px; padding:.15rem .5rem;
}

/* ---------- Títulos de seção ---------- */
.cm-section-title { display:flex; align-items:center; gap:.55rem; font-weight:600; color:var(--cm-ink); }
.cm-section-title::before {
  content:""; width:8px; height:22px; border-radius:4px; background:var(--cm-wine); display:inline-block;
}

/* ---------- Botões ---------- */
.btn { border-radius: 11px; font-weight: 600; letter-spacing:.2px; }
.btn-primary, .btn-wine {
  background: linear-gradient(180deg, var(--cm-wine), var(--cm-wine-600));
  border: none; color:#fff;
  box-shadow: 0 6px 16px -8px rgba(141,49,50,.7);
}
.btn-primary:hover, .btn-wine:hover { background: linear-gradient(180deg, var(--cm-wine-600), var(--cm-wine-700)); color:#fff; }
.btn-outline-primary, .btn-outline-wine {
  border: 1.5px solid var(--cm-wine); color: var(--cm-wine); background: transparent;
}
.btn-outline-primary:hover, .btn-outline-wine:hover { background: var(--cm-wine); color:#fff; }
.btn-soft {
  background: var(--cm-wine-tint); color: var(--cm-wine); border: 1px solid var(--cm-wine-tint-2);
}
.btn-soft:hover { background: var(--cm-wine-tint-2); color: var(--cm-wine-700); }
.btn-slate { background: var(--cm-mist); color: var(--cm-slate); border:1px solid var(--cm-line); }
.btn-slate:hover { background: #e3e9f0; color: var(--cm-ink); }
.btn-danger { background: var(--cm-bad); border:none; }
.btn-outline-danger { border:1.5px solid var(--cm-bad); color:var(--cm-bad); }
.btn-outline-danger:hover { background: var(--cm-bad); color:#fff; }

/* ---------- Badges ---------- */
.badge { font-weight:600; border-radius: 8px; }
.bg-primary { background: var(--cm-wine) !important; }
.bg-success { background: var(--cm-ok) !important; }
.bg-warning { background: var(--cm-warn) !important; color:#fff !important; }
.bg-danger  { background: var(--cm-bad) !important; }
.bg-info    { background: #3f6f86 !important; }
.bg-secondary { background: var(--cm-slate) !important; }

/* ---------- Formulários ---------- */
.form-control, .form-select {
  border: 1.5px solid var(--cm-line); border-radius: 11px; padding:.55rem .8rem;
  background: #fff; color: var(--cm-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--cm-wine); box-shadow: 0 0 0 .2rem rgba(141,49,50,.14);
}
.form-label { font-weight:600; color: var(--cm-slate); font-size:.9rem; }
.input-group-text { background: var(--cm-mist); border:1.5px solid var(--cm-line); color: var(--cm-slate); border-radius:11px; }

/* ---------- Tabelas ---------- */
.table { --bs-table-hover-bg: var(--cm-wine-tint); }
.table thead th {
  text-transform: uppercase; font-size:.72rem; letter-spacing:.06em;
  color: var(--cm-slate-2); border-bottom:1px solid var(--cm-line);
}
.table td { color: var(--cm-ink); vertical-align: middle; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { background: transparent; padding:0; margin-bottom: .75rem; font-size:.9rem; }
.breadcrumb a { color: var(--cm-slate); text-decoration:none; }
.breadcrumb a:hover { color: var(--cm-wine); }
.breadcrumb-item.active { color: var(--cm-ink); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--cm-slate-2); }

/* ---------- Paginação ---------- */
.pagination { gap:.25rem; }
.page-link { border:1px solid var(--cm-line); color: var(--cm-slate); border-radius:10px !important; }
.page-link:hover { background: var(--cm-wine-tint); color: var(--cm-wine); border-color: var(--cm-wine-tint-2); }
.page-item.active .page-link { background: var(--cm-wine); border-color: var(--cm-wine); color:#fff; }

/* ---------- Alerts ---------- */
.alert { border-radius: 12px; border:1px solid transparent; }
.alert-success { background: #e8f3ef; color:#26543f; border-color:#cfe6dd; }
.alert-warning { background: #f8efdc; color:#7c5a16; border-color:#efdfba; }
.alert-danger  { background: #f7e6e6; color:#7e2727; border-color:#eccccc; }
.alert-info    { background: #e9f0f4; color:#2f5667; border-color:#d3e2ea; }

/* ---------- Popover/tooltip ---------- */
.popover { max-width: 320px; border:1px solid var(--cm-line); border-radius:12px; box-shadow: var(--cm-shadow); }
.popover-header { background: var(--cm-wine-tint); color: var(--cm-wine-700); font-family:'Sora',sans-serif; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display:flex; align-items:center; }
.login-card { max-width: 430px; width:100%; border:none; border-radius: 20px; box-shadow: var(--cm-shadow); overflow:hidden; }
.login-card .login-top {
  background: linear-gradient(120deg, var(--cm-wine-700), var(--cm-wine) 65%, var(--cm-wine-600));
  margin:-1.5rem -1.5rem 1.25rem; padding:1.6rem 1.5rem; text-align:center;
}
.login-card .login-top .lead { color:#f3dede; }

/* ---------- Toolbar de gráfico ---------- */
.cm-toolbar .btn { border-radius: 9px; }
.cm-toolbar .btn-check:checked + .btn { background: var(--cm-wine); color:#fff; border-color:var(--cm-wine); }

/* feedback de carregamento */
.btn-loading { pointer-events:none; opacity:.8; }

/* ==========================================================================
 * Faixas coloridas com label (topo de cards)
 * ========================================================================== */
.cm-band {
  padding:.5rem .9rem; font-family:'Sora',sans-serif; font-weight:600;
  font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
}
.cm-band .cm-band-ico { opacity:.9; }
.cm-band--wine  { background:linear-gradient(90deg, var(--cm-wine-700), var(--cm-wine)); }
.cm-band--blue  { background:linear-gradient(90deg, #345b6e, #3f6f86); }
.cm-band--teal  { background:linear-gradient(90deg, #2f6354, #3f7d6a); }
.cm-band--amber { background:linear-gradient(90deg, #8f6420, #b07d2b); }
.cm-band--slate { background:linear-gradient(90deg, #48586a, #5a6b7b); }

/* Cards que recebem faixa: cantos limpos e sem a barrinha lateral do KPI */
.card.has-band { overflow:hidden; }
.card-kpi.has-band::before { display:none; }
.card-kpi.has-band .card-body { padding-top:1rem; }

/* Acento de cor por KPI (ícone combinando com a faixa) */
.kpi--wine  .kpi-icon { background: var(--cm-wine-tint); color: var(--cm-wine); }
.kpi--blue  .kpi-icon { background:#e6eef2; color:#3f6f86; }
.kpi--teal  .kpi-icon { background:#e4f0ec; color:#3f7d6a; }
.kpi--amber .kpi-icon { background:#f6ecd9; color:#b07d2b; }

/* ==========================================================================
 * Espaçamento da página + botão do card + responsividade
 * ========================================================================== */

/* Respiro nas laterais (não deixa o conteúdo colado nos extremos). */
.container,
.navbar > .container {
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}
.container.my-4 { padding-top: .5rem; padding-bottom: 2.5rem; }

/* Botão "Baixar laudo" SEMPRE no rodapé do card (mesmo sem o nome do médico),
   para manter todos os cards visualmente consistentes. */
.card-exame .card-body { display: flex; flex-direction: column; height: 100%; }
.card-exame .card-body .btn { margin-top: auto; }

/* ---------- Responsividade ---------- */
@media (max-width: 991.98px) {
  .navbar-text { display: block; width: 100%; margin: .35rem 0; }
}
@media (max-width: 767.98px) {
  .cm-toolbar { width: 100%; }
  .cm-toolbar .btn-group,
  .cm-toolbar .form-select,
  .cm-toolbar > * { flex: 1 1 auto; }
}
@media (max-width: 575.98px) {
  .container.my-4 { padding-bottom: 1.5rem; }
  .kpi-value { font-size: 1.45rem; }
  .card-kpi .card-body { padding: .75rem; }
  .kpi-icon { width: 36px; height: 36px; font-size: 1.05rem; }
  .cm-band { font-size: .64rem; padding: .45rem .7rem; }
  h1.h3 { font-size: 1.3rem; }
  .cm-hero h3, .card .card-body h3, h3.fw-bold { font-size: 1.2rem; }
  .table { font-size: .85rem; }
}