/* Reservar cabina (Andrea, 12 nov). Usa el calendario y las pastillas de hora de reservar-dia.css; aquí va lo propio:
   elegir cabina y duración, la hora ocupada con el sello de las hormigas, el ticket de confirmación y «Tus cabinas».
   Líneas de 1 px, peso 400 y solo HB Hue, Suisse y Greed. */
:where(.cabinas) button{font-family:var(--t-suisse)} /* Ningún botón cae en la letra del sistema. */
.cabinas[data-estado="cargando"] :is(.reservar,.cabinas-mias){visibility:hidden}
.cabinas[data-estado="hecho"] .reservar{display:none}
/* Una sola raya entre reservar y «Tus cabinas», y un calendario bajo: aquí solo se eligen 15 días, no hace falta el mes a toda altura. */
.cabinas .reservar{margin-bottom:0;padding-bottom:0;border-bottom:0}
.cabinas .reservar-dias button{aspect-ratio:auto;height:48px}
.cabinas .reservar-cabeza h2{flex:1;order:-1;margin:0;font:400 30px/1.1 var(--t-hue)}
.cabinas .reservar-dias{margin-bottom:6px}
/* Qué es cada cabina: tres renglones con raya fina, antes del calendario. */
.cabinas-ayuda{margin:0 0 28px;max-width:46ch;border-top:1px solid #d6d6d6}
.cabinas-ayuda div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid #d6d6d6;font:400 15px/20px var(--t-suisse)}
.cabinas-ayuda dd{margin:0;text-align:right;color:var(--tinta-suave)}
.cabinas-etq{margin:30px 0 10px}
.cabinas-etq[hidden]{display:none}

/* Cabina y duración: pastillas como las horas, con el dato pequeño debajo. */
.cabinas-cuales{display:flex;flex-wrap:wrap;gap:6px}
.cabinas-cuales button{display:grid;align-content:center;justify-items:start;gap:1px;min-height:48px;padding:6px 18px;border:1px solid #d6d6d6;border-radius:72px;background:var(--blanco);color:var(--tinta);cursor:pointer;text-align:left;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.cabinas-cuales b{font:400 15px/18px var(--t-suisse)}
.cabinas-cuales small{font:400 12px/14px var(--t-suisse);color:var(--tinta-suave)}
.cabinas-cuales button[aria-pressed="true"]{border-color:var(--tinta);background:var(--tinta);color:#fff}
.cabinas-cuales button[aria-pressed="true"] small{color:#e2e2e2}
.cabinas-cuales button:disabled{border-style:dashed;border-color:#b5b5b5;background:none;color:#6f6f6f;cursor:default}
.cabinas-cuales button:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

/* Elegir cabina: la sala dibujada como en el Salón (cabinas-escena.js). El SVG ocupa la fila de arriba y los carteles la de
   abajo; cada botón cubre su sala y su cartel. Las columnas las pone cabinas.js según el ancho de cada sala. */
.cabinas-escena{display:grid;grid-template-rows:auto auto;max-width:600px}
.cabinas-escena:empty{display:none}
#cabinas-lista{margin:0;padding:0}
.cabinas-escena svg{grid-area:1/1/2/-1;display:block;width:100%;height:auto}
.sala-boton{grid-row:1/3;z-index:1;min-width:44px;min-height:44px;padding:0;border:0;border-radius:6px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sala-boton:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}
.sala-cartel{grid-row:2;display:grid;align-content:start;justify-items:center;gap:2px;padding:8px 2px 4px;text-align:center}
.sala-cartel b{border-bottom:1px solid transparent;font:400 clamp(10.5px,3.3vw,13px)/16px var(--t-greed);letter-spacing:.03em;text-transform:uppercase;text-wrap:balance}
.sala-cartel[data-elegida] b{border-color:var(--tinta)}
.sala-cartel small{font:400 12px/15px var(--t-suisse);color:var(--tinta-suave)}
.sala-estado:empty{display:none}
.sala-cartel[data-estado="pocas"] .sala-estado{color:#8a5a00}
/* La luz. Sin elegir, todas tenues y parejas. Con una elegida, cae sobre ella una luz fuerte desde su bombilla: haz cálido hasta el suelo,
   charco de luz, interior más claro y saturado, bombilla blanca y halo grande; las demás se oscurecen y apagan su lámpara.
   Solo opacity y transform, 450 ms con la curva de la web, sin rebote. */
.sala-luz{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .45s var(--sal),transform .45s var(--sal)}
.sala[data-estado="libre"] .calida{opacity:.5}
.sala[data-estado="pocas"] .ambar{opacity:.6}
.sala[data-elegida][data-estado="libre"] .calida,.sala[data-elegida][data-estado="pocas"] .ambar{opacity:1;transform:scale(1.5)}
.cabinas-escena:has(.sala[data-elegida]) .sala:not([data-elegida])[data-estado="libre"] .calida{opacity:.2}
.cabinas-escena:has(.sala[data-elegida]) .sala:not([data-elegida])[data-estado="pocas"] .ambar{opacity:.26}
.sala-globo{fill:#ffdb9b;transition:fill .45s var(--sal)}
.sala[data-estado="pocas"] .sala-globo{fill:#ffb23e}
.sala[data-estado="llena"] .sala-globo{fill:#9d9d9d}
.sala[data-elegida]:is([data-estado="libre"],[data-estado="pocas"]) .sala-globo{fill:#fffdf0}
.sala-sombra,.sala-brillo,.sala-haz,.sala-charco{opacity:0;pointer-events:none;transform-box:fill-box;transition:opacity .45s var(--sal),transform .45s var(--sal)}
.sala-sombra{transition-duration:.45s}
.sala-brillo{mix-blend-mode:soft-light}
.sala-haz{fill:url(#sala-haz-calido);transform-origin:50% 0;transform:scaleY(.55)}
.sala-charco{fill:url(#sala-charco-calido);transform-origin:50% 50%;transform:scale(.55)}
.sala[data-estado="pocas"] .sala-haz{fill:url(#sala-haz-ambar)}
.sala[data-estado="pocas"] .sala-charco{fill:url(#sala-charco-ambar)}
.cabinas-escena:has(.sala[data-elegida]) .sala:not([data-elegida]) .sala-sombra{opacity:.42}
.sala[data-elegida]:is([data-estado="libre"],[data-estado="pocas"]) :is(.sala-brillo,.sala-haz,.sala-charco){opacity:1;transform:none}
.sala-cerrada,.sala-borde{opacity:0;transition:opacity .2s ease-out}
.sala[data-estado="llena"] .sala-cerrada{opacity:1}
.sala[data-elegida] .sala-borde{opacity:.45} /* El contorno queda como pista que no depende de la luz; la luz hace el trabajo. */

/* Hora ocupada: el sello de las hormigas, no una X. */
.cabinas .reservar-horas{margin-top:0}
.cabinas .reservar-horas[aria-busy="true"]{opacity:.45}
.cabinas .reservar-horas button.ocupada{grid-template-columns:auto auto;column-gap:6px;align-items:center;color:#6b6b6b}
.cabinas .reservar-horas button.ocupada::before{content:"";grid-row:1/span 2;width:14px;height:14px;background:url("/mi-eito/cuenta/simbolo.svg") 50%/contain no-repeat;opacity:.5}
.cabinas .reservar-horas button.ocupada small{color:inherit}
.cabinas-leyenda{margin:14px 0 0}
.cabinas-leyenda[hidden]{display:none}
.cabinas-leyenda .ocupada::before{width:12px;height:12px;border-radius:0;background:url("/mi-eito/cuenta/simbolo.svg") 50%/contain no-repeat;opacity:.6;vertical-align:-2px}
.cabinas-entrar{margin:-14px 0 24px;max-width:46ch;font:400 15px/21px var(--t-suisse)}
.cabinas-nota{margin:14px 0 0;max-width:46ch;color:var(--tinta-suave)}
.cabinas-nota:empty,.cabinas-nota[hidden]{display:none}

.cabinas-cuenta{margin:0;font:400 15px/21px var(--t-suisse)}
.cabinas-cuenta:empty{display:none}
.cabinas-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding-top:10px;border-top:1px solid #d6d6d6}
.cabinas-total[hidden]{display:none}
.cabinas-total>span{font:400 13px/18px var(--t-greed);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave)}
.cabinas-total b{font:400 24px/1.1 var(--t-hue)}
/* Reservar sin poder: gris claro con línea fina y texto gris (antes #333 casi igual que el activo). Solo aquí; .seguir es de más páginas. */
.cabinas .reservar-resumen .seguir[hidden],.cabinas .reservar-elegido:empty{display:none}
.cabinas .reservar-resumen .seguir:disabled{border:1px solid #d6d6d6;background:#f4f4f4;color:#5c5c5c}
.cabinas-square{justify-self:center;font:400 12px/16px var(--t-suisse);color:var(--tinta-suave)}
.cabinas-square[hidden]{display:none}

/* «Reintentar» con forma de botón fino, como «Cancelar» (.pastilla). */
.cabinas .reintentar{justify-self:start;justify-content:center;padding:0 22px;border-radius:72px;background:#ebebeb;font:400 14px/1 var(--t-suisse);letter-spacing:0;text-decoration:none}
.cabinas .reintentar:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

/* Confirmación: un ticket pequeño de líneas finas con el sello. */
.cabinas-hecho{display:grid;justify-items:start;gap:16px;max-width:560px;margin:8px 0 48px}
.cabinas-hecho[hidden]{display:none}
.cabinas-hecho-titulo{margin:0;font:400 56px/1 var(--t-hue);letter-spacing:-.02em;text-wrap:balance;outline:0}
.cabinas-hecho-titulo .resto{display:block}
.cabinas-hecho-frase{margin:0;max-width:46ch}
.cabinas-hecho-frase:empty{display:none}
.cabina-ticket{position:relative;width:min(100%,340px);padding:18px 20px 16px;border:1px solid var(--tinta);border-radius:12px;background:var(--blanco)}
.cabina-ticket[hidden]{display:none}
.cabina-ticket p{margin:0}
.cabina-ticket .etq{font-size:12px;line-height:15px;letter-spacing:1px}
.cabina-ticket-nombre{margin-top:6px;padding-right:64px;font:400 30px/1.05 var(--t-hue);letter-spacing:-.01em;text-wrap:balance}
.cabina-ticket dl{margin:16px 0 0;padding-top:4px;border-top:1px dotted var(--tinta)}
.cabina-ticket dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid #d6d6d6;font:400 15px/20px var(--t-suisse)}
.cabina-ticket dl div:last-child{border-bottom:0;padding-bottom:0}
.cabina-ticket dt{flex:none;font:400 13px/20px var(--t-greed);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave)}
.cabina-ticket dd{margin:0;text-align:right;white-space:pre-line;font-variant-numeric:tabular-nums}
.cabina-ticket-sello{position:absolute;right:14px;top:12px;width:52px;height:52px;rotate:-10deg}

.cabinas-mias{max-width:none;margin-top:48px}
.cabinas-mias .reservas-lista small{flex:1 1 100%;font:400 14px/18px var(--t-suisse);color:var(--tinta-suave)}

@media (hover:hover) and (pointer:fine){
  .cabinas-cuales button:not(:disabled,[aria-pressed="true"]):hover{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
}
/* Escritorio: a la izquierda día, hora, duración y el resumen con su botón (sin tarjeta); a la derecha, la sala de cabinas fija. */
@media (min-width:992px){
  .perfil.cabinas{width:min(1180px,100%)}
  .cabinas .reservar{grid-template-columns:minmax(0,1fr) clamp(380px,36vw,500px);grid-template-rows:repeat(14,auto);row-gap:0}
  .cabinas .reservar-elegir{display:contents}
  .cabinas .reservar-elegir>:not(.cabinas-lado),.cabinas .reservar-resumen{grid-column:1;max-width:600px}
  .cabinas-lado{grid-column:2;grid-row:1/-1;position:sticky;top:24px;align-self:start}
  .cabinas-lado>.cabinas-etq{margin-top:0}
  .cabinas-lado .cabinas-ayuda{margin:18px 0 0}
  .cabinas .reservar-resumen{position:static;margin-top:40px;padding:20px 0 0;border:0;border-top:1px solid var(--tinta);border-radius:0;background:none}
  .cabinas .reservar-resumen .seguir{justify-self:start;width:min(100%,360px)}
}
@media (max-width:991px){
  .cabinas .reservar-cabeza h2{font-size:26px}
  .cabinas-hecho-titulo{font-size:40px}
  /* El resumen va fijo abajo: «Tus cabinas» deja sitio para que no lo tape. */
  .cabinas-mias{margin-bottom:24px}
}
@media (max-width:389px){
  /* A 360 px, siete días con hueco de 6 px miden 43,2 px: con 4 px llegan a 44,9. */
  .cabinas .reservar-semana,.cabinas .reservar-dias{gap:4px}
}
@media (max-width:359px){
  /* A 320 px, siete días de 44 px no caben con hueco: el calendario gana 4 px por lado y los días van juntos. */
  .cabinas .reservar-semana,.cabinas .reservar-dias{gap:0;margin-inline:-4px}
  .cabinas-cuales button{padding-inline:14px}
  .cabinas .reservar-horas button{min-width:60px}
}
/* Movimiento (un solo reloj: .32 s, curva --sal, sin rebote; solo opacity y translate). Cascada al abrir; las horas solo al cambiar de día. */
.cabinas[data-estado="elegir"] .reservar-elegir>:not(#reservar-horas){animation:entra .32s var(--sal) calc(min(var(--i,0),10)*40ms) backwards}
.cabinas[data-estado="elegir"] .reservar-resumen{animation:entra .36s var(--sal) .22s backwards}
.cabinas .reservar-horas button{animation:none}
.cabinas .reservar-horas button.nueva{animation:entra .26s var(--sal) calc(var(--b,0ms) + var(--n,0)*22ms) backwards}
.cabinas[data-estado="elegir"] .cabinas-mias{animation:entra .32s var(--sal) .3s backwards}
.cabinas-hecho:not([hidden])>*{animation:entra .32s var(--sal) backwards}
.cabinas-hecho>:nth-child(2){animation-delay:40ms}.cabinas-hecho>:nth-child(n+4){animation-delay:360ms}
.cabinas-hecho .cabina-ticket:not([hidden]){animation:imprime .5s var(--sal) .1s backwards}
.cabina-ticket-sello{animation:sella-ticket .3s var(--sal) .5s backwards}
@keyframes sella-ticket{from{opacity:0;scale:1.5}}
@media (prefers-reduced-motion:reduce){
  .cabinas-cuales button,.sala-luz,.sala-globo,.sala-sombra,.sala-brillo,.sala-haz,.sala-charco,.sala-cerrada,.sala-borde{transition:none}
  .cabinas[data-estado="elegir"] .reservar-elegir>*,.cabinas[data-estado="elegir"] .reservar-resumen,.cabinas .reservar-horas button.nueva,.cabinas[data-estado="elegir"] .cabinas-mias,.cabinas-hecho>*,.cabinas-hecho .cabina-ticket,.cabina-ticket-sello{animation:none!important}
}

/* Página pública de reservas (/mi-eito/cuenta/reservas): el botón hacia la reserva con cuenta. */
.reservas-pie{margin:28px 0 12px}
.reservas-pie .pastilla{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 32px;border:1px solid var(--tinta,#000);border-radius:72px;background:#ebebeb;color:#000;font:400 15px/20px var(--t-greed);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:transform .2s ease}
.reservas-pie .pastilla:focus-visible{outline:2px solid #000;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.reservas-pie .pastilla:hover{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.reservas-pie .pastilla{transition:none}}