@charset "UTF-8";
/* Kinnesis Solutions - Branding (Astra Support Hub)
   Cargado en TODAS las páginas (login y autenticadas)
   vía GLPI_THEMES_DIR (files/_themes) - persiste en cada actualización. */
/* Logo del header/sidebar, aplica en toda la app.
   Especificidad igual o mayor a ".page .glpi-logo" del core para ganar la cascada. */
.page .glpi-logo,
.page-anonymous .glpi-logo,
.glpi-logo {
  width: 64px !important;
  height: 64px !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) !important;
}

/* Nombre de marca encima del logo, en el header/sidebar (no en el login,
   que ya tiene su propio título "Astra Support Hub" en #astra-badge). */
.navbar-brand:has(.glpi-logo) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

.navbar-brand:has(.glpi-logo)::before {
  content: "Astra Support Hub";
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  color: #ffffff !important;
  opacity: 1 !important;
  overflow: visible;
}

body.welcome-anonymous .navbar-brand::before {
  content: none;
}

/* ======================================================================
   LOGIN - diseño panel dividido "Astra Support Hub"
   El panel izquierdo (#astra-left) se inyecta vía glpi_configs.text_login
   con position:fixed, por lo que "escapa" visualmente de la tarjeta de
   GLPI aunque en el HTML siga viviendo dentro de .rich_text_container.
   ====================================================================== */
body.welcome-anonymous {
  background: #ffffff;
  margin: 0;
}

body.welcome-anonymous .glpi-logo {
  display: none !important;
}

/* --- Panel izquierdo (oscuro, decorativo) --- */
body.welcome-anonymous #astra-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #0c1633;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 3rem 2rem;
  z-index: 1;
}

body.welcome-anonymous #astra-badge {
  position: absolute;
  top: 2rem;
  left: 2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

body.welcome-anonymous #astra-badge-icon {
  background: #4f5fe0;
  border-radius: 9px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

body.welcome-anonymous #astra-mascot {
  max-width: 260px;
  width: 80%;
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  margin-bottom: 1.75rem;
}

body.welcome-anonymous #astra-title {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
  text-align: center;
}

body.welcome-anonymous #astra-subtitle {
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 0.85rem;
  background: linear-gradient(90deg, #8f9dff, #5064e8);
  -webkit-background-clip: text;
  background-clip: text;
  color: #7c8cff;
}

@supports (-webkit-background-clip: text) {
  body.welcome-anonymous #astra-subtitle {
    -webkit-text-fill-color: transparent;
  }
}
body.welcome-anonymous #astra-tagline {
  color: #9aa3c7;
  font-size: 0.95rem;
  text-align: center;
  margin: 0;
}

body.welcome-anonymous #astra-tagline-sub {
  color: #6b7399;
  font-size: 0.8rem;
  text-align: center;
  margin: 0.35rem 0 0 0;
}

body.welcome-anonymous #astra-footer {
  position: absolute;
  bottom: 1.5rem;
  left: 2rem;
  right: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #7b83ab;
  font-size: 0.8rem;
}

body.welcome-anonymous #astra-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

body.welcome-anonymous #astra-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  display: inline-block;
}

/* --- Panel derecho (tarjeta de login de GLPI) --- */
body.welcome-anonymous .page-anonymous {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 50%;
  box-sizing: border-box;
}

body.welcome-anonymous .main-content-card {
  border: none;
  border-radius: 16px;
  box-shadow: none;
  overflow: hidden;
}

body.welcome-anonymous .container-tight {
  max-width: 24rem;
  padding: 1rem !important;
}

body.welcome-anonymous .flex-fill.py-4.mt-4 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  margin-top: 0 !important;
}

body.welcome-anonymous .main-content-card .card-body {
  padding: 1rem 1.75rem;
}

body.welcome-anonymous .card-header:empty {
  display: none;
}

/* El bloque de texto (logo/titulo) que aparece normalmente arriba de la
   tarjeta se oculta aqui porque su contenido ahora vive en el panel
   izquierdo (#astra-left, ver arriba). */
body.welcome-anonymous .rich_text_container {
  margin: 0;
}

body.welcome-anonymous .card-body h2 {
  margin-bottom: 0.35rem;
  color: #101d42;
  font-weight: 700;
  font-size: 1.3rem;
  white-space: nowrap;
}

/* Logo original de Kinnesis Solutions, encima del titulo del formulario
   de login (lado derecho). Insertado como imagen de fondo del propio
   titulo para no tener que tocar ningun template de GLPI. */
body.welcome-anonymous .card-body h2:not(#astra-subtitle)::before {
  content: "";
  display: block;
  width: 160px;
  height: 58px;
  background-image: url("/pics/astra/kinnesis-logo-original.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  margin-bottom: 0.85rem;
}

body.welcome-anonymous .card-body hr {
  margin: 0.6rem 0;
}

body.welcome-anonymous .card-body .mb-3 {
  margin-bottom: 0.6rem !important;
}

body.welcome-anonymous .form-control {
  border-radius: 10px;
  padding: 0.65rem 1rem;
  border: 1px solid #e3e6ef;
}

body.welcome-anonymous .btn-primary {
  background-color: #4f5fe0;
  border-color: #4f5fe0;
  border-radius: 10px;
  font-weight: 600;
  padding: 0.65rem 1rem;
}

body.welcome-anonymous .btn-primary:hover {
  background-color: #3d4bc4;
  border-color: #3d4bc4;
}

body.welcome-anonymous a {
  color: #4f5fe0;
}

body.welcome-anonymous .text-muted {
  color: #6c7290 !important;
}

/* En pantallas angostas (celular), el panel izquierdo se oculta y la
   tarjeta vuelve a ocupar todo el ancho, para no romper el login en movil. */
@media (max-width: 900px) {
  body.welcome-anonymous #astra-left {
    display: none;
  }
  body.welcome-anonymous .page-anonymous {
    margin-left: 0;
  }
}
/* ======================================================================
   PANEL / DASHBOARD - estilo moderno acorde a la marca Astra
   Tarjetas más redondeadas, con sombra suave, leve elevación al pasar el
   mouse, y colores armonizados con la paleta Astra (indigo #4f5fe0,
   navy #0c1633) en vez de los tonos planos por defecto de GLPI.
   ====================================================================== */
.grid-stack-item-content .card {
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(12, 22, 51, 0.08) !important;
  filter: saturate(0.82) brightness(0.97);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.grid-stack-item-content .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(12, 22, 51, 0.16) !important;
  filter: saturate(0.95) brightness(1);
}

.grid-stack-item-content .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(79, 95, 224, 0.12);
  pointer-events: none;
}

.dashboard .filter-dashboard,
#dashboard .card.dashboard {
  border-radius: 14px !important;
}

/* Reduce el espacio vacío reservado arriba del panel, entre la barra
   "Central" y las primeras tarjetas. */
.dashboard {
  padding-top: 0 !important;
}

/* Reserva el mismo alto de texto en todas las tarjetas de numero grande,
   para que filas con textos de 1 linea (Software, Ordenadores...) y
   filas con textos de 2 lineas (Base de conocimiento, Dispositivos de
   red...) terminen del mismo tamaño en vez de que GridStack estire solo
   la fila con el texto mas largo. */
.grid-stack-item-content .big-number .label {
  min-height: 2.4em;
}