/* Armado de escritos — lo propio de esta herramienta.
 *
 * La pieza central es la hoja, y la hoja está dibujada a escala: los márgenes
 * que el reglamento manda se ven como lo que son, una medida. El interior es
 * más ancho que el exterior porque el expediente se cose, y la línea de puntos
 * que encierra el texto es el límite real de la caja de escritura. Cuando el
 * ensayo rompe los márgenes, esa línea se corre y se pone en tinta de defecto:
 * el requisito no se lee en una lista, se ve en la hoja.
 *
 * Al lado, el panel tiene DOS autoridades y no una, porque son dos cosas
 * distintas. Lo que exige el fuero se paga con una providencia. Lo que exijo yo
 * no lo observa ningún juzgado: lo devuelvo yo. Separarlas es la mitad de lo
 * que esta demostración tiene para decir.
 *
 * Una aclaración sobre los romanos, porque esta misma página los usa. En el
 * margen —.folio-mark, en la sans del aparato, gris, afuera del texto— numeran
 * las partes de un instrumento, que es de estilo. Adentro del cuerpo, en la
 * serif del argumento y en el renglón —.hoja-romano—, enumeran los párrafos de
 * un escrito, y eso es la marca de la salida de máquina. Las dos formas están
 * deliberadamente en voces tipográficas distintas: una es aparato, la otra es
 * texto, y sólo la segunda está prohibida.
 */

/* ── el ensayo: el control que rompe algo a propósito ───────────────────── */
/* Va separado de los datos y con la tinta del estado intermedio, porque no es
   un dato del escrito: es una prueba de resistencia. */
.ensayo {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: 1.7rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--v-parcial);
  border-radius: 0 var(--pg-radius-sm) var(--pg-radius-sm) 0;
  background: var(--pg-surface);
}

/* ── el armado: hoja y panel, uno al lado del otro ──────────────────────── */
.armado {
  display: grid;
  gap: 1.6rem;
  margin-top: 1.9rem;
}
@media (min-width: 64em) {
  .armado {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
  /* El panel acompaña: se escribe arriba y la medición no se va de la vista. */
  .armado-panel {
    position: sticky;
    top: 4.3rem;
    align-self: start;
  }
}

/* ── la hoja ────────────────────────────────────────────────────────────── */
/* --mm es un milímetro de la hoja llevado a la pantalla: proporcional al ancho,
   con tope para que en un monitor grande la hoja no se vuelva un cartel. Los
   cuatro márgenes son números sin unidad y los pone el guion, así el ensayo
   los corre sin tocar una sola regla de estilo. */
.hoja {
  --mm: min(.42%, 2.4px);
  --m-sup: 50;
  --m-inf: 25;
  --m-int: 40;
  --m-ext: 25;
  position: relative;
  /* El papel lleva los márgenes; la caja de escritura es lo que queda adentro.
     Así la línea de puntos cae exactamente sobre el límite del texto, que es
     lo que la regla mide, y no sobre el borde de la hoja. */
  padding: calc(var(--mm) * var(--m-sup)) calc(var(--mm) * var(--m-ext))
           calc(var(--mm) * var(--m-inf)) calc(var(--mm) * var(--m-int));
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--pg-surface);
}

.hoja-caja {
  border: 1px dashed var(--hairline);
  /* En pantalla angosta la hoja conserva sus proporciones y achica el cuerpo:
     una hoja de escrito es un objeto medido, y deformar sus márgenes para
     ganar renglón sería justamente lo que la demostración dice que no se hace. */
  font-size: clamp(.84rem, .62rem + .9vw, .96rem);
  line-height: 1.85;
  text-align: justify;
  hyphens: auto;
}
.hoja-fuera .hoja-caja { border-color: var(--v-no); border-style: dashed; }
.hoja-libre .hoja-caja { text-align: left; hyphens: none; }

/* La suma: la primera línea, la que dice qué se pide. Va donde va en una hoja
   presentada —arriba, a la derecha, subrayada— y en versalitas. */
.hoja-suma {
  margin: 0 0 1.6rem;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.5;
  text-align: right;
  text-decoration: underline;
  text-underline-offset: .3em;
  text-transform: uppercase;
}
.hoja-negrita .hoja-suma { font-weight: 800; letter-spacing: .04em; }

/* El filete: la línea divisoria que no va. Sólo aparece cuando el ensayo la
   pide, y se marca como lo que es. */
.hoja-filete {
  height: 0;
  margin: -.9rem 0 1.5rem;
  border-top: 2px solid var(--v-no);
}

.hoja-trato {
  margin: 0 0 1.2rem;
  font-weight: 600;
  text-align: left;
}

.hoja-parrafo { margin: 0; text-indent: 1.9rem; }
.hoja-parrafo + .hoja-parrafo { margin-top: .2rem; }

.hoja-parte { margin-top: 1.4rem; }
.hoja-parte-nombre {
  margin: 0 0 .2rem;
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
}

/* La enumeración romana adentro del cuerpo: en la voz del texto, no del
   aparato, y marcada con el trazo ondulado que en este sitio quiere decir
   «esto no va». */
.hoja-romano {
  font-family: inherit;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--v-no);
  text-underline-offset: .22em;
}

/* Un dato que falta se ve faltar: la hoja no lo esconde. */
.hoja-falta {
  padding: 0 .35rem;
  border-bottom: 1px dotted var(--v-no);
  color: var(--pg-muted);
  font-family: var(--font-mono);
  font-size: .85em;
}

.hoja-cierre { margin: 1.5rem 0 0; text-align: left; }

.hoja-firma {
  margin: 2.4rem 0 0;
  padding-top: .6rem;
  text-align: right;
}
.hoja-firma-nombre {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hoja-firma-linea {
  margin: .15rem 0 0;
  font-family: var(--font-sans);
  font-size: .76rem;
  line-height: 1.5;
  color: var(--pg-muted);
}
.hoja-firma-falta { color: var(--v-no); }

/* La foliatura vive en el margen inferior, que es donde el reglamento la pone. */
.hoja-folio {
  position: absolute;
  right: 0;
  bottom: calc(var(--mm) * 6);
  left: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--pg-muted);
  text-align: center;
}

.hoja-medidas {
  margin: .7rem 0 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  line-height: 1.6;
  color: var(--pg-muted);
  text-wrap: pretty;
}
.hoja-medidas .fuera { color: var(--v-no); }

/* ── el panel de cumplimiento ───────────────────────────────────────────── */
.panel-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .8rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
}
.panel-cuenta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.panel-frase {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}

.autoridad { padding-top: 1.15rem; }
.autoridad-titulo {
  margin: 0 0 .2rem;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pg-muted);
}
.autoridad-nota {
  margin: 0 0 .55rem;
  font-family: var(--font-sans);
  font-size: .76rem;
  line-height: 1.45;
  color: var(--pg-muted);
  text-wrap: pretty;
}

.requisito {
  display: grid;
  grid-template-columns: 6.7rem minmax(0, 1fr);
  gap: .15rem .6rem;
  padding-block: .6rem;
  border-top: 1px solid var(--hairline);
}
.requisito-nombre {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}
.requisito-detalle {
  grid-column: 2;
  margin: .15rem 0 0;
  font-family: var(--font-sans);
  font-size: .76rem;
  line-height: 1.45;
  color: var(--pg-muted);
  text-wrap: pretty;
}
.requisito-no .requisito-nombre { color: var(--v-no); }

/* ── la providencia que vuelve ──────────────────────────────────────────── */
.providencia {
  margin: 1.5rem 0 0;
  padding: 1.05rem 1.15rem 1.15rem;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--v-no);
  border-radius: 0 var(--pg-radius-sm) var(--pg-radius-sm) 0;
  background: color-mix(in srgb, var(--pg-surface) 60%, var(--pg-bg));
}
.providencia-casa { border-left-color: var(--v-parcial); }

.providencia-rotulo {
  margin: 0 0 .5rem;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pg-muted);
}
.providencia-texto {
  max-width: var(--measure);
  margin: 0;
  font-size: .98rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.providencia-texto + .providencia-texto { margin-top: .7rem; }

/* ── el reglamento ──────────────────────────────────────────────────────── */
.reglamento { margin: 0; }
.regla-item { padding-block: .8rem; }
.regla-item + .regla-item { border-top: 1px solid var(--hairline); }
@media (min-width: 46em) {
  .regla-item {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: .2rem 1.4rem;
    align-items: baseline;
  }
}
.regla-nombre {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 650;
  line-height: 1.4;
  text-wrap: pretty;
}
.regla-art {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 400;
  color: var(--pg-muted);
}
.regla-texto {
  max-width: var(--measure);
  margin: .3rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--pg-muted);
  text-wrap: pretty;
}
@media (min-width: 46em) {
  .regla-texto { margin-top: 0; }
}
.regla-texto strong { color: var(--pg-text); font-weight: 650; }

/* ── el dibujo de los márgenes ──────────────────────────────────────────── */
.medidas-figura {
  margin: 1.7rem 0 0;
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 1px solid var(--hairline);
  border-radius: var(--pg-radius-sm);
  background: var(--pg-surface);
}
.medidas-titulo {
  margin: 0 0 1rem;
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pg-muted);
}
.medidas-dibujo { display: block; width: 100%; min-width: 21rem; max-width: 32rem; height: auto; }
.medidas-dibujo text { text-anchor: middle; fill: var(--pg-muted); }
/* La cota va en la mono, como todo valor computado en este sitio. */
.medidas-dibujo .cota { font-family: var(--font-mono); font-size: 9px; font-weight: 700; }
.medidas-dibujo .folio { font-family: var(--font-mono); font-size: 7px; }
.medidas-dibujo .rotulo { font-family: var(--font-sans); font-size: 9px; }
.medidas-nota {
  max-width: var(--measure);
  margin: 1rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--pg-muted);
  text-wrap: pretty;
}
.medidas-lista {
  display: grid;
  gap: .1rem 1.5rem;
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 34em) {
  .medidas-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.medida { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
@media (min-width: 34em) {
  .medida { display: block; }
}
.medida dt {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pg-muted);
}
.medida dd { margin: 0; font-size: 1.05rem; font-weight: 600; }