/* ═══════════════════════════════════════════════════════════════════════════
   SELLO — hoja propia, deliberadamente aparte del CSS de las tiendas.

   ⚠ NO IMPORTA NADA DE `assets/comun/tienda.css` NI DE NINGÚN TEMA. El sello
   tiene que verse IGUAL en las mil tiendas: si heredara la piel del cliente,
   cada comercio tendría un sello distinto y el comprador no podría reconocer
   ninguno. Un sello que cada uno maquilla no acredita nada.

   ⚠ Sin fuentes externas ni nada de otro dominio: la CSP de esta página es
   `default-src 'self'` y un recurso de fuera no cargaría.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sl-tinta:   #16202b;
  --sl-suave:   #5b6b7b;
  --sl-linea:   #e2e8ee;
  --sl-fondo:   #f4f6f9;
  --sl-papel:   #fff;
  --sl-ok:      #157347;
  --sl-ok-suave:#e8f4ed;
  --sl-mal:     #a4262c;
  --sl-mal-suave:#fbecec;
  --sl-espera:  #8a6d1f;
  --sl-espera-suave:#fdf5e2;
}

* { box-sizing: border-box; }

.sl-cuerpo {
  margin: 0;
  padding: 24px 16px 56px;
  background: var(--sl-fondo);
  color: var(--sl-tinta);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sl-caja {
  max-width: 720px;
  margin: 0 auto;
  background: var(--sl-papel);
  border: 1px solid var(--sl-linea);
  border-radius: 14px;
  overflow: hidden;
}

/* ── la marca de quien acredita ───────────────────────────────────────── */
/* ⚠ Sola y arriba del todo: quien llega viene de un distintivo y lo primero
   que tiene que reconocer es QUIÉN acredita. Pegada al nombre de la tienda,
   las dos marcas se leían como una sola. */
.sl-marca { padding: 20px 24px 4px; }
.sl-marca img { display: block; height: 42px; width: auto; }

/* ── cabecera ─────────────────────────────────────────────────────────── */
.sl-cab { display: flex; gap: 14px; align-items: center; padding: 12px 24px 22px; border-bottom: 1px solid var(--sl-linea); }
.sl-cab-sola { padding-top: 4px; }
.sl-cab h1 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.sl-dominio { margin: 2px 0 0; color: var(--sl-suave); font-size: .92rem; word-break: break-all; }
.sl-escudo { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.sl-escudo.sl-ok { color: var(--sl-ok); background: var(--sl-ok-suave); }
.sl-escudo.sl-no { color: var(--sl-suave); background: var(--sl-fondo); }

/* ── estado ───────────────────────────────────────────────────────────── */
.sl-estado { padding: 18px 24px; border-bottom: 1px solid var(--sl-linea); }
.sl-estado.sl-e-vigente     { background: var(--sl-ok-suave); }
.sl-estado.sl-e-suspendido  { background: var(--sl-mal-suave); }
.sl-estado.sl-e-retirado    { background: var(--sl-mal-suave); }
.sl-estado.sl-e-en_revision { background: var(--sl-espera-suave); }
.sl-etiqueta { margin: 0; font-size: 1.05rem; }
.sl-fechas, .sl-motivo { margin: 6px 0 0; font-size: .93rem; color: var(--sl-suave); }
.sl-desde { display: block; }
.sl-codigo { margin: 10px 0 0; font-size: .88rem; color: var(--sl-suave); }
.sl-codigo code {
  /* El código se lee por teléfono y se teclea: espaciado y sin ambigüedad. */
  font: .95rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em; background: rgba(0,0,0,.05); padding: 3px 6px; border-radius: 5px;
}

/* ── bloques ──────────────────────────────────────────────────────────── */
.sl-bloque { padding: 22px 24px; border-bottom: 1px solid var(--sl-linea); }
.sl-bloque h2 { margin: 0 0 12px; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sl-suave); }
.sl-bloque p { margin: 0 0 10px; }
.sl-bloque p:last-child { margin-bottom: 0; }
.sl-nota { font-size: .9rem; color: var(--sl-suave); }

.sl-datos { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 6px 16px; margin: 0; }
.sl-datos dt { color: var(--sl-suave); font-size: .9rem; }
.sl-datos dd { margin: 0; overflow-wrap: anywhere; }

/* ── comprobaciones ───────────────────────────────────────────────────── */
.sl-checks { list-style: none; margin: 0; padding: 0; }
.sl-c { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sl-linea); }
.sl-c:first-child { border-top: 0; }
.sl-marca { flex: 0 0 22px; text-align: center; font-weight: 700; }
.sl-c-ok  .sl-marca { color: var(--sl-ok); }
.sl-c-falla .sl-marca { color: var(--sl-mal); }
.sl-c-txt { display: block; }
.sl-c-txt strong { display: block; font-weight: 600; }
.sl-c-est, .sl-c-det, .sl-c-fecha { display: block; font-size: .87rem; color: var(--sl-suave); }
.sl-c-falla .sl-c-est { color: var(--sl-mal); }

/* ── opiniones ────────────────────────────────────────────────────────── */
.sl-media { font-size: 1.1rem; }
.sl-media strong { font-size: 1.6rem; }
.sl-media span { color: var(--sl-suave); font-size: .93rem; margin-left: 6px; }
.sl-opiniones { list-style: none; margin: 14px 0 12px; padding: 0; }
.sl-opiniones li { padding: 12px 0; border-top: 1px solid var(--sl-linea); }
.sl-op-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 4px; }
.sl-op-est { color: #b8860b; letter-spacing: .06em; }
.sl-op-quien { font-weight: 600; }
.sl-op-fecha { color: var(--sl-suave); font-size: .85rem; }
.sl-op-txt { margin: 0; }

/* ── límites y pie ────────────────────────────────────────────────────── */
.sl-limites { background: var(--sl-fondo); font-size: .93rem; }
.sl-pie { padding: 18px 24px; font-size: .87rem; color: var(--sl-suave); }
.sl-pie p { margin: 0 0 4px; }
.sl-pie a { color: inherit; }

.sl-vacia { padding: 48px 24px; text-align: center; }
.sl-vacia h1 { font-size: 1.15rem; margin: 0; }

/* ── móvil ────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .sl-cuerpo { padding: 12px 10px 40px; }
  .sl-cab, .sl-estado, .sl-bloque, .sl-pie { padding-left: 16px; padding-right: 16px; }
  /* Dos columnas de 120 px no caben; los datos pasan a lista. */
  .sl-datos { grid-template-columns: 1fr; gap: 0; }
  .sl-datos dd { margin: 0 0 10px; }
}