*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f6f7f9;color:#172033}header{background:#fff;border-bottom:1px solid #ddd;padding:18px 28px;font-size:22px;font-weight:700}.app{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,.8fr);gap:20px;padding:22px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}.toolbar button,.type button,.pay button{border:1px solid #ddd;background:#fff;border-radius:10px;padding:11px 15px;cursor:pointer}.active{background:#ff5c61!important;color:#fff;border-color:#ff5c61!important}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.product{background:#fff;border:1px solid #e1e1e1;border-radius:14px;padding:18px;text-align:left;cursor:pointer;min-height:110px}.product:hover{border-color:#ff5c61}.product b{display:block;margin-bottom:10px}.panel{background:#fff;border:1px solid #ddd;border-radius:16px;padding:20px}.type,.pay{display:flex;gap:7px;flex-wrap:wrap}.type button,.pay button{flex:1}.item{border-bottom:1px solid #eee;padding:12px 0;display:grid;grid-template-columns:1fr auto;gap:8px}.qty{display:flex;gap:8px;align-items:center}.qty button{width:30px;height:30px;border:1px solid #ddd;background:#fff;border-radius:7px}.field{width:100%;padding:12px;border:1px solid #ddd;border-radius:9px;margin:10px 0}.total{display:flex;justify-content:space-between;font-size:23px;font-weight:700;margin:20px 0}.confirm{width:100%;border:0;border-radius:10px;padding:15px;background:#ff4d55;color:white;font-size:17px;font-weight:700;cursor:pointer}.msg{margin-top:10px;text-align:center}@media(max-width:800px){.app{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}

