/* Lía · Puente: los paneles del diseño anterior que todavía viven dentro de pantallas ya migradas.
 *
 * Por qué existe. La pasada de diseño (tarea 49) migra una pantalla por commit, pero algunas arrastran **paneles**
 * que no se pueden rehacer en el mismo commit sin quitar capacidades: las condiciones de compra, el editor de una
 * partida, el panel de pendientes. Esos paneles se escribieron con las clases de `lia.css`, y una pantalla migrada
 * no carga `lia.css` a propósito —si lo hiciera, le ganaría a los tokens y devolvería la pantalla a su aspecto
 * anterior—. Sin esta hoja se verían sin vestir: campos del navegador, sin márgenes y sin contraste.
 *
 * Qué NO es: no es `lia.css` recortado ni un diseño nuevo. Son las mismas clases, vestidas con los tokens, para que
 * un panel prestado se vea como el resto de su pantalla mientras le llega su turno.
 *
 * Cuándo se borra: cuando no quede ningún panel del diseño anterior dentro de una pantalla migrada. Entonces esta
 * hoja y `lia.css` se van juntas (tarea 49, punto 4).
 *
 * Todo sale de css/lia-tokens.css. Aquí no se inventa ningún color ni medida (regla 4 de CLAUDE.md).
 */

/* Lo oculto, oculto. Va primero y con `!important` porque las reglas de abajo dan `display` a clases que el HTML
 * prestado usa **con** `hidden`: el editor de una partida nace oculto y se abre al tocar «Agregar». Sin esto,
 * `.editor { display: flex }` le gana a `[hidden]` y el formulario ocupa sitio sin que nadie lo haya abierto — que
 * es justo lo que dejaba un hueco en blanco dentro de la lista de artículos. */
[hidden] { display: none !important; }

/* ---------- formularios ---------- */
.editor, .conds, .stack, .stack-sm, .ed-grid, .cfg-form { display: flex; flex-direction: column; gap: 10px; }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-grid .span2, .f.span2 { grid-column: 1 / -1; }

.f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f > span, legend, .say-k { font-size: 13px; color: var(--muted); }
.say-k { font-weight: 600; margin: 0; }
.say { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.say strong { color: var(--text); }
.f small, .fine { font-size: 12px; line-height: 1.5; color: var(--muted); }
.req { color: var(--warn); }

.f input[type='text'], .f input[type='email'], .f input[type='tel'], .f input[type='url'], .f input[type='date'],
.f input[type='number'], .f input[type='search'], .f input[type='password'], .f select, .f textarea,
.cond-box input, .cond-box select, .contador input {
  box-sizing: border-box; width: 100%; min-width: 0;
  height: 48px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: transparent; color: var(--text);
  font: inherit; font-size: 16px;
}
.f textarea { height: auto; min-height: 76px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.check, .tag, .cat-op { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.check input, .tag input, .cat-op input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.check small { display: block; font-size: 12px; color: var(--muted); }
.tags, .cat-lista, .cat-oblig, .chips, .row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- condiciones de compra ---------- */
.cond { display: flex; flex-direction: column; gap: 6px; }
.cond-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--muted); }
.cond-box {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
}
.cond-box input, .cond-box select { border: 0; padding: 0; height: auto; background: none; }
.cond-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cond-text strong { font-size: 14px; }
.cond-text small { font-size: 12px; color: var(--muted); }
.sites, .ed-sites { display: flex; flex-direction: column; gap: 8px; }
.site, .sede-fila { display: flex; align-items: center; gap: 8px; }
.sede-n, .sede-nombre { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.site-fecha input { width: auto; }

/* Contador +/−: «todo tocando» (tarea 16a). Los botones son de 44 px, que es lo que un dedo acierta. */
.contador { display: inline-flex; align-items: center; gap: 4px; }
.contador-b {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line-strong); border-radius: 12px; background: transparent; color: var(--text);
  font: inherit; font-size: 20px; cursor: pointer;
}
.contador input { width: 72px; text-align: center; }

/* ---------- avisos, pastillas y enlaces ---------- */
.note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card);
  font-size: 13px; line-height: 1.5;
}
.note-amber { border-color: var(--warn); color: var(--text); }
.note-bad { border-color: var(--bad, var(--warn)); }
.note-ok { border-color: var(--ok); }
.pill, .cmp-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--line-strong); font-size: 11px; font-weight: 600; color: var(--muted); }
.pill-ok { border-color: var(--ok); color: var(--ok); }
.pill-amber, .cmp-tag-amber { border-color: var(--warn); color: var(--warn); }

.link { color: var(--accent); background: none; border: 0; padding: 0; font: inherit; font-size: 13px; cursor: pointer; }
.link-muted { color: var(--muted); }

