:root {
  --paper: #f4f6f8;
  --paper-shadow: #e5eaee;
  --card-bg: #ffffff;
  --ink: #1f2937;
  --ink-faded: #5b6472;
  --hairline: #c7ced6;
  --accent: #b91c1c;
  --accent-low: #0f766e;
  --warning: #b45309;
  --warning-bg: #fef3e2;
  /* % here, not vw: vw is the viewport width including the vertical scrollbar's
     own gutter, while % resolves against the actual (already scrollbar-adjusted)
     content box — so 96vw can render wider than what's really visible whenever a
     vertical scrollbar is reserved (real mobile browsers use overlay scrollbars
     that reserve no width, which is why this never showed up there; a desktop
     Chrome window — including DevTools' device-toolbar emulation, still the
     desktop engine underneath — does reserve one, so it did show up there). */
  --content-width: min(96%, 1200px);
}

/* Self-hosted rather than a Google Fonts request — this is a clinical app, so
   avoiding an external network dependency in the page's critical path is worth
   more than the extra ~110KB. Liberation Sans Narrow is metrically compatible
   with Arial Narrow (same license family as the rest of this project's bundled
   fonts) and is the "narrower than current" condensed look the wordmark needs. */
@font-face {
  font-family: "Liberation Sans Narrow";
  src: url("../fonts/LiberationSansNarrow-Bold.e842a7fa0a5f.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

a { color: var(--accent-low); }
a:hover { color: var(--ink); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "DejaVu Sans", Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0 1rem 3rem;
}

header {
  position: relative;
  background: var(--card-bg);
  border-bottom: 1px solid var(--hairline);
  padding: 1.5rem 2rem 1rem;
  text-align: center;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.brand-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 22%;
}

header h1 {
  /* No text-transform: uppercase — "FideLIS" is a deliberate mixed-case name (Fide +
     LIS), and forcing it to uppercase erases the pun. */
  font-family: "Liberation Sans Narrow", "Arial Narrow", sans-serif;
  letter-spacing: 0.01em;
  font-weight: 700;
  margin: 0;
  font-size: 2.1rem;
}

.brand-fide { color: var(--ink); }
.brand-lis {
  background: linear-gradient(90deg, #1d4ed8, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

header p.tagline {
  margin: 0;
  color: var(--ink-faded);
  font-style: italic;
  font-size: 0.9rem;
}

nav.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-faded);
}

nav.breadcrumbs a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--hairline); }
nav.breadcrumbs a:hover { color: var(--accent); }
nav.breadcrumbs span.current { font-weight: bold; }

.auth-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-faded);
  margin-bottom: 0.75rem;
}

.auth-bar a { color: var(--ink-faded); text-decoration: none; border-bottom: 1px dotted var(--hairline); }
.auth-bar a:hover { color: var(--accent); }

.login-page {
  min-height: calc(100vh - 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: 340px;
}

.login-card .field-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.login-card input[type="text"], .login-card input[type="password"] {
  width: 100%;
  padding: 0.55rem 0.7rem;
}

.login-card .btn { width: 100%; text-align: center; margin-top: 0.4rem; }

.messages { list-style: none; max-width: var(--content-width); margin: 1.5rem auto 0; padding: 0; }
.messages li {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 0.6rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--card-bg);
}
.messages li.success { color: var(--accent-low); border-color: var(--accent-low); }
.messages li.error { color: var(--accent); border-color: var(--accent); }

.ledger-card {
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 6px rgba(15, 23, 42, 0.05);
  padding: 1.5rem 2rem;
  margin: 1.5rem auto;
  max-width: var(--content-width);
}

.ledger-card h2 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.3rem;
  margin-top: 0;
}

.field-hint {
  font-size: 0.8rem;
  color: var(--ink-faded);
  margin: 0.3rem 0 0;
}

.camera-capture-panel {
  margin-top: 0.6rem;
}

.camera-capture-panel video {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--ink-faded);
  display: block;
}

.camera-capture-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.ledger-card h3 {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink-faded);
  margin: 1.8rem 0 0.2rem;
}

/* Consolidates what used to be several separate ledger-cards (Paciente, Médico,
   Orden, Informe, Registrar Muestra) into sections of one card — just spacing, no
   extra rule between sections, since each section's own h2 already carries a
   bottom border and a second hairline right above it read as a doubled-up line. */
.order-section + .order-section,
.order-section-columns + .order-section {
  margin-top: 2.5rem;
}

/* Paciente / Médico Solicitante side by side instead of stacked — same card,
   vertically centered on each other since one has fewer rows than the other. */
