/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Con cualquier <dialog> abierto (modal#open, showModal()), el body no
   scrollea detrás. Cubre todos los modales del sitio: no hace falta tocarlo
   en cada uno. */
body:has(dialog[open]) { overflow: hidden; }

/* Estado "cargando" de un botón de submit mientras el form se envía.
   Lo pone/saca app/javascript/form_submit_busy.js en cualquier form. */
@keyframes tk-spin { to { transform: rotate(360deg); } }

button[data-busy] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: progress;
}
button[data-busy]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid rgba(127, 127, 127, 0.35);
  border-top-color: rgba(127, 127, 127, 0.95);
  border-radius: 50%;
  animation: tk-spin 0.7s linear infinite;
}
/* Un <input> no admite ::after: el texto se vuelve transparente (el botón
   conserva su tamaño) y el spinner se pinta como fondo centrado. */
input[type="submit"][data-busy],
input[type="image"][data-busy] {
  color: transparent !important;
  pointer-events: none;
  cursor: progress;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1.1em 1.1em !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='3'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23808080' stroke-opacity='.35'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' stroke='%23808080' stroke-opacity='.95' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
}
@media (prefers-reduced-motion: reduce) {
  button[data-busy]::after { animation-duration: 2s; }
}

/* ── Flash / toast: flota abajo al centro y se cierra solo
   (app/javascript/controllers/toast_controller.js), o al hacer click.
   El más nuevo entra abajo y empuja a los anteriores hacia arriba. */
@keyframes tk-toast-in { from { opacity: 0; transform: translateY(.5rem); } }
@keyframes tk-toast-out { to { opacity: 0; transform: translateY(.5rem); } }

.flash-stack {
  position: fixed; bottom: 4.5rem; left: 50%; transform: translateX(-50%); z-index: 1000;
  display: flex; flex-direction: column-reverse; gap: .5rem; max-width: min(22rem, calc(100vw - 2rem));
}
.flash {
  padding: .6rem 1rem; font: .9rem system-ui, sans-serif; border-left: 3px solid; border-radius: 6px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35); cursor: pointer;
  animation: tk-toast-in .18s ease-out;
}
@media (min-width: 640px) {
  .flash-stack { left: auto; right: 1.5rem; bottom: 1.5rem; transform: none; width: 26rem; max-width: calc(100vw - 3rem); }
  .flash { padding: .85rem 1.4rem; font-size: 1rem; }
}
.flash.is-leaving { animation: tk-toast-out .18s ease-in forwards; }
.flash--alert { background: color-mix(in srgb, #ff5a5a 16%, var(--bg, #fff)); color: color-mix(in srgb, #ff5a5a 55%, var(--fg, #16161a)); border-color: #ff5a5a; }
.flash--notice { background: color-mix(in srgb, #3ec46d 16%, var(--bg, #fff)); color: color-mix(in srgb, #3ec46d 55%, var(--fg, #16161a)); border-color: #3ec46d; }
@media (prefers-reduced-motion: reduce) {
  .flash, .flash.is-leaving { animation: none; }
}

/* Botón de crear deshabilitado (shared/_locked_cta): gris, con candado y sin
   acción. Doble clase para ganarle al estilo propio de cada botón. */
.is-locked.is-locked {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--surface-2, rgba(128, 128, 128, .18)); color: var(--muted, #8a8a8a);
  border: 1px solid var(--line, rgba(128, 128, 128, .3)); box-shadow: none; filter: none;
  cursor: not-allowed; user-select: none;
}
.is-locked.is-locked:hover { background: var(--surface-2, rgba(128, 128, 128, .18)); color: var(--muted, #8a8a8a); filter: none; }
.is-locked__icon { flex: none; }

/* Logo de tickeet (shared/_logo): el mismo en todos los headers. Todo en em,
   así escala con el font-size de cada marca. */
/* Tipografía del logo: Fredoka 500 con tracking de 20/1000 em, alojada en el repo
   (app/assets/fonts, subset latin de Google Fonts, licencia OFL). */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fredoka-500-latin-485f3c09.woff2") format("woff2");
}
.logo-link { display: inline-flex; align-items: center; font-family: "Fredoka", system-ui, sans-serif; font-weight: 500; letter-spacing: .02em; line-height: 1; text-decoration: none; }
/* Centrado óptico: la caja del texto está centrada, pero el cuerpo de las minúsculas
   (la altura de la «x») queda más abajo que su centro porque t, i y k tienen
   ascendentes; el logo se veía bajo. Se sube .06em (≈1,5 px a 1.6rem), que lo deja a
   la altura de los links del nav. Es un transform: no mueve nada más del layout. */
.logo-link .logo__word { transform: translateY(-.06em); }