/*
 * HexSign visual system. Tokens and the components the issuer sign-in needs;
 * the signer flow adds its own on top of the same tokens.
 *
 * ponytail: the three families in DESIGN.md must be self-hosted WOFF2 in
 * assets/fonts, never a CDN -- loading them from Google would leak the signer's
 * IP to a third party mid-contract and break the content security policy. The
 * files are not vendored yet, so the stacks below fall back to system faces.
 * Drop the WOFF2 files in and add the @font-face blocks; nothing else changes.
 */

:root {
  --bond: #f1f3f0;
  --sheet: #ffffff;
  --ink: #14171b;
  --graphite: #5b6169;
  --faint: #8c939b;
  --rule: #d8dbd6;
  --rule-soft: #e7e9e5;
  --timbre: #453ba6;
  --timbre-deep: #2e2775;
  --timbre-wash: #eeedfa;
  --seal: #0f6b52;
  --seal-wash: #e7f2ee;
  --alert: #a33220;
  --alert-wash: #faedea;

  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-voice: "Newsreader", Georgia, "Times New Roman", serif;
  --font-evidence: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

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

body {
  margin: 0;
  background: var(--bond);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Single column, 520px, every stage of the flow. */
.shell {
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

.brand {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 40px;
}

.card {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 28px 26px;
}

.screen-title {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 6px;
}

.lede {
  color: var(--graphite);
  font-size: 14px;
  margin: 0 0 24px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

/* A label wrapping its own checkbox is a row, not a stacked label. */
.field label:has(> input[type="checkbox"]),
.field label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  height: 42px;
  padding: 11px 13px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}

/* Focus stays visible for keyboard users, without exception. */
.field input:focus-visible,
.button:focus-visible {
  outline: none;
  border-color: var(--timbre);
  box-shadow: 0 0 0 3px var(--timbre-wash);
}

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

/* The evidence face, for a value that is a number rather than a word. */
.field input.code {
  font-family: var(--font-evidence);
  font-size: 20px;
  letter-spacing: 0.35em;
  text-align: center;
  height: 54px;
}

.button {
  display: inline-block;
  width: 100%;
  padding: 12px 20px;
  border: 1px solid var(--timbre);
  border-radius: 6px;
  background: var(--timbre);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.button:hover {
  background: var(--timbre-deep);
  border-color: var(--timbre-deep);
}

/* Quiet variant, for escape hatches. One filled button per screen. */
.button-quiet {
  display: inline-block;
  margin-top: 18px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--graphite);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
}

/*
 * A validation failure gets the alert rule, not an alert background -- the
 * washed red is reserved for states with real consequence: a refused signature,
 * an expired link, an altered document.
 */
.notice {
  border: 1px solid var(--alert);
  border-radius: 6px;
  padding: 11px 13px;
  margin-bottom: 20px;
  color: var(--alert);
  font-size: 14px;
}

/* Confirmation of something that succeeded. Same shape as .notice so the two
   never shift the layout when one replaces the other. */
.notice-ok {
  border-color: var(--rule);
  color: var(--graphite);
}

.footnote {
  color: var(--faint);
  font-family: var(--font-evidence);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 28px;
}

@media (max-width: 640px) {
  .shell {
    padding: 32px 16px 48px;
  }
}

/* ---------------------------------------------------------------------------
 * Issuer surfaces. Denser than the signer flow: these screens are used every
 * day by people who already know the tool.
 * ------------------------------------------------------------------------ */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}

.masthead .brand {
  margin: 0;
}

.masthead .brand a {
  color: inherit;
  text-decoration: none;
}

.masthead-session {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.masthead-user {
  color: var(--faint);
  font-family: var(--font-evidence);
  font-size: 12px;
  text-decoration: none;
}

.masthead-user:hover,
.masthead-user:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

.masthead-session .button-quiet {
  margin-top: 0;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.page-head .screen-title {
  margin: 0;
}

.button-compact {
  width: auto;
  padding: 9px 16px;
  font-size: 14px;
  text-decoration: none;
}

.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--sheet);
  overflow: hidden;
}

.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
}

.doc-row:last-child {
  border-bottom: 0;
}

.doc-link {
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.doc-link:hover .doc-title {
  text-decoration: underline;
}

.doc-title {
  display: block;
  font-weight: 500;
}

.doc-meta {
  display: block;
  color: var(--faint);
  font-size: 12px;
}

/* Status is never carried by colour alone: every pill states its status in
 * words, which is also what a screen reader reads out. */
.pill {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--rule-soft);
  color: var(--graphite);
}

.pill-enviado,
.pill-parcialmente_firmado {
  background: var(--timbre-wash);
  color: var(--timbre-deep);
}

.pill-completado {
  background: var(--seal-wash);
  color: var(--seal);
}

.pill-rechazado,
.pill-expirado,
.pill-anulado {
  background: var(--alert-wash);
  color: var(--alert);
}

.empty .lede:last-child {
  margin-bottom: 0;
}

.detail {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 10px 20px;
  margin: 0;
}

.detail dt {
  color: var(--graphite);
  font-size: 14px;
}

.detail dd {
  margin: 0;
  min-width: 0;
}

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

/* A hexadecimal chain needs the air between lines to stay legible. */
.hash {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.85;
}

.hint {
  color: var(--faint);
  font-size: 12px;
  margin: 8px 0 0;
}

@media (max-width: 640px) {
  .detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 0;
  }

  .detail dd {
    margin-bottom: 12px;
  }
}

