:root { --fondo:#f6f7f9; --panel:#fff; --texto:#1c2430; --suave:#5d6b7c; --borde:#dfe3e8; --acento:#0b6bcb; --bot:#eef4ff; --humano:#e9f8ef; --cliente:#fff; --peligro:#b42318; --aviso:#9a6700; }
@media (prefers-color-scheme: dark) { :root { --fondo:#11151b; --panel:#181e26; --texto:#e6ebf1; --suave:#9aa7b6; --borde:#2a3340; --acento:#4c9aff; --bot:#1b2738; --humano:#17301f; --cliente:#1e252f; --peligro:#ff6b5e; --aviso:#e3b341; } }
* { box-sizing: border-box; } body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--fondo); color:var(--texto); }
.barra { display:flex; align-items:center; gap:16px; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--borde); flex-wrap:wrap; }
.marca { font-weight:700; } .marca span { font-weight:400; color:var(--suave); }
nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; } nav button { background:none; border:0; padding:6px 10px; border-radius:6px; color:var(--suave); cursor:pointer; font:inherit; }
nav button.activa { background:var(--fondo); color:var(--texto); font-weight:600; }
.usuario { display:flex; gap:8px; align-items:center; color:var(--suave); } .usuario input { width:70px; }
button { font:inherit; padding:6px 12px; border-radius:6px; border:1px solid var(--acento); background:var(--acento); color:#fff; cursor:pointer; } button.sec { background:none; color:var(--acento); }
button:disabled { opacity:.5; cursor:default; } input, select, textarea { font:inherit; padding:6px 8px; border:1px solid var(--borde); border-radius:6px; background:var(--panel); color:var(--texto); }
main { padding:16px; max-width:1400px; margin:0 auto; } .aviso { color:var(--suave); } .vacio { color:var(--suave); padding:24px; text-align:center; }
.dos { display:grid; grid-template-columns:minmax(260px, 360px) 1fr; gap:16px; min-height:calc(100vh - 110px); }
@media (max-width: 800px) { .dos { grid-template-columns:1fr; } }
.lista, .detalle, .tarjeta { background:var(--panel); border:1px solid var(--borde); border-radius:10px; }
.lista { overflow:auto; max-height:calc(100vh - 110px); } .filtros { display:flex; gap:6px; padding:10px; border-bottom:1px solid var(--borde); flex-wrap:wrap; }
.item { padding:10px 12px; border-bottom:1px solid var(--borde); cursor:pointer; } .item:hover, .item.sel { background:var(--fondo); }
.item b { display:block; } .item small { color:var(--suave); }
.etq { display:inline-block; font-size:12px; padding:1px 7px; border-radius:10px; border:1px solid var(--borde); color:var(--suave); margin-right:4px; }
.etq.bot { background:var(--bot); } .etq.humano { background:var(--humano); } .etq.fallido, .etq.bloquear { color:var(--peligro); border-color:var(--peligro); } .etq.advertir { color:var(--aviso); border-color:var(--aviso); }
.detalle { display:flex; flex-direction:column; max-height:calc(100vh - 110px); } .cab { padding:12px 16px; border-bottom:1px solid var(--borde); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cab h2 { margin:0; font-size:16px; flex:1; } .mensajes { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
.msg { max-width:75%; padding:8px 12px; border-radius:10px; border:1px solid var(--borde); white-space:pre-wrap; word-wrap:break-word; }
.msg.entrada { background:var(--cliente); align-self:flex-start; } .msg.bot { background:var(--bot); align-self:flex-end; } .msg.humano { background:var(--humano); align-self:flex-end; }
.msg small { display:block; color:var(--suave); font-size:11px; margin-top:4px; }
.redactar { border-top:1px solid var(--borde); padding:10px; display:flex; gap:8px; flex-direction:column; } .redactar textarea { width:100%; min-height:60px; resize:vertical; }
.fila { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .guardian { border:1px solid var(--peligro); border-radius:8px; padding:10px; }
.guardian.advertir { border-color:var(--aviso); } .guardian p { margin:4px 0; }
.lateral { padding:12px 16px; border-top:1px solid var(--borde); color:var(--suave); font-size:13px; }
.metricas { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; margin-bottom:16px; }
.tarjeta { padding:12px 16px; } .tarjeta b { display:block; font-size:22px; } .tarjeta span { color:var(--suave); }
table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--borde); border-radius:10px; overflow:hidden; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--borde); vertical-align:top; } th { color:var(--suave); font-weight:600; font-size:12px; }
.tabla { overflow:auto; } form.nuevo { display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); align-items:end; margin:12px 0; }
.qr { background:#fff; padding:12px; border-radius:8px; display:inline-block; } .error { color:var(--peligro); }