/* ============================================================================
   Estudio de marca · interfaz de la herramienta

   A propósito NO usa el sistema visual del kit: la herramienta tiene que
   distinguirse de lo que se está diseñando dentro. Si el panel se pareciese a
   la previsualización, no se sabría qué se está mirando.
   ============================================================================ */

:root {
  --ui-bg: #0e1013;
  --ui-panel: #16191d;
  --ui-panel-2: #1c2026;
  --ui-line: #282d34;
  --ui-text: #e7eaee;
  --ui-soft: #8b939e;
  --ui-accent: #7dd3fc;
  --ui-warn: #fbbf24;
  --ui-r: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-text);
  font: 400 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Barra superior ──────────────────────────────────────────────────────── */
.ui-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-panel);
  flex: none;
}
.ui-brand { display: flex; align-items: center; gap: 0.7rem; }
.ui-brand div { display: flex; flex-direction: column; line-height: 1.25; }
.ui-brand strong { font-size: 14px; }
.ui-brand span { font-size: 11.5px; color: var(--ui-soft); }
.ui-dot {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: linear-gradient(140deg, var(--ui-accent), #a78bfa);
}
.ui-top-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.ui-btn {
  font: inherit; font-weight: 600; font-size: 13px;
  padding: 0.5rem 0.9rem; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.ui-btn-ghost { background: transparent; border-color: var(--ui-line); color: var(--ui-text); }
.ui-btn-ghost:hover { background: var(--ui-panel-2); }
.ui-btn-primary { background: var(--ui-accent); color: #06202e; }
.ui-btn-primary:hover { filter: brightness(1.08); }

/* ── Disposición ─────────────────────────────────────────────────────────── */
.ui-shell {
  display: grid;
  grid-template-columns: 340px 1fr;
  flex: 1;
  min-height: 0;
}
/* ── Pantalla estrecha ───────────────────────────────────────────────────────
   Antes esto partía la pantalla en 45%/55% con el `body` a `100dvh` y
   `overflow:hidden`. En un móvil eso deja el panel en ~300 px y la muestra en
   otros ~350: no cabe nada en ninguno de los dos y no se puede salir de ahí.

   Ahora la página entera hace scroll —que es lo natural en un móvil— y la
   muestra va ARRIBA y PEGADA: se toca una opción del panel y se ve el efecto
   sin tener que volver a subir. Es el único sitio donde `sticky` se gana el
   puesto: aquí la previsualización es la razón de estar en la página. */
@media (width < 60rem) {
  /* Se conserva el modelo de dos paneles con scroll propio —es el que funciona
     y el que no depende de que la página entera crezca— pero cambiando dos
     cosas que lo hacían inservible en un móvil:

     1. La MUESTRA VA PRIMERO y se lleva la mayor parte de la altura. Antes se
        quedaba abajo con el 55% de la pantalla, debajo de un panel que ya
        ocupaba el 45%: se tocaba una opción y el efecto quedaba fuera de vista.
     2. El panel se queda con el resto y sigue siendo su propio contenedor de
        scroll, así que la muestra no se mueve mientras se recorren las
        opciones. */
  .ui-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 60dvh 1fr;
  }
  .ui-preview { order: -1; border-bottom: 1px solid var(--ui-line); }
  .ui-panel { border-right: 0; }

  /* La nota de la barra no cabe y empuja fuera a los tres tamaños. */
  .ui-preview-nota { display: none; }
  /* Sin el padding, la muestra gana 30 px de alto, que en un móvil se notan. */
  .ui-preview-stage { padding: 0.4rem; }

  /* ── Ver entero ───────────────────────────────────────────────────────────
     Repartir la pantalla de un móvil entre el panel y la muestra deja los dos
     inservibles: se puede navegar pero no se ve el conjunto, que es para lo
     que existe la previsualización. Así que en móvil no se reparte — se elige.
     Se toca «Ver entero» y la muestra ocupa todo; se vuelve y están los
     ajustes. Es la misma idea de una app de diseño en el teléfono. */
  #pantalla { display: inline-flex; font-size: 12px; padding: 0.35rem 0.6rem; }

  body.ui-solo-muestra .ui-panel { display: none; }
  body.ui-solo-muestra .ui-shell { grid-template-rows: 1fr; }
  body.ui-solo-muestra .ui-top { display: none; }
  body.ui-solo-muestra .ui-preview-stage { padding: 0; }
  body.ui-solo-muestra #lienzo { border-radius: 0; box-shadow: none; }
}

/* En escritorio el botón sobra: ahí ya se ve todo. */
#pantalla { display: none; }

/* Pantalla muy estrecha: la barra de acciones de arriba no cabe en una línea. */
@media (width < 34rem) {
  .ui-top { flex-wrap: wrap; }
  .ui-top-actions { width: 100%; }
  .ui-top-actions .ui-btn { flex: 1; }
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.ui-panel {
  border-right: 1px solid var(--ui-line);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ui-panel);
}
.ui-group { padding: 1rem; border-bottom: 1px solid var(--ui-line); }
.ui-group h2 {
  margin: 0 0 0.75rem;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ui-text);
}
.ui-group h2 em, .ui-field span em {
  font-style: normal; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ui-soft);
}