.brand{padding:14px 22px 8px;font-size:24px;font-weight:800;background:#fff}
.topnav{display:flex;gap:4px;padding:0 16px;background:#fff;border-bottom:1px solid #ddd;overflow-x:auto}
.topnav button{border:0;background:transparent;padding:12px 13px;cursor:pointer;font-weight:600;white-space:nowrap;border-bottom:3px solid transparent}
.topnav button.sel{color:#ff4d55;border-bottom-color:#ff4d55}
.subnav{display:flex;gap:8px;padding:10px 22px;background:#fff;border-bottom:1px solid #ddd}
.subnav button{border:1px solid #ddd;background:#fff;border-radius:9px;padding:9px 13px;cursor:pointer}
.subnav button.sel{background:#ff5c61;color:#fff;border-color:#ff5c61}
.crumb{padding:16px 22px 0;color:#667085;font-size:13px}
.hidden{display:none!important}
.orders-page{padding:18px 22px 28px}
.orders-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.orders-head h2{margin:0}.refresh{border:1px solid #ddd;background:#fff;border-radius:9px;padding:9px 13px;cursor:pointer}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.filters button{border:1px solid #ddd;background:#fff;border-radius:9px;padding:9px 13px;cursor:pointer}
.orders{display:grid;gap:10px}.order-card{background:#fff;border:1px solid #ddd;border-radius:13px;padding:16px;display:grid;grid-template-columns:1.2fr 1fr auto auto;gap:16px;align-items:center}
.folio{font-weight:800;font-size:17px}.muted{color:#667085;font-size:13px;margin-top:5px}.status{font-weight:700;font-size:12px;padding:7px 10px;border-radius:999px;background:#f1f3f5;white-space:nowrap}.amount{font-size:18px;font-weight:800;text-align:right}.empty{background:#fff;border:1px solid #ddd;border-radius:13px;padding:28px;text-align:center;color:#667085}
.detail-page{padding:18px 22px 28px;max-width:900px;margin:auto}
.detail-card{background:#fff;border:1px solid #ddd;border-radius:16px;padding:22px}
.detail-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;border-bottom:1px solid #eee;padding-bottom:16px}
.detail-head h2{margin:0 0 5px}.detail-info{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.info-box{background:#f8f9fb;border-radius:10px;padding:13px}.info-box small{display:block;color:#667085;margin-bottom:5px}
.detail-item{display:grid;grid-template-columns:1fr auto auto;gap:20px;padding:13px 0;border-bottom:1px solid #eee}
.detail-total{display:flex;justify-content:space-between;font-size:22px;font-weight:800;padding-top:18px}
.back{border:1px solid #ddd;background:#fff;border-radius:9px;padding:10px 14px;cursor:pointer;margin-bottom:14px}
.order-card{cursor:pointer}.order-card:hover{border-color:#ff5c61}
@media(max-width:800px){.order-card{grid-template-columns:1fr auto}.detail-info{grid-template-columns:1fr}.detail-item{grid-template-columns:1fr auto}}

/* V403 Clientes */
.clients-page{padding:18px 22px 30px;max-width:1180px;margin:auto}.clients-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}.clients-head h2{margin:0}.primary{border:0;border-radius:10px;padding:11px 15px;background:#ff4d55;color:#fff;font-weight:700;cursor:pointer}.secondary{border:1px solid #ddd;border-radius:10px;padding:10px 14px;background:#fff;cursor:pointer}.client-search{width:100%;padding:13px 14px;border:1px solid #ddd;border-radius:11px;margin-bottom:14px;background:#fff}.clients-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.client-list{display:grid;gap:10px}.client-card{background:#fff;border:1px solid #ddd;border-radius:13px;padding:16px;cursor:pointer}.client-card:hover,.client-card.selected{border-color:#ff5c61}.client-name{font-size:17px;font-weight:800}.client-detail{background:#fff;border:1px solid #ddd;border-radius:16px;padding:20px;min-height:240px}.client-detail h3{margin-top:0}.address-card{margin-top:12px;padding:13px;background:#f8f9fb;border-radius:11px}.badge{display:inline-block;padding:5px 8px;border-radius:999px;background:#f1f3f5;font-size:11px;font-weight:700}.client-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.client-form label{font-size:13px;font-weight:700}.client-form input{width:100%;margin-top:6px;padding:11px;border:1px solid #ddd;border-radius:9px}.client-form .full{grid-column:1/-1}.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.form-msg{grid-column:1/-1;font-size:13px;text-align:right}.modal-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.45);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}.modal{background:#fff;border-radius:16px;padding:22px;width:min(620px,100%);box-shadow:0 20px 60px rgba(0,0,0,.18)}.modal h3{margin-top:0}@media(max-width:800px){.clients-grid{grid-template-columns:1fr}.client-form{grid-template-columns:1fr}.client-form .full{grid-column:auto}}

/* V403 v2 */
.client-tools{display:grid;grid-template-columns:1fr 160px;gap:10px;margin-bottom:14px}.client-tools .client-search{margin:0}.client-filter{padding:12px;border:1px solid #ddd;border-radius:11px;background:#fff}.client-card-top,.detail-actions,.address-title,.address-head,.address-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.detail-actions{align-items:flex-start}.detail-actions h3{margin-bottom:4px}.mini-state{font-size:11px;font-weight:800;padding:5px 8px;border-radius:999px}.mini-state.on{background:#eaf8ef;color:#237a43}.mini-state.off{background:#f1f3f5;color:#667085}.inactive-card,.inactive-address{opacity:.65}.address-head{margin-top:22px}.address-head h4{margin:0}.address-actions{justify-content:flex-start;margin-top:10px}.small{padding:7px 10px;font-size:12px}.compact{padding:16px}.switch-line{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;cursor:pointer}.switch-line input{display:none}.switch-line i{display:block;width:42px;height:23px;border-radius:999px;background:#cfd4dc;position:relative;transition:.2s}.switch-line i:after{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}.switch-line input:checked+i{background:#31a66a}.switch-line input:checked+i:after{transform:translateX(19px)}.switch-line.mini i{width:36px;height:20px}.switch-line.mini i:after{width:14px;height:14px}.switch-line.mini input:checked+i:after{transform:translateX(16px)}.client-form textarea{width:100%;margin-top:6px;padding:11px;border:1px solid #ddd;border-radius:9px;font:inherit;resize:vertical}.check-row{display:flex!important;align-items:center;gap:8px}.check-row input{width:auto;margin:0}.address-modal{max-height:90vh;overflow:auto}@media(max-width:800px){.client-tools{grid-template-columns:1fr}.detail-actions,.address-title{align-items:flex-start}.address-title{flex-direction:column}}
.field-label{display:block;font-size:12px;font-weight:700;margin:12px 0 5px}.field:disabled{background:#f3f4f6;color:#777}.type button:disabled{opacity:.45;cursor:not-allowed}

/* V401 presentaciones */
.product-presentations{cursor:default;min-height:auto}.presentation-list{display:grid;gap:8px;margin-top:10px}.presentation-btn{display:flex;justify-content:space-between;align-items:center;width:100%;border:1px solid #ddd;background:#fff;border-radius:9px;padding:10px 11px;cursor:pointer}.presentation-btn:hover{border-color:#ff5c61;background:#fff7f7}.presentation-btn strong{color:#172033}

.client-form select{width:100%;margin-top:6px;padding:11px;border:1px solid #ddd;border-radius:9px;background:#fff;font:inherit}.client-form input[readonly]{background:#f5f6f8;color:#667085}.client-form select:disabled{background:#f5f6f8;color:#98a2b3}
.payment-note{margin:14px 0;padding:11px 12px;border-radius:9px;background:#f8f9fb;color:#667085;font-size:13px}.payment-summary{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin:18px 0;padding:14px;background:#f8f9fb;border-radius:12px}.payment-summary small,.finance-kpis small{display:block;color:#667085;margin-bottom:5px}.payment-summary b,.finance-kpis b{font-size:18px}.payment-row{display:grid;grid-template-columns:1fr 1fr auto;gap:15px;padding:12px 0;border-bottom:1px solid #eee;align-items:center}.finance-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.finance-kpis>div{background:#fff;border:1px solid #ddd;border-radius:13px;padding:16px}.finance-kpis b{display:block;font-size:22px}.pay-PAGADO{background:#eaf8ef;color:#237a43}.pay-PARCIAL{background:#fff4dd;color:#9a6700}.pay-PENDIENTE{background:#fff0f0;color:#b42318}@media(max-width:800px){.payment-summary,.finance-kpis{grid-template-columns:1fr}.payment-row{grid-template-columns:1fr auto}}