/* Identidad de marca del panel de Wallet Club.
   Los tokens replican los de /styles.css (la landing) para que el panel y el
   sitio se lean como un mismo producto. No modifiques /styles.css desde aquí. */

:root {
  color-scheme: light;
  --ivory: #f6f2ea;
  --mist: #dee4e1;
  --sand: #e7d8c8;
  --mineral: #64748b;
  --terracotta: #b97866;
  --terracotta-dark: #8d5548;
  --terracotta-deep: #78483e;
  --graphite: #36424d;
  --graphite-soft: #52606b;
  --white: #fdfcf9;
  --line: rgb(54 66 77 / 16%);
  --radius-surface: 20px;
  --radius-control: 12px;
  --shadow-surface: 0 28px 70px rgb(54 66 77 / 18%);
  --shadow-raised: 0 12px 30px rgb(54 66 77 / 10%);
  --error: #9a2c1c;
  --exito: #2f6b4f;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--ivory);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Debe ganarle a los `display` de autor (por ejemplo `button`), o el atributo
   `hidden` deja de ocultar y aparecen botones que la lógica ya apagó. */
[hidden] {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--terracotta-dark);
  text-underline-offset: 4px;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--terracotta-dark);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- cabecera */

.panel-header {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.panel-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  width: min(100% - 2.5rem, 68rem);
  min-height: 72px;
  margin-inline: auto;
  padding-block: 0.5rem;
}

.panel-marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.panel-marca img {
  width: 158px;
  height: auto;
}

.panel-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem clamp(0.6rem, 2vw, 1.5rem);
}

.panel-nav a,
.panel-salir {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.15rem;
  border: 0;
  background: transparent;
  color: var(--graphite);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease-out;
}

.panel-nav a:hover,
.panel-salir:hover {
  background: transparent;
  color: var(--terracotta-dark);
}

