/* =============================================================================
   Base compartida · identidad Yiyi & Andy (naranja quemado, crema, verde noche)
   ========================================================================== */

@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/anton-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/anton-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/fonts/archivo-latin-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/fonts/archivo-latin-ext-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/outfit-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/outfit-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF; }

:root {
  /* Marca */
  --night: #131C16;
  --night-2: #18231C;
  --night-3: #1F2D24;
  --night-4: #273A2E;
  --shadow-ink: #0A100C;
  --cream: #EEDFC5;
  --cream-hi: #F7EEDD;
  --cream-dim: rgba(238, 223, 197, 0.68);
  --cream-faint: rgba(238, 223, 197, 0.42);
  --line: rgba(238, 223, 197, 0.12);
  --line-strong: rgba(238, 223, 197, 0.22);
  --brick: #C25B34;
  --accent: #E0703F;        /* se reemplaza con el color del evento */
  --peach: #F2A26E;

  /* Estados */
  --live: #7DD3A8;
  --warn: #F2C14E;
  --danger: #EF6A55;

  /* Opciones A–F: estables, acompañan siempre a la letra y el texto */
  --opt-0: #E8773F; --opt-1: #F2C14E; --opt-2: #5FB3A1;
  --opt-3: #E46B8A; --opt-4: #8FB6E8; --opt-5: #B79CE0;

  --f-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --f-wide: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --f-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--peach);
  outline-offset: 3px;
  border-radius: 10px;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Fondo con trazos orgánicos, como en la gráfica del show */
.swirl-bg {
  background-color: var(--night);
  background-image:
    radial-gradient(120% 70% at 85% -10%, rgba(224, 112, 63, 0.20), transparent 60%),
    radial-gradient(90% 60% at -10% 110%, rgba(194, 91, 52, 0.16), transparent 60%),
    url(/brand/swirl.svg);
  background-size: auto, auto, cover;
  background-position: center;
  background-attachment: fixed;
}

/* Títulos con “sticker” (sintaxis [texto] en el nombre del evento) */
.sticker {
  display: inline-block;
  position: relative;
  background: var(--accent);
  color: var(--cream-hi);
  padding: 0 .12em;
  margin: 0 .04em 0 0;
  border-radius: .08em;
  transform: rotate(-3deg);
  box-shadow: .06em .06em 0 var(--shadow-ink);
}
.sticker::after { /* esquina despegada */
  content: '';
  position: absolute;
  left: -.02em; bottom: -.02em;
  width: .26em; height: .26em;
  background: linear-gradient(45deg, transparent 50%, var(--cream) 50%);
  border-radius: 0 .06em 0 0;
  opacity: .92;
}

.nw { white-space: nowrap; }

/* Marca del show (wordmark) */
.wordmark {
  font-family: var(--f-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em; line-height: .95;
  color: var(--cream-hi);
  white-space: nowrap;
}
.wordmark .sticker { font-size: .96em; padding: 0 .1em; margin: 0 .03em 0 .02em; }
.wordmark .sticker::after { width: .2em; height: .2em; }

/* Firma “Sistema hecho por Glidex” */
.made-by {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5em .95em; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(238, 223, 197, .04);
  color: var(--cream-dim); font-size: 12.5px; font-weight: 500; text-decoration: none;
  transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease-out);
}
.made-by b { color: var(--cream-hi); font-weight: 700; letter-spacing: .01em; }
.made-by svg { width: 13px; height: 13px; opacity: .7; }
.made-by:hover { color: var(--cream); border-color: var(--accent); background: rgba(224, 112, 63, .1); transform: translateY(-1px); }
.made-by:hover b { color: var(--peach); }

