/* ══════════════════════════════════════════════════════════════════
   MIS ENTRADAS — lo puntual de esta página, arriba del sistema de la
   portada (portada.css, cargado antes que esto en index.html).

   No hay paleta ni tipografía propia acá: los tokens (--tinta-2, --fluor,
   --hueso, --mono...), la barra, el carril y sobre todo LA ENTRADA
   (.evento → .afiche/.papel → .perf → .talon) son los mismos de la
   portada. Cada compra guardada se dibuja con esas clases tal cual —
   `.evento.compra` reutiliza el troquelado entero y esta hoja sólo agrega
   lo que la portada no necesitaba: el rótulo de "pasó", la cantidad de
   entradas en vez del precio, los botones del talón (ver / quitar /
   guardar en mi cuenta) y, desde que hay cuenta, el formulario de entrar
   y el renglón de "Tu cuenta".
   ══════════════════════════════════════════════════════════════════ */

/* ── el aviso ──
   Mono y apagado, como cualquier letra chica del sitio: se lee si se busca,
   no grita. Va debajo de la bajada y no en el pie, porque el momento en que
   importa es ANTES de que alguien confíe en que la lista va a estar mañana. */
.mia-aviso{
  margin-top:14px;max-width:56ch;
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1.55;
  color:var(--hueso-40);
}

/* ── "Tu cuenta · correo · Salir" ──
   Un renglón en el hero, no un bloque: es un dato de contexto (quién está
   adentro) y una salida, nada que haya que mirar dos veces. El correo puede
   ser largo y en 375px no entra con todo lo demás, así que corta con
   puntos suspensivos antes que romper la línea; "Salir" queda a la derecha
   con sus 44px de alto aunque el texto sea chico. */
.cuenta-cab{
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  margin-top:16px;min-width:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--hueso-64);
}
.cuenta-rotulo{flex:0 0 auto;text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--fluor)}
.cuenta-sep{flex:0 0 auto;color:var(--hueso-40)}
.cuenta-mail{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hueso)}
.cuenta-salir{
  flex:0 0 auto;min-height:44px;padding:0 12px;margin-right:-12px;
  background:transparent;border:0;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hueso-64);text-decoration:underline;text-underline-offset:3px;
  transition:color .18s ease;
}
.cuenta-salir:hover,.cuenta-salir:focus-visible{color:var(--hueso)}

/* ── entrar / crear cuenta ──
   Una caja sola, centrada, con el mismo borde punteado del cartel de vacío
   (.cartel): es "lo que falta", no una pieza a la venta. Los campos copian
   los del formulario comercial (comercial.css: fondo --tinta-2, filo, foco
   en fluor) sin cargar esa hoja entera —son cuatro reglas— para que un
   input acá se vea igual que en cualquier otro formulario del sitio. */
.entrar{padding:0 0 clamp(26px,5vw,44px)}
.entrar-caja{
  max-width:520px;margin:0 auto;
  border:1.5px dashed var(--tinta-3);border-radius:14px;
  padding:clamp(22px,5vw,34px) clamp(18px,4.5vw,30px);
}
.entrar-titulo{
  font-weight:900;font-stretch:104%;
  font-size:clamp(21px,5vw,27px);letter-spacing:-.03em;text-transform:uppercase;
  line-height:.98;text-wrap:balance;
}
.entrar-bajada{margin-top:10px;color:var(--hueso-64);font-size:14.5px;line-height:1.5}

