/* Pasaporte digital: formulario, tarjeta de resultado, calendario y QR. Usa los tokens de styles.css. */
.page-pass { background: var(--paper); }
.sh__title--sm { font-size: clamp(3.4rem, 10vw, 8.5rem); }
.pp { padding-block: clamp(30px, 5vw, 60px) clamp(60px, 8vw, 100px); margin-top: calc(clamp(30px, 5vw, 60px) * -1); position: relative; z-index: 2; }
.pp__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(18px, 3vw, 40px); align-items: start; }
.pp__formin { display: grid; gap: 20px; padding: clamp(22px, 3vw, 40px); }
.pp__form { display: grid; gap: 16px; }
.pp__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.inp { font: inherit; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--text); width: 100%; padding: 13px 16px; border-radius: 16px; border: 1px solid var(--hair-l); background: #fffdf8; transition: border-color .3s, box-shadow .3s; min-width: 0; }
.inp:hover { border-color: var(--text); }
.inp:focus { outline: 0; border-color: var(--abyss); box-shadow: 0 0 0 4px rgba(12, 42, 44, .08); }
.hint { font-size: .7rem; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.pp__checks { display: grid; gap: 0; align-content: end; padding-top: 22px; }
.pp__err { padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, #b3453a 12%, transparent); color: #8a2c22; font-size: .88rem; }
.pp__err[hidden] { display: none; }
#pf-species[data-v="gato"] .seg__thumb { transform: translateX(100%); }
.pp__formin .btn { justify-self: start; }

.pp__out { min-height: 420px; }
.pp__empty { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 420px; padding: 30px; text-align: center; color: var(--text-2); border-radius: 36px; border: 1.5px dashed var(--hair-l); }
.pp__empty .ic { font-size: 2.6rem; color: var(--apricot-lo); }
.pcard2 { display: grid; gap: 18px; padding: clamp(20px, 2.6vw, 34px); border-radius: 36px; background: var(--abyss); color: var(--on-dark); position: relative; overflow: hidden; animation: rise .9s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
.pcard2::after { content: ''; position: absolute; right: -12%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--apricot) 30%, transparent), transparent); pointer-events: none; }
.pcard2__top { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; z-index: 1; }
.pcard2__id { display: grid; gap: 4px; }
.pcard2__kicker { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-2); }
.pcard2__name { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: .95; letter-spacing: -.02em; }
.pcard2__sub { color: var(--on-dark-2); font-size: .92rem; }
.pcard2__qr { padding: 10px; border-radius: 20px; background: #f8f3e9; width: 128px; height: 128px; }
.pcard2__qr svg { width: 100%; height: 100%; }
.pcard2__stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pcard2__stats div { padding: 12px 14px; border-radius: 18px; background: rgba(241, 232, 214, .07); border: 1px solid var(--hair-d); }
.pcard2__stats b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1; }
.pcard2__stats span { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.pbar { position: relative; z-index: 1; height: 6px; border-radius: 6px; background: rgba(241, 232, 214, .12); overflow: hidden; }
.pbar i { position: absolute; inset: 0; width: var(--p, 0%); border-radius: 6px; background: linear-gradient(90deg, var(--sage), var(--apricot)); transition: width .9s var(--ease); }
.tl { position: relative; z-index: 1; display: grid; gap: 8px; }
.ev { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 20px; background: rgba(241, 232, 214, .06); border: 1px solid var(--hair-d); transition: background .4s var(--ease), border-color .4s; }
.ev:hover { background: rgba(241, 232, 214, .1); }
.ev__tick { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(241, 232, 214, .4); color: transparent; transition: background .35s, color .35s, border-color .35s, transform .5s var(--ease); }
.ev__tick:hover { transform: scale(1.08); }
.ev.is-done .ev__tick { background: var(--sage); border-color: var(--sage); color: var(--abyss); }
.ev.is-done .ev__n { text-decoration: line-through; text-decoration-color: rgba(241, 232, 214, .4); opacity: .65; }
.ev__n { font-weight: 500; font-size: .95rem; line-height: 1.25; }
.ev__s { display: block; font-size: .76rem; color: var(--on-dark-2); font-weight: 400; margin-top: 2px; }
.ev__d { text-align: right; font-size: .84rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ev__d em { display: inline-block; margin-top: 3px; font-style: normal; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(241, 232, 214, .12); color: var(--on-dark-2); }
.ev[data-st="soon"] .ev__d em { background: var(--apricot); color: var(--abyss); }
.ev[data-st="past"] .ev__d em { background: rgba(224, 138, 82, .22); color: var(--apricot-hi); }
.ev.is-done .ev__d em { background: rgba(157, 184, 164, .25); color: var(--sage); }
.pcard2__foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pcard2__note { position: relative; z-index: 1; font-size: .78rem; color: var(--on-dark-2); }

@media (max-width: 900px) {
  .pp__grid { grid-template-columns: 1fr; }
  .pp { margin-top: -24px; }
}
@media (max-width: 560px) {
  .pp__two { grid-template-columns: 1fr; }
  .pp__checks { padding-top: 0; }
  .pcard2__top { grid-template-columns: 1fr; }
  .pcard2__qr { width: 112px; height: 112px; }
  .pcard2__stats b { font-size: 1.35rem; }
  .ev { grid-template-columns: auto 1fr; }
  .ev__d { grid-column: 2; text-align: left; }
  .pcard2__foot .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .pcard2 { animation: none; } .pbar i { transition: none; } }