@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,500&family=DM+Sans:wght@400;500;700&family=Caveat:wght@600;700&display=swap");

:root {
  --papel: #f7f1e6;
  --papel-2: #efe6d4;
  --tinta: #2b2622;
  --tinta-suave: #6d6258;
  --oliva: #3f4a36;
  --oro: #b8914e;
  --oro-claro: #d9bd84;
  --noche: #151a14;
  --noche-2: #1f261d;
  --blanco: #fffdf8;
  --error: #a3402e;
  --radio: 18px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --mano: "Caveat", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

.serif { font-family: var(--serif); }
.oculto { display: none !important; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 1em 1.6em; min-height: 54px;
  font-weight: 700; letter-spacing: .01em;
  background: var(--oliva); color: var(--papel);
  transition: transform .12s ease, background .2s ease, opacity .2s;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.oro { background: var(--oro); color: var(--noche); }
.btn.linea { background: transparent; color: var(--oliva); box-shadow: inset 0 0 0 1.5px var(--oliva); }
.btn.bloque { width: 100%; }
.btn.peq { min-height: 38px; padding: .5em 1em; font-size: .9rem; }

/* ---------- adorno ---------- */
.adorno { display: flex; align-items: center; gap: .8rem; color: var(--oro); }
.adorno::before, .adorno::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .6; }

.spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--oro-claro); border-top-color: var(--oliva);
  animation: gira .9s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.aviso-demo {
  font-size: .78rem; background: var(--oro-claro); color: var(--noche);
  padding: .45em .9em; text-align: center;
}

