@charset "UTF-8";
/*!
 * ---------------------------------------------------------------------
 * Tema TILENA 6.x (claro) — GLPI 11
 * Paleta base: legacy tilena (teal / cyan).
 *
 * Secciones: (1) variables, (2) login anónimo, (3) logos, (4) componentes.
 *
 * Notas de diseño:
 * - --tblr-muted y cabeceras de formulario en tonos oscuros: el core heredaría teal
 *   poco legible en .text-muted / col-form-label.
 * - Enlaces: el core define --tblr-link-color a partir de --tblr-link-color-rgb
 *   (véase css/includes/_base.scss); aquí solo se sobrescribe el RGB, como el resto
 *   de paletas GLPI y el personalizador del plugin.
 * - Acento teal #1cb8a7 en --tblr-primary-fg y --glpi-form-header-fg (cabeceras de
 *   bloques de formulario); Tabler usa primary-fg también para .btn-primary → §4 fuerza blanco.
 * - Fondo de login (§2): sin !important y misma especificidad que el CSS del plugin
 *   (getImageStyles) para que, con images:used, color o imagen puedan sustituirlo.
 * - §5: submenú lateral (#navbar-menu): :hover de .dropdown-item con tinte primario y borde
 *   izquierdo (activo, no activo, con o sin .active/.show en el nav-link; p. ej. menú colapsado).
 * - §5b: ítem de primer nivel activo/desplegado: el core usa color-mix(--tblr-primary) y además
 *   `.nav-item:hover .nav-link` pisa el color con primario — forzamos blanco + negrita también en :hover.
 * ---------------------------------------------------------------------
 */
/* =============================================================================
 * 1. Variables (:root + data-glpi-theme; solo aplica con este tema activo)
 * ============================================================================= */
:root[data-glpi-theme=TilenaLight] {
  /* Primario cyan (rgb) + acento teal #1cb8a7 (mainmenu / marca) */
  --tblr-primary-rgb: 28, 215, 220;
  --tblr-primary-fg: #1cb8a7;
  --tblr-secondary: #1cd7dc;
  --tblr-secondary-fg: #fcfcfc;
  --tblr-link-color-rgb: 28, 184, 167; /* #1cb8a7, alineado con acento / mainmenu */
  --tblr-bg-forms: #ffffff;
  --tblr-secondary-bg: #e9ecef;
  --tblr-muted: #1e293b;
  --tblr-body-color: #101923;
  --glpi-form-header-fg: #1cb8a7;
  --glpi-form-header-bg: color-mix(in srgb, var(--glpi-form-header-fg), #fff 92%);
  --glpi-form-header-border-color: color-mix(in srgb, var(--glpi-form-header-fg), #fff 78%);
  --glpi-mainmenu-bg: #1cb8a7;
  --glpi-mainmenu-fg: #f4f6fa;
  --glpi-helpdesk-header: hsl(from var(--glpi-mainmenu-bg) h s 80);
  --glpi-palette-color-1: #1cb8a7;
  --glpi-palette-color-2: #f4f6fa;
  --glpi-palette-color-3: #1cd7dc;
  --glpi-palette-color-4: #86d7d5;
  --glpi-illustrations-gradient-1: hsl(from var(--glpi-mainmenu-bg) h s 92);
  --glpi-illustrations-gradient-2: hsl(from var(--glpi-mainmenu-bg) h s 72);
  --glpi-illustrations-gradient-3: hsl(from var(--glpi-mainmenu-bg) h s 45);
  --glpi-logo: url("../pics/logos/logo-Tilena-100-white.png");
  --glpi-logo-reduced: url("../pics/logos/logo-T-100-white.png");
  --glpi-logo-dark-login: url("../pics/logos/logo-Tilena-250-white.png");
  --glpi-logo-light-login: url("../pics/logos/logo-Tilena-250-white.png");
}

/* =============================================================================
 * 2. Login anónimo (por defecto: color mainmenu; el plugin puede sobreescribir)
 * ============================================================================= */
:root[data-glpi-theme=TilenaLight]:has(body.welcome-anonymous) {
  --tblr-card-bg: rgba(255, 255, 255, 0.85);
}

body.welcome-anonymous,
body.welcome-anonymous .page-anonymous {
  background-color: var(--glpi-mainmenu-bg);
  background-image: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

body.welcome-anonymous {
  min-height: 100vh;
}

/* Enlaces sobre fondo teal (p. ej. pie); dentro de .main-content-card enlaces “normales” */
:root[data-glpi-theme=TilenaLight] body.welcome-anonymous .page-anonymous a:not(.btn):not(.btn-link):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):link {
  color: #ffffff !important;
}
:root[data-glpi-theme=TilenaLight] body.welcome-anonymous .page-anonymous a:not(.btn):not(.btn-link):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):visited {
  color: #d8dee8 !important;
}
:root[data-glpi-theme=TilenaLight] body.welcome-anonymous .page-anonymous a:not(.btn):not(.btn-link):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):hover {
  color: #f8fafc !important;
}
:root[data-glpi-theme=TilenaLight] body.welcome-anonymous .page-anonymous a:not(.btn):not(.btn-link):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):active {
  color: #f1f5f9 !important;
}

