/* Perfil: la comanda con el pase y el talón con el QR. Colores de cada pase: los de .pass-header en el CSS publicado de somoseito.io. */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.perfil{--papel:var(--blanco);--t-papel:#000;width:min(1040px,100%);margin:8px auto 72px;position:relative}
/* Fable, 10 nov: el billete crecía y el selector lo empujaba al llegar /api/pases (CLS 0,3 en móvil). Mientras carga, billete, compra y pie
   no ocupan sitio ni se ven; salen de una vez ya colocados. Si tarda más de 0,3 s, gira el símbolo de eito (absoluto: no mueve nada). */
.perfil[data-pase="cargando"] :is(.billete,.perfil-compra){display:none}
body:has(.perfil[data-pase="cargando"]) .pie{visibility:hidden}
.perfil[data-pase="cargando"]::before{content:"";position:absolute;left:50%;top:120px;width:44px;height:44px;margin-left:-22px;background:url("/mi-eito/cuenta/simbolo.svg") center/contain no-repeat;animation:gira 1.2s linear infinite,tarde .15s linear .3s both}
.perfil[data-tipo="dia"]{--papel:#cba3ef}.perfil[data-tipo="medio-dia"]{--papel:#ffe576}.perfil[data-tipo="x5"]{--papel:#ec664f}
.perfil[data-tipo="x10"]{--papel:#aaa593}.perfil[data-tipo="medio-x5"]{--papel:#f19efa}.perfil[data-tipo="ilimitado"]{--papel:#314edd;--t-papel:#fff}
/* 1 h rosa y 2 h ámbar, como el cartel (foto de Andrea, 10 nov, IMG_2012 2.HEIC). Medidos de la foto y ajustados con los otros seis colores: el hex exacto del archivo del cartel queda pendiente. */
.perfil[data-tipo="1h"]{--papel:#f6b8d1}.perfil[data-tipo="2h"]{--papel:#f1b200}
/* Andrea, 10 nov: la comanda toma el color del pase que compró, también sin activar. Un anulado no se enseña (perfil vacío). */

.perfil-barra{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-bottom:10px}
.perfil-pases{display:grid;gap:6px;max-width:640px;margin:0 0 18px}
.perfil-pases[hidden]{display:none}
.perfil-pases label{font:400 16px/22px var(--t-suisse)}
.perfil-pases select{-webkit-appearance:none;appearance:none;width:100%;min-height:48px;padding:12px 48px 12px 14px;border:1px solid var(--tinta);border-radius:8px;color:var(--tinta);font:400 16px/22px var(--t-suisse);text-overflow:ellipsis;cursor:pointer;
  background:linear-gradient(45deg,#0000 50%,currentColor 50%) calc(100% - 25px) 50%/6px 6px no-repeat,linear-gradient(135deg,currentColor 50%,#0000 50%) calc(100% - 19px) 50%/6px 6px no-repeat,var(--blanco);transition:border-color .2s ease,box-shadow .2s ease}
.perfil-pases select:hover{box-shadow:0 0 0 1px var(--tinta)}
.perfil-pases select:disabled{opacity:.55;cursor:default}
.perfil-salir,.reintentar{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:inherit;cursor:pointer;font:400 15px/18px var(--t-greed);text-transform:uppercase;letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px}

.billete{display:grid;grid-template-columns:minmax(0,1fr) 340px;filter:drop-shadow(0 18px 28px rgba(40,40,40,.10)) drop-shadow(0 2px 3px rgba(40,40,40,.06));transition:translate .3s var(--sal),rotate .3s var(--sal),filter .3s var(--sal)}
/* Andrea, 10 nov: al pasar por encima, el billete se levanta un poco y el sello gira. Solo con ratón y si no se pide menos movimiento. */
.sello{transition:rotate .35s var(--sal)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .billete:hover{translate:0 -6px;rotate:-.6deg;filter:drop-shadow(0 26px 36px rgba(40,40,40,.16)) drop-shadow(0 3px 5px rgba(40,40,40,.08))}
  .billete:hover .sello{rotate:6deg}
}
.perfil .comanda{display:block;min-height:480px;padding:26px 30px 30px;background:var(--papel);color:var(--t-papel);border-radius:var(--radio) 0 0 var(--radio);transition:background-color .35s var(--sal),color .35s var(--sal);
  -webkit-mask:radial-gradient(circle var(--muesca) at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--muesca) at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--muesca) at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--muesca) at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  animation:papel .42s var(--cajon) backwards}
@keyframes papel{from{clip-path:inset(0 0 100% 0)}}
.perfil .talon{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:30px 28px;border-radius:0 var(--radio) var(--radio) 0;font-size:15px;line-height:21px;
  -webkit-mask:radial-gradient(circle var(--muesca) at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--muesca) at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--muesca) at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--muesca) at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.perfil .talon::before{left:-1px;right:auto;top:calc(var(--muesca) + 6px);bottom:calc(var(--muesca) + 6px);width:2px;height:auto;background:radial-gradient(circle,rgba(0,0,0,.42) 1px,transparent 1.4px) 50% 0/2px 8px repeat-y}
.talon .etq{margin:0 0 6px}

.foto{float:right;position:relative;display:grid;place-items:center;width:208px;height:252px;margin:2px 4px 14px 20px;border:1px dashed currentColor;border-radius:10px;rotate:2.5deg;overflow:hidden;font:400 15px/18px var(--t-greed);text-transform:uppercase;letter-spacing:.04em}
.foto:has(img){border-color:transparent}
.foto img{display:block;width:100%;height:100%;object-fit:cover}
.nombre{margin:2px 0 0;font:400 132px/.92 var(--t-hue);letter-spacing:-.035em;overflow-wrap:normal;hyphens:none}
/* En bloque: con la letra más pequeña, la altura de línea es la suya y no la del h1 (Fable r2: huecos con nombres largos). */
#nombre{display:block}
#nombre[data-largo="1"]{font-size:88px}#nombre[data-largo="2"]{font-size:56px;line-height:1}
.pase-linea{display:grid;justify-items:start;gap:10px;margin:24px 0 22px}
.pase-nombre{margin:0;font:400 40px/1.05 var(--t-hue);letter-spacing:-.02em;text-wrap:balance}
.pase-nombre:empty,.marca:empty,.pase-frase:empty{display:none}
.marca{max-width:calc(100% - 16px);margin-top:12px;padding:6px 10px 5px;border:1px solid currentColor;border-radius:6px;font:400 22px/24px var(--t-greed);text-transform:uppercase;letter-spacing:.06em;rotate:-6deg;animation:sella .2s var(--sal) .5s backwards}
@keyframes sella{from{scale:1.6;opacity:0}}
.pase-frase{margin:0;max-width:44ch;font-size:15px;line-height:21px}
.sello{position:absolute;right:calc(34px + 208px - 44px);top:calc(28px + 252px - 56px);width:72px;height:72px;rotate:-8deg}
.perfil:is([data-pase="ninguno"],[data-pase="no-disponible"],[data-pase="cargando"]) .sello{display:none}

.filas{clear:both;margin:0;padding:0;border-top:1px solid currentColor}
.fila{display:grid;grid-template-columns:8.2em minmax(0,1fr);gap:4px 14px;align-items:baseline;padding:11px 0 10px;border-bottom:1px dotted currentColor}
.fila dt{font:400 15px/18px var(--t-greed);text-transform:uppercase;letter-spacing:.04em}
.fila dd{margin:0;font-size:15px;line-height:20px}
.usos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}.usos:empty{display:none}
.usos i{display:grid;place-items:center;width:36px;height:36px;border:1px dashed currentColor;border-radius:50%}
.usos i.gastado{border-style:solid;rotate:var(--r,0deg);animation:sella .2s var(--sal) calc(var(--k,0) * 130ms + 560ms) backwards}
.usos svg{display:block;width:74%;height:74%}

.qr{display:grid;place-items:center;width:100%;max-width:240px;aspect-ratio:1;margin:0 auto;border-radius:12px;background:#fff}
.qr svg{display:block}
.qr-fallo .qr{border:1px dashed #000}
.perfil-compra{max-width:860px;margin-top:32px;margin-bottom:110px;padding-top:24px;border-top:1px solid var(--tinta)} /* El margen deja sitio a la barra de «Pagar», que es fija. */
.perfil-compra p{max-width:56ch}
.compra-vuelta .pase-nombre{margin-bottom:24px}
.compra-vuelta .botones{display:grid;gap:12px;max-width:640px}
/* Avisos vacíos y botones ocultos no dejan hueco (vuelta de Square, 10 nov). */
.compra-vuelta p:empty,.compra-vuelta .botones:not(:has(>:not([hidden]))){display:none}
.compra-vuelta .botones .seguir{text-align:center;text-decoration:none}
.compra-vuelta .enlaces{margin-top:28px}
.compra-vuelta:not([data-estado="emitido"]) .billete{grid-template-columns:minmax(0,1fr)}
.compra-vuelta:not([data-estado="emitido"]) .comanda{min-height:0;border-radius:var(--radio);-webkit-mask:none;mask:none}

@media (max-width:991px){
  .billete{grid-template-columns:minmax(0,1fr)}
  .perfil .comanda{min-height:0;padding:20px 18px 22px;border-radius:var(--radio) var(--radio) 0 0;
    -webkit-mask:radial-gradient(circle var(--muesca) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat;
    mask:radial-gradient(circle var(--muesca) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat}
  .perfil .talon{display:flex;padding:22px 18px;border-radius:0 0 var(--radio) var(--radio);
    -webkit-mask:radial-gradient(circle var(--muesca) at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% 0,#0000 98%,#000) right/51% 100% no-repeat;
    mask:radial-gradient(circle var(--muesca) at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% 0,#0000 98%,#000) right/51% 100% no-repeat}
  .perfil .talon::before{left:calc(var(--muesca) + 6px);right:calc(var(--muesca) + 6px);top:-1px;bottom:auto;width:auto;height:2px;background:radial-gradient(circle,rgba(0,0,0,.42) 1px,transparent 1.4px) 0 50%/8px 2px repeat-x}
  .foto{width:112px;height:136px;margin:0 0 10px 12px}
  .nombre{font-size:clamp(44px,14vw,72px);line-height:1}
  #nombre[data-largo="1"]{font-size:clamp(38px,11vw,60px)}#nombre[data-largo="2"]{font-size:clamp(28px,8vw,44px)}
  .pase-nombre{font-size:32px}
  .marca{font-size:18px;line-height:20px}
  .fila{grid-template-columns:minmax(0,1fr);gap:6px}
  .sello{right:calc(18px + 112px - 34px);top:calc(20px + 136px - 40px);width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  .perfil[data-pase="cargando"]::before{animation:tarde .15s linear .3s both}
  .perfil .comanda,.marca,.usos i.gastado{animation:aparece .2s ease;animation-delay:0s}
  .perfil .comanda{transition:none}
}
/* Reservas de día del pase (Fable 7m-7o, B1). Botones como el COMPRAR de somoseito.io (.pass-button): #ebebeb, pastilla, Suisse 500 14px. */
.perfil-reservas{max-width:640px;margin-top:32px;padding-top:24px;border-top:1px solid var(--tinta)}
.reservas-lista{margin:12px 0 0;padding:0;list-style:none}
.reservas-lista li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 0;border-bottom:1px solid #d6d6d6}
.reservas-lista span{font:400 22px/1.15 var(--t-hue)}
.reservas-aviso{margin:12px 0 0;font-weight:400;outline:0}.reservas-aviso:empty{display:none}
.pastilla{min-height:44px;padding:0 22px;border:0;border-radius:72px;background:#ebebeb;color:#000;cursor:pointer;font:400 14px/1 var(--t-suisse);text-transform:uppercase;transition:transform .2s var(--sal)}
.pastilla[data-confirmar]{background:#000;color:#fff}
.pastilla[aria-disabled="true"]{opacity:.55;cursor:progress}
.pastilla:focus-visible,.reservar-no:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
#reservas-abrir{margin-top:16px}
.perfil .reservar{margin-top:32px}
button.reservar-no{border:0;background:none;color:inherit;cursor:pointer;text-decoration:underline;font:inherit;font-size:15px}
@media (hover:hover) and (pointer:fine){.pastilla:not([aria-disabled="true"]):hover{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.pastilla{transition:none}.pastilla:hover{transform:none}}

.hueco-rasca{margin:32px 0 8px}