:root{--nav:#111827;--nav2:#1f2937;--bg:#eef2f7;--surface:#fff;--text:#111827;--muted:#64748b;--border:#dbe2ea;--primary:#2563eb;--primary-dark:#1d4ed8;--success:#16a34a;--danger:#dc2626;--warning:#d97706;--sidebar:270px;--topbar:68px;--radius:14px;--shadow:0 8px 24px rgba(15,23,42,.08)}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);min-width:320px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:var(--nav);color:#fff;padding:18px 14px;display:flex;flex-direction:column;z-index:1000;overflow-y:auto}.sidebar-brand{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:4px 8px 14px;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-brand>a{background:#fff;border-radius:10px;padding:8px;display:block}.sidebar-logo{width:205px;max-width:100%;height:auto;display:block}.sidebar-close{display:none;background:transparent;color:#fff;font-size:30px;line-height:1;padding:4px 8px}.sidebar-user{display:flex;align-items:center;gap:10px;padding:16px 8px 12px}.user-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#334155;font-weight:800}.sidebar-user small,.sidebar-user strong{display:block}.sidebar-user small{color:#94a3b8;font-size:11px}.sidebar-user strong{font-size:13px;max-width:170px;overflow:hidden;text-overflow:ellipsis}.sidebar-nav{display:flex;flex-direction:column;gap:5px;flex:1}.sidebar-nav a,.sidebar-logout{display:flex;align-items:center;gap:11px;color:#e5e7eb;text-decoration:none;padding:10px 11px;border-radius:10px;font-size:13px;font-weight:650;transition:.15s}.sidebar-nav a:hover,.sidebar-nav a.active{background:#334155;color:#fff}.sidebar-nav a.active{box-shadow:inset 3px 0 0 #60a5fa}.sidebar-logout{margin-top:14px;background:#7f1d1d}.sidebar-logout:hover{background:#991b1b}.menu-icon{width:27px;min-width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-size:15px;font-weight:800;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}.icon-dashboard{background:#475569}.icon-workorder{background:#2563eb;color:#fff}.icon-generar{background:#f59e0b;color:#111827}.icon-ver{background:#6366f1;color:#fff}.icon-validacion{background:#22c55e;color:#052e16}.icon-kitting{background:#fb7185;color:#fff}.icon-ventas{background:#10b981;color:#042f2e}.icon-almacen{background:#38bdf8;color:#082f49}.icon-packing{background:#a855f7;color:#fff}.icon-users{background:#64748b;color:#fff}.icon-movimientos{background:#f97316;color:#111827}.icon-salir{background:#ef4444;color:#fff}.app-main{width:calc(100% - var(--sidebar));margin-left:var(--sidebar);min-width:0}.topbar{position:sticky;top:0;z-index:800;height:var(--topbar);display:flex;align-items:center;gap:14px;padding:0 24px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}.menu-toggle{display:none;background:var(--nav);color:#fff;width:42px;height:42px;padding:0;border-radius:10px;font-size:22px}.topbar-title{display:flex;flex-direction:column;min-width:0}.topbar-title small{color:var(--muted);font-size:11px}.topbar-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-user{margin-left:auto;color:var(--muted);font-size:13px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{padding:24px;min-width:0}.sidebar-overlay{display:none}.page-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--primary);font-weight:800}.page-heading h1,h1{margin:0 0 5px;font-size:clamp(1.55rem,2vw,2rem)}.page-heading p{margin:0;color:var(--muted)}h2,h3{color:#1e293b}.panel,.toolbar,.card-box,.preview-box,.busqueda-panel,.tabla-section{background:var(--surface);padding:18px;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px}.toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap}input,select,textarea,button{border-radius:9px}input,select,textarea{width:100%;min-width:0;padding:10px 11px;border:1px solid #cbd5e1;background:#fff;color:#111827}textarea{resize:vertical}input:focus,select:focus,textarea:focus{outline:3px solid rgba(37,99,235,.15);border-color:var(--primary)}button,.btn-nuevo,.btn-agregar,.btn-guardar,.btn-cerrar,.btn-crear,.btn-editar,.btn-eliminar,.btn-validar,.btn-imprimir{border:0;padding:10px 15px;background:var(--primary);color:#fff;cursor:pointer;font-weight:700;min-height:42px}button:hover{filter:brightness(.94)}button:disabled{opacity:.55;cursor:not-allowed}.grid-form,.almacen-grid,.ventas-grid,.comparacion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}.grid-form button{grid-column:1/-1}.form-ticket,.ticket-mes-form,.usuario-form,.validacion-form,.kitting-form,.ventas-form,.almacen-form{display:grid;gap:10px}.inline,.options-row,.top-actions,.filtros,.select-pl-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.cards,.dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{background:#fff;padding:24px;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);font-weight:700}.dashboard-card{display:flex;align-items:center;gap:14px;min-height:105px;padding:18px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);text-decoration:none;color:var(--text);transition:.15s}.dashboard-card:hover{transform:translateY(-2px);border-color:#93c5fd}.dashboard-card-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:22px}.dashboard-card span:nth-child(2){display:flex;flex-direction:column;min-width:0}.dashboard-card strong{font-size:16px}.dashboard-card small{color:var(--muted);margin-top:4px}.dashboard-card b{margin-left:auto;font-size:24px;color:#94a3b8}.table-wrap,.table-wrap-preview,.excel-table-wrap,.virtual-grid-wrap{width:100%;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:11px;background:#fff}.table-wrap:after{content:"Desliza horizontalmente para ver más columnas";display:none;padding:7px 10px;color:var(--muted);font-size:11px;background:#f8fafc}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:middle}th{background:#1f2937;color:#fff;white-space:nowrap}tbody tr:hover td{background:#f8fafc}.mes-table,.packing-format,.tabla-mini,.tickets-table{width:max-content;min-width:100%;font-size:12px}.alert-ok,.alert-success{background:#dcfce7;color:#166534;padding:12px;border-radius:10px;margin-bottom:15px;border:1px solid #86efac}.alert-error,.error{background:#fee2e2;color:#991b1b;padding:12px;border-radius:10px;margin-bottom:15px;border:1px solid #fca5a5;font-weight:700}.excel-paste{width:100%;font-family:Consolas,monospace;min-height:150px}.preview-info{color:#475569;font-size:13px}.save-toolbar{justify-content:flex-end}.save-toolbar button{min-width:240px}.excel-style-table,#previewTable{width:max-content;min-width:100%;font-size:12px}.excel-style-table th,.excel-style-table td,#previewTable th,#previewTable td{min-width:120px;max-width:260px;white-space:normal;overflow-wrap:anywhere;padding:6px 8px;border:1px solid #d1d5db;vertical-align:top}.excel-style-table thead th,#previewTable thead th{position:sticky;top:0;z-index:3}.saved-workorders-wrap{max-height:650px}.mes-titlebar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.virtual-grid-wrap{height:min(680px,70vh)}.mes-grid-table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%;box-shadow:none;font-size:12px}.mes-grid-table thead th{position:sticky;z-index:20;background:#263238;border-right:1px solid #455a64;padding:6px 8px}.mes-grid-table thead .mes-header-labels th{top:0;height:34px}.mes-grid-table thead .mes-header-filters th{top:34px;height:40px;background:#37474f;padding:4px}.column-filter{height:29px;padding:4px 6px!important;font-size:11px}.mes-grid-table tbody td{height:34px;padding:5px 8px;border-right:1px solid #e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mes-grid-table tbody tr:nth-child(even) td{background:#f8fafc}.ticket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 16px}.ticket-grid label,.ticket-mes-form label{font-size:12px;font-weight:700;color:#334155;text-transform:uppercase}.ticket-mes-form input[readonly]{background:#f1f5f9}.wo-status{margin:10px 0 14px;padding:9px 12px;border-radius:8px;font-weight:700;background:#e2e8f0}.wo-status.ok{background:#dcfce7;color:#166534}.wo-status.error{background:#fee2e2;color:#991b1b}.wo-status.warn{background:#fef3c7;color:#92400e}.packing-editor,.validacion-layout,.generar-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:18px}.pl-header{display:flex;gap:18px;flex-wrap:wrap;background:#f3f4f6;border:1px solid #d1d5db;border-radius:12px;padding:12px;margin-bottom:18px}.estado{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800}.estado.ok,.estado-ok{background:#dcfce7;color:#166534}.estado.pendiente{background:#fef3c7;color:#92400e}.btn-guardar,.btn-crear,.btn-validar{background:var(--success)}.btn-cerrar,.btn-eliminar,.btn-quitar{background:var(--danger);color:#fff}.btn-editar{background:var(--warning)}.login-body{display:grid;place-items:center;min-height:100vh;padding:20px;background:linear-gradient(145deg,#111827,#1e3a5f)}.login-card{width:min(420px,100%);background:#fff;padding:28px;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.3);display:grid;gap:10px}.login-logo-box{display:flex;justify-content:center;align-items:center}.login-logo{max-width:230px;width:100%;height:auto}.password-wrap{display:flex;gap:8px}.btn-toggle-pass{flex:0 0 auto;background:#111827}.empty-state{background:#fef3c7;color:#92400e;border:1px solid #f59e0b;padding:18px;border-radius:12px;font-weight:700}
@media(max-width:1199.98px){.cards,.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-form,.almacen-grid,.ventas-grid,.comparacion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:991.98px){:root{--topbar:62px}.sidebar{transform:translateX(-100%);transition:transform .22s ease;box-shadow:16px 0 40px rgba(0,0,0,.25)}.sidebar-open .sidebar{transform:translateX(0)}.sidebar-open{overflow:hidden}.sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:900;opacity:0;pointer-events:none;transition:opacity .2s}.sidebar-open .sidebar-overlay{opacity:1;pointer-events:auto}.sidebar-close,.menu-toggle{display:inline-grid;place-items:center}.app-main{width:100%;margin-left:0}.topbar{padding:0 14px}.content{padding:18px}.topbar-user{display:none}.packing-editor,.validacion-layout,.generar-layout{grid-template-columns:1fr}.table-wrap:after{display:block}.virtual-grid-wrap{height:62vh}}
@media(max-width:767.98px){html{font-size:15px}.content{padding:14px}.panel,.toolbar,.card-box,.preview-box,.busqueda-panel,.tabla-section{padding:14px;border-radius:12px}.cards,.dashboard-grid,.grid-form,.almacen-grid,.ventas-grid,.comparacion-grid{grid-template-columns:1fr}.dashboard-card{min-height:90px}.toolbar,.inline,.top-actions,.filtros,.select-pl-form{align-items:stretch;flex-direction:column}.toolbar>* ,.inline>* ,.top-actions>* ,.filtros>* ,.select-pl-form>*{width:100%}.save-toolbar button,button[type=submit],.btn-nuevo,.btn-agregar,.btn-guardar,.btn-cerrar,.btn-crear,.btn-validar,.btn-imprimir{width:100%;min-width:0}.pl-header{display:grid;grid-template-columns:1fr}.ticket-grid{grid-template-columns:1fr}.login-card{padding:22px}.password-wrap{align-items:stretch}.topbar-title small{display:none}.topbar-title strong{font-size:15px}}
@media(max-width:480px){.sidebar{width:min(88vw,300px)}.content{padding:10px}.topbar{padding:0 10px}.page-heading{margin-bottom:14px}.dashboard-card{padding:14px}.dashboard-card small{font-size:12px}.panel,.card-box,.preview-box{padding:12px}.login-body{padding:12px}.login-card{padding:18px}.mes-titlebar{align-items:stretch}.mes-titlebar>*{width:100%}}
@media print{.sidebar,.topbar,.sidebar-overlay{display:none!important}.app-main{margin:0;width:100%}.content{padding:0}.panel{box-shadow:none;border:0}}