/* Abrolista - panel de moderacion y administracion.
   A proposito NO usa la serif ni el tema del evento: es una herramienta, no la fiesta. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --papel: #F7F4FB;
  --tarjeta: #FFFFFF;
  --tinta: #1A1520;
  --gris: #7A7188;
  --linea: #E7E0F0;
  --si: #12A06B;
  --no: #E23A63;
  --espera: #E08A0B;
  --rosa: #FF2D8F;
  --violeta: #9B2FE8;
  --degrade: linear-gradient(100deg, var(--rosa), var(--violeta));
  --sombra: 0 2px 10px rgba(60, 20, 90, .06);
  --curva: 18px;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Nunito", "Inter Tight", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding: 0 1rem 4rem;
}

.hoja { max-width: 46rem; margin: 0 auto; }

a { color: var(--tinta); }

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ---------- encabezado ---------- */

.barra {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  padding: 1.5rem 0 1rem;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 1.2rem;
}

.barra h1 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; margin: 0; }

.barra .ruta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .75rem; color: var(--gris);
}

.barra .der { margin-left: auto; display: flex; gap: 1rem; font-size: .8rem; }
.barra .der a { color: var(--gris); text-decoration: none; }
.barra .der a:hover { color: var(--tinta); text-decoration: underline; }

/* ---------- marcador ---------- */

.marcador { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1.1rem; }

.marcador a {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: .7rem .8rem;
  text-decoration: none;
  display: block;
}
.marcador a[aria-current="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.marcador b {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.5rem; font-weight: 500; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.marcador span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.marcador .espera b { color: var(--espera); }
.marcador .si b { color: var(--si); }
.marcador .no b { color: var(--no); }

/* ---------- buscador ---------- */

.buscador { display: flex; gap: .5rem; margin-bottom: 1.1rem; }
.buscador input {
  flex: 1; min-width: 0;
  border: 1px solid var(--linea); border-radius: 6px;
  padding: .65rem .8rem; font-family: inherit; font-size: 1rem; background: var(--tarjeta);
}
.buscador input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }

/* ---------- fichas de invitado ---------- */

.ficha {
  display: flex; gap: .9rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--linea);
  border-radius: 6px;
  padding: .9rem;
  margin-bottom: .7rem;
}
.ficha.pendiente { border-left-color: var(--espera); }
.ficha.aprobado { border-left-color: var(--si); }
.ficha.rechazado { border-left-color: var(--no); }

.ficha .miniatura {
  flex: 0 0 5rem; height: 5.6rem;
  border-radius: 4px; overflow: hidden;
  background: var(--papel);
  display: grid; place-items: center;
  border: 1px solid var(--linea);
}
.ficha .miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha .miniatura .sin { font-size: .62rem; color: var(--gris); text-align: center; padding: .3rem; }

.ficha .info { flex: 1; min-width: 0; }
.ficha .info h3 { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.ficha .info .datos {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .76rem; color: var(--gris); margin: .15rem 0 .6rem;
}
.ficha .info .nota { font-size: .8rem; color: var(--gris); margin: 0 0 .5rem; }
.ficha .info .datos.dieta {
  font-family: inherit; color: var(--espera); font-weight: 600;
  margin: -.2rem 0 .6rem;
}

.acciones { display: flex; gap: .4rem; flex-wrap: wrap; }
.acciones form { display: inline; }

.btn {
  border: 1px solid var(--linea);
  background: var(--tarjeta);
  color: var(--tinta);
  border-radius: 5px;
  padding: .45rem .75rem;
  font-family: inherit; font-size: .8rem; font-weight: 500;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:hover { background: var(--papel); }
.btn.si { background: var(--si); border-color: var(--si); color: #fff; }
.btn.no { background: var(--no); border-color: var(--no); color: #fff; }
.btn.si:hover, .btn.no:hover { filter: brightness(1.08); }
.btn.tenue { color: var(--gris); }

.vacio {
  background: var(--tarjeta); border: 1px dashed var(--linea); border-radius: 6px;
  padding: 2.5rem 1.2rem; text-align: center; color: var(--gris);
}
.vacio strong { display: block; color: var(--tinta); font-size: 1rem; margin-bottom: .3rem; }

/* ---------- formularios de admin ---------- */

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 6px; padding: 1.2rem; margin-bottom: 1rem;
}
.tarjeta > h2 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); font-weight: 600; margin: 0 0 1rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.campo { margin-bottom: .95rem; }
.campo label { display: block; font-size: .82rem; color: var(--gris); margin-bottom: .3rem; }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="password"],
.campo input[type="number"], .campo input[type="datetime-local"],
.campo select, .campo textarea {
  width: 100%;
  border: 1px solid var(--linea); border-radius: 5px;
  padding: .65rem .75rem;
  font-family: inherit; font-size: 1rem; background: var(--tarjeta); color: var(--tinta);
}
.campo textarea { min-height: 5rem; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--tinta); outline-offset: 1px;
}
.campo .pista { font-size: .74rem; color: var(--gris); margin: .25rem 0 0; }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

/* Previsualizador de la foto de fondo con el velo de la paleta encima */
.lienzo-fondo {
  position: relative;
  height: 9rem;
  border-radius: 5px;
  overflow: hidden;
  background: var(--fondo, #26060F);
  border: 1px solid var(--linea);
  margin-bottom: .6rem;
}
.lienzo-fondo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lienzo-fondo .velo {
  position: absolute; inset: 0;
  background: var(--fondo, #26060F);
  opacity: var(--velo, .62);
}
.lienzo-fondo .rotulo-lienzo {
  position: absolute; left: .6rem; bottom: .6rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto, #fff);
  background: rgba(0, 0, 0, .45);
  padding: .25rem .5rem; border-radius: 3px;
}

.campo input[type="file"] { width: 100%; font-family: inherit; font-size: .85rem; color: var(--gris); }
.campo input[type="range"] { width: 100%; accent-color: var(--tinta); }

.marca { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .8rem; }
.marca input { margin-top: .28rem; }
.marca label { font-size: .9rem; color: var(--tinta); }
.marca .pista { display: block; font-size: .74rem; color: var(--gris); }

.principal {
  width: 100%; border: 0; border-radius: 5px;
  background: var(--tinta); color: #fff;
  padding: .85rem; font-family: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer;
}
.principal:hover { filter: brightness(1.35); }

.peligro { border-color: var(--no); }
.peligro > h2 { color: var(--no); }
.peligro .principal { background: var(--no); }

/* ---------- lista de eventos ---------- */

.evento {
  display: flex; align-items: center; gap: .9rem;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 6px;
  padding: .9rem 1rem; margin-bottom: .6rem; text-decoration: none;
}
.evento:hover { border-color: var(--tinta); }
.evento .punto { width: .55rem; height: .55rem; border-radius: 50%; background: var(--gris); flex: none; }
.evento.abierto .punto { background: var(--si); }
.evento h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.evento .ruta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem; color: var(--gris); }
.evento .cifras { margin-left: auto; text-align: right; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem; color: var(--gris); }
.evento .cifras b { color: var(--espera); }

/* ---------- tablero de flujos ---------- */

.resumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1.2rem; }
.resumen div {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 6px; padding: .6rem .5rem; text-align: center;
}
.resumen b {
  display: block; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.3rem; font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.resumen span { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.resumen .alerta b { color: var(--espera); }

.flujo {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-left: 3px solid var(--si);
  border-radius: 6px; padding: .9rem 1rem; margin-bottom: .7rem;
}
.flujo.apagado { border-left-color: var(--gris); background: color-mix(in srgb, var(--tarjeta) 60%, var(--papel)); }

.flujo .cabecera { display: flex; align-items: center; gap: .7rem; }
.flujo .punto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--si); flex: none; }
.flujo.apagado .punto { background: var(--gris); }
.flujo h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.flujo h3 a { text-decoration: none; }
.flujo h3 a:hover { text-decoration: underline; }
.flujo .ruta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; color: var(--gris); margin: 0; }

