/* **Lo común de las cinco secciones de catálogo** —Electrodomésticos,
     Recambios, Ropa, Droguería y Coches y motos—, en un solo sitio
     (03/11/2026). Estaba copiado palabra por palabra en las cinco páginas: se
     veían iguales, pero el día que se tocara una se habrían separado. Se sirve
     como `/comun/catalogo.css` (vista `comun`, caché de un año) o incrustado
     con `INCRUSTAR_COMUN`, igual que lo común de `base.html`; **solo lo cargan
     esas cinco**, que `#shops`, `#bar` o `#grid` existen también en Buscar,
     «Mi lista» y Ofertas con otras reglas. Lo de cada página va detrás, en su
     `<style>`, y gana: Coches y motos cambia aquí el ancho de la rejilla y el
     de la introducción. `test_comun_aparte.CatalogoTests` falla si una de las
     cinco vuelve a declarar una regla que ya está aquí. */

  /* La fila de «Tiendas» y el 📍: cerrados comparten línea, y el abierto
     ocupa la fila en el móvil, que allí el panel empuja en vez de flotar. */
  #shops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
  #cp { display: contents; }
  @media screen and (max-width: 720px) {
    #f input[type=search] { flex: 1 1 0; min-width: 0; }
    #f button { flex: 0 0 auto; }
    #shops { margin-top: 8px; }
    #shops .dd { flex: 0 1 auto; }
    #shops .dd[open] { flex: 1 1 100%; }
  }
  /* «Para» (Recambios y Coches y motos): pastillas, la elegida rellena. */
  #para { display: inline-flex; gap: 4px; }
  #para .chip-btn { padding: 5px 11px; font-size: 12.5px; background: var(--card);
    color: var(--text); border: 1px solid var(--line); border-radius: 999px; }
  #para .chip-btn[aria-pressed="true"] { background: var(--accent); color: var(--sobre-accent);
    border-color: var(--accent); }
  #bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
  #bar #count { font-weight: 600; }
  #bar .filtro { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
  .intro { color: var(--muted); font-size: 14px; margin: 0 0 14px; max-width: 70ch; }

  /* **Una tarjeta es la misma cosa en varias tiendas** (un modelo, una pieza,
     una prenda, un código de barras): la foto y el nombre una vez y debajo
     cada tienda con su precio, de la más barata a la más cara. */
  #grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  article.modelo .nombre { font-size: 14px; line-height: 1.3; margin: 0; }
  article.modelo .cod { font-size: 11.5px; color: var(--muted); }
  article.modelo .reac { font-size: 11.5px; font-weight: 700; color: var(--aviso); }
  article.modelo .desde { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  article.modelo .desde b { font-size: 20px; }
  article.modelo .desde .n { font-size: 12.5px; color: var(--muted); }
  article.modelo .ahorro { font-size: 12.5px; color: var(--ok); font-weight: 600; }
  .ofertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
    border-top: 1px solid var(--line); padding-top: 8px; }
  /* **Una tienda, una línea**: el precio es el enlace a su web y no hay un
     «Ver» aparte, que era lo que mandaba el 📈 a la línea de abajo. */
  .ofertas li { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
  .ofertas li .shop { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ofertas li .zona { font-size: 12px; cursor: help; }
  .ofertas li .prec { font-weight: 700; color: inherit; text-decoration: none; }
  .ofertas li .prec:hover { text-decoration: underline; color: var(--accent); }
  .ofertas li .antes { color: var(--muted); text-decoration: line-through; font-size: 12px; }
  .ofertas li .hist { margin-left: 0; }
  .ofertas li.mejor .prec { color: var(--ok); }
  /* La tienda que no te lo envía ni tiene tienda cerca va apagada, **sin
     `opacity`**: bajaba el contraste a 2,4 (axe). El texto en `--muted`. */
  .ofertas li.lejos .shop, .ofertas li.lejos .prec, .ofertas li.lejos .antes { color: var(--muted); }
  #mas { display: block; margin: 14px auto 0; }

  /* «Búscalo también en…»: las tiendas que no dejan consultar sus precios a
     un programa. Un enlace a su buscador, no una tarjeta: de ellas no hay
     precio que enseñar. */
  #fuera { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--card); font-size: 13.5px; }
  #fuera > summary { cursor: pointer; font-weight: 600; }
  #fuera[open] > summary { margin-bottom: 8px; }
  #fuera p { margin: 0 0 8px; color: var(--muted); }
  #fuera .enlaces { display: flex; flex-wrap: wrap; gap: 6px; }
  #fuera a { display: inline-flex; padding: 5px 12px; border: 1px solid var(--line);
    border-radius: 999px; text-decoration: none; color: var(--text); }
  #fuera a:hover { border-color: var(--accent); color: var(--accent); }

  /* **En el móvil la foto va pequeña, a la izquierda.** A una columna y con la
     foto cuadrada, cada tarjeta ocupaba la pantalla entera y la lista de
     tiendas —que es lo que se viene a comparar— quedaba debajo del borde. */
  @media screen and (max-width: 720px) {
    #grid { grid-template-columns: 1fr; }
    article.modelo { display: grid; grid-template-columns: 92px 1fr; column-gap: 12px;
      row-gap: 4px; align-items: start; }
    article.modelo .ph { grid-row: span 5; }
    article.modelo .ofertas { grid-column: 1 / -1; }
    article.modelo .seguirbox { grid-column: 2; }
  }
  /* El recuento y el estado de cada tienda en el selector. */
  .ddrow .estado { margin-left: auto; font-size: 11px; color: var(--muted); }
  .ddrow .estado.mal { color: var(--err); }