/* Painel pensado para o celular primeiro: e de la que o canal e operado. */
:root {
  --fundo: #FFF8E7; --carta: #ffffff; --linha: #E8DFC8; --texto: #2F2A20;
  --fraco: #6E6455; --marca: #F6C445; --ok: #4E9A51; --alerta: #C86A2E; --ruim: #C0392B;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 3rem;
}
header {
  background: var(--marca); padding: 1rem 1.1rem; position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
}
header h1 { font-size: 1.05rem; margin: 0; }
header small { display: block; font-weight: 400; opacity: .75; }
main { padding: 1rem; max-width: 780px; margin: 0 auto; }
.carta {
  background: var(--carta); border: 1px solid var(--linha); border-radius: 14px;
  padding: 1rem; margin-bottom: 1rem;
}
.carta h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); margin: 0 0 .7rem; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.numero { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.rotulo { font-size: .8rem; color: var(--fraco); }
.aviso { background: #FFF3D6; border-color: var(--alerta); }
.aviso li { margin-bottom: .35rem; }
ul { margin: 0; padding-left: 1.1rem; }
button {
  font: inherit; font-weight: 600; border: 1px solid var(--linha); background: var(--carta);
  color: var(--texto); border-radius: 10px; padding: .6rem 1rem; cursor: pointer; min-height: 44px;
}
button.principal { background: var(--marca); border-color: #E0AE28; }
button.perigo { color: var(--ruim); }
button:disabled { opacity: .5; cursor: default; }
.linha-ep {
  display: flex; gap: .7rem; align-items: flex-start; justify-content: space-between;
  padding: .75rem 0; border-top: 1px solid var(--linha); flex-wrap: wrap;
}
.linha-ep:first-child { border-top: 0; }
.linha-ep .acoes { display: flex; gap: .4rem; flex-wrap: wrap; }
.etiqueta {
  font-size: .72rem; padding: .15rem .5rem; border-radius: 99px;
  background: #F0E9D6; color: var(--fraco); white-space: nowrap;
}
.etiqueta.bom { background: #E4F2E4; color: var(--ok); }
.etiqueta.ruim { background: #FBE3E0; color: var(--ruim); }
.etiqueta.espera { background: #FFF0D0; color: var(--alerta); }
.motivo { color: var(--ruim); font-size: .86rem; margin-top: .2rem; }
.evento { font-size: .87rem; padding: .4rem 0; border-top: 1px solid var(--linha); }
.evento span { color: var(--fraco); font-size: .78rem; display: block; }
.entrada { max-width: 340px; margin: 12vh auto; }
label { display: block; font-size: .85rem; color: var(--fraco); margin: .8rem 0 .25rem; }
input {
  width: 100%; font: inherit; padding: .7rem; border: 1px solid var(--linha);
  border-radius: 10px; background: var(--carta); color: var(--texto); min-height: 44px;
}
.erro { color: var(--ruim); margin-top: .8rem; font-size: .9rem; }
.cena { border-top: 1px solid var(--linha); padding: .5rem 0; font-size: .9rem; }
.cena b { color: var(--fraco); font-weight: 600; }
dialog { border: 1px solid var(--linha); border-radius: 14px; max-width: 640px; width: 92%; padding: 1rem; }