body { font-family: system-ui, Arial, sans-serif; margin:0; background:#fafafa; color:#111; }
header { background:#0d47a1; color:#fff; padding:1rem 1.25rem; }
h1 { margin:0; font-size:1.6rem; }
.subtitle { margin:.25rem 0 0; font-size:.9rem; opacity:.85; }
main { padding:1rem 1.25rem 3rem; max-width:1000px; margin:0 auto; }
.controls { display:flex; gap:.75rem; margin:1rem 0 1.25rem; flex-wrap:wrap; }
button { background:#1565c0; border:none; color:#fff; padding:.65rem 1rem; border-radius:4px; cursor:pointer; font-size:.95rem; }
button[disabled] { background:#9e9e9e; cursor:not-allowed; }
.info { padding:.75rem 1rem; background:#e3f2fd; border-left:4px solid #1976d2; border-radius:4px; font-size:.9rem; }
#log { font-family:monospace; white-space:pre-wrap; background:#263238; color:#eceff1; padding:.75rem; border-radius:4px; max-height:220px; overflow:auto; font-size:.75rem; }
#beaconsTable { width:100%; border-collapse:collapse; font-size:.8rem; }
#beaconsTable th, #beaconsTable td { padding:.45rem .5rem; border-bottom:1px solid #ddd; text-align:left; }
#beaconsTable tbody tr.highlight { background:#fff9c4; transition: background 1.2s ease; }
.prox-cerca { color:#1b5e20; font-weight:600; }
.prox-media { color:#ef6c00; font-weight:600; }
.prox-lejos { color:#b71c1c; font-weight:600; }
footer { position:fixed; bottom:0; left:0; right:0; background:#0d47a1; color:#fff; font-size:.7rem; padding:.4rem .75rem; }
.foot { margin:0; }