/* Lía · La cabecera, LA caja de Inicio, las tres pestañas, el botón ← Atrás y el botón «Siguiente: X».
 *
 * Un solo sitio dibuja estas cosas (NAVEGACION.md §6): si el mismo HTML aparece en dos vistas, se arregla en una
 * y se olvida la otra. Todos los valores salen de css/lia-tokens.css; aquí no se inventa ningún color ni medida.
 *
 * La barra se enseña SOLO en pantallas principales, nunca dentro de un flujo: ahí la persona está haciendo una sola
 * cosa y las pestañas la invitarían a abandonarla a medias. La caja es de Inicio y de ninguna otra pantalla (tarea 54,
 * 29 sep); en las demás va «Preguntarle a Lía», que lleva a ella.
 */

/* ---------- Cabecera v11: marca · letra · iniciales ---------- */
.v11-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v11-marca {
  font-family: var(--font-title); font-weight: 600; font-size: 20px;
  letter-spacing: -0.02em; line-height: 1; color: var(--text);
}
.v11-marca span { color: var(--accent); }
.v11-yo { display: flex; gap: 8px; }
.v11-aa, .v11-ini {
  background: var(--card); border-color: var(--line-strong);
  display: flex; align-items: center; justify-content: center;
}
.v11-aa { font-weight: 500; font-size: 14px; }
.v11-ini { width: 40px; padding: 0; font-weight: 600; font-size: 13px; }
/* 1.9.31, punto 0.1 (decisión de la 1.9.27): en el teléfono «Proveedores» y la cuenta medían 58 de alto. Van a 44, el
   mínimo de toque que usa la app en todos sus botones. En la computadora manda la regla de 40 de más abajo. */
