/* ============================================================================
   Fidelización — fase 1 (sellos).
   ----------------------------------------------------------------------------
   Solo lo PROPIO de esta pantalla. Lo reutilizable va en `personalizados.css`,
   colgado de la clase del tema; acá vive la tarjeta de sellos, que no existe en
   ninguna otra pantalla.

   Los colores salen de los tokens `--ins-*` del tema, no escritos a mano: el
   badge y el sello tienen que venir del mismo lugar o se separan al primer
   cambio de paleta.
   ============================================================================ */

/* ── La tarjeta de sellos ───────────────────────────────────────────────────
   Es lo que el cliente reconoce: la cartulina con los huequitos. Se dibuja con
   círculos y no con una imagen para que el número de sellos sea configurable
   —de 2 a 100— sin depender de un arte por cada cantidad. */
.fid-tarjeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.fid-sello {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border: 2px dashed var(--ins-border-color);
  color: var(--ins-secondary-color);
  background: var(--ins-secondary-bg);
  flex: 0 0 auto;
}

/* El sello dado: relleno y con el visto. */
.fid-sello.lleno {
  border-style: solid;
  border-color: var(--ins-success);
  background: var(--ins-success);
  color: #fff;
}

/* ⚠ El premio listo NO se anuncia solo con color: en pantalla chica y a la
   carrera, verde y verde-más-fuerte se confunden. Va con borde grueso y el
   rótulo al lado, que es lo que se lee. */
.fid-tarjeta.completa .fid-sello.lleno {
  box-shadow: 0 0 0 2px var(--ins-success-bg-subtle);
}

/* Cuando la cantidad es grande, los sellos se achican en vez de romper la fila
   en cinco renglones: una cartulina de 40 huecos a 34 px ocupa media pantalla. */
.fid-tarjeta.muchos .fid-sello {
  width: 22px;
  height: 22px;
  font-size: 11px;
  border-width: 1.5px;
}

/* ── El saldo en grande, en la ficha ─────────────────────────────────────── */
.fid-saldo {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.fid-saldo small {
  font-size: .9rem;
  font-weight: 400;
  color: var(--ins-secondary-color);
}

/* ⚠ Saldo negativo: pasa de verdad —se anula una compra cuyos sellos ya se
   canjearon— y tiene que verse distinto, no como un cero cualquiera. */
.fid-saldo.negativo { color: var(--ins-danger); }

/* ── El historial de movimientos ────────────────────────────────────────────
   Lista simple, no tabla: se lee de arriba abajo y en el teléfono una tabla de
   cinco columnas obliga a desplazarse en horizontal. */
.fid-historial { list-style: none; margin: 0; padding: 0; }

.fid-historial li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ins-border-color);
}

.fid-historial li:last-child { border-bottom: 0; }

.fid-mov-cant {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: center;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: .8125rem;
}

.fid-mov-cant.mas   { color: var(--ins-success); background: var(--ins-success-bg-subtle); }
.fid-mov-cant.menos { color: var(--ins-danger);  background: var(--ins-danger-bg-subtle); }

/* `min-width: 0` para que el texto largo se pueda truncar: en flex, sin esto el
   hijo se niega a encogerse por debajo de su contenido. */
.fid-mov-texto { flex: 1 1 auto; min-width: 0; }

/* ── El filtro de la cabecera ───────────────────────────────────────────────
   ⚠ Un `<select>` es `display: block` y `w-auto` no lo achica: en un contenedor
   flex el navegador blockifica a los hijos. Se sujeta con un tope. */
.fid-filtro { max-width: 260px; }

@media (max-width: 767.98px) {
  .fid-filtro { max-width: 100%; }
}

/* ═══ La tarjeta del cliente ═══════════════════════════════════════════════════════════════════
   Pedido de Mario (2026-09-15): que el bloque de sellos se vea como una tarjeta de crédito y gire.
   Es CSS, sin librería: `perspective` en el marco, `preserve-3d` en el que gira y una cara a 180°.

   ⚠ Gira con `:hover` Y con `:focus-within` Y con la clase `.girada`. El hover solo no alcanza:
   en el teléfono no existe, y sin teclado el código del reverso quedaría inalcanzable. */
/* La tarjeta y su QR, uno al lado del otro. En el teléfono el QR baja solo (`flex-wrap`).
   ⚠ La `perspective` se queda acá aunque ahora sea flex: es el marco desde el que se mira girar
   la tarjeta, y moverla al hijo haría que cada cara se dibujara con su propia fuga. */
.fid-card-zona { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
                 gap: 1rem;
                 perspective: 1200px;
                 /* La medida de la tarjeta, en un solo sitio: el QR la usa para igualarla. */
                 --fid-card-ancho: 21.5rem;
                 --fid-card-prop: 1.586;   /* la proporción real de una tarjeta de crédito */ }

/* ⚠ `align-self: stretch` contra el `align-items: center` del padre: así el QR toma el alto de
   la LÍNEA, que lo fija la tarjeta, y los dos quedan parejos sin repetir su altura en ningún
   número. Si se escribiera un alto a mano habría que corregirlo cada vez que cambie la tarjeta.
   En el teléfono el QR baja a su propia línea y ahí `stretch` no tiene contra qué estirarse: toma
   su alto natural, que es lo correcto. */
/* ⚠ El alto sale de la MISMA cuenta que el de la tarjeta —su ancho máximo dividido por la
   proporción de una tarjeta de crédito—, declarada en variables para que las dos no puedan
   separarse. Con `align-self: stretch` no alcanzaba: el alto de una fila flex lo fija el ítem más
   alto, así que la imagen del QR (300 px de origen) estiraba la fila a 362 y arrastraba a la
   tarjeta en vez de ajustarse a ella. */