.ui-field { display: block; margin-bottom: 0.8rem; }
.ui-field:last-child { margin-bottom: 0; }
.ui-field > span {
  display: block; margin-bottom: 0.4rem;
  font-size: 12px; font-weight: 600; color: var(--ui-soft);
}
.ui-field input[type=text], .ui-field textarea {
  width: 100%; font: inherit; font-size: 13px;
  padding: 0.5rem 0.65rem; border-radius: 8px;
  border: 1px solid var(--ui-line); background: var(--ui-bg); color: var(--ui-text);
  resize: vertical;
}
.ui-field input:focus-visible, .ui-field textarea:focus-visible,
.ui-chips button:focus-visible, .ui-btn:focus-visible {
  outline: 2px solid var(--ui-accent); outline-offset: 1px;
}
.ui-inline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ui-inline > span { margin: 0; }
.ui-row { display: flex; gap: 0.75rem; }
.ui-color { flex: 1; }
.ui-color span { display: block; margin-bottom: 0.4rem; font-size: 12px; font-weight: 600; color: var(--ui-soft); }
.ui-color input[type=color] {
  width: 100%; height: 34px; padding: 0; border: 1px solid var(--ui-line);
  border-radius: 8px; background: none; cursor: pointer;
}

/* Fichas de selección */
.ui-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ui-chips button {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 0.38rem 0.6rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--ui-line); background: var(--ui-panel-2); color: var(--ui-soft);
  transition: border-color .15s, color .15s, background .15s;
}
.ui-chips button:hover { color: var(--ui-text); border-color: #3a424c; }
.ui-chips button.on { background: var(--ui-accent); border-color: var(--ui-accent); color: #06202e; }
.ui-chips-sm button { font-size: 11.5px; padding: 0.3rem 0.5rem; }

/* Ejes */
.ui-eje { display: grid; grid-template-columns: 5.5rem 1fr 1.4rem; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.ui-eje label { font-size: 12px; font-weight: 600; color: var(--ui-soft); }
.ui-eje input { width: 100%; accent-color: var(--ui-accent); }
.ui-eje output { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ui-text); }

.ui-hint { margin: 0.6rem 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ui-soft); }
.ui-hint code { background: var(--ui-panel-2); padding: 0.1em 0.35em; border-radius: 4px; font-size: 11px; }

/* Subida del logo. El <input type=file> nativo es feo y no se puede estilar;
   se oculta y la etiqueta hace de botón, que es accesible igual. */
.ui-logo { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ui-logo .ui-btn { font-size: 12px; padding: 0.4rem 0.7rem; cursor: pointer; }
#logo-diag .ui-aviso { font-size: 11.5px; }

/* Descargas del diálogo. Un botón por fichero, con su nombre a la vista: si
   hay que adivinar cómo se llama lo que baja, acaba sin usarse. */
.ui-bajar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-right: auto; }
.ui-bajar > span { font-size: 11.5px; color: var(--ui-soft); }
.ui-bajar .ui-btn { font-size: 12px; padding: 0.4rem 0.6rem; }

/* ── El compositor de secciones ──────────────────────────────────────────────
   Una fila por sección. Se reordena con botones, no arrastrando: en una lista
   de doce dentro de un panel que ya hace scroll, arrastrar es peor de usar. */
#secciones { display: grid; gap: 0.5rem; }

.ui-sec {
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--ui-panel-2);
  padding: 0.55rem 0.6rem;
}
.ui-sec-top { display: flex; align-items: flex-start; gap: 0.5rem; }
.ui-sec-n { font-size: 11px; font-weight: 700; color: var(--ui-soft); padding-top: 0.15rem; }
.ui-sec-n2 { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ui-sec-n2 b { font-size: 12.5px; }
.ui-sec-n2 em {
  font-style: normal; font-size: 11px; color: var(--ui-soft);
  /* Dos líneas y corta: el «qué dice» orienta, no es un párrafo. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ui-sec-acc { display: flex; gap: 0.15rem; flex: none; }
.ui-sec-acc button {
  font: inherit; font-size: 12px; line-height: 1;
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--ui-soft);
}
.ui-sec-acc button:hover:not(:disabled) { background: var(--ui-line); color: var(--ui-text); }
.ui-sec-acc button:disabled { opacity: 0.28; cursor: default; }
.ui-sec-acc button[data-a="quita"]:hover { background: color-mix(in srgb, #f87171 25%, transparent); color: #fecaca; }

.ui-sec-vars, .ui-sec-tono { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ui-sec-vars { margin-top: 0.5rem; }
.ui-sec-vars button, .ui-sec-tono button {
  font: inherit; font-size: 11px; font-weight: 600;
  padding: 0.22rem 0.45rem; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--ui-line); background: var(--ui-bg); color: var(--ui-soft);
}
.ui-sec-vars button:hover, .ui-sec-tono button:hover { color: var(--ui-text); }
.ui-sec-vars button.on, .ui-sec-tono button.on {
  background: var(--ui-accent); border-color: var(--ui-accent); color: #06202e;
}

.ui-sec-pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid var(--ui-line);
}
.ui-sec-capas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.ui-sec-capas label {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 11px; color: var(--ui-soft); cursor: pointer;
}
.ui-sec-capas input { accent-color: var(--ui-accent); margin: 0; }

.ui-sec-add { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.ui-sec-add button {
  font: inherit; font-size: 11px; font-weight: 600;
  padding: 0.3rem 0.5rem; border-radius: 6px; cursor: pointer;
  border: 1px dashed var(--ui-line); background: transparent; color: var(--ui-soft);
}
.ui-sec-add button:hover { border-style: solid; border-color: var(--ui-accent); color: var(--ui-text); }

/* Avisos de coherencia */
.ui-avisos { padding: 1rem; display: grid; gap: 0.5rem; }
.ui-aviso {
  display: flex; gap: 0.5rem; align-items: flex-start;
  font-size: 12px; line-height: 1.45;
  padding: 0.6rem 0.7rem; border-radius: 8px;
  background: color-mix(in srgb, var(--ui-warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-warn) 30%, transparent);
  color: #fde9b8;
}
.ui-aviso b { color: var(--ui-warn); }
.ui-aviso.ok {
  background: color-mix(in srgb, #4ade80 10%, transparent);
  border-color: color-mix(in srgb, #4ade80 28%, transparent);
  color: #c6f6d5;
}
.ui-aviso.ok b { color: #4ade80; }
/* Grave = el suelo incumplido (contraste medido). No es una opinión de estilo:
   se distingue en color para que no se confunda con los avisos de criterio. */
.ui-aviso.grave {
  background: color-mix(in srgb, #f87171 12%, transparent);
  border-color: color-mix(in srgb, #f87171 34%, transparent);
  color: #fecaca;
}
.ui-aviso.grave b { color: #f87171; }
/* Qué NO mide la comprobación. Va siempre, cumpla o no. */
.ui-nota {
  font-size: 11px; line-height: 1.5; margin: 0.15rem 0 0;
  color: var(--ui-soft);
}


/* ── Selectores VISUALES ─────────────────────────────────────────────────────
   Antes eran fichas de texto, y elegir un fondo leyendo su nombre no es elegir:
   es adivinar. Cada opción enseña ahora lo que hace, con el CSS real del kit
   donde existe y una aproximación honesta donde el efecto es de JavaScript. */

.ui-ops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 0.4rem;
}
.ui-ops-2 { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.ui-ops-3 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.ui-op {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left;
}
.ui-op-vis {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 7px;
  overflow: hidden;
  background: var(--color-paper, #f2f3f5);
  border: 1px solid var(--ui-line);
  transition: border-color .15s, box-shadow .15s, transform .15s;
  isolation: isolate;
}
.ui-op:hover .ui-op-vis { border-color: #4b5560; transform: translateY(-1px); }
.ui-op.on .ui-op-vis {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 45%, transparent);
}
.ui-op-lbl {
  font-size: 11px; font-weight: 600; line-height: 1.25;
  color: var(--ui-soft);
  display: flex; align-items: center; gap: 0.25rem;
}
.ui-op.on .ui-op-lbl { color: var(--ui-text); }
.ui-op-js {
  font-size: 8.5px; font-weight: 700; letter-spacing: .04em;
  padding: 0.05rem 0.25rem; border-radius: 3px;
  background: color-mix(in srgb, var(--ui-accent) 22%, transparent);
  color: var(--ui-accent);
}

/* Lo que va dentro de la miniatura: el efecto a escala. */
.ui-op-vis > * { position: absolute; inset: 0; }
.ui-op-vis .m-nada {
  display: grid; place-items: center;
  color: var(--ui-soft); font-size: 9px; font-weight: 700; letter-spacing: .1em;
}
/* Bocetos de estructura (cabecera, pie, botón, titular, módulo) */
.m-bar { position: absolute; background: var(--color-ink, #16181c); border-radius: 2px; opacity: .85; }
.m-pill { position: absolute; background: var(--color-brand, #fe0); border-radius: 99px; }
.m-line { position: absolute; background: var(--color-ink, #16181c); border-radius: 99px; opacity: .3; }
.m-box { position: absolute; background: var(--color-ink, #16181c); opacity: .12; border-radius: 3px; }
.m-img { position: absolute; background: var(--color-metal, #788088); opacity: .55; border-radius: 3px; }
.m-txt { position: absolute; font-weight: 800; color: var(--color-ink, #16181c); line-height: 1; }

/* Ejes: etiqueta con el extremo, para no tener que adivinar qué es «peso 5» */
.ui-eje-tip { font-size: 10px; color: var(--ui-soft); grid-column: 2 / -1; margin-top: -0.25rem; }

/* ── Previsualización ────────────────────────────────────────────────────── */
.ui-preview { display: flex; flex-direction: column; min-width: 0; background: #0a0c0e; }
.ui-preview-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--ui-line); flex: none;
}
.ui-tabs { display: flex; gap: 0.25rem; }
.ui-tabs button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 0.35rem 0.7rem; border-radius: 7px;
  border: 1px solid transparent; background: transparent; color: var(--ui-soft);
}
.ui-tabs button.on { background: var(--ui-panel-2); border-color: var(--ui-line); color: var(--ui-text); }
.ui-preview-nota { font-size: 11.5px; color: var(--ui-soft); }

.ui-preview-stage { flex: 1; min-height: 0; display: grid; place-items: start center; overflow: auto; padding: 0.9rem; }
#lienzo {
  width: 100%; height: 100%; border: 0; border-radius: var(--ui-r);
  background: #fff; box-shadow: 0 18px 50px -20px rgb(0 0 0 / 70%);
  transition: width .25s ease;
}

/* ── Diálogo del encargo ─────────────────────────────────────────────────── */
.ui-dialog { padding: 0; border: 0; background: none; max-width: none; max-height: none; width: 100%; height: 100%; }
.ui-dialog::backdrop { background: rgb(4 6 8 / 72%); backdrop-filter: blur(3px); }
.ui-dialog-dismiss { position: fixed; inset: 0; }
.ui-dialog-dismiss button { width: 100%; height: 100%; background: none; border: 0; cursor: default; }
.ui-dialog-panel {
  position: relative; margin: auto; display: flex; flex-direction: column;
  width: min(100% - 2rem, 62rem); height: min(88dvh, 52rem);
  background: var(--ui-panel); border: 1px solid var(--ui-line);
  border-radius: 14px; overflow: hidden;
}
.ui-dialog-panel header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--ui-line);
}
/* El color explícito: el CSS del kit pinta los h2 con --color-ink, que el
   Estudio escribe en :root con la tinta del CLIENTE. Sin esto, el título del
   encargo salía casi negro sobre el panel oscuro (medido: rgb(26 23 19)). */
.ui-dialog-panel { color: var(--ui-text); }
/* Y la letra: el mismo CSS da a los h2 --font-display, que es la display del
   cliente. La herramienta no se viste con lo que diseña (ver la cabecera). */
.ui-panel h2, .ui-dialog-panel h2 { font-family: inherit; line-height: 1.3; }
.ui-asis-cab h2, .ui-dialog-panel h2 { letter-spacing: normal; font-weight: 700; }
.ui-dialog-panel h2 { margin: 0.1rem 0 0; font-size: 17px; color: var(--ui-text); }
.ui-eyebrow { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-soft); }
.ui-dialog-tabs { display: flex; gap: 0.25rem; }
.ui-dialog-tabs button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 0.35rem 0.7rem; border-radius: 7px;
  border: 1px solid var(--ui-line); background: transparent; color: var(--ui-soft);
}
.ui-dialog-tabs button.on { background: var(--ui-accent); border-color: var(--ui-accent); color: #06202e; }
#salida {
  flex: 1; width: 100%; border: 0; resize: none;
  padding: 1.1rem; background: var(--ui-bg); color: #cdd4dc;
  font: 400 12.5px/1.65 ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
}
.ui-dialog-panel footer {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.1rem; border-top: 1px solid var(--ui-line);
}
.ui-copiado { margin: 0 auto 0 0; font-size: 12px; color: #4ade80; }

/* ── Nota sobre el CSS del kit ───────────────────────────────────────────────
   El estudio carga `_astro/kit-completo.css`, compilado aparte con TODAS las
   utilidades forzadas (ver opspilot-kit/build/completo.css). Aquí no se
   redefine ninguna: duplicarlas era deuda, porque al tocar el kit quedaban
   desincronizadas sin avisar. */

/* Rejilla de colocación: nueve casillas, como los tercios de un cartel. */
.ui-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 92px;
  aspect-ratio: 3 / 2;
}
.ui-rejilla button {
  border: 1px solid var(--ui-line);
  background: var(--ui-panel-2);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: background .15s, border-color .15s;
}
.ui-rejilla button:hover { border-color: #4b5560; }
.ui-rejilla button.on { background: var(--ui-accent); border-color: var(--ui-accent); }

/* ── El asistente (F2, 23-sep) ────────────────────────────────────────────────
   Ocho pasos en vez de treinta decisiones a la vista. Mismo estado que el
   panel: pasar de uno a otro no pierde nada. El body lleva la clase del modo. */

/* `hidden` tiene que ganar a los display de las clases (.ui-field es block,
   .ui-inicio-op es flex): sin esto, un elemento oculto seguía viéndose. */
[hidden] { display: none !important; }

body:not(.ui-modo-asistente) #asistente { display: none; }
body.ui-modo-asistente #panel { display: none; }
body.ui-modo-asistente .ui-shell { grid-template-columns: minmax(360px, 460px) 1fr; }
/* En el móvil, con la muestra al 60 % el asistente se quedaba con 40 px de
   cuerpo (medido a 375×812): inservible. En este modo lo que se está haciendo
   es decidir, así que la muestra baja al 38 % y los pasos van solo con número. */
@media (width < 60rem) {
  body.ui-modo-asistente .ui-shell { grid-template-columns: 1fr; grid-template-rows: 38dvh 1fr; }
  .ui-asis-pasos { padding: 0.4rem 0.5rem; }
  .ui-asis-pasos button em { display: none; }
  .ui-asis-pie { padding: 0.55rem 0.8rem; }
}

.ui-asis { display: flex; flex-direction: column; overflow: hidden; }

.ui-asis-pasos {
  list-style: none; margin: 0; padding: 0.55rem 0.6rem; flex: none;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.2rem;
  border-bottom: 1px solid var(--ui-line);
}
.ui-asis-pasos button {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.25rem 0; border: 0; border-radius: 6px; background: none;
  font: inherit; color: var(--ui-soft); cursor: pointer;
}
.ui-asis-pasos button:hover { background: var(--ui-panel-2); }
.ui-asis-pasos button span {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; border: 1px solid var(--ui-line);
}
.ui-asis-pasos button em { font-style: normal; font-size: 9.5px; line-height: 1.15; text-align: center; }
.ui-asis-pasos button.on { color: var(--ui-text); }
.ui-asis-pasos button.on span { background: var(--ui-accent); border-color: var(--ui-accent); color: #06202e; }
.ui-asis-pasos button.hecho:not(.on) span { border-color: #4ade80; color: #4ade80; }

.ui-asis-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.1rem 1.5rem; }
.ui-asis-cab h2 { margin: 0.15rem 0 0.4rem; font-size: 18px; color: var(--ui-text); }
.ui-asis-para { margin: 0 0 1.1rem; font-size: 12.5px; line-height: 1.55; color: var(--ui-soft); }

.ui-asis-pie {
  flex: none; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem; border-top: 1px solid var(--ui-line); background: var(--ui-panel);
}
.ui-asis-pie .ui-btn:disabled { opacity: 0.4; cursor: default; }
.ui-asis-falta { flex: 1; margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ui-warn); }
.ui-asis-falta .ok { color: #4ade80; }

.ui-field select {
  width: 100%; font: inherit; font-size: 13px; color: var(--ui-text);
  background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: 8px; padding: 0.5rem 0.6rem;
}

/* Paso 1: dos tarjetas en vez de un sí/no, para que se lea qué implica cada una. */
.ui-asis-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ui-asis-tarjeta {
  display: flex; flex-direction: column; gap: 0.25rem; text-align: left; cursor: pointer;
  font: inherit; color: var(--ui-text); background: var(--ui-panel-2);
  border: 1px solid var(--ui-line); border-radius: 9px; padding: 0.7rem 0.75rem;
}
.ui-asis-tarjeta span { font-size: 11.5px; line-height: 1.45; color: var(--ui-soft); }
.ui-asis-tarjeta.on { border-color: var(--ui-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 40%, transparent); }

/* Paso 2: el logo y los colores medidos en él. */
.ui-asis-logo {
  margin: 0.5rem 0 0; padding: 0.6rem; border-radius: 8px; display: grid; place-items: center;
  background: repeating-conic-gradient(#20252b 0 25%, #191d22 0 50%) 0 0 / 14px 14px;
}
.ui-asis-logo img { max-width: 100%; max-height: 64px; }
.ui-asis-sw { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.7rem; }
.ui-asis-sw button { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--ui-line); cursor: pointer; }
.ui-asis-sw button.on { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

.ui-asis-mas { margin-top: 0.4rem; border-top: 1px solid var(--ui-line); padding-top: 0.7rem; }
.ui-asis-mas summary { cursor: pointer; font-size: 12.5px; font-weight: 600; margin-bottom: 0.8rem; }
.ui-asis-mas summary em { font-style: normal; font-weight: 400; color: var(--ui-soft); }

/* Paso 4: cada eje con sus dos extremos escritos y qué mueve. */
.ui-asis-eje { margin-bottom: 1rem; }
.ui-asis-eje-top { display: flex; justify-content: space-between; font-size: 12.5px; }
.ui-asis-eje-top output { font-variant-numeric: tabular-nums; color: var(--ui-accent); font-weight: 700; }
.ui-asis-eje input { width: 100%; accent-color: var(--ui-accent); margin: 0.35rem 0 0.1rem; }
.ui-asis-eje-ext { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ui-soft); }
.ui-asis-lectura { margin: 0.4rem 0 0; font-size: 13px; font-weight: 600; }

/* Paso 5: las tres direcciones con su primera pantalla a escala. */
.ui-asis-props { display: grid; gap: 0.9rem; }
.ui-asis-prop { border: 1px solid var(--ui-line); border-radius: 10px; overflow: hidden; background: var(--ui-panel-2); }
.ui-asis-prop.on { border-color: var(--ui-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 40%, transparent); }
.ui-asis-mini { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.ui-asis-mini iframe {
  position: absolute; left: 0; top: 0; width: 1280px; height: 800px;
  border: 0; transform-origin: 0 0; pointer-events: none;
}
.ui-asis-prop-txt { padding: 0.7rem 0.8rem 0.85rem; }
.ui-asis-prop-txt b { font-size: 13px; }
.ui-asis-prop-txt p { margin: 0.3rem 0 0.6rem; font-size: 12px; line-height: 1.5; color: #c9d0d8; }
.ui-asis-prop-txt .ui-asis-nota { font-size: 11px; color: var(--ui-soft); }
.ui-asis-acc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

/* Pasos 6 y 8: pruebas de la rúbrica, con su nota. */
.ui-asis-fila { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; padding: 0.7rem 0; border-top: 1px solid var(--ui-line); }
.ui-asis-fila b { font-size: 12.5px; }
.ui-asis-fila p { margin: 0.2rem 0 0; font-size: 11.5px; line-height: 1.5; color: #c9d0d8; }
.ui-asis-fila .ui-asis-cal { color: var(--ui-soft); font-size: 11px; }
.ui-pts { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.ui-pts.p0, .ui-asis-juicio button.p0 { background: color-mix(in srgb, #f87171 22%, transparent); color: #fca5a5; }
.ui-pts.p1, .ui-asis-juicio button.p1 { background: color-mix(in srgb, var(--ui-warn) 22%, transparent); color: #fde68a; }
.ui-pts.p2, .ui-asis-juicio button.p2 { background: color-mix(in srgb, #4ade80 20%, transparent); color: #86efac; }
.ui-asis-juicio { display: flex; flex-direction: column; gap: 0.2rem; }
.ui-asis-juicio button {
  width: 26px; height: 22px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700;
  border: 1px solid var(--ui-line); background: transparent; color: var(--ui-soft);
}
.ui-asis-juicio button.on { border-color: transparent; }

.ui-asis-total { display: flex; align-items: baseline; gap: 0.4rem; }
.ui-asis-total b { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.ui-asis-total span { font-size: 12px; color: var(--ui-soft); }
.ui-asis-barra { position: relative; height: 8px; margin: 0.6rem 0 1.9rem; border-radius: 99px; background: var(--ui-panel-2); }
.ui-asis-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--ui-accent); }
.ui-asis-barra b {
  position: absolute; top: 14px; translate: -50% 0; white-space: nowrap;
  font-size: 10px; font-weight: 600; color: var(--ui-soft);
}
.ui-asis-barra b::before { content: ''; position: absolute; left: 50%; top: -12px; width: 1px; height: 10px; background: var(--ui-soft); }

/* Paso 7: la página, con el estado del contenido de cada sección. */
.ui-asis-sec { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0; border-top: 1px solid var(--ui-line); }
.ui-asis-sec-n { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ui-asis-sec-n b { font-size: 12.5px; }
.ui-asis-sec-n em { font-style: normal; font-size: 11px; color: var(--ui-soft); }
.ui-asis-est { margin-left: auto; font-size: 11px; line-height: 1.35; text-align: right; max-width: 55%; }
.ui-asis-est.ok { color: #4ade80; }
.ui-asis-est.todo { color: var(--ui-warn); }
.ui-asis-sec button {
  flex: none; width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  border: 0; background: transparent; color: var(--ui-soft); font-size: 12px;
}
.ui-asis-sec button:hover { background: color-mix(in srgb, #f87171 25%, transparent); color: #fecaca; }
.ui-sec-add button em { font-style: normal; color: var(--ui-soft); }

/* Formas que casan con el material del cliente: una marca discreta, no un sello. */
.ui-op-suya .ui-op-lbl::after { content: '★'; color: var(--ui-accent); font-size: 9px; }

/* ── La sorpresa (F3): qué ha hecho, por qué, y deshacer ─────────────────── */
.ui-sorpresa {
  display: flex; align-items: center; gap: 0.8rem; flex: none;
  padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--ui-line);
  background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-panel));
}
.ui-sorpresa p { flex: 1; margin: 0; font-size: 12px; line-height: 1.45; color: #c9d0d8; min-width: 0; }
.ui-sorpresa p b { display: block; color: var(--ui-text); font-size: 12.5px; }
.ui-sorpresa-acc { display: flex; gap: 0.3rem; flex: none; }
.ui-sorpresa-acc .ui-btn { font-size: 12px; padding: 0.35rem 0.6rem; }
.ui-sorpresa-acc .ui-btn:disabled { opacity: 0.4; cursor: default; }
@media (width < 60rem) {
  .ui-sorpresa { flex-wrap: wrap; }
  .ui-sorpresa p { flex-basis: 100%; }
}

/* Al entrar: tres caminos, uno por línea. */
#inicio[open] { display: grid; place-items: center; }
.ui-dialog-panel.ui-inicio { height: auto; width: min(100% - 2rem, 38rem); }
.ui-inicio-ops { display: grid; gap: 0.6rem; padding: 1.1rem; }
.ui-inicio-op {
  display: flex; flex-direction: column; gap: 0.3rem; text-align: left; cursor: pointer;
  font: inherit; color: var(--ui-text); background: var(--ui-panel-2);
  border: 1px solid var(--ui-line); border-radius: 10px; padding: 0.9rem 1rem;
}
.ui-inicio-op:hover { border-color: var(--ui-accent); }
.ui-inicio-op.primero { border-color: color-mix(in srgb, var(--ui-accent) 55%, var(--ui-line)); }
.ui-inicio-op b { font-size: 14px; }
.ui-inicio-op > span { font-size: 12px; line-height: 1.5; color: var(--ui-soft); }