/* ==========================================================================
   MAMASITA MEDALLO · Paneles internos (mesero · cocina · administración)
   Mismo lenguaje gráfico que el sitio, pero con más densidad de información
   y objetivos táctiles grandes: se usa de pie y con una tablet en la mano.
   ========================================================================== */

body.panel {
  background: var(--panel-bg);
  min-height: 100svh;
}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */

.panel-shell {
  display: grid;
  min-height: 100svh;
  grid-template-rows: auto 1fr;
}

@media (min-width: 1040px) {
  .panel-shell {
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .panel-top { grid-column: 1 / -1; }
}

/* Barra superior */
.panel-top {
  position: sticky;
  top: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--gutter);
  min-height: 60px;
  background: var(--bar-bg);
  color: var(--bar-fg);
}

.panel-top__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.panel-top__brand img { width: 28px; height: auto; }

.panel-top__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  text-transform: uppercase;
  line-height: 1;
}

.panel-top__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rosa-on-dark);
}

.panel-top__spacer { flex: 1; }

.panel-user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
}

.panel-user__avatar {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--rojo-btn-bg);
  color: var(--rojo-btn-fg);
  font-weight: 700;
  font-size: var(--fs-xs);
}

.panel-user__name { font-weight: 600; }
.panel-user__role { color: var(--bar-dim); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; }

/* Indicador de conexión en vivo */
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bar-dim);
}

/* En pantallas angostas queda solo el punto: el texto no aporta y roba sitio */
@media (max-width: 559px) {
  .live-dot { font-size: 0; gap: 0; }
}

.live-dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tinta-40);
}

.live-dot[data-on='true']::before { background: #52D08A; animation: pulse 1.8s ease-in-out infinite; }

/* Navegación lateral */
.panel-nav {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--sp-2) var(--gutter);
  background: var(--panel-card);
  border-bottom: 1px solid var(--panel-line);
  position: sticky;
  top: 60px;
  z-index: 65;
}

.panel-nav::-webkit-scrollbar { display: none; }

@media (min-width: 1040px) {
  .panel-nav {
    position: sticky;
    top: 60px;
    height: calc(100svh - 60px);
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sp-4) var(--sp-3);
    border-right: 1px solid var(--panel-line);
    border-bottom: 0;
    align-content: start;
  }
}

.panel-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-55);
  white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

.panel-nav__link:hover { background: var(--rosa-100); color: var(--tinta); }
.panel-nav__link.is-active { background: var(--bar-bg); color: var(--bar-fg); }
.panel-nav__link svg { width: 16px; height: 16px; flex: none; }

.panel-nav__group {
  display: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-40);
  padding: var(--sp-4) var(--sp-3) var(--sp-1);
}

@media (min-width: 1040px) { .panel-nav__group { display: block; } }

/* Contenido */
.panel-main { padding: var(--sp-5) var(--gutter) var(--sp-8); min-width: 0; }

.panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.panel-sub { font-size: var(--fs-sm); color: var(--tinta-55); }

.panel-view { display: none; }
.panel-view.is-active { display: block; animation: view-in 260ms var(--ease); }

@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------------------------
   Tarjetas y métricas
   -------------------------------------------------------------------------- */

.pcard {
  background: var(--panel-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}

.pcard--flat { padding: 0; overflow: hidden; }

.pcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--linea-fina);
}

.pcard__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-55);
}

.metrics {
  display: grid;
  gap: var(--sp-3);
  /* 150px hace que en un teléfono entren dos por fila, como en escritorio */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.metric {
  background: var(--panel-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-1);
  align-content: start;
}

.metric__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-55);
}

.metric__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
}

.metric__foot { font-size: var(--fs-xs); color: var(--tinta-55); }

.delta { font-weight: 700; font-size: var(--fs-xs); }
.delta--up { color: var(--ok); }
.delta--down { color: var(--rojo-ink); }
.delta--flat { color: var(--tinta-40); }

/* --------------------------------------------------------------------------
   Gráficos (SVG generados en el cliente, sin librerías)
   -------------------------------------------------------------------------- */

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart__bar { fill: var(--rosa-300); transition: fill 160ms var(--ease); }
.chart__bar:hover { fill: var(--rojo); }
.chart__bar--peak { fill: var(--rojo); }
.chart__bar--low { fill: var(--rosa-200); }
.chart__line { fill: none; stroke: var(--rojo); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { fill: url(#gradPink); opacity: 0.55; }
.chart__grid { stroke: var(--linea-fina); stroke-width: 1; }
.chart__label { font-size: 9px; fill: var(--tinta-40); font-family: var(--font-mono); }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--tinta-55); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--rosa-300); display: inline-block; }

/* Barras horizontales (top de productos, categorías) */
.rank { display: grid; gap: var(--sp-2); }

.rank__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--sp-3);
  align-items: baseline;
}

.rank__name { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__value { font-family: var(--font-mono); font-size: var(--fs-xs); white-space: nowrap; }

.rank__track {
  grid-column: 1 / -1;
  height: 6px;
  background: var(--rosa-100);
  border-radius: 3px;
  overflow: hidden;
}

.rank__fill {
  height: 100%;
  background: var(--rojo);
  border-radius: 3px;
  transition: width 600ms var(--ease);
}

/* --------------------------------------------------------------------------
   Plano de mesas
   -------------------------------------------------------------------------- */

.tables-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr));
}

.table-card {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--panel-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-md);
  text-align: left;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.table-card:hover { border-color: var(--rojo); transform: translateY(-2px); box-shadow: var(--shadow-soft); }

.table-card[data-status='busy'] { border-color: var(--rojo); background: var(--paper-pink); }
.table-card[data-status='reserved'] { border-color: var(--warn); }
.table-card[data-status='closed'] { opacity: 0.5; }

.table-card__code {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  text-transform: uppercase;
  line-height: 1;
}

.table-card__zone { font-size: var(--fs-xs); color: var(--tinta-55); }

.table-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
}

.table-card__badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--tinta-12);
}

.table-card[data-status='busy'] .table-card__badge { background: var(--rojo); }
.table-card[data-status='reserved'] .table-card__badge { background: var(--warn); }

/* --------------------------------------------------------------------------
   Mesa abierta: sillas alrededor
   -------------------------------------------------------------------------- */

/* El plano va en escorzo, no de frente: un circulo visto desde arriba no se
   parece a lo que el mesero tiene delante, y era justo lo que hacia dificil
   saber que silla es cual al repartir.

   `--giro` lo fija el JS y gira el plano entero; `--inclinacion` es el escorzo.
   Los rotulos se contrarrotan mas abajo para que el texto siga de frente.

   touch-action: none es obligatorio: sin eso, arrastrar en el movil hace
   scroll de la pagina en vez de mover el plano. */
.seatmap {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
  touch-action: none;
  transform-style: preserve-3d;
  transform: perspective(1100px)
             rotateX(var(--inclinacion, 52deg))
             rotateZ(var(--giro, 0deg));
  transition: transform 220ms var(--ease);
}

/* mientras se arrastra no hay transicion, o el plano persigue al dedo con retraso */
.seatmap[data-arrastrando] { transition: none; }
.seatmap[data-arrastrando] .seat { transition: none; }

/* Piso: da a que agarrarse en el espacio y separa la mesa del fondo. */
.seatmap__piso {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
              color-mix(in srgb, var(--rosa-100) 70%, transparent) 0%,
              transparent 72%);
  border: 1px dashed color-mix(in srgb, var(--panel-line) 70%, transparent);
  pointer-events: none;
}

/* Los rotulos se contrarrotan: giran y se inclinan al reves que el plano, asi
   quedan siempre de frente y legibles por mucho que se gire la vista. */
.seat__cara,
.qr-anchor__cara,
.seatmap__cara {
  display: grid;
  place-items: center;
  transform: rotateZ(calc(-1 * var(--giro, 0deg)))
             rotateX(calc(-1 * var(--inclinacion, 52deg)));
}

.seatmap__cara { gap: 2px; }
.qr-anchor__cara { gap: 2px; }

