/*
 * 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.
 */

/* 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;
}
input[type="submit"][data-busy],
input[type="image"][data-busy] {
  pointer-events: none;
  cursor: progress;
  opacity: 0.7;
}
@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 { max-width: min(30rem, calc(100vw - 2rem)); }
  .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; }
}