/* ═══════════════════════════════════════════════════════════════════════════
   TEMA DOLIXPERT · GLPI (mesa de ayuda)
   ───────────────────────────────────────────────────────────────────────────
   NO se toca el código de GLPI. Este archivo se inyecta desde nginx y solo
   redefine variables que GLPI ya declara.

   POR QUÉ FUNCIONA
   GLPI 11 está construido sobre Tabler y resuelve su paleta desde CUATRO
   variables, medidas en css_core_palettes.min.css:

       :root[data-glpi-theme=auror] {
         --glpi-palette-color-1: #1b2f62;   barra lateral y cabecera
         --glpi-palette-color-2: #fff;      texto sobre esa barra
         --glpi-palette-color-3: #3a5693;   activo y hover
         --glpi-palette-color-4: #fec95c;   acento
       }

   Redefinirlas cambia el armazón completo sin tocar una sola clase. Si una
   actualización de GLPI cambia esos nombres, lo peor que pasa es que la
   plataforma vuelve a su color original — nunca queda rota.

   Paleta DOLIXPERT tomada del logo: navy #00183C · cian #00A8E4.
   ═══════════════════════════════════════════════════════════════════════════ */

:root,
:root[data-glpi-theme] {
  --dx-navy:   #00183C;
  --dx-navy-2: #002448;
  --dx-cian:   #00A8E4;
  --dx-cian-2: #0090CC;
  --dx-cian-3: #006C9C;
  --dx-cian-4: #4DC2F0;

  /* Las cuatro de GLPI. */
  --glpi-palette-color-1: #00183C;
  --glpi-palette-color-2: #FFFFFF;
  --glpi-palette-color-3: #006C9C;
  --glpi-palette-color-4: #00A8E4;

  /* Tabler: botones, enlaces y focos. */
  --tblr-primary:              #00A8E4;
  --tblr-primary-rgb:          0, 168, 228;
  --tblr-primary-fg:           #FFFFFF;
  --tblr-link-color:           #006C9C;
  --tblr-link-color-rgb:       0, 108, 156;
  --tblr-link-hover-color:     #00A8E4;
  --tblr-focus-ring-color:     rgba(0, 168, 228, .30);
  --tblr-border-color:         #DDE3E9;
  --tblr-active-bg:            rgba(0, 168, 228, .12);
}

/* ─────────────────────────────────────────── el botón primario, con volumen */
.btn-primary {
  background-image: linear-gradient(135deg, #00A8E4 0%, #0084C0 55%, #006C9C 100%);
  border-color: #0084C0;
  box-shadow: 0 1px 2px rgba(0, 24, 60, .18);
  transition: box-shadow 180ms ease, transform 180ms ease, filter 180ms ease;
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px -6px rgba(0, 168, 228, .75);
  transform: translateY(-1px);
  border-color: #00A8E4;
}
.btn-primary:active { transform: translateY(0); filter: brightness(.94); }

/* ─────────────────────────────────────────── el menú lateral responde */
/* La queja era que al pasar el mouse no pasaba nada. Ahora el elemento se
   desplaza, se enciende en cian y marca su borde izquierdo. */
.navbar-vertical .nav-link,
#navbar-menu .nav-link {
  border-left: 2px solid transparent;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 160ms ease;
}
.navbar-vertical .nav-link:hover,
#navbar-menu .nav-link:hover {
  background-color: rgba(0, 168, 228, .14);
  border-left-color: var(--dx-cian);
  color: #FFFFFF;
  transform: translateX(2px);
}
.navbar-vertical .nav-link.active,
#navbar-menu .nav-link.active {
  background-color: rgba(0, 168, 228, .22);
  border-left-color: var(--dx-cian);
  color: #FFFFFF;
}
.navbar-vertical .nav-link .nav-link-icon,
#navbar-menu .nav-link .nav-link-icon { transition: color 160ms ease; }
.navbar-vertical .nav-link:hover .nav-link-icon,
#navbar-menu .nav-link:hover .nav-link-icon { color: var(--dx-cian-4); }

