/* VMs Omarchy · tema de lo web (panel, pedir acceso y, encima de noVNC, novnc/vms-omarchy.css).
   Siempre oscuro (decisión de Henan, 2026-10-16). Paleta de la familia Tokyo Night, como Omarchy. Sin nada de fuera:
   letras del sistema (SF en Apple, Segoe en Windows). */

:root {
  color-scheme: dark;
  --fondo: #0b0d12;
  --superficie: #12151d;
  --superficie-2: #191d28;
  --borde: rgba(255, 255, 255, .07);
  --borde-fuerte: rgba(255, 255, 255, .14);
  --texto: #e6e9f2;
  --suave: #8a92a8;
  --tenue: #5c6378;
  --acento: #7aa2f7;
  --acento-2: #bb9af7;
  --verde: #9ece6a;
  --ambar: #e0af68;
  --rojo: #f7768e;
  --radio: 16px;
  --letra: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: var(--fondo); }
body {
  margin: 0; min-height: 100vh; color: var(--texto); font: 15px/1.5 var(--letra);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(122, 162, 247, .13), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(187, 154, 247, .09), transparent 55%),
    var(--fondo);
  background-attachment: fixed;
}
a { color: var(--acento); text-decoration: none; }
[hidden] { display: none !important; }
::selection { background: rgba(122, 162, 247, .35); }

/* El logo: tres capas, como el icono de la app. */
.logo {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: inline-block;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0d12' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 7.5l9 4.5 9-4.5L12 3Z'/%3E%3Cpath d='m3 12 9 4.5 9-4.5' /%3E%3Cpath d='m3 16.5 9 4.5 9-4.5'/%3E%3C/svg%3E") center / 20px no-repeat,
    linear-gradient(140deg, var(--acento), var(--acento-2));
  box-shadow: 0 6px 20px -6px rgba(122, 162, 247, .6);
}

.tarjeta {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)), var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 32px -18px rgba(0, 0, 0, .7);
}

.fila { display: flex; flex-wrap: wrap; gap: 8px; }

/* Botones */
.boton {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--borde-fuerte);
  background: var(--superficie-2); color: var(--texto); font: 600 14.5px/1 var(--letra); cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s, transform .08s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.boton:hover { border-color: rgba(255, 255, 255, .24); background: #1f2431; }
.boton:active { transform: scale(.98); }
.boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.boton:disabled { opacity: .45; cursor: default; transform: none; }
.boton.primario {
  border-color: transparent; color: #0b0d12;
  background: linear-gradient(135deg, #8fb2ff, var(--acento) 55%, #9a8cf3);
  box-shadow: 0 8px 22px -10px rgba(122, 162, 247, .8);
}
.boton.primario:hover { filter: brightness(1.08); }
.boton.fantasma { background: transparent; }
.boton.fantasma:hover { background: rgba(255, 255, 255, .05); }
.boton.peligro { color: var(--rojo); border-color: rgba(247, 118, 142, .35); }
.boton.peligro:hover { background: rgba(247, 118, 142, .08); border-color: rgba(247, 118, 142, .55); }
.boton.pequeno { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 9px; }

/* Estados: pastilla con punto */
.pastilla {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--borde); color: var(--suave);
}
.pastilla.verde { color: var(--verde); background: rgba(158, 206, 106, .1); border-color: rgba(158, 206, 106, .22); }
.pastilla.ambar { color: var(--ambar); background: rgba(224, 175, 104, .1); border-color: rgba(224, 175, 104, .25); }
.pastilla.gris { color: var(--suave); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); flex: none; }
.punto.verde { background: var(--verde); box-shadow: 0 0 0 3px rgba(158, 206, 106, .16); }
.punto.ambar { background: var(--ambar); box-shadow: 0 0 0 3px rgba(224, 175, 104, .16); }
.latido { animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .35; } }

/* El código de 4 cifras */
.codigo { display: flex; gap: 10px; }
.codigo span {
  width: 54px; height: 64px; display: grid; place-items: center; border-radius: 13px;
  font: 700 32px/1 var(--mono); color: var(--texto);
  background: var(--superficie-2); border: 1px solid var(--borde-fuerte);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
}

/* Avisos que aparecen abajo y se van solos */
.tostadas { position: fixed; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; pointer-events: none; z-index: 50; padding: 0 16px; }
.tostada {
  max-width: 520px; padding: 11px 16px; border-radius: 12px; font-size: 14px; pointer-events: auto;
  background: rgba(25, 29, 40, .92); border: 1px solid var(--borde-fuerte); color: var(--texto);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8);
  animation: entra .22s ease-out;
}
.tostada.fallo { border-color: rgba(247, 118, 142, .45); color: #ffc2cd; }
.tostada.fuera { opacity: 0; transform: translateY(6px); transition: .4s; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }