/* =========================================================
   TIKEA.PE - Tema corporativo formal
   Objetivo: reemplazar morados por azul/verde del logo,
   corregir alineación y mantener la funcionalidad intacta.
   ========================================================= */

:root {
  --tikea-navy: #003b73;
  --tikea-blue: #00509e;
  --tikea-blue-2: #006ba6;
  --tikea-cyan: #008fb3;
  --tikea-green: #22a866;
  --tikea-green-dark: #118455;
  --tikea-ink: #0f223f;
  --tikea-text: #24364f;
  --tikea-muted: #6b7c93;
  --tikea-bg: #f4f7fb;
  --tikea-line: #dfe8f2;
  --tikea-soft: #eef5fb;
  --tikea-white: #ffffff;
  --tikea-shadow: 0 8px 22px rgba(15, 34, 63, .08);
  --tikea-shadow-soft: 0 3px 10px rgba(15, 34, 63, .06);
  --tikea-gradient: linear-gradient(90deg, #003b73 0%, #00509e 58%, #006ba6 100%);
  --tikea-gradient-soft: linear-gradient(90deg, rgba(0,80,158,.08), rgba(34,168,102,.08));
}

html,
body,
.wrapper,
.content-wrapper,
.right-side,
.panel-medio-principal,
.panel-medio,
.super-contenedor {
  background: var(--tikea-bg) !important;
  color: var(--tikea-text) !important;
}

body {
  font-family: "Quicksand", "Source Sans Pro", "Segoe UI", Arial, sans-serif !important;
}

/* ===================== CABECERA ===================== */
.main-header.cabecera-m,
.main-header .navbar.cabecera-m,
.skin-blue .main-header .navbar,
.cabecera-m {
  background: var(--tikea-gradient) !important;
  border: 0 !important;
  box-shadow: 0 2px 10px rgba(0, 59, 115, .18) !important;
}

.main-header .logo,
.main-header.cabecera-m .logo,
.skin-blue .main-header .logo,
.cabecera-m .logo {
  background: #003b73 !important;
  color: #ffffff !important;
  border-right: 1px solid rgba(255,255,255,.14) !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  height: 50px !important;
  line-height: 50px !important;
}

.main-header .logo:hover,
.skin-blue .main-header .logo:hover {
  background: #004b8d !important;
}

.main-header .navbar {
  min-height: 50px !important;
}

.main-header .navbar .nav > li > a,
.main-header .navbar .dropdown-toggle,
.main-header .navbar .hidden-xs,
.main-header .navbar i {
  color: #ffffff !important;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:active,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav .open > a,
.main-header .navbar .nav .open > a:hover,
.main-header .navbar .nav .open > a:focus {
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}

.btn-menup,
.btn-menup.btn-success,
.btn-menup.btn-danger {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 7px 10px !important;
  margin: 7px 4px !important;
}

.btn-menup:hover,
.btn-menup:focus {
  background: rgba(255,255,255,.17) !important;
  color: #ffffff !important;
}

.btn-modo-sistema {
  background: #2ea44f !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 18px !important;
  height: 34px !important;
  padding: 0 18px !important;
  margin: 8px 8px 8px 4px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  box-shadow: none !important;
}

#tipocambio,
.main-header .btn-primary#tipocambio {
  background: rgba(0, 59, 115, .30) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #ffffff !important;
  border-radius: 18px !important;
  height: 34px !important;
  padding: 6px 14px !important;
  margin: 8px 6px !important;
  box-shadow: none !important;
}

.main-header .label-warning {
  background: #f5c542 !important;
  color: #102a43 !important;
}

.main-header .user-image,
.img-user-b {
  border: 2px solid rgba(255,255,255,.85) !important;
  box-shadow: none !important;
}

.menu-user i[style*="royalblue"] {
  color: var(--tikea-blue) !important;
}

/* ===================== ESTRUCTURA ===================== */
.content-wrapper,
.right-side {
  min-height: calc(100vh - 50px) !important;
}

.panel-medio-principal .container-fluid,
.panel-medio {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.panel-medio .box,
.rounded,
.box.rounded,
.dashboard-header,
.dashboard-header .box,
.dash-card,
.dash-chart-box {
  background: #ffffff !important;
  border: 1px solid var(--tikea-line) !important;
  box-shadow: var(--tikea-shadow-soft) !important;
}

.rounded,
.box.rounded {
  border-radius: 12px !important;
}

/* ===================== BARRA DASHBOARD ===================== */
.dashboard-header {
  border-radius: 10px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
}

.dashboard-header .box {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

.dashboard-header .box > .col-lg-12,
.dashboard-header .box > .col-xs-12 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 42px !important;
}

.dashboard-header button {
  background: transparent !important;
  color: var(--tikea-ink) !important;
  border: 0 !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

.dashboard-header button i,
.dashboard-header a.btn i {
  color: var(--tikea-blue) !important;
}

.dashboard-header .btns-dash {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.dashboard-header .btns-dash a.btn,
.dashboard-header a.btn {
  float: none !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--tikea-line) !important;
  color: var(--tikea-ink) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  padding: 8px 14px !important;
}

.dashboard-header .btns-dash a.btn:hover,
.dashboard-header a.btn:hover {
  background: var(--tikea-soft) !important;
  border-color: #c8d7e7 !important;
  color: var(--tikea-blue) !important;
}

/* ===================== BOTONES / FORMULARIOS ===================== */
.btn-primary,
.bg-blue,
.label-primary,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background: #00509e !important;
  border-color: #00509e !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #003b73 !important;
  border-color: #003b73 !important;
  color: #ffffff !important;
}

.btn-success,
.bg-green,
.label-success {
  background: #22a866 !important;
  border-color: #22a866 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-info,
.bg-aqua,
.label-info {
  background: #008fb3 !important;
  border-color: #008fb3 !important;
  color: #ffffff !important;
}

.btn-dos,
.btn-tres {
  background-image: none !important;
  background-color: var(--tikea-blue) !important;
  color: #ffffff !important;
}

.box.box-primary,
.nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: var(--tikea-blue) !important;
}

.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  border-color: #d7e2ee !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--tikea-blue-2) !important;
  box-shadow: 0 0 0 2px rgba(0, 80, 158, .12) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected=true] {
  background: var(--tikea-blue) !important;
  color: #ffffff !important;
}

.table .icon-search {
  background-image: none !important;
  background-color: var(--tikea-blue) !important;
  color: #ffffff !important;
}

table thead tr,
.table thead tr,
.tablaVentas thead,
.tablaGuias thead,
.tablaCotizaciones thead,
.tabla-items thead {
  background: #f2f6fb !important;
  color: var(--tikea-ink) !important;
}

table thead tr th,
.table thead tr th {
  color: var(--tikea-ink) !important;
  border-bottom: 1px solid var(--tikea-line) !important;
}

.swal2-popup,
.swal2-modal {
  border-radius: 14px !important;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 991px) {
  .dashboard-header .box > .col-lg-12,
  .dashboard-header .box > .col-xs-12 {
    display: block !important;
  }

  .dashboard-header .btns-dash {
    justify-content: flex-start !important;
    padding: 8px 10px !important;
  }
}

@media (max-width: 767px) {
  .main-header .logo,
  .main-header .navbar {
    background: var(--tikea-gradient) !important;
  }

  .main-header .logo {
    width: 100% !important;
    border-right: 0 !important;
  }

  .main-header .navbar {
    min-height: 50px !important;
  }

  .btn-modo-sistema,
  #tipocambio {
    max-width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .content-wrapper,
  .right-side,
  .main-footer {
    margin-left: 0 !important;
  }

  .panel-medio-principal .container-fluid,
  .panel-medio {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .dashboard-header .btns-dash a.btn {
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .btn-modo-sistema,
  #tipocambio {
    font-size: 11px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* =========================================================
   Ajuste 07/07 - Iconos superiores y cargador
   ========================================================= */
.main-header.cabecera-m,
.main-header .navbar.cabecera-m,
.skin-blue .main-header .navbar,
.cabecera-m {
  background: linear-gradient(90deg, #003b73 0%, #00509e 55%, #006b8f 100%) !important;
}

.main-header .logo,
.main-header.cabecera-m .logo,
.skin-blue .main-header .logo,
.cabecera-m .logo {
  background: #003b73 !important;
}

/* Botones de día/noche: antes se veían como cuadros vacíos porque
   el background del tema pisaba el icono SVG original. */
.main-header .navbar .btn-menup.dia,
.main-header .navbar .btn-menup.noche,
.main-header .navbar button.btn-menup.dia,
.main-header .navbar button.btn-menup.noche {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 8px 4px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  background-color: rgba(255,255,255,.14) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
}

.main-header .navbar .btn-menup.dia,
.main-header .navbar button.btn-menup.dia {
  background-image: url("../img/svg/sun.svg") !important;
}

.main-header .navbar .btn-menup.noche,
.main-header .navbar button.btn-menup.noche {
  background-image: url("../img/svg/luna.svg") !important;
}

.main-header .navbar .btn-menup.dia:hover,
.main-header .navbar .btn-menup.noche:hover,
.main-header .navbar button.btn-menup.dia:hover,
.main-header .navbar button.btn-menup.noche:hover {
  background-color: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.42) !important;
}

/* Ícono del menú hamburguesa más legible */
.main-header .navbar .btn-menup:not(.dia):not(.noche) i,
.main-header .navbar .sidebar-toggle i {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Evita que el loader quede visible en la cabecera al abrir el dashboard.
   Se seguirá pudiendo mostrar con JS durante procesos puntuales. */
.reload-all {
  display: none;
  position: fixed !important;
  top: 52px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 56px !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 9998 !important;
  text-align: center !important;
}

.reload-all img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 34, 63, .14) !important;
}

@media (max-width: 767px) {
  .main-header .navbar .btn-menup.dia,
  .main-header .navbar .btn-menup.noche,
  .main-header .navbar button.btn-menup.dia,
  .main-header .navbar button.btn-menup.noche {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    margin: 9px 3px !important;
    background-size: 18px 18px !important;
  }

  #tipocambio,
  .main-header .btn-primary#tipocambio {
    max-width: 210px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   Corrección pantalla Nueva Boleta / Factura / Nota
   Quita la línea que aparecía entre el lector de código de
   barras y los botones de agregar producto. No toca lógica.
   ========================================================= */
.formVenta .nuevoProducto {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 8px !important;
  border-top: 0 !important;
  clear: both !important;
}

.formVenta .nuevoProducto > .flex,
.formVenta .nuevoProducto .flex {
  width: 100% !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 0 0 10px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.formVenta .nuevoProducto .flex > .fa-barcode,
.formVenta .nuevoProducto .flex > i.fas.fa-barcode {
  margin-right: 6px !important;
  color: var(--tikea-blue) !important;
  align-self: center !important;
}

.formVenta .nuevoProducto #searchpc,
.formVenta .nuevoProducto #searchpcPos {
  width: 170px !important;
  min-width: 170px !important;
  height: 34px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--tikea-line) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: var(--tikea-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.formVenta .nuevoProducto .btn-agregar-carrito,
.formVenta .nuevoProducto .btnproser {
  position: static !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 14px !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.formVenta .nuevoProducto .btn-agregar-carrito {
  background: #00509e !important;
  border: 1px solid #00509e !important;
  color: #ffffff !important;
}

.formVenta .nuevoProducto .btnproser {
  background: #22a866 !important;
  border: 1px solid #22a866 !important;
  color: #ffffff !important;
}

.formVenta .nuevoProducto .items-c {
  width: 100% !important;
  clear: both !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  overflow-x: auto !important;
}

.formVenta .nuevoProducto .tabla-items {
  margin-top: 0 !important;
  border-top: 0 !important;
}

.formVenta .nuevoProducto .tabla-items,
.formVenta .nuevoProducto .tabla-items thead,
.formVenta .nuevoProducto .tabla-items thead tr,
.formVenta .nuevoProducto .tabla-items thead tr th {
  border-top: 0 !important;
}

.formVenta .nuevoProducto .tabla-items thead tr th {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background: #f2f6fb !important;
}

@media (max-width: 991px) {
  .formVenta .nuevoProducto > .flex,
  .formVenta .nuevoProducto .flex {
    justify-content: flex-start !important;
  }

  .formVenta .nuevoProducto .btn-agregar-carrito,
  .formVenta .nuevoProducto .btnproser {
    flex: 1 1 220px !important;
  }
}

@media (max-width: 575px) {
  .formVenta .nuevoProducto #searchpc,
  .formVenta .nuevoProducto #searchpcPos,
  .formVenta .nuevoProducto .btn-agregar-carrito,
  .formVenta .nuevoProducto .btnproser {
    width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }
}

/* =========================================================
   FIX FINAL: ocultar línea que atraviesa lector de código
   de barra y botones en Nueva Boleta/Factura/Nota.
   ========================================================= */
.formVenta .nuevoProducto {
  position: relative !important;
  overflow: visible !important;
  padding-top: 10px !important;
  border-top: 0 !important;
}

.formVenta .nuevoProducto::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 48px !important;
  background: #ffffff !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.formVenta .nuevoProducto > .flex,
.formVenta .nuevoProducto .flex {
  position: relative !important;
  z-index: 2 !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 8px 0 !important;
  margin: 0 !important;
}

.formVenta .nuevoProducto > .flex::before,
.formVenta .nuevoProducto > .flex::after,
.formVenta .nuevoProducto .flex::before,
.formVenta .nuevoProducto .flex::after {
  content: none !important;
  display: none !important;
}

.formVenta .nuevoProducto hr,
.formVenta .nuevoProducto .line,
.formVenta .nuevoProducto .divider {
  display: none !important;
}

.formVenta .nuevoProducto .items-c {
  position: relative !important;
  z-index: 0 !important;
  margin-top: 0 !important;
  border-top: 0 !important;
}

.formVenta .nuevoProducto .tabla-items {
  border-top: 0 !important;
  margin-top: 0 !important;
}