.etiqueta {
  margin-left: auto; flex: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--espera); border: 1px solid currentColor; border-radius: 3px; padding: .18rem .4rem;
}

.flujo .cifras {
  display: flex; gap: .9rem; flex-wrap: wrap;
  margin: .7rem 0; font-size: .78rem; color: var(--gris);
}
.flujo .cifras b { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--tinta); }
.flujo .cifras .alerta b { color: var(--espera); }
.flujo .cifras .tenue { margin-left: auto; }

.flujo .acciones { display: flex; gap: .4rem; flex-wrap: wrap; }
.flujo .acciones form { display: inline; }
.btn.borrar { color: var(--no); border-color: color-mix(in srgb, var(--no) 35%, var(--linea)); }
.btn.borrar:hover { background: var(--no); color: #fff; border-color: var(--no); }

/* previsualizacion del credito de marca, sobre fondo oscuro como en la fiesta */
.vista-marca {
  background: #1B1420; border: 1px solid var(--linea); border-radius: 6px;
  padding: 1.4rem 1rem; margin-bottom: 1rem; text-align: center;
}
.vista-marca .rol {
  display: block; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .32em; text-transform: uppercase;
  color: #F2C879; margin-bottom: .6rem; text-indent: .32em;
}
.vista-marca img { max-height: 2.4rem; max-width: 15rem; width: auto; }

/* Selector de paletas: cada muestra es la pagina en miniatura */
.paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: .55rem;
}

.muestra { cursor: pointer; text-align: center; }
.muestra input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.muestra .tarjetita {
  display: grid; place-items: center;
  height: 3.4rem;
  border-radius: 6px;
  background: var(--m-fondo);
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.muestra .bolita {
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--m-acento);
}
.muestra .nombre {
  display: block; margin-top: .3rem;
  font-size: .68rem; color: var(--gris);
}

