/* ==========================================================================
   COOTEP - Personalizacion visual de GLPI 11
   --------------------------------------------------------------------------
   Guardar como UTF-8 SIN BOM (los comentarios estan en ASCII a proposito
   para evitar caracteres danados por la codificacion).

   INDICE
     0. Paleta corporativa (variables)
     1. Logos
     2. Elementos generales (botones, enlaces, pestanas, titulos de seccion)
     3. Login
     4. Interfaz simplificada: barra superior (header.topbar)
     5. Interfaz estandar: menu lateral (aside.sidebar)
     6. Inicio: banner de busqueda de la base de conocimiento
     7. Responsive (moviles)
   ========================================================================== */


/* ==========================================================================
   0. PALETA CORPORATIVA
   Todos los colores del archivo salen de aqui. Para cambiar un color,
   se cambia solo en este bloque. El plugin searchplugin usa estas variables.
   ========================================================================== */
:root {
    --cootep-verde: #19622C;
    --cootep-verde-oscuro: #0F3D1B;
    --cootep-verde-claro: #E9F1EB;
    --cootep-dorado: #E4B243;
    --cootep-dorado-oscuro: #B8891F;
    --cootep-negro-texto: #222020;

    accent-color: var(--cootep-verde); /* checkboxes y radios */
}


/* ==========================================================================
   1. LOGOS
   ========================================================================== */

/* Login: el logo se pinta con "content" */
.page-anonymous .glpi-logo {
    content: url('../pics/logo.png') !important;
    width: 220px !important;
    height: 120px !important;
    display: inline-block !important;
}

/* Resto de la interfaz: el logo se pinta como fondo */
.page:not(.page-anonymous) .glpi-logo {
    background-image: url('../pics/logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 200px !important;
    height: 55px !important;
}

/* Menu lateral colapsado: solo el icono */
body.navbar-collapsed .navbar-brand .glpi-logo {
    background-image: url('../pics/logo-icon.png') !important;
    width: 40px !important;
    height: 40px !important;
}

/* Oculta solo el enlace de copyright (sin tocar el pixel del cron) */
a.copyright {
    display: none !important;
}


/* ==========================================================================
   2. ELEMENTOS GENERALES
   ========================================================================== */

/* Botones primarios (Guardar, Enviar, Agregar, Buscar, etc.):
   fondo verde con texto blanco; al pasar el cursor, fondo dorado con
   texto oscuro (el blanco sobre dorado casi no se lee). Es la misma
   combinacion del boton del login (seccion 3). */
.btn-primary {
    background-color: var(--cootep-verde) !important;
    border-color: var(--cootep-verde) !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--cootep-dorado) !important;
    border-color: var(--cootep-dorado) !important;
    color: var(--cootep-negro-texto) !important;
}

/* Enlaces (especificidad baja a proposito: no pisa los enlaces que ya
   tienen su propio color, como menus, badges o paginacion) */
a {
    color: var(--cootep-verde);
}
a:hover {
    color: var(--cootep-verde-oscuro);
}

/* Pestanas activas y elementos seleccionados */
.nav-tabs .nav-link.active,
.list-group-item.active {
    background-color: var(--cootep-verde) !important;
    border-color: var(--cootep-verde) !important;
    color: #ffffff !important;
}

/* Titulos de seccion de los formularios (div.bg-primary con un h2 dentro,
   p. ej. "Informacion General de novedad") y badges primarios.
   GLPI los pinta con su color "primary" por defecto (rojo en este tema);
   aqui se fuerzan al verde corporativo con texto blanco. */
.bg-primary {
    background-color: var(--cootep-verde) !important;
}
.bg-primary,
.bg-primary :is(h1, h2, h3, h4, h5, h6) {
    color: #ffffff !important;
}

/* Otros usos del color "primary": texto y bordes */
.text-primary {
    color: var(--cootep-verde) !important;
}
.border-primary {
    border-color: var(--cootep-verde) !important;
}


/* ==========================================================================
   3. LOGIN
   ========================================================================== */
.page-anonymous button[type="submit"] {
    background-color: var(--cootep-verde) !important;
    border-color: var(--cootep-verde) !important;
    color: #ffffff !important;
}
.page-anonymous button[type="submit"]:hover {
    background-color: var(--cootep-dorado) !important;
    border-color: var(--cootep-dorado) !important;
    color: var(--cootep-negro-texto) !important;
}


/* ==========================================================================
   4. INTERFAZ SIMPLIFICADA - BARRA SUPERIOR (Colaboradores)
   ========================================================================== */
header.topbar {
    background-color: #ffffff !important;
    border-bottom: 3px solid var(--cootep-dorado) !important;
}

/* Menu e iconos en verde sobre fondo blanco */
header.topbar .nav-link,
header.topbar .menu-label,
header.topbar .navbar-brand {
    color: var(--cootep-verde) !important;
}

/* Hover en dorado */
header.topbar .nav-link:hover,
header.topbar .nav-link:hover .menu-label {
    color: var(--cootep-dorado-oscuro) !important;
}

/* Texto del usuario (perfil / entidad) en la esquina */
header.topbar .user-menu .pe-2 div,
header.topbar .text-muted-menu {
    color: var(--cootep-verde) !important;
}

