:root {
  --fondo: #0b0816; --panel: #141022; --borde: rgb(214 186 120 / .22); --oro: #d6ba78; --marfil: #f2ecdf; --tenue: #a49db5;
  --verde: #2ea043; --rojo: #d64545; --ig: #e1306c; --tt: #25f4ee;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--marfil); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }
.aviso { display: grid; place-content: center; text-align: center; height: 100%; padding: 16px; }
.aviso h1 { font-size: 1.3rem; color: var(--oro); margin: 0 0 .4rem; }
main { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.barra { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .8rem; border-bottom: 1px solid var(--borde); background: var(--panel); }
.titulo { display: flex; align-items: center; gap: .6rem; }
.titulo b { color: var(--oro); letter-spacing: .02em; }
.acciones { display: flex; gap: .4rem; }
.chip { font-size: .75rem; padding: .15rem .55rem; border-radius: 99px; border: 1px solid currentColor; }
.chip.gris { color: var(--tenue); } .chip.verde { color: var(--verde); } .chip.rojo { color: var(--rojo); }
.btn { background: linear-gradient(180deg, #2a2140, #1c1630); color: var(--marfil); border: 1px solid var(--borde); border-radius: .7rem; padding: .45rem .8rem; font: inherit; cursor: pointer; min-height: 36px; }
.btn:hover:not(:disabled) { border-color: var(--oro); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.sutil { padding: .45rem .65rem; }
.btn.mini { font-size: .8rem; padding: .3rem .55rem; min-height: 30px; }
.btn.ig { border-color: rgb(225 48 108 / .5); } .btn.tt { border-color: rgb(37 244 238 / .4); }
.cuerpo { display: grid; grid-template-columns: 270px 1fr; min-height: 0; }
.lista { overflow: auto; padding: .6rem; display: grid; gap: .45rem; align-content: start; border-right: 1px solid var(--borde); }
.resumen { margin: 0 0 .2rem; font-size: .8rem; color: var(--tenue); } .resumen b { color: var(--marfil); }
.pais { border: 1px solid var(--borde); border-radius: .9rem; padding: .45rem .5rem; background: var(--panel); display: grid; gap: .35rem; }
.pais.activo { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro) inset; }
.pais.apagado { opacity: .55; }
.nombre { all: unset; cursor: pointer; display: flex; gap: .5rem; align-items: center; }
.nombre:disabled { cursor: not-allowed; }
.nombre:focus-visible, .btn:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.nombre small { display: block; color: var(--tenue); font-size: .72rem; }
.bandera { font-size: 1.35rem; }
.sellos { display: flex; gap: .3rem; }
.sello { font-size: .7rem; padding: .05rem .4rem; border-radius: 99px; border: 1px solid; }
.sello.si { color: var(--verde); } .sello.no { color: var(--tenue); } .sello.gris { color: #6b7280; }
.botones { display: flex; gap: .35rem; }
.pantalla { display: grid; grid-template-rows: 1fr auto auto; min-height: 0; padding: .6rem; gap: .45rem; }
.vnc { min-height: 0; border: 1px solid var(--borde); border-radius: .9rem; overflow: hidden; background: #000; }
.pegar { display: flex; gap: .4rem; }
.pegar input { flex: 1; min-width: 0; background: var(--panel); color: var(--marfil); border: 1px solid var(--borde); border-radius: .7rem; padding: .45rem .7rem; font: inherit; }
.mensaje { margin: 0; min-height: 1.2em; font-size: .85rem; color: var(--tenue); }
.mensaje.ok { color: var(--verde); } .mensaje.error { color: var(--rojo); }
body.esperando { cursor: progress; }
@media (max-width: 760px) {
  .cuerpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .lista { grid-auto-flow: column; grid-auto-columns: 220px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--borde); }
  .resumen { display: none; }
  .vnc { min-height: 50vh; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }