*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito',Arial,sans-serif;font-size:13px;background:#EBF6FF;min-height:100vh}

.central-legacy-shell{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.central-legacy-shell .topbar{flex:0 0 auto}
.central-legacy-shell .tabs-wrap{flex:0 0 auto}

.topbar{background:linear-gradient(135deg,#00AAFF 0%,#0055AA 100%);padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:52px;position:sticky;top:0;z-index:200;box-shadow:0 2px 12px rgba(0,80,180,.3)}
.tb-left{display:flex;align-items:center;gap:10px}
.tb-right{display:flex;align-items:center;gap:8px}
.back-btn{color:rgba(255,255,255,.85);font-size:12px;font-weight:800;text-decoration:none;display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;border:1.5px solid rgba(255,255,255,.3);transition:background .15s}
.back-btn:hover{background:rgba(255,255,255,.15)}
.tb-title{color:#fff;font-size:16px;font-weight:900}
.tb-ts{color:rgba(255,255,255,.65);font-size:10px;font-weight:700}
.tb-user{background:rgba(255,255,255,.2);color:#fff;border-radius:20px;padding:4px 12px;font-size:11px;font-weight:800}
.btn-upload{border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.15);color:#fff;border-radius:20px;padding:5px 14px;font-size:11px;font-weight:800;cursor:pointer;font-family:'Nunito',Arial;transition:background .15s;white-space:nowrap}
.btn-upload:hover{background:rgba(255,255,255,.3)}
.btn-upload.sup{background:rgba(255,200,0,.25);border-color:rgba(255,200,0,.6)}

/* top:0 es el valor de respaldo antes de que CentralLegacyEmbed mida el
   alto real del <header> del AppShell (unico header de la pagina ahora
   que se elimino la topbar legacy) y lo aplique como estilo en linea --
   ver el efecto "syncTabsWrapTop" en CentralLegacyEmbed.tsx. Sin esa
   medicion en vivo, un valor fijo se desincroniza apenas cambia el alto
   real del header (ya paso con el topbar legacy que este archivo tenia
   antes: 52px hardcodeado). */
.tabs-wrap{background:#fff;border-bottom:2px solid #CCE9FF;padding:0 20px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;z-index:199}
.tabs-main{display:flex;gap:2px;align-items:flex-end}
.tab-btn{padding:12px 18px 10px;font-family:'Nunito',Arial;font-size:12px;font-weight:800;color:#6699BB;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;transition:color .15s,border-color .15s;text-transform:uppercase;letter-spacing:.3px}
.tab-btn:hover{color:#0077BB}
.tab-btn.active{color:#00AAFF;border-bottom-color:#00AAFF}
.tab-help{font-size:11px;line-height:1.35;color:#64748b;font-weight:800;padding:0 2px 10px}

.main{padding:16px 20px}
.tab-panel{display:none}
.tab-panel.active{display:block}
/* Control de Bultos (Bloque 1 pantalla completa): .main ya usa el ancho
   completo por defecto (sin max-width) -- esta clase solo quita el padding
   lateral cuando la pestana activa es "bultos", para que el iframe llegue
   hasta el borde sin dejar un margen que ninguna otra pestana necesita. */
.main.main-full{padding-left:0;padding-right:0}
#tab-bultos{height:100%}
#tab-rapido{min-height:calc(100vh - 170px);padding:0 20px 16px}

.filter-bar{background:#fff;border-radius:12px;padding:11px 14px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;box-shadow:0 2px 8px rgba(0,80,180,.08)}
.filter-bar label{font-size:10px;font-weight:800;color:#0077BB;text-transform:uppercase;letter-spacing:.4px}
.filter-bar select,.filter-bar input[type=text]{border:1.5px solid #CCE9FF;border-radius:8px;padding:6px 10px;font-size:12px;font-family:'Nunito',Arial;outline:none;color:#1a1a1a;background:#fff}
.filter-bar select:focus,.filter-bar input:focus{border-color:#00AAFF}
.fg{display:flex;align-items:center;gap:6px}
.btn-sm{border:1.5px solid #CCE9FF;background:#E8F6FF;color:#0077BB;border-radius:20px;padding:5px 14px;font-size:11px;font-weight:800;cursor:pointer;font-family:'Nunito',Arial;transition:all .15s}
.btn-sm:hover{border-color:#00AAFF;color:#00AAFF}
.btn-sm.active{background:#00AAFF;color:#fff;border-color:#00AAFF}
.ml-auto{margin-left:auto}

.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.kpi-card{background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 2px 8px rgba(0,80,180,.08);border-left:4px solid #00AAFF}
.kpi-card.verde{border-left-color:#27AE60}.kpi-card.naranja{border-left-color:#E67E22}.kpi-card.rojo{border-left-color:#E74C3C}
.kpi-label{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#6699BB;font-weight:800;margin-bottom:4px}
.kpi-val{font-size:26px;font-family:'Fredoka One',Arial;color:#0077BB;line-height:1}
.kpi-sub{font-size:10px;color:#99AABB;font-weight:700;margin-top:2px}

.tbl-wrap{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,80,180,.08);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
thead th{background:#F0F6FF;color:#0055AA;font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.4px;padding:10px 12px;text-align:left;white-space:nowrap;position:sticky;top:0}
.sortable-th{cursor:pointer;user-select:none}
.sortable-th:hover{background:#E0EEFF}
.sort-ind{display:inline-block;width:10px;margin-left:2px;color:#0077BB}
tbody tr{border-top:1px solid #EBF6FF;transition:background .1s}
tbody tr:hover{background:#F5FAFE}
tbody tr.total-row{background:#EBF6FF;font-weight:800;color:#0055AA}
tbody tr.expandable{cursor:pointer}
td{padding:9px 12px;vertical-align:middle}
.expand-btn{background:none;border:none;cursor:pointer;font-size:11px;color:#99AABB;margin-right:4px;transition:transform .2s;display:inline-block}
.expand-btn.open{transform:rotate(90deg)}
.detail-row td{background:#FAFCFF;padding:0}
.detail-inner{padding:8px 16px 12px 32px;border-top:1px solid #EBF6FF}
.detail-table{width:100%;font-size:11px;border-collapse:collapse}
.detail-table th{background:#F5FAFE;color:#6699BB;font-weight:800;text-transform:uppercase;font-size:9px;padding:6px 10px;text-align:left}
.detail-table td{padding:6px 10px;border-top:1px solid #F0F0F0}

.badge{display:inline-block;border-radius:20px;padding:2px 9px;font-size:10px;font-weight:800;white-space:nowrap}
.tipo-ci{background:#FEF3C7;color:#92400E}.tipo-ce{background:#DBEAFE;color:#1E40AF}.tipo-rp{background:#D1FAE5;color:#065F46}.tipo-pe{background:#EDE9FE;color:#5B21B6}.tipo-otro{background:#F3F4F6;color:#374151}
.carga-group{margin-bottom:14px}.carga-group-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#0055AA;padding:6px 0;border-bottom:2px solid #CCE9FF;margin-bottom:6px}
.carga-row{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:8px;transition:background .1s}.carga-row:hover{background:#F0F8FF}
.carga-row input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#00AAFF}
.carga-info{flex:1;font-size:12px}.carga-sol{font-weight:800;color:#0055AA}.carga-det{font-size:10px;color:#6699BB;font-weight:700}
.carga-tipo-sel{border:1.5px solid #CCE9FF;border-radius:8px;padding:3px 6px;font-size:11px;font-family:'Nunito',Arial;background:#fff}
.dup-warn{background:#FDEDEC;border:1.5px solid #F1948A;border-radius:8px;padding:8px 12px;font-size:11px;color:#922B21;font-weight:700;margin-bottom:10px}
.modal.wide{max-width:680px}

.sem{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.sem-verde{background:#27AE60}.sem-amarillo{background:#E67E22}.sem-rojo{background:#E74C3C}.sem-azul{background:#2980B9}.sem-negro{background:#2C3E50}.sem-gris{background:#95A5A6}

.pbar-wrap{background:#EBF6FF;border-radius:20px;height:6px;width:100%;min-width:60px;display:inline-block}
.pbar{background:linear-gradient(90deg,#00AAFF,#0055AA);height:6px;border-radius:20px}
.pbar.verde{background:linear-gradient(90deg,#27AE60,#1E8449)}.pbar.naranja{background:linear-gradient(90deg,#E67E22,#D35400)}
.pct-label{font-size:10px;font-weight:800;color:#6699BB;margin-left:5px}
.pbar-row{display:flex;align-items:center;white-space:nowrap}

.est-badge{display:inline-block;border-radius:8px;padding:3px 10px;font-size:10px;font-weight:800;white-space:nowrap}
.op-badge{display:inline-block;border-radius:8px;padding:3px 10px;font-size:10px;font-weight:900;white-space:nowrap}
.op-new{background:#F3F4F6;color:#374151}
.op-picking{background:#FEF3C7;color:#92400E}
.op-ready{background:#DBEAFE;color:#1E40AF}
.op-guide{background:#D1FAE5;color:#065F46}
.op-shipped{background:#D6EAF8;color:#1A5276}
.op-sub{font-size:10px;color:#99AABB;font-weight:800;line-height:1.2}
.op-name{font-weight:800;color:#1A1A1A}
.op-small{font-size:11px;color:#6699BB;font-weight:700}
.op-badge-select{display:inline-block;border-radius:8px;padding:3px 8px;font-size:10px;font-weight:900;white-space:nowrap;border:none;cursor:pointer;font-family:'Nunito',Arial;-webkit-appearance:none;appearance:none}
.op-badge-select:disabled{opacity:.6;cursor:wait}
.resumen-box{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.resumen-chip{background:#F0F8FF;border:1px solid #CCE9FF;border-radius:10px;padding:7px 12px;font-size:11px;color:#1A2A3A;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;display:none;align-items:center;justify-content:center}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:16px;padding:24px;min-width:340px;max-width:540px;width:90%;max-height:88vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.modal h3{font-family:'Fredoka One',Arial;font-size:20px;color:#0077BB;margin-bottom:14px}
.modal-headline{font-size:12px;color:#6699BB;font-weight:700;margin-bottom:14px}
.modal-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.modal-tab{padding:5px 14px;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:transparent;color:#aaa;font-size:11px;font-weight:800;cursor:pointer;font-family:'Nunito',Arial}
.modal-tab.active{background:rgba(0,170,255,.16);color:#0077BB;border-color:rgba(0,170,255,.5)}
.oper-pane{display:none}
.oper-pane.active{display:block}
.modal-sect{margin-bottom:14px}
.modal-sect label{display:block;font-size:11px;font-weight:800;color:#0077BB;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.modal-sect input[type=file]{border:2px dashed #CCE9FF;border-radius:10px;padding:12px;width:100%;font-size:12px;cursor:pointer;background:#F8FBFF}
.modal-sect input[type=text],.modal-sect input[type=number],.modal-sect select,.modal-sect textarea{border:1.5px solid #CCE9FF;border-radius:8px;padding:7px 10px;font-size:12px;font-family:'Nunito',Arial;width:100%;outline:none}
.modal-sect input:focus,.modal-sect select:focus,.modal-sect textarea:focus{border-color:#00AAFF}
.modal-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-grid-3{display:grid;grid-template-columns:1fr 1fr 110px;gap:12px}
.modal-wide{max-width:1080px;width:96%;padding:18px}
.modal-full{max-width:none;width:98vw;max-height:96vh;padding:14px}
.embed-frame{width:100%;height:72vh;border:1px solid #CCE9FF;border-radius:14px;background:#fff}
.embed-frame-full{height:88vh}
.modal-note{font-size:11px;color:#6699BB;font-weight:700;line-height:1.4}
.modal-note.ok{color:#1E8449}
.modal-note.warn{color:#B9770E}
.mini-list{border:1px solid #CCE9FF;border-radius:10px;overflow:hidden;background:#fff}
.mini-row{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-top:1px solid #EBF6FF;font-size:12px}
.mini-row:first-child{border-top:none}
.mini-row strong{color:#0055AA}
.mini-tag{display:inline-block;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:800}
.mini-tag.ok{background:#D5F5E3;color:#1E8449}
.mini-tag.off{background:#EDF2F7;color:#5D6D7E}
.mini-tag.warn{background:#FEF3C7;color:#92400E}
.preview-box{background:#F0F8FF;border-radius:10px;padding:12px;margin-top:10px;font-size:12px}
.preview-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid #CCE9FF}
.preview-row:last-child{border-bottom:none}
.preview-row label{display:flex;align-items:center;gap:8px;font-weight:800;cursor:pointer}
.preview-cnt{color:#6699BB;font-size:11px}
.warn-box{background:#FEF3C7;border:1.5px solid #FCD34D;border-radius:8px;padding:9px 12px;font-size:11px;color:#92400E;font-weight:700;margin-top:8px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.modal-actions .btn-sm{padding:8px 14px}
.btn-cancel{background:#F0F0F0;color:#666;border:none;border-radius:20px;padding:8px 18px;font-size:12px;font-weight:800;cursor:pointer;font-family:'Nunito',Arial}
.btn-confirm{background:linear-gradient(135deg,#00AAFF,#0055AA);color:#fff;border:none;border-radius:20px;padding:8px 22px;font-size:12px;font-weight:800;cursor:pointer;font-family:'Nunito',Arial}
.btn-confirm:disabled{opacity:.4;cursor:not-allowed}

.alert{border-radius:10px;padding:9px 13px;margin-bottom:10px;font-size:12px;font-weight:700;display:none}
.alert.show{display:block}
.alert.ok{background:#D5F5E3;color:#1E8449;border:1.5px solid #A9DFBF}
.alert.err{background:#FDEDEC;color:#922B21;border:1.5px solid #F1948A}
.alert.info{background:#EBF5FB;color:#1A5276;border:1.5px solid #AED6F1}

.grid-input{border:1.5px solid transparent;border-radius:6px;padding:5px 8px;font-size:12px;font-family:'Nunito',Arial;width:100%;background:transparent;color:#1a1a1a;transition:border-color .15s,background .15s}
.grid-input:hover{background:#F5FAFE}
.grid-input:focus{border-color:#00AAFF;background:#fff;outline:none}
.grid-input.saved{border-color:#27AE60!important}
.grid-input.err{border-color:#E74C3C!important}

.empty{text-align:center;padding:36px;color:#99AABB;font-weight:800}
.loading-overlay{position:fixed;inset:0;background:rgba(235,246,255,.92);z-index:1000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;font-size:14px;color:#0077BB;font-weight:800}
.spinner{width:36px;height:36px;border:4px solid #CCE9FF;border-top-color:#00AAFF;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:640px){
  .topbar{height:auto;padding:10px 12px;gap:10px;align-items:flex-start}
  .tb-right{flex-wrap:wrap;justify-content:flex-end}
  .tb-title{font-size:13px}
  .btn-upload span{display:none}
  .main{padding:10px 12px}
  .kpi-strip{grid-template-columns:1fr 1fr}
  .modal{width:94%;padding:18px}
  .modal-grid-2,.modal-grid-3{grid-template-columns:1fr}
  .modal-actions{flex-direction:column}
  .modal-actions .btn-cancel,.modal-actions .btn-confirm{width:100%}
  .modal-tabs{gap:6px}
  .modal-tab{flex:1 1 auto}
}