/* ================================================================
   NsStore.mx - Header y Footer CSS
   Archivo: themes/ap_office/css/local/nsstore_header_footer.css
   ================================================================ */

/* TOPBAR */
#topbar,
#topbar .nav,
#topbar .nav .container,
#topbar .nav .container .inner {
  background-color: #0f2040 !important;
  background: #0f2040 !important;
}
#topbar .header_user_info a,
#topbar .header_user_info span,
#topbar nav a,
#topbar nav span {
  color: rgba(255,255,255,.55) !important;
  font-size: 11px !important;
}
#topbar .header_user_info a:hover,
#topbar nav a:hover { color: #ffffff !important; }
#topbar .header_user_info .popup-title a {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#topbar .header_user_info .popup-title .fa-cog {
  color: rgba(255,255,255,.4) !important;
}

/* HEADER MAIN */
#header-main,
#header-main .container,
#header-main .container > .inner,
#header-main .inner,
#header-main .row,
header#header,
header#header section.header-container,
section.header-container {
  background-color: #ffffff !important;
  background: #ffffff !important;
}
#header_logo { background: transparent !important; }
#header_logo a { display: inline-block !important; }
#search_block_top { background: transparent !important; }
#searchbox,
#search_block_top form { background: transparent !important; }

/* BUSCADOR */
#search_query_top {
  background: #f8fafc !important;
  border: 2px solid #e8edf5 !important;
  border-right: none !important;
  color: #1e293b !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 13px !important;
  padding: 9px 14px !important;
  outline: none !important;
  transition: border-color .15s !important;
}
#search_query_top:focus {
  border-color: #2563eb !important;
  background: #ffffff !important;
}
#search_query_top::placeholder { color: #94a3b8 !important; }
#searchbox .btn,
#search_block_top button[type="submit"] {
  background: #2563eb !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  color: #ffffff !important;
  padding: 9px 16px !important;
  transition: background .12s !important;
}
#searchbox .btn:hover,
#search_block_top button[type="submit"]:hover {
  background: #1d4ed8 !important;
}

/* CARRITO */
.blockcart_top,
.blockcart_top .shopping_cart,
#cart { background: transparent !important; }
.blockcart_top .cart-inner a,
.blockcart_top .ajax_cart_no_product,
.blockcart_top .ajax_cart_quantity {
  color: #1e293b !important;
  font-weight: 700 !important;
}

/* SERVICIOS */
.box-services h4 {
  color: #1e3a5f !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin-bottom: 1px !important;
}
.box-services small {
  color: #94a3b8 !important;
  font-size: 10.5px !important;
}

/* NAV MENU */
#block_top_menu,
div#block_top_menu.sf-contener {
  background-color: #1e3a5f !important;
  border-top: none !important;
  border-bottom: 2px solid rgba(255,255,255,.05) !important;
}
.cat-title {
  background-color: #1e3a5f !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
}
#block_top_menu .sf-menu > li > a {
  color: rgba(255,255,255,.7) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: color .12s, background .12s !important;
}
#block_top_menu .sf-menu > li > a:hover,
#block_top_menu .sf-menu > li.active > a {
  color: #ffffff !important;
  background-color: rgba(255,255,255,.08) !important;
}
#block_top_menu .sf-menu > li.active > a {
  position: relative !important;
}

/* DROPDOWN DESKTOP - redondeado */
#block_top_menu .sf-menu ul {
  background-color: #ffffff !important;
  border: 1px solid #e8edf5 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}
#block_top_menu .sf-menu ul li a {
  color: #374151 !important;
  font-size: 12.5px !important;
  padding: 10px 16px !important;
  transition: color .12s, background .12s, padding-left .12s !important;
}
#block_top_menu .sf-menu ul li a:hover {
  color: #2563eb !important;
  background-color: #eff6ff !important;
  padding-left: 20px !important;
}

/* MENU MOBILE - items blancos con iconos */
@media (max-width: 1024px) {
  .cat-title {
    background: linear-gradient(135deg,#0f2040,#1a3a6e) !important;
    padding: 13px 16px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .cat-title::after {
    content: '\2630' !important;
    font-size: 16px !important;
    color: rgba(255,255,255,.6) !important;
  }
  #block_top_menu .sf-menu ul {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }
  #block_top_menu .sf-menu > li > ul > li > a {
    background: #ffffff !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #block_top_menu .sf-menu > li > ul > li > a::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    background: #e2e8f0 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    transition: background .12s !important;
  }
  #block_top_menu .sf-menu > li > ul > li > a:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
    padding-left: 20px !important;
  }
  #block_top_menu .sf-menu > li > ul > li > a:hover::before {
    background: #2563eb !important;
  }
}

