/* ============================================================
   Carteirinha Estudantil Digital — formato vertical
   Proporção ISO/IEC 7810 ID-1 em retrato (54 × 85,6 mm → 0,6308)
   Medidas internas em unidades de contêiner (cqw): o documento
   escala sem que nenhuma proporção se perca.
   ============================================================ */

.wallet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
}

/* Prateleira: contexto de "cartão dentro da carteira" */
.wallet__shelf {
  position: relative;
  width: 100%;
  max-width: 400px;
  isolation: isolate;
}

.wallet__shelf::before,
.wallet__shelf::after {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: var(--radius-xl);
  z-index: -1;
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-out);
}
.wallet__shelf::before {
  bottom: -11px;
  width: 91%;
  height: 44px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #1f6fc4, #14539e);
  box-shadow: 0 12px 24px -12px rgba(6, 33, 63, 0.5);
  opacity: 0.5;
}
.wallet__shelf::after {
  bottom: -21px;
  width: 80%;
  height: 44px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #4cc3b6, #2fa6c6);
  box-shadow: 0 12px 24px -14px rgba(6, 33, 63, 0.45);
  opacity: 0.4;
}
.wallet__shelf:hover::before { transform: translateX(-50%) translateY(3px); }
.wallet__shelf:hover::after { transform: translateX(-50%) translateY(7px); }

/* ---------- Palco 3D ---------- */
.idcard {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 54 / 85.6;
  perspective: 1800px;
  perspective-origin: 50% 42%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.idcard__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}

.idcard__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--dur-flip) cubic-bezier(0.19, 0.86, 0.24, 1);
}
.idcard[data-face="back"] .idcard__inner { transform: rotateY(180deg); }

.idcard__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 5cqw; /* ≈ 3,18 mm proporcional ao ID-1 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--shadow-card);
  font-family: var(--font-sans);
  isolation: isolate;
}
.idcard__face--back { transform: rotateY(180deg); }

/* Brilho que acompanha o ponteiro (comum às duas faces) */
.idcard__sheen {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(42% 34% at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.55) 0%, rgba(180, 230, 240, 0.20) 40%, transparent 72%);
  mix-blend-mode: soft-light;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.idcard:hover .idcard__sheen { opacity: 1; }

/* Microtexto de segurança */
.idcard__microtext {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  bottom: 1.9cqw;
  z-index: 1;
  font-size: 1.5cqw;
  line-height: 1;
  letter-spacing: 0.14em;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

/* ============================================================
   FRENTE — cartão claro institucional
   ============================================================ */
.idcard__face--front {
  color: var(--blue-900);
  background: #ffffff;
}
.idcard__face--front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(51, 198, 182, 0.16), transparent 70%),
    radial-gradient(90% 45% at 50% 100%, rgba(28, 104, 189, 0.10), transparent 70%),
    #ffffff;
}
/* Borda dupla: filete turquesa por dentro, contorno suave por fora */
.idcard__face--front::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(20, 83, 158, 0.16),
    inset 0 0 0 3.2px rgba(255, 255, 255, 0.9),
    inset 0 0 0 4.2px rgba(51, 198, 182, 0.55);
}

.idcard__guilloche {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
}
.idcard__guilloche path,
.idcard__guilloche ellipse,
.idcard__guilloche circle {
  fill: none;
  stroke: rgba(51, 198, 182, 0.30);
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
}

/* Marca d'água do losango no canto inferior */
.idcard__watermark {
  position: absolute;
  right: -12cqw;
  bottom: -10cqw;
  width: 58cqw;
  height: 58cqw;
  z-index: -1;
  opacity: 0.07;
  pointer-events: none;
}

.idcard__front-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100%;
  padding: 5.5cqw 6.5cqw 5cqw;
}

/* --- Cabeçalho: assinatura da marca --- */
.idcard__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqw;
  padding-bottom: 3.4cqw;
  border-bottom: 1px solid rgba(20, 83, 158, 0.12);
}
.idcard__doc-type {
  font-size: 2.4cqw;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-800);
}
/* Filete no gradiente da marca, logo abaixo do cabeçalho */
.idcard__rule {
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gem-1), var(--gem-2), var(--gem-3), var(--gem-4));
}

/* Assinatura da marca em escala proporcional ao cartão */
.idcard .logo--card { gap: 2.4cqw; }
.idcard .logo--card .logo__gem { width: 11cqw; height: 11cqw; }
.idcard .logo--card .logo__word { font-size: 7.8cqw; }

/* --- Corpo: retrato + dados --- */
.idcard__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.idcard__body .idcard__data { flex: 1 1 auto; }

/* --- Retrato --- */
.idcard__portrait {
  display: flex;
  justify-content: center;
  padding: 5cqw 0 4cqw;
}
.idcard__photo {
  position: relative;
  width: 42cqw;
  height: 42cqw;
  border-radius: 50%;
  padding: 1.1cqw;
  background: linear-gradient(150deg, var(--gem-1), var(--gem-2) 38%, var(--gem-3) 68%, var(--gem-4));
  box-shadow: 0 4px 14px -4px rgba(6, 33, 63, 0.32);
}
.idcard__photo-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(155deg, var(--blue-600), var(--blue-800));
  box-shadow: 0 0 0 1.1cqw #fff inset;
}
.idcard__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.idcard__photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--font-display);
  font-size: 14cqw;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}
/* Selo holográfico discreto sobre a borda do retrato */
.idcard__photo::after {
  content: "";
  position: absolute;
  right: 1cqw;
  bottom: 1cqw;
  width: 8.5cqw; height: 8.5cqw;
  border-radius: 50%;
  background: conic-gradient(from 210deg,
    rgba(154, 222, 203, 0.95), rgba(47, 166, 198, 0.85),
    rgba(44, 113, 188, 0.9), rgba(154, 222, 203, 0.95));
  box-shadow: 0 0 0 1.1cqw #fff, 0 2px 6px -2px rgba(6, 33, 63, 0.5);
}

/* --- Dados --- */
.idcard__data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: space-evenly;
  gap: 2.6cqw 4cqw;
  min-height: 0;
}
.idcard__row--full { grid-column: 1 / -1; }

.idcard__label {
  display: block;
  font-size: 2.4cqw;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-800);
  margin-bottom: 0.6cqw;
}
.idcard__value {
  display: block;
  font-size: 3.7cqw;
  font-weight: 650;
  line-height: 1.22;
  color: var(--blue-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.idcard__value--mono {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.idcard__value--name {
  font-size: 4.6cqw;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--blue-900);
  white-space: normal;
  overflow-wrap: anywhere;
}
.idcard__value--name.is-long { font-size: 3.9cqw; }
.idcard__value--wrap { white-space: normal; }

/* --- Rodapé: status + emissão --- */
.idcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  padding-top: 3.4cqw;
  border-top: 1px solid rgba(20, 83, 158, 0.12);
}

.idcard__status {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.4cqw 3cqw 1.4cqw 2.4cqw;
  border-radius: var(--radius-pill);
  font-size: 2.5cqw;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(15, 123, 79, 0.30);
  background: var(--green-100);
  color: var(--green-700);
}
.idcard__status[data-status="expired"] {
  border-color: rgba(180, 35, 24, 0.30);
  background: var(--red-100);
  color: var(--red-700);
}
.idcard__status-dot {
  width: 2cqw; height: 2cqw;
  border-radius: 50%;
  background: var(--green-600);
  animation: pulse-dot 2.4s var(--ease-out) infinite;
}
.idcard__status[data-status="expired"] .idcard__status-dot { background: var(--red-600); animation: none; }

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(15, 123, 79, 0.45); }
  70% { box-shadow: 0 0 0 1.2cqw rgba(15, 123, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 123, 79, 0); }
}
@media (prefers-reduced-motion: reduce) { .idcard__status-dot { animation: none; } }
:root[data-motion="reduced"] .idcard__status-dot { animation: none; }

.idcard__issued {
  text-align: right;
  font-size: 2.3cqw;
  line-height: 1.35;
  color: var(--text-muted);
}
.idcard__issued strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 2.7cqw;
  font-weight: 600;
  color: var(--blue-800);
  font-variant-numeric: tabular-nums;
}

.idcard__face--front .idcard__microtext { color: rgba(20, 83, 158, 0.22); }

/* ============================================================
   VERSO — azul institucional
   ============================================================ */
.idcard__face--back { color: #e7f1fb; }
.idcard__face--back::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(51, 198, 182, 0.30), transparent 62%),
    radial-gradient(100% 60% at 50% 110%, rgba(10, 53, 104, 0.7), transparent 70%),
    linear-gradient(168deg, #17599f 0%, #0f4787 46%, #0a3568 100%);
}
.idcard__face--back::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 3.2px rgba(10, 53, 104, 0.55),
    inset 0 0 0 4.2px rgba(51, 198, 182, 0.45);
}
.idcard__face--back .idcard__guilloche { opacity: 0.34; }
.idcard__face--back .idcard__guilloche path,
.idcard__face--back .idcard__guilloche ellipse,
.idcard__face--back .idcard__guilloche circle { stroke: rgba(142, 227, 217, 0.55); }
.idcard__face--back .idcard__watermark { opacity: 0.13; }
.idcard__face--back .idcard__microtext { color: rgba(190, 226, 250, 0.30); }

.idcard__back-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  height: 100%;
  padding: 5.5cqw 6.5cqw 5cqw;
}

.idcard__back-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding-bottom: 3cqw;
  border-bottom: 1px solid rgba(142, 227, 217, 0.28);
}
.idcard__back-title {
  font-size: 2.4cqw;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-300);
}
.idcard__back-gem { width: 7cqw; height: 7cqw; }

