:root {
  --fondo: #fff6e5;
  --tinta: #2b1608;
  --cafe: #7a2a12;
  --verde: #1d7a33;
  --azul: #1452a3;
  --amarillo: #ffd23f;
  --gris: #6b5d52;
  --tarjeta: #ffffff;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--fondo); color: var(--tinta); }
body {
  font: 22px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 40px);
  -webkit-text-size-adjust: 100%;
}
main { max-width: 640px; margin: 0 auto; }
h1 { font-size: 32px; line-height: 1.15; margin: 12px 0 18px; }
h2 { font-size: 30px; margin: 0 0 6px; }
.cargando { font-size: 26px; text-align: center; margin-top: 30vh; }

.btn {
  display: block; width: 100%; border: 0; border-radius: 18px;
  font: inherit; font-weight: 800; text-align: center; text-decoration: none;
  cursor: pointer; color: #fff; background: var(--gris);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); filter: brightness(0.9); }
.btn-grande { font-size: 28px; padding: 24px 16px; margin: 14px 0 0; min-height: 84px; }
.btn-mediano { font-size: 22px; padding: 18px 14px; margin: 12px 0 0; background: var(--cafe); }
.btn-chico { font-size: 18px; padding: 12px; margin: 24px 0 0; background: transparent; color: var(--gris); text-decoration: underline; }
.btn-verde { background: var(--verde); }
.btn-azul { background: var(--azul); }
.btn-amarillo { background: var(--tinta); color: var(--amarillo); }
.btn[disabled] { opacity: 0.6; }

.login { text-align: center; padding-top: 6vh; }
.login .logo { width: 110px; height: 110px; border-radius: 24px; }
.login label { display: block; font-size: 24px; margin: 20px 0 10px; }
.login input {
  width: 100%; font-size: 40px; text-align: center; letter-spacing: 12px;
  padding: 16px; border: 3px solid var(--cafe); border-radius: 16px; background: #fff; color: var(--tinta);
}
.msg { min-height: 1.4em; font-weight: 700; color: #b3261e; margin: 12px 0 0; }

.aviso-amarillo { background: var(--amarillo); border-radius: 18px; padding: 18px; margin-bottom: 16px; }
.aviso-amarillo p { margin: 0; font-weight: 700; }
.aviso-amarillo ol { margin: 10px 0 0; padding-left: 1.3em; }
.banda { border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; font-weight: 700; color: #fff; }
.banda-gris { background: var(--gris); }
.banda-azul { background: var(--azul); }

.pedido {
  background: var(--tarjeta); border: 4px solid #e0412f; border-radius: 22px;
  padding: 20px; margin: 0 0 22px; box-shadow: 0 4px 0 rgba(0,0,0,.08);
}
.pedido .dato { font-size: 26px; font-weight: 700; margin: 4px 0; }
.pedido .dato:empty { display: none; }
.pedido .hace { color: var(--gris); margin: 8px 0 0; font-size: 20px; }
.pedido .nuevo { display: inline-block; background: var(--amarillo); border-radius: 10px; padding: 4px 10px; margin: 0 0 8px; font-weight: 800; font-size: 18px; }

.vacio { text-align: center; background: #e5f3e8; border-radius: 22px; padding: 36px 16px; font-size: 28px; font-weight: 800; color: var(--verde); }

details { margin-top: 14px; }
summary { font-size: 20px; font-weight: 700; padding: 14px 0; cursor: pointer; color: var(--cafe); }
.mensajes { border-top: 2px solid #eee; padding-top: 8px; }
.burbuja { border-radius: 14px; padding: 10px 14px; margin: 8px 0; font-size: 20px; white-space: pre-wrap; word-break: break-word; }
.burbuja.cliente { background: #f1ece4; margin-right: 15%; }
.burbuja.pagina { background: #dde9fb; margin-left: 15%; font-size: 17px; color: #333; }

.atendidos .fila { background: #fff; border-radius: 14px; padding: 12px 14px; margin: 8px 0; }
.atendidos .fila p { margin: 0; font-size: 20px; }
.atendidos .fila .btn { margin-top: 8px; font-size: 18px; padding: 12px; background: var(--gris); }
.ajustes { border-top: 2px solid #e6d9c2; margin-top: 30px; }
.llamar { white-space: pre-line; line-height: 1.2; }