.seatmap__table {
  width: 52%;
  height: 52%;
  transform-style: preserve-3d;
  touch-action: none;
  cursor: grab;
  display: grid;
  place-items: center;
  background: var(--rosa-100);
  border: 2px solid var(--rojo);
  color: var(--rojo-ink);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

.seatmap[data-shape='round'] .seatmap__table { border-radius: 50%; }
.seatmap[data-shape='square'] .seatmap__table { border-radius: 8px; }
.seatmap[data-shape='rect'] .seatmap__table { border-radius: 8px; width: 64%; height: 42%; }

.seat {
  position: absolute;
  width: 46px; height: 46px;
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-card);
  border: 1px solid var(--panel-line);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--tinta-55);
  transform: translate(-50%, -50%);
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease),
              color 180ms var(--ease), transform 180ms var(--ease);
}

.seat:hover { transform: translate(-50%, -50%) scale(1.08); border-color: var(--rojo); }
.seat.is-active { background: var(--rojo-btn-bg); border-color: var(--rojo-btn-bg); color: var(--rojo-btn-fg); }
.seat[data-has='true'] { border-color: var(--rojo); color: var(--rojo-text); }

.seat__count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding-inline: 4px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--tinta);
  color: var(--paper);
  font-size: 10px;
}

/* Marcador del QR: indica desde dónde se reparten los platos */
/* Marcador del QR: se arrastra, asi que tiene que parecer agarrable. */
.qr-anchor {
  position: absolute;
  display: grid;
  place-items: center;
  gap: 2px;
  transform-style: preserve-3d;
  touch-action: none;
  cursor: grab;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rojo-text);
  font-weight: 700;
  transform: translate(-50%, -50%);
  /* El ::after de abajo es decorativo: un pseudo-elemento con inset negativo
     NO amplia el area de toque. Medido en movil: a 12 px del centro el toque
     ya caia en la mesa y giraba el plano en vez de mover el QR. El agarre
     tiene que salir de la caja real, de ahi el padding. 44 px es el minimo
     tactil, y esto se usa de pie y con una mano. */
  min-width: 44px;
  /* 58 y no 44: la inclinacion del plano comprime la altura en pantalla con un
     factor medido de 0,78 (54 px de caja daban 42 en pantalla). 58 de caja
     proyecta ~46, que ya pasa el minimo tactil de 44. */
  min-height: 58px;
  padding: 10px;
}

.qr-anchor svg { width: 18px; height: 18px; }

.qr-anchor::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px dashed var(--linea-rosa);
  border-radius: 8px;
}

.seatmap__table:focus-visible,
.qr-anchor:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 4px;
}

.seatmap[data-arrastrando] .seatmap__table,
.seatmap[data-arrastrando] .qr-anchor { cursor: grabbing; }

/* El que se esta moviendo se destaca, para saber cual de los dos gestos salio */
.seatmap[data-arrastrando='qr'] .qr-anchor,
.seatmap[data-arrastrando='giro'] .seatmap__table {
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--rojo) 35%, transparent));
}

/* Sin puntero fino (movil) las zonas de agarre necesitan mas carne. */
@media (pointer: coarse) {
  .qr-anchor::after { inset: -14px; }
}

/* Quien pide menos movimiento no necesita el escorzo: se ve de plano. */
@media (prefers-reduced-motion: reduce) {
  .seatmap { transform: none; transition: none; }
  .seat__cara, .qr-anchor__cara, .seatmap__cara { transform: none; }
}

/* --------------------------------------------------------------------------
   Platos del pedido (panel de meseros)
   -------------------------------------------------------------------------- */

.courses { display: grid; gap: var(--sp-3); }

.course {
  background: var(--panel-card);
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--rosa-300);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
}

.course.is-active { border-left-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo); }

.course__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.course__label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.course__seat { font-size: var(--fs-micro); color: var(--rojo-text); letter-spacing: 0.14em; text-transform: uppercase; }

.course__items { display: grid; gap: var(--sp-1); }

.course__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 0;
  border-bottom: 1px dashed var(--linea-fina);
  font-size: var(--fs-sm);
}

.course__item:last-child { border-bottom: 0; }
.course__qty { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--tinta-55); }
.course__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course__price { font-family: var(--font-mono); font-size: var(--fs-xs); }