/* DARK MODE - menu visible */
.darkmode--activated #block_top_menu .sf-menu ul,
.darkmode--activated #block_top_menu .sf-menu > li > ul {
  background: #1e293b !important;
  border-color: rgba(255,255,255,.08) !important;
}
.darkmode--activated #block_top_menu .sf-menu ul li a,
.darkmode--activated #block_top_menu .sf-menu > li > ul > li > a {
  background: #1e293b !important;
  color: rgba(255,255,255,.75) !important;
  border-color: rgba(255,255,255,.06) !important;
}
.darkmode--activated #block_top_menu .sf-menu ul li a:hover,
.darkmode--activated #block_top_menu .sf-menu > li > ul > li > a:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}
.darkmode--activated #header-main,
.darkmode--activated #header-main .container,
.darkmode--activated #header-main .container > .inner,
.darkmode--activated #header-main .inner,
.darkmode--activated header#header,
.darkmode--activated section.header-container {
  background-color: #111827 !important;
  background: #111827 !important;
}
.darkmode--activated #search_query_top {
  background: #1e293b !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #e2e8f0 !important;
}
.darkmode--activated #search_query_top::placeholder {
  color: #475569 !important;
}
.darkmode--activated #searchbox .btn,
.darkmode--activated #search_block_top button[type="submit"] {
  background: #2563eb !important;
}
.darkmode--activated .blockcart_top .cart-inner a,
.darkmode--activated .blockcart_top .ajax_cart_no_product {
  color: #e2e8f0 !important;
}
.darkmode--activated .box-services h4 {
  color: #cbd5e1 !important;
}
.darkmode--activated .box-services small {
  color: #64748b !important;
}

/* FOOTER */
footer#footer,
footer.footer-container {
  background-color: #1e3a5f !important;
  border-top: 3px solid #2563eb !important;
}
#leo-footer-top,
#leo-footer-top .container,
#leo-footer-top .inner { background-color: #1e3a5f !important; }
#leo-footer-top .block_content,
#social_block .block_content { background: transparent !important; }
#social_block ul li a {
  background-color: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 7px !important;
  color: rgba(255,255,255,.6) !important;
  transition: all .12s !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
}
#social_block ul li a:hover {
  background-color: rgba(255,255,255,.15) !important;
  color: #ffffff !important;
}
#leo-footer-center,
#leo-footer-center .container,
#leo-footer-center .inner { background-color: #1e3a5f !important; }
#leo-footer-center .footer-block,
#leo-footer-center .block,
#leo-footer-center .widget-html { background: transparent !important; }
footer#footer .title_block,
#leo-footer-center .title_block,
footer#footer h4.title_block {
  color: rgba(255,255,255,.4) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}
footer#footer h2 {
  color: rgba(255,255,255,.85) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}
footer#footer a,
#leo-footer-center a {
  color: rgba(255,255,255,.5) !important;
  text-decoration: none !important;
  transition: color .12s !important;
  font-size: 12.5px !important;
}
footer#footer a:hover,
#leo-footer-center a:hover { color: rgba(255,255,255,.85) !important; }
footer#footer .list-group,
footer#footer ul.toggle-footer { background: transparent !important; }
footer#footer .list-group .item,
footer#footer ul.toggle-footer li {
  padding: 3px 0 !important;
  border: none !important;
  background: transparent !important;
}
footer#footer .box-services h4 {
  color: rgba(255,255,255,.75) !important;
  font-size: 12.5px !important;
}
footer#footer .box-services small { color: rgba(255,255,255,.35) !important; }
#block_contact_infos .toggle-footer li {
  color: rgba(255,255,255,.5) !important;
  font-size: 12px !important;
}
#block_contact_infos .toggle-footer li .fa {
  color: #60a5fa !important;
  margin-right: 6px !important;
}
#block_contact_infos p {
  color: rgba(255,255,255,.5) !important;
  font-size: 12px !important;
}
#footernav,
#footernav .container,
#footernav .inner {
  background-color: #0f1e35 !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}
#footernav #powered p {
  color: rgba(255,255,255,.2) !important;
  font-size: 11px !important;
}

/* BREADCRUMB */
#breadcrumb {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e8edf5 !important;
}
#breadcrumb .container { background: transparent !important; }
#breadcrumb a {
  color: #2563eb !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
#breadcrumb .navigation-pipe {
  color: #94a3b8 !important;
  margin: 0 4px !important;
}
#breadcrumb .navigation_page { color: #64748b !important; }