/* Signer list on the document detail. */

.section-title {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 16px;
}

.card + .card {
  margin-top: 22px;
}

.signer-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}

.signer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.signer-row:last-child {
  border-bottom: 0;
}

.signer-order {
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--graphite);
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}

.signer-who {
  flex: 1;
  min-width: 0;
}

.signer-name {
  display: block;
}

.signer-meta {
  display: block;
  color: var(--faint);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.signer-row .button-quiet {
  margin-top: 0;
}

.pill-firmante-firmado {
  background: var(--seal-wash);
  color: var(--seal);
}

.pill-firmante-rechazado {
  background: var(--alert-wash);
  color: var(--alert);
}

.pill-firmante-notificado,
.pill-firmante-visto {
  background: var(--timbre-wash);
  color: var(--timbre-deep);
}

.order-toggle {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}

.order-toggle fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.order-toggle legend {
  color: var(--graphite);
  font-size: 14px;
  margin-bottom: 8px;
  padding: 0;
}

.order-toggle label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

@media (max-width: 640px) {
  .signer-row {
    flex-wrap: wrap;
  }

  .signer-who {
    flex-basis: calc(100% - 36px);
  }
}

/* ---------------------------------------------------------------------------
 * Field placement. The only screen that needs width: the document has to be
 * legible while the panel stays reachable.
 * ------------------------------------------------------------------------ */

.shell-wide {
  max-width: 1100px;
}

.next-step {
  margin: 22px 0 0;
}

.fields-editor {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.fields-panel {
  position: sticky;
  top: 24px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 20px 18px;
}

.fields-panel fieldset {
  border: 0;
  margin: 0 0 18px;
  padding: 0;
}

.fields-panel legend {
  color: var(--graphite);
  font-size: 14px;
  margin-bottom: 8px;
  padding: 0;
}

.fields-panel label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  margin-bottom: 5px;
}

/* Signers are told apart by hue on the page, so the picker shows the same hue.
 * The name is always next to it: colour is never the only cue. */
.swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

.swatch[data-swatch="0"] { background: hsl(0 55% 55%); }
.swatch[data-swatch="1"] { background: hsl(67 55% 40%); }
.swatch[data-swatch="2"] { background: hsl(134 55% 38%); }
.swatch[data-swatch="3"] { background: hsl(201 55% 48%); }
.swatch[data-swatch="4"] { background: hsl(268 55% 58%); }
.swatch[data-swatch="5"] { background: hsl(335 55% 55%); }

.fields-pages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.page-wrap {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  /* Paper gets the tightest corner radius in the system. */
  border-radius: 3px;
  border: 1px solid var(--rule);
  overflow: hidden;
}

.page-canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-number {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bond);
  color: var(--faint);
  font-size: 11px;
}

.page-layer {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  touch-action: none;
}

.field-box {
  position: absolute;
  border: 1.5px solid hsl(var(--field-hue) 55% 45%);
  background: hsl(var(--field-hue) 55% 45% / 0.14);
  border-radius: 3px;
}

.field-label {
  position: absolute;
  left: 0;
  bottom: 100%;
  white-space: nowrap;
  padding: 1px 5px;
  border-radius: 3px 3px 0 0;
  background: hsl(var(--field-hue) 55% 45%);
  color: #fff;
  font-size: 10px;
  line-height: 1.5;
}