.fid-qr { height: calc(var(--fid-card-ancho) / var(--fid-card-prop));
          display: flex; flex-direction: column; align-items: center; justify-content: center;
          gap: 0; margin: 0;
          /* Sin borde: solo 7 px de aire alrededor (Mario, 2026-09-15). El QR ya se delimita solo
             —es negro sobre blanco—, así que el recuadro no aportaba y le robaba tamaño. */
          padding: 7px; border: 0; background: #fff; }
/* ⚠ La imagen TOMA el alto que sobra (`flex: 1` + `min-height: 0`) en vez de tener un tamaño
   fijo: así el QR crece hasta igualar la tarjeta, que es de lo que se trataba. El `aspect-ratio`
   le saca el ancho, y sin `min-height: 0` un hijo flex se niega a encogerse por debajo de su
   contenido y se desbordaría hacia abajo. */
.fid-qr img { flex: 1 1 auto; min-height: 0; width: auto; height: 100%; max-width: none;
              aspect-ratio: 1; display: block;
              /* El QR es un dibujo de píxeles: escalarlo con suavizado le come los bordes y hay
                 lectores que dejan de reconocerlo. */
              image-rendering: pixelated; }
/* Sin pie: el código ya se lee en la tarjeta —al girarla, y en el subtítulo de la ficha—, así que
   repetirlo debajo del QR solo le quitaba altura (Mario, 2026-09-15). */

.fid-card {
  position: relative;
  width: 100%;
  max-width: var(--fid-card-ancho);
  aspect-ratio: var(--fid-card-prop);
  cursor: pointer;
  border-radius: .9rem;
  outline: none;
}
.fid-card:focus-visible { outline: 2px solid var(--ins-primary); outline-offset: 4px; }

.fid-card-giro {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .8, .25, 1);
}
.fid-card:hover .fid-card-giro,
.fid-card:focus-within .fid-card-giro,
.fid-card.girada .fid-card-giro { transform: rotateY(180deg); }

.fid-card-cara {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: .9rem 1.05rem;
  border-radius: .9rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;   /* Safari lo sigue necesitando */
  box-shadow: 0 10px 26px rgba(16, 24, 40, .22);
  /* Morado, pedido de Mario (2026-09-15). Es una paleta PROPIA de la tarjeta y no el color de la
     empresa: así el objeto se ve igual en todas y no depende de que alguien deje el primario en
     un tono que no le siente. Las tres paradas están medidas con texto blanco encima —15.2:1,
     8.7:1 y 5.4:1— así que el rótulo se lee en cualquier punto del degradado. */
  background: linear-gradient(135deg, #2e1065 0%, #6b21a8 58%, #9333ea 100%);
  color: #fff;
}
.fid-card-reverso { transform: rotateY(180deg); }

/* ── Frente ── */
.fid-card-marca { display: flex; align-items: center; gap: .5rem; min-height: 1.75rem; }
.fid-card-logo { height: 1.5rem; width: auto; max-width: 6.5rem; object-fit: contain;
                 background: #fff; border-radius: .25rem; padding: .1rem .25rem; }
.fid-card-empresa { font-size: .8125rem; font-weight: 600; letter-spacing: .02em;
                    text-transform: uppercase; opacity: .95; }
/* El chip: es lo que hace que se lea «tarjeta» de un vistazo, antes que ningún texto. */
.fid-card-chip { margin-left: auto; width: 2.1rem; height: 1.55rem; border-radius: .28rem;
                 background: linear-gradient(135deg, #e7c66a, #b3903a);
                 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }

/* ⚠ Los sellos se encogen DENTRO de la tarjeta. Con los 34 px de la lista, diez no entran en el
   ancho de una tarjeta de crédito y se partían 8 + 2, que se lee como si faltara una fila. A 26 px
   los diez entran en un renglón (10×26 + 9×4 = 296 de los 310 útiles). Con más de diez siguen
   envolviendo, ya centrados. */
.fid-card .fid-tarjeta { flex: 1 1 auto; align-content: center; justify-content: center;
                         margin: .35rem 0; gap: 4px; padding: 0; }
.fid-card .fid-sello { width: 26px; height: 26px; font-size: 12px; border-width: 1.5px; }
.fid-card.muchos .fid-sello, .fid-card .fid-tarjeta.muchos .fid-sello { width: 21px; height: 21px; font-size: 10px; }
/* Los sellos, sobre fondo oscuro: el estilo de la lista no se lee acá. */
.fid-card .fid-sello { border-color: rgba(255, 255, 255, .45); color: rgba(255, 255, 255, .8);
                       background: rgba(255, 255, 255, .08); }
.fid-card .fid-sello.lleno { background: #fff; border-color: #fff; color: #6b21a8; }

.fid-card-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; }
.fid-card .fid-saldo { font-size: 1.15rem; line-height: 1.1; color: #fff; margin: 0; }
.fid-card .fid-saldo small { color: rgba(255, 255, 255, .78); }
.fid-card-premio { font-size: .75rem; line-height: 1.25; text-align: right;
                   color: rgba(255, 255, 255, .85); max-width: 55%; }

/* ── Reverso ── */
.fid-card-banda { height: 2.6rem; margin: -.2rem -1.05rem .9rem; background: rgba(0, 0, 0, .55); }
.fid-card-codigo { font-size: 1.9rem; font-weight: 700; letter-spacing: .22em;
                   text-align: center; font-variant-numeric: tabular-nums; }
.fid-card-nota { font-size: .6875rem; text-align: center; letter-spacing: .06em;
                 text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-top: .15rem; }
.fid-card-titular { margin-top: auto; font-size: .75rem; letter-spacing: .04em;
                    text-transform: uppercase; color: rgba(255, 255, 255, .85);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .fid-card-giro { transition: none; }
}