/* Plaqueta clara: o QR precisa de fundo claro para leitura */
.idcard__qr-wrap { display: flex; flex-direction: column; align-items: center; padding: 5cqw 0 3cqw; }
.idcard__qr {
  width: 47cqw;
  padding: 2.2cqw;
  border-radius: 2.6cqw;
  background: #ffffff;
  box-shadow: 0 0 0 1.2cqw rgba(255, 255, 255, 0.10), 0 6px 16px -6px rgba(0, 0, 0, 0.55);
}
.idcard__qr svg { width: 100%; height: auto; display: block; }
.idcard__qr-caption {
  margin-top: 3cqw;
  text-align: center;
  font-size: 2.3cqw;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 230, 250, 0.8);
}

.idcard__back-note {
  font-size: 2.5cqw;
  line-height: 1.5;
  text-align: center;
  color: rgba(206, 230, 250, 0.85);
}
.idcard__back-note strong { color: #fff; font-weight: 650; }

.idcard__back-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: 2.6cqw 4cqw;
  padding: 3.5cqw 0;
}
.idcard__face--back .idcard__label { color: var(--teal-300); }
.idcard__face--back .idcard__value { color: #eef5fd; }

.idcard__sign {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3cqw;
  padding-top: 3cqw;
  border-top: 1px solid rgba(142, 227, 217, 0.24);
}
.idcard__sign-block { text-align: center; flex: 1 1 auto; min-width: 0; }
.idcard__sign-mark { width: 34cqw; height: 8cqw; margin: 0 auto; }
.idcard__sign-mark path {
  fill: none;
  stroke: rgba(236, 248, 255, 0.92);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.idcard__sign-rule { margin: 0.8cqw 0 1cqw; border-top: 1px solid rgba(255, 255, 255, 0.32); }
.idcard__sign-label {
  font-size: 2.1cqw;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200, 230, 250, 0.78);
}
.idcard__hash {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 2.2cqw;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: rgba(180, 218, 248, 0.78);
  white-space: nowrap;
}

/* Reserva quando não há suporte a unidades de contêiner */
@supports not (width: 1cqw) {
  .idcard__face { border-radius: 18px; }
  .idcard__doc-type, .idcard__back-title { font-size: 9px; }
  .idcard__label { font-size: 9px; }
  .idcard__value { font-size: 14px; }
  .idcard__value--name { font-size: 18px; }
  .idcard__photo { width: 150px; height: 150px; }
  .idcard__qr { width: 170px; }
  .idcard__microtext { font-size: 5px; }
}

/* ============================================================
   Controles da carteirinha
   ============================================================ */
.wallet__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 400px;
  margin-top: var(--space-4);
}
.wallet__controls .btn { flex: 1 1 auto; min-width: 96px; padding: 0 var(--space-3); }

/* Em telas estreitas as ações secundárias ficam só com o ícone (o rótulo
   permanece em aria-label), para que a linha de controles não quebre. */
@media (max-width: 430px) {
  .wallet__controls .btn__label { display: none; }
  .wallet__controls .btn--secondary { flex: 0 0 auto; min-width: 48px; width: 48px; padding: 0; }
  .wallet__controls .btn--primary { flex: 1 1 auto; }
}

.wallet__hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.wallet__facepips { display: flex; align-items: center; gap: 6px; }
.wallet__facepip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--slate-300);
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.wallet__facepip[data-active="true"] { background: var(--teal-600); transform: scale(1.25); }

/* ---------- Esqueleto ---------- */
.idcard-skeleton {
  width: 100%;
  aspect-ratio: 54 / 85.6;
  border-radius: 20px;
  background: linear-gradient(170deg, #ffffff, #eef4fa);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.idcard-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(51, 198, 182, 0.16), transparent);
  animation: shimmer 1.6s ease-in-out infinite;
}
.idcard-skeleton__bones {
  position: absolute;
  inset: 0;
  padding: 7% 7% 6%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 5%;
  justify-items: center;
}
.idcard-skeleton__bone { background: rgba(20, 83, 158, 0.08); border-radius: 6px; width: 100%; }
.idcard-skeleton__circle {
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(20, 83, 158, 0.08);
}

@media (prefers-reduced-motion: reduce) { .idcard-skeleton::after { animation: none; } }
:root[data-motion="reduced"] .idcard-skeleton::after { animation: none; }

/* ---------- Impressão: documento em tamanho real ---------- */
@media print {
  .idcard { perspective: none; width: 54mm; aspect-ratio: auto; height: 85.6mm; }
  .idcard__tilt { transform: none; }
  .idcard__inner { transform: none !important; }
  .idcard__face { position: relative; page-break-inside: avoid; box-shadow: none; }
  .idcard__face--back { transform: none; margin-top: 8mm; }
  .idcard__sheen, .wallet__shelf::before, .wallet__shelf::after { display: none; }
}