/* ==========================================================
   360CRECIMIENTO – UI SKIN FINAL (PALETA AZUL - FORZADO)
   Se ha añadido !important al fondo para asegurar el cambio
   ========================================================== */

/* ==========================================================
   1. VARIABLES DE MARCA (AZUL)
   ========================================================== */
:root {
  /* Colores Principales Azules */
  --brand-main: #1b5a98;      /* Azul Maleficio Oscuro (Botones principales) */
  --brand-light: #2b8abd;     /* Azul Medio (Degradados) */
  --brand-neon: #42c0f1;      /* Azul Neón (Hover y Brillos) */

  /* Textos */
  --ui-text: rgba(255, 255, 255, 0.92);
  --ui-muted: rgba(255, 255, 255, 0.78);
}

/* ==========================================================
   2. FONDO GLOBAL Y RESET
   ========================================================== */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ui-text);

  /* Fondo con degradados AZULES + !IMPORTANTE (Obliga al cambio) */
  background:
    radial-gradient(circle at 35% 40%, rgba(27, 90, 152, 0.15), transparent 55%), /* Brillo Azul */
    radial-gradient(circle at 70% 65%, rgba(0, 0, 0, 0.20), transparent 60%),
    linear-gradient(180deg, #0F1F1A 0%, #0C1A17 45%, #081412 100%) !important;
}

/* ==========================================================
   3. LOGIN - LOGOTIPO
   ========================================================== */

/* Contenedor del Logo */
#logo {
  background-image: url("/img/SabasPRO.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; 

  width: 100%;
  max-width: 360px; 
  height: 120px; /* Altura fija necesaria */
  
  margin: 0 auto 32px auto;
  display: block;
  text-align: center;
  
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
}

/* --- RESET DEL CONTENEDOR (ESTRATEGIA DE ALINEACIÓN) --- */
#login .inputDiv {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 18px !important;
}

/* --- Labels --- */
#login .inputDiv label {
  color: var(--ui-muted);
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 8px;
  display: block;
  padding-left: 18px;
  padding-right: 18px;
}

/* --- Inputs (Usuario / Contraseña) --- */
#login input[type="text"],
#login input[type="password"] {
  background: rgba(255, 255, 255, 0.97);
  border: none;
  border-radius: 12px; 
  
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.25);

  font-size: 15px;
  color: #1a1a1a;
  padding: 0 18px; 
  height: 48px;
  width: 100%;
  box-sizing: border-box;
  display: block;
  line-height: 1;
}

#login input:focus {
  outline: none;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.10),
    /* Glow Azul Neón */
    0 0 0 2px rgba(66, 192, 241, 0.35), 
    0 4px 10px rgba(0, 0, 0, 0.35);
}

/* --- Botón Conectar --- */
#connect {
  /* Degradado Azul (Claro -> Oscuro) */
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand-main) 100%);
  
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  
  cursor: pointer;
  font-size: 15px;
  letter-spacing: 0.3px;
  
  display: flex !important;
  justify-content: center;
  align-items: center;
  
  width: 100%;
  /* Ancho matemático exacto para alinear con inputs */
  max-width: calc(min(720px, 96vw) - 36px); 
  
  margin: 16px auto 0 auto;
  height: 48px;
  padding: 0; 
  box-sizing: border-box;
  line-height: 1;
  user-select: none;
}

#connect:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ==========================================================
   4. OVERLAY DE CONEXIÓN (Spinner Azul)
   ========================================================== */
#connectingOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  background:
    radial-gradient(circle at center, rgba(27, 90, 152, 0.18), transparent 55%),
    rgba(10, 20, 20, 0.92) !important; /* !important añadido por seguridad */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.connecting-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.connecting-box .text {
  margin-top: 14px;
  font-size: 15px;
  opacity: 0.9;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--brand-neon); /* Azul Neón */
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================
   5. TOOLBAR (Estilo Azul)
   ========================================================== */

/* --- A. CONTENEDOR --- */
#toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  
  background: rgba(15, 27, 46, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- B. OCULTAR BASURA --- */
#toolbar input { display: none !important; }
#toolbar #stat, #toolbar #statDiv { display: none !important; }
#toolbar #keyboard, #toolbar #browser { display: none !important; }
#toolbar #clipboard, #toolbar #files { display: none !important; }
#toolbar #cad, #toolbar #mrc, #toolbar #vswipe { display: none !important; }

/* --- C. MOSTRAR DESEADOS --- */
#toolbar #imageQuality,
#toolbar #reconnect,
#toolbar #share,
#toolbar #sabasUpload,
#toolbar #disconnect {
  display: inline-block !important;
}

/* --- D. BOTONES GENERALES --- */
#toolbar input:not(#imageQuality) {
  height: 32px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 0 18px;
  margin: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  -webkit-appearance: none;
  box-shadow: none;
}

/* --- E. HOVER (AZUL NEÓN) --- */
#toolbar input:not(#imageQuality):hover {
  background: var(--brand-neon);
  border-color: rgba(255, 255, 255, 0.4);
  color: #1b5a98; /* Texto Oscuro para contraste */
  font-weight: 800;
}

/* --- F. ACTIVE (AZUL OSCURO) --- */
#toolbar input:not(#imageQuality):active {
  transform: translateY(1px);
  background: var(--brand-main);
  color: #fff;
}

/* --- G. EXCEPCIONES (Desconectar Rojo, Compartir Azul Claro) --- */
#toolbar #disconnect:hover {
  background: rgba(220, 53, 69, 0.9); /* Rojo */
  border-color: rgba(255, 200, 200, 0.4);
  color: #fff;
}

#toolbar #share:hover {
  background: var(--brand-light); /* Azul Medio */
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* --- H. SLIDER DE CALIDAD --- */
#toolbar #imageQuality {
  -webkit-appearance: none;
  appearance: none;
  height: 32px;
  width: 160px;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px;
  padding: 0 10px;
  cursor: pointer;
  border: 1px solid transparent;
}

#toolbar #imageQuality:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Track */
#toolbar #imageQuality::-webkit-slider-runnable-track,
#toolbar #imageQuality::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 99px;
}

/* Thumb */
#toolbar #imageQuality::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  margin-top: -6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 2px solid var(--brand-main); /* Borde Azul Oscuro */
}

#toolbar #imageQuality::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand-main);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}