.field-remove {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--graphite);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.field-preview {
  position: absolute;
  border: 1.5px dashed var(--timbre);
  background: var(--timbre-wash);
  border-radius: 3px;
}

@media (max-width: 860px) {
  .fields-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .fields-panel {
    position: static;
  }
}

/* The signer's voice: clauses and consent statements get the serif face. */
.voice {
  font-family: var(--font-voice);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 24px;
}

/* ---------------------------------------------------------------------------
 * The signing screen. Two columns: the document needs width, the panel needs
 * to stay reachable. Below 640px it stacks, document first, action last.
 * ------------------------------------------------------------------------ */

.sign-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.sign-pages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.sign-panel {
  position: sticky;
  top: 24px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 20px 18px;
}

.sign-panel section + section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
}

.sign-panel .voice {
  font-size: 15px;
  margin-bottom: 16px;
}

/* Field marks on the document are read-only here: values are typed in the
 * panel, where they reach a screen reader in a sensible order. */
.page-layer.is-readonly {
  cursor: default;
  pointer-events: none;
}

.field-box.is-mine {
  border: 1.5px solid var(--timbre);
  background: var(--timbre-wash);
}

.field-box.is-mine .field-label {
  background: var(--timbre);
}

.sign-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.tab {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: transparent;
  color: var(--graphite);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.tab.is-active {
  border-color: var(--timbre);
  background: var(--timbre-wash);
  color: var(--timbre-deep);
}

.sign-canvas-wrap {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--sheet);
  padding: 4px;
}

.sign-canvas {
  display: block;
  width: 100%;
  touch-action: none;
}

.sign-canvas-wrap .button-quiet {
  margin: 4px 0 6px 8px;
}

