/*=====================================================================
  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;
}

/* ── Panel con pestañas: cuál está abierta ───────────────────────────────────
   Componente OPCIONAL. Se activa añadiendo `pestanas-netzdi` al panel:

       <div class="panel with-nav-tabs panel-info pestanas-netzdi">

   POR QUÉ HACE FALTA. La regla global ya pinta la pestaña activa de navy con
   letra blanca, pero la tira vive dentro de un `.panel-info > .panel-heading`
   que aquí arriba también se pinta de navy. Resultado: la pestaña abierta se
   FUNDE con el fondo y las que resaltan son las inactivas, que son claras —
   exactamente al revés de lo que el usuario espera, y por eso se pierde y no
   sabe en qué pestaña está trabajando.

   La solución es aclarar la tira; sobre ese fondo claro la regla global ya
   funciona como debe.

   POR QUÉ ES OPT-IN Y NO AUTOMÁTICO. Una decena de vistas de Contabilidad usan
   este mismo panel. Cambiarlas todas de golpe sería tocar pantallas que nadie
   ha pedido ni mirado; cada una lo adopta cuando se revisa.

   Nació embebido en rhpayslipNew.php y se extrajo aquí al necesitarlo también la
   factura de cliente, para que las dos no se separen con el tiempo. */
.panel.with-nav-tabs.pestanas-netzdi > .panel-heading {
    background: #f4f6fa;
    border-color: #d9dfea;
    padding: 8px 10px 0;
}
.panel.with-nav-tabs.pestanas-netzdi > .panel-heading .nav-tabs {
    border-bottom-color: #d9dfea;
    margin-bottom: 0;
}
.panel.with-nav-tabs.pestanas-netzdi .nav-tabs > li > a {
    background: #fff;
    color: #5a6a8a;
    border-color: #d9dfea;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
}
.panel.with-nav-tabs.pestanas-netzdi .nav-tabs > li > a:hover {
    background: #e9edf4;
    color: var(--netzdi-navy, #2c3d63);
}
.panel.with-nav-tabs.pestanas-netzdi .nav-tabs > li.active > a,
.panel.with-nav-tabs.pestanas-netzdi .nav-tabs > li.active > a:hover,
.panel.with-nav-tabs.pestanas-netzdi .nav-tabs > li.active > a:focus {
    background: var(--netzdi-navy, #2c3d63);
    border-color: var(--netzdi-navy, #2c3d63);
    color: #fff;
    /* Barra magenta arriba: el color invertido ya distingue, pero con varias
       pestañas juntas el acento dice de un vistazo CUÁL, sin tener que leer. */
    box-shadow: inset 0 3px 0 var(--netzdi-magenta, #ed2f5c);
}

/* 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);
}