/*=====================================================================
  Tema corporativo Netzdi
  ---------------------------------------------------------------------
  Repinta el skin "skin-blue" de AdminLTE 2 con los colores del logo
  Netzdi. Se carga DESPUÉS de AdminLTE.css y de _all-skins.min.css, así
  que gana por orden en el documento sin necesidad de !important salvo
  donde el plugin trae estilos en línea.

  Paleta tomada del propio logo (vistas/img/corporativos/Azulespaint.png):
    #2c3d63  azul marino de la palabra "NETZDI"  → color primario
    #ed2f5c  magenta del isotipo y el eslogan    → color de acento

  Para reafinar el tema, cambiar solo las variables de :root.
  Los colores semánticos de estado (verde éxito, naranja aviso, rojo
  peligro) se dejan intactos a propósito: comunican significado, no marca.
=====================================================================*/

:root {
    --netzdi-navy:        #2c3d63;  /* primario — navbar, botones, cabeceras */
    --netzdi-navy-dark:   #22304e;  /* hover y zona del logo */
    --netzdi-navy-darker: #1a2540;  /* pulsado */
    --netzdi-magenta:     #ed2f5c;  /* acento de marca */

    /* Barra lateral: navys profundos, derivados del primario */
    --netzdi-side-bg:     #1e2a45;
    --netzdi-side-hover:  #182238;
    --netzdi-side-header: #161f33;
    --netzdi-side-sub:    #26334f;
    --netzdi-side-text:   #aab8d0;
    --netzdi-side-subtxt: #8494b3;
}

/*=====================================================================
  1. Cabecera superior (navbar)
=====================================================================*/
.skin-blue .main-header .navbar,
.skin-blue .main-header li.user-header {
    background-color: var(--netzdi-navy);
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--netzdi-navy-dark);
}

@media (max-width: 767px) {
    .skin-blue .main-header .navbar .dropdown-menu li a:hover {
        background: var(--netzdi-navy-dark);
    }
}

/* Zona del logo, un tono más oscuro para separarla del navbar */
.skin-blue .main-header .logo {
    background-color: var(--netzdi-navy-dark);
    color: #ffffff;
    border-bottom: 0 solid transparent;
}

.skin-blue .main-header .logo:hover {
    background-color: var(--netzdi-navy-darker);
}

.skin-blue.layout-top-nav .main-header > .logo {
    background-color: var(--netzdi-navy);
    color: #ffffff;
}

.skin-blue.layout-top-nav .main-header > .logo:hover {
    background-color: var(--netzdi-navy-dark);
}

/*=====================================================================
  2. Barra lateral
=====================================================================*/
.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background-color: var(--netzdi-side-bg);
}

.skin-blue .sidebar-menu > li.header {
    color: var(--netzdi-side-subtxt);
    background: var(--netzdi-side-header);
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
    color: #ffffff;
    background: var(--netzdi-side-hover);
}

/* El ítem activo se marca con el magenta del logo: es el único punto
   donde el acento aparece en la navegación, para que destaque. */
.skin-blue .sidebar-menu > li.active > a {
    border-left-color: var(--netzdi-magenta);
}

.skin-blue .sidebar-menu > li > .treeview-menu {
    background: var(--netzdi-side-sub);
}

.skin-blue .sidebar a {
    color: var(--netzdi-side-text);
}

.skin-blue .sidebar-menu .treeview-menu > li > a {
    color: var(--netzdi-side-subtxt);
}

.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
    color: #ffffff;
}

.skin-blue .sidebar-form {
    border: 1px solid #3a4a6b;
}

.skin-blue .sidebar-form input[type="text"],
.skin-blue .sidebar-form .btn {
    background-color: #3a4a6b;
}

.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
    color: #fff;
}

/*=====================================================================
  3. Componentes primarios (Bootstrap 3 + AdminLTE)
=====================================================================*/
.btn-primary {
    background-color: var(--netzdi-navy);
    border-color: var(--netzdi-navy-dark);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary.hover,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--netzdi-navy-dark);
    border-color: var(--netzdi-navy-darker);
    color: #fff;
}

.btn-primary.disabled,
.btn-primary[disabled] {
    background-color: var(--netzdi-navy);
    border-color: var(--netzdi-navy-dark);
}

