/* FEL → PDF
   Type roles: monospace labels the machine-issued identifiers this subject is
   made of (NIT, serie, número, autorización); system sans carries the body.
   No web fonts by design — the page must load with no external requests. */

:root {
  --ink:      #16202B;
  --paper:    #FFFFFF;
  --chrome:   #F2F4F7;
  --rule:     #D8DEE6;
  --muted:    #67727F;
  --accent:   #1F6F5C;
  --accent-d: #175446;
  --danger:   #A33A2A;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --gap: 22px;
  --radius: 3px;
  --field-h: 34px;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* Fixed-height app shell. The workspace fits the viewport and each pane
   scrolls on its own, so the PDF frame is exactly as tall as its pane. Letting
   the document scroll instead gives a page scrollbar, a second scrollbar
   inside the PDF viewer, and a masthead that scrolls away. */
html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--chrome);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- masthead ---------- */

.masthead {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 26px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.masthead__mark {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mark__arrow {
  color: var(--accent);
  padding: 0 0.55em;
  font-weight: 400;
}

.masthead__tagline {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

/* Attribution sits in the masthead rather than a page footer: the workspace
   fills the viewport, so a footer would cost both panes vertical space. */
.madeby {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 120ms ease;
}

.madeby:hover,
.madeby:focus-visible { opacity: 1; }

.madeby:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.madeby__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* The logo is a wordmark, so it carries the name — no need to repeat it.
   Height is set so the lettering inside stays legible; below about 22px the
   wordmark degrades into a smudge. */
.madeby__logo {
  height: 24px;
  width: auto;
  display: block;
}

/* ---------- workspace ---------- */

.workspace {
  flex: 1 1 auto;
  min-height: 0;          /* without this the grid refuses to shrink and the
                             document scrolls instead of the panes */
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 1px;
  background: var(--rule);
  overflow: hidden;
}

.composer,
.viewer {
  /* A scroll container must also be the containing block for its
     absolutely-positioned descendants. Without this, .visually-hidden labels
     resolve against the initial containing block, escape the pane, and extend
     the document past the viewport. */
  position: relative;
  background: var(--paper);
  padding: 26px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.viewer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--chrome);
  /* The preview pane itself never scrolls — the stage fills it and the PDF
     viewer handles its own paging. */
  overflow: hidden;
}

/* ---------- groups ---------- */

.group { margin-bottom: var(--gap); }
.group:last-of-type { margin-bottom: 0; }

.group__label {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- dropzone ---------- */

.dropzone { display: block; }

.dropzone__target {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 30px 18px;
  text-align: center;
  cursor: pointer;
  background: var(--chrome);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  /* the folded corner of a document, not a generic dashed box */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: background 120ms ease, border-color 120ms ease;
}

.dropzone__target:hover { border-color: var(--accent); }

.dropzone.is-over .dropzone__target {
  background: #EAF2EF;
  border-color: var(--accent);
  border-style: solid;
}

.dropzone__lead { font-weight: 500; }
.dropzone__sub  { color: var(--muted); font-size: 12.5px; }

.dropzone__limit {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.visually-hidden:focus-visible + .dropzone__target {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- file card ---------- */

.filecard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}

.filecard__kind {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 1px 5px;
}

.filecard__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filecard__size {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

/* ---------- fields ---------- */

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

.field__label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--muted);
}

.field__help {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}

.counter {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  margin-right: 6px;
}

.counter.is-full { color: var(--danger); }

input[type="text"],
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 7px 9px;
}

input[type="text"] { height: var(--field-h); }
textarea { resize: vertical; line-height: 1.45; }

input[type="text"]::placeholder,
textarea::placeholder { color: #9AA4AF; }

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* ---------- color pair ---------- */

.colorpair { display: flex; gap: 8px; align-items: center; }

input[type="color"] {
  inline-size: 42px;
  block-size: var(--field-h);
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
}

.hexinput {
  width: 100px;
  font-family: var(--mono);
  font-size: 12.5px;
  text-transform: uppercase;
}

.hexinput.is-invalid { border-color: var(--danger); }

/* ---------- logo picker ---------- */

.logopick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.logopick__thumb {
  width: 34px; height: 34px;
  object-fit: contain;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}

.logopick__name {
  font-size: 12px;
  color: var(--muted);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- bank account ---------- */

.field__help--lead { margin: -6px 0 12px; }

.bankgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bankgrid .field { margin-bottom: 0; }
.bankgrid__wide { grid-column: 1 / -1; }

.mono { font-family: var(--mono); font-size: 12.5px; }

/* ---------- buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--field-h);
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.button--primary {
  background: var(--accent);
  color: #fff;
}

.button--primary:hover { background: var(--accent-d); }

.button--primary[aria-disabled="true"],
.button--primary:disabled {
  background: #B6C0C9;
  cursor: not-allowed;
}

.button--quiet {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule);
}

.button--quiet:hover { border-color: var(--accent); color: var(--accent); }

.button:focus-visible,
.linkbutton:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.linkbutton {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.linkbutton:hover { color: var(--danger); }

.composer__actions {
  margin-top: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--rule);
}

.composer__actions .button { width: 100%; }

/* ---------- viewer stage ---------- */

.viewer__label { margin-bottom: 0; }

.stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.stage__empty,
.stage__busy,
.stage__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.stage__caption {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.schematic {
  width: 268px;
  height: auto;
  animation: settle 420ms ease-out both;
}

.schematic__page  { fill: none; stroke: var(--rule); stroke-width: 1; }
.schematic__rule  { fill: var(--rule); }
.schematic__line  { fill: #E4E9EF; }
.schematic__block { fill: #E4E9EF; }
.schematic__card  { fill: none; stroke: var(--rule); stroke-width: 1; }
.schematic__tint  { fill: #E9F1EE; }
.schematic__accent{ fill: var(--accent); opacity: 0.55; }
.schematic__band  { fill: var(--accent); opacity: 0.75; }
.schematic__qr    { fill: #D2DAE2; }

.stage__frame {
  width: 100%;
  height: 100%;
  border: 0;
  animation: fade 260ms ease-out both;
}

.spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

/* ---------- errors ---------- */

.errormsg {
  margin: 0;
  max-width: 42ch;
  color: var(--danger);
  font-weight: 500;
}

.errorlist {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  text-align: left;
}

.errorlist li { margin-top: 4px; }

/* ---------- viewer bar ---------- */

.viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.status {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---------- motion ---------- */

@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 940px) {
  /* Return to normal document flow. The fixed-height shell only works with the
     panes side by side; stacked, each pane is allotted half the viewport while
     needing several times that, and the content spills out and overlaps.
     Every part of the shell has to be undone — height, display and overflow —
     not just the overflow. */
  html,
  body {
    height: auto;
  }

  body {
    display: block;
    overflow: visible;
    min-height: 100dvh;
  }

  .workspace {
    display: block;
    overflow: visible;
  }

  .composer,
  .viewer {
    overflow: visible;
  }

  /* The 1px grid gap drew the divider; as blocks they need their own rule. */
  .viewer { border-top: 1px solid var(--rule); }

  /* Shape the stage like the page it shows. A fixed viewport fraction leaves
     a letter-proportioned PDF floating in tall dead margins. */
  .stage {
    min-height: 0;
    aspect-ratio: 8.5 / 11;
  }

  /* The stacked layout is what touch devices get, so size for fingers here
     rather than at phone widths only — a tablet is no less touch-driven. */
  :root { --field-h: 44px; }

  /* 16px minimum: iOS Safari zooms the whole page when a smaller field is
     focused, and leaves it zoomed and scrolled sideways afterwards. */
  input[type="text"],
  textarea,
  .hexinput,
  .mono {
    font-size: 16px;
  }

  .button { font-size: 15px; }
}

@media (max-width: 520px) {
  .masthead { padding: 14px 18px; }

  /* The wordmark already says what this is; the sentence costs a fifth of a
     short screen before any content appears. */
  .masthead__tagline { display: none; }

  /* Keep the mark, drop the words: the logo alone still attributes it. */
  .madeby__label { display: none; }

  .composer, .viewer { padding: 18px; }
  .bankgrid { grid-template-columns: 1fr; }
}