/* ---- dentro de la app ---- */
#web-aviso { position: sticky; top: 0; z-index: 50; background: #fef3c7; color: #78350f; border-bottom: 1px solid #fcd34d;
  padding: 9px 16px; font: 600 14px/1.4 system-ui, sans-serif; text-align: center; }
#btn-salir[hidden] { display: none !important; }

/* ---- pantallas de acceso y administración ---- */
body.acceso { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f1f5f9; color: #0f172a;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 16px; box-sizing: border-box; }
.tarjeta { width: min(420px, 100%); background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 28px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08); box-sizing: border-box; }
.marca { display: flex; align-items: center; gap: 10px; color: #047857; margin-bottom: 18px; font-size: 17px; }
.tarjeta h1 { font-size: 21px; margin: 0 0 8px; }
.tarjeta p, .tarjeta ol { color: #475569; font-size: 14px; margin: 0 0 12px; }
.tarjeta ol { padding-left: 20px; }
.tarjeta label { display: block; font-weight: 600; font-size: 13.5px; margin: 12px 0 0; }
.tarjeta input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 12px; font: inherit;
  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit; }
.tarjeta input:focus { outline: 2px solid #10b981; outline-offset: 1px; border-color: #10b981; }
.tarjeta button { width: 100%; margin-top: 18px; padding: 12px; font: 600 15px system-ui, sans-serif; color: #fff;
  background: #059669; border: 0; border-radius: 10px; cursor: pointer; }
.tarjeta button:disabled { opacity: .6; cursor: wait; }
.qr { display: grid; place-items: center; margin: 6px 0 8px; }
.qr img { width: 200px; height: 200px; image-rendering: pixelated; }
.chico { font-size: 12.5px !important; }
.chico code { font-size: 12.5px; background: #f1f5f9; padding: 2px 6px; border-radius: 6px; word-break: break-all; }
#error { color: #b91c1c; font-size: 14px; margin-top: 14px; min-height: 1em; }
#otra { display: block; margin-top: 14px; font-size: 13.5px; color: #475569; text-align: center; }

@media (prefers-color-scheme: dark) {
  body.acceso { background: #0b1220; color: #e2e8f0; }
  .tarjeta { background: #111827; border-color: #1f2937; }
  .tarjeta p, .tarjeta ol, #otra { color: #94a3b8; }
  .tarjeta input { background: #0b1220; border-color: #334155; }
  .chico code { background: #1f2937; }
  .qr img { background: #fff; padding: 6px; border-radius: 8px; }
}