.forma{display:grid;gap:14px;margin-top:20px}
.forma .campo{display:flex;flex-direction:column;gap:7px}
.forma .campo span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hueso-40);
}
.forma .campo span em{font-style:normal;text-transform:none;letter-spacing:.04em;color:var(--hueso-40)}
.forma input{
  width:100%;min-height:50px;padding:0 14px;border-radius:11px;
  background:var(--tinta-2);color:var(--hueso);
  border:1px solid var(--filo);
  font-family:var(--display);
  /* 16px clavados: abajo de eso iOS hace zoom al tocar el campo y deja la
     página corrida. La misma regla que .busca en la portada. */
  font-size:16px;
  transition:border-color .2s ease,background .2s ease;
}
.forma input:focus{outline:none;border-color:var(--fluor);background:var(--tinta-3)}
.forma input[aria-invalid="true"]{border-color:#FFB4A8}
.forma-error{color:#FFB4A8;font-size:14px;line-height:1.4}
.forma-nota{font-size:12.5px;color:var(--hueso-40);line-height:1.45;margin-top:-4px}

/* El botón de la caja: el mismo fluor de .cartel .btn, a todo el ancho
   porque en un teléfono un botón de enviar que no ocupa el renglón parece
   secundario. :disabled es "estamos en eso", no "no se puede". */
.forma .btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:48px;padding:0 22px;border:0;border-radius:11px;cursor:pointer;
  background:var(--fluor);color:var(--tinta);
  font-family:var(--display);font-size:15.5px;font-weight:700;letter-spacing:-.005em;
  transition:background .16s ease,transform .16s var(--curva);
}
.forma .btn:hover:not(:disabled){background:#FFF08C;transform:translateY(-1px)}
.forma .btn:disabled{opacity:.6;cursor:default;transform:none}

/* "¿Primera vez? Crear cuenta" / "¿Ya tenés cuenta? Entrar": un botón con
   cara de link, 44px de alto aunque la letra sea chica. */
.forma-cambio{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:14px;color:var(--hueso-64);
}
.forma-cambio button{
  min-height:44px;padding:0 6px;margin-left:-6px;
  background:transparent;border:0;cursor:pointer;
  font:inherit;font-weight:600;color:var(--hueso);
  text-decoration:underline;text-underline-offset:3px;
}
.forma-cambio button:hover,.forma-cambio button:focus-visible{color:var(--fluor)}

/* El WhatsApp de soporte: la única recuperación de contraseña que existe. */
.wa{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;margin-top:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--hueso-64);text-decoration:underline;text-underline-offset:3px;
  transition:color .18s ease;
}
.wa:hover,.wa:focus-visible{color:var(--hueso)}
.wa svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}

/* ── el estado de la cuenta ──
   "Buscando…" o "no se pudo": un renglón mono arriba de la lista. Con
   error, un botón de reintentar al lado; la lista local sigue abajo igual. */
.estado{padding-bottom:clamp(14px,3vw,22px)}
.cuenta-estado{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1.5;
  color:var(--hueso-64);
}
.cuenta-estado[data-tipo="error"]{color:#FFB4A8}
.cuenta-estado button{
  min-height:44px;padding:0 10px;margin-left:-10px;
  background:transparent;border:0;cursor:pointer;
  font:inherit;text-transform:uppercase;letter-spacing:.08em;
  color:var(--hueso);text-decoration:underline;text-underline-offset:3px;
}

.proximas{padding-bottom:clamp(30px,5vw,50px)}
/* El corte entre lo que sigue en pie y lo que ya pasó: una línea, no una
   caja. Con eventos guardados de sobra la lista de abajo puede ser larga y
   no hace falta más ceremonia que la que ya usa el resto del sitio. */
.pasadas{
  border-top:1px solid var(--filo);
  padding:clamp(30px,5vw,46px) 0 clamp(40px,6vw,62px);
}

.vacio{padding:clamp(24px,5vw,40px) 0 clamp(56px,9vw,90px)}

/* ── la tarjeta de una compra ──
   Vive sobre `.evento`: fondo, radio, sombra, el respiro del troquel a
   210/152px de ancho de contenedor, todo eso lo trae la portada gratis.
   Acá sólo lo que le falta a una tarjeta que junta dos botones en vez de
   ser un solo link. */
.compra{cursor:default}   /* no es la pieza la que se toca, son sus botones */

/* Sin flyer nunca (esta lista no guarda artes), el papel es la única
   superficie de la tarjeta y por eso NO lleva aria-hidden: a diferencia de
   la cartelera, acá no hay una imagen con su propio alt que ya diga el
   nombre por otro lado. */
.compra .papel{justify-content:flex-end}

/* La cuenta de entradas ocupa el lugar del precio en el talón: mismo
   tratamiento tipográfico (mono, gris, versalitas), otro dato. No se
   reusa `.desde` a propósito — esa clase dice "precio" en el resto del
   sitio y esto no lo es. */
.cant{
  flex:0 0 auto;color:var(--hueso-40);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
}

/* Dónde está guardada esta compra: en la cuenta (viaja) o sólo en este
   teléfono (no). Una etiqueta mono al lado de la fecha; la que importa es
   la segunda, que es la que pide hacer algo, y por eso va en fluor. */
.cuando .etq{
  margin-left:auto;flex:0 0 auto;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hueso-40);
}
.cuando .etq.local{color:var(--fluor)}