.panel-nav a[aria-current="page"] {
  color: var(--terracotta-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.panel-salir {
  color: var(--graphite-soft);
}

.panel-salir:disabled {
  cursor: wait;
  opacity: 0.6;
}

/* Cabecera de las pantallas sin sesión: solo el logotipo, centrado. */
.panel-header--marca .panel-header-inner {
  justify-content: center;
}

/* ------------------------------------------------------------------ layout */

main.panel {
  width: min(100% - 2.5rem, 34rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vh, 3.25rem) clamp(3rem, 8vh, 5rem);
}

main.panel--ancho {
  width: min(100% - 2.5rem, 52rem);
}

.panel-intro {
  margin-bottom: clamp(1.5rem, 3vh, 2rem);
}

.panel-eyebrow {
  margin: 0 0 0.5rem;
  color: var(--terracotta-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--graphite);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.6vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

h2 {
  margin: 0;
  color: var(--graphite);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.panel-sub,
.panel-nota {
  max-width: 62ch;
  margin: 0.75rem 0 0;
  color: var(--graphite-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

.panel-nota {
  font-size: 0.85rem;
}

.panel-superficie {
  padding: clamp(1.25rem, 3.5vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--white);
  box-shadow: var(--shadow-raised);
}

.panel-pie {
  margin: 1.5rem 0 0;
  color: var(--graphite-soft);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------- controles */

form {
  display: grid;
  gap: 1.1rem;
}

label {
  display: grid;
  gap: 0.4rem;
  color: var(--graphite);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Especificidad deliberadamente baja (un elemento) para que registro.css y
   cualquier hoja de página puedan afinar sus propios campos sin pelear. */
input,
select {
  width: 100%;
  min-height: 48px;
  padding: 0 0.9rem;
  border: 1px solid #b6c0c5;
  border-radius: var(--radius-control);
  background: var(--white);
  color: var(--graphite);
  font: inherit;
  font-weight: 400;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

/* Chevron dibujado con gradientes: un data: URI aquí lo bloquearía la CSP
   (`img-src 'self' blob:`), como detectó el test de qr-print. */
select {
  appearance: none;
  padding-right: 2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--graphite-soft) 50%),
    linear-gradient(135deg, var(--graphite-soft) 50%, transparent 50%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  cursor: pointer;
}

input::placeholder {
  color: #7b878f;
}

input:focus,
select:focus {
  border-color: var(--terracotta-dark);
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--terracotta-dark);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out;
}

button:hover {
  background: var(--terracotta-deep);
}

button:disabled {
  cursor: wait;
  opacity: 0.7;
}

button.secundario {
  border-color: #99a4ac;
  background: transparent;
  color: var(--graphite);
}

button.secundario:hover {
  border-color: var(--graphite);
  background: rgb(222 228 225 / 45%);
  color: var(--graphite);
}

/* Sin texto no reserva alto: si no, cada formulario arrastra huecos fantasma. */
.error {
  min-height: 0;
  margin: 0;
  color: var(--error);
  font-size: 0.85rem;
  font-weight: 500;
}

.error:not(:empty) {
  min-height: 1.25rem;
}

/* ----------------------------------------------------- campo de color vivo */

.campo-color {
  display: grid;
  gap: 0.6rem;
}

.campo-color-titulo {
  color: var(--graphite);
  font-size: 0.82rem;
  font-weight: 600;
}

.campo-color-fila {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* El bug reportado: la regla genérica de `input` aplastaba el selector de
   color hasta dejarlo en unos pocos píxeles. Aquí recupera su tamaño real. */
input[type="color"] {
  flex: none;
  width: 3.5rem;
  min-height: 0;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--white);
  cursor: pointer;
  transition: box-shadow 160ms ease-out;
}

input[type="color"]:hover {
  box-shadow: var(--shadow-raised);
}

input[type="color"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Igual que el selector de color: la regla genérica de `input` (100% de ancho,
   48px de alto) deformaría la casilla. */
.campo-casilla {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--graphite);
  font-size: 0.82rem;
  font-weight: 600;
}

.campo-casilla input[type="checkbox"] {
  flex: none;
  width: 1.15rem;
  min-height: 0;
  height: 1.15rem;
  padding: 0;
  accent-color: var(--terracotta-dark);
  cursor: pointer;
}

/* Misma convención que `input[type="color"]:disabled` unas líneas arriba, y
   por la misma razón: `not-allowed` y no el `wait` de los botones, porque una
   casilla deshabilitada aquí no está esperando a que termine nada, está
   apagada porque todavía no hay nada que alternar. Atenuar la ETIQUETA entera
   y no solo la caja es lo que hace visible el estado: el texto es casi todo lo
   que se ve del control. */
.campo-casilla:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.campo-casilla input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: calc(var(--radius-control) - 4px);
}

input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: calc(var(--radius-control) - 4px);
}

.campo-color-hex {
  color: var(--graphite-soft);
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.preset-colores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.preset-color {
  width: 2.25rem;
  min-height: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}

.preset-color:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-1px);
}

.preset-color[data-color="#36424d"] { background: #36424d; }
.preset-color[data-color="#8d5548"] { background: #8d5548; }
.preset-color[data-color="#b97866"] { background: #b97866; }
.preset-color[data-color="#0e7490"] { background: #0e7490; }
.preset-color[data-color="#14532d"] { background: #14532d; }
.preset-color[data-color="#6d28d9"] { background: #6d28d9; }

/* --------------------------------------------------- campo de archivo/logo */

.campo-archivo {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 1.1rem 1.15rem;
  border: 1px dashed #a9b4bb;
  border-radius: var(--radius-control);
  background: rgb(222 228 225 / 30%);
  cursor: pointer;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

.campo-archivo:hover {
  border-color: var(--terracotta-dark);
  background: rgb(231 216 200 / 35%);
}

.campo-archivo:focus-within {
  border-color: var(--terracotta-dark);
  outline: 2px solid var(--terracotta-dark);
  outline-offset: 2px;
}

.campo-archivo-titulo {
  color: var(--graphite);
  font-size: 0.82rem;
  font-weight: 600;
}

.campo-archivo-pista {
  color: var(--graphite-soft);
  font-size: 0.8rem;
  font-weight: 400;
}

.campo-archivo-accion {
  justify-self: start;
  margin-top: 0.35rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid #99a4ac;
  border-radius: 999px;
  color: var(--graphite);
  font-size: 0.78rem;
  font-weight: 600;
}

.campo-archivo-nombre {
  color: var(--graphite-soft);
  font-size: 0.8rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* El input real cubre toda la zona (sigue siendo visible y accionable para
   Playwright y para el teclado), pero es transparente: lo que se ve es la
   caja de arriba. */
.campo-archivo input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}

.recorte-sello {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

/* Sin border-radius: el sello es la silueta, no un círculo. Recortar el lienzo
   en redondo mentía sobre el resultado y cortaba las esquinas del dibujo. */
#canvas-recorte-sello {
  border-radius: var(--radius-control);
  border: 1px solid var(--line);
  cursor: grab;
  touch-action: none;
}

#canvas-recorte-sello:active {
  cursor: grabbing;
}

.sellos-listos {
  display: grid;
  gap: 0.8rem;
}

.sellos-listos-encabezado {
  display: grid;
  gap: 0.15rem;
}

.sellos-listos-encabezado p {
  margin: 0;
}

.sellos-listos-encabezado p:first-child {
  color: var(--graphite);
  font-size: 0.86rem;
  font-weight: 700;
}

.sellos-listos-encabezado p:last-child {
  color: var(--graphite-soft);
  font-size: 0.8rem;
}

.sellos-catalogo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr));
  gap: 0.55rem;
}

button.sello-opcion {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  min-height: 4.8rem;
  padding: 0.55rem 0.35rem;
  border-color: var(--line);
  border-radius: var(--radius-control);
  background: rgb(222 228 225 / 28%);
  color: var(--graphite);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.15;
}

button.sello-opcion img {
  width: 2rem;
  height: 2rem;
  opacity: 0.78;
}

button.sello-opcion:hover {
  border-color: var(--terracotta-dark);
  background: rgb(231 216 200 / 42%);
  color: var(--graphite);
}

button.sello-opcion.seleccionado {
  border-color: var(--terracotta-dark);
  background: var(--sand);
  box-shadow: inset 0 0 0 1px var(--terracotta-dark);
}

button.sello-opcion.seleccionado img {
  opacity: 1;
}

button.sello-opcion:disabled {
  cursor: wait;
  opacity: 0.62;
}

.sello-separador {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--graphite-soft);
  font-size: 0.75rem;
  font-weight: 600;
}

.sello-separador::before,
.sello-separador::after {
  height: 1px;
  background: var(--line);
  content: '';
}

/* ------------------------------------------------------- asistente por pasos */

.wizard-progreso {
  display: grid;
  gap: 0.65rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--white);
  box-shadow: 0 8px 22px rgb(54 66 77 / 7%);
}

.wizard-progreso-estado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: var(--graphite);
  font-size: 0.82rem;
}

.wizard-progreso-estado strong {
  font-weight: 650;
}

.wizard-progreso-estado span {
  flex: none;
  color: var(--terracotta-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wizard-progreso progress {
  display: block;
  width: 100%;
  height: 0.45rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--mist);
  color: var(--terracotta-dark);
}

.wizard-progreso progress::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--mist);
}

.wizard-progreso progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--terracotta-dark);
}

.wizard-progreso progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--terracotta-dark);
}

