/* ── demostraciones — el cromo que comparten las seis ─────────────────────
 *
 * Una demostración no es una página más del perfil: es un instrumento. Así que
 * hereda todo el sistema del sitio (theme.css para los tokens, site.css para el
 * riel foliado, la tipografía y los botones) y sólo agrega lo que un
 * instrumento necesita y una página de texto no.
 *
 * Tres cosas se agregan, y ninguna es decorativa:
 *
 * 1. Una tercera voz tipográfica. En el perfil hay dos: serif para el
 *    argumento, sans para el aparato. Acá aparece la mono, y sólo para los
 *    valores computados — fechas, plazos, expedientes. Lo que la máquina
 *    calculó se distingue de lo que está escrito, a simple vista.
 *
 * 2. Numeración romana en el riel. El perfil folia hojas: f. 1, f. 2. Una
 *    demostración no tiene hojas, tiene partes, y un escrito judicial numera
 *    sus partes con romanos — I. OBJETO, II. HECHOS, III. DERECHO. El riel de
 *    la demostración usa esa misma numeración porque acá el orden sí es un
 *    procedimiento: primero los datos, después el cómputo, después el
 *    resultado.
 *
 * 3. Tres marcas de estado, y ninguna se lee sólo por el color. Cada estado
 *    lleva su palabra y su textura además de su tinta, porque el par ámbar/rojo
 *    no se separa lo suficiente para una persona con deuteranopia. En claro el
 *    estado intermedio toma --pg-ember y en oscuro --pg-warn: son los dos
 *    valores del propio skin que sí pasan la separación en cada fondo.
 *
 * El acento sigue gastándose en una sola cosa, como en el perfil: acá, el
 * resultado operativo. Nada más lo usa.
 */

:root {
  --font-mono: var(--pg-font-mono);

  /* Los tres estados, como roles. No hay ningún hex nuevo. */
  --v-ok: var(--pg-ok);
  --v-parcial: var(--pg-ember);
  --v-no: var(--pg-danger);

  /* La textura: una trama a 45° hecha con el propio hairline, para que un
     estado se distinga sin depender de la tinta. */
  --trama: repeating-linear-gradient(
    45deg,
    var(--hairline) 0 1px,
    transparent 1px 5px
  );
}

@media (prefers-color-scheme: dark) {
  :root { --v-parcial: var(--pg-warn); }
}

/* ── cabecera de la demostración ────────────────────────────────────────── */
/* El enlace de vuelta es lo único que se agrega al encabezado del sitio: la
   demostración se abre desde el perfil y se vuelve al perfil. */
.volver {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .1rem;
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 550;
  color: var(--pg-muted);
  text-decoration: none;
}
.volver::before { content: "←"; font-size: 1em; }
.volver:hover,
.volver:focus-visible { color: var(--pg-text); }

/* ── portada de la demostración ─────────────────────────────────────────── */
.masthead {
  padding-block: clamp(2.25rem, 7vw, 4rem) clamp(1.5rem, 4vw, 2.25rem);
}

.masthead-titulo {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.022em;
  text-wrap: balance;
}

/* El aviso viaja pegado al título, no escondido al pie: quien abre la
   herramienta tiene que saber en el primer golpe de vista que nada de lo que
   va a ver es real. */
.ficticio {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 1rem 0 0;
  padding: .3rem .6rem .3rem .5rem;
  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);
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--pg-text);
}

.demuestra {
  max-width: var(--measure);
  margin: 1.75rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}
.demuestra-rotulo {
  margin: 0 0 .55rem;
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 650;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--pg-muted);
}
.demuestra p {
  margin: 0;
  font-size: var(--t-lede);
  line-height: 1.6;
  text-wrap: pretty;
}
.demuestra p + p { margin-top: .8rem; }

/* ── el riel, con el paso más apretado que en el perfil ─────────────────── */
.demo-cuerpo { --folio-pad: clamp(1.9rem, 4.5vw, 2.9rem); }

.acto .folio-mark {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.acto-titulo {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.acto-lede {
  max-width: var(--measure);
  margin: .7rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--pg-muted);
  text-wrap: pretty;
}

/* ── controles ──────────────────────────────────────────────────────────── */
.campos {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.75rem;
}
@media (min-width: 40em) {
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.5rem; }
  .campo-ancho { grid-column: 1 / -1; }
}

.campo { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }

.campo-etiqueta {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pg-muted);
}