.course__note {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  color: var(--rojo-text);
  background: var(--rosa-100);
  border-radius: var(--radius);
  padding: 3px 7px;
}

.course--empty { color: var(--tinta-40); font-size: var(--fs-sm); font-style: italic; }

/* --------------------------------------------------------------------------
   Cocina
   -------------------------------------------------------------------------- */

.kds {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  align-items: start;
}

.ticket {
  background: var(--panel-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  align-content: start;
}

.ticket--late { border-color: var(--rojo); box-shadow: 0 0 0 2px rgba(232, 65, 60, 0.18); }
.ticket--ready { border-color: var(--ok); }

.ticket__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--bar-bg);
  color: var(--bar-fg);
}

.ticket--late .ticket__head { background: var(--rojo-btn-bg); color: var(--rojo-btn-fg); }
.ticket--ready .ticket__head { background: var(--ok-btn-bg); color: var(--ok-btn-fg); }

.ticket__code { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1; }
.ticket__meta { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }

.ticket__timer {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.ticket__body { padding: var(--sp-3); display: grid; gap: var(--sp-3); }

.ticket__course { display: grid; gap: 3px; }

.ticket__course-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rojo-text);
}

.ticket__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: center;
  padding: 4px 0;
  font-size: var(--fs-sm);
}

.ticket__item[data-status='ready'] { opacity: 0.45; text-decoration: line-through; }
.ticket__item-note { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--rojo-text); font-weight: 600; }

.ticket__foot { padding: var(--sp-3); border-top: 1px solid var(--linea-fina); display: flex; gap: var(--sp-2); }

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.login {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--gutter);
}

.login__card {
  width: min(100%, 420px);
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  box-shadow: var(--shadow-soft);
}

.login__logo { width: 62px; margin-inline: auto; }

.login__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 3px;
  background: var(--rosa-100);
  border-radius: var(--radius-pill);
}

.login__tab {
  padding: var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-55);
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}

.login__tab.is-active { background: var(--paper); color: var(--tinta); box-shadow: var(--shadow-soft); }

.pinpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

.pinpad button {
  aspect-ratio: 1.6;
  border: 1px solid var(--linea);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  background: var(--surface);
  transition: background-color 140ms var(--ease), transform 120ms var(--ease);
}

.pinpad button:hover { background: var(--rosa-100); }
.pinpad button:active { transform: scale(0.96); }

.pin-dots { display: flex; justify-content: center; gap: var(--sp-3); }

.pin-dots span {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--rosa-300);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}

.pin-dots span[data-on='true'] { background: var(--rojo); border-color: var(--rojo); }

/* --------------------------------------------------------------------------
   Utilidades de panel
   -------------------------------------------------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-4);
}

.toolbar__spacer { flex: 1; }

/* Columna que acompaña al scroll, pero solo cuando hay dos columnas de verdad */
.sticky-side { align-self: start; }

@media (min-width: 980px) {
  .sticky-side {
    position: sticky;
    top: calc(60px + 56px + var(--sp-4));
    max-height: calc(100svh - 60px - 56px - var(--sp-5));
    overflow-y: auto;
  }
}

.grid-panels {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.grid-panels--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .grid-panels--2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

.qr-sheet {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}

.qr-tile {
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  text-align: center;
  padding: var(--sp-4);
  /* la tarjeta del QR se queda clara siempre: el lector necesita el contraste
     del código y estas hojas se imprimen en papel */
  background: #fff;
  color: #17110F;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-md);
  break-inside: avoid;
}

.qr-tile img { width: 100%; max-width: 180px; height: auto; }
.qr-tile__code { font-family: var(--font-display); font-size: var(--fs-lg); text-transform: uppercase; line-height: 1; }
.qr-tile__meta { font-size: var(--fs-xs); color: rgba(23, 17, 15, 0.62); }
.qr-tile__otp {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.24em;
  color: #C22F2C;
}

@media print {
  .panel-top, .panel-nav, .toolbar, .wa { display: none !important; }
  body.panel { background: #fff; }
  .panel-main { padding: 0; }
  .qr-sheet { grid-template-columns: repeat(3, 1fr); }
}