.order-section-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  align-items: start;
}
.order-section-columns .order-section {
  margin-top: 0;
}

/* A subtle tinted panel per section (Paciente+Médico together, then Orden,
   Análisis Solicitados, ... each their own) so they read as distinct groups
   within the one surrounding .ledger-card instead of all blurring into its
   plain white background — same --paper-shadow tint already used for zebra
   striping elsewhere, not a new color. Nested .order-section inside
   .order-section-columns stays transparent so Paciente/Médico share one panel
   rather than each getting their own nested inside it. */
.order-section-columns,
.order-section {
  background: var(--paper-shadow);
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
}
.order-section-columns .order-section {
  background: none;
  padding: 0;
  border-radius: 0;
}

@media (max-width: 640px) {
  .order-section-columns {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}

/* Small vacutainer-style tube badge on sample cards — a colored cap (lavender EDTA,
   yellow serum, blue citrate, green heparin) over a short, round-bottomed clear
   body, the color cue living on the cap the same way it does on the real tube a
   biochemist reaches for. Fixed size, pinned below the header's hairline (not
   stretched to the card's height — a long result table can make a sample card very
   tall, and an earlier version stretched a watermark the full height of it, worse
   the more results a sample had). */
.sample-card { position: relative; }
.tube-icon {
  position: absolute;
  top: 3.6rem;
  right: 1.8rem;
  width: 4.8rem;
  height: 5.8rem;
}
.tube-cap-edta    { --cap-color: #9370db; }
.tube-cap-serum   { --cap-color: #eab308; }
.tube-cap-citrate { --cap-color: #2563eb; }
.tube-cap-heparin { --cap-color: #16a34a; }
.tube-cap-urine   { --cap-color: #d97706; }
.tube-cap-other   { --cap-color: #9aa5b1; }

dl.field-list {
  display: grid;
  grid-template-columns: minmax(11rem, max-content) 1fr;
  column-gap: 1.5rem;
  row-gap: 0.6rem;
  align-items: start;
  margin: 0;
}
.field-row { display: contents; }
/* min-width: 0 on both — .field-row's display:contents promotes dt/dd to be the
   actual grid items, and grid items default to min-width:auto, which floors their
   size at their content's intrinsic width rather than 0. A bare <input> can report
   a surprisingly large intrinsic min-content width (varies by browser/engine —
   this is what let it blow out its own grid track and escape .ledger-card on some
   browsers but not others, at the exact same declared width:100%). */
.field-row dt {
  color: var(--ink-faded);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 0.3rem;
  min-width: 0;
}
.field-row dd { margin: 0; min-width: 0; }
.field-row dd input[type="text"] {
  width: 100%;
  max-width: 16rem;
}

/* Zebra striping for a long field-list (e.g. /carga-masiva/'s one row per
   analyte, which can run to dozens) — same alternating tint as a results
   table's tbody tr:nth-child(even) (see table.results-table above), just
   applied opt-in via this extra class since most field-lists are only a
   handful of rows and don't need it. .field-row is display:contents (see its
   own rule above), so its dt/dd are the actual grid items to color — dt's
   box-shadow (no blur, offset by exactly the grid's column-gap) extends its
   background rightward across that gap so the band reads as one continuous
   row instead of two separate colored cells with a white seam between them.
   dt and dd would otherwise still band at different heights, since dd's own
   height comes from its bigger/bordered <input>, not from dt's plain label
   text — stretch (overriding the grid's own default align-items: start, which
   sizes each item to its own content) makes dt fill the same row height as
   dd, and dt's own flex centers its label text within that taller box. */
.field-list.field-list-striped {
  align-items: stretch;
}
.field-list.field-list-striped .field-row dt,
.field-list.field-list-striped .field-row dd {
  padding: 0.4rem 0.6rem;
  margin: -0.4rem -0.6rem;
}
.field-list.field-list-striped .field-row dt {
  display: flex;
  align-items: center;
}
.field-list.field-list-striped .field-row:nth-child(even) dt {
  background: var(--paper-shadow);
  box-shadow: 1.5rem 0 0 var(--paper-shadow);
}
.field-list.field-list-striped .field-row:nth-child(even) dd {
  background: var(--paper-shadow);
}

.required-pill {
  display: inline-block;
  background: var(--warning-bg);
  color: var(--warning);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.05rem 0.5rem;
  vertical-align: middle;
}

.table-scroll {
  overflow-x: auto;
}

table.results-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--hairline);
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

table.results-table th, table.results-table td {
  border-bottom: 1px solid var(--hairline);
  padding: 0.45rem 0.75rem;
  text-align: left;
}

table.results-table tbody tr:nth-child(even) {
  background: var(--paper-shadow);
}

table.results-table th {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-faded);
}

tr.flag-high td.flag-cell { color: var(--accent); font-weight: bold; }
tr.flag-low td.flag-cell { color: var(--accent-low); font-weight: bold; }

/* Valores Críticos — a narrower, more urgent band than flag-high/flag-low (merely
   outside the normal range), so it needs to visually outrank that styling. A solid
   badge (not just colored text) so it reads clearly even at a glance — plain colored
   text next to a plain value was too easy to miss, and relying on the ⚠ character's
   own color is unreliable (many fonts render it as a colorful emoji regardless of
   the CSS color set on it, so the badge's own background carries the alert instead). */
tr.critical-row { background: var(--warning-bg); }
.critical-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
  vertical-align: middle;
}

.critical-alert-box {
  border: 2px solid var(--accent);
  background: var(--warning-bg);
}
.critical-alert-box h2 { color: var(--accent); margin-top: 0; }

.critical-field-label {
  display: block;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

.astm-box-wrap {
  position: relative;
  max-width: var(--content-width);
  margin: 1.3rem auto 1rem;
}

.astm-box-wrap .astm-label {
  position: absolute;
  top: -0.65em;
  left: 0.75rem;
  background: var(--card-bg);
  padding: 0 0.4rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faded);
}

/* Results still awaiting accept/reject — needs to visually outrank the ordinary
   labeled boxes (raw ASTM dumps, receta text) it's built from, so a tech can't miss
   that a sample isn't actually done yet. */
.review-pending-box {
  border: 1px solid var(--warning);
  border-radius: 6px;
  background: var(--warning-bg);
  padding: 1rem 1rem 0.8rem;
}

.review-pending-box .astm-label {
  color: var(--warning);
  background: var(--warning-bg);
  font-weight: 700;
  font-size: 0.8rem;
}

.review-pending-box .results-table {
  background: var(--card-bg);
}

.review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.action-row form {
  display: contents;
}

/* "Eliminar Orden" moved out of .action-row entirely into its own card at the
   very end of the page (order_detail.html) — with the icon buttons' wider
   padding, it no longer reliably fit on the same flex line as the others, and
   a lone danger button wrapped onto its own line still read as awkward
   leftover, not an intentional "danger zone". A faint red-tinted border (not
   the full --accent red, which would be too loud for a whole card) marks it
   as a set-apart, one-way action instead of just another card on the page. */
.danger-zone {
  border-color: #f3b7b7;
}
.danger-zone h2 {
  border-bottom-color: #f3b7b7;
}

.reject-reason {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.6rem;
  max-width: 320px;
}

.reject-reason[hidden] {
  display: none;
}

.reject-reason label {
  margin: 0;
}

.reject-reason textarea {
  resize: vertical;
}

.astm-box {
  font-family: "Courier New", monospace;
  background: var(--paper-shadow);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  white-space: pre-wrap;
  max-width: 100%;
  margin: 0;
}

.btn {
  font-family: inherit;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--ink);
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Inline action icon (see templates/partials/icons.html) — stroke="currentColor"
   so it always matches the button's own text color, including on :hover and in
   the colored variants below, without a separate color rule per variant. */
.btn-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Primary workflow action — the one forward step a user most likely wants next
   on this card (e.g. "Cargar Todos los Resultados", "Generar Informe de
   Resultados") — filled in the same teal already used for success/"go" states
   elsewhere (messages.success, flag-low, .btn-mini-filled), so it reads as "the
   main button here" at a glance instead of blending into the row of neutral
   outlined ones. */
.btn.btn-primary {
  background: var(--accent-low);
  border-color: var(--accent-low);
  color: var(--card-bg);
}

.btn.btn-primary:hover { background: var(--ink); border-color: var(--ink); }

/* Destructive action — same red already used for errors/critical states
   elsewhere (messages.error, flag-high, .critical-alert-box), applied as an
   outline at rest so a delete button reads as "careful" before it's even
   touched, not just once armed by confirm-submit.js's two-click .btn-confirm
   swap (which already fills this same red — see .btn.btn-confirm above). */
.btn.btn-danger {
  border-color: var(--accent);
  color: var(--accent);
}

.btn.btn-danger:hover { background: var(--accent); color: var(--card-bg); }

/* Icon-only action (e.g. "Descargar PDF") — square padding instead of the
   usual wide text padding, with the action name moved to a tooltip/aria-label
   so it's still identifiable without crowding a results table row with a full
   label next to "Ver PDF". */
.btn.btn-icon-only {
  padding: 0.55rem;
}

.btn.btn-icon-only .btn-icon {
  width: 17px;
  height: 17px;
}

.btn:hover { background: var(--ink); color: var(--card-bg); border-color: var(--ink); }

.btn.btn-confirm {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--card-bg);
}

.btn.btn-confirm:hover { background: var(--ink); border-color: var(--ink); }

.btn.btn-disabled {
  color: var(--hairline);
  border-color: var(--hairline);
  cursor: not-allowed;
  pointer-events: none;
}

.btn.btn-disabled:hover { background: var(--card-bg); color: var(--hairline); border-color: var(--hairline); }

/* WhatsApp's own brand green (#25D366), not this app's --accent-low teal — the
   point is for staff to recognize it at a glance as "the WhatsApp button". */
.btn.btn-whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}

.btn.btn-whatsapp:hover { background: #1da851; border-color: #1da851; }

a.btn-disabled-link {
  color: var(--hairline);
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

.btn-mini {
  font-family: inherit;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-faded);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.05rem 0.5rem;
  margin-left: 0.4rem;
  cursor: pointer;
  vertical-align: middle;
}

.btn-mini:hover {
  border-color: var(--accent-low);
  color: var(--accent-low);
}

.btn-mini.btn-mini-filled {
  background: var(--accent-low);
  border-color: var(--accent-low);
  color: var(--card-bg);
}

.btn-mini.btn-mini-filled:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--card-bg);
}

.obs-row form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.obs-row textarea {
  width: 100%;
  max-width: 400px;
  font-family: inherit;
  box-sizing: border-box;
}

input[type="text"], input[type="password"], input[type="date"], textarea, select {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent-low);
}

input[readonly].autofilled {
  background: var(--paper-shadow);
  color: var(--ink-faded);
}

.search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.search-bar input[type="text"] {
  flex: 1 1 260px;
}

.catalog-search {
  position: relative;
  max-width: 560px;
}

.catalog-search-input {
  width: 100%;
}

.catalog-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-top: none;
  max-height: 260px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.catalog-search-result {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.catalog-search-result:hover,
.catalog-search-result.active {
  background: var(--paper-shadow);
}

.catalog-search-result .meta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faded);
  white-space: nowrap;
}