/* ---------- botones prestados ---------- */
/* Los paneles traen sus propias clases de botón. Se les da la forma de los tokens sin tocar su HTML. */
.btn-ghost, .btn-sm, .btn-dark, .btn-olive, .btn-accent, .btn-primary, .btn-amber {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 16px; border-radius: var(--radius-btn);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.btn-ghost, .btn-sm { border: 1px solid var(--line-strong); background: transparent; color: var(--text); }
.btn-dark, .btn-olive, .btn-accent, .btn-primary, .btn-amber { border: 0; background: var(--accent); color: var(--on-accent); }
.btn-block { width: 100%; }

/* ---------- listas y desplegables prestados ---------- */
.qlines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.qlines li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.qlines small { display: block; font-size: 12px; color: var(--muted); }
.peek > summary, details > summary.link-muted { cursor: pointer; list-style: none; font-size: 13px; color: var(--accent); }
.peek[open] > summary { margin-bottom: 8px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- el documento de la compra (tarea 60, punto 3) ---------- */
/* La tarjeta de la maqueta (`lia-diseno/maquetas/flujo-compra.html`, `.file`), en todas las pantallas de la compra:
 * qué archivo es esto y que se puede abrir. El nombre se recorta antes de empujar nada, porque un nombre de archivo
 * largo no puede desmontar una pantalla de 390 px. */
.doc-enlace { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--accent); text-decoration: none; }
.doc-enlace svg { flex: none; }
.doc-texto { display: flex; flex-direction: column; min-width: 0; }
.doc-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text); }
.doc-ver { font-size: 11px; line-height: 1.3; color: var(--muted); }

/* ---------- preguntas ---------- */
/* El mismo componente que usa «Resuelve lo pendiente». La opción elegida se distingue por borde, fondo y marca:
 * nunca solo por color. Y lo que Lía propone lleva su etiqueta, para no confundirlo con lo que dijo el documento. */
.preg { display: flex; flex-direction: column; gap: 6px; }
.preg-art { margin: 0; font-size: 12px; color: var(--muted); }
/* Tarea 60, punto 6: el POR QUÉ va a la vista, encima de la pregunta, no detrás de «Ver detalle». Es lo que permite
 * contestar sin abrir nada: primero el dato del documento que chirría, después la pregunta. */
.preg-porque { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.preg-q { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.preg-ops, .preg-otra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.op {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 40px; padding: 6px 14px; border-radius: var(--radius-chip);
  border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
/* **Lo elegido no va en negro** (tanda 1.9.15, punto 5; Cowork, 4 oct). Usa el color de la función de la pantalla
 * —azul en Compras, morado en Proyectos, gris en Facturas—, que es el que ya llevan el botón y la pestaña encendida. */
.op[aria-pressed='true'], .op.is-on { border: 2px solid var(--accent); background: var(--card); color: var(--text); font-weight: 600; }
.op-sugerida { font-size: 11px; color: var(--accent); }
.op[aria-pressed='true'] .op-sugerida, .op.is-on .op-sugerida { color: var(--on-accent); }
.preg-ok { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.preg-cambiar { margin-left: auto; }
.preg-lista + .preg-lista { border-top: 1px solid var(--line); padding-top: 6px; }

/* ---------- avisos flotantes ---------- */
/* El de «Deshacer» (tarea 39) no se cierra solo a propósito: uno que se desvanece mientras alguien lo lee se lleva
 * con él la única forma de arreglar lo que acaba de hacer. Por eso va por encima de la barra, no encima del botón. */
.toasts {
  position: fixed; left: 0; right: 0; bottom: calc(64px + 16px + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 70; pointer-events: none; padding: 0 16px;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  max-width: 520px; padding: 12px 16px; border-radius: 16px;
  /* Tanda 1.9.19 (captura 042): el aviso flotante salía en NEGRO —`var(--text)` de fondo—, el único bloque oscuro de
   * la app en claro. Va como los demás avisos del estilo aprobado: superficie clara, su borde y su ícono. */
  background: var(--card); color: var(--text); border: 1px solid var(--line-strong); font-size: 14px; box-shadow: var(--sombra);
}
.toast > svg { flex: none; color: var(--ok); }
.toast .btn, .toast .btn-ghost, .toast .btn-sm { height: 36px; padding: 0 12px; font-size: 13px; border-color: var(--line-strong); color: var(--text); background: transparent; }
/* `.toast-bad` era `background: var(--warn)` hasta la 1.9.5. Lo que lleva ahora está al final del archivo, con el
 * punto 8: superficie clara, su borde y su ícono. Se quita aquí en vez de taparlo abajo para que no queden dos
 * verdades en el mismo archivo. */
.toast.is-out { opacity: 0; transform: translateY(8px); transition: all .3s ease; }
@media (min-width: 720px) { .toasts { align-items: flex-end; right: 24px; left: auto; bottom: 24px; } }

/* ---------- archivos ---------- */
.file-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.file-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--muted); }
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; border: 1px dashed var(--line-strong); border-radius: 14px; text-align: center; cursor: pointer; }

/* ---------- el pedido (tarea 49) ---------- */
/* La etapa «pedido» son ~180 líneas de formularios con evidencia y autorización —confirmar la fecha comprometida,
 * recibir parcial, cerrar con lo recibido, calificar, reportar un problema—. Se prestan enteras, como las condiciones
 * de compra: rehacerlas en el mismo commit habría costado capacidades. Lo que sí cambió es su marco, que ya es el de
 * la estructura v11. Estas son sus mismas clases, con los valores de los tokens. */
.order {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card);
}
.order-head { display: flex; align-items: center; gap: 10px; }
.order-head h3 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.order-head p { margin: 2px 0 0; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  font-size: 13px; font-weight: 700;
}
.avatar-sm { width: 30px; height: 30px; font-size: 12px; }
.av-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }

/* Los cuatro pasos del pedido: enviado · confirmado · en camino · entregado. */
.track { list-style: none; display: flex; margin: 0; padding: 0; gap: 4px; }
.track li { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--muted); text-align: center; }
.track li span { display: block; height: 4px; border-radius: 2px; background: var(--line); }
.track li.done span, .track li.now span { background: var(--accent); }
.track li.now { color: var(--accent); font-weight: 700; }

/* Lo que pide un toque antes de seguir. Ámbar, como todo lo que avisa sin bloquear. */
.amber { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--warn); border-radius: 14px; }
.amber p { margin: 0; font-size: 13px; line-height: 1.5; }
.amber-actions, .ord-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msg { margin: 0; padding: 10px; border-radius: 12px; background: var(--bg); font-family: inherit; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }

/* ---------- El borrador que Lía deja listo, y el permiso que lo deja salir ----------
 *
 * Las dos piezas de la tarjeta ámbar **no tenían ni una línea de estilo**, y se vio al mirar las capturas de la
 * 1.9.7: el cuadro del mensaje salía con el ancho de veinte columnas y la letra de máquina de escribir que le pone
 * el navegador, y el permiso —una casilla y su pregunta— salía como texto suelto, pegado al costado del cuadro.
 *
 * Importa más de lo que parece: ese cuadro es **el mensaje que va a salir a un proveedor**, y la casilla es el «sí»
 * que lo deja salir. Las dos son lo que la tanda 1.9.7 puso en el centro —Lía redacta y espera—, y un borrador que
 * no se puede leer cómodamente es un borrador que nadie corrige.
 *
 * Los valores son los que ya usan los otros cuadros de texto de Lía (`views/donde.js`, `views/proyecto.js`): el
 * mismo radio, el mismo borde y la misma letra de la aplicación. Y el permiso lleva el ámbar de «mira esto», que es
 * el color que esta casilla tiene en la pantalla de pedir precios desde la 1.9.1. */
.amber textarea {
  display: block; width: 100%; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 12px; background: transparent; color: var(--text);
  font: inherit; font-size: 15px; line-height: 1.5; padding: 10px 12px; resize: vertical;
}
.amber textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.check-amber {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--warn); border-radius: 12px;
  font-size: 14px; line-height: 1.4;
}
.check-amber input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--warn); }

/* ---------- «Ver su cotización»: el botón y la tabla de lo que ofreció ----------
 *
 * Es la misma historia que `.bloqueo` en la 1.9.5 y que el borrador de aquí arriba: estas reglas vivían en
 * `public/lia.css`, que el marco de ahora **ya no sirve**, así que en «Pidiendo precios» la cotización salía sin
 * estilo. Se vio en las capturas de la 1.9.7: el botón «Ver su cotización» era una barra azul con el texto del mismo
 * color encima —ilegible— y la tabla se salía por el costado derecho, arrastrando la página entera a más de lo que
 * mide un teléfono. La columna «Disponibilidad» quedaba cortada.
 *
 * No se rehacen: **se mudan** (regla 3), con los nombres de los tokens de ahora —`--ink3` era `--muted`, `--line2`
 * era `--line-strong`, `--amber` era `--warn`— y con lo que el marco nuevo ya resuelve quitado. La tabla sigue
 * desplazándose dentro de su caja, que es lo que impide que arrastre la pantalla. */
/* `color` hace falta: `.peek > summary` pinta su texto con el acento —porque es un enlace— y `.btn` pone ese mismo
 * acento de fondo. Con más peso el de arriba, el botón salía azul con el texto azul encima: una barra vacía. Se vio
 * en las capturas de la 1.9.7, y es lo que pasa cuando una regla se muda y la otra no. */