.v11-yo .chip { height: 44px; min-height: 44px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.v11-yo .v11-ini { width: 44px; }

/* ---------- «Preguntarle a Lía»: el botón que lleva a la caja (tarea 54d) ---------- */
/* Aquí vivía `.cajita`, una caja en cada pantalla que llevaba a otra caja. Se quitó por decisión de Marquecho del
 * 29 sep.
 *
 * Lo que se gana de alto, MEDIDO y no supuesto (`capturas-pasada.mjs`, 390 × 844): La solicitud 1127 → 1109,
 * Aclaración 1374 → 1356, Confirmar pedido 1427 → 1410. Son **18 px**, no los ~105 que se venían dando por buenos:
 * el botón ocupa casi lo mismo que la fila que sustituye. El cambio vale por lo que arregla —una caja que llevaba a
 * otra caja—, no por el alto; quien busque los 270 px de NAVEGACION §5 tiene que mirar a otro sitio. */
.preguntar {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 17px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  font-size: 13px; font-weight: 600;
}
.preguntar svg { color: var(--accent); flex: none; }
.preguntar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* **Atenuado mientras la conversación con Lía no exista** (tanda 1.9.10, punto 6; enmienda de Marquecho del 3 oct).
 *
 * El botón se queda en su sitio y con su nombre —va a ser el que abra esa conversación— pero ya no lleva a `/compras`:
 * «no necesito dos rutas que me lleven al mismo lugar». Atenuado para que no prometa lo que todavía no hace, y aun así
 * tocable, porque al tocarlo contesta en un renglón.
 *
 * El triángulo de `<details>` se quita: lo que se quiere es que siga pareciendo el mismo botón de antes, no un
 * desplegable nuevo. */
.preguntar-caja { align-self: flex-start; }
.preguntar-pronto { opacity: .55; cursor: pointer; list-style: none; }
.preguntar-pronto::-webkit-details-marker { display: none; }
.preguntar-nota { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* ---------- LA caja, solo en Inicio (tarea 54a) ---------- */
.caja-form { display: flex; flex-direction: column; gap: 10px; }
.caja {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  border: 2px solid var(--accent); border-radius: 20px; background: var(--card);
}
.caja-titulo { font-size: 20px; font-weight: 700; line-height: 1.2; cursor: text; }
.caja textarea {
  width: 100%; box-sizing: border-box;
  border: 0; background: transparent; resize: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 17px; line-height: 1.45;
}
/* El ejemplo que rota: gris, y se distingue de lo escrito a simple vista. */
.caja textarea::placeholder { color: var(--muted); opacity: 1; }
.caja:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.caja-aviso { margin: 0; font-size: 13px; line-height: 1.45; color: var(--warn); }
.caja-dirigida { margin: 0; font-size: 13px; color: var(--muted); }

/* La flecha de enviar, dentro de la caja y a su derecha (revisión de Cowork, 29 sep). Apagada hasta que hay algo que
 * enviar: `public/lia.js` la enciende sola, igual que hacía con el botón grande que sustituye. */
.caja-enviar {
  align-self: flex-end;
  width: 40px; height: 40px; flex: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 20px;
  background: var(--accent); color: var(--on-accent);
  cursor: pointer;
}
/* La flecha ya no nace apagada (tarea 60, punto 42e): el dictado llenaba el cuadro sin avisar y se quedaba muerta.
 * La regla se queda por si algún día algo la apaga a propósito, pero hoy nadie lo hace. */
.caja-enviar[disabled] { background: var(--line); color: var(--muted); cursor: default; }

/* ---------- dictar: mientras Lía escucha (tarea 60, punto 42b) ---------- */
/* El indicador del micrófono del sistema sale ARRIBA, fuera de la aplicación, y desde ahí no se entiende cómo parar.
 * Esto late dentro de la caja, dice «Te escucho…» y trae un botón grande para terminar. */
.caja-escucho { display: flex; align-items: center; gap: 10px; padding: 8px 0 2px; }
.caja-escucho-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; animation: lia-late 1.2s ease-in-out infinite; }
.caja-escucho-txt { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--accent); }
/* Regla 44 (lo que se toca se ve tocable): fondo y relieve, nunca texto suelto. */
.caja-escucho-listo {
  flex: none; height: 40px; padding: 0 20px; border: 0; border-radius: 20px;
  background: var(--accent); color: var(--on-accent);
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.caja-escucho-listo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes lia-late { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .caja-escucho-punto { animation: none; } }
/* El micrófono, mientras graba, también se ve distinto: la caja y el botón cuentan lo mismo. */
.caja-modo.is-rec { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* La línea con la que Lía contesta dentro de la caja: que falta algo que mandar, o que este navegador no deja dictar. */
/* Es la respuesta de Lía a «mandé sin escribir nada»: texto firme, no un pie en gris (leves de la 1.9.18, A9). */
.caja-nota { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 700; color: var(--text); }
.caja-enviar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Los tres modos: nombre y, debajo y en chico, qué se manda por ahí (regla de nombres, tarea 54a). */
.caja-modos { display: flex; gap: 8px; }
.caja-modo {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 6px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font-family: inherit; text-align: center; cursor: pointer;
}
.caja-modo svg { color: var(--accent); }
.caja-modo-nombre { font-size: 13px; font-weight: 700; }
.caja-modo-detalle { font-size: 11px; line-height: 1.3; color: var(--muted); }
.caja-modo:focus-within, .caja-modo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Compras | Proyectos, en grande (tarea 54a) ---------- */
.inicio-saludo { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; }
.inicio-secciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inicio-seccion {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.inicio-seccion-ico {
  width: 34px; height: 34px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.inicio-seccion-nombre { font-size: 15px; font-weight: 700; }
.inicio-seccion-nota { font-size: 12px; line-height: 1.35; color: var(--muted); }
.inicio-seccion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- La barra: las cinco pestañas (DESIGN.md, 5 oct 2026) ----------
 *
 * En teléfono va abajo, fija, blanca y con una línea arriba: cinco iconos de línea en negro con su nombre debajo, y la
 * encendida en morado. En laptop es la barra de arriba de la maqueta (`lia-estilo-2026-10-05.html`): «Lía.» a la
 * izquierda, las pestañas en texto con la encendida subrayada en morado, y a la derecha «Proveedores» y el círculo de
 * la cuenta. Un solo color de acción en toda la barra: ya no hay un color por pestaña ni una pestaña elevada
 * (DESIGN §2: «se retira el color por función de la pestaña encendida»).
 *
 * La marca y la cuenta se dibujan UNA vez, en la cabecera de la pantalla (`.v11-top`): en laptop esa cabecera se fija
 * encima de la barra —la marca a la izquierda, «Proveedores» y la cuenta a la derecha— y la barra solo lleva las
 * pestañas. Es fija a propósito y el contenido le deja su sitio (`.con-nav`): no tapa nada (regla de la 1.9.23).
 */
.nav-abajo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  height: 64px; padding: 0 6px calc(env(safe-area-inset-bottom, 0) / 2);
  border-top: 1px solid var(--line); background: var(--card);
}
.nav-items { display: flex; flex: 1 1 auto; justify-content: space-around; align-items: center; min-width: 0; }
.nav-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1 1 0; min-width: 0; padding: 6px 0;
  font-size: 11px; font-weight: 500; color: var(--muted); text-align: center;
}
.nav-ico { width: 28px; height: 24px; display: grid; place-items: center; font-style: normal; color: var(--text); }
.nav-abajo svg { width: 22px; height: 22px; }
.nav-item[aria-current='page'] { color: var(--accent); font-weight: 600; }
.nav-item[aria-current='page'] .nav-ico { color: var(--accent); }
/* La del centro ya no se eleva ni cambia de color: Proyectos es una pestaña más (la clase se queda por nombre). */
.nav-mid { margin-top: 0; }

/* El número de la pestaña: lo tuyo en ese módulo. Va sobre el icono. */
.nav-n {
  position: absolute; top: 2px; right: 50%; transform: translateX(22px);
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); color: #FFFFFF; font-size: 10px; font-weight: 600;
  display: grid; place-items: center; border: 2px solid var(--card);
}

/* Con barra, el contenido reserva su alto: 64 de barra y 20 de aire. */
.pantalla.con-nav { padding-bottom: calc(134px + env(safe-area-inset-bottom, 0)); }
:root { --anillo-nav: var(--card); }

/* ---------- Laptop: la barra de arriba de la maqueta ---------- */
@media (min-width: 720px) {
  .nav-abajo {
    position: fixed; top: 0; bottom: auto; left: 0; right: 0;
    height: 64px; padding: 0 24px 0 96px;
    justify-content: flex-start; gap: 24px;
    border-top: 0; border-bottom: 1px solid var(--line);
  }
  .nav-items { flex: 1 1 auto; justify-content: flex-start; gap: 20px; }
  .nav-item {
    flex: 0 0 auto; flex-direction: row; gap: 0; width: auto; padding: 20px 0 18px;
    font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; border-radius: 0;
  }
  .nav-item .nav-ico { display: none; }
  .nav-item[aria-current='page'] { color: var(--text); border-bottom-color: var(--accent); background: none; }
  .nav-n { position: static; display: inline-grid; transform: none; border: 0; margin-left: 6px; vertical-align: 1px; }
  /* La cabecera de la pantalla se fija encima de la barra: la marca cae a la izquierda y «Proveedores» con la cuenta
     a la derecha, como en la maqueta. Solo sus hijos reciben el toque; la franja vacía de en medio deja pasar el
     clic a las pestañas. */
  .pantalla.con-nav .v11-top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 31;
    height: 64px; box-sizing: border-box; padding: 0 24px; margin: 0;
    background: none; pointer-events: none; animation: none;
  }
  .pantalla.con-nav .v11-top > * { pointer-events: auto; }
  /* 1.9.27, punto 3: «Proveedores» y la cuenta salían más grandes que las pestañas (44 de alto, la cuenta en 13 px).
     Alto 40 y la misma letra que las pestañas: 14 px, peso 500. */
  .pantalla.con-nav .v11-yo .chip { height: 40px; min-height: 40px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; font-size: 14px; font-weight: 500; }
  .pantalla.con-nav .v11-yo .v11-ini { width: 40px; }
  .pantalla.con-nav { padding-top: 96px; padding-bottom: 72px; }
}

