/* public/capture.css — the unified "Añadir" capture modal (documents + note).
 *
 * Visual source: public/notes-documents-capture-mockup.html, which is the approved
 * acceptance criteria for this UI (docs/capture-consolidation-plan.md) — but the mockup
 * was a standalone prototype with its own tokens, so anything here that the app already
 * has a var() for uses the app's (docs/capture-ux-revision-plan.md, E). Icons are Tabler,
 * not emoji, for the same reason.
 *
 * EVERY class here is prefixed `cap-`. The dashboard's style.css is ~3,500 lines with
 * generic names in it (.chip, .switch, .note, .two, .seg all exist somewhere in this
 * codebase's orbit), and the mockup used exactly those unprefixed names. Prefixing is
 * what lets this file be added without auditing every rule in style.css for a collision.
 *
 * Colour tokens come from style.css. The two the dashboard does not define are declared
 * here rather than added to the global palette, since only this modal uses them.
 */

.cap-scope {
  /* style.css has --shadow-tint-purple and friends but NO plain --purple, so
     `var(--purple)` resolved to nothing and the selected format button rendered white
     text on a transparent background — the label vanished. Caught in the browser pass;
     defined here rather than added to the global palette, which only this modal needs. */
  --cap-purple: #7c3aed;
  --cap-purple-bg: #f3e8ff;
  --cap-purple-surface: #faf5ff;
  --cap-purple-border: #e9d5ff;
  --cap-amber-border: #fbbf24;
  --cap-amber-text: #a16207;
}

/* ── the two-way picker ───────────────────────────────────────────────────── */
.cap-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cap-pick {
  border: 1px solid var(--gray-300); border-radius: var(--radius);
  padding: 22px 16px; text-align: center; cursor: pointer; background: var(--white);
  font: inherit; width: 100%; display: block;
}
.cap-pick:hover, .cap-pick:focus-visible { border-color: var(--blue); background: var(--blue-light); }
.cap-pick .cap-big { font-size: 26px; display: block; margin-bottom: 8px; }
.cap-pick strong { display: block; font-size: 13.5px; }
.cap-pick span { font-size: 12px; color: var(--gray-500); }

/* ── dropzone ─────────────────────────────────────────────────────────────── */
.cap-dropzone {
  border: 2px dashed var(--gray-300); border-radius: var(--radius);
  padding: 26px; text-align: center; background: var(--gray-50);
}
.cap-dropzone.cap-hot { border-color: var(--blue); background: var(--blue-light); }
.cap-dropzone .cap-big { font-size: 26px; }
.cap-dropzone p { color: var(--gray-500); font-size: 13px; margin: 6px 0 12px; }
.cap-dropzone .cap-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ── batch bar ────────────────────────────────────────────────────────────── */
.cap-bulk {
  position: sticky; top: 0; z-index: 3; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 11px 13px; margin-bottom: 12px;
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap; box-shadow: var(--shadow);
}
.cap-bulk .cap-n { font-weight: 700; font-size: 13px; }
.cap-bulk .cap-lbl { font-size: 12px; color: var(--gray-500); }
.cap-bulk select, .cap-bulk input {
  width: auto; padding: 5px 9px; font-size: 12.5px;
  border: 1px solid var(--gray-300); border-radius: 8px; font-family: inherit;
}
.cap-progress { height: 4px; background: var(--gray-200); border-radius: 999px; overflow: hidden; width: 100%; margin-top: 4px; }
.cap-progress i { display: block; height: 100%; background: var(--blue); transition: width .3s; }

/* ── one card per file ────────────────────────────────────────────────────── */
.cap-fcard {
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden; background: var(--white);
}
.cap-fcard.cap-warnrow { border-color: var(--cap-amber-border); }
/* #fca5a5 on var(--red-bg) is the pairing style.css already uses for error rows; the
   mockup's #fff5f5 was the one colour in this file with no precedent anywhere in the app. */
