:root{--fondo: #0f1115;--panel: #171a21;--borde: #262b36;--texto: #e6e8ec;--tenue: #9aa3b2;--ok: #3fb950;--alerta: #d29922;--mal: #f85149;--acento: #388bfd;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--fondo);color:var(--texto);font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}.centro{min-height:100dvh;display:grid;place-items:center;padding:1.5rem}.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:1.75rem;width:100%;max-width:22rem}h1{font-size:1.15rem;margin:0 0 .35rem}p.sub{color:var(--tenue);margin:0 0 1.25rem;font-size:.9rem}label{display:block;font-size:.85rem;color:var(--tenue);margin-bottom:.3rem}input{width:100%;padding:.6rem .7rem;margin-bottom:.9rem;background:#0d1017;color:var(--texto);border:1px solid var(--borde);border-radius:8px;font-size:1rem}input:focus{outline:2px solid var(--acento);outline-offset:1px}button{width:100%;padding:.65rem;border:0;border-radius:8px;background:var(--acento);color:#fff;font-size:1rem;cursor:pointer}button:disabled{opacity:.55;cursor:default}button.sec{background:transparent;border:1px solid var(--borde);color:var(--texto);width:auto;padding:.4rem .7rem;font-size:.85rem}.error{color:var(--mal);font-size:.875rem;margin:0 0 .9rem}.aviso{color:var(--ok);font-size:.875rem;margin:0 0 .9rem}header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--borde);flex-wrap:wrap}main{padding:1.25rem}.tabla{width:100%;border-collapse:collapse;font-size:.9rem}.tabla th{text-align:left;color:var(--tenue);font-weight:500;padding:.5rem .6rem;border-bottom:1px solid var(--borde);white-space:nowrap}.tabla td{padding:.65rem .6rem;border-bottom:1px solid var(--borde)}.estado{font-weight:600}.estado.CONNECTED{color:var(--ok)}.estado.QR_PENDING,.estado.CONNECTING{color:var(--alerta)}.estado.DISCONNECTED,.estado.LOGGED_OUT,.estado.ERROR{color:var(--mal)}.tenue{color:var(--tenue)}@media (max-width: 720px){.tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}.tabla thead{display:none}.tabla tr{border:1px solid var(--borde);border-radius:10px;margin-bottom:.9rem;padding:.35rem .6rem}.tabla td{border:0;padding:.35rem 0;display:flex;justify-content:space-between;gap:1rem}.tabla td:before{content:attr(data-col);color:var(--tenue);font-size:.8rem}}