.catalog-search-empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-faded);
}

.catalog-selected {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.catalog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--paper-shadow);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.3rem 0.5rem 0.3rem 0.75rem;
  font-size: 0.85rem;
  color: var(--ink);
}

.catalog-chip .chip-type {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faded);
}

.catalog-chip button {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.15rem;
}

/* Its remove button posts to orders:remove_requested_item instead of just
   detaching a DOM node, but it's the exact same .catalog-chip look as the
   order-entry search-to-add selections — the <form> wrapper is the only
   addition, kept out of the way of .catalog-chip's flex layout. */
.requested-items-list {
  list-style: none;
  margin: 0.6rem 0 1.2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.requested-items-list .catalog-chip form {
  display: contents;
}

label {
  font-size: 0.85rem;
  color: var(--ink-faded);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.copy { max-width: var(--content-width); margin: 1rem auto; }

.order-form-img, .order-form-pdf {
  display: block;
  margin: 1.5rem auto;
  max-width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.12);
}

.pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.pagination-status {
  color: var(--ink-faded);
}

.empty-notice {
  max-width: var(--content-width);
  margin: 1.5rem auto;
  padding: 1rem 1.5rem;
  border: 1px dashed var(--hairline);
  border-radius: 8px;
  color: var(--ink-faded);
}

@media (max-width: 600px) {
  header {
    padding: 1rem 1rem 0.75rem;
  }

  .auth-bar {
    justify-content: center;
    gap: 0.3rem 0.6rem;
    font-size: 0.78rem;
  }

  header h1 {
    font-size: 1.15rem;
    letter-spacing: 0.05em;
  }

  .brand-icon {
    width: 1.8rem;
    height: 1.8rem;
  }

  .ledger-card,
  .empty-notice {
    padding: 1rem;
    margin: 1rem auto;
  }

  dl.field-list {
    grid-template-columns: 1fr;
    row-gap: 0.9rem;
  }

  .field-row dt {
    padding-top: 0;
  }

  .field-row dd input[type="text"] {
    max-width: 100%;
  }

  .catalog-search {
    max-width: 100%;
  }

  .btn {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
  }
}