/* ===========================
   CSS CARNET MONA
   Formato: 85.5mm × 54mm (323px × 204px a 96dpi)
   =========================== */

.carnet--mona {
  background-color: #d8d8d8;
  width: calc(323px * var(--carnet-chana-scale));
  height: calc(204px * var(--carnet-chana-scale));
  position: relative;
  overflow: hidden;
  border-radius: calc(8px * var(--carnet-chana-scale));
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  -webkit-font-smoothing: antialiased;
}

.carnet--mona .carnet__header-bar {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: calc(27px * var(--carnet-chana-scale));
  background: linear-gradient(180deg, #146b4b 0%, #156C4C 100%);
  z-index: 1;
}

/* --- DECORACIONES --- */
.carnet--mona .carnet__decor {
  position: absolute;
  width: calc(280px * var(--carnet-chana-scale));
  height: calc(4px * var(--carnet-chana-scale));
  z-index: 1;
}
.carnet--mona .carnet__decor--top-1 { top: calc(-5px * var(--carnet-chana-scale)); left: calc(10px * var(--carnet-chana-scale)); }
.carnet--mona .carnet__decor--top-2 { top: calc(3px * var(--carnet-chana-scale)); left: calc(19px * var(--carnet-chana-scale)); }
.carnet--mona .carnet__decor--bottom { top: calc(179px * var(--carnet-chana-scale)); left: calc(19px * var(--carnet-chana-scale)); }

/* --- FOTO USUARIO --- */
.carnet--mona .carnet__foto {
  position: absolute;
  top: calc(27px * var(--carnet-chana-scale));
  left: calc(13px * var(--carnet-chana-scale));
  width: calc(81px * var(--carnet-chana-scale));
  height: calc(81px * var(--carnet-chana-scale));
  background: #ffffff;
  border-radius: calc(4px * var(--carnet-chana-scale));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 5;
}

.carnet--mona .carnet__foto img {
  width: 100%; height: 100%; object-fit: cover;
}

/* --- CÓDIGO QR --- */
.carnet--mona .carnet__qr {
  position: absolute;
  top: calc(116px * var(--carnet-chana-scale));
  left: calc(19px * var(--carnet-chana-scale));
  width: calc(64px * var(--carnet-chana-scale));
  height: calc(65px * var(--carnet-chana-scale));
  background: #ffffff;
  padding: calc(2px * var(--carnet-chana-scale));
  border-radius: calc(4px * var(--carnet-chana-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.carnet--mona .carnet__qr img {
  width: 100%; height: 100%; object-fit: contain;
}

/* --- ESCUDO --- */
.carnet--mona .carnet__escudo-ams {
  position: absolute;
  top: calc(28px * var(--carnet-chana-scale));
  left: calc(155px * var(--carnet-chana-scale));
  width: calc(100px * var(--carnet-chana-scale));
  height: auto;
  z-index: 2;
  object-fit: contain;
}

/* --- TEXTO (Lema) --- */
.carnet--mona .carnet__lema-verde {
  position: absolute;
  top: calc(80px * var(--carnet-chana-scale));
  left: calc(105px * var(--carnet-chana-scale));
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: calc(13px * var(--carnet-chana-scale));
  text-align: center;
  line-height: 1.3;
  color: #1a1a1a;
  z-index: 3;
}

/* --- BLOQUE DE DATOS --- */
.carnet--mona .carnet__info-block {
  position: absolute;
  top: calc(129px * var(--carnet-chana-scale));
  left: calc(90px * var(--carnet-chana-scale));
  display: flex;
  gap: calc(5px * var(--carnet-chana-scale));
  z-index: 4;
}

.carnet--mona .carnet__labels {
  display: flex;
  flex-direction: column;
  width: calc(51px * var(--carnet-chana-scale));
  align-items: flex-end;
  gap: calc(5px * var(--carnet-chana-scale));
}

.carnet--mona .carnet__label {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: calc(10px * var(--carnet-chana-scale));
  color: #000;
  line-height: 1.2;
}

.carnet--mona .carnet__values {
  display: flex;
  flex-direction: column;
  width: calc(160px * var(--carnet-chana-scale));
  gap: calc(5px * var(--carnet-chana-scale));
}

.carnet--mona .carnet__value {
  font-family: "Inter", sans-serif;
  font-size: calc(11px * var(--carnet-chana-scale));
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.2;
}

.carnet--mona .carnet__value--nombre {
  font-weight: 400;
}

/* --- VECTOR INFERIOR --- */
.carnet--mona .carnet__vector-bottom {
  position: absolute;
  top: calc(175px * var(--carnet-chana-scale));
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
}

/* ===========================
   Impresión
   =========================== */
@media print {
  :root {
    --carnet-chana-scale: 1;
  }

  .carnet--mona {
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none;
    width: 323px;
    height: 204px;
    border-radius: 8px;
  }
}