/* ---------- Laptop: la columna de 820 (DESIGN §6) ---------- */
@media (min-width: 720px) {
  .pantalla { max-width: 860px; padding-top: 32px; }
}
/* Rejilla que se acomoda sola: en el teléfono una columna; en la computadora, tantas como caben. Comparar precios lado a
 * lado es justo lo que no se puede hacer leyéndolos de arriba abajo. */
.lado-a-lado { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .lado-a-lado { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; }
}

/* ---------- ← Atrás ---------- */
/* Destino escrito, nunca history.back(): quien entra por un enlace de WhatsApp saldría de la aplicación. */
.atras {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 20px; border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.atras:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Encabezado de pantalla ---------- */
.pant-top { display: flex; align-items: center; gap: 12px; }
.pant-top .etiqueta { flex: 1; }

/* ---------- Filas de dato (tarea 49) ---------- */
/* Qué es a la izquierda, qué dice a la derecha. Va en CSS y no en `style=` dentro de cada `dt`/`dd` a propósito: el
   reparto por sede se lee así —«PUE</dt><dd>36»— en las pruebas de varios recorridos, y un atributo en medio las
   rompe. Que el marcado quede limpio es además lo que pide NAVEGACION §6.1. */
.datos { margin: 0; }
.datos > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.datos dt { color: var(--muted); }
.datos dd { margin: 0; text-align: right; }

/* La referencia de lo que ya se pagó: el número, y debajo de dónde salió y cuándo. Sin la fuente pegada al número, un
   precio de hace dos años se lee como el de hoy. */
.item-ref { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 0; font-size: 13px; }
.item-ref small { color: var(--muted); }

/* ---------- «¿Cómo lo compramos?» · tarea 60, punto 32 ---------- */
/* Las opciones van ABIERTAS (regla fija de diseño del 29 sep) y pesan igual: la misma tarjeta, el mismo tamaño y una
   línea que dice qué hace cada una. La seleccionada se marca con el color de acento además del propio botón de radio:
   el radio es lo que funciona sin CSS y sin JavaScript, el borde es lo que se ve de un vistazo en el teléfono. */
.opciones { display: flex; flex-direction: column; gap: 8px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--accent); }
.opcion input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin-top: 1px; }
.opcion > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.opcion b { font-size: 14px; font-weight: 700; }
.opcion small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.opcion:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tres respuestas a una sola pregunta, en una fila: cabe en el ancho de un teléfono y no esconde ninguna. */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.seg label { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 9px 4px; border-radius: 9px; font-size: 12px; line-height: 1.25; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg label:has(input:checked) { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 2px var(--accent); font-weight: 600; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- el acceso, en el diseño de ahora (tarea 60, punto 20a) ---------- */
/* Entrar a Lía desde un enlace suyo y aterrizar en algo que no se parece a Lía es la peor primera impresión posible,
 * y encima hace dudar de si el enlace era de verdad. Es la misma caja de las demás pantallas, sin barra de abajo:
 * aquí todavía no hay sesión, así que no hay a dónde navegar. */
.acceso { justify-content: flex-start; gap: 18px; }
.acceso-marca { font-family: var(--font-title); font-weight: 700; font-size: 26px; color: var(--text); text-decoration: none; }
.acceso-marca span { color: var(--accent); }
.acceso h1 { font-size: 26px; line-height: 1.15; margin: 0; }
.acceso-lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.acceso-fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
/* Regla 44: un enlace no se disfraza de nota gris. «Olvidé mi contraseña» es una salida que alguien está buscando. */
.acceso-fine a { display: inline-block; padding: 8px 4px; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.acceso-form { display: flex; flex-direction: column; gap: 12px; }
.acceso-grid { display: flex; flex-direction: column; gap: 12px; }

/* Los campos: alto de dedo y 16 px de letra, que es lo que evita que el iPhone haga zoom al tocarlos. */
.acceso .f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.acceso .f input, .acceso .f select {
  height: 52px; box-sizing: border-box; width: 100%;
  border: 1px solid var(--line-strong); border-radius: 14px; background: transparent;
  color: var(--text); font-family: inherit; font-size: 16px; padding: 0 14px;
}
.acceso .f input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.acceso .code-input { text-align: center; letter-spacing: .5em; font-size: 24px !important; font-weight: 700; }

/* Ver la contraseña: el ojo va DENTRO del campo, no al lado, o el campo se encoge en un teléfono. */
.acceso .pass-wrap { position: relative; display: block; }
.acceso .pass-wrap input { padding-right: 52px; }
.acceso .pass-ojo {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer;
}

/* Los avisos del acceso: el color nunca es la única señal, siempre llevan su texto. */
.acceso-error, .acceso-ok, .acceso-aviso {
  margin: 0; display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.5;
}
.acceso-error { border-color: var(--bad, var(--warn)); color: var(--bad, var(--warn)); }
.acceso-ok { border-color: var(--ok); color: var(--ok); }
.acceso-aviso { border-color: var(--warn); color: var(--warn); flex-wrap: wrap; }

/* Regla 44: lo que se toca se ve tocable. Estos son enlaces de texto a propósito —son salidas, no la acción— pero
 * con su peso y su área de toque, no letra gris perdida al final de la pantalla. */
.acceso-cambio, .acceso-acts { margin: 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.acceso-acts { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acceso-cambio a, .acceso-acts a, .acceso-acts button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  border: 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--accent); cursor: pointer;
}
.acceso .or { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.acceso .or::before, .acceso .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.acceso-pie { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.acceso-legal { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.acceso-legal a { color: var(--muted); }

/* ---------- Compras: cajas que abren y filtros que filtran aquí mismo (tarea 60, puntos 30, 31, 34, 35 y 44) ---------- */
/* Regla 44: lo que se toca se ve tocable. Estos eran enlaces de texto y un número suelto. */
.caja-abre {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 16px;
  background: var(--card); color: var(--text); text-decoration: none;
}
.caja-abre.is-abierta { border-color: var(--accent); background: var(--card); }
.caja-abre-n { font-family: var(--font-title); font-size: 22px; font-weight: 700; line-height: 1; }
.caja-abre-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.2; }
.caja-abre svg { flex: none; color: var(--muted); transition: transform .18s ease; }
.caja-abre.is-abierta svg { transform: rotate(180deg); color: var(--accent); }

/* Los filtros: una fila que se desliza si no cabe, nunca recortada ni apilada en dos renglones. */
.filtros { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.filtro {
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card);
  color: var(--text); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
/* Lo elegido, con el color de la función y no en negro (tanda 1.9.15, punto 5). */
.filtro.activo { border: 2px solid var(--accent); background: var(--card); color: var(--text); font-weight: 600; }
.filtro:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Punto 54 · «De parte de»: elegir tocando una persona. La marcada se ve marcada sin JavaScript, y cada opción tiene
   fondo y borde propios, nunca texto suelto (regla 44). */
/* **Tanda 1.9.1, punto 27: una pastilla no se corta, salta de renglón.** En las capturas del 1 oct se leía «Otra
   persor»: con `white-space: nowrap` y el contenedor estrecho, el texto se recortaba a media palabra y quedaba una
   opción que no se puede leer ni, por tanto, elegir. Ahora el texto puede partirse y la pastilla crece hacia abajo. */
.chip-r {
  position: relative; flex: 0 1 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card);
  color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer;
  max-width: 100%; text-align: center; overflow-wrap: anywhere;
}
.chip-r input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Lo elegido, con el color de la función y no en negro (tanda 1.9.15, punto 5): era la pastilla de «De parte de». */
.chip-r:has(input:checked) { border: 2px solid var(--accent); background: var(--card); color: var(--text); font-weight: 600; }
.chip-r:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tarea 66 · una opción que se elige tocando: fila entera tocable, con fondo y borde, y la marcada se ve marcada
   sin JavaScript (regla 44). El número grande a la izquierda es el nivel. */
.opcion-grande {
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); cursor: pointer;
}
.opcion-grande input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion-grande:has(input:checked) { border: 2px solid var(--accent); padding: 13px; }
.opcion-grande:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.opcion-n {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-strong); font-family: var(--font-title); font-weight: 700; font-size: 15px;
}
.opcion-grande:has(input:checked) .opcion-n { background: var(--accent-btn); border-color: var(--accent-btn); color: var(--on-btn); }

/* Una fila con algo que encender o apagar: tocable de lado a lado, no solo en la casilla. */
.fila-toque {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer;
}
.fila-toque:first-of-type { border-top: 0; }

/* Tarea 66 · un documento largo para leer (términos, aviso de privacidad) con los tokens de ahora. */
.doc { display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; line-height: 1.6; color: var(--text); text-align: left; }
.doc h1 { font-family: var(--font-title); font-size: 24px; line-height: 1.15; margin: 0; }
.doc h2 { font-family: var(--font-title); font-size: 17px; line-height: 1.25; margin: 10px 0 0; }
.doc p { margin: 0; }
.doc ul { list-style: disc; padding-left: 20px; margin: 0; }
.doc ol { list-style: decimal; padding-left: 20px; margin: 0; }

/* ---------- Punto 43 · archivar y eliminar, en un toque ----------
   Las dos acciones se abren deslizando la tarjeta a la izquierda o tocando «⋯». Las dos abren lo mismo: el
   deslizamiento es el atajo del teléfono y el botón es lo que hace que esto exista para todos. */
.compra-fila { position: relative; touch-action: pan-y; }
.acc-compra { position: relative; flex: none; }
.acc-abre {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; cursor: pointer;
  list-style: none; border: 1px solid var(--line-strong); background: var(--card);
  color: var(--muted); font-size: 16px; line-height: 1;
}
.acc-abre::-webkit-details-marker { display: none; }
.acc-compra[open] .acc-abre { background: var(--soft); border-color: var(--line-strong); color: var(--text); }
/* B6 de la 1.9.22 · el menú va POR ENCIMA de la barra de abajo (z-index 30): en «Revisa tu compra» se abría debajo de
   ella y «Eliminar» quedaba pegado a «Configuración». */
.acc-botones {
  position: absolute; right: 0; top: 38px; z-index: 40; display: flex; gap: 6px; padding: 8px;
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .45);
}
/* Una compra que se va de la lista: se encoge en su sitio en vez de desaparecer de golpe. */
.compra-fila.se-va { transition: transform .18s ease, opacity .18s ease; transform: translateX(-16px); opacity: 0; }

/* El aviso de «Deshacer» con su cuenta regresiva de 5 s, que Marquecho aprobó. El círculo se vacía solo.
 *
 * **Revisión de Cowork, 1 oct (punto 3): es una barra, no una tarjeta.** Era una caja centrada de ancho mínimo, y el
 * texto le cabía en cinco renglones encima de la tarjeta de la compra. Ahora ocupa todo el ancho y va pegada arriba de
 * la barra de navegación, con las tres cosas en un renglón: lo que pasó, cuánto queda para deshacerlo y el botón. El
 * texto no parte renglón: si no cupiera, se recorta con puntos suspensivos, porque lo que no puede perderse de vista
 * es el botón. */
.deshacer {
  position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--line-strong);
  background: var(--text); color: var(--bg); font-size: 14px;
  box-shadow: 0 -18px 40px -28px rgba(0, 0, 0, .6);
}
.deshacer b { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deshacer button {
  flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 10px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.deshacer-reloj {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(var(--bg) var(--vuelta, 100%), rgba(255, 255, 255, .25) 0);
  transition: none;
}
/* En computadora la barra de navegación está arriba, así que aquí abajo no hay nada que esquivar. */
@media (min-width: 720px) {
  .deshacer { bottom: 0; }
}

/* ---------- El aviso de «Datos de ejemplo · demostración» ---------- */
/*
 * Revisión de Cowork, 30 sep (punto 41.B5): salía pegado al borde izquierdo y del tamaño del texto normal, compitiendo
 * con el contenido. Su estilo vivía en lia.css, que el diseño nuevo ya no carga (tarea 66), así que aquí se queda sin
 * nada: un <p> a 16px contra el margen. Es un aviso al pie, no un renglón de la pantalla: letra chica, gris y con los
 * 16 px de margen que tiene todo lo demás.
 */
.demo-foot {
  margin: 4px 16px 12px; font-size: 12px; line-height: 1.3; color: var(--muted);
}

/* ---------- Compras, con el estilo de la Parte 2 (revisión del 1 oct) ----------
 * El ícono de cada modo va dentro de su mosaico; el mosaico ya trae el color, así que el `svg` deja de pintarse
 * aparte. Todo lo demás del modo —el nombre, el detalle, el borde, el foco— se queda como estaba.
 */
.caja-modo .ico-mosaico svg { color: inherit; }

/* «¿Cuanto hago por mi cuenta?» · Ventaja y Lia hara (C2, 3 oct 2026). A la vista en el nivel marcado; en los
   otros, al tocarlos: tocar un nivel marca su radio, y el radio marcado es lo que abre sus dos renglones. */
.nivel-mas { display: none; flex-direction: column; gap: 2px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.nivel-mas small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.nivel-mas small b { color: var(--text); font-weight: 600; }
.opcion-grande:has(input:checked) .nivel-mas { display: flex; }
@supports not selector(:has(*)) { .opcion-grande.activa .nivel-mas { display: flex; } }

/* Un archivo ya elegido se nota (C5, 3 oct 2026): el nombre en el color del texto y, debajo, la paloma con
   «Listo para leer». Antes salia chico y gris, igual que la instruccion, y parecia que no se habia subido nada. */
.drop.is-cargado { border-style: solid; border-color: var(--ok); }
.drop .is-cargado { color: var(--text); font-weight: 600; font-size: 14px; }
.archivo-listo { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--ok); }

/* Las pastillas de una fila que se desplaza no se encogen (D3 de la 1.9.13; Cowork, capturas de la 1.9.12). En «De
   parte de» los nombres salian partidos letra por letra: la fila no envuelve, la pastilla si podia encogerse y su
   texto se parte «donde sea». Dentro de `.filtros` una pastilla mide lo que mide su texto, igual que `.filtro`. */
.filtros > .chip-r { flex: none; white-space: nowrap; overflow-wrap: normal; }

/* «La llenas tú» no se parte en dos renglones («La» / «llenas tú»): se vio en la captura 05 de la 1.9.18. */
[data-la-llenas-tu] { white-space: nowrap; }