/* Bora Doutor: rules used only on the exames page(s). Loaded after base.css. */

/* ===========================================================================
   Exames e check-up (template-cholo-exames.php) — prefix ex-

   The artifact of this subject is the lab report, and the one thing a patient
   actually looks for on it is whether their number sits inside the reference
   range. So that is the design: a value plotted on its own range, as a rail
   with the reference band marked and a dot for where you landed. It appears
   twice — once in the hero as the thing you get back, once in the section
   about reading results — and nowhere else on the site.
   =========================================================================== */


/* The result card — the signature */
.ex-card {
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: 0 22px 48px rgba(16, 40, 64, 0.12);
}
.ex-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--color-dark);
}
.ex-card-head b { font-size: 0.95rem; color: var(--color-dark); }
.ex-row { padding: 18px 0; border-bottom: 1px dashed var(--color-rule); }
.ex-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.ex-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ex-row-head b { font-size: 0.95rem; font-weight: 600; color: var(--color-dark); }
.ex-row-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-primary-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ex-row-val i { font-style: normal; font-weight: 500; font-size: 0.8rem; color: var(--color-text-muted); }
.ex-row.is-out .ex-row-val { color: var(--color-amber); }
.ex-track { position: relative; height: 8px; border-radius: 999px; background: #EDF1F7; }
.ex-ref {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--from, 20%);
  right: calc(100% - var(--to, 80%));
  border-radius: 999px;
  background: #D8F0E2;
}
.ex-dot {
  position: absolute;
  top: 50%;
  left: var(--at, 50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-primary-strong);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(16, 40, 64, 0.28);
}
.ex-row.is-out .ex-dot { background: var(--color-amber); }
.ex-row-ref { margin: 10px 0 0; font-size: 0.78rem; color: var(--color-text-muted); font-weight: 300; }
.ex-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-rule);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: 300;
}
.ex-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ex-legend i { width: 22px; height: 8px; border-radius: 999px; background: #D8F0E2; flex-shrink: 0; }
.ex-legend i.is-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-amber); }

/* Panels of exams */
.ex-panels { padding: var(--section-y) 0; }
/* Reading results back */
.ex-read { padding: 0 0 104px; }
.ex-read-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.ex-read-points { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.ex-read-point { display: flex; gap: 16px; }
.ex-read-point b { display: block; font-weight: 600; color: var(--color-dark); margin-bottom: 3px; }
.ex-read-point span { color: var(--color-text-muted); font-weight: 300; font-size: 0.93rem; }

/* Responsive, both pages */
@media (max-width: 1024px) {
  /* minmax(0, …) rather than a bare 1fr — see WARNINGS.md. `1fr` has an
     implicit min-width:auto, so the track cannot shrink below its content's
     min-content and the page scrolls sideways instead. This bit
     /emagrecimento/ for real on a 360px phone. */
  .ex-read { padding: 0 0 80px; }
  .ex-read-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 767px) {
  .ex-read { padding: 0 0 56px; }
  .ex-card { padding: 20px; }
}

/* The ripple on /cholo-exame/. The marker stays 15px — this box is bigger and
   centred on it, and sits behind so the ripple appears to leave from under the
   dot. .ex-dot's own transform already makes it a stacking context, so
   z-index: -1 stays inside it and cannot fall behind the card. */
.ex-dot-anim {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}

/* The hero of this page is a lab RESULT. This section is the REQUEST — the
   other half of the same pair of documents — so it is drawn as one, instead of
   as six identical feature cards with decorative icons floating in air. Same
   header furniture as the result card (mark + stencil), the panels set as a
   request form's groups, each test on its own ruled line.
   The icons are gone on purpose: a droplet next to the word "Sangue" told the
   reader nothing the heading had not already said, and it was making every
   card 40px taller. */
.ex-request {
  max-width: 940px;
  margin: 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: 30px 34px 34px;
  box-shadow: 0 22px 48px rgba(16, 40, 64, 0.10);
}
.ex-request-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--color-dark);
}
.ex-request-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 40px;
}
.ex-group h3 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
  margin: 0 0 10px;
}
.ex-group ul { display: flex; flex-direction: column; }
.ex-group li {
  padding: 9px 0;
  border-bottom: 1px dashed var(--color-rule);
  font-size: 0.94rem;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.45;
}
.ex-group li:last-child { border-bottom: 0; }
@media (max-width: 1024px) {
  .ex-request-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ex-request { padding: 24px 20px 26px; }
  .ex-request-body { grid-template-columns: 1fr; gap: 22px; }
}