/* Botones */
.btn {
  --btn-bg: var(--night-3);
  --btn-fg: var(--cream);
  --btn-bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 44px;
  padding: .7em 1.15em;
  border: 1.5px solid var(--btn-bd);
  border-radius: 14px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 650;
  letter-spacing: .005em;
  line-height: 1.1;
  text-decoration: none;
  transition: transform .18s var(--ease-out), background-color .2s, border-color .2s, box-shadow .2s, opacity .2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--btn-bg) 86%, white); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--primary {
  --btn-bg: var(--accent); --btn-fg: var(--night); --btn-bd: transparent;
  box-shadow: 0 3px 0 var(--shadow-ink);
}
.btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, white); }
.btn--cream { --btn-bg: var(--cream); --btn-fg: var(--night); --btn-bd: transparent; box-shadow: 0 3px 0 var(--shadow-ink); }
.btn--ghost { --btn-bg: transparent; }
.btn--danger { --btn-bg: transparent; --btn-fg: #FFB4A6; --btn-bd: rgba(239, 106, 85, .55); }
.btn--danger:hover:not(:disabled) { background: rgba(239, 106, 85, .12); }
.btn--lg { min-height: 56px; font-size: 1.08rem; border-radius: 16px; padding: .85em 1.4em; }
.btn--sm { min-height: 36px; padding: .45em .8em; font-size: .9rem; border-radius: 11px; }
.btn--icon { padding: 0; width: 40px; min-height: 40px; border-radius: 11px; }

/* Campo de contraseña con “ojito” */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 52px !important; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--cream-dim); cursor: pointer;
}
.pw-eye:hover { color: var(--cream-hi); background: rgba(238, 223, 197, .08); }
.pw-eye[aria-pressed='true'] { color: var(--peach); }
.pw-eye svg { width: 20px; height: 20px; }

/* Pastillas de estado */
.pill {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .32em .8em .32em .7em;
  border-radius: 999px;
  font-family: var(--f-wide);
  font-stretch: 112%;
  font-weight: 750;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1.5px solid var(--line-strong);
  color: var(--cream);
  white-space: nowrap;
}
.pill .dot { width: .6em; height: .6em; border-radius: 50%; background: currentColor; flex: none; }
.pill--live { color: var(--live); border-color: rgba(125, 211, 168, .45); background: rgba(125, 211, 168, .08); }
.pill--closed { color: var(--cream); border-color: var(--line-strong); background: rgba(238, 223, 197, .06); }
.pill--prepared { color: var(--warn); border-color: rgba(242, 193, 78, .45); background: rgba(242, 193, 78, .07); }
.pill--finished { color: var(--cream-dim); }
.pill--rehearsal { color: #CDB8F2; border-color: rgba(183, 156, 224, .5); background: rgba(183, 156, 224, .1); border-style: dashed; }
.pill--warn { color: var(--warn); border-color: rgba(242, 193, 78, .5); background: rgba(242, 193, 78, .1); }

/* Ficha de letra de opción */
.letter {
  display: inline-grid; place-items: center;
  flex: none;
  width: 2.1em; height: 2.1em;
  border-radius: .5em;
  background: var(--c, var(--opt-0));
  color: var(--night);
  font-family: var(--f-display);
  font-size: 1rem;
  line-height: 1;
  box-shadow: .12em .12em 0 var(--shadow-ink);
}

/* Spinner */
.spinner {
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: spin .8s linear infinite;
  flex: none;
}

/* Toasts */
.toasts {
  position: fixed; z-index: 100;
  left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid; gap: 8px; width: min(92vw, 460px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--cream-hi);
  color: var(--night);
  font-weight: 600;
  box-shadow: 0 4px 0 var(--shadow-ink), 0 18px 40px rgba(0, 0, 0, .35);
  animation: toast-in .45s var(--ease-spring) both;
  display: flex; gap: 10px; align-items: flex-start;
}
.toast--error { background: #FFD9CF; }
.toast--warn { background: #FCE9B8; }
.toast.is-leaving { animation: toast-out .3s var(--ease-in-out) forwards; }

/* Animaciones compartidas */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes breathe { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .spinner { animation: spin 1.6s linear infinite !important; animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}