.firma-preview {
  min-height: 56px;
  margin: 12px 0 0;
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 30px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.button-danger {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: transparent;
  color: var(--alert);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.reject {
  margin-top: 28px;
}

.reject summary {
  color: var(--graphite);
  font-size: 14px;
  cursor: pointer;
}

.reject form {
  margin-top: 14px;
  max-width: 520px;
}

@media (max-width: 860px) {
  .sign-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * The panel returns to the flow, below the document. Leaving it sticky
   * pinned it to the bottom of the viewport, where it covered the document it
   * exists to annotate -- measured: the panel started 24px into the page.
   *
   * What stays within thumb reach is the primary action alone, which is what
   * DESIGN.md asks for.
   */
  .sign-panel {
    position: static;
  }

  .sign-action {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--sheet);
    border-top: 1px solid var(--rule);
  }

  /* Room for the bar, so it never covers the last thing on the page. */
  .shell-wide {
    padding-bottom: 96px;
  }
}

/* Public verification portal. */

.verify-code .code-wide {
  font-family: var(--font-evidence);
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.button-outline {
  display: inline-block;
  width: 100%;
  padding: 12px 20px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

/* The verdict leads. Green only when everything actually checks out. */
.verdict-sello {
  border-color: var(--seal);
  background: var(--seal-wash);
}

.verdict-alerta {
  border-color: var(--alert);
  background: var(--alert-wash);
}

.verdict .screen-title {
  margin-bottom: 4px;
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.checks li {
  padding: 7px 0 7px 22px;
  position: relative;
  border-bottom: 1px solid var(--rule-soft);
}

.checks li:last-child {
  border-bottom: 0;
}

/* The mark carries the state as much as the colour does. */
.checks li::before {
  position: absolute;
  left: 0;
  font-family: var(--font-evidence);
}

.checks .is-ok::before { content: '✓'; color: var(--seal); }
.checks .is-mal::before { content: '✕'; color: var(--alert); }
.checks .is-neutro::before { content: '·'; color: var(--faint); }

.checks .is-mal { color: var(--alert); }

/* Download rows and the copyable verification command. */

.descargas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

.descargas .button-compact,
.descargas .button-outline {
  width: auto;
  text-decoration: none;
}

.comando {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bond);
  overflow-x: auto;
}

.comando code {
  font-family: var(--font-evidence);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre;
  color: var(--ink);
}

/* Signature blocks: the preview draws what the stamper will draw. */

.bloque {
  position: absolute;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.bloque-firma {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* The rule is the block: everything else hangs off it. */
  border-bottom: 1.2px solid var(--ink);
  background: var(--timbre-wash);
  color: var(--faint);
  font-size: 9px;
  padding-bottom: 2px;
}

.bloque-nombre,
.bloque-extra {
  text-align: center;
  font-size: 9px;
  line-height: 1.25;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bloque-nombre {
  color: var(--ink);
}

.bloque-extra {
  color: var(--graphite);
}

.fields-panel .fijo {
  color: var(--graphite);
}

.fields-panel .fijo input {
  accent-color: var(--graphite);
}

/* Where the blocks start, and which page they are on. */

.guia {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1.5px dashed var(--timbre);
  pointer-events: none;
}

.guia::after {
  content: attr(data-etiqueta);
  position: absolute;
  right: 4px;
  top: -15px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--timbre);
  color: #fff;
  font-size: 9px;
  white-space: nowrap;
}

/* The page being worked on is the one that reads as active; the rest step back
 * so it is obvious where a click would land. */
.page-wrap.is-activa {
  border-color: var(--timbre);
  box-shadow: 0 0 0 2px var(--timbre-wash);
}

.fields-pages .page-wrap:not(.is-activa) .page-canvas {
  opacity: 0.55;
}

.mover {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
}

.mover .button-compact {
  flex: 1;
  width: auto;
}

/* What the signer sees on the document: the block as it will be stamped. */

.bloque-firmante {
  position: absolute;
  /* The rule is the block. Everything else hangs off it. */
  border-bottom: 1.4px solid var(--ink);
  background: var(--timbre-wash);
}

/* Signed: the tint goes, and the screen matches the paper. */
.bloque-firmante.tiene-firma {
  background: transparent;
}

.bloque-trazo {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.bloque-aviso {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--timbre-deep);
  font-size: 10px;
}

/* Sits just under the rule, centred, exactly where the stamper writes it. */
.bloque-pie,
.bloque-linea {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bloque-pie {
  top: 100%;
}

.bloque-linea {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--graphite);
}

/* ---------------------------------------------------------------------------
 * Account screen.
 */

.dato {
  font-size: 15px;
  margin: 0;
}

.dato strong {
  font-family: var(--font-evidence);
  font-size: 20px;
  font-weight: 500;
}

/* The way back in when the authenticator is gone. Folded away because reaching
   for it is the exception, and a recovery field competing with the code field
   invites people to spend a one-time code out of habit. */
.rescate {
  border-top: 1px solid var(--rule);
  margin-top: 24px;
  padding-top: 18px;
}

.rescate summary {
  color: var(--graphite);
  cursor: pointer;
  font-size: 14px;
}

.rescate summary:hover {
  color: var(--ink);
}

.rescate .field {
  margin-top: 14px;
}

/* The enrolment QR. Sized in ch so it tracks the reading width rather than a
   guessed pixel count, and capped so it never dominates the card. */
.qr-wrap {
  margin: 0 0 20px;
}

.qr {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
}

/* The secret in text, for anyone who cannot scan. */
.clave {
  font-family: var(--font-evidence);
  font-size: 15px;
  letter-spacing: 0.12em;
  overflow-wrap: anywhere;
  margin: 0 0 24px;
  padding: 11px 13px;
  background: var(--bond);
  border-radius: 6px;
}

/* Shown once, so it has to read as something to act on rather than confirm. */
.aviso-fuerte {
  border: 1px solid var(--timbre);
  border-radius: 6px;
  padding: 11px 13px;
  color: var(--timbre-deep);
  font-size: 14px;
  margin: 0 0 16px;
}

.codigos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--font-evidence);
  font-size: 15px;
}

@media (max-width: 480px) {
  .codigos {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
 * Review: the document before the decision.
 */

.revision {
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--sheet);
  padding: 14px;
}

.revision-pages .page-wrap {
  margin: 0 auto 14px;
}

.revision-pages .page-wrap:last-child {
  margin-bottom: 0;
}

.revision-acciones {
  margin-top: 22px;
}

.revision-acciones .button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Only while pages are still drawing. Removed by revisar.js either way, so a
   failed render does not leave the notice sitting there forever. */
.esta-cargando-aviso {
  display: none;
}

.esta-cargando .esta-cargando-aviso {
  display: block;
  margin-top: 0;
  margin-bottom: 10px;
}