.cap-fcard.cap-err { border-color: #fca5a5; background: var(--red-bg); }
.cap-fcard.cap-off { background: var(--gray-50); }
.cap-fhead { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; }
.cap-fhead .cap-ic {
  width: 30px; height: 30px; border-radius: 7px; background: var(--blue-light);
  display: grid; place-items: center; font-size: 15px; flex: none;
}
.cap-fcard.cap-err .cap-ic { background: var(--red-bg); }
.cap-fhead .cap-fm { flex: 1; min-width: 0; }
.cap-fhead .cap-fm strong { font-size: 13px; display: block; word-break: break-word; }
.cap-fhead .cap-fm .cap-sum { font-size: 12.5px; color: var(--gray-500); font-style: italic; margin-top: 2px; }
.cap-fhead .cap-fm .cap-errtext { font-size: 12.5px; color: #b91c1c; margin-top: 2px; }
.cap-fhead .cap-fm .cap-warntext { font-size: 12.5px; color: var(--cap-amber-text); margin-top: 2px; }
.cap-fhead .cap-rt { display: flex; gap: 6px; align-items: center; flex: none; }

/* ── editable chips ───────────────────────────────────────────────────────── */
.cap-chiprow { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; padding: 0 13px 11px 54px; }
.cap-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--gray-300); background: var(--white); border-radius: 999px;
  padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--gray-700);
}
.cap-chip:hover, .cap-chip:focus-within { border-color: var(--blue); color: var(--blue); }
.cap-chip .cap-k { font-weight: 500; color: var(--gray-400); }
.cap-chip .cap-pen { opacity: .45; font-size: 11px; }
.cap-chip select, .cap-chip input {
  border: none; padding: 0; font: inherit; font-weight: 600; font-size: 12.5px;
  width: auto; box-shadow: none !important; background: transparent; color: inherit;
}
.cap-chip select:focus, .cap-chip input:focus { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.cap-chip.cap-req { border-color: var(--cap-amber-border); background: #fffbeb; }

.cap-vals {
  margin: 0 13px 11px 54px; border: 1px solid var(--gray-200);
  border-radius: 8px; background: var(--gray-50); padding: 10px 12px;
}
.cap-vals h4 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gray-500); margin: 0 0 7px;
}
.cap-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 12.5px; margin: 0; }
.cap-kv dt { color: var(--gray-500); }
.cap-kv dd { font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; }

/* ── include-in-analysis switch ───────────────────────────────────────────── */
.cap-switch {
  position: relative; width: 36px; height: 20px; border-radius: 999px;
  background: var(--gray-300); cursor: pointer; flex: none; transition: .18s;
  border: none; padding: 0; display: inline-block;
}
.cap-switch.cap-on { background: var(--teal); }
.cap-switch i {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--white); transition: .18s; box-shadow: var(--shadow);
}
.cap-switch.cap-on i { left: 18px; }
.cap-switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cap-xbtn { background: none; border: none; color: var(--gray-400); font-size: 15px; cursor: pointer; line-height: 1; padding: 2px 4px; }
.cap-xbtn:hover { color: var(--red); }

/* ── the analysis budget line (10 docs / 15 MB, the real server constants) ── */
.cap-budget {
  border-radius: 8px; padding: 9px 12px; font-size: 12.5px;
  display: flex; gap: 9px; align-items: flex-start; margin-bottom: 12px;
}
.cap-budget > span:last-child { flex: 1; }
.cap-budget.cap-ok { background: var(--teal-bg); color: #0f766e; }
.cap-budget.cap-over { background: var(--orange-bg); color: #9a3412; }

/* ── note: format segment + AI draft box ──────────────────────────────────── */
.cap-seg { display: inline-flex; border: 1px solid var(--gray-300); border-radius: 999px; overflow: hidden; }
.cap-seg button {
  border: none; background: var(--white); padding: 6px 13px; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--gray-600); cursor: pointer; border-right: 1px solid var(--gray-200);
}
.cap-seg button:last-child { border-right: none; }
.cap-seg button.cap-on { background: var(--cap-purple); color: var(--white); }
.cap-nrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--gray-200); }
.cap-nrow .cap-rowlabel {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-400); width: 100%;
}
/* What the chosen format IS, on its own line under the segment. It was a one-line hint
   beside the buttons that never named NOM or PSOAP; full width because the NOM section
   list does not fit on a remainder of the segment's row. */
