:root { --fg: #1f2328; --mute: #59636e; --line: #d1d9e0; --bg: #fff; --ok: #1a7f37; --bad: #cf222e; --acc: #0969da; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, sans-serif; color: var(--fg); background: var(--bg); }
header { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 8px 16px; border-bottom: 1px solid var(--line); }
h1 { font-size: 16px; margin: 0; }
#quien { color: var(--mute); }
main { padding: 12px 16px; display: flex; flex-direction: column; align-items: center; }
nav { display: flex; gap: 4px; justify-content: center; margin-bottom: 8px; }
nav button.on { background: var(--acc); color: #fff; border-color: var(--acc); }
button, select, input { font: inherit; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: #f6f8fa; cursor: pointer; }
input { background: #fff; cursor: text; }
table { border-collapse: collapse; margin: 0 auto; }
th, td { border: 1px solid var(--line); padding: 3px 8px; text-align: center; white-space: nowrap; }
th { font-weight: 600; font-size: 13px; white-space: normal; max-width: 90px; }
td.nom { text-align: left; }
.ok { color: var(--ok); } .bad { color: var(--bad); } .mute { color: var(--mute); }
/* Log como cuadro sinóptico (19/10): cada columna al ancho del dato, todo centrado, sin color; «Qué pasó» puede partirse. */
#tLog td, #tLog th { text-align: center; }
#tLog td.que { white-space: normal; max-width: 520px; }
#tLog th { max-width: none; white-space: nowrap; }
.msg { min-height: 1.4em; text-align: center; }
.filtros { display: flex; gap: 6px; justify-content: center; margin: 8px 0; flex-wrap: wrap; }
td button { padding: 2px 6px; font-size: 12px; }
.tmp { font: 600 16px monospace; letter-spacing: 2px; }
@media (max-width: 700px) { th, td { padding: 2px 4px; } }