/* FOOTER FIX */
html body #leo-footer-top .custhtmlcarosel .carousel-inner:empty,
html body .custhtmlcarosel:empty { display: none !important; }
html body .leo-twitter,
html body .widget-twitter .block_content {
  background: transparent !important;
  border: none !important;
}
html body footer#footer .block,
html body footer#footer .block_content,
html body footer#footer .widget-html,
html body footer#footer .toggle-footer,
html body #leo-footer-top .block,
html body #leo-footer-top .block_content,
html body #leo-footer-center .block,
html body #leo-footer-center .block_content,
html body #leo-footer-center .widget-html,
html body #leo-footer-center .footer-block {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html body footer#footer p,
html body footer#footer li,
html body footer#footer span,
html body footer#footer div,
html body #leo-footer-center p,
html body #leo-footer-center li,
html body #leo-footer-center span {
  color: rgba(255,255,255,.5) !important;
  background: transparent !important;
}
html body footer#footer h4,
html body footer#footer h3,
html body #leo-footer-center h4,
html body #leo-footer-center h3 {
  color: rgba(255,255,255,.75) !important;
  background: transparent !important;
}
html body #leo-footer-center h2 {
  color: rgba(255,255,255,.85) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}
html body footer#footer .fa,
html body #leo-footer-center .fa { color: #60a5fa !important; }
html body footer#footer .box-services,
html body #leo-footer-center .box-services {
  background: transparent !important;
  border: none !important;
}
html body footer#footer .widget:empty,
html body footer#footer .block_content:empty,
html body #leo-footer-top .widget:empty { display: none !important; }
html body #leo-footer-top .inner,
html body #leo-footer-top .container,
html body #leo-footer-top .row { background: transparent !important; }
html body #leo-footer-top {
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 16px 0 !important;
}
html body #leo-footer-center { padding: 24px 0 !important; }
html body footer#footer img {
  opacity: .7 !important;
  filter: brightness(0) invert(1) !important;
}
html body #footernav,
html body #footernav .container,
html body #footernav .inner,
html body #footernav div {
  background-color: #0f1e35 !important;
  color: rgba(255,255,255,.2) !important;
}
html body #footernav p,
html body #footernav #powered p {
  color: rgba(255,255,255,.2) !important;
  font-size: 11px !important;
}

/* RESPONSIVE */
@media (max-width: 767px) {
  #topbar .nav .container .inner { padding: 6px 14px !important; }
  #header-main .container > .inner { padding: 10px 14px !important; }
  #header_logo { text-align: center !important; }
  #header_logo img { max-height: 46px !important; width: auto !important; }
  #search_block_top { padding: 7px 14px !important; width: 100% !important; }
  #search_query_top { font-size: 13px !important; }
  footer#footer .title_block { font-size: 9.5px !important; }
  footer#footer h2 { font-size: 16px !important; }
  #leo-footer-center .col-xs-6 { margin-bottom: 16px !important; }
}


/* ================================================================
   SIDEBAR MI CUENTA - Menu lateral izquierdo premium
   Aplica en: mi-cuenta, estado-cuenta, pedidos, rmas, etc.
   ================================================================ */

/* Forzar especificidad maxima */
html body #left_column .block,
html body #left_column .block-top-menu,
html body #left_column div.block {
  background: #ffffff !important;
  border: 1px solid #e8edf5 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}

html body #left_column .block .title_block,
html body #left_column .block h4.title_block,
html body #left_column h4 {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

html body #left_column .block .block_content {
  padding: 8px !important;
  background: #ffffff !important;
  border: none !important;
}

html body #left_column .myaccount-link-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

html body #left_column .myaccount-link-list li {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 3px !important;
  list-style: none !important;
}

html body #left_column .myaccount-link-list li a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-decoration: none !important;
  transition: all .12s !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

html body #left_column .myaccount-link-list li a:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
}

html body #left_column .myaccount-link-list li a i,
html body #left_column .myaccount-link-list li a .fa,
html body #left_column .myaccount-link-list li a [class*="icon-"] {
  color: #2563eb !important;
  font-size: 13px !important;
  width: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

html body #left_column .btn.btn-default,
html body #left_column a.btn {
  background: #fff5f5 !important;
  border: 1.5px solid #fee2e2 !important;
  border-radius: 8px !important;
  color: #dc2626 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 9px 14px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  margin: 8px 0 0 !important;
  transition: all .12s !important;
  text-decoration: none !important;
}

html body #left_column .btn.btn-default:hover {
  background: #fef2f2 !important;
}

/* Dark mode sidebar */
.darkmode--activated #left_column .block {
  background: #1e293b !important;
  border-color: rgba(255,255,255,.08) !important;
}
.darkmode--activated #left_column .block .block_content {
  background: #1e293b !important;
}
.darkmode--activated #left_column .myaccount-link-list li a {
  color: #cbd5e1 !important;
}
.darkmode--activated #left_column .myaccount-link-list li a:hover {
  background: rgba(37,99,235,.15) !important;
  color: #93c5fd !important;
  border-color: rgba(37,99,235,.3) !important;
}

