/* Estilo de Pyltex Access encima de la web de neko (lo carga index.html después de su CSS).
   Mismos colores y fuente que la app de Windows (app/VentanaLogin.cs, app/interfaz/barra.css):
   fondo #0a0a0b, superficies #111113/#17171a, texto #f5f5f4, tenue #a1a1aa, acento #ff8a3d.
   Se ocultan chat, emojis, miembros, volumen, idioma, bloqueo de sala y ajustes: el empleado
   solo ve el navegador remoto y el botón de archivos (subir y descargar). */
@font-face {
  font-family: "Geist";
  font-weight: 100 900;
  src: url("fuentes/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-weight: 100 900;
  src: url("fuentes/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0a0a0b;
  --surface: #111113;
  --surface-2: #17171a;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #f5f5f4;
  --muted: #a1a1aa;
  --accent: #ff8a3d;
  --on-accent: #1a0d03;
  color-scheme: dark;
}

html, body, #neko, .neko-main, .video-container {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Geist", "Segoe UI", -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ---- Fuera: barra de abajo (miembros, volumen, teclado, emojis, idioma, ayuda) ---- */
.room-container { display: none !important; }

/* ---- Barra de arriba: logo de Pyltex y solo el botón que abre el panel de archivos ----
   Ojo: el icono de hoja (fa-file) de la barra NO es el panel de archivos, es el interruptor de
   administrador "File Transfer Locked/Unlocked": se oculta. El panel se abre con las tres rayas
   (fa-bars), que se dejan con icono de carpeta. */
.header-container {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  height: 44px !important;
}
.header-container .neko img { height: 24px !important; width: 24px !important; border-radius: 6px; }
.header-container .neko span { font-family: "Geist", sans-serif !important; font-size: 15px !important; color: var(--text) !important; }
.header-container .neko span b { font-weight: 600 !important; }
.header-container .menu li:has(.fa-mouse),
.header-container .menu li:has(.fa-lock),
.header-container .menu li:has(.fa-lock-open),
.header-container .menu li:has(.fa-file) { display: none !important; }
.header-container .menu .fa-bars::before { content: "\f07b"; } /* carpeta (Font Awesome) */
.header-container .menu .fa-bars { font-size: 15px; width: auto !important; padding: 0 12px !important; }
.header-container .menu .fa-bars::after {
  content: "Files";
  margin-left: 8px;
  font: 500 14px "Geist", "Segoe UI", sans-serif;
  vertical-align: 1px;
}

/* ---- Vídeo: sin el altavoz gigante de "activar sonido" (el navegador remoto va en silencio:
   los portales no lo necesitan) ni el botón de Picture-in-Picture. El botón de play sigue. ---- */
.player-overlay:has(.fa-volume-up) { display: none !important; }
.video-menu .fa-external-link-alt { display: none !important; }

/* ---- Ventanas de aviso de neko (SweetAlert2: "Disconnected", errores…) como la tarjeta del login ---- */
.swal2-container.swal2-backdrop-show { background: rgba(10, 10, 11, 0.7) !important; }
.swal2-popup:not(.swal2-toast) {
  background: rgba(17, 17, 19, 0.92) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  padding: 36px 32px 32px !important;
  width: min(400px, calc(100vw - 32px)) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  font-family: "Geist", "Segoe UI", sans-serif !important;
}
.swal2-popup .swal2-title {
  color: var(--text) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}
.swal2-popup .swal2-html-container { color: var(--muted) !important; font-size: 15px !important; }
.swal2-popup .swal2-icon { transform: scale(0.75); margin: 0 auto 4px !important; }
.swal2-popup .swal2-actions { width: 100%; margin-top: 24px !important; }
.swal2-popup .swal2-confirm {
  width: 100%;
  height: 48px;
  margin: 0 !important;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-radius: 9999px !important;
  font: 500 15px "Geist", "Segoe UI", sans-serif !important;
  box-shadow: none !important;
}
.swal2-popup .swal2-confirm:hover { filter: brightness(1.05); background-image: none !important; }
.swal2-popup .swal2-cancel {
  height: 48px;
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 9999px !important;
  font: 500 15px "Geist", "Segoe UI", sans-serif !important;
}

/* ---- Avisos de neko ("Connected", "Disconnected"…) con el estilo de Pyltex ---- */
.vue-notification,
.vue-notification-template {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: "Geist", "Segoe UI", sans-serif !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.vue-notification.error,
.vue-notification-template.error { border-left-color: #f87171 !important; }
.header-container .menu li i { color: var(--muted) !important; }
.header-container .menu li:hover i { color: var(--text) !important; }

/* ---- Panel lateral: solo "Files" ---- */
.neko-menu { background: var(--surface) !important; border-left: 1px solid var(--border); }
.neko-menu .tabs-container { background: var(--surface) !important; }
.neko-menu .tabs-container li:has(.fa-comment-alt),
.neko-menu .tabs-container li:has(.fa-sliders-h) { display: none !important; }
.neko-menu .tabs-container ul li,
.neko-menu .tabs-container ul li.active { background: var(--surface-2) !important; color: var(--text) !important; }
.neko-menu .page-container { background: var(--surface-2) !important; }
/* Ruta de la carpeta: "Downloads" en vez de /home/neko/Downloads (no se ve "neko"). Se tapa el
   texto (font-size 0) y se pinta otro; el botón de recargar (un <i>) recupera su tamaño. */
.files .files-cwd > p, .files .files-cwd > span, .files .files-cwd > div:first-child { font-size: 0 !important; }
.files .files-cwd > p::before, .files .files-cwd > span::before, .files .files-cwd > div:first-child::before {
  content: "Downloads";
  font: 600 15px "Geist", "Segoe UI", sans-serif;
  color: var(--text);
}
.files .files-cwd i { font-size: 16px !important; }
.files, .files * { font-family: "Geist", "Segoe UI", sans-serif; }

/* ---- Pantalla de acceso: la misma que app.pyltex.com/login (PORTAL apps/web/src/pages/Login.tsx
   e index.css): resplandor ámbar que respira arriba, tarjeta de cristal de 400 px, logo y
   título centrados, campos y botón en píldora de 48 px. ---- */
@keyframes pyltex-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes pyltex-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.connect { background: var(--bg) !important; overflow: hidden; }
.connect::before {
  content: "";
  position: absolute;
  top: -256px;
  left: 50%;
  width: 900px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 138, 61, 0.14), transparent 70%);
  animation: pyltex-breathe 6s ease-in-out infinite;
  pointer-events: none;
}
.connect .window {
  position: relative;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 16px;
  background: rgba(17, 17, 19, 0.7) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  padding: 40px 32px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  animation: pyltex-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.connect .window .logo { justify-content: center !important; cursor: default !important; }
.connect .window .logo img { height: 44px !important; width: 44px !important; margin: 0 !important; border-radius: 11px; }
.connect .window .logo span { display: none !important; }
.connect .window .message span {
  text-align: center !important;
  text-transform: none !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em;
  line-height: 1.3 !important;
  color: var(--text) !important;
  margin: 20px 0 32px;
}
.connect .window .message input {
  height: 48px;
  background-color: var(--surface-2) !important;
  background-repeat: no-repeat !important;
  background-position: 16px center !important;
  background-size: 18px 18px !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 9999px !important;
  padding: 0 16px 0 44px !important;
  font-family: "Geist", sans-serif !important;
  font-size: 15px !important;
  margin: 0 0 12px !important;
}
/* Iconos dentro de los campos, como el sobre del email en el portal (color #71717a) */
.connect .window .message input[type="text"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-3.5 4.5-5 8-5s6.5 1.5 8 5'/%3E%3C/svg%3E") !important;
}
.connect .window .message input[type="password"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") !important;
}
.connect .window .message input::placeholder { color: #71717a !important; }
.connect .window .message input:focus { outline: none; border-color: var(--accent) !important; }
.connect .window .message button {
  height: 48px;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  text-transform: none !important;
  font-family: "Geist", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 48px !important;
  border-radius: 9999px !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  transition: filter 0.15s;
}
.connect .window .message button:hover { filter: brightness(1.05); }
.connect .loader div { background-color: var(--accent) !important; }

/* Etiquetas encima de los campos (las añade pyltex.js), como "Email" en el portal */
.connect .window .message .pyltex-label {
  display: block;
  margin: 4px 0 8px 2px;
  font-size: 14px;
  color: var(--muted);
  text-align: left;
}
.connect .window .message input { margin-bottom: 16px !important; }

/* Borde ámbar y brillo que siguen al puntero (--mx/--my desde pyltex.js), como en el portal */
.connect .window.glow-card > * { position: relative; }
.connect .window.glow-card::before,
.connect .window.glow-card::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.connect .window.glow-card::before {
  inset: -1px;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 138, 61, 0.85), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.connect .window.glow-card::after {
  inset: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 138, 61, 0.07), transparent 70%);
}
.connect .window.glow-card:hover::before,
.connect .window.glow-card:hover::after,
.connect .window.glow-card:focus-within::before,
.connect .window.glow-card:focus-within::after { opacity: 1; }

/* Escena de fondo (la añade pyltex.js): mismas baldosas y líneas que el portal, iconos de Access */
.connect .scene { position: absolute; inset: 0; pointer-events: none; }
.connect .scene-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.connect .scene-links path {
  fill: none;
  stroke: rgba(255, 138, 61, 0.4);
  stroke-width: 1.2;
  stroke-dasharray: 3 6;
  vector-effect: non-scaling-stroke;
}
.connect .scene-links .dot { stroke: #ff8a3d; stroke-width: 7; stroke-dasharray: none; stroke-linecap: round; }
@keyframes pyltex-bob { to { transform: translateY(-12px); } }
.connect .scene-float { position: absolute; translate: -50% -50%; animation: pyltex-bob 6s ease-in-out infinite alternate; }
.connect .f-1 { left: 15%; top: 34%; }
.connect .f-2 { left: 86%; top: 24%; animation-delay: -2s; }
.connect .f-3 { left: 79%; top: 70%; animation-delay: -4s; }
.connect .scene-tile {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, #1c1c20, #111113);
  transform: rotateX(55deg) rotateZ(-45deg);
  box-shadow:
    -1px 1px 0 rgba(255, 138, 61, 0.9),
    -2px 2px 0 rgba(255, 138, 61, 0.8),
    -3px 3px 0 rgba(255, 138, 61, 0.65),
    -4px 4px 0 rgba(255, 138, 61, 0.5),
    -5px 5px 0 #3a2414,
    -6px 6px 0 #2a1a0e,
    -18px 18px 30px rgba(0, 0, 0, 0.6);
}
.connect .f-3 .scene-tile { width: 60px; height: 60px; }
.connect .scene-tile svg {
  width: 30px;
  height: 30px;
  transform: rotateZ(45deg);
  fill: none;
  stroke: #f5f5f4;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.connect .f-3 .scene-tile svg { stroke: #ff8a3d; }
@media (max-width: 960px) { .connect .scene { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .connect .scene-float, .connect .window, .connect::before { animation: none !important; }
  .connect .scene-links .dot { display: none; }
}

/* Pie legal del login, igual que en el portal; solo mientras se ve la pantalla de acceso */
#pyltex-pie {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  z-index: 10000;
  margin: 0;
  padding: 0 16px;
  text-align: center;
  font: 12px/1.5 "Geist", "Segoe UI", sans-serif;
  color: #71717a;
}
body:has(.connect) #pyltex-pie { display: block; }
#pyltex-pie a { color: inherit; text-decoration: underline; }
#pyltex-pie a:hover { color: var(--muted); }

/* Avisos (conectado, desconectado…) */
.notification-title, .notification-content { font-family: "Geist", sans-serif !important; }