.control {
  width: 100%;
  min-height: 44px;
  padding: .6rem .75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--pg-radius-sm);
  background: var(--pg-surface);
  color: var(--pg-text);
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.3;
}
.control:hover { border-color: color-mix(in srgb, var(--pg-text) 30%, var(--hairline)); }
select.control {
  /* La flecha nativa se conserva: es la que el sistema del visitante ya sabe
     tocar, y no hace falta ninguna imagen para dibujarla de nuevo. */
  cursor: pointer;
}
input[type="date"].control { font-family: var(--font-mono); font-size: .92rem; }

.campo-nota {
  font-family: var(--font-sans);
  font-size: .78rem;
  line-height: 1.45;
  color: var(--pg-muted);
  text-wrap: pretty;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-top: 1.6rem;
}
.acciones .btn { min-height: 44px; }

/* Un aviso de dato mal cargado: dice qué pasó y qué corregir, sin disculparse. */
.aviso-error {
  margin: 1.1rem 0 0;
  padding: .75rem .9rem;
  border: 1px solid color-mix(in srgb, var(--v-no) 45%, var(--hairline));
  border-left: 3px solid var(--v-no);
  border-radius: 0 var(--pg-radius-sm) var(--pg-radius-sm) 0;
  background: var(--pg-surface);
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--pg-text);
}
.aviso-error[hidden] { display: none; }

/* ── paneles ────────────────────────────────────────────────────────────── */
.panel {
  margin-top: 1.6rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 1px solid var(--hairline);
  border-radius: var(--pg-radius-sm);
  background: var(--pg-surface);
}
.panel-titulo {
  margin: 0 0 .9rem;
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pg-muted);
}

/* La nota al pie de un panel: la aclaración que el panel necesita para no
   mentir, separada de su contenido por su propia línea. */
.panel-nota {
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--pg-muted);
  text-wrap: pretty;
}

/* El valor computado: mono, para que se lea distinto de lo que está escrito. */
.dato {
  font-family: var(--font-mono);
  font-size: .92em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ── el veredicto: lo único que gasta el acento ─────────────────────────── */
.veredicto {
  margin-top: 1.75rem;
  padding: clamp(1.25rem, 3.5vw, 1.9rem);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--pg-accent);
  border-radius: 0 var(--pg-radius-sm) var(--pg-radius-sm) 0;
  background: var(--pg-surface);
}
.veredicto-rotulo {
  margin: 0 0 .6rem;
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pg-muted);
}
.veredicto-valor {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.15rem + 1.9vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.veredicto-nota {
  max-width: var(--measure);
  margin: .9rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--pg-muted);
  text-wrap: pretty;
}
.veredicto-nota strong { color: var(--pg-text); font-weight: 650; }

/* ── referencias de las marcas ──────────────────────────────────────────── */
.marcas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: .78rem;
  color: var(--pg-muted);
}
.marca { display: flex; align-items: center; gap: .45rem; }
.marca-muestra {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  border: 1px solid var(--hairline);
  border-radius: 2px;
}

/* ── estados, con palabra y textura además de tinta ─────────────────────── */
.estado {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pg-text);
  white-space: nowrap;
}
.estado::before {
  content: "";
  width: .68rem;
  height: .68rem;
  flex: none;
  border-radius: 2px;
}
.estado-ok::before { background: var(--v-ok); }
.estado-parcial::before {
  background: var(--v-parcial);
  /* La trama distingue el estado intermedio aunque no se vea el color. */
  background-image: repeating-linear-gradient(
    45deg, rgba(0, 0, 0, .38) 0 2px, transparent 2px 4px);
}
.estado-no::before {
  background: transparent;
  border: 2px solid var(--v-no);
}

/* ── colofón: la misma nota al pie de las seis ──────────────────────────── */
.colofon-seccion { padding-block: clamp(2.5rem, 7vw, 4rem) clamp(3rem, 8vw, 4.5rem); }

.colofon {
  max-width: var(--measure);
  padding: clamp(1.25rem, 3.5vw, 1.75rem);
  border: 1px solid var(--hairline);
  border-radius: var(--pg-radius-sm);
  background: color-mix(in srgb, var(--pg-surface) 55%, var(--pg-bg));
}
.colofon-titulo {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
}
.colofon p {
  margin: .7rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--pg-muted);
  text-wrap: pretty;
}
.colofon p strong { color: var(--pg-text); font-weight: 650; }

.colofon-otras {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin: 1.1rem 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-size: var(--t-small);
}
.colofon-otras a { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
.colofon-otras a:hover { text-decoration: underline; }

/* ── contenedor de desplazamiento ───────────────────────────────────────── */
/* Lo ancho se desplaza dentro de su propia caja: la página nunca se corre. */
.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}