: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;
  --content-width: min(96vw, 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.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 {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-faded);
}

.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;
}

@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; }
.field-row dt {
  color: var(--ink-faded);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 0.3rem;
}
.field-row dd { margin: 0; }
.field-row dd input[type="text"] {
  width: 100%;
  max-width: 16rem;
}

.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; }

.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;
}

.action-row-danger {
  margin-left: 1rem;
}

.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-block;
}

.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); }

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: 420px;
}

.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;
}

/* Compact read-only echo of what was requested — same chip look as the order-entry
   search-to-add selections, minus the remove button, so an order's ask is visible
   at a glance without opening the (currently a placeholder/demo-only) order form. */
.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 li {
  background: var(--paper-shadow);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
  color: var(--ink);
}

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;
  }

  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: block;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
  }
}