/* ========================================================================
   A CARTEIRINHA NA TELA — o desenho das carteirinhas do portal (set/2026).
   Nasceu na carteirinha Alumni (a página do egresso) e virou UM arquivo,
   usado também pela carteirinha institucional (estudante, docente, técnico —
   /carteirinha/): o mesmo cartão de 85,6 × 54 mm, o mesmo gradiente da marca,
   o QR à direita. O PDF de cartão é o mesmo desenho (`gerarCarteirinhaPdf`).
   AS DUAS VERSÕES (regra do dono, para TODAS as carteirinhas): sem foto, o
   cartão ORIGINAL — nada de moldura vazia, silhueta ou inicial dentro dele;
   com foto (`.com-foto` + `.ft`), a foto à esquerda e o nome ao lado. O
   convite para pôr a foto mora FORA do cartão.
   ======================================================================== */
.cart{position:relative;aspect-ratio:85.6/54;max-width:480px;margin-left:auto;margin-right:auto;border-radius:18px;overflow:hidden;color:#fff;margin-top:14px;
  background:linear-gradient(135deg,#1c3742 0%,#2d535c 62%,#40717e 100%);box-shadow:0 18px 40px -16px rgba(28,55,66,.6);
  padding:5.5% 6%;display:flex;flex-direction:column;container-type:inline-size}
.cart::after{content:"";position:absolute;right:-12%;top:-30%;width:60%;height:120%;background:radial-gradient(closest-side,rgba(113,200,226,.25),transparent);pointer-events:none}
.cart .l1{display:flex;align-items:center;gap:10px}
.cart .pill{background:#fff;border-radius:8px;padding:4px 7px;display:flex}
.cart .pill img{height:clamp(16px,6cqw,26px);width:auto}
.cart .rot{font-family:Sora,sans-serif;font-weight:800;letter-spacing:.14em;font-size:clamp(10px,3.3cqw,14px);color:var(--accent,#71c8e2)}
.cart .inst{font-size:clamp(8px,2.4cqw,11px);color:#cfe1e8}
.cart .corpo{flex:1;display:flex;align-items:flex-end;gap:4%;margin-top:3%}
.cart .dados{flex:1;min-width:0}
.cart .nm{font-family:Sora,sans-serif;font-weight:800;font-size:clamp(15px,6cqw,26px);line-height:1.1;overflow-wrap:anywhere}
.cart .cs{font-size:clamp(11px,3.6cqw,15px);color:#dbe8ee;margin-top:3px}
.cart .desde{font-size:clamp(11px,3.4cqw,14px);font-weight:700;margin-top:6%}
.cart .cod{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:clamp(10px,3.2cqw,13px);color:var(--accent,#71c8e2);margin-top:2px;letter-spacing:.04em}
.cart .qr{width:30%;aspect-ratio:1;background:#fff;border-radius:10px;padding:2.2%;flex:none}
.cart .qr img{width:100%;height:100%;display:block}
/* a versão COM FOTO: a foto à esquerda, com moldura arredondada, o nome ao lado, o QR no mesmo lugar */
.cart .ft{width:27%;aspect-ratio:1;border-radius:12px;overflow:hidden;border:2px solid #fff;flex:none;align-self:center;background:#2d535c;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.cart .ft img{width:100%;height:100%;object-fit:cover;display:block}
.cart.com-foto .nm{font-size:clamp(13px,4.8cqw,21px)}
.cart.trancada{filter:grayscale(.35)}
.cart.trancada .dados,.cart.trancada .qr,.cart.trancada .ft{opacity:.35}
.cart .cadeado{position:absolute;inset:0;display:grid;place-items:center;background:rgba(24,38,50,.45);text-align:center;padding:10%;
  font-weight:700;font-size:clamp(13px,4.2cqw,17px);z-index:2}
.cart.nova{animation:surgir .7s ease-out}
@keyframes surgir{from{transform:scale(.94) rotate(-1.5deg);opacity:.2}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.cart.nova{animation:none}}
/* a carteirinha INSTITUCIONAL: a linha miúda, e o aviso legal no pé (estudante) */
.cart .miuda{font-size:clamp(10px,3cqw,13px);color:#b8d3dd;margin-top:2px}
.cart.com-aviso .desde{margin-top:3%}
.cart .lei{font-size:clamp(7.5px,2.25cqw,10px);color:#b8d3dd;line-height:1.3;margin-top:3%;position:relative}
/* (varredura 14) o rótulo numa linha só e o nome da instituição em até duas — a régua do PDF (`tamanhoQueCabe`):
   o corpo do rótulo desce até caber (public/assets/arche-carteirinha.js, `ajustar`) */
.cart .l1 .tx{flex:1;min-width:0}
.cart .rot{white-space:nowrap;overflow:hidden}
.cart .inst{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}