/* La fila de acciones reutiliza `.accion` (ya la trae la portada, para el
   precio + botón de la entrada grande). "Ver entrada" manda, "Quitar" es
   la salida chica y va al otro extremo. */
.compra .accion{margin-top:16px}
/* `.ver` ya mide 46px y ya tiene su forma; sólo le faltaba reaccionar al
   toque porque en la portada ese relleno lo dispara el :hover de un padre
   (`.destacado`) que acá no existe. */
.compra .ver:hover,.compra .ver:focus-visible{background:var(--fluor);color:var(--tinta)}

.quitar{
  min-height:44px;padding:0 8px;background:transparent;border:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hueso-40);cursor:pointer;
  transition:color .18s ease;
}
.quitar:hover,.quitar:focus-visible{color:var(--hueso)}

/* "Guardar en mi cuenta": el botón que aparece con sesión en una compra
   que sólo está en este teléfono. Contorneado y a todo el ancho del talón,
   debajo de la fila de acciones: es la acción nueva de la tarjeta y no
   puede confundirse con "Ver entrada" ni esconderse como "Quitar". */
.vincular{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:44px;margin-top:10px;padding:0 14px;
  background:transparent;border:1px solid var(--filo);border-radius:8px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hueso);
  transition:border-color .18s ease,color .18s ease;
}
.vincular:hover:not(:disabled),.vincular:focus-visible{border-color:rgba(255,226,75,.5);color:var(--fluor)}
.vincular:disabled{opacity:.5;cursor:default}

/* ── lo que ya pasó ──
   Apagada y sin el gesto de "esto se abre": la misma idea que `.agotado`
   en la cartelera (grises, quieta), aplicada a una tarjeta que ya cumplió
   su función y ahora sólo sirve de comprobante. "Ver entrada" se queda
   activo — sigue siendo el QR de esa noche, por si alguna vez hace falta
   probar que se entró. */
.compra.pasada{opacity:.6}
.compra.pasada:hover{transform:none;box-shadow:inset 0 0 0 1px var(--canto)}
.compra.pasada .papel{filter:grayscale(.7)}

/* ── el toast con deshacer ──
   Mismo mecanismo que el resto del sitio (abajo, centrado, entra desde el
   piso) pero con los tokens de la portada y un botón adentro: acá el toast
   no es sólo un aviso, es la salida de "me arrepentí". */
.toast{
  position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));
  transform:translate(-50%,150%);
  z-index:200;max-width:calc(100vw - 32px);
  display:flex;align-items:center;gap:4px;
  background:var(--hueso);color:var(--tinta);border-radius:6px;
  padding-left:16px;min-height:50px;
  font-family:var(--display);font-size:14.5px;line-height:1.3;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  transition:transform .3s var(--curva);
}
.toast[data-on="1"]{transform:translate(-50%,0)}
.toast span{padding:10px 0}
/* Sin botón adentro (un aviso pelado) el texto necesita su propio margen
   derecho; con botón, el botón ya lo trae. */
.toast span:last-child{padding-right:16px}
.toast button{
  flex:0 0 auto;min-height:44px;padding:0 14px;background:transparent;border:0;
  font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta);text-decoration:underline;
  text-underline-offset:2px;cursor:pointer;
}

@media (prefers-reduced-motion:reduce){
  /* La regla general ya vive en portada.css (frena todo lo que anima con
     `*`), pero la transición del toast la escribe esta hoja y no queda
     alcanzada por esa regla si se cargara sola, así que se apaga acá
     también. */
  .toast{transition:none}
  .forma .btn:hover:not(:disabled){transform:none}
}