/* ---------- tarjeta de caricatura (dibujo + bocadillo + firma) ---------- */
.tarjeta { margin: 0; display: flex; flex-direction: column; align-items: center; container-type: inline-size; }
.tarjeta .dib { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.tarjeta .dib img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.tarjeta .bocadillo {
  position: absolute; top: 3.5%; right: 3%; width: max-content; max-width: 46%; min-width: 16%;
  background: #fff; color: var(--tinta); border: max(1.5px, .6cqw) solid var(--tinta);
  border-radius: 50%; padding: 3.2cqw 4.2cqw;
  font-family: var(--mano); font-weight: 700; font-size: 7cqw; line-height: 1.02; text-align: center;
  overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
.tarjeta .bocadillo.largo { font-size: 5.6cqw; }
.tarjeta .bocadillo.muylargo { font-size: 4.4cqw; max-width: 50%; }
.tarjeta .bocadillo::after {
  content: ""; position: absolute; left: 20%; bottom: -4.2cqw; width: 5cqw; height: 5cqw;
  background: #fff; border-left: max(1.5px, .6cqw) solid var(--tinta); border-bottom: max(1.5px, .6cqw) solid var(--tinta);
  transform: skewX(28deg) rotate(-12deg);
}
.tarjeta figcaption {
  font-family: var(--mano); font-weight: 700; color: var(--tinta);
  font-size: 10cqw; margin-top: -.2em; line-height: 1.1;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* mientras se dibuja, el bocadillo y la firma esperan */
.tarjeta .bocadillo, .tarjeta figcaption { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1.3); }
.tarjeta.dibujando .bocadillo { opacity: 0; transform: scale(.4); }
.tarjeta.dibujando figcaption { opacity: 0; transform: translateY(.4em); }
.tarjeta .dib { border-radius: 6px; overflow: visible; }

/* ---------- panel de administrador ---------- */
.btn.peligro { background: transparent; color: var(--error); box-shadow: inset 0 0 0 1.5px var(--error); }
.pa { color: var(--tinta); }
.pa h2 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; margin: 0 0 4px; }
.pa h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin: 0; }
.pa h3 small { font-family: var(--sans); font-size: .85rem; color: var(--tinta-suave); }
.pa-sub { color: var(--tinta-suave); margin: 0; line-height: 1.45; font-size: .95rem; }
.pa-login { max-width: 340px; margin: 8vh auto; text-align: center; }
.pa-pin { width: 100%; border: 1.5px solid var(--papel-2); border-radius: 14px; padding: .85em 1em; font-size: 1.2rem; text-align: center; margin: 16px 0 6px; letter-spacing: .3em; background: #fff; }
.pa-error { color: var(--error); min-height: 1.3em; margin: 0 0 8px; }
.pa-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.pa-tabs button { border: 0; background: var(--papel-2); color: var(--tinta); border-radius: 999px; padding: .55em 1.1em; font-weight: 600; cursor: pointer; }
.pa-tabs button.on { background: var(--oliva); color: var(--papel); }
.pa-fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pa-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.pa-item { background: #fff; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--papel-2); }
.pa-item img { aspect-ratio: 1; object-fit: contain; width: 100%; background: #fff; }
.pa-item.apagado img { opacity: .3; filter: grayscale(1); }
.pa-info { padding: 8px 10px; font-size: .85rem; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pa-info b { font-family: var(--mano); font-size: 1.35rem; font-weight: 700; line-height: 1; }
.pa-frase { color: var(--tinta-suave); }
.pa-info label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 600; }
.pa-info input, .pa-form input:not([type=checkbox]) { border: 1.5px solid var(--papel-2); border-radius: 10px; padding: .6em .75em; font-size: .95rem; background: #fff; font-weight: 400; }
.pa-estado { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pa-estado.si { color: var(--oliva); } .pa-estado.no { color: var(--error); }
.pa-bts { display: flex; gap: 5px; padding: 0 8px 8px; flex-wrap: wrap; }
.pa-bts .btn { flex: 1; min-height: 34px; padding: .3em .5em; font-size: .78rem; }
.pa-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.pa-form > label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .9rem; }
.pa-check { flex-direction: row !important; align-items: flex-start; gap: 10px !important; flex-wrap: wrap; }
.pa-check input { width: 22px; height: 22px; accent-color: var(--oliva); }
.pa-check small { flex-basis: 100%; font-weight: 400; color: var(--tinta-suave); padding-left: 32px; }
.pa-qr { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: 14px; padding: 14px; }
.pa-qr-img { width: 120px; height: 120px; flex: none; display: grid; place-items: center; background: var(--papel); border-radius: 8px; color: var(--tinta-suave); font-size: .8rem; }
.pa-qr-img svg { width: 100%; height: 100%; }
.pa-qr .pa-sub { word-break: break-all; margin-bottom: 10px; }
.pa-aviso { position: sticky; bottom: 10px; margin: 14px 0 0; text-align: center; font-weight: 600; color: var(--oliva); min-height: 1.3em; }
.pa-aviso.mal { color: var(--error); }
.pa-form select { border: 1.5px solid var(--papel-2); border-radius: 10px; padding: .6em .75em; font-size: .95rem; background: #fff; }
.pa-form h3 { margin-top: 4px; }
.pa-logo { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: 14px; padding: 14px; flex-wrap: wrap; }
.pa-logo-img { width: 150px; height: 100px; display: grid; place-items: center; border-radius: 8px; color: var(--tinta-suave); font-size: .85rem;
  background: repeating-conic-gradient(#f3eee4 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.pa-logo-img img { max-width: 92%; max-height: 92%; object-fit: contain; }
.pa-logo label.btn { cursor: pointer; }
.pa-muestra { background: var(--papel-2); border-radius: 14px; padding: 16px; display: grid; place-items: center; }
.pa-muestra-cv { width: min(260px, 70%); height: auto; box-shadow: 0 6px 20px -8px #0005; background: #fff; }
.pa-estacion { background: #fff; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pa-estacion .pa-sub b { word-break: break-all; }
.pa-cola h3 { margin-bottom: 8px; }
.pa-cola-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pa-cola-lista li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 6px 10px 6px 6px; }
.pa-cola-lista img { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; background: #fff; }
.pa-cola-lista span { flex: 1; min-width: 0; }
.pa-cola-lista b { font-family: var(--mano); font-size: 1.25rem; }
.pa-cola-lista small { color: var(--tinta-suave); }
.pa-cola-lista em { font-style: normal; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); }
.pa-cola-lista em.est-impresa { color: var(--oliva); } .pa-cola-lista em.est-error { color: var(--error); } .pa-cola-lista em.est-pendiente, .pa-cola-lista em.est-imprimiendo { color: var(--oro); }
.pa-cola-lista .btn { min-height: 32px; font-size: .78rem; padding: .3em .7em; }