/* Campo "Encuentra el menu" cuando aparece en la barra superior */
header.topbar .search-menu input,
header.topbar .search-menu input::placeholder {
    color: var(--cootep-verde) !important;
    opacity: 1 !important;
}


/* ==========================================================================
   5. INTERFAZ ESTANDAR - MENU LATERAL (Soporte / Administradores)
   ========================================================================== */
aside.sidebar,
.navbar-vertical {
    background-color: #ffffff !important;
    border-right: 3px solid var(--cootep-dorado) !important;
}

aside.sidebar .nav-link {
    color: var(--cootep-verde) !important;
}
aside.sidebar .nav-link:hover {
    color: var(--cootep-dorado-oscuro) !important;
}

/* Item activo / seccion abierta del menu (tambien con el menu colapsado):
   GLPI lo pinta con fondo azul oscuro y borde rojo, y el icono verde se
   pierde. Aqui: fondo verde claro, icono y texto en verde oscuro y
   marca dorada a la izquierda. */
aside.sidebar .nav-item.active,
aside.sidebar .nav-item.active > .nav-link,
aside.sidebar .nav-item.show > .nav-link,
aside.sidebar .nav-link.active {
    background-color: var(--cootep-verde-claro) !important;
    border-left-color: var(--cootep-dorado) !important;
    box-shadow: none !important;
    color: var(--cootep-verde-oscuro) !important;
}

aside.sidebar .nav-item.active > .nav-link i,
aside.sidebar .nav-item.active > .nav-link svg,
aside.sidebar .nav-item.show > .nav-link i,
aside.sidebar .nav-link.active i,
aside.sidebar .nav-link.active svg {
    color: var(--cootep-verde-oscuro) !important;
}

/* Hover sobre cualquier item: fondo verde claro para que el icono se vea */
aside.sidebar .nav-link:hover {
    background-color: var(--cootep-verde-claro) !important;
}

/* Campo de busqueda "Encuentra el menu" */
aside.sidebar .search-menu input,
aside.sidebar .search-menu input::placeholder,
aside.sidebar .search-menu .input-icon-addon {
    color: var(--cootep-verde) !important;
    opacity: 1 !important;
}

/* Submenus desplegables (Usuarios, Grupos, Entidades, etc.) */
aside.sidebar .dropdown-menu,
aside.sidebar .nav-sub-menu,
aside.sidebar .sub-menu {
    background-color: #ffffff !important;
}

aside.sidebar .dropdown-item,
aside.sidebar .nav-sub-menu .nav-link,
aside.sidebar .sub-menu a {
    color: var(--cootep-negro-texto) !important;
}

aside.sidebar .dropdown-item i,
aside.sidebar .dropdown-item svg,
aside.sidebar .nav-sub-menu .nav-link i,
aside.sidebar .sub-menu a i {
    color: var(--cootep-verde) !important;
}

/* Hover o elemento activo dentro de los submenus */
aside.sidebar .dropdown-item:hover,
aside.sidebar .dropdown-item.active,
aside.sidebar .nav-sub-menu .nav-link:hover,
aside.sidebar .nav-sub-menu .nav-link.active {
    background-color: var(--cootep-verde-claro) !important;
    color: var(--cootep-verde-oscuro) !important;
}

/* Botones "Encuentra el menu" (.trigger-fuzzy) y "Plegar menu" (.reduce-menu) */
button.trigger-fuzzy,
button.trigger-fuzzy .menu-label,
button.trigger-fuzzy i,
button.reduce-menu,
button.reduce-menu .menu-label,
button.reduce-menu i,
button.reduce-menu svg {
    color: var(--cootep-verde) !important;
}

button.trigger-fuzzy:hover,
button.trigger-fuzzy:hover .menu-label,
button.trigger-fuzzy:hover i,
button.reduce-menu:hover,
button.reduce-menu:hover .menu-label,
button.reduce-menu:hover i,
button.reduce-menu:hover svg {
    color: var(--cootep-verde-oscuro) !important;
    background-color: var(--cootep-verde-claro) !important;
}


/* ==========================================================================
   6. INICIO - BANNER DE BUSQUEDA (base de conocimiento)
   ========================================================================== */
.search-banner {
    background-color: var(--cootep-verde-claro) !important;
}

.search-banner-content h1 {
    color: var(--cootep-verde) !important;
}


/* ==========================================================================
   7. RESPONSIVE (moviles, hasta 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* Oculta las imagenes laterales del banner */
    .search-banner .scene {
        display: none !important;
    }

    /* Banner en columna, con espacio suficiente */
    .search-banner {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 35px 15px !important;
        height: auto !important;
        min-height: 190px !important;
        overflow: visible !important;
    }

    .search-banner-content {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .search-banner-content h1 {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        margin: 0 0 15px !important;
    }

    /* Barra de busqueda visible y con tamano tactil */
    .search-bar-container {
        display: block !important;
        position: relative !important;
        width: 100% !important;
    }

    .search-bar-container input {
        font-size: 0.85rem !important;
        height: 44px !important;
    }
}