@charset "UTF-8";
/*!
 * ---------------------------------------------------------------------
 * Tema TILENA 6.x (oscuro) — GLPI 11
 * Paleta base: legacy tilena sobre fondo oscuro.
 *
 * Secciones: (1) variables, (2) login anónimo, (3) logos, (4) componentes.
 * Estructura paralela a TilenaLight.scss para mantenimiento.
 *
 * Notas:
 * - --glpi-palette-color-1 es muy oscuro (#0d3d38): no usarlo como color de texto
 *   sobre superficie oscura; ribbon / subtítulos / secundarios usan palette-2 o 3.
 * - Enlaces: el core resuelve --tblr-link-color desde --tblr-link-color-rgb; solo hace
 *   falta el RGB en este bloque (igual que las paletas GLPI).
 * - Fondo de login (§2): sin !important; PluginTilenaHandler::getImageStyles puede
 *   sustituir color o imagen cuando images:used está activo.
 * - §5: :hover unificado en flyouts del menú lateral (véase TilenaLight §5).
 * ---------------------------------------------------------------------
 */
/* =============================================================================
 * 1. Variables (:root + data-glpi-theme; solo aplica con este tema activo)
 * ============================================================================= */
:root[data-glpi-theme=TilenaDark] {
  --tblr-primary-rgb: 28, 215, 220;
  --tblr-primary-fg: #86d7d5;
  --tblr-secondary: #1cd7dc;
  --tblr-secondary-fg: #fcfcfc;
  --tblr-link-color-rgb: 134, 215, 213;
  --tblr-body-bg: #191919;
  --tblr-bg-surface: #1e2424;
  --tblr-bg-forms: var(--tblr-bg-surface);
  --tblr-secondary-bg: color-mix(in srgb, var(--tblr-bg-surface), white 12%);
  --tblr-muted: #9ca8c0;
  --tblr-body-color: #e6e6e6;
  --glpi-form-header-fg: #86d7d5;
  --glpi-form-header-border-color: transparent;
  --glpi-mainmenu-bg: #0d3d38;
  --glpi-mainmenu-fg: #86d7d5;
  --glpi-helpdesk-header: hsl(174, 65%, 12%);
  --glpi-palette-color-1: #0d3d38;
  --glpi-palette-color-2: #86d7d5;
  --glpi-palette-color-3: #1cb8a7;
  --glpi-palette-color-4: #1cd7dc;
  --glpi-illustrations-gradient-1: hsl(174, 65%, 18%);
  --glpi-illustrations-gradient-2: hsl(174, 65%, 14%);
  --glpi-illustrations-gradient-3: hsl(174, 65%, 10%);
  --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-grey.png");
  --glpi-logo-light-login: url("../pics/logos/logo-Tilena-250-grey.png");
}

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

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;
}

:root[data-glpi-theme=TilenaDark] body.welcome-anonymous .page-anonymous a:not(.btn):not(.btn-link):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):link {
  color: var(--glpi-mainmenu-fg) !important;
}
:root[data-glpi-theme=TilenaDark] body.welcome-anonymous .page-anonymous a:not(.btn):not(.btn-link):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):visited {
  color: color-mix(in srgb, var(--glpi-mainmenu-fg), #64748b 40%) !important;
}
:root[data-glpi-theme=TilenaDark] body.welcome-anonymous .page-anonymous a:not(.btn):not(.btn-link):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):hover {
  color: #f4f6fa !important;
}
:root[data-glpi-theme=TilenaDark] body.welcome-anonymous .page-anonymous a:not(.btn):not(.btn-link):not(.nav-link):not(.dropdown-item):not(.page-link):not(.badge):active {
  color: #e2e8f0 !important;
}

:root[data-glpi-theme=TilenaDark] 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=TilenaDark] 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 35%) !important;
}
:root[data-glpi-theme=TilenaDark] body.welcome-anonymous .page-anonymous .main-content-card a:not(.btn):not(.btn-link):hover, :root[data-glpi-theme=TilenaDark] 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; alineado con handler / getImageStyles)
 * ============================================================================= */
:root[data-glpi-theme=TilenaDark] .page-anonymous .glpi-logo {
  height: 50px;
  width: auto;
  max-width: min(220px, 100%);
  object-fit: contain;
  object-position: center;
}

:root[data-glpi-theme=TilenaDark] 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=TilenaDark] .ribbon.bg-blue {
  background-color: var(--glpi-palette-color-3) !important;
  border-color: var(--glpi-palette-color-3) !important;
}

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

:root[data-glpi-theme=TilenaDark] .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.65) !important;
}

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

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

:root[data-glpi-theme=TilenaDark] .table thead th,
:root[data-glpi-theme=TilenaDark] .markdown > table thead th {
  color: color-mix(in srgb, var(--glpi-palette-color-2), white 8%);
}

/* =============================================================================
 * 5. Menú lateral — mismo criterio que TilenaLight (todos los flyouts bajo #navbar-menu)
 * ============================================================================= */
:root[data-glpi-theme=TilenaDark] .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 35%) !important;
  border-left-color: var(--tblr-primary) !important;
}

:root[data-glpi-theme=TilenaDark] .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), var(--tblr-bg-surface) 78%) !important;
  border-left-color: var(--tblr-primary) !important;
}