/* Emich Trucking v6.8.2 · Corrección estructural de UI
   Prioridad: nada oculto bajo el sidebar/header, modales completos y legibilidad consistente. */
:root{
  --ui682-sidebar:300px;
  --ui682-pad:32px;
  --ui682-modal-z:1200;
  --ui682-toast-z:1300;
}

/* Shell robusto: el contenido nunca debe rebasar el viewport. */
body.ui68{overflow-x:hidden;font-size:15.5px;line-height:1.45}
body.ui68 .app{display:flex;width:100%;max-width:100vw;min-height:100vh;overflow-x:clip;align-items:stretch}
body.ui68 .side{
  flex:0 0 var(--ui682-sidebar)!important;
  width:var(--ui682-sidebar)!important;
  min-width:var(--ui682-sidebar)!important;
  max-width:var(--ui682-sidebar)!important;
  z-index:40!important;
  overflow:hidden;
}
body.ui68 .brand-logo{
  height:112px!important;
  background-size:contain!important;
  background-position:center!important;
}
body.ui68 .brand-meta b{font-size:18px!important}
body.ui68 .nav{min-height:0;overflow-y:auto;overflow-x:hidden}
body.ui68 .nav button{font-size:13.5px!important}

body.ui68 .main{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0 var(--ui682-pad) 42px!important;
  overflow-x:hidden;
}
body.ui68 #view{
  width:100%!important;
  min-width:0!important;
  max-width:1600px!important;
  margin:0 auto!important;
  overflow:visible;
}
body.ui68 .top{
  width:auto!important;
  min-width:0!important;
  margin:0 calc(var(--ui682-pad) * -1) 22px!important;
  padding:19px var(--ui682-pad) 17px!important;
  z-index:30!important;
  gap:18px!important;
}
body.ui68 .top>div:first-child{min-width:0;flex:1 1 auto}
body.ui68 .top h1{font-size:27px!important;white-space:normal;overflow-wrap:anywhere}
body.ui68 .top-actions{
  flex:0 0 auto;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:9px!important;
}
body.ui68 .top-actions .btn{white-space:nowrap}

/* El problema principal de 6.8.1: el modal quedaba DETRÁS del sidebar y del header. */
body.ui68 .modal{
  z-index:var(--ui682-modal-z)!important;
  inset:0!important;
  padding:24px!important;
  background:rgba(35,12,21,.60)!important;
  backdrop-filter:blur(5px) saturate(105%);
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:auto!important;
  overscroll-behavior:contain;
}
body.ui68 .modalbox{
  position:relative!important;
  width:min(100%,900px)!important;
  max-width:900px!important;
  max-height:calc(100dvh - 48px)!important;
  margin:auto!important;
  padding:25px!important;
  overflow:auto!important;
  border:1px solid rgba(122,81,96,.16)!important;
  box-shadow:0 30px 90px rgba(29,7,16,.28)!important;
}
body.ui68 .modalbox.v52-modalbox{
  width:min(1260px,calc(100vw - 48px))!important;
  max-width:1260px!important;
  padding:28px 30px 24px!important;
}
body.ui68 .v52-quote-head{
  position:relative!important;
  padding-right:52px!important;
  gap:16px!important;
}
body.ui68 .v682-modal-close{
  position:absolute;
  top:-4px;
  right:0;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #ded2d7;
  border-radius:12px;
  background:#fff;
  color:#5a454e;
  font-size:25px;
  line-height:1;
  font-weight:500;
  box-shadow:0 3px 12px rgba(61,27,40,.06);
  cursor:pointer;
}
body.ui68 .v682-modal-close:hover{background:#faf4f6;border-color:#cdb8c0;color:#7b1735}
body.ui68 .toast{z-index:var(--ui682-toast-z)!important}

/* Cotizador: espacio real, sin campos cortados. */
body.ui68 .v52-stepper{width:100%!important;margin:20px 0!important;gap:8px!important}
body.ui68 .v52-stepper button{min-width:0!important;font-size:13px!important;padding:11px 12px!important}
body.ui68 .v52-stepper button b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ui68 .v52-pane{min-width:0!important;padding-top:18px!important}
body.ui68 .v52-pane-title{margin-bottom:18px!important}
body.ui68 .v52-pane-title h3{font-size:20px!important}
body.ui68 .v52-pane-title p{font-size:13px!important}
body.ui68 .v52-modalbox .formgrid.two-col{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}
body.ui68 .v52-modalbox .field{min-width:0}
body.ui68 .v52-modalbox .field label{font-size:12.5px!important}
body.ui68 .v52-modalbox .field input,
body.ui68 .v52-modalbox .field select,
body.ui68 .v52-modalbox .field textarea{font-size:14px!important;min-width:0!important}
body.ui68 .v52-nav-actions{
  margin-top:22px!important;
  padding-top:16px!important;
  position:sticky;
  bottom:-24px;
  z-index:4;
  background:linear-gradient(to bottom,rgba(255,255,255,.85),#fff 24%);
  padding-bottom:4px;
}
body.ui68 .v52-nav-actions>.btn.primary{min-width:170px}

/* Tarjetas, tablas y formularios: legibles sin escalar de más. */
body.ui68 .card{min-width:0}
body.ui68 .tablewrap{max-width:100%;overflow:auto}
body.ui68 .table{font-size:13px!important}
body.ui68 .table td{font-size:13px!important}
body.ui68 .table th{font-size:10.5px!important}
body.ui68 .field label{font-size:12px!important}
body.ui68 .field input,body.ui68 .field select,body.ui68 .field textarea{font-size:14px!important}
body.ui68 .note,body.ui68 .section-title .sub{font-size:12.5px!important}

/* Evita que barras de acciones o encabezados generen scroll horizontal. */
body.ui68 .section-title,body.ui68 .toolbar,body.ui68 .actions,
body.ui68 .v676-commercial-hero,body.ui68 .v676-priority{min-width:0;max-width:100%}
body.ui68 .section-title>*{min-width:0}
body.ui68 .actions{align-items:center}

@media(max-width:1240px){
  :root{--ui682-sidebar:272px;--ui682-pad:24px}
  body.ui68 .brand-logo{height:103px!important}
  body.ui68 .modalbox.v52-modalbox{width:min(1160px,calc(100vw - 32px))!important;max-width:1160px!important}
}

@media(max-width:1020px){
  :root{--ui682-sidebar:252px;--ui682-pad:20px}
  body.ui68 .brand-logo{height:96px!important}
  body.ui68 .brand-meta b{font-size:16px!important}
  body.ui68 .nav button{font-size:12.5px!important}
  body.ui68 .top h1{font-size:25px!important}
}

@media(max-width:900px){
  :root{--ui682-pad:14px}
  body.ui68{font-size:15px}
  body.ui68 .side{display:none!important}
  body.ui68 .main{width:100%!important;padding:0 var(--ui682-pad) 92px!important}
  body.ui68 .top{margin:0 calc(var(--ui682-pad) * -1) 15px!important;padding:15px var(--ui682-pad) 14px!important}
  body.ui68 .top h1{font-size:23px!important}
  body.ui68 .modal{padding:10px!important;align-items:flex-start!important}
  body.ui68 .modalbox,body.ui68 .modalbox.v52-modalbox{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 20px)!important;
    padding:20px!important;
  }
  body.ui68 .v52-nav-actions{bottom:-20px}
}

@media(max-width:680px){
  body.ui68 .top{align-items:flex-start!important}
  body.ui68 .top-actions{max-width:52%}
  body.ui68 .top-actions .btn{font-size:12px!important;padding:9px 10px!important}
  body.ui68 .modalbox.v52-modalbox{padding:17px 15px!important}
  body.ui68 .v52-quote-head{padding-right:46px!important;flex-direction:column!important}
  body.ui68 .v682-modal-close{width:38px;height:38px;font-size:23px}
  body.ui68 .v52-stepper{grid-template-columns:repeat(4,minmax(44px,1fr))!important;gap:5px!important}
  body.ui68 .v52-stepper button{justify-content:center!important;padding:9px 6px!important}
  body.ui68 .v52-stepper button b{display:none!important}
  body.ui68 .v52-modalbox .formgrid.two-col{grid-template-columns:1fr!important;gap:13px!important}
  body.ui68 .v52-modalbox .span2{grid-column:span 1!important}
  body.ui68 .v52-nav-actions{gap:8px!important;align-items:stretch!important}
  body.ui68 .v52-nav-actions>span{display:none}
  body.ui68 .v52-nav-actions>.btn,body.ui68 .v52-final-actions .btn{flex:1 1 140px}
}

@media(max-width:420px){
  body.ui68 .top-actions{max-width:none}
  body.ui68 .top-actions .btn.ghost{display:none!important}
  body.ui68 .top-actions .btn.primary{white-space:nowrap}
  body.ui68 .modal{padding:6px!important}
  body.ui68 .modalbox,body.ui68 .modalbox.v52-modalbox{max-height:calc(100dvh - 12px)!important;border-radius:16px!important}
}