/*
    Rojo: # ca2a30;
    Azul: # 36456d;
    Azul2: # 00a0e0;
*/
body {
    color: #999;
    background-color: #f9f9f9;
}

.content-wrapper {
    min-height: 100%;
    background-color: transparent;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    overflow: initial;
    height: auto !important;
}

a {
    color: #36456d;
}

div.logo{
	margin-top: 60px;
	text-align: center;
	margin-bottom: 20px;
}

div.logo img{
	width: 50%;
}

h4.card-title{
	color:#36456d;
}
h4.card-title:after {
	content:' ';
    display: block;
    height: 3px;
    background-image: -webkit-linear-gradient(to right, #ca2a30, #ca2a30), -webkit-linear-gradient(to right, #36456d, #36456d), -webkit-linear-gradient(to right, #00a0e0, #00a0e0), -webkit-linear-gradient(to right, #00a0e0, #fff 80%);
    background-image: -moz-linear-gradient(to right, #ca2a30, #ca2a30), -moz-linear-gradient(to right, #36456d, #36456d), -moz-linear-gradient(to right, #00a0e0, #00a0e0), -moz-linear-gradient(to right, #00a0e0, #fff 80%);
    background-image: -o-linear-gradient(to right, #ca2a30, #ca2a30), -o-linear-gradient(to right, #36456d, #36456d), -o-linear-gradient(to right, #00a0e0, #00a0e0), -o-linear-gradient(to right, #00a0e0, #fff 80%);
    background-image: -ms-linear-gradient(to right, #ca2a30, #ca2a30), -ms-linear-gradient(to right, #36456d, #36456d), -ms-linear-gradient(to right, #00a0e0, #00a0e0), -ms-linear-gradient(to right, #00a0e0, #fff 80%);
    background-image: linear-gradient(to right, #ca2a30, #ca2a30), linear-gradient(to right, #36456d, #36456d), linear-gradient(to right, #00a0e0, #00a0e0), linear-gradient(to right, #00a0e0, #fff 80%);
    background-repeat: no-repeat;
    background-position: 0 0, 51px 0, 70px 0, 0 0;
    background-size: 65px 50px, 30px 30px, 30px 30px, 100% 100%;
    margin-top: 9px;
}

.theme-primary .btn-outline.btn-primary {
    color: #FFF;
    background-color: #36456d;
    border-color: transparent;
    padding: 4px 25px;
}

.theme-primary .btn-outline.btn-primary:hover, .theme-primary .btn-outline.btn-primary:active, .theme-primary .btn-outline.btn-primary.active {
    background-color: #00a0e0 !important;
	border-color: #00a0e0 !important;
    color: #ffffff;
}

.theme-primary .btn-primary:hover, .theme-primary .btn-primary:active, .theme-primary .btn-primary:focus, .theme-primary .btn-primary.active {
    background-color: #00a0e0 !important;
	border-color: #00a0e0 !important;
    color: #ffffff;
}

.input-group .input-group-text {    
    background-color: #ffffff;
}

.form-control {
    border-color: #999;
    background: #f9f9f9;
    color: #1f2937;
}
/* Selects dentro de la tabla (estado de produccion, courier, estado cliente)
   con texto oscuro y peso medio para que se lea bien sobre cualquier fondo */
.table select.form-control,
.table select.updateable,
.table input.form-control {
    color: #1f2937 !important;
    font-weight: 500 !important;
}
.table select option {
    color: #1f2937;
    background: #fff;
}

.theme-primary .form-control:focus {
    border-color: #36456d;
}

.input-group-text {    
    color: #999;
}

.input-group .input-group-text {    
    border-color: #999;
}

.card-footer {    
    background-color: transparent;
}

.box-footer {
    border-top: 1px solid #999;    
}

.fixed .wrapper, .main-header .logo, .user-panel {
    overflow: initial;
}

.fixed .wrapper, .main-header .logo, .user-panel {
    overflow: initial;
    background: #fff;
}

.card.login .box-footer, 
.card.login .box-body
{    
    padding: 1.5rem 0;
}

.card.login .card-footer{
	padding: 1rem 1.5rem;
}

.dashboardMetricas .box-header{    
    padding: 6px 16px;
    text-align: center;
}

.dashboardMetricas .box-body {
    padding: 0.5rem 1.5rem;    
}

.dashboardMetricas .box-body h2{    
    text-align: center;
    font-style: italic;
    color: #999;
    margin:0;
}

.dashboardMetricas .box-primary .box-header{
    background: #00a0e0;
    color: #fff;
}

.dashboardMetricas .box-secondary .box-header{
    background: #ca2a30;
    color: #fff;
}

.dashboardMetricas .box-tertiary .box-header{
    background: #ca2a30;
    color: #fff;
}

.dashboardMetricas .box-fourth .box-header{
    background: #36456d;
    color: #fff;
}

.theme-primary .dashboardMetricas .box-primary {
    background-color: #FFF !important;
}

.theme-primary .dashboardMetricas .box-secondary {
    background-color: #FFF !important;
}

.light-skin .sidebar-menu > li:hover > a, .light-skin .sidebar-menu > li:active > a, .light-skin .sidebar-menu > li.active > a {
    color: #fff;
    background: #00a0e0;
    border-radius: 2em;
}

.sidebar-menu > li:hover > a > svg, .sidebar-menu > li:active > a > svg, .sidebar-menu > li.active > a > svg {
    color: #fff;
}

.light-skin .sidebar a {
    color: #00a0e0;
    background: #f9f9f9;
    border-radius: 1em;
    margin: 7px 0;
}

.sidebar-menu > li > a > svg {
    color: #00a0e0;
}

.user-profile{
    border-bottom: 1px solid #e2e5ed;
}

.user-profile > div{
    text-align: center
}

.user-profile > div div.image{
    width:130px;
    height:130px;
    overflow:hidden;
    display: inline-block;        
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -ms-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;  
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}

.user-profile > div img{
    width: 100%;
}

.user-profile > div .info a{
    color: #36456d;
    font-weight: bold;
}

.content-header .page-title {    
    color: #36456d;
}

.content-header .breadcrumb {
    color: #36456d;
}

.content-header .breadcrumb .breadcrumb-item a {
    color: #36456d;
}

.navbar-custom-menu .navbar-nav > li > a.dropdown-toggle {
    width: auto;
}

.navbar-custom-menu .navbar-nav > li:last-child > a {
    width: auto;
}

.light-skin .main-header .navbar .nav > li > a {
    color: #36456d;
    font-size: 1rem;
}

.light-skin .main-header .navbar .nav > li > a i{    
    font-size: 1.8rem;
}


h3.page-title, .kt-portlet__head-title{
    color: #36456d;
    font-weight:bold;
}

label{
    color: #36456d;
}
header nav .badge-default {
    background-color: #ca2a30;
    color: #fffffb;
}

.header-megamenu .btn-group{    
        align-items: center;
    }

.theme-primary.light-skin .sidebar-menu > li.treeview .treeview-menu li a {
    color: #00a0e0;
}

.sidebar-menu .treeview-menu > li > a:hover {
    opacity: 1;
    background: #00a0e0;
    color:#fff !important;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td, 
.table-bordered > tbody > tr > th{
    border: 1px solid #36456d;
}

.theme-primary .btn-info {
    background-color: #36456d;
    border-color: #36456d;
    color: #ffffff;
}

.theme-primary .btn-info:hover, .theme-primary .btn-info:active, .theme-primary .btn-info:focus, .theme-primary .btn-info.active {
    background-color: #00a0e0 !important;
    border-color: #6a9552 !important;
}

.theme-primary a:hover, .theme-primary a:active, .theme-primary a:focus {
    color: #00a0e0;
}

#fseguimiento .box-body,
#seguimiento .box-body, 
#seguimiento .box-body .box-title,
#seguimiento .box-body p
 {    
    color: #36456d;
}

.theme-primary .nav-tabs .nav-link.active {
    border-bottom-color: #36456d;
    background-color: #36456d;
    color: #ffffff;
}

.nav-tabs .nav-link {
    position: relative;
    color: #36456d;
    padding: 0.5rem 1.25rem;
    border-radius: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    border: 1px solid #d9d9d9;
}

.light-skin .sidebar-menu > li.menu-open > a {
    color: #36456d;
}

.sidebar-menu > li.menu-open > a > svg {
    color: #36456d;
}

.theme-primary .btn-primary {
    background-color: #00a0e0;
    border-color: #00a0e0;
    color: #36456d;
}

.dz-default.dz-message{
    color: #36456d;
}

.theme-primary .btn-danger {
    background-color: #ca2a30;
    border-color: #ca2a30;
    color: #ffffff;
}

.theme-primary .btn-danger:hover, .theme-primary .btn-danger:active, .theme-primary .btn-danger:focus, .theme-primary .btn-danger.active {
    background-color: #b36405 !important;
    border-color: #b36406 !important;
    color: #ffffff;
}

.chzn-container-single .chzn-default {
    color: #999;
    border-radius: 5px;
}

.theme-primary .nav-tabs .nav-link.active:hover, .theme-primary .nav-tabs .nav-link.active:focus {
    border-bottom-color: #0D5A49;
    background-color: #36456d;
    color: #ffffff;
}

.theme-primary .nav > li > a:hover, .theme-primary .nav > li > a:active, .theme-primary .nav > li > a:focus {
    color: #00a0e0;
    background: #e1e1df;
}

/* === Sidebar colapsado: estado limpio (solo iconos) === */
.sidebar-collapse .user-profile > div div.image {
    width: 40px !important;
    height: 40px !important;
}
.sidebar-collapse .user-profile {
    padding: 8px 4px !important;
    text-align: center;
}
/* Ocultar nombre + sucursal + badges + spans cuando esta colapsado */
.sidebar-collapse .user-profile .info,
.sidebar-collapse .sidebar-menu > li > a > span,
.sidebar-collapse .sidebar-menu .badge,
.sidebar-collapse .sidebar-menu .pull-right-container {
    display: none !important;
}
/* Centrar iconos del menu en el ancho colapsado */
.sidebar-collapse .sidebar-menu > li > a {
    text-align: center;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.sidebar-collapse .sidebar-menu > li > a > i,
.sidebar-collapse .sidebar-menu > li > a > svg {
    margin: 0 auto;
}

.theme-primary .btn-success{    
    background-color: #36456d;
    border-color: #36456d;
    color: #ffffff;
}

.theme-primary .btn-success:hover, .theme-primary .btn-success:active, .theme-primary .btn-success:focus, .theme-primary .btn-success.active {
    background-color: #00a0e0 !important;
    border-color: #00a0e0 !important;
    color: #ffffff;
}

.theme-primary .btn-danger:hover, .theme-primary .btn-danger:active, .theme-primary .btn-danger:focus, .theme-primary .btn-danger.active {
    background-color: #e87272 !important;
    border-color: #e87272 !important;
    color: #ffffff;
}

.flexigrid .dropdown-menu > li > a {
    color: gray;
    display: block;
    padding: 6px;
}

.theme-primary .flexigrid .dropdown-menu a:hover{
    color: #fff;
    background: #00a0e0;    
}

.zdrm-webphone-decline-btn.zdrm-webphone-hide {
    display:block !important;
}

@media screen and (max-width:768px){
	.nav {	    
	    flex-wrap: nowrap;
	}

	.card-img-top {
	    width: 40%;
	}

    .main-sidebar {
        margin-top: 60px;
        padding-top: 0px;
    }

    .main-header .navbar{
        flex-wrap: nowrap;
    }

    .main-header .navbar div{
        display: flex;
    }

    .navbar-custom-menu .navbar-nav li > a.dropdown-toggle {
        padding: 0;
    }

    .navbar-custom-menu .navbar-nav {        
        align-items: baseline;
    }

    
}

#fancybox-close{
    display:block !important;
}

.instructivosContent {
    position: fixed;
    width: 50vw;
    top: 60px;
    height: 100vh;
    border-left: 1px solid #364b7f;
    box-shadow: 0px 10px 10px #333;
    background: #fff;
    right: -50vw;
    padding: 10px;
    transition:.5s ease-in-out;
    
}

.instructivosContent > div{
    opacity:.6
}

.instructivosContent.active{
    right: 0;
}

.instructivosContent.active:hover > div{
    opacity:1
}

.instructivosContent > div{
    position: relative;
}

.instructivosContent > div > .icono {
    width: 40px;
    height: 40px;
    position: absolute;
    left: -3.3vw;
    border: 1px solid #364b7f;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #364b7f;
    cursor: pointer;
    opacity:.8;
    z-index:0;
}

.instructivosContent > div > .icono:hover{
    opacity:1;
}

.instructivosContent .card-body{
    max-height: 50vh;
    overflow: auto;
}

.cursor-pointer{
    cursor:pointer;
}

.filtering_form.table{
    position:relative;
    border-collapse: collapse; 
}

.filtering_form.table thead th {
    /*background: white;*/
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    z-index: 1;
    -webkit-box-shadow: -2px 2px 0px -1px rgb(13, 90, 38);
    -moz-box-shadow: -2px 2px 0px -1px rgb(13, 90, 38);
    -ms-box-shadow: -2px 2px 0px -1px rgb(13, 90, 38);
    -o-box-shadow: -2px 2px 0px -1px rgb(13, 90, 38);
    box-shadow: -2px 2px 0px -1px rgb(13, 90, 38);
}


.aceptarTerminosContent{
    position: relative; 
    width: 100%; 
    height:80vh;
}
.aceptarTerminosIframe{
    width:100%;
    height:80vh;
}
#loader.inactive{
    display:none
}
#loader{
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1.5em;
    color: #333;
    z-index: 10;
    text-align:center
}

#loader img{
    max-width: 20%;
}


@media screen and (max-width:480px){
    .aceptarTerminosContent{
        position: relative; 
        width: 100%; 
        height:50vh;
    }
    .aceptarTerminosIframe{
        width:100%;
        height:50vh;
    }
    #loader img{
        max-width: 60%;
    }
}

/* =========================================================================
   AESTHETIC LAYER — soft modern look (no logic changes, only visuals)
   ========================================================================= */

/* Body con tinte suave para que las cards blancas destaquen */
body.light-skin .content-wrapper,
body.light-skin .wrapper {
  background: #f4f6fb !important;
}

/* Sidebar: fondo crema con borde sutil derecho */
.light-skin .main-sidebar,
.light-skin aside.main-sidebar,
.light-skin .left-side {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-right: 1px solid #e2e8f0 !important;
}
.light-skin .sidebar-menu > li > a {
  color: #475569 !important;
  border-radius: 8px;
  margin: 2px 8px;
  padding: 10px 12px !important;
  transition: background 0.15s, color 0.15s;
}
.light-skin .sidebar-menu > li > a:hover,
.light-skin .sidebar-menu > li.active > a {
  background: #e0f2fe !important;
  color: #075985 !important;
}
.light-skin .sidebar-menu > li.active > a {
  background: linear-gradient(90deg, #0ea5e9, #0284c7) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(14,165,233,0.25);
}
.light-skin .sidebar-menu > li > a > svg,
.light-skin .sidebar-menu > li > a > i {
  opacity: 0.85;
}
.light-skin .sidebar-menu > li.active > a > svg,
.light-skin .sidebar-menu > li.active > a > i {
  opacity: 1;
}
.light-skin .sidebar-menu .treeview-menu > li > a {
  color: #64748b !important;
  border-radius: 6px;
  margin: 1px 16px 1px 28px;
  padding: 6px 10px !important;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}
.light-skin .sidebar-menu .treeview-menu > li > a:hover {
  background: #e0f2fe !important;
  color: #075985 !important;
}
.light-skin .sidebar-menu .treeview-menu > li.active > a,
.light-skin .sidebar-menu li.menu-open > .treeview-menu > li.active > a {
  background: #dbeafe !important;
  color: #1e40af !important;
  font-weight: 600;
}

/* User profile box en sidebar */
.light-skin .user-profile {
  background: rgba(255,255,255,0.6) !important;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 6px;
}
.light-skin .user-profile a {
  color: #0f172a !important;
}

/* Header: sombra en vez de borde duro */
.light-skin .main-header .navbar,
.light-skin .main-header .logo-box {
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
  border-bottom: 0 !important;
}

/* Cards / Box: radius + sombra suave + hover */
.box, .card {
  border-radius: 12px !important;
  border: 1px solid #eef2f6 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
  transition: box-shadow 0.2s, transform 0.15s;
}
.box:hover, .card:hover {
  box-shadow: 0 4px 12px rgba(15,23,42,0.06) !important;
}

/* Kt-portlet (las cards principales del CRUD) */
.kt-portlet {
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
}

/* Botones modernos */
.btn {
  border-radius: 8px !important;
  transition: all 0.15s ease;
  font-weight: 500;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15,23,42,0.10);
}
.btn-primary {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  border: 0 !important;
}
.btn-success {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  border: 0 !important;
}
.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: 0 !important;
}
.btn-info {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  border: 0 !important;
}

/* =========================================================================
   Tables modernas — bordes uniformes en TODAS las celdas
   Resuelve: celdas sin separacion visible en Orders, Clients, Page 2, etc.
   Regla agresiva sin descendiente directo + border-collapse forzado.
   ========================================================================= */
.table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border-color: #cbd5e1 !important;
}
.table th,
.table td {
  border: 1px solid #cbd5e1 !important;
  vertical-align: middle !important;
}
.table-bordered {
  border: 1px solid #cbd5e1 !important;
}
.table-bordered th,
.table-bordered td {
  border: 1px solid #cbd5e1 !important;
}
/* Header con fondo y borde inferior mas marcado */
.table thead th,
.table > thead > tr > th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid #cbd5e1 !important;
  border-bottom: 2px solid #94a3b8 !important;
}
.table tbody tr {
  transition: background 0.1s;
}
.table tbody tr:hover {
  background: #eff6ff !important;
}
.table tbody tr:nth-child(even):not(:hover) {
  background: #fafbfc;
}
/* Inputs/selects/textareas dentro de celdas no deben anular el border de la celda */
.table th input,
.table td input,
.table th select,
.table td select,
.table th textarea,
.table td textarea {
  background: transparent;
}

/* Inputs / Selects */
.form-control {
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15) !important;
}

/* Badges y labels (pill) */
.badge, .label {
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* Breadcrumb más sutil */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
}

/* Modal con radius más amplio */
.modal-content {
  border-radius: 14px !important;
  border: 0 !important;
  box-shadow: 0 20px 50px rgba(15,23,42,0.15) !important;
}
.modal-header {
  border-bottom: 1px solid #f1f5f9 !important;
}

/* Page title */
.page-title {
  font-weight: 700 !important;
  color: #0f172a !important;
}


/* =========================================================================
   AESTHETIC v3 — typography + animations + empty states + command palette
   ========================================================================= */

/* Typography: Inter */
body, .content-wrapper, .main-sidebar, .main-header, .modal-content,
.btn, .form-control, .table, h1, h2, h3, h4, h5, h6, p, span, div, a, label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
}
body { font-feature-settings: 'cv02','cv03','cv04','cv11'; }

/* Page entry animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
section.content {
  animation: fadeInUp 0.25s ease-out;
}
.kt-portlet, .card, .box {
  animation: fadeInUp 0.3s ease-out;
}

/* Empty states */
td[colspan] {
  text-align: center;
}
td[colspan]:only-child:empty,
td[colspan].empty-row {
  padding: 40px 16px !important;
  color: #94a3b8 !important;
  font-style: italic;
}

/* Spinner accent */
.fa-spinner.fa-spin { color: #0ea5e9; }

/* ===== Command Palette (Cmd+K) ===== */
#cmdk-backdrop {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(15,23,42,0.55);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
#cmdk-backdrop.open { display: flex; }
#cmdk-modal {
  background: #fff; border-radius: 14px;
  width: min(580px, 92vw); max-height: 70vh;
  box-shadow: 0 25px 60px rgba(15,23,42,0.25);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: cmdkPop 0.2s ease-out;
}
@keyframes cmdkPop {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
#cmdk-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid #e2e8f0;
}
#cmdk-input {
  flex: 1; border: 0; outline: none; font-size: 16px;
  color: #0f172a; background: transparent;
}
#cmdk-input::placeholder { color: #94a3b8; }
#cmdk-shortcut {
  background: #f1f5f9; color: #64748b;
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-family: ui-monospace, monospace;
}
#cmdk-results {
  overflow-y: auto; flex: 1; padding: 6px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; border-radius: 6px;
  font-size: 14px; color: #334155;
  transition: background 0.1s;
}
.cmdk-item:hover, .cmdk-item.active {
  background: #e0f2fe; color: #075985;
}
.cmdk-item .cmdk-icon {
  width: 20px; height: 20px; color: #64748b;
  display: flex; align-items: center; justify-content: center;
}
.cmdk-item.active .cmdk-icon { color: #075985; }
.cmdk-item .cmdk-label { flex: 1; }
.cmdk-item .cmdk-path { font-size: 11px; color: #94a3b8; }
.cmdk-empty {
  padding: 40px 18px; text-align: center; color: #94a3b8;
  font-size: 14px;
}

/* ===== Toasts ===== */
#toast-stack {
  position: fixed; bottom: 20px; right: 20px; z-index: 99999;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast-item {
  background: #fff; padding: 12px 16px 12px 14px;
  border-radius: 10px; box-shadow: 0 8px 22px rgba(15,23,42,0.15);
  min-width: 280px; max-width: 380px;
  display: flex; align-items: flex-start; gap: 10px;
  border-left: 4px solid #0ea5e9;
  pointer-events: auto;
  animation: toastIn 0.22s ease-out;
  font-size: 14px; color: #0f172a;
}
.toast-item.success { border-left-color: #16a34a; }
.toast-item.danger  { border-left-color: #dc2626; }
.toast-item.warning { border-left-color: #f59e0b; }
.toast-item.info    { border-left-color: #0ea5e9; }
.toast-item .toast-ic {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 13px; font-weight: 700; color: #fff;
}
.toast-item.success .toast-ic { background: #16a34a; }
.toast-item.danger  .toast-ic { background: #dc2626; }
.toast-item.warning .toast-ic { background: #f59e0b; }
.toast-item.info    .toast-ic { background: #0ea5e9; }
.toast-item .toast-msg { flex: 1; line-height: 1.4; }
.toast-item .toast-close {
  border: 0; background: transparent; color: #94a3b8;
  font-size: 16px; cursor: pointer; padding: 0; line-height: 1;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}
.toast-item.leaving { animation: toastOut 0.2s ease-in forwards; }
@keyframes toastOut {
  to { opacity: 0; transform: translateX(20px); }
}


/* Skeleton loader for tables */
@keyframes skeletonPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =========================================================================
   MODO EMBED — la página se está mostrando dentro de un iframe (QuickViewModal).
   Ocultamos chrome (sidebar, header, footer, breadcrumb, tabs) y dejamos
   visible el contenido del form. CSS quirúrgico para no romper el layout JS.
   ========================================================================= */
html.is-embed,
body.is-embed {
  background: #fff !important;
  overflow-x: hidden;
  height: auto !important;
  min-height: 100vh !important;
}
body.is-embed .main-header,
body.is-embed .main-sidebar,
body.is-embed .main-footer,
body.is-embed .breadcrumb,
body.is-embed .content-header,
body.is-embed #bot-widget-root,
body.is-embed #toast-stack,
body.is-embed #cmdk-backdrop,
body.is-embed .order-tabs-mobile-nav,
body.is-embed .order-tabs-mobile-select,
body.is-embed .kt-portlet__head {
  display: none !important;
}
/* Wrapper: sin margin-left de sidebar, sin padding-top de header */
body.is-embed .wrapper {
  min-height: 100vh !important;
}
body.is-embed .content-wrapper,
body.is-embed.fixed .content-wrapper {
  margin-left: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 24px !important;
  min-height: 100vh !important;
  height: auto !important;
  background: #fff !important;
}
body.is-embed .container-full {
  padding: 0 !important;
  max-width: 100% !important;
}
body.is-embed section.content {
  padding: 8px 12px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.is-embed .kt-portlet,
body.is-embed .kt-portlet--mobile {
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Botones Cancel / Save / Clean: ocultos para no editar accidentalmente
   desde el modal (usuario puede pulsar "Abrir edit" en el header del modal). */
body.is-embed .factory-edit-actions,
body.is-embed form > .col-12 > .btn-danger,
body.is-embed form > .col-12 > .btn-success,
body.is-embed form > .col-12 > button[type="submit"] {
  display: none !important;
}

/* =========================================================================
   FORM EDIT FACTORY 1 — distribución limpia + tipografía consistente
   Aplica tanto en desktop como en móvil. En móvil cada campo va a 100%;
   en desktop quedan en grilla de 3 columnas (col-md-4 nativo de Bootstrap).
   ========================================================================= */
.factory-edit-grid {
  --field-gap: 14px;
  padding: 12px 6px;
}
.factory-edit-grid > [class*="col-"] {
  margin-top: var(--field-gap) !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.factory-edit-grid label {
  display: block;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px !important;
}
.factory-edit-grid label .text-danger {
  margin-left: 2px;
  font-weight: 800;
}
.factory-edit-grid .form-control,
.factory-edit-grid input[type="text"],
.factory-edit-grid input[type="number"],
.factory-edit-grid input[type="date"],
.factory-edit-grid input[type="email"],
.factory-edit-grid textarea,
.factory-edit-grid select {
  background: #f8fafc;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 8px 10px;
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  width: 100%;
}
.factory-edit-grid .form-control:focus,
.factory-edit-grid input:focus,
.factory-edit-grid textarea:focus,
.factory-edit-grid select:focus {
  background: #fff;
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.12) !important;
  outline: none;
}
.factory-edit-grid textarea { min-height: 70px; }
/* Cluster de botones acciones (Cancel/Clean/Save) bien espaciados */
.factory-edit-actions {
  gap: 8px;
  margin-top: 20px !important;
  padding: 12px 0;
  border-top: 1px solid #e2e8f0;
}
.factory-edit-actions .btn {
  flex: 0 0 auto;
}

/* Móvil: el grid pasa a 1 columna, acciones se vuelven full-width sticky */
@media (max-width: 767px) {
  .factory-edit-grid > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .factory-edit-actions {
    flex-direction: row;
    justify-content: space-between;
  }
  .factory-edit-actions .btn { flex: 1 1 auto; min-width: 80px; }
  .factory-edit-actions .btn-success { flex: 1 1 100%; order: 99; }
}


/* =========================================================================
   MOBILE RESPONSIVE LAYER — fix logo + tablas como cards + UX mejorada
   ========================================================================= */

/* ---- Logo en navbar móvil ---- */
.mobile-logo-item {
  display: flex !important;
  align-items: center;
  height: 60px;
}
.mobile-logo-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px 10px !important;
  height: 60px;
  line-height: 1 !important;
}
.mobile-logo-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

/* En móvil real (<768) refuerza visibilidad por si AdminLTE recorta */
@media (max-width: 767px) {
  .main-header .navbar { min-height: 60px; }
  .header-megamenu li.mobile-logo-item { height: 60px !important; }
  .header-megamenu li.mobile-logo-item a { padding: 6px 10px !important; }
  .header-megamenu li.mobile-logo-item img {
    height: 40px !important;
    width: auto !important;
    max-width: 140px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Reducir padding lateral del navbar para que quepan logo + iconos */
  .navbar.navbar-static-top.pl-10 { padding-left: 4px !important; }
  .navbar-custom-menu.r-side { padding-right: 4px !important; }
  .navbar-custom-menu .navbar-nav { margin-right: 4px !important; }
}

/* ---- Evitar scroll horizontal accidental ---- */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  .content-wrapper, .container-full, section.content { max-width: 100vw; overflow-x: hidden; }
}

/* ---- TABLA → CARDS en móvil (solo cuando la tabla está marcada como responsive-cards) ----
   El HTML de la tabla añade data-label="..." a cada td. En móvil, ocultamos thead
   y convertimos cada tr en una tarjeta visual con label/valor.
   El opt-in se hace con la clase .table-cards en la tabla.
*/
@media (max-width: 767px) {
  /* El listado de Mockups/Cruds envuelve la tabla en un <div style="overflow-x:auto">
     para permitir scroll lateral en desktop. En modo cards (móvil) anulamos ese
     scroll forzando overflow visible en cualquier div padre directo. */
  .kt-portlet__body > div,
  .kt-datatable > div,
  .kt-datatable {
    overflow-x: visible !important;
    overflow: visible !important;
  }
  .table-cards { display: block; border: 0 !important; background: transparent !important; width: 100% !important; }
  .table-cards thead { display: none !important; }
  .table-cards tbody { display: block; }
  .table-cards tbody tr {
    /* flex+column en lugar de block para poder reordenar celdas con CSS order */
    display: flex !important;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.05);
    margin: 0 auto 12px auto;
    padding: 14px 16px;
    width: calc(100% - 4px);
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Orden visual de la tarjeta:
     1) Número de pedido (card-primary)
     2) Estado del pedido (factory o cliente)
     3) Resto de columnas en orden natural
     4) Acciones al final */
  .table-cards tbody td.card-primary { order: -10 !important; }
  .table-cards tbody td[data-label="Order State"],
  .table-cards tbody td[data-label="ORDER STATE"],
  .table-cards tbody td[data-label="Estado"],
  .table-cards tbody td[data-label="Estado Pedido"],
  .table-cards tbody td[data-label="Client Order State"],
  .table-cards tbody td[data-label="CLIENT ORDER STATE"],
  .table-cards tbody td[data-label="Estado Cliente"] { order: -5 !important; }
  .table-cards tbody td.card-actions { order: 999 !important; }
  /* Limitar altura de celdas con muchos productos (sample_approve_client) */
  .table-cards tbody td[data-label*="Sample Approve"],
  .table-cards tbody td[data-label*="SAMPLE APPROVE"] {
    display: block !important;
    text-align: left;
    max-height: 110px;
    overflow: hidden;
    position: relative;
  }
  .table-cards tbody td[data-label*="Sample Approve"]::before,
  .table-cards tbody td[data-label*="SAMPLE APPROVE"]::before {
    display: block;
    margin-bottom: 6px;
    max-width: 100%;
    text-align: left;
  }
  /* Inner: limitar productos a 1 visible, ocultar el resto hasta tap "ver más" */
  .table-cards tbody td[data-label*="ample"] .sample-product-block:nth-child(n+2),
  .table-cards tbody td[data-label*="ample"] .sample-approve-block:nth-child(n+2) {
    display: none;
  }
  /* Cualquier celda con contenido alto: clip a 120px con fade */
  .table-cards tbody td {
    max-height: 200px;
    overflow: hidden;
  }
  .table-cards tbody td.card-primary,
  .table-cards tbody td.card-actions {
    max-height: none;
    overflow: visible;
  }
  .table-cards tbody tr:hover { background: #fff !important; }
  .table-cards tbody tr:nth-child(even):not(:hover) { background: #fff !important; }
  .table-cards tbody td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed #f1f5f9 !important;
    text-align: right;
    font-size: 13px;
    min-height: 32px;
    /* Anular min-width / max-width inline que en desktop sirven para
       definir el ancho de las columnas y en móvil rompen el layout. */
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .table-cards tbody td:last-child { border-bottom: 0 !important; }
  .table-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-align: left;
  }
  /* La celda "card-primary" se renderiza grande arriba sin label.
     Es también el header clickable que pliega/despliega la card. */
  .table-cards tbody td.card-primary {
    display: block !important;
    text-align: left !important;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    padding: 4px 32px 8px 0 !important;
    margin-bottom: 4px;
    border-bottom: 1px solid #e2e8f0 !important;
    min-height: 0;
    position: relative;
    cursor: pointer;
    user-select: none;
  }
  .table-cards tbody td.card-primary::before { display: none !important; }
  /* Chevron a la derecha del header: indica si la card está plegada o desplegada */
  .table-cards tbody td.card-primary::after {
    content: '\25BE'; /* ▾ desplegado */
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #64748b;
    pointer-events: none;
    transition: transform 0.15s ease;
  }
  .table-cards tbody tr.card-collapsed td.card-primary::after {
    content: '\25B8'; /* ▸ plegado */
  }
  /* Cuando la card está plegada, ocultar todo menos el primary */
  .table-cards tbody tr.card-collapsed td:not(.card-primary),
  .table-cards tbody tr.card-collapsed th {
    display: none !important;
  }
  .table-cards tbody tr.card-collapsed td.card-primary {
    border-bottom: 0 !important;
    margin-bottom: 0;
    padding-bottom: 4px !important;
  }
  /* Quick-view ojo dentro del card-primary: separado, tap-target generoso */
  .table-cards tbody td.card-primary .card-quickview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 10px !important;
    border-radius: 50%;
    background: #e0f2fe;
    color: #0284c7 !important;
    transition: background 0.15s, transform 0.1s;
    vertical-align: middle;
  }
  .table-cards tbody td.card-primary .card-quickview:hover,
  .table-cards tbody td.card-primary .card-quickview:active {
    background: #bae6fd;
    transform: scale(1.05);
  }
  .table-cards tbody td.card-primary .card-quickview i {
    font-size: 14px;
  }
  /* Link del nº pedido (no del ojo): hereda color de texto, sin underline */
  .table-cards tbody td.card-primary .card-edit-link {
    color: #0f172a !important;
    text-decoration: none !important;
  }
  .table-cards tbody td.card-primary .card-edit-link:hover {
    color: #075985 !important;
    text-decoration: underline !important;
  }
  /* La fila de acciones agrupada en bloque inferior */
  .table-cards tbody td.card-actions {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end !important;
    gap: 6px;
    padding-top: 10px !important;
    border-bottom: 0 !important;
  }
  .table-cards tbody td.card-actions::before { display: none !important; }
  /* Inputs/selects ocupan más espacio en el valor */
  .table-cards tbody td .form-control,
  .table-cards tbody td select,
  .table-cards tbody td input {
    max-width: 60%;
    font-size: 13px;
  }
  /* Tipos de celda que esconden o cambian */
  .table-cards tbody td.card-hide-mobile,
  .table-cards tbody th.card-hide-mobile { display: none !important; }
  /* Por defecto, los <th> del tbody (checkbox) se ocultan en cards si no
     llevan clase explícita. */
  .table-cards tbody tr > th { display: none; }

  /* Sub-tablas dentro de una table-cards (ej. Customs Almacén tiene una
     tabla anidada de Picture/Description/QTY/Estado/Botón dentro de la
     columna PRODUCTOS) — también se convierten a cards anidadas. */
  .table-cards tbody td table {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
  }
  .table-cards tbody td table > thead { display: none !important; }
  .table-cards tbody td table > tbody { display: block !important; }
  .table-cards tbody td table > tbody > tr {
    display: block !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
    padding: 8px !important;
    background: #fafbfc !important;
  }
  .table-cards tbody td table > tbody > tr > td,
  .table-cards tbody td table > tbody > tr > th {
    display: block !important;
    padding: 4px 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
    text-align: left !important;
  }
  .table-cards tbody td table input,
  .table-cards tbody td table select {
    width: 100% !important;
    max-width: 100% !important;
  }
  .table-cards tbody td table img { max-width: 100% !important; height: auto; }

  /* ---- Desplegable de inspección por producto (Inspecciones) en móvil ----
     El chevron de expandir se ocultaba con card-hide-mobile y dejaba al
     inspector atrapado en la inspección "genérica" (solo lectura). Aquí el
     control se muestra como una fila tappable "Inspect products" y la
     sub-tabla de productos se pinta como tarjetas con su label + botón editar
     (que es la única vía para editar la inspección de cada producto). */
  .table-cards tbody td.insp-expand-toggle {
    justify-content: flex-start !important;
    gap: 8px;
    cursor: pointer;
    color: #2563eb;
    font-weight: 600;
    padding: 10px 0 !important;
  }
  .table-cards tbody td.insp-expand-toggle::before { display: none !important; }
  .table-cards tbody td.insp-expand-toggle .insp-expand-toggle__text { display: inline; }
  /* Fila/celda del desplegable: todo el ancho, sin recorte ni flex/label. */
  .table-cards tbody tr.insp-expand-row {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .table-cards tbody td.insp-expand-cell {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    text-align: left !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 0 !important;
  }
  .table-cards tbody td.insp-expand-cell::before { display: none !important; }
  /* Cada producto: label a la izquierda del valor. */
  .insp-products > tbody > tr > td::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 78px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 8px;
  }
  .insp-products > tbody > tr > td.insp-products__name { font-weight: 600; color: #0f172a; }
  .insp-products > tbody > tr > td.insp-products__actions {
    display: flex !important;
    align-items: center;
    gap: 18px;
    padding-top: 8px !important;
  }
}

/* Desktop: el toggle del desplegable muestra solo el chevron (el texto
   "Inspect products" es para el modo cards en móvil). */
.insp-expand-toggle__text { display: none; }

/* ---- TABLA EDITABLE (MockupsTable dentro de FACTORY 1/PAGE 2/CLIENTS 1 edit):
   variante de table-cards donde cada celda apila label arriba + widget abajo
   ocupando todo el ancho (los inputs/uploads no caben en 50% como en lectura). ---- */
@media (max-width: 767px) {
  .table-cards-edit-wrapper { overflow: visible !important; }
  .table-cards-edit {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
  }
  .table-cards-edit > thead { display: none !important; }
  .table-cards-edit > tbody { display: block !important; }
  .table-cards-edit > tbody > tr {
    display: block !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin: 0 0 12px 0 !important;
    padding: 14px 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
  }
  .table-cards-edit > tbody > tr > td {
    display: block !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed #f1f5f9 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .table-cards-edit > tbody > tr > td:last-child { border-bottom: 0 !important; }
  .table-cards-edit > tbody > tr > td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .table-cards-edit > tbody > tr > td:not([data-label])::before,
  .table-cards-edit > tbody > tr > td[data-label=""]::before { display: none; }
  .table-cards-edit > tbody > tr > td input,
  .table-cards-edit > tbody > tr > td textarea,
  .table-cards-edit > tbody > tr > td select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Imágenes en cards editables (Front/Sides/Back de mockups, logos, tablas medidas...):
     más grandes y centradas para que sean visuales. Override del inline width:60px
     que pone UploadFile.preview() en desktop. */
  .table-cards-edit > tbody > tr > td img {
    width: 220px !important;
    max-width: 90% !important;
    height: auto !important;
    display: block !important;
    margin: 8px auto !important;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.08);
  }
  /* El <a> que envuelve cada imagen del UploadFile: centrarlo (sin :has() por
     compatibilidad). Como las celdas de upload solo contienen el <a> + el
     input file, dejamos los <a> como block centrados. */
  .table-cards-edit > tbody > tr > td a {
    text-align: center;
  }
  .table-cards-edit > tbody > tr > td a > img {
    margin: 0 auto !important;
  }
  /* Botón "Cambiar / Subir archivo" del UploadFile centrado bajo la imagen */
  .table-cards-edit > tbody > tr > td .upload-file-controls,
  .table-cards-edit > tbody > tr > td input[type="file"] {
    margin: 6px auto !important;
    display: block;
  }
}

/* ---- Imágenes dentro de cards normales y sub-tablas (Customs Almacén, etc.) ---- */
@media (max-width: 767px) {
  /* Sub-tabla anidada dentro de una table-cards (ej. productos en customs almacén) */
  .table-cards tbody td table img {
    width: 200px !important;
    max-width: 90% !important;
    height: auto !important;
    display: block !important;
    margin: 8px auto !important;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.08);
  }
  /* Imágenes embebidas en celdas normales (HTML del backend en sample_approve, etc.) */
  .table-cards tbody td > img,
  .table-cards tbody td a > img {
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    margin: 4px auto;
    border-radius: 6px;
  }
}

/* ---- OrderTabs: dropdown vertical en móvil ---- */
@media (max-width: 767px) {
  .order-tabs-mobile-select { display: block !important; }
  .order-tabs-mobile-nav { display: none !important; }
}
@media (min-width: 768px) {
  .order-tabs-mobile-select { display: none !important; }
  .order-tabs-mobile-nav { display: flex !important; }
}

/* ---- Filters drawer en móvil ----
   El TableHeader oculta los filtros por defecto en móvil; el botón "Filters"
   los abre como bottom sheet (slide up).
*/
@media (max-width: 767px) {
  .crud-filters-toggle { display: inline-flex !important; }
  .crud-filters-row {
    position: fixed;
    inset: auto 0 0 0;
    background: #fff;
    z-index: 1050;
    box-shadow: 0 -8px 24px rgba(15,23,42,0.15);
    border-radius: 16px 16px 0 0;
    padding: 16px 14px 24px;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
  }
  .crud-filters-row.open {
    transform: translateY(0);
  }
  .crud-filters-row .crud-filter-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
  }
  .crud-filters-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.4);
    z-index: 1049; display: none;
  }
  .crud-filters-backdrop.open { display: block; }
}
@media (min-width: 768px) {
  .crud-filters-toggle { display: none !important; }
  .crud-filters-backdrop { display: none !important; }
}

/* ---- Tipografías y espaciados móviles más cómodos ---- */
@media (max-width: 767px) {
  .content-header { padding: 8px 12px !important; }
  .content-header h3.page-title { font-size: 1.1rem !important; margin: 0 !important; }
  .content-header .breadcrumb { font-size: 11px; }
  section.content { padding: 8px 6px !important; }
  .kt-portlet__head-title { font-size: 1rem !important; }
  .card-body, .box-body, .kt-portlet__body { padding: 12px !important; }
  /* Botones algo más grandes para que se puedan pulsar */
  .btn, .btn-sm { min-height: 36px; padding: 6px 12px; }
  /* Modales más cercanos a fullscreen */
  .modal-dialog { margin: 6px; max-width: calc(100vw - 12px); }
  .modal-content { border-radius: 12px !important; }
  .modal-body { padding: 14px !important; }
  /* Formularios: full width labels */
  .form-group label { font-size: 12px; margin-bottom: 4px; }
}

/* ---- Sidebar móvil: respetar 240px de AdminLTE para que el translate(-240px,0) lo oculte por completo. ---- */
@media (max-width: 767px) {
  .main-sidebar {
    width: 240px !important;
    box-shadow: 4px 0 20px rgba(15,23,42,0.2);
  }
}

/* =========================================================================
   FIX SOLAPAMIENTOS Y ESPACIOS EXTRAS EN MÓVIL
   AdminLTE asume header de 110px en móvil (legacy con search bar apilada)
   pero nuestro header solo mide 60px. Esto provoca:
   - 50px de espacio en blanco entre header y sidebar
   - 50px extra de scroll inicial en el contenido
   ========================================================================= */
@media (max-width: 767px) {
  /* Sidebar: arrancar justo debajo del header de 60px */
  .main-sidebar {
    margin-top: 60px !important;
    padding-top: 0 !important;
  }
  /* Contenido: padding-top igual al header real, no 110px */
  .fixed .content-wrapper,
  .fixed .right-side {
    padding-top: 60px !important;
  }
  /* Header con altura fija de 60px (consistente con desktop) */
  .main-header {
    min-height: 60px;
    height: 60px;
  }
  .main-header .navbar {
    min-height: 60px;
    height: 60px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Espacio entre iconos del lado derecho del navbar (Chat / Notif / Logout)
     para que no queden pegados unos a otros. */
  .navbar-custom-menu .navbar-nav > li > a {
    padding: 0 10px !important;
  }
  .navbar-custom-menu .navbar-nav > li {
    height: 60px !important;
    display: flex !important;
    align-items: center;
  }
  /* Hamburger + logo + iconos en línea sin saltos de altura */
  .header-megamenu.nav { flex-wrap: nowrap !important; align-items: center; }
  .header-megamenu > li { height: 60px !important; display: flex !important; align-items: center; }
  /* Footer: que no tape el contenido al final */
  .main-footer { margin-left: 0 !important; padding: 12px 8px !important; }
}

/* ---- Bot widget (chat flotante): que no tape acciones en móvil ---- */
@media (max-width: 767px) {
  #bot-widget-root { bottom: 8px !important; right: 8px !important; }
  #toast-stack { bottom: 12px !important; right: 12px !important; left: 12px !important; }
  .toast-item { min-width: 0 !important; max-width: 100% !important; }
}

/* ---- Tabs internas del listado (FACTORY 1 / PAGE 2 / CLIENTS 1 + IN PROGRESS / ALL / DELETED):
   en móvil quedaban en dos filas amontonadas. Las hacemos scrollables horizontalmente
   con scrollbar invisible (menos malo que el wrap a 3 filas). ---- */
@media (max-width: 767px) {
  .kt-portlet .row > ul.nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .kt-portlet .row > ul.nav-tabs::-webkit-scrollbar { display: none; }
  .kt-portlet .row > ul.nav-tabs .nav-link {
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px !important;
  }
}

/* ---- Cards en móvil: que no toquen los bordes y respiren ---- */
@media (max-width: 767px) {
  .kt-portlet, .kt-portlet--mobile { border-radius: 12px !important; margin: 0 0 12px 0 !important; }
  .kt-portlet__body { padding: 8px !important; }
}

/* =========================================================================
   FIX SCROLL HORIZONTAL EN FORMULARIOS Y CONTENIDO GENERAL EN MÓVIL
   Aplica overflow-x: hidden a wrappers principales y limita anchos de
   imágenes/inputs/iframes. Las tablas tradicionales NO se ven afectadas
   porque ya tienen su propio wrapper con scroll cuando hace falta.
   ========================================================================= */
@media (max-width: 767px) {
  .content-wrapper,
  .container-full,
  section.content,
  .kt-portlet,
  .kt-portlet__body,
  .card,
  .card-body,
  .box,
  .box-body,
  .form-group,
  .modal-body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  /* .row: que sea full width pero permita el wrap natural de Bootstrap */
  .row { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .row > [class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  /* Media responsive */
  img, iframe, video, embed, object, canvas {
    max-width: 100% !important;
    height: auto;
  }
  /* Inputs / textareas / selects no exceden ancho */
  .form-control, input:not([type="checkbox"]):not([type="radio"]), textarea, select {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Pre/code largo: wrap en lugar de scroll */
  pre, code { white-space: pre-wrap !important; word-break: break-word; }
  /* Tarjetas/secciones con line de producto + precio: que rompan a nueva línea
     en lugar de salirse a la derecha (común en Edit2 / Edit3 / Form). */
  .product-line, .producto-row, .order-item-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  /* Flex-rows dentro de formularios / portlets que se desborden, que envuelvan.
     Quedan EXCLUIDOS navbar/header para no romper layout de header móvil. */
  .kt-portlet .d-flex:not(.flex-column):not(.flex-nowrap-mobile),
  .card .d-flex:not(.flex-column):not(.flex-nowrap-mobile),
  .modal-body .d-flex:not(.flex-column):not(.flex-nowrap-mobile),
  form .d-flex:not(.flex-column):not(.flex-nowrap-mobile) {
    flex-wrap: wrap !important;
  }
}