.cap-fdesc {
  flex: 1 0 100%; margin: 2px 0 0; font-size: 12.5px;
  line-height: 1.5; color: var(--gray-600);
}
/* The classifier's format suggestion, offered as a chip instead of being written into the
   selection. Purple like every other AI affordance in this modal, and deliberately NOT
   .btn-primary: taking the suggestion closes the Save gate, so it must not outrank the
   segment the doctor is looking at. Tokens are the ones defined at the top of this file —
   a bare var() naming nothing would invalidate the whole declaration. */
.cap-suggest {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--cap-purple-border);
  background: var(--cap-purple-bg); color: var(--cap-purple); border-radius: 999px;
  padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.cap-suggest:hover { border-color: var(--cap-purple); }
.cap-quote {
  font-size: 12.5px; color: var(--gray-600); font-style: italic;
  background: var(--cap-purple-surface); border-radius: 8px; padding: 10px 12px;
}
.cap-aibox { border: 1px solid var(--cap-purple-border); border-radius: 8px; background: var(--cap-purple-surface); padding: 12px; margin: 12px 0; }
.cap-aibox .cap-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.cap-aibox .cap-hd h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--cap-purple); margin: 0; }
.cap-aibox .cap-ready { font-size: 12px; font-weight: 700; color: #15803d; background: var(--green-bg); border-radius: 6px; padding: 2px 8px; }
/* The AI rewrite is the gate for NOM/PSOAP, so it is a full-width step in the flow rather
   than a right-aligned button in the box header, which a doctor had to hunt for. It takes
   the app's own .btn-primary while the gate is closed and drops to .cap-btn once the draft
   exists, since redoing it is no longer the primary action at that point. */
.cap-runai {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-bottom: 10px;
}
.cap-struct { background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px; padding: 12px; font-size: 12.5px; }
.cap-struct .cap-sec { margin-bottom: 9px; }
.cap-struct .cap-sec:last-child { margin-bottom: 0; }
.cap-struct .cap-sec h5 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin: 0 0 2px; }
.cap-struct .cap-sec p { color: var(--gray-700); margin: 0; white-space: pre-wrap; }
.cap-struct .cap-sec.cap-missing { background: var(--yellow-bg); border-radius: 6px; padding: 7px 9px; margin-top: 10px; }
.cap-struct .cap-sec.cap-missing h5 { color: var(--cap-amber-text); }
.cap-struct .cap-sec.cap-missing p { color: #854d0e; }

/* ── the shared analysis row, identical on both paths ─────────────────────── */
.cap-analysisrow {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 11px 13px; background: var(--teal-bg); border-radius: 8px; margin-top: 12px;
}
.cap-analysisrow.cap-off { background: var(--gray-100); }
.cap-analysisrow .cap-lbl { font-size: 13px; font-weight: 600; color: #0f766e; display: flex; align-items: center; gap: 8px; }
.cap-analysisrow.cap-off .cap-lbl { color: var(--gray-500); }
.cap-analysisrow .cap-conseq { font-size: 12px; color: #0f766e; opacity: .85; }
.cap-analysisrow.cap-off .cap-conseq { color: var(--gray-500); }

/* ── misc ─────────────────────────────────────────────────────────────────── */
.cap-spacer { flex: 1; }
.cap-note { font-size: 12.5px; color: var(--gray-500); margin-top: 10px; }
.cap-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cap-field { display: block; margin-bottom: 14px; }
.cap-field > span { display: block; font-size: 12px; font-weight: 700; color: var(--gray-600); margin-bottom: 5px; }
.cap-field input, .cap-field textarea, .cap-field select {
  width: 100%; border: 1px solid var(--gray-300); border-radius: 8px;
  padding: 9px 11px; font: inherit; font-size: 13.5px; background: var(--white); color: var(--gray-800);
}
.cap-field textarea { min-height: 150px; resize: vertical; }
.cap-scanning { padding: 22px; text-align: center; color: var(--gray-500); }
.cap-spin { width: 22px; height: 22px; border: 3px solid var(--gray-200); border-top-color: var(--blue); border-radius: 50%; animation: cap-sp .8s linear infinite; }
.cap-spin.cap-centered { margin: 0 auto 10px; }
.cap-spin.cap-xs { width: 15px; height: 15px; border-width: 2px; }
@keyframes cap-sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cap-spin { animation-duration: 2.4s; }
  .cap-switch, .cap-switch i, .cap-progress i { transition: none; }
}
.cap-tag { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 1px 6px; vertical-align: middle; }
.cap-tag.cap-teal { background: var(--teal-bg); color: #0f766e; }
.cap-tag.cap-amber { background: var(--yellow-bg); color: var(--cap-amber-text); }

/* The batch list is the one place a doctor scrolls inside a modal; on a phone the
   54px chip indent wastes a third of the width, so chips go full-bleed instead. */
@media (max-width: 640px) {
  .cap-picker, .cap-two { grid-template-columns: 1fr; }
  .cap-chiprow, .cap-vals { padding-left: 13px; margin-left: 13px; }
  .cap-bulk { gap: 7px; }
  .cap-bulk select, .cap-bulk input { flex: 1 1 auto; min-width: 0; }
}

/* The capture modal reuses the note modal's shell for its chrome, but NOT its height:
   .modal-content-add-note carries min-height:600px, sized for the classic note form's
   fixed field list. This modal's content varies from a two-button picker to a scrolling
   batch of twenty file cards, so a 600px floor leaves the picker stranded above a void.
   Size to content instead, and let the body scroll once it would exceed the viewport. */
#capture-modal .modal-content {
  min-height: 0;
  height: auto;
  max-height: 90vh;
}
/* The header's rule sat flush against the first field ("Escribe o pega la nota", the
   picker cards), so the title read as part of the form rather than above it. Scoped to
   this modal: every other modal in the app keeps the spacing it already had. */
#capture-modal .modal-header { margin-bottom: 10px; }
#capture-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-top: 6px;
}
#capture-modal .modal-actions {
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ── Descartar / Atrás / Cancelar contrast — the reported failure, reproduced ──
   The global .btn-secondary is styled for the app's DARK chrome: rgba(255,255,255,0.08)
   background, var(--gray-300) #cbd5e1 text, rgba(255,255,255,0.15) border. style.css
   corrects it for white modal footers, but that correction is scoped to
   `.modal-actions-split .btn-secondary` (style.css:2916) — and this modal's footer is a
   plain `.modal-actions`, whose own background is var(--gray-50) #f8fafc. Nothing in the
   cascade matched, so every secondary button in this footer rendered #cbd5e1 on ~#f9fafc:
   a 1.42:1 contrast ratio, with a border at 1.01:1 against it — invisible. Same pairing style.css:2916 uses,
   scoped by id so it beats both the global base rule and .modal-actions-split:
   #334155 on #f1f5f9 = 9.45:1. */
#capture-modal .modal-actions .btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}
#capture-modal .modal-actions .btn-secondary:hover {
  background: var(--gray-200);
  color: var(--gray-800);
  border-color: var(--gray-400);
}
#capture-modal .modal-actions .btn-secondary:disabled { opacity: 0.55; }

