/* ==========================================================================
   TCG Doczel v2 · Piezas de las páginas de la app
   Lo que es propio de las páginas (barra superior, buscador de la página
   Buscar…) y no un componente reutilizable del sistema de diseño.
   Depende de tokens.css y components.css. Mobile-first. Solo var(), sin hex.
   ========================================================================== */

/* Contenido centrado en pantallas anchas; en el celular ocupa todo el ancho */
.pagina {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-bottom: var(--space-12);
}

/* Barra superior ------------------------------------------------------------ */

.barra {
  display: flex;
  align-items: center;
  max-width: var(--layout-max-width);
  min-height: var(--tap-target-min);
  margin-inline: auto;
  padding-top: max(var(--space-3), env(safe-area-inset-top));
}
.barra__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: var(--tap-target-min);
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-tight);
  text-decoration: none;
}
.barra__marca span { color: var(--color-primary-text); }


/* Pie: aviso de derechos de las imágenes de cartas */
.pie {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding: var(--space-6) 0 max(var(--space-6), env(safe-area-inset-bottom));
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.pie p { margin: 0; }


/* Página Buscar (design-system/tcg-doczel/pages/resultados.md) --------------- */

.buscador { margin-bottom: var(--space-4); }

.buscador__titulo {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

/* El campo queda pegado arriba al bajar por los resultados. Ocupa también los
   márgenes laterales y lleva el color de fondo, para que las cartas no se
   vean pasar por detrás. */
.buscador__fijo {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  margin-inline: calc(-1 * var(--layout-gutter));
  padding: var(--space-2) var(--layout-gutter);
  background: var(--color-bg);
}

.buscador__ayuda {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.buscador__ayuda strong { color: var(--color-text); font-weight: var(--font-weight-bold); white-space: nowrap; }

.ejemplos { margin-bottom: var(--space-6); }
.ejemplos[hidden] { display: none; }
.ejemplos__titulo {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.resultados__estado {
  min-height: 1.5em;   /* reserva la línea: los resultados no saltan cuando aparece el texto */
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

/* Sin resultados o error: ocupa toda la fila de la grilla */
.tcg-card-grid > .search-empty {
  grid-column: 1 / -1;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
}
.search-empty p { margin: 0 0 var(--space-3); }
.search-empty p:last-child { margin-bottom: 0; }

/* Mientras no exista la página de detalle, la tarjeta no es un enlace: sin
   efecto de hover ni de toque, para no prometer algo que no pasa. */
.tcg-card--fija { cursor: default; }
@media (hover: hover) {
  .tcg-card--fija:hover { box-shadow: var(--shadow-card); transform: none; }
}
.tcg-card--fija:active { transform: none; }

/* Nombre en español, solo cuando es distinto del inglés */
.tcg-card__alt {
  margin: 0 var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tarjeta de carga: mismo alto que una tarjeta real */
.tcg-card__skeleton-line { margin: 0 var(--space-1); }
.tcg-card__skeleton-line--corta { width: 55%; }
.tcg-card__skeleton-line--larga { width: 80%; }


/* Cuentas: /entrar, /admin, "Sin permiso" ------------------------------------ */

.acceso {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 26rem;
  margin: var(--space-4) auto 0;
}
.acceso__titulo {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.acceso__texto { margin: calc(-1 * var(--space-2)) 0 0; color: var(--color-text-muted); }
.acceso__texto strong { color: var(--color-text); overflow-wrap: anywhere; }
.acceso__acciones { display: flex; flex-direction: column; gap: var(--space-2); }

.formulario { display: flex; flex-direction: column; gap: var(--space-4); }

.campo { display: flex; flex-direction: column; gap: var(--space-2); }
.campo__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.campo__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-md);   /* 16px: iOS no hace zoom al enfocar */
  appearance: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.campo__input:hover { border-color: var(--color-text-muted); }
.campo__input:focus-visible { border-color: var(--color-primary-text); }

/* Aviso: ícono + texto, no solo color. El rojo de "baja" es el único rojo del sistema y
   cumple 4.83:1 sobre blanco; aquí solo pinta el ícono y el borde, el texto va en negro. */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
}
.aviso p { margin: 0; }
.aviso .icon { margin-top: 0.0625rem; }
.aviso--error { border-color: var(--color-price-down); }
.aviso--error .icon { color: var(--color-price-down); }
.aviso--exito { border-color: var(--color-primary); }
.aviso--exito .icon { color: var(--color-primary-text); }
.aviso--pregunta { border-color: var(--color-border-control); }
.aviso--pregunta .icon { color: var(--color-primary-text); }
.aviso p + p { margin-top: var(--space-2); }
.aviso__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.campo__ayuda { margin: calc(-1 * var(--space-2)) 0 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.campo .campo__ayuda { margin-top: 0; }
select.campo__input { appearance: auto; padding-inline: var(--space-3); }   /* flecha nativa del sistema */
.campo__input--area { min-height: 5rem; padding-block: var(--space-3); resize: vertical; }


/* Administración: inventario y compras (Fase I) ------------------------------ */

/* Navegación entre secciones: chips; la página actual en verde, como un chip activo */
/* Como .chip-group: si no caben (pantallas de 320 px), se envuelven; nunca se cortan */
.subnav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.subnav .chip { padding-inline: var(--space-3); color: var(--color-text); }
.subnav .subnav__inicio { justify-content: center; width: var(--tap-target-min); padding: 0; }
.subnav .chip[aria-current="page"] {
  background: var(--color-primary-text);
  border-color: var(--color-primary-text);
  color: var(--color-text-on-primary);
}

.admin {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 36rem;
  margin: var(--space-4) auto 0;
}
.admin__encabezado { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.admin__titulo {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.admin__subtitulo { margin: var(--space-4) 0 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); }
.admin__nota { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.admin__acciones { display: flex; flex-direction: column; gap: var(--space-2); }
.admin__volver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  min-height: var(--tap-target-min);
  margin-top: calc(-1 * var(--space-3));
  color: var(--color-primary-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.admin .buscador { margin-bottom: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* Agregar, paso 1: la grilla de resultados usa todo el ancho (2 columnas a 375 px, 3 y 5 en
   pantallas más anchas: .tcg-card-grid en components.css) */
.admin--ancha { max-width: none; }
.buscador__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.buscador__lupa { width: 3.5rem; min-height: 3.5rem; padding: 0; }   /* mismo alto que el campo grande */
[data-ver-mas][hidden] { display: none; }   /* .btn--block pone display: flex, que le ganaría a [hidden] */

/* Tarjeta de la grilla de Agregar: el enlace elige la carta; debajo, "Imagen del catálogo" si no tiene */
.tcg-card__enlace { display: flex; flex-direction: column; gap: var(--space-1); color: inherit; text-decoration: none; }
.boton-imagen { min-height: var(--tap-target-min); font-size: var(--font-size-sm); }
.tcg-card .boton-imagen { margin: var(--space-2) var(--space-1) 0; padding-inline: var(--space-2); }
.ficha-mini .boton-imagen { margin-top: var(--space-2); }

/* Elegir archivo: el botón nativo del sistema (en el celular abre cámara o galería) */
.campo__archivo {
  width: 100%;
  min-height: var(--tap-target-min);
  padding: var(--space-3);
  border: var(--border-width) dashed var(--color-border-control);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--font-size-sm);
}
.campo__archivo:focus-visible { border-color: var(--color-primary-text); }

/* Carta sin imagen en TCGdex: el mismo recuadro 63:88, con lo que permite reconocerla */
.card-img--texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3);
  text-align: center;
  overflow-wrap: anywhere;
}
.card-img__nombre { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-tight); }
.card-img__numero { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.card-img__set { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.card-img__aviso {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}
.admin .resultados__estado { margin: 0; }
a.search-suggestion { color: inherit; text-decoration: none; }
a.search-suggestion:focus-visible { background: var(--color-surface-muted); }

/* Dos o tres campos cortos lado a lado (cantidad + idioma, costo + precio) */
.campos-2, .campos-3 { display: grid; gap: var(--space-3); }
.campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-solo-gradeada][hidden], [data-solo-condicion][hidden] { display: none; }

/* Casilla con área táctil de 44 px */
.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.check input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-primary-text); }

/* Carta elegida: imagen + nombre + número y set */
.ficha-mini { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.ficha-mini__img { width: 4.5rem; }
.ficha-mini__nombre { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-snug); }
.ficha-mini__meta { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Filtros de la lista */
.filtros { display: flex; flex-direction: column; gap: var(--space-2); }
.filtros__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }

/* Lista del inventario: una fila por registro, en una tarjeta blanca */
.inv-lista {
  margin: 0;
  padding: 0 var(--space-3);
  list-style: none;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
}
.inv-lista li + li { border-top: var(--border-width) solid var(--color-border); }
.inv-fila { align-items: start; padding-block: var(--space-3); }
.inv-fila .price-row__thumb { width: 3rem; }
.inv-fila__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.inv-fila__sin-costo { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text); }
.inv-fila__sin-costo::before { content: "• "; color: var(--color-action-decorative); }

/* Editar: mover algunas copias a otro estado (una tarjeta aparte del formulario principal) */
.mover {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
}
.mover__titulo { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); }

/* Lotes */
.lotes { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.lote {
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.lote__titulo { margin: 0; font-weight: var(--font-weight-extrabold); }
.lote__desc { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.lote__alerta { margin: var(--space-3) 0 0; font-size: var(--font-size-sm); }
.lote__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-target-min);
  margin-top: var(--space-2);
  color: var(--color-primary-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; }
.datos dt { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.datos dd { margin: 0; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }

/* Imagen del catálogo: "Cartas sin imagen" y /admin/cartas/<id>/imagen --------- */

/* La lista usa un poco más de ancho que los formularios: 2 columnas desde 64rem */
.admin--media { max-width: 64rem; }
.sin-imagen__contador { margin: var(--space-1) 0 0; font-size: var(--font-size-lg); }
.sin-imagen__contador strong { font-weight: var(--font-weight-extrabold); font-variant-numeric: tabular-nums; }
kbd {
  padding: 0 var(--space-1);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.cargas { display: grid; gap: var(--space-3); }
@media (min-width: 64rem) { .cargas[data-modo="lista"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Una carta: arriba la zona (63:88) y sus datos; abajo, a todo el ancho, los enlaces de búsqueda
   (a 375 px caben de a dos por fila) y la carga */
.carga {
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  scroll-margin-block: var(--space-16);
}
.carga.is-arrastrando { border-color: var(--color-primary); box-shadow: 0 0 0 var(--focus-ring-width) var(--color-primary); }
.carga__form {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  grid-template-areas: "zona datos" "buscar buscar" "acciones acciones";
  gap: var(--space-3);
  align-items: start;
}
.carga__zona { grid-area: zona; width: 6.5rem; cursor: pointer; border: var(--border-width) dashed var(--color-border-control); }
.carga__zona:hover { border-color: var(--color-primary-text); }
.card-img--vista .card-img__img { object-fit: contain; background: var(--color-surface); }
.carga__zona-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-align: center;
}
/* .card-img__img y .aviso ponen display: block / flex, que le ganarían a [hidden] */
.carga__zona-texto[hidden], .carga .card-img__img[hidden], .carga .aviso[hidden] { display: none; }
.carga__datos { grid-area: datos; min-width: 0; }
.carga__nombre { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-snug); overflow-wrap: anywhere; }
.carga__meta { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.carga__tag { margin-top: var(--space-2); }
.carga__buscar { grid-area: buscar; min-width: 0; }
.carga__buscar-titulo { margin: 0 0 var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-muted); }
.carga__enlaces { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.carga__enlace { min-height: 2.25rem; padding-inline: var(--space-3); }
.carga__acciones { grid-area: acciones; display: flex; flex-direction: column; gap: var(--space-3); }
.carga__elegir { cursor: pointer; }
.carga__elegir:focus-within { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }
.carga__estado { margin: 0; min-height: 1.25rem; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.carga__estado:empty { min-height: 0; }
.carga__error { color: var(--color-text); font-weight: var(--font-weight-bold); }
.carga__error::before { content: "✕ "; color: var(--color-price-down); }
.carga .aviso .check { margin-top: var(--space-2); }
.carga__aviso + .carga__aviso { margin-top: var(--space-3); }

/* Más ancho: la carga va al lado de los enlaces */
@media (min-width: 40rem) {
  .carga__form { grid-template-columns: 8rem minmax(0, 1fr); grid-template-areas: "zona datos" "zona buscar" "zona acciones"; }
  .carga__zona { width: 8rem; }
}

.paginas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.paginas:empty { display: none; }


/* Vitrina pública: /tienda/<alias> y la ficha de cada copia (Fase V) ------------ */

/* .btn pone display: inline-flex, que le ganaría a [hidden]: copiar.js los muestra */
[data-copiar][hidden], [data-copiar-texto][hidden] { display: none; }
.copiar { display: flex; flex-direction: column; gap: var(--space-1); }
.copiar__estado { font-size: var(--font-size-sm); color: var(--color-primary-text); font-weight: var(--font-weight-bold); }
.copiar__estado:empty { display: none; }

.vitrina { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.vitrina__encabezado { display: flex; flex-direction: column; gap: var(--space-1); }
.vitrina__etiqueta {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.vitrina__titulo {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  overflow-wrap: anywhere;   /* un alias largo sin espacios no ensancha la página */
}
.vitrina__presentacion { margin: var(--space-1) 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.vitrina__cuenta { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.vitrina__filtros { display: flex; flex-direction: column; gap: var(--space-2); }
.vitrina__selects { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
@container app (min-width: 560px) { .vitrina__selects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* La rareza puede ser larga ("Special illustration rare"): una línea, cortada con "…" */
.tcg-card__media .vitrina__rareza {
  max-width: calc(100% - 2 * var(--space-2));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.vitrina__cantidad { margin: 0; }

.paginacion { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); }
.paginacion > :last-child { justify-self: end; }
.paginacion__actual { font-size: var(--font-size-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Ficha de una copia: carta grande, centrada (~70 % del ancho, máx. 248 px: detalle-carta.md), tal cual,
   sin efecto holo (una carta que se vende se ve como es: MASTER, "Efecto holográfico") */
.ficha { display: flex; flex-direction: column; gap: var(--space-3); max-width: 36rem; margin: var(--space-4) auto 0; }
.ficha__volver { margin-top: 0; }
.ficha__carta { display: flex; justify-content: center; padding-bottom: var(--space-2); }
.ficha__carta .card-img { width: min(15.5rem, 70%); }
.ficha__nombre {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.ficha__meta { margin: calc(-1 * var(--space-2)) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ficha__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ficha__tags:empty { display: none; }
.ficha__datos { margin: 0; }
.ficha__mensaje { min-height: 0; font-size: var(--font-size-md); resize: none; }
.ficha__acciones { display: flex; flex-direction: column; gap: var(--space-2); }
.ficha__acciones .copiar .btn { width: 100%; }

/* Lista del inventario: precio y estado en la misma fila (sin abrir Editar) */
.inv-item { padding-bottom: var(--space-3); }
.inv-rapido { display: flex; flex-direction: column; gap: var(--space-2); }
.inv-rapido__aviso { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.inv-rapido__aviso::before { content: "• "; color: var(--color-action-decorative); }
.inv-rapido details { border-radius: var(--radius-sm); }
.inv-rapido summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  color: var(--color-primary-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.inv-rapido__cuerpo { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) 0; }
.inv-rapido__precio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; }
.inv-rapido__estados { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.inv-rapido__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* Acciones secundarias de cada fila: más compactas (siguen con 44 px de alto táctil) */
.inv-rapido .btn { padding-inline: var(--space-3); font-size: var(--font-size-sm); }

/* Mi tienda (panel) */
.tienda-enlace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }