/*=====================================================================
  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 */
    /* El magenta de marca sobre el navy da 2,6:1 de contraste — ilegible. Este
       aclarado da 5,0:1 y sigue leyéndose como el mismo acento. Es el que va
       sobre fondos oscuros; sobre blanco se usa el de arriba. */
    --netzdi-magenta-claro: #ff90ad;

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

/* Las cifras resaltadas dentro de un callout navy salían en NEGRO —el <b> hereda
   el color de texto general, no el del callout— y quedaban ilegibles justo en lo
   único que hay que leer: cuántos apuntes y por cuánto. Van en el acento de
   marca, aclarado para que se lea sobre el navy. */
.callout.callout-info b,
.callout.callout-info strong {
    color: var(--netzdi-magenta-claro, #ff90ad);
}

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

/* ============================================================================
   BARRA DE ACCIONES DE LOS DOCUMENTOS  (.invoice-toolbar)

   Está en SIETE pantallas —factura de cliente y de proveedor, los dos listados
   de pagos, cotización, solicitud de compra y suscripción— y todas la escriben
   con el mismo `display:flex` en línea. Le faltaba `flex-wrap`.

   Sin envolver, los diez o doce botones de una factura contabilizada no caben
   en una pantalla angosta y, en vez de partirse en dos filas, EMPUJAN el ancho
   de la página. El resultado es que se pierde de vista lo que va al lado y
   debajo: el rastro de migas y los botones de la derecha (la salida de
   inventario, la suscripción). No desaparecen — quedan fuera del borde.

   Se arregla aquí y no en las siete vistas: son la misma barra, y siete copias
   de la corrección envejecen igual de mal que las siete copias del problema.
   ========================================================================== */
.invoice-toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* Un hijo de flex no baja de su contenido si conserva `min-width:auto`, y esa
   es la mitad del desborde: el grupo de botones se niega a encoger. */
.invoice-toolbar > * {
    min-width: 0;
}

/* DENTRO DE LA BARRA, EL GRUPO DE BOTONES NO LLEVA MARGEN PROPIO.

   `.button-group` (Estilos.css) trae `margin: 20px`, y donde el grupo va SUELTO
   -catorce pantallas: asiento contable, papeles de almacen, recibo de nomina...-
   ese margen es su unica separacion del contenido de alrededor, asi que alla se
   queda. Aqui no: la barra ya pone su propio `padding: 10px 15px`, de modo que
   los 20 px de arriba y los 20 de abajo se SUMAN a ese relleno y le agregan 40 px
   de alto al bloque gris sin que nadie lo haya pedido.

   Se vio comparando la cotizacion con la factura de cliente, que NO lleva esta
   clase: mismo `padding`, misma barra, y una media cabeza de diferencia. Medido en
   navegador el 2026-09-24: 93,1 px contra 53,1 px, y quitando SOLO este margen la
   cotizacion da los mismos 53,1 que la factura. Ningun otro candidato movia un
   pixel -flex-wrap, el input oculto del estado, align-items, el margin-bottom de
   los .btn-.

   Lo delator: `.button-group` esta escrita DOS VECES seguidas en Estilos.css; la
   segunda pisa `gap` y agrega `padding-left`, pero no el margen, asi que sobrevive
   sin que se vea al leer.

   Se corrige aqui, junto a las demas reglas compartidas de la barra, y no en cada
   vista: son DOS las que la usan asi -la cotizacion y la solicitud de compra- y una
   excusa local por pantalla envejece igual de mal que el problema. Se quita el
   MARGEN y no la clase: `display:flex` con `gap` es lo que reparte los botones, y
   stockPick.js cuenta con ese `flex` para mostrar y esconder el grupo. */
.invoice-toolbar .button-group {
    margin: 0;
}

/* Aire entre filas cuando la barra se parte, sin depender de `row-gap` (que no
   entiende cualquier navegador viejo).

   Y LOS BOTONES DE LA BARRA VAN REDONDOS, EN LAS SIETE PANTALLAS. Decision de
   Sergio (2026-09-24) comparando la cotizacion -que ya los tenia asi por una regla
   suya- con la factura de cliente, cuadrada. Va aqui y no en cada vista por la
   misma razon que el `flex-wrap` de arriba: es la misma barra, y siete copias del
   redondeo envejecen igual de mal que siete copias de un problema -la primera que
   alguien retoque deja las otras seis distintas sin que nada avise-.

   Los 18 px son un radio mayor que el alto del boton (29 px de caja, o sea 14,5 de
   media altura), asi que el navegador lo topa y salen capsulas perfectas; no hace
   falta `border-radius: 999px` ni calcularlo por boton. Alcanza a los `.btn` de la
   barra y a nada mas: los de las filas de la tabla y los de los modales se quedan
   como estan. */
/* ============================================================================
   ENLACES DE PIE DE LA TABLA DE LINEAS  (Agregar linea · Catalogo ·
   Agregar una seccion · Agregar una nota)

   La misma tipografia de la cotizacion, que es la que se escogio (2026-09-24):
   pildora discreta de 12 px y semigruesa, no un enlace azul subrayado. Alla vive
   acotada a `#cotizacionPage`; aqui el ancla es `#table-body-factura`, que existe
   UNICAMENTE en las dos facturas -la de cliente y la de proveedor-, verificado
   antes de escribir esto.

   No se ancla en `.products-table-container .listRow_add`, que era lo comodo: esa
   clase la usan DIECISIETE pantallas -notas credito, asientos contables, cultivos,
   nomina, papeles de almacen- y la regla se les habria colado a todas. El pedido
   eran estos cuatro enlaces, no el ERP entero.

   Va aqui y no copiada en las dos vistas por la razon de siempre: dos copias de la
   misma regla envejecen mal, y la primera que alguien retoque deja la otra distinta
   sin que nada avise.
   ========================================================================== */
#table-body-factura .listRow_add a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 14px;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}

/* «Agregar linea» y «Catalogo» son las acciones principales y van en navy; las otras
   dos conservan el gris que ya traen en linea, porque son accesorias. */
#table-body-factura .listRow_add a:first-child { color: #2c3d63; }
#table-body-factura .listRow_add a:hover { background: #eef1f6; }


.invoice-toolbar .btn {
    margin-bottom: 4px;
    border-radius: 18px;
}

@media (max-width: 767px) {
    /* Con la barra ya partida, separar los extremos deja un hueco raro en medio:
       en angosto se leen mejor pegados a la izquierda, en el orden en que están. */
    .invoice-toolbar {
        justify-content: flex-start;
    }

    /* Los botones de la derecha (salida de inventario, suscripción) se alinean
       con el resto en vez de irse al borde. */
    #smart-buttons-bar-customer,
    #smart-buttons-bar {
        text-align: left;
    }
}