/* ─────────────────────────────────────────── tarjetas y tablas */
.card {
  border-color: #E3E8EE;
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.card:hover {
  border-color: rgba(0, 168, 228, .45);
  box-shadow: 0 14px 34px -18px rgba(0, 24, 60, .38);
}

/* La fila marca su lado izquierdo al pasar por encima: se ve dónde estás. */
.table tbody tr { transition: background-color 140ms ease, box-shadow 140ms ease; }
.table tbody tr:hover {
  background-color: rgba(0, 168, 228, .07) !important;
  box-shadow: inset 3px 0 0 0 var(--dx-cian);
}

/* ─────────────────────────────────────────── estados y foco */
.form-control:focus, .form-select:focus {
  border-color: var(--dx-cian);
  box-shadow: 0 0 0 .2rem rgba(0, 168, 228, .22);
}
a:not(.btn):not(.nav-link) { transition: color 140ms ease; }
.page-title, .card-title { letter-spacing: -.01em; }

/* ───────────────────────────────── la marca en la barra lateral */
/* MEDIDO: GLPI dibuja su logo de DOS formas distintas según la pantalla.
     · sin sesión  -> `content: url(/pics/logos/logo-GLPI-250-black.png)`
     · con sesión  -> `background-image: url(/pics/logos/logo-GLPI-100-white.png)`
   Reemplazar solo una deja la otra sin tocar — que es lo que pasó la primera
   vez: el acceso quedaba con la marca DOLIXPERT y el panel seguía diciendo GLPI.
   Se cubren las dos, y se anula la que no aplique en cada caso. */
.glpi-logo {
  background-image: url('/venthouse/logo.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.navbar-brand-image { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }

/* ═══════════════════════════════════════════════════════════════════════════
   PANTALLA DE ACCESO · GLPI
   ───────────────────────────────────────────────────────────────────────────
   Es la primera pantalla que ve cualquiera, y de fábrica es un logo enorme de
   GLPI sobre gris. Se reemplaza por la marca DOLIXPERT sobre navy, con la
   tarjeta centrada y estrecha — el patrón de Salesforce y Zoho.

   Todo va bajo `body.welcome-anonymous`, la clase que GLPI pone SOLO en las
   pantallas sin sesión. La aplicación con sesión iniciada no la tiene.
   ═══════════════════════════════════════════════════════════════════════════ */

body.welcome-anonymous {
  min-height: 100vh;
  background:
    radial-gradient(900px 460px at 78% -8%,  rgba(0, 168, 228, .20), transparent 62%),
    radial-gradient(760px 420px at 12% 104%, rgba(0, 108, 156, .26), transparent 60%),
    linear-gradient(165deg, #00183C 0%, #00112C 100%) !important;
  background-attachment: fixed !important;
}
body.welcome-anonymous .page-anonymous,
body.welcome-anonymous .flex-fill { background: transparent !important; }

/* La caja de 60rem de fábrica deja el formulario perdido en el ancho. */
body.welcome-anonymous .container-tight { max-width: 25rem !important; }
body.welcome-anonymous .card-body .row.justify-content-center > .col-md-5 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* ── la marca ───────────────────────────────────────────────────────────── */
/* MEDIDO, no supuesto: GLPI no pone su logo como <img> ni como fondo, sino
   con `content: url(/pics/logos/logo-GLPI-250-black.png)` sobre el span. Un
   `background-image` se pinta DETRÁS de eso y quedan los dos superpuestos.
   Hay que sustituir el `content`. */
body.welcome-anonymous .glpi-logo {
  content: url('/venthouse/logo.png') !important;
  display: block !important;
  width: 176px !important;
  height: auto !important;
  max-height: 132px !important;
  object-fit: contain !important;
  margin: 0 auto 30px !important;
  background: none !important;
  filter: drop-shadow(0 8px 26px rgba(0, 168, 228, .34));
  font-size: 0 !important;
}
body.welcome-anonymous .glpi-logo img,
body.welcome-anonymous .glpi-logo svg { display: none !important; }

/* ── la tarjeta ─────────────────────────────────────────────────────────── */
body.welcome-anonymous .card {
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 0 34px 78px -34px rgba(0, 0, 0, .70),
              0 0 0 1px rgba(0, 168, 228, .10) !important;
  overflow: hidden;
}
/* La línea de marca en el borde superior, como en el centro de operación. */
body.welcome-anonymous .card::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #00A8E4 0%, #0084C0 55%, #006C9C 100%);
}
body.welcome-anonymous .card-body { padding: 34px 32px 30px !important; }
body.welcome-anonymous .card-header { border: 0 !important; padding-bottom: 0 !important; }
body.welcome-anonymous h2,
body.welcome-anonymous .card-title {
  color: #00183C !important;
  font-size: 1.16rem !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
}

/* ── los campos ─────────────────────────────────────────────────────────── */
body.welcome-anonymous .form-label {
  color: #46617D !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
  margin-bottom: 6px !important;
}
body.welcome-anonymous .form-control,
body.welcome-anonymous .form-select {
  height: 46px !important;
  border-radius: 10px !important;
  border: 1px solid #DDE3E9 !important;
  background: #FBFCFD !important;
  font-size: .97rem !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
body.welcome-anonymous .form-control:hover,
body.welcome-anonymous .form-select:hover { border-color: rgba(0, 168, 228, .55) !important; }
body.welcome-anonymous .form-control:focus,
body.welcome-anonymous .form-select:focus {
  border-color: #00A8E4 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(0, 168, 228, .16) !important;
}

/* ── el botón ───────────────────────────────────────────────────────────── */
body.welcome-anonymous .btn-primary {
  height: 47px !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  background-image: linear-gradient(135deg, #00A8E4 0%, #0084C0 55%, #006C9C 100%) !important;
  border: 0 !important;
  box-shadow: 0 10px 26px -12px rgba(0, 168, 228, .85) !important;
}
body.welcome-anonymous .btn-primary:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(0, 168, 228, .95) !important;
}
body.welcome-anonymous .btn-primary:active { transform: translateY(0); }

/* ── el pie, ahora sobre navy ───────────────────────────────────────────── */
body.welcome-anonymous .text-muted,
body.welcome-anonymous .copyright,
body.welcome-anonymous .form-check-label { color: #7E9CB8 !important; }
body.welcome-anonymous a.copyright:hover { color: #00A8E4 !important; }
body.welcome-anonymous .form-check-label { color: #46617D !important; }