/* ================================================================
   TABLA RMA Y OTRAS TABLAS CON JSGRID - Colores y legibilidad
   ================================================================ */

/* Chips de estado en cualquier tabla del sitio */
html body .jsgrid-cell .label,
html body .jsgrid-cell span.label,
html body table .label {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  border: 1px solid !important;
  white-space: nowrap !important;
}

/* Verde - Entregado */
html body .jsgrid-cell .label-success,
html body table .label-success {
  background: #f0fdf4 !important;
  color: #059669 !important;
  border-color: #bbf7d0 !important;
}

/* Azul - En proceso / Diagnostico */
html body .jsgrid-cell .label-info,
html body table .label-info,
html body .jsgrid-cell .label-primary,
html body table .label-primary {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
}

/* Amarillo - Pendiente */
html body .jsgrid-cell .label-warning,
html body table .label-warning {
  background: #fffbeb !important;
  color: #d97706 !important;
  border-color: #fde68a !important;
}

/* Rojo - Cancelado */
html body .jsgrid-cell .label-danger,
html body table .label-danger {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

/* Gris - Default */
html body .jsgrid-cell .label-default,
html body table .label-default {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}

/* Botones dentro de celdas jsgrid */
html body .jsgrid-cell .btn,
html body .jsgrid-cell a.btn,
html body .jsgrid-cell button {
  padding: 4px 12px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border: 1.5px solid !important;
  cursor: pointer !important;
  transition: all .12s !important;
  text-decoration: none !important;
  display: inline-block !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
  margin: 2px !important;
}

html body .jsgrid-cell .btn:hover,
html body .jsgrid-cell a.btn:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}

/* Columnas con texto largo - permitir wrap */
html body .jsgrid-cell {
  white-space: normal !important;
  word-break: break-word !important;
  vertical-align: middle !important;
}

/* Paginacion premium global */
html body .jsgrid-pager-container {
  padding: 12px 14px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e8edf5 !important;
}

/* Bloque contenedor */
#left_column .block {
  background: #ffffff !important;
  border: 1px solid #e8edf5 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Titulo del bloque "Mi cuenta" */
#left_column .block .title_block,
#left_column .block h4.title_block {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
}

/* Lista de links */
#left_column .myaccount-link-list {
  list-style: none !important;
  padding: 8px !important;
  margin: 0 !important;
  background: #ffffff !important;
}

#left_column .myaccount-link-list li {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 3px !important;
  list-style: none !important;
}

#left_column .myaccount-link-list li:last-child {
  margin-bottom: 0 !important;
}

/* Links individuales */
#left_column .myaccount-link-list li a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-decoration: none !important;
  transition: all .12s !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

#left_column .myaccount-link-list li a:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
}

/* Iconos dentro de los links */
#left_column .myaccount-link-list li a i,
#left_column .myaccount-link-list li a .fa,
#left_column .myaccount-link-list li a [class*="icon-"] {
  color: #2563eb !important;
  font-size: 13px !important;
  width: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* Boton cerrar sesion */
#left_column .btn.btn-default,
#left_column a.btn.btn-default {
  background: #fff5f5 !important;
  border: 1.5px solid #fee2e2 !important;
  border-radius: 8px !important;
  color: #dc2626 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 9px 14px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  margin: 8px 0 8px !important;
  transition: all .12s !important;
}

#left_column .btn.btn-default:hover,
#left_column a.btn.btn-default:hover {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
}

/* Padding inferior del bloque */
#left_column .block .block_content {
  padding: 8px !important;
  background: #ffffff !important;
}

/* Dark mode */
.darkmode--activated #left_column .block {
  background: #1e293b !important;
  border-color: rgba(255,255,255,.08) !important;
}
.darkmode--activated #left_column .myaccount-link-list {
  background: #1e293b !important;
}
.darkmode--activated #left_column .myaccount-link-list li a {
  color: #cbd5e1 !important;
}
.darkmode--activated #left_column .myaccount-link-list li a:hover {
  background: rgba(37,99,235,.15) !important;
  color: #93c5fd !important;
  border-color: rgba(37,99,235,.3) !important;
}
.darkmode--activated #left_column .block .block_content {
  background: #1e293b !important;
}

/* ── FIX: línea blanca después del buscador ── */
section.header-container,
header#header section.header-container {
  border: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#header-main {
  border-bottom: 1px solid #e5e9ef !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Quitar cualquier fondo blanco que sobresalga del contenedor */
header#header {
  background: transparent !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}