:root {
  --fondo: #0f1115; --panel: #181b22; --borde: #2a2f3a; --texto: #e8eaf0; --suave: #9aa3b5;
  --acento: #6ea8ff; --ok: #4cc38a; --mal: #ff6b6b; --aviso: #f5b942;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root { --fondo: #f5f6f9; --panel: #fff; --borde: #d9dde6; --texto: #1c2030; --suave: #5b6478; --acento: #2563eb; --ok: #1a8f5b; --mal: #d33; --aviso: #a86b00; color-scheme: light; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.45 system-ui, sans-serif; }
body { min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
#barra { display: flex; align-items: center; gap: 10px; padding: 12px 16px; position: sticky; top: 0; background: var(--fondo); z-index: 2; border-bottom: 1px solid var(--borde); }
#barra h1 { margin: 0; font-size: 18px; letter-spacing: .08em; flex: 1; }
#tabs { display: flex; gap: 6px; padding: 8px 16px; position: sticky; top: 49px; background: var(--fondo); z-index: 2; }
#tabs button { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--borde); background: var(--panel); color: var(--suave); font: inherit; }
#tabs button.activa { color: var(--texto); border-color: var(--acento); }
main { padding: 12px 16px 40px; max-width: 720px; margin: 0 auto; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--borde); color: var(--suave); }
.chip.ok { color: var(--ok); border-color: var(--ok); } .chip.mal { color: var(--mal); border-color: var(--mal); } .chip.aviso { color: var(--aviso); border-color: var(--aviso); }
.enlace { background: none; border: 0; color: var(--acento); font: inherit; padding: 6px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; }
.tarjeta.toque { cursor: pointer; } .tarjeta.toque:active { border-color: var(--acento); }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fila .sp { flex: 1; }
.titulo { font-weight: 600; overflow-wrap: anywhere; }
.suave { color: var(--suave); font-size: 13px; }
label { display: block; font-size: 13px; color: var(--suave); margin: 12px 0 4px; }
input, select, textarea { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); font: inherit; }
textarea { min-height: 120px; resize: vertical; }
.boton { width: 100%; padding: 14px; border-radius: 12px; border: 0; background: var(--acento); color: #fff; font: inherit; font-weight: 600; margin-top: 16px; }
.boton.sec { background: var(--panel); color: var(--texto); border: 1px solid var(--borde); }
.boton.peligro { background: var(--mal); }
.boton:disabled { opacity: .5; }
.error { color: var(--mal); margin: 10px 0 0; }
.evento { margin: 8px 0; overflow-wrap: anywhere; }
.evento.texto { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; white-space: pre-wrap; }
.evento.herramienta { font: 13px ui-monospace, monospace; color: var(--acento); }
.evento.resultado { font: 12px ui-monospace, monospace; color: var(--suave); white-space: pre-wrap; max-height: 5.5em; overflow: hidden; }
.evento.error { color: var(--mal); }
.evento.fin { color: var(--ok); font-size: 13px; }
.pie { position: sticky; bottom: 0; background: var(--fondo); padding: 10px 0 14px; }
.vacio { text-align: center; color: var(--suave); padding: 40px 0; }
.tarjeta.permiso { border-color: var(--aviso); }
.cmd { margin: 8px 0; padding: 10px; border-radius: 8px; background: var(--fondo); font: 13px ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 12em; overflow: auto; }
.acciones .boton { margin-top: 8px; flex: 1; }