/* Small buttons INSIDE the modal body.
   Not .btn-secondary: that class's base rule is styled for a DARK surface (white-8%
   background, slate-300 text) and style.css only corrects it inside
   .modal-actions-split — NOT inside the plain .modal-actions this modal uses, which is
   the footer contrast bug fixed above. On the white modal body it renders as
   near-invisible grey-on-white either way. */
.cap-btn {
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-700);
  border-radius: 999px;
  padding: 5px 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
}
.cap-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.cap-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cap-btn[disabled] { opacity: .55; cursor: default; }
.cap-btn[disabled]:hover { border-color: var(--gray-300); color: var(--gray-700); background: var(--white); }

/* The two include/exclude buttons are one decision — keep them on the same line so the
   bar wraps as a unit instead of orphaning "exclude all" on a row of its own. */
.cap-btngroup { display: inline-flex; gap: 6px; }

/* style.css guarantees a 44px touch target for every button class it knows about at
   <=768px (style.css:3698). .cap-btn is this modal's button class and was not in that
   list, so the batch bar's controls were ~28px tall on a phone. Same breakpoint as the
   app's rule, not this file's 640px one. */
@media (max-width: 768px) {
  .cap-btn { min-height: 44px; }
}

/* On a phone the footer hint and the two buttons compete for one row and the hint ends
   up crowding "Discard". Give the hint its own line there. */
@media (max-width: 640px) {
  #capture-modal .modal-actions .cap-note { flex: 1 0 100%; margin: 0 0 6px; }
}