.muestra input:checked + .tarjetita {
  border-color: var(--tinta);
  box-shadow: 0 0 0 2px var(--papel), 0 0 0 3px var(--tinta);
}
.muestra input:checked ~ .nombre { color: var(--tinta); font-weight: 500; }
.muestra input:focus-visible + .tarjetita { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* Campo de dirección: el dominio fijo y el editable en la misma línea */
.direccion {
  display: flex; align-items: center;
  border: 1px solid var(--linea); border-radius: 5px;
  background: var(--tarjeta); overflow: hidden;
}
.direccion > span {
  padding: .65rem 0 .65rem .75rem;
  color: var(--gris); font-size: .95rem; white-space: nowrap;
}
.direccion input {
  border: 0 !important; border-radius: 0 !important;
  padding-left: .1rem !important; min-width: 0;
}
.direccion:focus-within { outline: 2px solid var(--tinta); outline-offset: 1px; }

.fijado {
  margin: 0; padding: .65rem .75rem;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 5px;
  font-size: .95rem;
}

/* ---------- avisos ---------- */

.aviso {
  border-left: 3px solid var(--tinta); background: var(--tarjeta);
  padding: .7rem .9rem; margin: 1rem 0; font-size: .9rem; border-radius: 0 5px 5px 0;
}
.aviso.error { border-left-color: var(--no); }

.centrada { max-width: 22rem; margin: 4rem auto 0; }
.centrada h1 { font-size: 1.4rem; margin: 0 0 .3rem; }
.centrada p.sub { color: var(--gris); font-size: .9rem; margin: 0 0 1.4rem; }

@media (max-width: 460px) {
  .dupla { grid-template-columns: 1fr; }
  .ficha .miniatura { flex-basis: 4.2rem; height: 4.8rem; }
}

/* ---------- secciones plegables de "Mi fiesta" ---------- */

.seccion {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 6px; margin-bottom: .7rem; overflow: hidden;
}
.seccion > summary {
  list-style: none; cursor: pointer;
  padding: 1rem 2.4rem 1rem 1.1rem; position: relative;
}
.seccion > summary::-webkit-details-marker { display: none; }
.seccion > summary::after {
  content: ""; position: absolute; right: 1.1rem; top: 1.35rem;
  width: .5rem; height: .5rem; border-right: 2px solid var(--gris);
  border-bottom: 2px solid var(--gris); transform: rotate(45deg);
  transition: transform .15s;
}
.seccion[open] > summary::after { transform: rotate(-135deg); top: 1.55rem; }
.seccion > summary:hover { background: var(--papel); }

.s-titulo { display: block; font-size: 1.05rem; font-weight: 600; }
.s-resumen {
  display: block; font-size: .82rem; color: var(--gris);
  margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s-cuerpo { padding: 0 1.1rem 1.2rem; border-top: 1px solid var(--linea); padding-top: 1.1rem; }

.s-sub {
  font-size: .95rem; font-weight: 600; margin: 0 0 .5rem;
}
.raya { border: 0; border-top: 1px solid var(--linea); margin: 1.4rem 0; }

/* barra de guardar, siempre a mano */
.guardar {
  position: sticky; bottom: 0; z-index: 5;
  padding: .7rem 0 .9rem;
  background: linear-gradient(to top, var(--papel) 72%, transparent);
}
.guardar .principal { box-shadow: 0 2px 10px rgba(0,0,0,.16); }
.principal.pendiente { background: var(--si); }

/* ============================================================
   Capa de marca — el panel deja de parecer un formulario de banco
   y toma el aire del logo: curvas grandes, rosa/violeta, sin bordes duros.
   Va al final a propósito: pisa lo de arriba sin tocarlo.
   ============================================================ */

h1, h2, h3, .s-titulo, .barra h1, .marcador b {
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.005em;
}

/* --- el logo arriba de todo --- */
.membrete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 0 .2rem;
}
.membrete img { height: 34px; width: auto; display: block; }
.membrete .der { display: flex; gap: 1rem; font-size: .82rem; }
.membrete .der a { color: var(--gris); text-decoration: none; font-weight: 600; }
.membrete .der a:hover { color: var(--rosa); }

/* --- superficies: curvas grandes, sombra suave, sin borde duro --- */
.tarjeta, .seccion, .ficha, .vacio, .marcador a, .buscador input,
.campo input, .campo select, .campo textarea, .fijado {
  border-radius: var(--curva) !important;
}
.tarjeta, .seccion {
  border: 1px solid var(--linea); box-shadow: var(--sombra);
}
.ficha { border: 1px solid var(--linea); border-left-width: 5px; box-shadow: var(--sombra); }
.vacio { border-style: dashed; border-width: 2px; }

.barra { border-bottom: 0; padding-top: .6rem; }

/* --- botones con el degradé del logo --- */
.principal {
  background: var(--degrade); border-radius: 999px;
  font-family: "Baloo 2", "Nunito", sans-serif; font-weight: 700;
  font-size: .98rem; letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(255, 45, 143, .3);
}
.principal:hover { filter: brightness(1.06); }
.principal.pendiente { background: var(--degrade); }
.peligro .principal { background: var(--no); box-shadow: none; }

.btn {
  border-radius: 999px; padding: .5rem .95rem; font-weight: 700;
  border-color: var(--linea);
}
.btn.si { background: var(--si); border-color: var(--si); }
.btn.no { background: var(--no); border-color: var(--no); }

/* --- contadores como pastillas --- */
.marcador a { border: 1px solid var(--linea); box-shadow: var(--sombra); }
.marcador a[aria-current="true"] {
  border-color: transparent; box-shadow: 0 0 0 2px var(--rosa), var(--sombra);
}
.marcador b { font-family: "Baloo 2", "Nunito", sans-serif; font-size: 1.7rem; }
.marcador span { letter-spacing: .06em; font-weight: 700; }

/* --- secciones plegables --- */
.seccion > summary:hover { background: color-mix(in srgb, var(--rosa) 5%, #fff); }
.seccion[open] > summary { background: color-mix(in srgb, var(--rosa) 4%, #fff); }
.seccion > summary::after { border-color: var(--rosa); }
.s-titulo { font-size: 1.12rem; }

/* --- foco visible en rosa, no en negro --- */
input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rosa); outline-offset: 2px;
}
.campo input:focus, .campo textarea:focus { border-color: var(--rosa); }

/* --- avisos --- */
.aviso { border-radius: var(--curva); }
.aviso.ok { border-left-color: var(--si); }

@media (prefers-reduced-motion: no-preference) {
  .aviso { animation: aviso-entra .22s ease-out both; }
  @keyframes aviso-entra {
    from { opacity: 0; transform: translateY(-.3rem); }
  }
  .copiado { animation: copiado-late .3s ease both; }
  @keyframes copiado-late {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
}

/* --- pie con la marca --- */
.pie-marca {
  text-align: center; margin: 2.5rem 0 1rem;
  font-size: .76rem; color: var(--gris);
}
.pie-marca img { height: 22px; opacity: .55; display: block; margin: 0 auto .4rem; }

/* --- las opciones de arriba, como botones a la vista --- */
.barra { align-items: center; }
.barra .der { gap: .45rem; flex-wrap: wrap; font-size: inherit; }
.barra .der a.btn {
  color: var(--tinta); text-decoration: none;
  background: var(--tarjeta); border: 1px solid var(--linea);
  box-shadow: var(--sombra); white-space: nowrap;
}
.barra .der a.btn:hover { background: color-mix(in srgb, var(--rosa) 8%, #fff); border-color: var(--rosa); }
.barra .der a.btn.marcado {
  background: var(--degrade); border-color: transparent; color: #fff;
  box-shadow: 0 3px 10px rgba(255, 45, 143, .28);
}
.barra .der a.btn.tenue { color: var(--gris); box-shadow: none; }

@media (max-width: 30rem) {
  .barra { gap: .5rem; }
  .barra .der { margin-left: 0; width: 100%; }
  .barra .der a.btn { flex: 1; text-align: center; padding-left: .5rem; padding-right: .5rem; }
}

/* --- los tres caminos del inicio --- */
.caminos { display: grid; gap: .8rem; }

.camino {
  display: block; text-decoration: none; color: var(--tinta);
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--curva); box-shadow: var(--sombra);
  padding: 1.4rem 3rem 1.3rem 1.3rem;
  position: relative; transition: transform .12s, box-shadow .12s;
}
.camino::after {
  content: ""; position: absolute; right: 1.4rem; top: 50%;
  width: .6rem; height: .6rem; margin-top: -.4rem;
  border-right: 2.5px solid var(--rosa); border-top: 2.5px solid var(--rosa);
  transform: rotate(45deg);
}
.camino:hover, .camino:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(60, 20, 90, .12);
  border-color: color-mix(in srgb, var(--rosa) 45%, var(--linea));
}
.camino:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }

.camino-t {
  display: block;
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-weight: 700; font-size: 1.6rem; line-height: 1.15;
}
.camino-d {
  display: block; color: var(--gris);
  font-size: .92rem; line-height: 1.45; margin-top: .3rem;
}
.camino-marca {
  display: inline-block; margin-top: .8rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--gris); background: var(--papel);
  border-radius: 999px; padding: .3rem .75rem;
}
.camino-marca.urgente { color: #fff; background: var(--degrade); }

@media (max-width: 30rem) {
  .camino { padding: 1.2rem 2.6rem 1.1rem 1.1rem; }
  .camino-t { font-size: 1.4rem; }
}

/* El lema de la marca, solo en la portada de abrolista.com */
.lema {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-weight: 700; font-size: 1.45rem; line-height: 1.15;
  margin: 0 0 1.4rem; letter-spacing: -.01em;
  background: var(--degrade);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--rosa);
}
@media (max-width: 30rem) { .lema { font-size: 1.3rem; } }

/* ============================================================
   Capa de entrada — SOLO la puerta (body.entrada), no el panel.

   El panel es una herramienta de trabajo: ella lo usa a la una de la
   mañana aprobando invitados, y ahi un fondo en movimiento distrae y
   consume bateria. La entrada es el momento de bienvenida.

   La division es a proposito: AFUERA de la tarjeta va todo el color y
   el movimiento; ADENTRO queda quieto y sobrio, porque ahi se tipea un
   usuario y una contraseña y cualquier animacion detras del cursor
   molesta.

   Todo se anima con transform / opacity, que la placa de video resuelve
   sola. Nada de animar colores ni posiciones de fondo: eso obliga al
   telefono a repintar en cada cuadro y en un Android modesto se arrastra.

   Va al final a proposito: pisa lo de arriba sin tocarlo. Para volver a
   la version sobria alcanza con borrar este bloque entero.
   ============================================================ */

/* --- el lienzo: rosa a violeta, la marca a pantalla completa -------- */

body.entrada {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(90vmax 70vmax at 50% -10%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(157deg, #FF4FA3 0%, #D93BC4 42%, #8B3FE8 100%);
  background-attachment: fixed;
}

/* --- las luces: derivan lento y grandes ----------------------------- */

body.entrada::before,
body.entrada::after {
  content: "";
  position: fixed;
  inset: -35vmax;              /* mas grande que la pantalla: nunca se ve un borde */
  z-index: -3;
  pointer-events: none;
  will-change: transform;
}

body.entrada::before {
  background:
    radial-gradient(36vmax 36vmax at 20% 24%, rgba(255, 138, 200, .75), transparent 62%),
    radial-gradient(32vmax 32vmax at 82% 14%, rgba(186, 120, 255, .70), transparent 62%),
    radial-gradient(26vmax 26vmax at 62% 46%, rgba(255, 214, 240, .55), transparent 60%);
  animation: entrada-deriva-a 24s ease-in-out infinite alternate;
}

body.entrada::after {
  background:
    radial-gradient(38vmax 38vmax at 74% 86%, rgba(150, 90, 255, .62), transparent 64%),
    radial-gradient(30vmax 30vmax at 14% 90%, rgba(255, 110, 185, .60), transparent 62%),
    radial-gradient(22vmax 22vmax at 44% 68%, rgba(255, 255, 255, .38), transparent 60%);
  animation: entrada-deriva-b 31s ease-in-out infinite alternate;
}

@keyframes entrada-deriva-a {
  from { transform: translate3d(-5%, -4%, 0) scale(1); }
  to   { transform: translate3d(6%, 5%, 0) scale(1.18); }
}

@keyframes entrada-deriva-b {
  from { transform: translate3d(5%, 4%, 0) scale(1.14); }
  to   { transform: translate3d(-6%, -5%, 0) scale(1); }
}

/* --- las estrellas: puntitos que suben y titilan --------------------
   Tres capas, cada una con su velocidad de ascenso y su ritmo de titileo.
   Los tiempos no son multiplos entre si (26/33/40 para subir, 3,4/4,2/5,1
   para titilar) a proposito: si lo fueran, las tres pulsarian juntas y se
   veria como un latido. Desfasadas, el ojo lee estrellas.

   Cada capa anima dos cosas a la vez -transform para subir, opacity para
   titilar-, que son justo las dos que el telefono resuelve sin repintar.

   El patron se repite cada 50vh y el recorrido es exactamente 50vh, asi
   el ciclo cierra sin salto visible. Cero elementos en el HTML: son
   puntos dibujados como fondo, no pesan nada. ----------------------- */

.destellos,
.destellos::before,
.destellos::after {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 200vh;
  z-index: -2;
  pointer-events: none;
  background-size: 100% 50vh;
  background-repeat: repeat;
  will-change: transform, opacity;
}

.destellos {
  background-image:
    radial-gradient(2.5px 2.5px at 12% 8%,  rgba(255,255,255,.95), transparent 100%),
    radial-gradient(2px 2px     at 34% 22%, rgba(255,255,255,.75), transparent 100%),
    radial-gradient(3px 3px     at 68% 14%, rgba(255,255,255,.90), transparent 100%),
    radial-gradient(2px 2px     at 88% 30%, rgba(255,240,250,.80), transparent 100%),
    radial-gradient(2.5px 2.5px at 52% 38%, rgba(255,255,255,.70), transparent 100%),
    radial-gradient(2px 2px     at 22% 44%, rgba(255,255,255,.65), transparent 100%);
  animation: entrada-flotar 26s linear infinite,
             entrada-titilar-a 3.4s ease-in-out infinite;
}

.destellos::before {
  content: "";
  background-image:
    radial-gradient(1.5px 1.5px at 6% 16%,  rgba(255,255,255,.70), transparent 100%),
    radial-gradient(2px 2px     at 44% 6%,  rgba(255,255,255,.60), transparent 100%),
    radial-gradient(1.5px 1.5px at 76% 26%, rgba(255,255,255,.75), transparent 100%),
    radial-gradient(2px 2px     at 94% 42%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 34%, rgba(255,255,255,.60), transparent 100%);
  animation: entrada-flotar 40s linear infinite,      /* mas lenta: queda al fondo */
             entrada-titilar-b 5.1s ease-in-out infinite;
}

.destellos::after {
  content: "";
  background-image:
    radial-gradient(3px 3px     at 26% 30%, rgba(255,255,255,.92), transparent 100%),
    radial-gradient(2px 2px     at 58% 10%, rgba(255,235,248,.78), transparent 100%),
    radial-gradient(2.5px 2.5px at 82% 40%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(2px 2px     at 16% 46%, rgba(255,255,255,.68), transparent 100%),
    radial-gradient(2.5px 2.5px at 70% 34%, rgba(255,245,252,.72), transparent 100%);
  animation: entrada-flotar 33s linear infinite,
             entrada-titilar-c 4.2s ease-in-out infinite;
}

@keyframes entrada-flotar {
  from { transform: translateY(0); }
  to   { transform: translateY(-50vh); }
}

/* El titileo es leve a proposito: nunca llega a apagarse del todo. Un
   parpadeo fuerte en el fondo tira el ojo justo cuando ella esta leyendo
   el usuario que le pasaron por WhatsApp. */
@keyframes entrada-titilar-a { 0%, 100% { opacity: .90; } 50% { opacity: .45; } }
@keyframes entrada-titilar-b { 0%, 100% { opacity: .50; } 50% { opacity: .88; } }
@keyframes entrada-titilar-c { 0%, 100% { opacity: .75; } 45% { opacity: .38; } }

/* --- la tarjeta: adentro no se mueve nada --------------------------- */

body.entrada .centrada {
  position: relative;
  /* Un degrade minimo de arriba hacia abajo: hace de cuenta que la luz
     viene de arriba, y es lo que despues justifica el canto iluminado. */
  background: linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, .78));
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border-radius: 26px;
  padding: 1.7rem 1.5rem 1.9rem;
  /* El relieve de las orillas, de adentro hacia afuera:
     1. canto de arriba iluminado, como el filo de un vidrio grueso
     2. costados apenas encendidos, mas el izquierdo que el derecho
     3. canto de abajo en sombra: eso es lo que da la sensacion de espesor
     4. un aro blanco finito que la recorta del color del fondo
     5. dos sombras a distinta distancia: la corta la apoya, la larga la
        levanta. Con una sola sombra la tarjeta parece pegada. */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .98),
    inset 2px 0 0 rgba(255, 255, 255, .60),
    inset -2px 0 0 rgba(255, 255, 255, .38),
    inset 0 -3px 0 rgba(120, 40, 170, .20),
    0 0 0 1px rgba(255, 255, 255, .32),
    0 10px 24px rgba(60, 10, 100, .22),
    0 34px 70px rgba(60, 10, 100, .34);
  animation: entrada-subir .6s cubic-bezier(.22, .61, .36, 1) both;
}

/* Safari viejo y Android de gama baja no tienen backdrop-filter: ahi la
   tarjeta se pone opaca, que se ve bien igual y no cuesta nada. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  body.entrada .centrada { background: rgba(255, 255, 255, .95); }
}

@keyframes entrada-subir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

body.entrada .lema { margin-top: 0; }
body.entrada .centrada h1 { font-size: 1.55rem; }

/* --- los campos: mas grandes y con foco rosa ------------------------ */

body.entrada .campo input {
  border-radius: 14px;
  padding: .85rem .9rem;
  font-size: 1rem;                    /* 16px: abajo de eso el iPhone hace zoom al tocar */
  border: 1.5px solid rgba(231, 224, 240, .95);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.entrada .campo input:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 4px rgba(255, 45, 143, .15);
}

/* --- el boton: con volumen de verdad -------------------------------- */

body.entrada .principal {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 1rem;
  font-size: 1.06rem;
  /* La luz vertical va encima del degrade de la marca: conserva el
     rosa->violeta del logo y le agrega el relieve. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 42%,
                    rgba(80, 10, 60, .22)),
    var(--degrade);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -4px 8px rgba(110, 15, 80, .28),
    0 6px 0 #8C1F66,                   /* el canto: esto es lo que da el 3D */
    0 12px 22px rgba(120, 20, 160, .34);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

body.entrada .principal:hover { filter: brightness(1.05); }

/* Al apretarlo se hunde hasta el canto, como una tecla. */
body.entrada .principal:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .40),
    inset 0 -2px 6px rgba(110, 15, 80, .30),
    0 1px 0 #8C1F66,
    0 4px 10px rgba(120, 20, 160, .30);
}

/* Un destello que lo cruza cada tanto, para que el ojo lo encuentre. */
body.entrada .principal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .45) 48%,
                              transparent 60%);
  transform: translateX(-120%);
  animation: entrada-destello 4.6s ease-in-out 1.6s infinite;
}