.peek > summary.btn { text-decoration: none; font-size: 15.5px; font-weight: 650; color: var(--on-accent); }
.peek-quote { margin-top: 4px; }
.peek-quote > summary.btn-quote {
  box-sizing: border-box; max-width: 100%; min-height: 52px; padding: 0 18px; gap: 10px; border-radius: 14px;
}
.peek-quote > summary.btn-quote:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-quote .btn-quote-total { margin-left: 6px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .35); font-variant-numeric: tabular-nums; }
.btn-quote .ico:last-child { transition: transform .15s ease; }
.peek-quote[open] > summary.btn-quote .ico:last-child { transform: rotate(180deg); }
.peek-quote[open] > summary.btn-quote { margin-bottom: 12px; }
@media (max-width: 420px) {
  .peek-quote > summary.btn-quote { display: flex; width: 100%; justify-content: flex-start; white-space: normal; flex-wrap: wrap; row-gap: 2px; padding: 8px 14px; }
  .btn-quote .btn-quote-total { margin-left: auto; white-space: nowrap; }
  .btn-quote .ico:last-child { flex: none; }
  .qbox { padding: 8px 10px 10px; }
}
.qbox { background: var(--bg); border-radius: 14px; padding: 10px 12px 12px; }
/* **Lo que impide que la tabla arrastre la pantalla**: se desplaza dentro de su caja, no fuera de ella. */
.qtable-wrap { overflow-x: auto; max-width: 100%; margin: 4px -4px 0; padding: 0 4px; }
.qtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.qtable th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; padding: 6px 8px; border-bottom: 1px solid var(--line-strong); }
.qtable td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.qtable .qt-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qtable th.qt-num { text-align: right; }
.qtable .qt-amt { font-weight: 650; }
.qtable .qt-desc small, .qtable .qt-num small { display: block; font-size: 13px; color: var(--muted); font-weight: 450; margin-top: 2px; }
.qtable .qt-note { color: var(--warn); }
.qtable .qt-alt { color: var(--muted); }
.qtable tr.is-late td { background: var(--warn-bg); }
.qtable .avail { display: inline-block; font-size: 13px; color: var(--muted); background: var(--soft); border-radius: 8px; padding: 2px 7px; margin: 0 4px 4px 0; white-space: nowrap; }
.qtable .avail i { font-style: normal; color: var(--muted); }
.qtable .avail.is-late { background: var(--warn-bg); color: var(--warn); }
.qtable .avail-none { background: transparent; }
.qtable .avail.avail-pending { border: 1px dashed var(--warn); }
.qtable tfoot td { border-bottom: 0; padding: 5px 8px; color: var(--muted); }
.qtable tfoot tr:first-child td { padding-top: 12px; border-top: 1px solid var(--line-strong); }
.qtable tfoot .qt-sub td { font-size: 13px; color: var(--muted); padding-top: 2px; padding-bottom: 2px; }
.qtable tfoot .qt-total td { font-weight: 700; color: var(--text); font-size: 15.5px; padding-top: 8px; }
/* **En un teléfono la tabla no se desplaza: se apila.** Cinco columnas en 390 px dejan la descripción en una
 * columna diminuta y los importes fuera de la vista —en la captura de la 1.9.7 el subtotal, el flete y el IVA salían
 * sin su número, porque estaban en la cuarta columna, a la derecha del borde—. Cada renglón pasa a ser un bloque con
 * su rótulo delante (`data-l`), que es lo que esos atributos venían esperando desde que se escribieron.
 *
 * Va por `@container` y no por `@media`: lo que manda es lo que mide **la caja de la tabla**, no la ventana; en el
 * escritorio la misma tabla cabe y se queda en columnas. */
