/* Piezas de React Bits (reactbits.dev, © 2026 David Haz, MIT + Commons Clause) pasadas a CSS propio.
   Colores con los tokens de la app; cada sitio que las usa puede cambiar las variables --cs-* / --hb-*. */

/* ── CodeSlots ─────────────────────────────────────────────────────────── */
.code-slots {
  --cs-accent: var(--ap-brand, #ff4d8b);
  --cs-on-accent: var(--ap-on-brand, #1f0a13);
  --cs-ink: var(--ap-ink, #1f1419);
  --cs-slot: var(--ap-glass-1, rgba(255, 252, 246, 0.46));
  --cs-line: var(--ap-line, rgba(31, 20, 25, 0.14));
  --cs-danger: var(--ap-danger, #b42318);
  --cs-gap: 8px;
  --cs-radius: 12px;
  --cs-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  position: relative;
  display: block;
}
.code-slots__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 46px));
  gap: var(--cs-gap);
  width: max-content;
  max-width: 100%;
  cursor: text;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.code-slots__input {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  caret-color: transparent;
  font-size: 16px; /* iOS no hace zoom con 16 px */
  opacity: 0;
  cursor: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.code-slots__slot {
  position: relative;
  aspect-ratio: 46 / 54;
  border-radius: var(--cs-radius);
  overflow: hidden;
  background: var(--cs-slot);
  box-shadow: inset 0 0 0 1px var(--cs-line);
  transition: background-color 200ms ease, box-shadow 200ms ease;
  user-select: none;
  -webkit-user-select: none;
}
.code-slots__slot[data-active] { box-shadow: inset 0 0 0 2px var(--cs-accent); }
@media (hover: hover) and (pointer: fine) {
  .code-slots[data-status="idle"] .code-slots__row:hover .code-slots__slot:not([data-active]) {
    background: color-mix(in srgb, var(--cs-ink) 5%, var(--cs-slot));
  }
}
.code-slots__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--cs-accent);
  transform: scale(0);
  transition: transform var(--cs-settle, 300ms) var(--cs-ease) var(--cs-delay, 0ms), background-color 200ms ease;
}
.code-slots__digit {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--cs-on-accent);
  font-family: var(--ap-font-mono, ui-monospace, monospace);
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(8px);
  transition: transform var(--cs-settle, 300ms) var(--cs-ease) var(--cs-delay, 0ms), opacity 160ms ease var(--cs-delay, 0ms);
}
.code-slots__slot[data-filled] .code-slots__fill { transform: scale(1); }
.code-slots__slot[data-filled] .code-slots__digit { opacity: 1; transform: none; }
.code-slots[data-status="error"] .code-slots__slot { background: color-mix(in srgb, var(--cs-danger) 18%, var(--cs-slot)); }
.code-slots[data-status="error"] .code-slots__fill { background: var(--cs-danger); }
.code-slots[data-status="error"] .code-slots__digit { color: #fff; }
.code-slots[data-status="error"] .code-slots__row { animation: cs-shake 0.32s ease; }

.code-slots__caret {
  position: absolute;
  z-index: 3;
  top: 0;
  left: -1px;
  width: 2px;
  opacity: 0;
  pointer-events: none;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.code-slots__caret[data-show] { opacity: 1; }
.code-slots__caret-line {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background: var(--cs-ink);
  animation: cs-blink 1s steps(1) infinite;
}

/* Éxito: un velo del color de marca se abre desde el centro y aparece el ✓. */
.code-slots__wash {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: var(--cs-radius);
  background: var(--cs-accent);
  color: var(--cs-on-accent);
  clip-path: inset(0 50% round var(--cs-radius));
  pointer-events: none;
  transition: clip-path 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.code-slots__check { opacity: 0; transform: translateY(8px) scale(0.85); transition: opacity 200ms ease 280ms, transform 350ms var(--cs-ease) 280ms; }
.code-slots[data-status="success"] .code-slots__wash { clip-path: inset(0 0 round var(--cs-radius)); }
.code-slots[data-status="success"] .code-slots__check { opacity: 1; transform: none; }
.code-slots[data-status="success"] .code-slots__digit { transform: translateY(26px); opacity: 0; }

.code-slots__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.code-slots.is-text .code-slots__text { width: 100%; }
.code-slots__switch {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ap-muted, #6b5a62);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

@keyframes cs-blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes cs-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
  .code-slots__fill, .code-slots__digit, .code-slots__check, .code-slots__caret { transition: opacity 150ms ease; transform: none !important; }
  .code-slots__slot[data-filled] .code-slots__fill { transform: none; }
  .code-slots__fill { opacity: 0; }
  .code-slots__slot[data-filled] .code-slots__fill { opacity: 1; }
  .code-slots__caret-line, .code-slots[data-status="error"] .code-slots__row { animation: none; }
  .code-slots__wash { clip-path: none; opacity: 0; transition: opacity 200ms ease; }
  .code-slots[data-status="success"] .code-slots__wash { opacity: 1; }
}

/* ── HoldButton ────────────────────────────────────────────────────────── */
.hold-button {
  --hb-radius: 12px;
  --hb-bg: var(--danger-solid, #a91e38);
  --hb-text: var(--on-danger, #fff);
  --hb-fill: color-mix(in srgb, var(--danger-solid, #a91e38) 62%, #000);
  --hb-fill-text: #fff;
  --hb-release: 200ms;
  --hb-press: 0.97;
  --hb-wave: 6px;
  --hb-w: 0px;
  --hb-h: 0px;
  --hb-p: 0;
  --hb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  border-radius: var(--hb-radius);
  background: var(--hb-bg);
  color: var(--hb-text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 160ms var(--hb-ease-out), box-shadow var(--hb-release) var(--hb-ease-out);
}
.hold-button[data-phase="holding"][data-input="pointer"] { transform: scale(var(--hb-press)); }
.hold-button[data-phase="holding"], .hold-button[data-phase="done"] {
  box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--hb-fill) 70%, transparent);
}
.hold-button[data-phase="holding"] { transition: transform 160ms var(--hb-ease-out), box-shadow var(--hb-hold) linear; }
.hold-button.is-nudged { animation: hb-nudge 0.38s var(--hb-ease-out); }
.hold-button__pulse { position: absolute; inset: 0; z-index: 0; border-radius: var(--hb-radius); pointer-events: none; opacity: 0; }
.hold-button[data-phase="done"] .hold-button__pulse { animation: hb-pulse 600ms var(--hb-ease-out) forwards; }
.hold-button__label { position: relative; z-index: 2; display: grid; place-items: center; }
.hold-button__label > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: opacity 200ms ease, filter 200ms ease;
}
.hold-button__done { opacity: 0; filter: blur(2px); }
.hold-button[data-phase="done"] .hold-button__idle { opacity: 0; filter: blur(2px); }
.hold-button[data-phase="done"] .hold-button__done { opacity: 1; filter: none; }
.hold-button__clip { position: absolute; inset: 0; z-index: 3; clip-path: inset(0 round var(--hb-radius)); pointer-events: none; }
.hold-button__fill, .hold-button__crest {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--hb-fill);
  color: var(--hb-fill-text);
}
.hold-button__fill {
  clip-path: inset(0 calc((1 - var(--hb-p)) * (100% + 0.75 * var(--hb-wave)) - var(--hb-p) * 0.25 * var(--hb-wave)) 0 0);
}
/* La ola del borde que avanza: una máscara ondulada que se desplaza con el progreso. */
.hold-button__crest {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='200' viewBox='0 0 20 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10C18 8 18 25.3 10 33.3S2 58.7 10 66.7S18 92 10 100S2 125.3 10 133.3S18 158.7 10 166.7S2 192 10 200H0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='200' viewBox='0 0 20 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10C18 8 18 25.3 10 33.3S2 58.7 10 66.7S18 92 10 100S2 125.3 10 133.3S18 158.7 10 166.7S2 192 10 200H0Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  -webkit-mask-size: var(--hb-wave) calc(var(--hb-h) * 2);
  mask-size: var(--hb-wave) calc(var(--hb-h) * 2);
  -webkit-mask-position: calc(-1 * var(--hb-wave) + var(--hb-p) * (var(--hb-w) + var(--hb-wave))) calc(-1 * var(--hb-p) * var(--hb-cycles, 1.3) * var(--hb-h));
  mask-position: calc(-1 * var(--hb-wave) + var(--hb-p) * (var(--hb-w) + var(--hb-wave))) calc(-1 * var(--hb-p) * var(--hb-cycles, 1.3) * var(--hb-h));
}
.hold-button__label--fill { z-index: auto; }
.hold-button__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hold-button:focus-visible { outline: 2px solid var(--hb-fill); outline-offset: 3px; }
.hold-button:disabled { opacity: 0.5; pointer-events: none; }

/* Variante discreta para menús: fondo transparente, texto en rojo y relleno rojo. */
.hold-button.is-quiet {
  --hb-bg: transparent;
  --hb-text: var(--danger, #b4233e);
  --hb-fill: var(--danger-solid, #a91e38);
  --hb-fill-text: var(--on-danger, #fff);
  --hb-radius: 9px;
  --hb-wave: 5px;
}

@keyframes hb-pulse {
  from { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--hb-fill) 55%, transparent); }
  to { opacity: 0; box-shadow: 0 0 0 14px color-mix(in srgb, var(--hb-fill) 0%, transparent); }
}
@keyframes hb-nudge { 25% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }

@media (prefers-contrast: more) { .hold-button { outline: 1px solid var(--hb-text); } }
@media (prefers-reduced-motion: reduce) {
  .hold-button { transition: box-shadow var(--hb-release) ease; transform: none !important; }
  .hold-button.is-nudged { animation: none; }
  .hold-button__fill { clip-path: inset(0); opacity: var(--hb-p); }
  .hold-button__crest { display: none; }
  .hold-button__pulse { animation: none !important; }
  .hold-button__label > span { transition: opacity 200ms ease; filter: none !important; }
}

/* ── Usos en la app ────────────────────────────────────────────────────── */
/* «Mantén para enviar a la papelera» en el menú del espacio y de la clase. */
.space-actions-panel .hold-button.trash-hold {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  margin-top: 4px;
  border-top: 1px solid var(--line, rgba(31, 20, 25, 0.12));
  color: var(--hb-text);
  font-weight: 600;
}
.space-actions-panel .hold-button.trash-hold .hold-button__label { place-items: center start; }
.space-actions-panel .hold-button.trash-hold .hold-button__label > span { gap: 9px; }
.space-actions-panel .hold-button.trash-hold .icon { width: 13px; flex: none; }
.space-actions-panel .hold-button.trash-hold { min-height: 46px; }
.trash-hold-text { display: grid; gap: 1px; line-height: 1.15; text-align: left; }
.trash-hold-text small { font-size: 11px; font-weight: 500; opacity: 0.75; }
.space-actions-panel .hold-button.trash-hold:hover { background: var(--danger-soft, rgba(180, 35, 62, 0.08)); color: var(--hb-text); }
.class-actions-menu .space-actions-panel .hold-button.trash-hold { margin-top: 0; border-top: 0; white-space: nowrap; }

/* Código del cambio de contraseña: ocupa la fila entera de la rejilla de Cuenta. */
.acct-fields .code-label { grid-column: 1 / -1; }

/* Papel arrugado (solo admin): lienzo encima de todo que no intercepta nada. */
.paper-crumple-layer { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; pointer-events: none; }

/* «Borrar cuenta» del panel de administración: mismo aspecto que .admin-btn-danger, relleno rojo. */
.hold-button.admin-hold-delete {
  --hb-bg: var(--ap-glass-2, transparent);
  --hb-text: var(--ap-danger, #b42318);
  --hb-fill: var(--ap-danger, #b42318);
  --hb-fill-text: #fff;
  --hb-radius: 10px;
  --hb-wave: 4px;
  border: 1px solid var(--ap-danger, #b42318);
}