/* La paleta es la del app (Theme.kt) y de la consola (consola.css). */
:root { --bg:#0B0D12; --panel:#141821; --panel2:#1B202B; --line:#252B38; --ink:#E9ECF3; --muted:#98A2B8; --accent:#4F8CFF; --bad:#F0616D; --ok:#31C48D; }
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.caja { width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px 26px 18px; transition:max-width .2s }
.caja.ancha { max-width:880px }
.marca { text-align:center; margin-bottom:18px }
.marca img { width:220px; max-width:100%; height:84px; object-fit:contain; border-radius:10px }
.marca img.hatun { width:84px; height:84px }
.empresa { color:var(--muted); font-size:13px; margin-top:6px }
h1 { font-size:18px; margin:0 0 14px; text-align:center }
label { display:block; margin-bottom:12px }
label span { display:block; font-size:12px; color:var(--muted); margin-bottom:4px }
input { width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); color:var(--ink); font-size:15px }
input:focus { outline:none; border-color:var(--accent) }
button { width:100%; padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); color:var(--ink); font-size:15px; font-weight:600; cursor:pointer; margin-top:4px }
button.principal { background:var(--accent); border-color:var(--accent); color:#fff }
button:disabled { opacity:.6; cursor:wait }
.error { color:var(--bad); font-size:13px; margin:10px 0 0 }
.aviso { color:var(--ok); font-size:13px; margin:12px 0 0; text-align:center }
.ayuda { color:var(--muted); font-size:13px; margin:0 0 14px; text-align:center }
.enlaces { text-align:center; font-size:13px; color:var(--muted); margin:16px 0 0 }
.enlaces a, footer a { color:var(--muted) }
.proveedores { margin-top:14px; display:grid; gap:8px }
.proveedores button { background:var(--panel2) }
.destinos { display:grid; gap:10px; margin-bottom:8px }
.quien { display:flex; align-items:center; gap:14px; margin-bottom:18px }
.quien h1 { margin:0; text-align:left; font-size:20px }
.avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#4F8CFF,#1B3F8F); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex:none }
.nivel { color:var(--muted); font-size:12.5px }
.nivel .pill { display:inline-block; padding:2px 8px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); font-size:11.5px; margin-left:6px; color:var(--ink) }
.cab-lista { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:22px 0 12px }
.cab-lista h2 { margin:0; font-size:15px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em }
.cab-lista input { width:220px; padding:8px 12px; font-size:14px }
.grilla { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px }
.tile { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:12px 14px; transition:border-color .15s, transform .15s; min-width:0 }
.tile:hover { border-color:var(--accent); transform:translateY(-1px) }
.tile img { width:44px; height:44px; border-radius:10px; object-fit:contain; background:#fff; flex:none }
.tile > span { min-width:0; flex:1 }
.tile b { display:block; font-size:14px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tile small { color:var(--muted); font-size:12px; display:block; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tile .estado { display:inline-flex; align-items:center; gap:5px; margin-right:8px }
.tile .estado::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--muted) }
.tile .estado.ok::before { background:var(--ok) }
.tile.apagada img { filter:grayscale(1); opacity:.7 }
.destino.grande { padding:18px 18px }
.destino .icono { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(139,92,246,.18); color:#B79CFF; flex:none; font-size:18px }
.destino .icono.azul { background:rgba(79,140,255,.16); color:var(--accent) }
.vacio { color:var(--muted); font-size:13px; padding:10px 0 }
.destino { display:block; text-decoration:none; color:var(--ink); background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:14px 16px }
.destino:hover { border-color:var(--accent) }
.destino b { display:block } .destino small { color:var(--muted) }
.destino.maestra { border-color:#8B5CF6 }
.destino { display:flex; align-items:center; gap:12px }
.destino .logo-dest { width:36px; height:36px; border-radius:8px; object-fit:contain; background:#fff; flex:none }
.destino.chica { padding:10px 14px } .destino.chica b { font-size:14px }
.destinos.usuarias { margin:-2px 0 4px 18px; border-left:2px solid var(--line); padding-left:10px }
footer { margin-top:22px; text-align:center; font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px }
.credito { margin-top:4px; font-size:11px }
.oculto { display:none !important }