.bg-primary,
.bg-light-blue,
.bg-blue,
.label-primary,
.modal-primary .modal-header,
.modal-primary .modal-footer {
    background-color: var(--netzdi-navy) !important;
}

.text-primary,
.text-light-blue,
.text-blue {
    color: var(--netzdi-navy) !important;
}

/* Cajas (box) */
.box.box-primary {
    border-top-color: var(--netzdi-navy);
}

.box.box-solid.box-primary {
    border: 1px solid var(--netzdi-navy);
}

.box.box-solid.box-primary > .box-header {
    color: #fff;
    background: var(--netzdi-navy);
    background-color: var(--netzdi-navy);
}

.box.box-solid.box-primary > .box-header a,
.box.box-solid.box-primary > .box-header .btn {
    color: #fff;
}

/* Paneles Bootstrap */
.panel-primary {
    border-color: var(--netzdi-navy);
}

.panel-primary > .panel-heading {
    background-color: var(--netzdi-navy);
    border-color: var(--netzdi-navy);
    color: #fff;
}

.panel-primary > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: var(--netzdi-navy);
}

/* Panel con pestañas (panel with-nav-tabs panel-info) usado en contratos */
.panel-info {
    border-color: var(--netzdi-navy);
}

.panel-info > .panel-heading {
    background-color: var(--netzdi-navy);
    border-color: var(--netzdi-navy);
    color: #fff;
}

/* Pestañas */
.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--netzdi-navy);
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
    color: var(--netzdi-navy);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--netzdi-navy);
}

/* Paginación (incluye la de DataTables en Bootstrap) */
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
    background-color: var(--netzdi-navy);
    border-color: var(--netzdi-navy);
}

.pagination > li > a,
.pagination > li > span {
    color: var(--netzdi-navy);
}

/* Barras de progreso */
.progress-bar-primary,
.progress-bar-light-blue {
    background-color: var(--netzdi-navy);
}

/* Smart buttons estilo Odoo */
.btn-app:hover {
    border-color: var(--netzdi-navy);
    color: var(--netzdi-navy);
}

/* Enlaces y foco de formulario */
a {
    color: var(--netzdi-navy);
}

a:hover,
a:active,
a:focus {
    color: var(--netzdi-navy-dark);
}

.form-control:focus {
    border-color: var(--netzdi-navy);
    box-shadow: none;
}

/* Callout / alertas informativas */
.callout.callout-info {
    border-color: var(--netzdi-navy-dark);
    background-color: var(--netzdi-navy) !important;
}

/* Chat directo (chatter) */
.direct-chat-primary .right > .direct-chat-text {
    background: var(--netzdi-navy);
    border-color: var(--netzdi-navy);
    color: #fff;
}

.direct-chat-primary .right > .direct-chat-text:after,
.direct-chat-primary .right > .direct-chat-text:before {
    border-left-color: var(--netzdi-navy);
}

/*=====================================================================
  4. Plugins de terceros
=====================================================================*/
/* Select2 — opción resaltada */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--netzdi-navy) !important;
    color: #fff;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--netzdi-navy) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #e8ecf5;
}

/* DataTables — botones y ordenamiento */
.dataTables_wrapper .dt-buttons .dt-button {
    background: var(--netzdi-navy);
    border-color: var(--netzdi-navy-dark);
    color: #fff;
}

.dataTables_wrapper .dt-buttons .dt-button:hover {
    background: var(--netzdi-navy-dark) !important;
    border-color: var(--netzdi-navy-darker) !important;
}

/* Daterangepicker — rango activo */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover {
    background-color: var(--netzdi-navy);
    border-color: var(--netzdi-navy);
    color: #fff;
}

/* iCheck azul → navy */
.icheckbox_minimal-blue.checked,
.iradio_minimal-blue.checked {
    border-color: var(--netzdi-navy);
}

/*=====================================================================
  5. Pantalla de acceso
=====================================================================*/
.login-page .login-box-msg,
.register-page .register-box-msg {
    color: var(--netzdi-navy);
}

.login-logo a,
.register-logo a {
    color: var(--netzdi-navy);
}