:root[data-glpi-theme=TilenaLight] body.welcome-anonymous .page-anonymous .main-content-card a:not(.btn):not(.btn-link):link {
  color: var(--tblr-link-color) !important;
}
:root[data-glpi-theme=TilenaLight] body.welcome-anonymous .page-anonymous .main-content-card a:not(.btn):not(.btn-link):visited {
  color: color-mix(in srgb, var(--tblr-link-color), #64748b 45%) !important;
}
:root[data-glpi-theme=TilenaLight] body.welcome-anonymous .page-anonymous .main-content-card a:not(.btn):not(.btn-link):hover, :root[data-glpi-theme=TilenaLight] body.welcome-anonymous .page-anonymous .main-content-card a:not(.btn):not(.btn-link):active {
  color: var(--glpi-form-header-fg) !important;
}

/* =============================================================================
 * 3. Logos (login + menú expandido; login 50px alto + object-fit; alineado con handler / getImageStyles)
 * ============================================================================= */
:root[data-glpi-theme=TilenaLight] .page-anonymous .glpi-logo {
  height: 50px;
  width: auto;
  max-width: min(220px, 100%);
  object-fit: contain;
  object-position: center;
}

:root[data-glpi-theme=TilenaLight] body:not(.navbar-collapsed) .page .glpi-logo {
  width: 192px;
  min-width: 192px;
  height: 55px;
  background-size: contain;
}

/* =============================================================================
 * 4. Ribbon, tarjetas, botones, tablas
 * ============================================================================= */
:root[data-glpi-theme=TilenaLight] .ribbon.bg-blue {
  background-color: var(--glpi-palette-color-1) !important;
  border-color: var(--glpi-palette-color-1) !important;
}

:root[data-glpi-theme=TilenaLight] .card-subtitle {
  color: var(--glpi-palette-color-1);
}

/* Tabler: texto del primario = var(--tblr-primary-fg); sobre fondo cyan saturado forzamos blanco */
:root[data-glpi-theme=TilenaLight] .btn-primary {
  --tblr-btn-color: #ffffff !important;
  --tblr-btn-hover-color: #ffffff !important;
  --tblr-btn-active-color: #ffffff !important;
  --tblr-btn-disabled-color: rgba(255, 255, 255, 0.7) !important;
}

:root[data-glpi-theme=TilenaLight] .btn-secondary,
:root[data-glpi-theme=TilenaLight] .btn-outline-secondary {
  color: var(--glpi-palette-color-1) !important;
  border-color: var(--glpi-palette-color-1) !important;
}

:root[data-glpi-theme=TilenaLight] .btn-ghost-secondary,
:root[data-glpi-theme=TilenaLight] .btn-ghost.btn-secondary {
  --tblr-btn-color: var(--glpi-palette-color-1);
  --tblr-btn-border-color: var(--glpi-palette-color-1);
}

:root[data-glpi-theme=TilenaLight] .table thead th,
:root[data-glpi-theme=TilenaLight] .markdown > table thead th {
  color: color-mix(in srgb, var(--glpi-palette-color-1), black 20%);
}

/* =============================================================================
 * 5. Menú lateral — .dropdown-item en flyouts (véase components/_global-menu.scss)
 * El core (sección .active/.show) apila rgba negro en :hover; con barra colapsada
 * solo aplica el hover gris de Bootstrap/Tabler. Unificamos tinte primario + borde.
 * ============================================================================= */
/*
 * Primer nivel lateral: sector activo (li.active) / enlace .active / desplegado (.show).
 * _global-menu.scss aplica después `.nav-item:hover .nav-link { color: var(--tblr-primary) }`,
 * que debe perder frente a estos estados.
 */
:root[data-glpi-theme=TilenaLight] .sidebar #navbar-menu .nav-item.dropdown.active > .nav-link,
:root[data-glpi-theme=TilenaLight] .sidebar #navbar-menu .nav-item .nav-link.show,
:root[data-glpi-theme=TilenaLight] .sidebar #navbar-menu .nav-item .nav-link.active,
:root[data-glpi-theme=TilenaLight] .sidebar #navbar-menu .nav-item.dropdown.active:hover > .nav-link,
:root[data-glpi-theme=TilenaLight] .sidebar #navbar-menu .nav-item:hover > .nav-link.show,
:root[data-glpi-theme=TilenaLight] .sidebar #navbar-menu .nav-item:hover > .nav-link.active {
  color: #ffffff !important;
  font-weight: 700;
}

/* Ítem de página actual + hover: texto claro, sin capas negras. */
:root[data-glpi-theme=TilenaLight] .sidebar #navbar-menu .nav-item .nav-link + .dropdown-menu .dropdown-item.active:hover {
  color: #ffffff !important;
  background-color: color-mix(in srgb, var(--tblr-primary), black 30%) !important;
  border-left-color: var(--tblr-primary) !important;
}

/* Cualquier otro ítem + hover (menú activo en página o abierto solo por hover/colapso). */
:root[data-glpi-theme=TilenaLight] .sidebar #navbar-menu .nav-item .nav-link + .dropdown-menu .dropdown-item:hover:not(.active) {
  color: var(--tblr-primary) !important;
  background-color: color-mix(in srgb, var(--tblr-primary), #ffffff 90%) !important;
  border-left-color: var(--tblr-primary) !important;
}