/* NexaCloud branding — CSS quirurgico para Frappe Helpdesk 1.x (Tailwind-based).
 * Identidad operativa de la sidebar Vue: .flex.flex-col.border-r.bg-gray-50
 */

/* 1. Logo del splash/login agrandado */
.page-card img,
img.splash-image,
img[src*="logo-nexacloud"] {
  max-width: 220px !important;
  max-height: 180px !important;
  width: auto !important;
  height: auto !important;
}
.page-card-head {
  padding-bottom: 1rem !important;
}

/* 2. Sidebar del panel agente — fondo grafito */
.flex.flex-col.border-r.bg-gray-50 {
  background-color: #0f2030 !important;
}

/* 3. Texto del sidebar — claro para contraste */
.flex.flex-col.border-r.bg-gray-50,
.flex.flex-col.border-r.bg-gray-50 *:not(svg):not(path) {
  color: #cfd9e3 !important;
}

/* 4. Iconos SVG dentro del sidebar */
.flex.flex-col.border-r.bg-gray-50 svg {
  color: #cfd9e3 !important;
}

/* 5. Hover sobre items del sidebar */
.flex.flex-col.border-r.bg-gray-50 a:hover,
.flex.flex-col.border-r.bg-gray-50 button:hover,
.flex.flex-col.border-r.bg-gray-50 [class*="hover:bg-gray"]:hover {
  background-color: #1a2e44 !important;
  color: #ffffff !important;
}

/* 6. Item activo */
.flex.flex-col.border-r.bg-gray-50 .router-link-active,
.flex.flex-col.border-r.bg-gray-50 a[class*="active"],
.flex.flex-col.border-r.bg-gray-50 .bg-gray-100 {
  background-color: rgba(0, 191, 255, 0.15) !important;
  color: #00BFFF !important;
}