.qtable-wrap { container-type: inline-size; container-name: qt; }
.qtable .qt-desc { min-width: 15em; }
.qtable .qt-avail { min-width: 12em; }
@container qt (max-width: 660px) {
  .qtable thead { display: none; }
  .qtable, .qtable tbody, .qtable tfoot { display: block; width: 100%; }
  .qtable tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .qtable tbody td { display: block; border: 0; padding: 0; min-width: 0; background: none; }
  .qtable tr.is-late { background: var(--warn-bg); border-radius: 10px; padding-left: 10px; padding-right: 10px; }
  .qtable tr.is-late td { background: none; }
  .qtable tbody .qt-desc, .qtable tbody .qt-avail { grid-column: 1 / -1; min-width: 0; }
  .qtable tbody .qt-desc strong { display: block; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
  .qtable tbody .qt-num { text-align: left; white-space: normal; font-size: 15px; }
  .qtable tbody td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 1px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .qtable tbody .qt-amt { grid-column: 1 / -1; font-size: 16px; }
  .qtable tbody .qt-avail .avail { white-space: normal; display: inline-block; margin: 0 6px 6px 0; font-size: 13.5px; padding: 4px 9px; }
  .qtable tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .qtable tfoot td { padding: 5px 0; }
  .qtable tfoot td:empty { display: none; }
  .qtable tfoot tr:first-child td { border-top: 0; }
  .qtable tfoot tr:first-child { border-top: 1px solid var(--line-strong); margin-top: 4px; padding-top: 6px; }
}
.qt-source { margin-top: 8px; }
/* «Volver a leer su cotización» y su explicación: el botón y el texto, uno al lado del otro y cada uno con su sitio.
 * Sin esto el texto se enredaba alrededor del botón (capturas de la 1.9.7). Se muda de public/lia.css igual que lo
 * de arriba. */
.reread { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.reread .fine { flex: 1 1 220px; margin: 0; }

/* Calificar al proveedor: estrellas que se tocan, sin escribir nada. */
.rate { display: flex; flex-direction: column; gap: 8px; }
.rate p { margin: 0; font-size: 14px; }
.rate-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rate-stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rate-stars label { font-size: 26px; line-height: 1; color: var(--line-strong); cursor: pointer; }
.rate-stars input:checked ~ label, .rate-stars label:hover, .rate-stars label:hover ~ label { color: var(--accent); }
.rate-stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.stars { color: var(--accent); letter-spacing: 1px; }
.stars span { color: var(--line-strong); }
.stars .on { color: var(--accent); }

/* ---------- la espera viva (tarea 60, puntos 2, 12, 27 y 32) ---------- */
/* Las dos piezas de la maqueta (`lia-diseno/maquetas/flujo-compra.html`, pantalla «Buscando»): el giro, que dice que
 * esto sigue trabajando, y la barra. La barra es INDETERMINADA —va y viene— porque de una sola búsqueda no se sabe
 * cuánto falta: una barra que finge un porcentaje miente cuando se queda quieta y otra vez cuando salta al final. */
.giro { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--linea-suave, var(--line)); border-top-color: var(--accent); animation: lia-giro 1s linear infinite; flex: none; }
.progreso-vivo { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progreso-vivo i { display: block; width: 40%; height: 100%; border-radius: 99px; background: var(--accent); animation: lia-vaiven 1.6s ease-in-out infinite; }
@keyframes lia-giro { to { transform: rotate(360deg); } }
@keyframes lia-vaiven { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
/* Sin animación, la barra se queda llena a medias y el giro quieto: siguen diciendo «en curso» sin moverse. */
@media (prefers-reduced-motion: reduce) {
  .giro { animation: none; }
  .progreso-vivo i { animation: none; width: 100%; opacity: .5; }
}


/* ---------- la bitácora de lo que Lía va encontrando (tarea 60, puntos 2 y 12) ---------- */
/* Era un renglón que se pisaba a sí mismo con el paso en el que iba. Ahora cada hallazgo se añade debajo, y lo último
 * se lee más oscuro: se ve lo que lleva encontrado, no solo lo último que dijo. */
.bitacora { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.45; }
.bitacora span { color: var(--muted); }
.bitacora span:last-child { color: var(--text); font-weight: 600; }

/* ---------- Tarea 66 · Configuración, vestida con los tokens de ahora ----------
   Las tarjetas de Configuración se escribieron con el diseño anterior y funcionan: cambiarlas de sitio y de aspecto a
   la vez es como se pierden capacidades (una dirección que ya no se guarda, un dato fiscal que se queda en blanco).
   Así que se mudan al marco de ahora con sus mismas clases, y estas reglas las visten. Solo son valores: ni una regla
   nueva de comportamiento. */
.cfg-grid { display: flex; flex-direction: column; gap: 10px; }
.cfg-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; }
/* El resumen va DEBAJO del título, no a su lado: al lado le robaba el ancho y partía «Direcciones de entrega» en
   dos renglones con su resumen encajado en medio. Se vio en la captura. */
.cfg-card > summary { display: flex; flex-direction: column; gap: 3px; cursor: pointer; list-style: none; }
.cfg-card > summary::-webkit-details-marker { display: none; }
.cfg-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-title); font-size: 16px; font-weight: 700; color: var(--text);
}
.cfg-head svg:last-child { margin-left: auto; color: var(--muted); transition: transform .18s ease; }
.cfg-card[open] .cfg-head svg:last-child { transform: rotate(180deg); }
.cfg-ico { display: inline-flex; color: var(--accent); }
.cfg-titulo { flex: 0 1 auto; }
.cfg-resumen { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cfg-body { display: grid; gap: 12px; margin-top: 12px; }
.cfg-form { display: grid; gap: 10px; }
.cfg-form .f { display: grid; gap: 5px; }
.cfg-form .f > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cfg-form input, .cfg-form textarea, .cfg-form select {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px;
  border-radius: 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--text);
}
.cfg-form textarea { min-height: 72px; }
/* M16 (recorrido del 4 oct 2026): la regla de arriba le daba el ancho entero también a las casillas, y «Usar domicilio
   fiscal para entregas» empujaba su texto fuera de la pantalla: 430 px en un teléfono de 390. Una casilla mide lo que
   mide una casilla. */
.cfg-form input[type="checkbox"], .cfg-form input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; flex: none; }
.cfg-form .btn { justify-self: start; min-height: 44px; padding: 0 22px; }
.cfg-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* En el resumen de la tarjeta los botones van separados del texto que tienen encima. */
.cfg-resumen .cfg-acts { margin-top: 8px; }
/* **Regla 44 (revisión de Cowork, 1 oct, punto 4): lo que se toca lleva fondo, nunca es texto suelto.**
   `.cfg-cta` —«Agregar dirección», «Completar datos», «Agregar proveedor»— no tenía ni una regla de CSS: salía como
   una frase gris del tamaño del resumen, sin nada que dijera que abre la tarjeta.

   **Y es un botón de contorno, no azul** (segunda revisión del 1 oct, punto 5): el azul es de UNO por tarjeta, el que
   guarda. Estos abren la tarjeta para escribir; el que se queda con el azul es el «Guardar» de dentro. Misma forma y
   misma altura que «Ver proveedores», que es el botón de al lado. */
.cfg-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-btn);
  border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  font: inherit; font-size: 15px; font-weight: 600;
}
.cfg-vacio { color: var(--muted); font-size: 14px; }
.cfg-lista { display: grid; gap: 2px; }
.cfg-item { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cfg-item:last-child { border-bottom: 0; }
.cfg-item-txt { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.cfg-item-txt small { color: var(--muted); font-size: 12px; }
.cfg-item-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cfg-item-acts form { display: inline; }
.cfg-sub > summary { list-style: none; display: inline-flex; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.cfg-sub > summary::-webkit-details-marker { display: none; }
/* Un botón del diseño anterior que sigue vivo dentro de estas tarjetas. */
.btn-olive { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--accent); color: var(--bg); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.fine { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.center { text-align: center; }

/* ---------- Tarea 66 · el alta (conectar, confirmar, configurar), vestida con los tokens ----------
   Mismo criterio que las tarjetas de Configuración: estas pantallas funcionan y tocan datos delicados —la contraseña
   del correo de alguien, sus facturas—, así que se mudan al marco de ahora con sus mismas clases y aquí se les da el
   aspecto. Ni una regla de comportamiento: solo valores. */
.auth, .stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.auth h1 { font-family: var(--font-title); font-size: 26px; line-height: 1.15; margin: 0; }
.auth h2 { font-family: var(--font-title); font-size: 17px; line-height: 1.25; margin: 0; }
.lead { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.glass, .panel, .card-soft { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1 1 160px; min-width: 0; }
.ed-more { display: flex; gap: 8px; flex-wrap: wrap; }
/* Las tres maneras de conectar datos: cada una es una tarjeta que se abre, con su fondo (regla 44). */
.opt3 { display: flex; flex-direction: column; gap: 8px; }
.opt { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.opt-rec { border: 2px solid var(--accent); padding: 11px 13px; }
.opt > summary { display: flex; flex-direction: column; gap: 3px; cursor: pointer; list-style: none; }
.opt > summary::-webkit-details-marker { display: none; }
.opt-t { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.opt-d { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pill-accent { border-color: var(--accent); color: var(--accent); }
/* Un interruptor del diseño anterior: la fila entera se toca y la casilla se ve. */
.opt-row, .switch-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; }
.opt-row small, .switch-row small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }
.switch input { width: 22px; height: 22px; accent-color: var(--accent); }
.switch i { display: none; }
.btn-accent, .btn-xl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--accent); color: var(--bg); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.pick-list { display: flex; flex-direction: column; gap: 6px; }
.pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ---------- Tarea 66 · «Completa los datos de tu empresa» (/configurar) ----------
   La última que quedaba con el diseño anterior. Mismo criterio: su contenido —datos fiscales y sedes— no se reescribe;
   se le da el aspecto de ahora. En un teléfono, sus dos columnas se apilan. */
.compra { display: flex; flex-direction: column; gap: 14px; }
.compra-head { display: flex; flex-direction: column; gap: 4px; }
.compra-head h1 { font-family: var(--font-title); font-size: 26px; line-height: 1.15; margin: 0; }
.compra-head p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.compra-cols { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.compra-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.compra-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tarj { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.tarj-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tarj-h h2 { font-family: var(--font-title); font-size: 16px; line-height: 1.25; margin: 0; }
.dir-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.dir-ancho { flex: 2 1 220px; }
/* **Cómo se captura una dirección**: buscándola en el mapa o escribiéndola. Son dos opciones que se tocan, así que se
   ven como el resto de las opciones de Lía (regla 44): tarjeta con contorno, y la elegida con el borde del acento.
   Hasta la enmienda de la tanda 1.9.0 este bloque no tenía **ni una regla de CSS**: las dos salían como dos radios con
   el texto pegado («Buscar direcciónNo disponible ahora.») y los círculos descolocados. Se vio en la captura
   07-direcciones, no en el HTML. */
.dir-modos { display: flex; flex-wrap: wrap; gap: 8px; }
.dir-modo { flex: 1 1 150px; display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); cursor: pointer; }
.dir-modo input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.dir-modo > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dir-modo strong { font-size: 13.5px; }
.dir-modo small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.dir-modo:has(input:checked) { border-color: var(--accent); }
.dir-modo:has(input:disabled) { opacity: .6; cursor: default; }
.dir-calle { flex: 2 1 180px; min-width: 0; }
.dir-cp { flex: 1 1 150px; min-width: 0; } /* con 110 px el «Cinco dígitos» salía cortado: se vio en la captura */
.dir-sub { font-size: 12px; line-height: 1.4; color: var(--muted); }
.pend-filas { display: flex; flex-direction: column; gap: 6px; }
.pend-fila, .pend-fila-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.pend-fila-top { border-top: 0; }
.pend-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pend-accion { flex: none; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
@media (min-width: 760px) { .compra-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ====================================================================================================================
 * LAS ALERTAS NO LLEVAN FONDO DE COLOR · Tanda 1.9.5, punto 8 (Marquecho, 2 oct)
 *
 * «Fondo claro y un ícono de alerta.» Un aviso pintado de color grita antes de que nadie lo haya leído, y cuando
 * todos los avisos gritan ninguno se distingue. En el boceto (`lia-principal.html`, `.alert`) el aviso es una
 * superficie clara, el texto va en tinta normal y lo que lleva el color es **el ícono, dentro de su mosaico**.
 *
 * Lo que había y cambia:
 *
 *  · `.bloqueo` —«Hay 2 pendientes que impiden pedir precios»— **no tenía ningún estilo en las pantallas migradas**:
 *    el marco de ahora sirve `lia-legado.css`, no `compra.css`, donde sí vivía (con fondo rojo). Salía como texto
 *    suelto con un ícono al lado. Aquí recibe el suyo, ya con la regla nueva;
 *  · `.toast-bad` era el único aviso **relleno de color** que queda en las pantallas de ahora.
 *
 * Los demás —`.note-amber`, `.note-bad`, `.note-ok`, `.acceso-error`— ya eran superficie clara con el borde de su
 * color y su ícono: no se tocan.
 * ================================================================================================================== */
.bloqueo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--radius-card);
  background: var(--card); border: 1px solid var(--warn); color: var(--text);
}
.bloqueo > svg { flex: none; color: var(--warn); }
.bloqueo-txt { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.bloqueo-txt strong { font-size: 15px; line-height: 1.4; }
.bloqueo-txt small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.bloqueo .btn, .bloqueo .btn-olive { flex: none; min-height: 40px; padding: 0 16px; font-size: 14px; }

/* El aviso que se desvanece tampoco se rellena de color: superficie clara, su borde y su ícono de alerta (que el
 * marco ya dibuja, `app-layout.js`). Así el que avisa de un error y el que avisa de algo hecho se distinguen por la
 * forma del ícono y por el borde, no por un bloque de color. */
.toast-bad { background: var(--card); color: var(--text); border: 1px solid var(--warn); }
.toast-bad > svg { color: var(--warn); }
.toast-bad .btn, .toast-bad .btn-ghost, .toast-bad .btn-sm { border-color: var(--line-strong); color: var(--text); }

/* ==================================================================================================================
 * Tanda 1.9.19 · «Confirmar pedido» en el teléfono: cada partida en su tarjeta (captura 142).
 *
 * La tabla de cuatro columnas —Producto · Cantidad · Precio unitario · Importe— se apretaba a 390 px: la descripción
 * quedaba en una columna de tres palabras por renglón. La regla que la volvía tarjetas vivía en `lia.css`, la hoja
 * del diseño anterior, que estas pantallas ya no cargan. Aquí está otra vez, con los tokens de ahora: la descripción
 * arriba, y debajo cantidad, precio e importe, cada uno en su renglón con su rótulo (`data-l`).
 * ================================================================================================================== */
@media (max-width: 720px) {
  .approve-detail .qt, .approve-detail .qt tbody, .approve-detail .qt tfoot, .approve-detail .qt tr, .approve-detail .qt td { display: block; width: 100%; }
  .approve-detail .qt thead { display: none; }
  .approve-detail .qt tbody tr { box-sizing: border-box; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
  .approve-detail .qt tbody td { display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: 8px; padding: 2px 0; text-align: left; border: 0; }
  .approve-detail .qt tbody td::before { content: attr(data-l); color: var(--muted); font-size: 13px; }
  .approve-detail .qt tbody td:first-child { grid-template-columns: 1fr; font-weight: 600; padding-bottom: 6px; }
  .approve-detail .qt tbody td:first-child::before { content: none; }
  .approve-detail .qt tbody td small { display: block; font-weight: 400; }
  .approve-detail .qt tbody td:not(:first-child) small { grid-column: 2; }
  .approve-detail .qt tfoot tr { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 3px 0; }
  .approve-detail .qt tfoot td { padding: 0; text-align: left; border: 0; }
  .approve-detail .qt tfoot td[colspan="4"] { grid-column: 1 / -1; }
  .approve-detail .qt .qt-num { text-align: left; }
  .approve-detail .qt tfoot .qt-num { text-align: right; }
}

/* El total de cada proveedor en «Confirmar pedido»: lo que lleva dentro, en su propio renglón (captura 12 de la 1.9.19). */
.approve-detail .ap-total small { display: block; }

/* El botón que se mantiene presionado, en «Confirmar pedido» (1.9.20). Venía del diseño anterior y aquí nunca tuvo
   sus reglas: salía gris, de fábrica. Es el botón principal (`.btn`, de los tokens); esto solo le pone el avance que
   se llena mientras se presiona —con su propio color de letra, sin un color nuevo— y el verde de «va bien» al terminar. */
.hold { position: relative; overflow: hidden; width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hold[hidden] { display: none; }
.hold-fill { position: absolute; inset: 0; width: 0; background: currentColor; opacity: .18; }
.hold.is-holding .hold-fill { width: 100%; transition: width var(--hold-ms, 1500ms) linear; }
.hold.is-done { background: var(--ok); }
.hold-label { position: relative; display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Tanda 1.9.22, B5 · los avisos ya no flotan sobre la pantalla ----------
 * En la prueba del 5 oct 2026 salían en la esquina, cortados por el borde, y tapaban botones («No», «Ver la
 * factura»). En las pantallas de ahora van en su sitio —arriba, donde el layout ya los pone—, a todo el ancho, con el
 * texto completo y sin encimarse con nada. Solo dentro de `main.pantalla`: los marcos anteriores no cambian. */
.pantalla > .toasts { position: static; left: auto; right: auto; bottom: auto; z-index: auto; padding: 0; align-items: stretch; pointer-events: auto; }
.pantalla > .toasts .toast { max-width: none; align-items: flex-start; box-shadow: none; }
.pantalla > .toasts .toast > span { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
@media (min-width: 720px) { .pantalla > .toasts { align-items: stretch; right: auto; left: auto; bottom: auto; } }


/* ====================================================================================================================
 * «Mi recomendación» vestida con los tokens (E1 de la 1.9.22, hecho en el punto 7 de la 1.9.23).
 *
 * La tarjeta de decisión se presta del diseño anterior (`views/app-ui.js`) y en el comparativo completo salía SIN sus
 * reglas: círculos negros (los anillos sin trazo), «·nuevo» (el anillo con su texto pegado), «MXNcon IVA» y
 * «plazoFibras» (los `<small>` sin su renglón). Son las reglas de `lia.css` para `.decision`, `.ring`, `.facts`,
 * `.alts`, con los valores de los tokens. Se borran cuando la tarjeta se rehaga en el diseño de ahora.
 * ================================================================================================================== */
.decision { background: var(--card); border: 1px solid transparent; box-shadow: var(--sombra); border-radius: var(--radius-card); padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.decision .eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.decision-head { display: flex; align-items: center; gap: 14px; }
.decision-head h2 { margin: 0; font-size: 22px; line-height: 1.15; }
.decision-head h3 { margin: 0; font-size: 16px; line-height: 1.2; }
.decision-multi { flex-direction: column; align-items: stretch; gap: 12px; }
.multi { display: flex; align-items: center; gap: 12px; }
.decision .rel { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.decision .why { margin: 0; font-size: 15px; line-height: 1.45; }
.decision .salidas { display: flex; flex-wrap: wrap; gap: 8px; }
.ring { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; }
.ring svg { display: block; }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 6; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.ring-ok .ring-fg { stroke: var(--ok); }
.ring-amber .ring-fg { stroke: var(--warn); }
.ring-bad .ring-fg { stroke: var(--bad, var(--warn)); }
.ring-neutral .ring-fg { stroke: var(--line-strong, var(--line)); }
.ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ring-in strong { font-size: 15px; font-weight: 750; letter-spacing: -.02em; }
.ring-in small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.ring-sm .ring-in strong { font-size: 13px; }
.ring-sm .ring-in small { display: none; }
.decision .facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.decision .facts > div { background: var(--bg); border-radius: 14px; padding: 12px; flex: 1 1 190px; min-width: 0; }
.decision .facts > div:first-child { flex: 1.4 1 190px; }
.decision .facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; }
.decision .facts dd { margin: 3px 0 0; font-size: 18px; font-weight: 650; letter-spacing: -.02em; overflow-wrap: anywhere; }
.decision .facts dd small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.decision .facts .facts-sm { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.decision .facts .avail { display: inline-block; margin: 0 8px 2px 0; font-size: 14px; font-weight: 600; }
.decision .facts .avail i { font-style: normal; font-weight: 500; color: var(--muted); }
.decision .warns { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.decision .warns .note { margin: 0; }
.decision .qdetail > summary { font-size: 14px; }
.decision .peek > summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 6px; }
.decision .peek > summary::-webkit-details-marker { display: none; }
.decision .peek[open] > summary { margin-bottom: 10px; }
.alts { background: transparent; }
.alts > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-weight: 600; font-size: 15px; border-top: 1px solid var(--line); color: var(--text); }
.alts > summary::-webkit-details-marker { display: none; }
.alts > summary .fine { margin-left: auto; font-weight: 450; color: var(--muted); }
.alts-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: none; }
.alts-scroll::-webkit-scrollbar { display: none; }
.alt { flex: 0 0 78%; max-width: 300px; scroll-snap-align: center; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.alt.is-picked { border-color: var(--text); }
.alt h3 { margin: 0; font-size: 16px; }
.alt-head { display: flex; align-items: center; gap: 10px; }
.alt-total { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.alt-total small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.webrefs { padding: 0 4px 10px; }
.qlines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.qlines li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.qlines li:last-child { border-bottom: 0; }
.qlines small { display: block; color: var(--muted); font-size: 12.5px; }
.qlines strong { white-space: nowrap; font-weight: 650; }
/* Cada proveedor en su renglón dentro de «Disponibilidad» y «Vigencia» (en la comprobación de la 1.9.23 salía «4 a 5 semanas · plazoFibras del Pacífico: …», todo seguido). */
.decision .facts dd.facts-sm > b { display: block; margin-top: 4px; }
.decision .facts dd.facts-sm > b:first-child { margin-top: 0; }