.wizard-progreso-pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  color: var(--graphite-soft);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
}

.wizard-progreso-pasos li:nth-child(2),
.wizard-progreso-pasos li:nth-child(3) {
  text-align: center;
}

.wizard-progreso-pasos li:last-child {
  text-align: right;
}

.wizard-progreso-pasos li.completado,
.wizard-progreso-pasos li.actual {
  color: var(--terracotta-dark);
}

.wizard-progreso-pasos li.actual {
  font-weight: 750;
}

.wizard {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.wizard-vista {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.vista-titulo {
  margin: 0;
  color: var(--graphite-soft);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.paso {
  display: none;
}

.paso.activo {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.25rem, 3.5vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--white);
  box-shadow: var(--shadow-raised);
}

.paso-contador {
  margin: 0;
  color: var(--terracotta-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.paso-encabezado {
  display: grid;
  gap: 0.3rem;
}

.paso-encabezado h2:focus {
  outline: none;
}

.wizard-acciones {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.42fr) minmax(0, 1fr);
  gap: 0.75rem;
}

/* ------------------------------------------- ubicación del negocio (paso 4) */

/* El botón toma el punto DONDE ESTÉ EL DUEÑO al apretarlo. El aviso va antes
   del botón y con fondo de arena para que se lea primero: apretarlo desde su
   casa geocerca su casa, y eso no se nota hasta que ya está publicado. */
.ubicacion {
  display: grid;
  gap: 0.6rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgb(222 228 225 / 30%);
}

.ubicacion h3 {
  margin: 0;
  color: var(--graphite);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.ubicacion .panel-nota {
  margin: 0;
}

.ubicacion-aviso {
  margin: 0.15rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-control);
  background: var(--sand);
  color: var(--graphite);
  font-size: 0.85rem;
  line-height: 1.55;
}

.ubicacion-aviso strong {
  font-weight: 700;
}

#btn-ubicacion {
  justify-self: start;
}

/* Sin texto no ocupa lugar: si no, el `gap` de la rejilla deja un hueco
   fantasma debajo del botón mientras nadie ha apretado nada. */
.ubicacion-estado {
  margin: 0;
  color: var(--graphite-soft);
  font-size: 0.85rem;
  font-weight: 500;
}

.ubicacion-estado:empty {
  display: none;
}

.ubicacion-estado[data-tono="error"] {
  color: var(--error);
}

.ubicacion-estado[data-tono="exito"] {
  color: var(--exito);
}

.ubicacion-guardada {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.ubicacion-guardada-titulo {
  margin: 0;
  color: var(--exito);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Las coordenadas no le dicen nada a nadie: van al final y chicas, como
   respaldo del mapa, no como la manera de leer el resultado. El tono es
   `graphite-soft` y no `mineral` porque a este tamaño mineral se queda en
   4.3:1 sobre esta superficie y no pasa AA. */
.ubicacion-coordenadas {
  margin: 0;
  color: var(--graphite-soft);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.ubicacion-quitar {
  min-height: 40px;
  padding: 0 0.9rem;
  font-size: 0.8rem;
}

/* ------------------------------------------------ vista previa en directo */

.tarjeta-preview {
  display: grid;
  gap: 0.85rem;
  padding: 1.15rem;
  border-radius: var(--radius-surface);
  background: var(--graphite);
  color: var(--white);
  box-shadow: var(--shadow-surface);
  transition: background-color 160ms ease-out;
}

/* Sin placa ni padding: la sección 4 del spec renuncia a ponerle un fondo
   claro al logo (un logo oscuro sobre tarjeta oscura puede desaparecer, y eso
   es aceptado a propósito) con la condición de que la vista previa muestre el
   resultado real. Con placa o padding aquí, el dueño ve un contraste que la
   clienta nunca ve.

   El tope es el mismo NÚMERO que el de `.franja-marca img`, y aquí decía que
   por eso la previa no exagera el logo. Es falso, y está medido: un 45% no es
   el mismo ancho en las dos, porque se resuelve contra bloques distintos. A
   1280px la franja de la credencial ofrece 363.2px de contenido (tope 163.4px)
   y esta previa 243.2px (tope 109.4px). Solo coinciden a ancho de teléfono,
   donde las dos columnas se apilan: 251.2px a 320px de viewport, 321.2px a
   390px.

   Y los altos tampoco son el mismo número —34px allá contra 3.25rem aquí—, así
   que la previa no predice el tamaño publicado en ninguna de las dos
   direcciones: medido a 1280px, un logo 4:1 se pinta 136px en la credencial y
   109.5px aquí (19% MÁS CHICO), y uno 1:1 se pinta 34px allá y 52px aquí (53%
   MÁS GRANDE).

   Los números no se tocan: el alto de esta previa es una contradicción del
   spec —fija 3.25rem aquí y 34px en la credencial sobre contenedores que a
   teléfono miden lo mismo— reservada a decisión de quien manda en el spec. Lo
   que se corrige es la explicación, que afirmaba una equivalencia que no
   existe. Lo que esta regla sí garantiza es que un logo alargado no se coma la
   previa; que la previa prediga el tamaño de la credencial, no. */
.tarjeta-preview .logo-preview {
  width: auto;
  max-width: 45%;
  height: 3.25rem;
  object-fit: contain;
}

.tarjeta-preview strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tarjeta-preview > span {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Mismo reparto que el strip real del pase (2 filas, ceil(n/2) por fila,
   ver src/platform/wallet/strips.mjs): la vista previa no debe mentir.
   El `background-color` lo escribe inline `tarjeta.js` con el color de la
   banda, que puede no ser el de la tarjeta; el padding es lo que hace que se
   lea como una franja y no como un rectángulo pegado a los círculos. */
.sellos-preview {
  display: grid;
  grid-template-columns: repeat(var(--sellos-columnas, 6), 1fr);
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-control);
  transition: background-color 160ms ease-out;
}

.sello {
  aspect-ratio: 1;
  border-radius: 50%;
  border-color: rgb(253 252 249 / 55%);
  border-width: 2px;
  border-style: solid;
}

/* El PNG del sello es una máscara: la forma vive en el canal alfa y el color
   lo pone `background-color`. `--sello-mask` y el color los escribe inline
   `tarjeta.js`. El prefijo -webkit- es obligatorio para Safari, que es
   mayoría en un producto de wallet. */
.sello.lleno {
  border: none;
  -webkit-mask-image: var(--sello-mask);
  mask-image: var(--sello-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.strip-final {
  width: 100%;
  border-radius: var(--radius-control);
}

#publicado {
  margin: 0;
  color: var(--exito);
  font-size: 0.9rem;
  font-weight: 600;
}

@media (min-width: 46rem) {
  .wizard {
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    align-items: start;
  }

  .wizard-pasos {
    grid-column: 1;
    grid-row: 1;
  }

  .wizard-vista {
    position: sticky;
    top: 1.5rem;
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 34rem) {
  .panel-header-inner {
    width: min(100% - 2rem, 68rem);
  }

  .panel-marca img {
    width: 138px;
  }

  .panel-nav {
    gap: 0.15rem 0.85rem;
    width: 100%;
  }

  .panel-nav a,
  .panel-salir {
    min-height: 40px;
    font-size: 0.8rem;
  }

  main.panel,
  main.panel--ancho {
    width: min(100% - 2rem, 52rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
  }
}

/* ------------------------------------------------- aviso de suscripción */

.aviso-suscripcion {
  background: var(--sand);
  color: var(--graphite);
  padding: 0.7rem 1.25rem;
  font-size: 0.92rem;
  text-align: center;
}

.aviso-suscripcion a { color: var(--terracotta-dark); font-weight: 600; }
.aviso-suscripcion[data-tono="urgente"] { background: #fde2e0; }