nav.navbar a.menu-btn:hover {
    background: #2563EB;
}

.pos-page .container-fluid {
	padding: 0 15px;
}

.side-navbar {
	background-color: #fafbfe;
    position: fixed;
    top: 63px;
    left: 0;
    width: 200px;
    height: 90%;
    opacity: 1;
    width: 230px;
    text-align: left;
    transition: all 0.1s linear;
    z-index: 999;
    overflow-y: auto;
}

.pos-page .side-navbar {
	top: 0;
}

.side-navbar li a:focus,
.side-navbar li a:hover,
.side-navbar li.active>a,
.side-navbar li a[aria-expanded="true"] {
    background: #f8f8f8;
	color: #2563EB;
    text-decoration: none;
}

.side-navbar .sidenav-header {
    background: #2563EB;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
    padding: 0;
}

.dashboard-counts .count-title i {
    font-size: 2em;
    color: #2563EB;
    width: 60px;
}

.statistics .user-activity .progress .progress-bar.bg-primary {
    background: #2563EB !important;
}

.statistics .user-activity .page-statistics strong {
    display: block;
    text-transform: uppercase;
    color: #2563EB;
    font-size: 2em;
}

.gmpc {
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    color: #2563EB !important;
    border-right: 1px solid #eee;
}

input.input-material:focus {
    border-color: #2563EB;
    outline: none;
}

input.input-material~label.active {
    font-size: 0.8em;
    top: -10px;
    color: #2563EB;
}

input.form-control-custom:checked+label::before {
    background: #2563EB !important;
}

.login-page .logo span,
.register-page .logo span {
    color: #2563EB;
}

.login-page a.forgot-pass,
.login-page a.signup,
.register-page a.forgot-pass,
.register-page a.signup {
    font-size: 0.8em;
    color: #2563EB;
}

.btn-primary {
    color: color-yiq(#2563EB);
    background-color: #2563EB;
    border-color: #2563EB;
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: #2563EB;
    border-color: #2563EB;
}

.btn-outline-primary {
    color: #2563EB;
    background-color: transparent;
    background-image: none;
    border-color: #2563EB;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #2563EB;
    border-color: #2563EB;
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #2563EB;
    background-color: transparent;
}

.btn-outline-primary:not([disabled]):not(.disabled):active,
.btn-outline-primary:not([disabled]):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #2563EB;
    border-color: #2563EB;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(51, 179, 90, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(51, 179, 90, 0.5);
}

a {
    color: #2563EB;
    text-decoration: none;
}

.blockquote {
    padding: 0.5rem 1rem;
    margin-bottom: 2rem;
    font-size: 1.25rem;
    border-left: 5px solid #2563EB;
}

.text-primary {
    color: #2563EB !important;
}

.page-item.active .page-link {
    color: #fff;
    background-color: #2563EB;
    border-color: #2563EB;
}

.page-link {
    padding: 0.5rem 0.75rem;
    color: #2563EB;
    background-color: #fff;
    border: 1px solid #ddd;
    font-size: 13px;
    line-height: 22px !important
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    background-color: #2563EB;
}

.bg-primary {
    background-color: #2563EB !important;
}

.border-primary {
    border-color: #2563EB !important;
}

.text-primary {
    color: #2563EB !important;
}

.badge-primary {
    color: color-yiq(#2563EB);
    background-color: #2563EB;
}

.badge-primary[href]:focus,
.badge-primary[href]:hover {
    color: color-yiq(#2563EB);
    text-decoration: none;
    background-color: #288b46;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: #2563EB;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #2563EB;
}

.italic {
	font-style: italic;
}

.modal{
	overflow: scroll;
}

.dataTable {
	margin-top: 30px;
}

.table thead {
	background-color: #FFF;
}

.details-header{
	margin-left: 300px !important;
	margin-top: -5px;
	font-size: 21px !important;
	color: #2563EB;
	position: relative;
}

.daterangepicker{
    z-index: 9999;
}

.details-note{
	margin-top: -24px;
    padding-left: 370px;
    font-size: 13px;
    font-style: italic;
}

.white-text {
	color: #FFF !important
}

.sendmail-form {
	display: inline-block;
}

.btn-pos {
	background-color: #2563EB;
	border: 2px solid transparent;
	border-radius: 5px;
	color: #FFF;
	line-height: 30px !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
	text-decoration: none !important;
}

.btn-pos i,
.btn-pos span {
	color: #FFF !important;
}

.btn-pos:hover {
	background-color: transparent;
	border: 2px solid #2563EB;
}

.btn-pos:hover i,
.btn-pos:hover span {
	color: #2563EB !important;
}

#loader {
  position: fixed;
  left: 53%;
  top: 50%;
  z-index: 1;
  width: 50px;
  height: 50px;
  margin: -75px 0 0 -75px;
  border: 2px solid #d9d9db;
  border-radius: 50%;
  border-top: 2px solid #2563EB;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

.colored-box {
	background-color: #FFF;
	box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
	margin-bottom: 25px;
	padding: 15px;
	color: #333;
	min-height: 250px;
	overflow: hidden;
	position: relative;
}

.colored-box h3 {
	color: #2563EB;
}

.colored-box hr {
	background-color: rgba(255,255,255,0.5)
}

.colored-box i {
	color: #adad85;
	font-size: 170px;
	opacity: 0.07;
	position: absolute;
	right: -10px;
	top: 25%;
}

.colored-box.green-bg {
	background-color: #00cc44;
	min-height: 110px !important;
}

.purple-bg {
	background-color: #8e44ad;
}

.orange-bg {
	background-color: #ff8952;
	min-height: 110px !important;
}

.red-bg {
	background-color: #ff3030;
}

.blue-bg {
	background-color: #014463;
}

.yellow-bg {
	background-color: #f78b38;
}

.light-blue-bg {
	background-color: #138496;
}

a:focus,button:focus,.btn:focus {
	outline: none;
	box-shadow: none;
}

.btn-default.btn-primary:hover {
	color: #FFF;
}

.btn-info:focus,.btn-primary:focus {
	color: #FFF;
}

.btn.btn-default,
.btn.btn-default:focus {
	background-color: #FFF;
	color: #2563EB;
}

.btn.btn-default:focus {
	background-color: #FFF;
	border: 1px solid #ddd;
	color: #666;
	box-shadow: none;
}

.btn-primary.active {
	background-color: transparent !important;
	border: 2px solid #2563EB !important;
	box-shadow: none !important;
	color: #2563EB !important;
}

.count-title {
	background: #FFF;
	border-radius: 5px;
	box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
	padding: 20px 10px;
}

.dashboard-counts {
	padding: 10px 0; 
}

.filter-toggle {
	float: right;
	list-style: none;
	margin-top: 15px;
}

.filter-toggle .date-btn {
	padding: 0.3rem 0.75rem;
	border-radius: 15px; 
}

.filter-toggle .date-btn.active {
	box-shadow: none !important
}

.count-title .count-number {
	font-size: 1.5em;
	margin-top: 17px;
}

.product-link, .product-img, .sale-link, .delivery-link, .return-link, .purchase-link, .transfer-link, .quotation-link, .category-img, .brand-img, .theme-option {
	cursor: pointer;
}

.bootstrap-select.form-control {
	border: 1px solid;
}

.bootstrap-select .btn-link {
	color: #2563EB;
}

.form-control, .input-group-text, .bootstrap-select.form-control {
    background-color: #fdfdff;
    border-color: #e4e6fc;
}

.mce-panel {
	border: 1px solid #e4e6fc;
	border-radius: 5px;
}

.daterangepicker .custom-range-buttons button.apply-btn,
.daterangepicker .custom-range-buttons button.apply-btn:hover {
    background: #2563EB;
}

div.ui-keyboard {
	position: fixed;
	z-index: 2000;
	top: auto !important;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 180px;
	background-color:rgba(255,255,255,0.8);
}
.ui-keyboard-button {
	min-width: 3em;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
	background: #2563EB;
	width: 300px;
	padding: 15px;
	position: absolute !important;
	z-index: 999;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li.ui-menu-item {
	color: #FFF;
	cursor: pointer;
	font-size: 14px;
	list-style: none;
	padding: 5px 10px;
	padding-left: 0;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li.ui-menu-item:hover {
	opacity: 0.7;
}

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

p.top-border {
	border-top: 1px solid #000;
	width: 50%
}

th span.number-in-words{
	text-transform: uppercase;
}

@media print {
    .hide-element {
        display:none
    }
}

/*--------Written by Tarik -----------*/

.btn-primary {
    background-color: #2563EB;
    border-color: #2563EB;
}

.btn-primary:hover {
    background-color: #6244a6;
    border-color: #6244a6;
}

a:hover {
	text-decoration: none;
}

.form-control:focus {
	border: 1px solid #2563EB;
	box-shadow: none;
}

.dataTables_wrapper label .bootstrap-select {
	max-width: 70px
}

.table:not(.permission-table) thead th {
	border-bottom: none;
    border-top: none;
}

.table td {
	border-bottom: 1px solid #f5f5f5;
}

.table:not(.permission-table) tr:last-child td {
	border-bottom: none;
}

table.dataTable {
	background-color: #FFF;
    border-collapse: collapse !important;
    border-radius: 5px;
	box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
}

table.dataTable.no-shadow {
	box-shadow: none;
}

.table thead th {
	border-bottom: 1px solid #e4e6fc
}

section {
	padding: 30px 0;
}

.side-navbar .sidenav-header {
    background: #2563EB;
    margin-bottom: 0;
    padding: 0;
}

.side-navbar .brand-big {
    line-height: 60px;
}

.side-navbar .brand-big i {
    font-size: 26px;
    vertical-align: middle;
}

.side-navbar li a {
    padding: 5px 10px;
}

.side-navbar li a i {
    vertical-align: middle;
}

.side-navbar li ul.collapse a:hover {
    padding-left: 15px;
}

nav.navbar a.menu-btn {
    background: transparent;
    border: 1px solid #2563EB;
    border-radius: 5px;
    color: #2563EB;
}

nav.navbar a.menu-btn:hover {
    background: #2563EB;
    border: 1px solid #2563EB;
    color: #FFF;
}

.navbar-brand {
	padding: 0;
}

.brand-text h3 {
	color: #2563EB;
	font-weight: 300;
}

.brand-text h3 span {
	font-weight: 500;
}

nav.navbar {
    background: #FFF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    line-height: 60px;
    padding: 0;
}

nav.navbar .nav-item a i {
    color: #2563EB;
    font-size: 14px;
    margin-right: 5px;
    vertical-align: middle;
}

nav.navbar .nav-item .edit-options a i {
    font-size: 16px;
    margin-right: 5px;
    vertical-align: middle;
    width: 20px;
}

nav.navbar .notifications {
    width: 280px;
}

nav.navbar .nav-item {
	margin-left: 15px;
}

nav.navbar .nav-item li.notifications a i{
	color: #fff;
}

.nav-tabs .nav-item .nav-link.active {
	border-color: transparent;
    border-bottom: 2px solid #2563EB;
}

.dropdown-item {
    padding: 0 0.5rem;
    color: #7d7d7d;
}

.dropdown-item.selected{
	background-color: #f8f8f8;
	color: #2563EB;
}

.dataTables_wrapper {
	margin-top: 30px;
}

.dataTables_filter,
.dataTables_length,
.dt-buttons {
	float: left;
	vertical-align: middle;
	width: 30%;
} 

.dt-buttons {
	display: inline-block;
	text-align: right;
	width: 40%;
}

.dt-buttons button {
	padding: 0.25rem 0.75rem;
}

.dt-buttons button span {
	color: #FFF;
}

.dt-button-collection.dropdown-menu {
	background: #2563EB;
	padding: 10px 15px;
}

.dt-button-collection.dropdown-menu a {
	background: transparent;
	font-size: 14px;
	line-height: 30px;
}

.buttons-pdf {
	background: #ff7588;
	border: none;
}

.buttons-csv {
	background: #ffc107;
	border: none;
}

.buttons-print {
	background: #2196f3;
	border: none;
}

.buttons-delete {
	background: #eb543a;
	border: none;
}

.buttons-collection {
	background: #2563EB;
	border: none;
}

.dataTables_info,
.dataTables_paginate {
	display: table-cell;
	width: 50%;
}

.dataTables_paginate {
	text-align: right;
}

.dropdown-menu.edit-options li a,
.dropdown-menu.edit-options li .btn-link {
	color: #2563EB;
	display: block;
	text-align: left;
	text-decoration: none;
	width: 100%;
}

.dropdown-menu.edit-options li a:hover,
.dropdown-menu.edit-options li .btn-link:hover {
	background-color: #f8f8f8;
	color: #2563EB
}

.table.totals tr td {
	vertical-align: middle;
}

.table.order-list tr td .btn-link,
.table.totals tr td .btn-link {
	white-space: normal;      /* permite salto de línea */
    word-break: break-word;   /* por si el nombre es muy largo */
    text-align: left;
    padding-left: 0;
    padding-right: 0;
	color: #2563EB;
}

#product-table_wrapper.dataTables_wrapper {
	margin-top: 0;
	padding: 0;
}

table#product-table.dataTable {
	border-collapse: separate !important;
	margin: 15px 0 !important;
}

#product-table_paginate {
	float: right;
}

#product-table tr:last-child td:hover{
	border-bottom: 1px solid #2563EB;
}

#product-table_paginate .page-link{
	line-height: 1;
}

#product-table td{
	border: none;
	border-right: 1px solid #e4e6fc;
	border-bottom: 1px solid #e4e6fc;
}

.table-bordered td, .table-bordered th {
	border-color: #e4e6fc
}

#product-table tr td:first-child{
	border-left: 1px solid #e4e6fc;
}

#product-table tr:first-child td{
	border-top: 1px solid #e4e6fc;
}

#product-table td:hover{
	border: 1px solid #2563EB;
	color: #2563EB;
}

#product-table tr:first-child td:hover{
	border-top: 1px solid #2563EB;
}
#product-table tr td:first-child:hover{
	border-left: 1px solid #2563EB;
}

#product-table td p {
	margin: 15px 0 0;
}

#product-table td:hover p {
	color: #2563EB;
}
.product-img {
	margin-bottom: 0;
	padding: 15px 7px 0;
	text-align: center;
	text-transform: capitalize;
	width: 20%;
}

.product-img img, .brand-img img, .category-img img{
	height: 70px;
	max-width: 100%;
	width: auto;
}

.category-img, .brand-img {
	text-transform: capitalize;
}

.card-header {
	border-bottom: none;
}

section.pos-section{
	padding: 5px 0;
}

.pos-page .table-fixed {
	margin-bottom: 0;
}

.transaction-list {
	height: 45vh;
	overflow-y: auto;
	width: 100%;
}

.btn-default.minus,
.btn-default.minus:focus,
.btn-default.plus,
.btn-default.plus:focus {
	background-color: #d6deff;
	border: none;
}

.form-control.qty {
	border: none;
	font-size: 0.9em;
}

@media all and (min-width:768px) {
	.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
	 	display: block;
	}

	.table-fixed tr {
		clear: both;
	}

	.table-fixed tbody td, .table-fixed thead > tr> th {
		float: left;
		border-bottom-width: 0;
	}
}

.btn-custom {
	display: block;
	font-size: 16px;
	letter-spacing: 0.075em;
	line-height: 1.7;
	width: 100%;
	color: #FFF;
	background: #2563EB;
}

.btn-custom.lg {
	font-size: 18px;
	font-weight: 700;
}

.btn-custom.sm {
	line-height: 18px;
	font-size: 15px;
	margin-bottom: 5px
}
.minus, .plus {
	padding: 0.35rem 0.75rem;
}
.numkey.qty {
	padding: 0 .75rem;
	max-width: 50px;
	text-align: center;
}
.pos-text {
	line-height: 1.8;
}

.product-title{
	text-transform: capitalize;
}

.dataTables_info,
.dataTables_paginate {
    display: table-cell;
    width: 50%;
    float: left;
    padding-top: 10px;
}

.pos-page section header {
	padding: 0 0 15px;
}

.pos .bootstrap-select button{
	padding-right: 21px !important
}

.pos .bootstrap-select.form-control:not([class*="col-"]) {
    width: 100px;
}

#myTable .input-group{
	max-width: 150px;
}

.filter-window{
	width: 100%;
	height: 100%;
	background-color: #fff;
	overflow-y: auto;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;
	display: none;
}

.datepicker.datepicker-dropdown  {
	padding: 15px;
}

@media all and (min-width:576px){
	.modal-dialog {
		max-width: 800px;
	}
}

.checkbox input[type="checkbox"] {
    display: none;
}

.checkbox label {
    cursor: pointer;
    vertical-align: top
}

.checkbox label:before {
}

.checkbox label::after {
    color: #2563EB;
}

table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
    background-color: #f5f5f5;
}

table.dataTable tbody > tr.selected td, table.dataTable tbody > tr > .selected td {
    color: #666;
}

.report-permissions span {
	display: inline-block;
	min-width: 200px;
}

.logo-container{
    width: 100px;
}
.logo-container > img{
    width: 100%;
}

.main-container {
    margin-top: 65px;
}

.form-container{
    max-width: 600px;
    margin: 10px auto;
}
.form-container h1{
    font-weight: 300;
    font-size: 2.5rem;
}

.dropzone {
    border: 1px solid #e4e6fc;
    border-radius: 5px;
    background: white;
}

#imageUpload{
    margin-bottom: 0;
    min-height: 80px;
}

div.has-error > input {
    border: 1px solid #dc3545;
}

div.has-error> .form-text {
    color: #dc3545;
}

#successModal .fa-thumbs-up {
    font-size: 7.5rem;
    color: #2ebf2e;
}

#successModal .fa-thumbs-down {
    font-size: 7.5rem;
    color: #e13535;
}

#success-text{
    margin-top: 20px;
    font-size: 1.2rem;
}

.dripicons-question {
	color: #2563EB
}

.modal {
	background-color: rgba(255,255,255,0.4);
}

.modal-content {
	border: none;
}

.totals .col-sm-4 {
	border-bottom: 1px solid #f5f5f5;
	font-size: 13px;
	line-height: 2;
}

.totals .col-sm-4:nth-child(4),
.totals .col-sm-4:nth-child(5),
.totals .col-sm-4:nth-child(6) {
	border-bottom: none;
}

.payment-amount {
	background-color: #d6deff;
	margin-top: 10px;
	text-align: center;
}

.payment-amount h2 {
	color: #2563EB;
	font-size: 1.5rem;
	line-height: 2;
	margin-bottom: 0;
}

.totals .totals-title {
	color: #7d7d7d;
	display: inline-block;
	width: 100px;
}

.payment-options {
	background-color: #FFF;
	bottom: 0;
	left: 0;
	padding: 0 10px;
	position: fixed;
	width: 100%;
	z-index: 999;
}

.payment-options .column-5 {
	min-width: 10%;
	float: left;
	margin: 10px 0;
	padding: 0 5px;
}

.pos-page .order-list .btn {
	padding: 2px 5px;
}

table.dataTable tbody td.dt-checkboxes-cell {
	vertical-align: middle;
}

.daterangepicker {
    box-shadow: 0 0 35px rgba(0,0,0,.07);
    padding: 10px;
}

.pos-page [class*="col-"] {
	padding: 0 10px;
}

.pos-page #myTable [class*="col-"] {
	padding: .75rem;
}

.table-container {
	height: 75vh;
	overflow-y: auto;
}


/*----------------------------------------------------------------------------------------------------------------------------------------------*/

/* =========================================================
   🌙 DARK THEME OVERRIDES (SOLO COLORES) - FINAL LIMPIO
   Incluye FIXES: submenu sidebar, datatables, dropdowns,
   paginación, POS, modales, cabecera blanca.
   ========================================================= */

:root{
  --dark-bg: #0b1220;
  --dark-nav:#0f172a;
  --dark-sidebar:#111827;
  --dark-card:#1e293b;
  --dark-card2:#172033;
  --dark-border:#334155;
  --dark-text:#e5e7eb;
  --dark-muted:#94a3b8;
  --accent:#7c3aed;
  --accent2:#6366f1;
}

/* ===== Fondo general ===== */
body, .page, #content, section{
  background: linear-gradient(180deg,var(--dark-bg),#020617) !important;
  color: var(--dark-text) !important;
}

/* ===== NAVBAR (y evita cabecera blanca) ===== */
nav.navbar{
  background: var(--dark-nav) !important;
  border-bottom: 1px solid var(--dark-border) !important;
}
nav.navbar a,
nav.navbar i,
nav.navbar .nav-item a,
nav.navbar .nav-item a i{
  color: var(--dark-text) !important;
}

/* botón hamburguesa */
nav.navbar a.menu-btn{
  background: transparent !important;
  border: 1px solid var(--accent2) !important;
  color: #c4b5fd !important;
  border-radius: 8px !important;
}
nav.navbar a.menu-btn:hover{
  background: var(--accent2) !important;
  color: #fff !important;
}

/* Dropdown idioma en navbar */
nav.navbar .dropdown-menu{
  background:#0b1220 !important;
  border:1px solid var(--dark-border) !important;
}
nav.navbar .dropdown-menu a{
  color: var(--dark-text) !important;
}
nav.navbar .dropdown-menu a:hover{
  background: var(--dark-card) !important;
  color: #c4b5fd !important;
}

/* ===== SIDEBAR ===== */
.side-navbar{
  background: var(--dark-sidebar) !important;
  border-right: 1px solid #1f2937 !important;
}
.side-navbar .sidenav-header{
  background:#020617 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* items principales */
.side-navbar li a{
  color:#cbd5e1 !important;
}
.side-navbar li a:hover,
.side-navbar li.active>a,
.side-navbar li a[aria-expanded="true"]{
  background: var(--dark-card) !important;
  color:#c4b5fd !important;
}

/* ===== FIX SUBMENU (caja blanca) ===== */
.side-navbar li ul.collapse,
.side-navbar li ul.collapse.show,
.side-navbar li ul.collapse.collapsing{
  background: #0b1220 !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  margin: 6px 10px 10px !important;
  box-shadow: none !important;
}
.side-navbar li ul.collapse a{
  color: #cbd5e1 !important;
  background: transparent !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  display: block !important;
}
.side-navbar li ul.collapse a:hover{
  background: var(--dark-card) !important;
  color:#c4b5fd !important;
}
.side-navbar li ul.collapse a.active,
.side-navbar li ul.collapse li.active > a{
  background: linear-gradient(90deg,var(--accent2),var(--accent)) !important;
  color:#fff !important;
}
.side-navbar li ul.collapse a i{ color: inherit !important; }

/* ===== CARDS / CONTENEDORES ===== */
.count-title,
.colored-box,
.card, .card-body, .card-header,
.panel, .white-box, .box, .widget,
.content-wrapper, .main-container{
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
  box-shadow: none !important;
}

/* ===== Cabeceras que te salían blancas (modal/header/card) ===== */
.card-header,
.modal-header,
section header{
  background:#020617 !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* ===== LINKS / TEXTOS “PRIMARY” ===== */
a,
.text-primary,
.border-primary,
.badge-primary,
.bootstrap-select .btn-link,
.dripicons-question,
.details-header,
.brand-text h3{
  color:#c4b5fd !important;
}

/* bg-primary */
.bg-primary{
  background: linear-gradient(90deg,var(--accent2),var(--accent)) !important;
}

/* ===== BOTONES ===== */
.btn-primary,
.buttons-collection{
  background: linear-gradient(90deg,var(--accent2),var(--accent)) !important;
  border: none !important;
  color:#fff !important;
}
.btn-outline-primary{
  color:#c4b5fd !important;
  border-color: var(--accent) !important;
}
.btn-outline-primary:hover{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#fff !important;
}

/* Botón Acción / dropdown acción */
.btn.dropdown-toggle,
table .btn.dropdown-toggle,
table .btn.btn-default.dropdown-toggle{
  background:#020617 !important;
  border:1px solid var(--accent2) !important;
  color:#c4b5fd !important;
}
.btn.dropdown-toggle:hover{
  background: var(--accent2) !important;
  color:#fff !important;
}

/* ===== INPUTS / SELECTS ===== */
.form-control,
.input-group-text,
.bootstrap-select.form-control,
.dropzone,
.dataTables_length select,
.dataTables_filter input{
  background:#020617 !important;
  border:1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
  border-radius: 8px !important;
}
.form-control:focus,
.dataTables_filter input:focus,
input.input-material:focus{
  border-color: var(--accent2) !important;
  box-shadow:none !important;
}
::placeholder{ color: var(--dark-muted) !important; }

/* Bootstrap-select dropdown */
.bootstrap-select .dropdown-menu.inner,
.bootstrap-select .dropdown-menu{
  background:#0b1220 !important;
  border:1px solid var(--dark-border) !important;
}
.bootstrap-select .dropdown-menu li a{
  color: var(--dark-text) !important;
}
.bootstrap-select .dropdown-menu li a:hover{
  background: var(--dark-card) !important;
  color:#c4b5fd !important;
}

/* ===== DROPDOWNS GENERALES ===== */
.dropdown-menu,
.dt-button-collection.dropdown-menu{
  background:#0b1220 !important;
  border:1px solid var(--dark-border) !important;
}
.dropdown-item{
  color: var(--dark-text) !important;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: var(--dark-card) !important;
  color:#c4b5fd !important;
}

/* ===== DATATABLES ===== */
.dataTables_wrapper,
.dataTables_length,
.dataTables_filter,
.dataTables_info{
  color: var(--dark-text) !important;
}
table.dataTable{
  background: var(--dark-card) !important;
  color: var(--dark-text) !important;
  border:1px solid #1f2937 !important;
  box-shadow:none !important;
}
.table, table{ color: var(--dark-text) !important; }
.table thead, .table thead th{
  background:#020617 !important;
  color: var(--dark-text) !important;
  border-color:#1f2937 !important;
}
.table td, .table th,
.table-bordered td, .table-bordered th{
  border-color:#1f2937 !important;
}

/* Checkbox tablas */
table.dataTable input[type="checkbox"],
.table input[type="checkbox"]{
  accent-color: var(--accent2);
}

/* ===== PAGINACIÓN ===== */
.pagination .page-link{
  background:#020617 !important;
  border:1px solid var(--dark-border) !important;
  color:#c4b5fd !important;
}
.pagination .page-item.active .page-link{
  background: linear-gradient(90deg,var(--accent2),var(--accent)) !important;
  border-color: transparent !important;
  color:#fff !important;
}
.pagination .page-link:hover{
  background: var(--dark-card) !important;
}

/* ===== POS (tabla y botones +/-) ===== */
.pos-page .table thead,
.pos-page .table thead th{
  background:#020617 !important;
  color: var(--dark-text) !important;
}
.pos-page .table tbody td,
.pos-page .table tbody tr{
  background: var(--dark-card) !important;
  color: var(--dark-text) !important;
}
.pos-page .btn-default.minus,
.pos-page .btn-default.plus,
.pos-page .form-control.qty{
  background:#0b1220 !important;
  border:1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}
.pos-page .btn-default.minus:hover,
.pos-page .btn-default.plus:hover{
  border-color: var(--accent2) !important;
}

/* Barra fija de pagos */
.payment-options{
  background: var(--dark-nav) !important;
  border-top: 1px solid var(--dark-border) !important;
}




/* ===== MODALES ===== */
.modal{
  background-color: rgba(0,0,0,0.55) !important;
}
.modal-content{
  background: var(--dark-nav) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}
.modal .table thead, .modal .table thead th{
  background:#020617 !important;
}
.modal .table td{
  background: var(--dark-card) !important;
  border-color:#1f2937 !important;
}

/*MODAL AGREGADO*/

/* =========================================================
   ✅ FIX PRO: TABLAS DENTRO DE MODALES (DARK)
   Pegar AL FINAL del custom-dark.css
   ========================================================= */

.modal .table-responsive{
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  overflow: hidden !important;                /* recorta bordes */
  background: rgba(2,6,23,.35) !important;    /* fondo del bloque */
}

.modal-content .table{
  width: 100% !important;
  margin: 0 !important;
  color: var(--dark-text) !important;
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Header oscuro + línea inferior marcada */
.modal-content .table thead th{
  background: #020617 !important;
  color: var(--dark-text) !important;
  border-color: rgba(255,255,255,.12) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

/* Celdas: líneas suaves visibles */
.modal-content .table td,
.modal-content .table th{
  border-color: rgba(255,255,255,.10) !important;
}

/* Body: fondo uniforme y líneas */
.modal-content .table tbody td{
  background: rgba(30,41,59,.55) !important;  /* var(--dark-card) suavizado */
  border-top: 1px solid rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* Hover: suave */
.modal-content .table.table-hover tbody tr:hover td{
  background: rgba(255,255,255,.04) !important;
}

/* Si es table-bordered, que NO meta bordes claros */
.modal-content .table-bordered,
.modal-content .table-bordered td,
.modal-content .table-bordered th{
  border-color: rgba(255,255,255,.10) !important;
}

/* Si Bootstrap mete stripe */
.modal-content .table-striped tbody tr:nth-of-type(odd) td{
  background: rgba(30,41,59,.42) !important;
}

/* Títulos h5 en modal (Warehouse Quantity etc.) */
.modal-content h5{
  color: var(--dark-text) !important;
}





/*--------------------------------------------------------------------------------------------------------*/


/* ===== Loader ===== */
#loader{
  border-top: 2px solid var(--accent2) !important;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#020617; }
::-webkit-scrollbar-thumb{ background:#374151; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent2); }


/*ULTIMO AGREGADO-----------------------------------------------------------------------------------------------------------------------------*/

/* =========================================================
   PATCH FINAL (BOTONES + THEME SWITCHER + TABLAS SUAVES)
   Pegar AL FINAL del custom-dark.css
   ========================================================= */

/* ---------- 1) BOTONES estilo "outline dark + morado" (POS / IMPRIMIR) ---------- */
/* cubre: <a class="btn ...">, botones en header, y el imprimir */
nav.navbar a.btn,
.btn.btn-default,
.btn.btn-default:focus,
.btn.btn-default:hover,
button.btn.btn-default{
  background: transparent !important;
  border: 1px solid var(--accent2) !important;
  color: #c4b5fd !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* iconos dentro */
nav.navbar a.btn i,
.btn.btn-default i{
  color: inherit !important;
}

/* hover = relleno degradado */
nav.navbar a.btn:hover,
.btn.btn-default:hover{
  background: linear-gradient(90deg,var(--accent2),var(--accent)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* por si "POS" viene como .btn-pos, lo igualamos */
.btn-pos{
  background: transparent !important;
  border: 1px solid var(--accent2) !important;
  color: #c4b5fd !important;
  border-radius: 8px !important;
}
.btn-pos:hover{
  background: linear-gradient(90deg,var(--accent2),var(--accent)) !important;
  border-color: transparent !important;
  color:#fff !important;
}
.btn-pos i, .btn-pos span{ color: inherit !important; }

/* ---------- 2) THEME SWITCHER (caja blanca) ---------- */
.color-switcher{
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
  opacity: 1 !important;
}
.color-switcher h5,
.color-switcher .color-switcher-title{
   color: var(--dark-text) !important;
}

/* boton engranaje */
.color-switcher a.switcher-button{
  background: var(--nav) !important;
  border: 1px solid var(--border) !important;
  color: #c4b5fd !important;
  border-color: transparent !important;
  border-radius: 10px !important;
}
.color-switcher a.switcher-button:hover{
  background: linear-gradient(90deg,var(--accent2),var(--accent)) !important;
  color:#fff !important;
}

/* cuadritos de colores (swatches) más PRO */
.color-switcher .color-list a.color{
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25) !important;
  margin: 5px !important;
  display: inline-block !important;
}
.color-switcher .color-list a.color:hover{
  outline: 2px solid var(--accent2) !important;
  outline-offset: 2px !important;
}

/* ---------- 3) TABLAS: líneas de separación SUAVES (como tu imagen) ---------- */
/* filas */
.table td,
table.dataTable tbody td{
  border-bottom: 1px solid rgba(255,255,255,.06) !important; /* suave */
}

/* evita líneas muy fuertes por bootstrap */
.table-bordered td,
.table-bordered th{
  border-color: rgba(255,255,255,.08) !important;
}

/* header */
.table thead th,
table.dataTable thead th{
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* hover suave */
table.dataTable tbody tr:hover td,
.table tbody tr:hover td{
  background: rgba(255,255,255,.03) !important;
}

/* checkbox column (por si sale “caja” rara) */
table.dataTable tbody td.dt-checkboxes-cell,
table.dataTable thead th.dt-checkboxes-cell{
  background: transparent !important;
}

/* =========================================================
   FIX: Card POS redondeada + que el borde se vea
   NO rompe dropdowns/selectpicker
   Pegar AL FINAL del custom-dark.css
   ========================================================= */
   
   

/* 1) Redondeo real de la card */
.pos-page .card{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;   /* en dark se nota */
  background: var(--dark-card) !important;
  overflow: hidden !important; /* ✅ recorta SOLO dentro de la card (para que se vea el radio) */
}

/* 2) El body de la card debe acompañar el radio */
.pos-page .card .card-body{
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* 3) IMPORTANTE: si dentro hay contenedores con scroll, también deben respetar el radio */
.pos-page .transaction-list,
.pos-page .table-responsive.transaction-list{
  border-radius: 12px !important;
  overflow: auto !important;                 /* mantiene scroll */
  -webkit-overflow-scrolling: touch;
}

/* 4) La tabla no debe “cuadrar” el radio */
.pos-page .transaction-list table{
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* 5) Header de tabla con bordes superiores redondeados */
.pos-page .transaction-list thead th:first-child{
  border-top-left-radius: 12px !important;
}
.pos-page .transaction-list thead th:last-child{
  border-top-right-radius: 12px !important;
}

/* 6) FIX: no recortar dropdowns del selectpicker dentro del POS
   (solo afecta selects, NO todo) */
.pos-page .bootstrap-select,
.pos-page .form-group{
  overflow: visible !important;
}

/* =========================================================
   ✅ DASHBOARD TOP TABLES: bordes redondeados visibles
   (cards con tablas tipo "Top 5")
   No rompe selectpicker ni menús
   ========================================================= */

/* 1) Card que contiene tablas: que recorte interior (clip) */
.card:has(.table),
.card:has(.table-responsive){
  border-radius: 14px !important;
  overflow: hidden !important; /* ✅ CLAVE para que el radio se vea */
  border: 1px solid rgba(255,255,255,.10) !important;
  background: var(--dark-card) !important;
}

/* 2) Header del card (título) también con radio arriba */
.card > .card-header{
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
  background: #020617 !important;
}

/* 3) El contenedor de la tabla NO debe romper el radio */
.card .table-responsive{
  border-radius: 0 0 14px 14px !important;
  overflow: hidden !important; /* ✅ recorta esquinas de tabla */
  background: transparent !important;
}

/* 4) Tabla: separada para permitir radios */
.card .table{
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* 5) Redondeo real en el THEAD (esquinas superiores) */
.card .table thead th:first-child{
  border-top-left-radius: 12px !important;
}
.card .table thead th:last-child{
  border-top-right-radius: 12px !important;
}

/* 6) Redondeo real abajo (última fila) */
.card .table tbody tr:last-child td:first-child{
  border-bottom-left-radius: 12px !important;
}
.card .table tbody tr:last-child td:last-child{
  border-bottom-right-radius: 12px !important;
}


/*GRAFICOS*/

/* POS: tabla izquierda - arriba recto, abajo redondeado */
.pos-page .table-responsive.transaction-list{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;

  overflow: auto !important; /* mantiene scroll */
}

/* Por si el thead/th tenía radios por alguna regla anterior */
.pos-page .table-responsive.transaction-list thead th:first-child{
  border-top-left-radius: 0 !important;
}
.pos-page .table-responsive.transaction-list thead th:last-child{
  border-top-right-radius: 0 !important;
}

/*AGREGAR AL BOTON POS ESTILO MEJORADO*/

/* ✅ FORZAR letra blanca SOLO para el botón POS (hover/focus/active) */
.navbar .nav-menu > li.nav-item > a.dropdown-item.btn-pos,
.navbar .nav-menu > li.nav-item > a.dropdown-item.btn-pos:hover,
.navbar .nav-menu > li.nav-item > a.dropdown-item.btn-pos:focus,
.navbar .nav-menu > li.nav-item > a.dropdown-item.btn-pos:active{
  color: #fff !important;
}

/* también fuerza el icono y el span */
.navbar .nav-menu > li.nav-item > a.dropdown-item.btn-pos:hover i,
.navbar .nav-menu > li.nav-item > a.dropdown-item.btn-pos:focus i,
.navbar .nav-menu > li.nav-item > a.dropdown-item.btn-pos:active i,
.navbar .nav-menu > li.nav-item > a.dropdown-item.btn-pos:hover span,
.navbar .nav-menu > li.nav-item > a.dropdown-item.btn-pos:focus span,
.navbar .nav-menu > li.nav-item > a.dropdown-item.btn-pos:active span{
  color: #fff !important;
}




/*----------*/



/* si el título está en un div arriba tipo "header" */
.card > .card-header,
.panel > .panel-heading{
  overflow: hidden !important;
}



/*ULTIMO 11-02-2026 -- 15:09*/

/* =========================================================
   PATCH EXTRA (EDITOR + MODALES + BOTONES + DROPDOWNS + DT + POS)
   PEGAR AL FINAL DEL custom-dark.css
   ========================================================= */

/* ---------- 0) Variables rápidas ---------- */
:root{
  --select-blue: #2563EB; /* azul para selección POS (como pides) */
}

/* ---------- 2) MODALES: redondeo arriba + header no “cuadrado” ---------- */


.modal-dialog .modal-header{
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}

/* ✅ si querías que el radio se “respete” visualmente, aplica al header */


.modal-header .modal-title,
.modal-header h5,
.modal-header .close,
.modal-header button.close{
  color: var(--dark-text) !important;
  opacity: 1 !important;
}

/* ---------- 3) BOTONES: “Añadir …” debe verse igual que el morado (Importar) ---------- */
/* En tu sistema normalmente “Añadir” viene como btn-info o btn-success */
.btn-info,
.btn-success{
  color: #fff !important;
}
.btn-info:hover,
.btn-success:hover{
  filter: brightness(1.08) !important;
}

/* Por si “Añadir” viene como btn-outline / btn-default */
.btn.btn-default,
.btn.btn-default:focus,
.btn.btn-default:hover{
  border: 1px solid var(--accent2) !important;
}
.btn.btn-default:hover{
  color:#fff !important;
}



/* ---------- 5) CHECKBOX MULTIPLE (DataTables): contorno según tema ---------- */
table.dataTable input[type="checkbox"],
.dt-checkboxes input[type="checkbox"],
.dt-checkboxes-select-all input[type="checkbox"]{
  accent-color: var(--select-blue) !important;
}
table.dataTable td.dt-checkboxes-cell,
table.dataTable th.dt-checkboxes-cell{
  background: transparent !important;
}

/* Si tu plugin de checkboxes dibuja “cuadros” con pseudo-elementos */
table.dataTable td.dt-checkboxes-cell label:before,
table.dataTable th.dt-checkboxes-cell label:before{
  border: 2px solid rgba(255,255,255,.22) !important;
  background: transparent !important;
}
table.dataTable td.dt-checkboxes-cell label:after,
table.dataTable th.dt-checkboxes-cell label:after{
  color: #fff !important;
}

/* ---------- 6) POS: nombre de producto más visible + selección azul (no negro) ---------- */
/* tu POS arma el nombre así: td.product-title > button.edit-product.btn-link > strong */
/* ===== POS: Nombre de producto (tabla izquierda) en AZUL ===== */
.pos-page td.product-title strong,
.pos-page td.product-title .edit-product.btn.btn-link{
  color: #2563EB !important;     /* BLUE */
  font-weight: 700 !important;
}

/* opcional: cuando pasas el mouse, un poco más claro */
.pos-page td.product-title .edit-product.btn.btn-link:hover,
.pos-page td.product-title strong:hover{
  color: #3b82f6 !important;
}


/* selección/hover de productos en grilla POS (#product-table) */
#product-table td:hover{
  border-color: var(--select-blue) !important;
}
#product-table tbody tr.selected td,
#product-table tbody td.selected{
  background: rgba(37,99,235,.18) !important;  /* azul suave */
  border-color: rgba(37,99,235,.55) !important;
  color: #2563EB !important; 
}
#product-table tbody tr.selected td p,
#product-table tbody td.selected p{
  color: #2563EB !important; 
}

/*AGREGADO 11.02.2026*/


   
   /* =========================================================
   SIDEBAR: acelerar / eliminar animación al abrir menús
   ========================================================= */




/* 1) El blanco casi siempre está aquí (wrapper/main-menu) */
nav.side-navbar,
nav.side-navbar .side-navbar-wrapper,
nav.side-navbar .main-menu{
  background: var(--dark-sidebar) !important;
  background-color: var(--dark-sidebar) !important;
}

/* 2) UL base: transparente (para que se vea el sidebar dark) */
nav.side-navbar ul,
nav.side-navbar ul.list-unstyled{
  background: transparent !important;
  background-color: transparent !important;
}

/* 3) Quitar la animación del collapse SOLO en sidebar (instantáneo) */
nav.side-navbar .collapse,
nav.side-navbar .collapsing{
  transition: none !important;
}

/* 4) Submenús: SIEMPRE dark (incluye el estado animado .collapsing) */
nav.side-navbar ul.collapse,
nav.side-navbar ul.collapse.show,
nav.side-navbar ul.collapse.collapsing{
  background: #0b1220 !important;
  background-color: #0b1220 !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* 5) Links: nunca fondo blanco en focus/active */
nav.side-navbar a{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

nav.side-navbar a:hover,
nav.side-navbar a:focus,
nav.side-navbar a:active,
nav.side-navbar li.active > a,
nav.side-navbar a[aria-expanded="true"]{
  background: var(--dark-card) !important;
  background-color: var(--dark-card) !important;
  color: #c4b5fd !important;
}

/* Opción 2: con animación pero rápida */
nav.side-navbar .collapsing{
  transition: height .01s linear !important;
}
nav.side-navbar .collapse{
  transition: height .01s linear !important;
}



/* Badges tipo "Latest 5" / "Top 5" */
.card .badge,
.card .badge *{
  color: #fff !important;
}


/* =========================
   DASHBOARD FILTER TOGGLE (Today / Last 7 Days / This Month / This Year)
   SOLO DARK — MISMAS MEDIDAS DEL PREMIUM (solo tamaños)
   ========================= */

.filter-toggle.btn-group{
  background: #0b1220 !important;
  border: 1px solid rgba(148,163,184,.18) !important;

  /* ✅ mismas medidas del premium */
  border-radius: 999px !important;
  padding: 6px !important;
  gap: 6px !important;

  /* (si quieres igual “premium” en sensación) */
  box-shadow: 0 10px 28px rgba(2,6,23,.30) !important;
}

/* botones dentro */
.filter-toggle.btn-group .date-btn{
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.75) !important;

  /* ✅ mismas medidas del premium */
  font-weight: 410 !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  line-height: 1 !important;
  border-radius: 999px !important;

  box-shadow: none !important;
  outline: none !important;
  transition: background .08s linear, color .08s linear !important;
}

/* hover (colores dark intactos) */
.filter-toggle.btn-group .date-btn:hover{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

/* activo (colores dark intactos) */
.filter-toggle.btn-group .date-btn.active,
.filter-toggle.btn-group .date-btn:active,
.filter-toggle.btn-group .date-btn:focus{
  background: rgba(124,58,237,.25) !important;
  color: #fff !important;

  /* mantiene look dark */
  box-shadow: 0 0 0 1px rgba(124,58,237,.35) inset !important;
}



/* Extra: si el server imprime btn-link dentro del dropdown */
.dataTables_wrapper .dropdown-menu .btn,
.dataTables_wrapper .dropdown-menu .btn-link{
  background: transparent !important;
  color: rgba(255,255,255,.88) !important;
  text-decoration: none !important;
}
.dataTables_wrapper .dropdown-menu .btn:hover,
.dataTables_wrapper .dropdown-menu .btn-link:hover{
  background: rgba(124,58,237,.22) !important;
  color: #fff !important;
}



/* =========================================================
   FIX EXACTO: bootstrap-select calce con el borde de atrás
   (evita doble borde wrapper + botón)
   ========================================================= */


/* =========================================================
   FIX FINAL: eliminar “capa de atrás” (wrapper) y dejar solo el azul
   ========================================================= */

/* 1) Wrapper (atrás) NO debe dibujar nada */
.bootstrap-select.form-control{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}

/* 2) El botón (adelante) es el único que pinta */
.bootstrap-select > .dropdown-toggle{
  background: #020617 !important;                 /* fondo dark */
  border: 1px solid rgba(37,99,235,.85) !important; /* azul */
  border-radius: 8px !important;   /* prueba 12px (recomendado) */
  box-shadow: 0 0 0 2px rgba(37,99,235,.18) inset !important; /* glow suave */
  height: 40px !important;
  padding: 0 40px 0 14px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* 3) Texto/caret centrados */
.bootstrap-select .dropdown-toggle .filter-option{
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.bootstrap-select > .dropdown-toggle::after{
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

.bootstrap-select.form-control{
  border-radius: 8px !important;  
}


/* =========================================================
   ✅ PATCH: NO romper DataTables "records per page"
   (anula el width:100% SOLO en lengthMenu)
   ========================================================= */

.dataTables_wrapper .dataTables_length label{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
}

/* el selectpicker del lengthMenu NO debe ser full width */
.dataTables_wrapper .dataTables_length .bootstrap-select,
.dataTables_wrapper .dataTables_length .bootstrap-select > .dropdown-toggle{
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
}

/* dropdown del mismo ancho (evita superposición) */
.dataTables_wrapper .dataTables_length .bootstrap-select .dropdown-menu{
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  left: 0 !important;
  right: auto !important;
}


/* =========================================================
   Bootstrap-select: item SELECCIONADO en AZUL (no blanco)
   ========================================================= */

/* Para listas con <a> (bs4) */
.bootstrap-select .dropdown-menu li.selected > a,
.bootstrap-select .dropdown-menu li.active > a,
.bootstrap-select .dropdown-menu li > a.active,
.bootstrap-select .dropdown-menu li > a:active{
  background: #2563EB !important;   /* BLUE */
  color: #fff !important;
}

/* Para cuando viene como .dropdown-item (bs5 / algunos skins) */
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item:active{
  background: #2563EB !important;
  color: #fff !important;
}

/* Si el tema mete el texto opaco */
.bootstrap-select .dropdown-menu li.selected > a *,
.bootstrap-select .dropdown-menu .dropdown-item.active *{
  color: #fff !important;
}



/* =========================
   DARK TABS (Recent Transaction: Venta/Compra/Cotización/Pago)
   Quita el blanco del tab activo
   ========================= */

/* contenedor de tabs */
.nav-tabs{
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
}

/* tabs normales */
.nav-tabs .nav-link{
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.70) !important;
  padding: 8px 14px !important;
  border-radius: 10px 10px 0 0 !important; /* arriba redondeado como tu card */
  margin-right: 6px !important;
}

/* hover */
.nav-tabs .nav-link:hover{
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
}

/* ✅ tab activo: YA NO BLANCO */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
  color: #fff !important;
  background: rgba(124,58,237,.22) !important; /* morado soft (tu estilo) */
  border: 1px solid rgba(124,58,237,.35) !important;
  border-bottom-color: transparent !important; /* que “se fusione” con el contenido */
}

/* opcional: línea suave abajo del tab activo */
.nav-tabs .nav-link.active{
  box-shadow: 0 -1px 0 rgba(124,58,237,.35) inset !important;
}













/* =========================================================
   🔥 ERP MATIAS REGISTER PRO (Mismo look que LOGIN PRO)
   ✅ Aplica SOLO a .login-page (registro/login)
   ✅ Card 520px + padding original
   ✅ Incluye estilos de bootstrap-select (selectpicker)
   Pegar AL FINAL de tu custom-dark.css
   ========================================================= */

/* ===== Fondo (igual que tu login) ===== */
body .page.login-page{
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(700px 400px at 80% 20%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg,#020617,#020617,#020617) !important;
}

/* ===== Centrado perfecto ===== */
body .login-page .container{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

/* En tu HTML, el "card" real es .form-inner */
body .login-page .form-outer{
  width: 100%;
  justify-content: center;
}

body .login-page .form-inner{
  max-width: 520px !important;         /* ✅ misma anchura */
  width: 100% !important;

  padding: 45px 55px 35px !important;  /* ✅ padding original */

  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.92)) !important;
  border: 1px solid rgba(124,58,237,.25) !important;

  border-radius: 20px !important;
  backdrop-filter: blur(14px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.70),
    0 0 0 1px rgba(124,58,237,.15) inset,
    0 0 80px rgba(124,58,237,.15);

  color: #e5e7eb !important;
  transition: all .25s ease;
  position: relative !important;
  overflow: visible !important;
}

/* glow hover */
body .login-page .form-inner:hover{
  box-shadow:
    0 60px 160px rgba(0,0,0,.90),
    0 0 0 1px rgba(124,58,237,.25) inset,
    0 0 120px rgba(124,58,237,.25);
}

/* brillo diagonal */
body .login-page .form-inner::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 20px !important;
  background: linear-gradient(120deg,transparent,rgba(124,58,237,.15),transparent);
  opacity:.40;
  pointer-events:none;
}

/* ===== Logo/Título ===== */
body .login-page .form-inner .logo{
  margin-bottom: 25px !important;
}

body .login-page .form-inner .logo span,
body .login-page .form-inner .logo spanS{
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: 1px;
  display: inline-block;

  background: linear-gradient(90deg,#c084fc,#818cf8,#60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Labels ===== */
body .login-page .label-material{
  color: #94a3b8 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
}

/* cuando tu JS agrega .active */
body .login-page .label-material.active{
  color: #a78bfa !important;
}

/* ===== Inputs ===== */
body .login-page .input-material{
  background: rgba(2,6,23,.65) !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  color: #e5e7eb !important;

  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  transition: all .18s ease;
}

body .login-page .input-material:focus{
  border: 1px solid #7c3aed !important;
  background: rgba(2,6,23,.85) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.25) !important;
  outline: none !important;
}

/* Mensajes de error (Laravel) */
body .login-page .form-group-material p{
  margin: 8px 0 0 !important;
  color: #fca5a5 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ===== Botón principal (Register) ===== */
body .login-page .btn.btn-primary,
body .login-page input#register.btn.btn-primary,
body .login-page input#register{
  width: 100% !important;
  background: linear-gradient(90deg,#6366f1,#7c3aed,#9333ea) !important;
  border: none !important;
  border-radius: 14px !important;
  height: 46px !important;

  font-weight: 700 !important;
  letter-spacing: .4px;
  box-shadow: 0 15px 35px rgba(124,58,237,.35) !important;
  transition: all .25s ease;

  color: #fff !important;
}

body .login-page .btn.btn-primary:hover,
body .login-page input#register:hover{
  transform: translateY(-1px);
  box-shadow: 0 25px 55px rgba(124,58,237,.55) !important;
}

/* Texto inferior + link */
body .login-page .form-inner p{
  color: rgba(148,163,184,.90) !important;
  margin-top: 14px !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
}

body .login-page .form-inner a.signup{
  color: #a78bfa !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body .login-page .form-inner a.signup:hover{
  color: #fff !important;
}

/* =========================================================
   ✅ BOOTSTRAP-SELECT (selectpicker) en modo pro/dark
   ========================================================= */
body .login-page .bootstrap-select{
  width: 100% !important;
}

body .login-page .bootstrap-select > .dropdown-toggle{
  background: rgba(2,6,23,.65) !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  color: #e5e7eb !important;

  border-radius: 14px !important;
  padding: 12px 14px !important;
  height: 46px !important;
  box-shadow: none !important;
  outline: none !important;
}

body .login-page .bootstrap-select > .dropdown-toggle:focus,
body .login-page .bootstrap-select.show > .dropdown-toggle{
  border: 1px solid #7c3aed !important;
  background: rgba(2,6,23,.85) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.25) !important;
}

body .login-page .bootstrap-select .dropdown-menu{
  background: #0b1220 !important;
  border: 1px solid rgba(124,58,237,.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.75) !important;
}

body .login-page .bootstrap-select .dropdown-menu li a{
  color: rgba(226,232,240,.95) !important;
  padding: 10px 14px !important;
}

body .login-page .bootstrap-select .dropdown-menu li a:hover,
body .login-page .bootstrap-select .dropdown-menu li.selected a{
  background: rgba(124,58,237,.18) !important;
  color: #fff !important;
}

body .login-page .bootstrap-select .bs-searchbox input{
  background: rgba(2,6,23,.75) !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  color: #e5e7eb !important;
  border-radius: 12px !important;
}

/* =========================================================
   ✅ Responsive igual que login
   ========================================================= */
@media (max-width: 576px){
  body .login-page .form-inner{
    max-width: 94% !important;
    padding: 40px 22px 30px !important;
    border-radius: 16px !important;
  }
  body .login-page .form-inner::before{
    border-radius: 16px !important;
  }
}



/* =========================================================
   ✅ FIX: LOGIN no tenía borde porque usa .login-card (no .form-inner)
   ✅ El borde NO incluye el copyright (va afuera)
   Pegar AL FINAL del custom-<theme>.css
   ========================================================= */

/* El card REAL del login */
body .login-page .login-card{
  max-width: 520px !important;
  width: 100% !important;
  padding: 45px 55px 35px !important;

  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.92)) !important;
  border: 1px solid rgba(124,58,237,.25) !important;   /* ✅ BORDE */
  border-radius: 20px !important;

  backdrop-filter: blur(14px) !important;
  box-shadow:
    0 40px 120px rgba(0,0,0,.70),
    0 0 0 1px rgba(124,58,237,.15) inset,
    0 0 80px rgba(124,58,237,.15) !important;

  color: #e5e7eb !important;

  position: relative !important;
  overflow: visible !important; /* ✅ necesario para que el copyright salga */
  margin-bottom: 85px !important; /* espacio para el copyright afuera */
}

/* glow hover */
body .login-page .login-card:hover{
  box-shadow:
    0 60px 160px rgba(0,0,0,.90),
    0 0 0 1px rgba(124,58,237,.25) inset,
    0 0 120px rgba(124,58,237,.25) !important;
}

/* brillo diagonal */
body .login-page .login-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 20px !important;
  background: linear-gradient(120deg,transparent,rgba(124,58,237,.15),transparent);
  opacity:.40;
  pointer-events:none;
}

/* ✅ COPYRIGHT AFUERA (NO DENTRO DEL BORDE) */
body .login-page .login-card .copyrights{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;

  bottom: -70px !important;  /* ✅ afuera del card */
  text-align: center !important;

  margin: 0 !important;
  padding: 0 !important;

  color: rgba(148,163,184,.85) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body .login-page .login-card .copyrights .external{
  font-weight: 900 !important;
  background: linear-gradient(90deg,#c084fc,#818cf8,#60a5fa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}


/* =========================================================
   FIX SCROLL TABLAS (cards dashboard / reportes) - DARK
   Mantiene bordes redondeados + devuelve el scroll en móvil
   Pegar AL FINAL del custom-dark.css
   ========================================================= */

/* La card puede seguir recortando para que se vea el radio */
.card:has(.table),
.card:has(.table-responsive){
  overflow: hidden !important;
}

/* ✅ PERO el contenedor que debe scrollear NO puede estar en hidden */
.card .table-responsive{
  overflow-x: auto !important;              /* scroll horizontal */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;        /* scroll suave en Android/iOS */
  max-width: 100% !important;
}

/* Opcional pero recomendado: fuerza que la tabla “no se encoja” */

/* Si tu reporte quiere scroll vertical (muchas filas), usa altura */



/* Responsive */
@media (max-width: 576px){
  body .login-page .login-card{
    max-width: 94% !important;
    padding: 40px 22px 30px !important;
    border-radius: 16px !important;
    margin-bottom: 95px !important;
  }
  body .login-page .login-card::before{
    border-radius: 16px !important;
  }
  body .login-page .login-card .copyrights{
    bottom: -78px !important;
    font-size: 11px !important;
  }
}

/* ✅ TÍTULO MÁS GRUESO (LOGIN + REGISTER) */
body .login-page .login-title,
body .login-page .logo span,
body .login-page .logo spanS{
  font-weight: 900 !important;     /* más grueso */
  letter-spacing: 1.2px !important;
}

/* opcional: un pelín más grande en login para que se note igual que registro */
body .login-page .login-title{
  font-size: 28px !important;
}

/* ✅ BAJAR EL LOGIN (más abajo) */
body.login-bg .login-page .container,
body .login-page .container{
  padding-top: 20px !important;   /* antes 70px, súbelo/bájalo aquí */
}

body.login-bg,
body.login-bg .page.login-page{
  height: 100vh !important;
  overflow: hidden !important;   /* 🔥 quita scroll */
}

/* Centrado fijo + un poquito más abajo */
body.login-bg .login-page .container{
  justify-content: center !important;
  align-items: center !important;

}






/* ===== REGISTER ONLY: FLOATING LABEL PRO (NO AFECTA LOGIN) ===== */
body .login-page form[action*="register"] .form-group-material{
  position: relative !important;
  margin-bottom: 20px !important;
}

/* label flotante con fondo */
body .login-page form[action*="register"] .form-group-material .label-material{
  position: absolute !important;
  left: 14px !important;
  top: 14px !important;
  padding: 0 8px !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(226,232,240,.85) !important;

  background: rgba(2,6,23,.85) !important;
  border-radius: 999px !important;
  pointer-events: none !important;

  transition: all .15s ease !important;
}

/* cuando el input tiene foco o valor */
body .login-page form[action*="register"] .form-group-material .label-material.active{
  top: -10px !important;
  font-size: 12px !important;
  color: #a78bfa !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,.25) inset !important;
}

/* inputs con padding top para que no choque label */
body .login-page form[action*="register"] .form-group-material .input-material{
  padding: 16px 14px 12px !important;
}



/* ✅ X del modal en BLANCO (Bootstrap 4) */
.modal .close,
.modal button.close{
  color: #fff !important;
  opacity: .9 !important;
  text-shadow: none !important;
}

.modal .close:hover,
.modal button.close:hover{
  opacity: 1 !important;
}



/*ULTOMO AGREGADO PARA LOS CLIENTES EN POS- NO SE VEIAN DEL TODO CON ESTO SE ARREGLO*/

/* ✅ POS - Selectpicker dropdown con scroll real */
.pos-page .bootstrap-select .dropdown-menu{
  max-height: 420px !important;   /* ajusta si quieres (260-420) */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* asegura que el UL interno también tenga scroll */
.pos-page .bootstrap-select .dropdown-menu .inner{
  max-height: 320px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}











/*------------------------------------------------------------------------------------------------------------------------------------------------*/





/* ===== MOBILE FIX: sidebar oculto + botón siempre visible ===== SUPER FUNCIONAL-SEMIFINAL */
@media (max-width: 768px) {

  /* 1) El contenido debe ocupar TODO el ancho en móvil */
  .page,
  .page.active,
  #content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Sidebar off-canvas */
  .side-navbar {
    height: calc(100vh - 63px);
    transform: translateX(-105%);
    transition: transform .2s ease;
    
  }

  .side-navbar.active {
    transform: translateX(0);
  }
  
  

  /* 3) Evitar scroll/huecos por overflow horizontal */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* ==================================================
     4) FIX HEADER (cuando hay muchos accesos/íconos)
     ================================================== */

  /* El menú del header en una sola línea */
  nav.navbar .nav-menu{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* Menos espacio entre íconos */
  nav.navbar .nav-menu .nav-item{
    margin-left: 6px !important;
  }

  /* Menos padding en los links/botones del header */
  nav.navbar .nav-menu .nav-link,
  nav.navbar .nav-menu a{
    padding: 6px 6px !important;
    white-space: nowrap !important;
  }

  /* Quita el margen derecho del ícono (compacto) */
  nav.navbar .nav-menu a i{
    margin-right: 0 !important;
  }

  /* Oculta textos (para que no empuje) */
  nav.navbar .nav-menu a span{
    display: none !important;
  }

  /* ✅ EXCEPCIÓN: mostrar SOLO el texto de POS */
  nav.navbar .nav-menu a.btn span,
  nav.navbar .nav-menu a[href*="pos"] span{
    display: inline-block !important;
    font-size: 12px !important;  /* POS más pequeño */
    margin-left: 4px !important; /* separación icono-texto */
  }

  /* Ajusta el botón POS para que no sea tan grande */
  nav.navbar .nav-menu a.btn{
    padding: 6px 8px !important;
  }

  /* Pero si tienes badges, que sí se vean */
  nav.navbar .nav-menu a span.badge{
    display: inline-block !important;
  }

  /* Reduce el espacio de la flecha del dropdown */
  nav.navbar .dropdown-toggle::after{
    margin-left: 0 !important;
  }
  
  /* ===== DataTables: arreglar el header (registros/buscar/botones) en móvil ===== */
  .dataTables_wrapper .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dt-buttons{
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    margin: 6px 0 !important;
  }

  .dataTables_wrapper .dataTables_filter input{
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Botones (PDF/CSV/Impresión/ColVis) en fila y si no cabe, que bajen */
  .dataTables_wrapper .dt-buttons{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .dataTables_wrapper .dt-buttons .btn{
    margin: 0 !important;
  }
  
      /* Espacio entre "Buscar" y el input */
    .dataTables_wrapper .dataTables_filter label{
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;           /* <-- espacio */
    }
    
    
    
   /* Que la fila donde está info + paginación se apile en columna */
  .dataTables_wrapper .row:last-child{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Info (Demostración 1-10...) en su propia línea */
  .dataTables_wrapper .dataTables_info{
    width: 100% !important;
    text-align: center !important;
    margin: 10px 0 8px !important;
    float: none !important;
  }

  /* Paginación debajo y con salto si no cabe */
  .dataTables_wrapper .dataTables_paginate{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    float: none !important;
    margin-bottom: 12px !important;
  }

  .dataTables_wrapper .pagination{
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  
  
  
  
 /* 1) Modal bien visible + scroll vertical si es largo */
  .modal-dialog{
    margin: 0.5 !important;
  }
  .modal-content{
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    
  }

  /* 2) Compacto global para tablas en modales */
  .modal .table{
    font-size: 11px !important;      /* 🔥 más pequeño */
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
  }
  .modal .table th,
  .modal .table td{
    padding: 4px 4px !important;     /* 🔥 menos padding */
    vertical-align: middle !important;
  }


  
  
  
  /*para las creacion de ventas y compras*/
  
   /* tabla como contenedor */
  table.totals{
    display: block !important;
    width: 100% !important;
  }

  /* fila como contenedor flex (2 por fila) */
  table.totals tr{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* cada "celda" será una tarjeta (50% - gap) */
  table.totals td{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    width: calc(50% - 5px) !important;   /* 2 por fila */
    box-sizing: border-box !important;

    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;

    border: 1px solid rgba(0,0,0,.125) !important;
    border-radius: 6px !important;
    background: #fff !important;
  }

  /* el monto a la derecha (span.pull-right) */
  table.totals td .pull-right{
    float: none !important;
    margin-left: 10px !important;
    font-weight: 600;
    white-space: nowrap !important;
  }

  /* si queda una sola tarjeta en la última fila, que ocupe todo el ancho */
  table.totals td:only-child{
    width: 100% !important;
  }
  
  
  
  
  /* Quitar bordes "globales" que vienen de Bootstrap (.table-bordered) */
  table.totals,
  table.totals tr,
  table.totals th,
  table.totals td{
    border: 0 !important;
  }

  /* Si Bootstrap está aplicando border-collapse, lo anulamos */
  table.totals{
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
  }

  /* Mantener SOLO el borde por campo (tu tarjeta) */
  table.totals td{
    border: 1px solid rgba(0,0,0,.125) !important;
    border-radius: 6px !important;
    background: #fff !important;
  }
  
  
  .filter-toggle .btn{
    font-size: 10px !important;  /* más cómodo */
    padding: 8px 10px !important;  /* más alto y ancho */
    white-space: nowrap;
    flex: 0 0 auto;
  }
  
  
  
/*------------------------------------------------------------------*/



}

/* =========================================
   🔥 ERP MATIAS MOBILE REPORTES (SAFE FIX)
   SOLO FILTROS (NO TOCA DATATABLE HEADER)
   ========================================= */
@media (max-width:768px){

  /* ✅ SOLO dentro de la tarjeta del filtro (el card de arriba) */
  .forms .card > form .row{
    display:block !important;
    margin:0 !important;
  }

  .forms .card > form .row > [class*="col-"]{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* ✅ SOLO los form-group del filtro (no toca los de DataTables) */
  .forms .card > form .form-group.row{
    display:block !important;
    margin-bottom:12px !important;
  }

  .forms .card > form label{
    display:block !important;
    font-size:13px !important;
    margin-bottom:4px !important;
    font-weight:600 !important;
  }

  .forms .card > form .d-tc{
    display:block !important;
    width:100% !important;
  }

  /* input fecha */
  .forms .card > form .daterangepicker-field{
    width:100% !important;
    height:38px !important;
    font-size:13px !important;
    border-radius:8px !important;
    padding:6px 10px !important;
  }

  /* selectpicker */
  .forms .card > form .bootstrap-select{
    width:100% !important;
  }
  .forms .card > form .bootstrap-select .dropdown-toggle{
    width:100% !important;
    height:38px !important;
    font-size:13px !important;
    border-radius:8px !important;
    padding:6px 10px !important;
  }

  /* ✅ NO tocamos tamaño del botón (solo espacio) */
  .forms .card > form .btn{
    margin-top:6px !important;
  }

  /* tabs más pegados (esto sí está bien) */
  .forms + .nav-tabs,
  .nav-tabs{
    margin-top:10px !important;
  }

  /* ✅ SOLO el search input de DataTables (NO header) */
  div.dataTables_wrapper div.dataTables_filter{
    text-align:left !important;
    margin-bottom:6px !important;
  }
  div.dataTables_wrapper div.dataTables_filter input{
    width:100% !important;
    height:36px !important;
    border-radius:8px !important;
  }

  /* ✅ length menu igual, sin tocar tablas */
  div.dataTables_wrapper div.dataTables_length{
    text-align:left !important;
    margin-bottom:6px !important;
  }
}