@keyframes entrada-destello {
  0%        { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}

/* --- lo que queda afuera de la tarjeta, sobre el color -------------- */

body.entrada .membrete img {
  height: 42px;
  filter: drop-shadow(0 6px 16px rgba(60, 10, 90, .40));
}

body.entrada .pie-marca {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 8px rgba(70, 15, 110, .45);
  font-weight: 600;
}

body.entrada .aviso {
  background: rgba(255, 255, 255, .92);
  border-radius: var(--curva);
  box-shadow: 0 10px 30px rgba(70, 15, 110, .22);
}

/* --- quien pidio menos movimiento no ve ninguno --------------------- */

@media (prefers-reduced-motion: reduce) {
  body.entrada::before,
  body.entrada::after,
  .destellos,
  .destellos::before,
  body.entrada .centrada,
  body.entrada .principal::after {
    animation: none !important;
  }
  body.entrada .principal { transition: none; }
}

/* ============================================================
   Capa del inicio de la quinceañera (body.inicio) — los 3 botones.

   Es la pantalla que mas mira: entra y sale de aca toda la noche de la
   fiesta. Por eso lleva el degrade de la entrada pero NO las estrellas:
   el color da la bienvenida, y al no haber nada moviendose, volver del
   panel veinte veces no cansa.

   Las tres tarjetas se tocan, asi que se comportan como teclas: canto
   abajo, luz arriba, y se hunden al apretarlas. Cada una con su color
   para distinguirlas de un vistazo sin leer.
   ============================================================ */

body.inicio {
  position: relative;
  background:
    radial-gradient(90vmax 70vmax at 50% -10%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(157deg, #FF4FA3 0%, #D93BC4 42%, #8B3FE8 100%);
  background-attachment: fixed;
}

/* Dos luces, mas quietas que en la entrada: ciclos largos y recorrido corto. */
body.inicio::before,
body.inicio::after {
  content: "";
  position: fixed;
  inset: -35vmax;
  z-index: -3;
  pointer-events: none;
  will-change: transform;
}
body.inicio::before {
  background:
    radial-gradient(36vmax 36vmax at 22% 22%, rgba(255, 138, 200, .62), transparent 62%),
    radial-gradient(30vmax 30vmax at 80% 16%, rgba(186, 120, 255, .58), transparent 62%);
  animation: inicio-deriva-a 40s ease-in-out infinite alternate;
}
body.inicio::after {
  background:
    radial-gradient(34vmax 34vmax at 76% 84%, rgba(150, 90, 255, .52), transparent 64%),
    radial-gradient(28vmax 28vmax at 16% 88%, rgba(255, 110, 185, .50), transparent 62%);
  animation: inicio-deriva-b 52s ease-in-out infinite alternate;
}
@keyframes inicio-deriva-a {
  from { transform: translate3d(-2%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
@keyframes inicio-deriva-b {
  from { transform: translate3d(2%, 2%, 0) scale(1.06); }
  to   { transform: translate3d(-3%, -2%, 0) scale(1); }
}

/* --- la cabecera, ahora sobre color -------------------------------- */

body.inicio .barra h1 { color: #fff; text-shadow: 0 2px 12px rgba(70, 15, 110, .45); }
body.inicio .barra .ruta { color: rgba(255, 255, 255, .85); }
body.inicio .pista { color: rgba(255, 255, 255, .95); font-weight: 600; }
body.inicio .membrete img {
  height: 38px;
  filter: drop-shadow(0 6px 16px rgba(60, 10, 90, .40));
}
body.inicio .pie-marca {
  color: rgba(255, 255, 255, .90);
  text-shadow: 0 1px 8px rgba(70, 15, 110, .45);
  font-weight: 600;
}
body.inicio .barra .der a.btn {
  background: rgba(255, 255, 255, .92);
  border-color: transparent;
  box-shadow: 0 3px 0 rgba(120, 40, 170, .35), 0 6px 14px rgba(60, 10, 100, .25);
  font-weight: 700;
}
body.inicio .barra .der a.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(120, 40, 170, .35), 0 3px 8px rgba(60, 10, 100, .22);
}

/* --- las tres teclas ------------------------------------------------ */

body.inicio .caminos { gap: 1rem; }

body.inicio .camino {
  --canto: #8C1F66;                 /* lo pisa cada tarjeta mas abajo */
  --acento: var(--rosa);
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF7FE 100%);
  padding: 1.5rem 3rem 1.4rem 1.4rem;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(120, 40, 170, .10),
    0 6px 0 var(--canto),            /* el canto: esto es lo que da la tecla */
    0 14px 26px rgba(60, 10, 100, .30);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Al apretarla se hunde hasta el canto. */
body.inicio .camino:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(120, 40, 170, .10),
    0 1px 0 var(--canto),
    0 4px 10px rgba(60, 10, 100, .26);
}

/* El hover apenas la levanta: en el celular no existe, asi que el
   protagonista tiene que ser el hundido, no esto. */
body.inicio .camino:hover,
body.inicio .camino:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(120, 40, 170, .10),
    0 8px 0 var(--canto),
    0 18px 32px rgba(60, 10, 100, .34);
}
body.inicio .camino:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Un color por tarjeta: se distinguen sin leer el titulo. */
body.inicio .camino:nth-child(1) { --acento: #FF2D8F; --canto: #A81561; }
body.inicio .camino:nth-child(2) { --acento: #9B2FE8; --canto: #6516A6; }
body.inicio .camino:nth-child(3) { --acento: #0E9FBC; --canto: #0A6C80; }
body.inicio .camino:nth-child(4) { --acento: #E8A62F; --canto: #A6721A; }
body.inicio .camino:nth-child(5) { --acento: #E8A62F; --canto: #A6721A; }

body.inicio .camino::after { border-color: var(--acento); }
body.inicio .camino-t { color: var(--acento); }
body.inicio .camino-marca {
  background: color-mix(in srgb, var(--acento) 12%, #fff);
  color: color-mix(in srgb, var(--acento) 75%, #2A1030);
}
body.inicio .camino-marca.urgente {
  background: linear-gradient(100deg, var(--acento), color-mix(in srgb, var(--acento) 55%, var(--violeta)));
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--acento) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  body.inicio::before,
  body.inicio::after { animation: none !important; }
  body.inicio .camino { transition: none; }
}

/* ============================================================
   Capa del panel de configuracion (body.ajustes).

   Acá NO va fondo animado ni color pleno, y es a proposito: esta es la
   pantalla donde ella carga la fecha, el salon, el alias para cobrar y
   el precio. Es un formulario largo, se lee y se tipea, y cualquier cosa
   moviendose detras estorba. Lo que si toma de las otras dos pantallas
   es el relieve: las secciones se sienten como fichas apilables y el
   boton de guardar como una tecla.

   El fondo pasa de blanco plano a un lila muy tenue, apenas suficiente
   para que las tarjetas blancas floten en vez de fundirse.
   ============================================================ */

/* El fondo lleva color, pero poco: lo justo para que las tarjetas blancas
   se recorten en vez de fundirse. Si sube mas, el formulario -que es lo
   que ella viene a leer- empieza a competir con el fondo y se cansa la
   vista en una pantalla donde pasa varios minutos. */
body.ajustes {
  background:
    radial-gradient(66vmax 52vmax at 12% -12%, rgba(255, 45, 143, .16), transparent 62%),
    radial-gradient(58vmax 48vmax at 92% 6%,  rgba(155, 47, 232, .15), transparent 60%),
    linear-gradient(180deg, #F2E7FA 0%, #EBDEF6 55%, #F0E6F8 100%);
  background-attachment: fixed;
}

/* --- las secciones plegables: fichas con espesor -------------------- */

body.ajustes .seccion {
  border: 0;
  border-radius: 20px;
  margin-bottom: .9rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBFF 100%);
  /* Mismo criterio que la burbuja de la entrada: canto iluminado arriba,
     sombra abajo para el espesor, y dos sombras externas a distinta
     distancia -una apoya, la otra levanta-. */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(120, 40, 170, .09),
    0 3px 0 rgba(155, 47, 232, .13),
    0 6px 16px rgba(60, 20, 90, .10);
  transition: box-shadow .15s ease, transform .15s ease;
}

/* La abierta se despega del resto: se ve cual estas editando. */
body.ajustes .seccion[open] {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(120, 40, 170, .09),
    0 4px 0 rgba(155, 47, 232, .18),
    0 12px 28px rgba(60, 20, 90, .16);
}

body.ajustes .seccion > summary {
  border-radius: 20px;
  transition: background .15s ease;
}
body.ajustes .seccion > summary:active { transform: translateY(1px); }

/* --- los campos: mismos que en la entrada, para que no haya dos estilos */

body.ajustes .campo input,
body.ajustes .campo select,
body.ajustes .campo textarea {
  border-radius: 14px;
  border: 1.5px solid rgba(231, 224, 240, .95);
  background: #fff;
  font-size: 1rem;                 /* 16px: abajo de eso el iPhone hace zoom al tocar */
  box-shadow: inset 0 1px 2px rgba(60, 20, 90, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.ajustes .campo input:focus,
body.ajustes .campo select:focus,
body.ajustes .campo textarea:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 4px rgba(255, 45, 143, .15);
}

/* --- la barra de guardar: es lo unico que se toca de verdad --------- */

body.ajustes .guardar {
  background: linear-gradient(to top, #F3EDFA 68%, rgba(243, 237, 250, 0));
  padding-bottom: 1.1rem;
}

body.ajustes .guardar .principal {
  position: relative;
  border-radius: 999px;
  padding: .95rem;
  font-size: 1.02rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 42%,
                    rgba(80, 10, 60, .20)),
    var(--degrade);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -4px 8px rgba(110, 15, 80, .26),
    0 5px 0 #8C1F66,
    0 10px 20px rgba(120, 20, 160, .28);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
body.ajustes .guardar .principal:hover { filter: brightness(1.05); }
body.ajustes .guardar .principal:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .40),
    inset 0 -2px 6px rgba(110, 15, 80, .28),
    0 1px 0 #8C1F66,
    0 3px 8px rgba(120, 20, 160, .26);
}

/* Cuando hay cambios sin guardar el boton se pone verde: el relieve
   tiene que acompañar el color, si no se ve plano justo cuando importa. */
body.ajustes .guardar .principal.pendiente {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 42%,
                    rgba(0, 60, 35, .20)),
    linear-gradient(100deg, #16B87B, #0E8F5C);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .50),
    inset 0 -4px 8px rgba(0, 70, 40, .26),
    0 5px 0 #0A6B45,
    0 10px 20px rgba(10, 120, 80, .30);
}
body.ajustes .guardar .principal.pendiente:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .40),
    inset 0 -2px 6px rgba(0, 70, 40, .28),
    0 1px 0 #0A6B45,
    0 3px 8px rgba(10, 120, 80, .28);
}

@media (prefers-reduced-motion: reduce) {
  body.ajustes .seccion,
  body.ajustes .guardar .principal { transition: none; }
}


/* ============================================================
   Capa del panel de moderacion (body.moderar) — aprobar/rechazar.

   Es la pantalla de trabajo: la mira toda la noche y toca los mismos
   dos botones cien veces. Por eso NO lleva fondo animado ni degrade de
   marca encima de los botones. Toma de las otras pantallas lo unico que
   sirve acá: el relieve, para que las fichas se apilen y los botones se
   sientan teclas.

   REGLA QUE NO SE TOCA (esta en el handoff): aprobar es verde y rechazar
   es rojo, siempre, sin degrade ni logo encima. Es la unica cosa que ella
   distingue de reojo a la madrugada. Lo que se agrega es espesor, no color.
   ============================================================ */

/* Mismo fondo tenue que configuracion: las fichas blancas se recortan
   en vez de fundirse, pero nada se mueve detras de la lista. */
body.moderar {
  background:
    radial-gradient(66vmax 52vmax at 12% -12%, rgba(255, 45, 143, .16), transparent 62%),
    radial-gradient(58vmax 48vmax at 92% 6%,  rgba(155, 47, 232, .15), transparent 60%),
    linear-gradient(180deg, #F2E7FA 0%, #EBDEF6 55%, #F0E6F8 100%);
  background-attachment: fixed;
}

/* --- los tres contadores: pastillas con espesor ---------------------- */

body.moderar .marcador a {
  --canto: rgba(155, 47, 232, .16);
  border: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBFF 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(120, 40, 170, .08),
    0 3px 0 var(--canto),
    0 6px 14px rgba(60, 20, 90, .10);
  transition: transform .12s ease, box-shadow .12s ease;
}
body.moderar .marcador a:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    0 1px 0 var(--canto),
    0 3px 8px rgba(60, 20, 90, .10);
}

/* El canto de cada contador toma su propio color: de reojo se ve cual
   filtro esta puesto sin leer el numero. */
body.moderar .marcador .espera { --canto: rgba(224, 138, 11, .38); }
body.moderar .marcador .si     { --canto: rgba(18, 160, 107, .38); }
body.moderar .marcador .no     { --canto: rgba(226, 58, 99, .38); }

/* El filtro activo se levanta en vez de solo cambiar el borde. */
body.moderar .marcador a[aria-current="true"] {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 2px var(--rosa),
    0 5px 0 var(--canto),
    0 12px 22px rgba(60, 20, 90, .16);
}

/* --- el buscador ----------------------------------------------------- */

body.moderar .buscador input {
  border: 1.5px solid rgba(231, 224, 240, .95);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(60, 20, 90, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.moderar .buscador input:focus,
body.moderar .buscador input:focus-visible {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 4px rgba(255, 45, 143, .15);
}

/* --- las fichas de invitado ------------------------------------------ */

/* La franja de color a la izquierda se queda: es como sabe el estado de
   un vistazo. Lo que cambia es que ahora la ficha tiene espesor, asi la
   lista se lee como pila de tarjetas y no como renglones. */
body.moderar .ficha {
  position: relative;              /* lo necesita el marco del destello */
  border: 0;
  border-left: 5px solid var(--linea);
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBFF 100%);
  margin-bottom: .85rem;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(120, 40, 170, .08),
    0 3px 0 rgba(155, 47, 232, .13),
    0 7px 16px rgba(60, 20, 90, .10);
}

/* La franja va repetida acá a proposito: la regla de arriba usa el atajo
   border-left, que pisa el color del estado. Si se borran estas tres
   lineas, todas las fichas quedan con la franja gris. */
body.moderar .ficha.pendiente  { border-left-color: var(--espera); }
body.moderar .ficha.aprobado   { border-left-color: var(--si); }
body.moderar .ficha.rechazado  { border-left-color: var(--no); }

/* La que espera revision se despega un poco: es la que hay que atender. */
body.moderar .ficha.pendiente {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(120, 40, 170, .08),
    0 4px 0 rgba(224, 138, 11, .22),
    0 10px 22px rgba(60, 20, 90, .14);
}

/* Las ya resueltas bajan un escalon: siguen legibles, pero no compiten
   con las pendientes por la atencion. */
body.moderar .ficha.aprobado,
body.moderar .ficha.rechazado {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    0 2px 0 rgba(155, 47, 232, .10),
    0 5px 12px rgba(60, 20, 90, .08);
}

body.moderar .ficha .miniatura {
  border: 0;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(231, 224, 240, .95),
    inset 0 2px 5px rgba(60, 20, 90, .10);
}

/* --- el cartel de lo que ya se decidio ------------------------------- */

/* Tres señales para lo mismo, porque se mira apurada y de reojo:
   el cartel (dice la palabra), el tinte de la ficha (se ve sin leer) y la
   franja de la izquierda que ya estaba. Las pendientes no llevan ninguna
   de las tres: quedan blancas y limpias, que es justo lo que las hace
   saltar en una lista donde el resto tiene color. */

body.moderar .ficha.aprobado {
  background:
    linear-gradient(100deg, rgba(18, 160, 107, .15), rgba(18, 160, 107, .03) 44%,
                    rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFEFC 100%);
}
body.moderar .ficha.rechazado {
  background:
    linear-gradient(100deg, rgba(226, 58, 99, .14), rgba(226, 58, 99, .03) 44%,
                    rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFBFC 100%);
}

body.moderar .sello {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  margin: 0 0 .3rem;
  padding: .2rem .62rem .22rem;
  border-radius: 999px;
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  transform-origin: left center;   /* para que el rebote crezca desde el margen */
}
body.moderar .sello::before { content: "✓"; font-size: .84rem; line-height: 1; }
body.moderar .sello.no::before { content: "✕"; }

body.moderar .sello.si {
  background: var(--si);
  box-shadow: 0 2px 0 #0A6B45, 0 4px 9px rgba(10, 120, 80, .26);
}
body.moderar .sello.no {
  background: var(--no);
  box-shadow: 0 2px 0 #A31E42, 0 4px 9px rgba(180, 30, 70, .24);
}

/* --- el aviso de "esto es lo que acabas de hacer" -------------------- */

/* La animacion corre en UNA sola ficha: la que acaba de tocar. El boton
   la manda de vuelta con el ancla #ficha-N, asi que :target es siempre
   esa y nada mas. Poner a latir las treinta y cuatro aprobadas seria
   ruido, y a las tres de la mañana el ruido cansa. */

body.moderar .ficha.aprobado  { --marco: var(--si); }
body.moderar .ficha.rechazado { --marco: var(--no); }
body.moderar .ficha.pendiente { --marco: var(--espera); }

body.moderar .ficha:target::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 3px solid var(--marco, var(--rosa));
  border-radius: 21px;
  pointer-events: none;
  opacity: 0;
  /* Solo opacidad y transform: la placa de video se encarga sola y la
     lista sigue moviendose con el dedo mientras corre. */
  animation: moderar-destello 1.9s ease-out 1 both;
}
@keyframes moderar-destello {
  0%   { opacity: 0; transform: scale(.985); }
  10%  { opacity: 1; transform: scale(1); }
  70%  { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.012); }
}

/* El cartel entra de un rebote: es lo que le confirma cual acaba de tocar. */
body.moderar .ficha:target .sello {
  animation: moderar-sello 1.1s cubic-bezier(.22, .9, .3, 1.25) 1 both;
}
@keyframes moderar-sello {
  0%   { opacity: 0; transform: scale(.55); }
  30%  { opacity: 1; transform: scale(1.14); }
  48%  { transform: scale(.97); }
  100% { transform: scale(1); }
}

/* En el celular "Sin comprobante" se salia del recuadro: entra cortando
   la palabra antes que desbordar. */
body.moderar .ficha .miniatura .sin {
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* --- los dos botones que importan ------------------------------------ */

/* Base comun: alto suficiente para el pulgar y transicion corta.
   El :active hunde el boton hasta el canto — es el unico gesto que
   confirma que se apreto, porque la pagina recarga despues. */
body.moderar .acciones .btn {
  padding: .55rem 1rem;
  transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
}

body.moderar .acciones .btn.si,
body.moderar .acciones .btn.no {
  --canto: #0A6B45;
  position: relative;
  border: 0;
  color: #fff;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .40),
    inset 0 -3px 6px rgba(0, 0, 0, .18),
    0 4px 0 var(--canto),
    0 8px 14px rgba(60, 20, 90, .22);
}
/* Verde y rojo planos, los de siempre. Sin degrade de marca: el color es
   la señal, el relieve es solo el volumen. */
body.moderar .acciones .btn.si { --canto: #0A6B45; background: var(--si); }
body.moderar .acciones .btn.no { --canto: #A31E42; background: var(--no); }

body.moderar .acciones .btn.si:hover,
body.moderar .acciones .btn.no:hover { filter: brightness(1.06); }

body.moderar .acciones .btn.si:active,
body.moderar .acciones .btn.no:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .30),
    inset 0 -2px 5px rgba(0, 0, 0, .20),
    0 1px 0 var(--canto),
    0 3px 7px rgba(60, 20, 90, .20);
}

/* Los secundarios (credencial, marcar ingreso, volver a revisar) llevan
   un canto apenas marcado: se distinguen de los dos principales sin
   pelearles la atencion. */
body.moderar .acciones .btn:not(.si):not(.no) {
  border: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF7FD 100%);
  box-shadow:
    inset 0 0 0 1px rgba(231, 224, 240, .95),
    0 2px 0 rgba(155, 47, 232, .12),
    0 4px 9px rgba(60, 20, 90, .08);
}
body.moderar .acciones .btn:not(.si):not(.no):active {
  transform: translateY(2px);
  box-shadow:
    inset 0 0 0 1px rgba(231, 224, 240, .95),
    0 1px 0 rgba(155, 47, 232, .12),
    0 2px 5px rgba(60, 20, 90, .08);
}

/* --- la lista vacia --------------------------------------------------- */

body.moderar .vacio {
  border: 2px dashed rgba(155, 47, 232, .22);
  background: rgba(255, 255, 255, .70);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9);
}

.catering-enlace {
  display: grid; gap: .65rem; margin: 0 0 1.2rem; padding: 1rem;
  border: 1px solid var(--linea); border-radius: 16px; background: #fff;
  box-shadow: 0 4px 14px rgba(60, 20, 90, .08);
}
.catering-enlace p { margin: .2rem 0 0; color: var(--gris); font-size: .86rem; }
.catering-enlace input {
  width: 100%; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--linea);
  border-radius: 10px; background: var(--papel);
}
.mesa-form { margin: .7rem 0; }
.mesa-form label { display: block; margin: 0 0 .28rem; color: var(--gris); font-size: .78rem; font-weight: 700; }
.mesa-form > div { display: flex; gap: .45rem; flex-wrap: wrap; }
.mesa-form input {
  flex: 1 1 9rem; min-width: 0; padding: .64rem .72rem; border: 1.5px solid var(--linea);
  border-radius: 10px; background: #fff; font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  body.moderar .marcador a,
  body.moderar .acciones .btn,
  body.moderar .buscador input { transition: none; }
  /* El cartel y el color quedan igual: la señal no depende del movimiento. */
  body.moderar .ficha:target::after,
  body.moderar .ficha:target .sello { animation: none; }
  body.moderar .ficha:target::after { opacity: 0; }
}

/* --- lo que falta cargar, en los tres botones ---------------------------

   Una pastilla por cosa que falta, no solo la primera. Van en ámbar -el mismo
   color que los contadores "para revisar" del panel de moderar-, así que se
   leen como pendiente y no como error. Cuando no falta nada, esta fila
   desaparece y vuelve la pastilla con la fecha. */

.camino-faltan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-top: .8rem;
}
.camino-faltan .camino-marca { margin-top: 0; }

.falta-rotulo {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--espera);
  margin-right: .15rem;
}

.camino-marca.falta {
  background: color-mix(in srgb, var(--espera) 14%, #fff);
  color: color-mix(in srgb, var(--espera) 82%, #3A2410);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--espera) 28%, transparent);
}

/* Sobre el degradé del inicio las tarjetas son blancas, así que el ámbar
   necesita un punto más de cuerpo para no quedar lavado. */
body.inicio .camino-marca.falta {
  background: color-mix(in srgb, var(--espera) 17%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--espera) 34%, transparent);
}

/* --- vista previa del mapa, en Mi fiesta --------------------------------

   El recuadro tiene alto fijo aunque todavía no haya mapa: si creciera al
   aparecer, el formulario entero salta y ella pierde el renglón que estaba
   escribiendo. */

.mapa-previa {
  position: relative;
  height: 190px;
  border-radius: var(--curva);
  overflow: hidden;
  background: color-mix(in srgb, var(--rosa) 5%, #FBF8FE);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--rosa) 18%, var(--linea)),
    inset 0 2px 6px rgba(60, 20, 90, .06);
  display: grid;
  place-items: center;
}

.mapa-previa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.mapa-aviso {
  margin: 0;
  padding: 1.2rem 1.4rem;
  text-align: center;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--gris);
  max-width: 26rem;
}

.mapa-previa iframe[hidden] { display: none; }

/* --- los datos de acceso de cada fiesta, en la lista del admin ----------

   Antes vivían adentro de "Configurar" y desde la lista no había ninguna señal
   de que existieran. Ahora están a la vista, con la contraseña tapada: se
   destapa con Ver, así una captura de esta pantalla no la muestra. */

.credenciales {
  margin: .9rem 0 .2rem;
  padding: .85rem 1rem .9rem;
  border-radius: var(--curva);
  background: color-mix(in srgb, var(--rosa) 4%, #FBF8FE);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rosa) 14%, var(--linea));
  display: flex;
  flex-direction: column;
  gap: .45rem;
  align-items: flex-start;
}

.cred-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.cred-rotulo {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  min-width: 5.4rem;
}

.cred-valor { font-size: .95rem; font-weight: 600; }
.cred-valor.tapada { letter-spacing: .18em; color: var(--gris); }
.cred-valor.tenue { font-weight: 500; color: var(--gris); font-size: .88rem; }

.cred-pista { margin: 0; font-size: .76rem; color: var(--gris); }

.credenciales .btn { padding: .32rem .7rem; font-size: .76rem; }

@media (max-width: 30rem) {
  .cred-rotulo { min-width: 0; flex: 1 0 100%; }
}