:root{--navy:#071525;--navy2:#0d2136;--ink:#142033;--muted:#6b7a90;--line:#e5ebf2;--bg:#f4f7fb;--cyan:#08b9d6;--cyan2:#079bb7;--green:#12a873;--orange:#f59e0b;--blue:#3979ea;--white:#fff;--shadow:0 14px 34px rgba(20,32,51,.08)}
[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif}.sidebar{position:fixed;inset:0 auto 0 0;width:224px;padding:20px 14px 18px;color:#cbd7e4;background:radial-gradient(circle at 50% 0,rgba(8,185,214,.16),transparent 230px),linear-gradient(180deg,var(--navy),var(--navy2));display:flex;flex-direction:column;z-index:30;overflow:hidden}.sidebar-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex:0 0 auto}.brand{padding:7px 13px 28px;display:grid}.brand span{color:#fff;font-size:25px;font-weight:800;letter-spacing:-1px}.brand span::first-letter{color:var(--cyan)}.brand small{color:#7890a7;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;margin-top:3px}.sidebar-close{width:34px;height:34px;flex:0 0 34px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(255,255,255,.08);color:#fff;font:400 24px/1 Inter;cursor:pointer;transition:.18s}.sidebar-close:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}.sidebar nav{display:grid;gap:4px;align-content:space-evenly;flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.sidebar nav::-webkit-scrollbar{width:5px}.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:20px}.nav-item{border:0;background:transparent;color:#c4d0dd;border-radius:9px;padding:12px 15px;text-align:left;font:600 13px Inter;display:flex;gap:13px;align-items:center;cursor:pointer;flex:0 0 auto}.nav-badge{margin-left:auto;background:#ef4444;color:#fff;font:800 10px Inter;padding:2px 7px;border-radius:20px}.nav-item span{font-size:18px;color:#8ca1b5}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.09);color:#fff}.nav-item.active{box-shadow:inset 3px 0 var(--cyan)}.sidebar-bottom{margin-top:auto;flex:0 0 auto}.store,.user{border-top:1px solid rgba(255,255,255,.1);padding:14px 8px;display:flex;gap:10px;align-items:center}.store div,.user div{display:grid}.store strong,.user strong{color:#f0f6fb;font-size:12px}.store small,.user small{color:#7890a7;font-size:10px;margin-top:2px}.store-icon,.avatar{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(8,185,214,.14);border:1px solid rgba(8,185,214,.45);color:var(--cyan);font-size:11px;font-weight:700}.avatar{border-radius:50%;color:#fff}
main{margin-left:224px;min-height:100vh}.topbar{height:88px;padding:0 30px;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}.topbar h1{font-size:25px;letter-spacing:-.7px;margin:0}.topbar p{font-size:12px;color:var(--muted);margin:7px 0 0}.top-actions{display:flex;gap:10px;align-items:center}.primary,.secondary,.filter-button,.icon-button{border-radius:9px;padding:11px 16px;font:600 12px Inter;cursor:pointer}.primary{border:1px solid var(--cyan);background:linear-gradient(135deg,var(--cyan),var(--cyan2));color:#fff;box-shadow:0 7px 17px rgba(8,185,214,.19)}.secondary,.filter-button{border:1px solid var(--line);background:#fff;color:#536176}.icon-button{position:relative;padding:10px 12px;border:1px solid var(--line);background:#fff}.icon-button i{position:absolute;width:7px;height:7px;border-radius:50%;background:#ef4444;right:8px;top:7px}.menu{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:21px;cursor:pointer;box-shadow:0 4px 12px rgba(20,32,51,.05);transition:.18s}.menu:hover{border-color:#b7c6d6;background:#f8fafc}.content{padding:14px 30px 40px}.demo-banner{background:#e6f9fc;border:1px solid #b7edf4;color:#146a78;border-radius:10px;padding:11px 15px;margin-bottom:18px;font-size:12px;display:flex;gap:10px}.demo-banner strong{color:#075969}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}.stats article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;gap:14px;align-items:center;box-shadow:0 5px 17px rgba(20,32,51,.035)}.stat-icon{width:43px;height:43px;border-radius:11px;display:grid;place-items:center;font-weight:800}.stat-icon.cyan{background:#dff8fc;color:#05a3be}.stat-icon.blue{background:#e7efff;color:var(--blue)}.stat-icon.orange{background:#fff2d9;color:var(--orange)}.stat-icon.green{background:#dcf8ec;color:var(--green)}.stats article>div:last-child{display:grid}.stats small{font-size:11px;color:var(--muted)}.stats strong{font-size:22px;letter-spacing:-.5px;margin:3px 0}.stats span{font-size:9px;color:#8b98a9}.stats .positive{color:var(--green)}.panel{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:hidden}.panel-heading{padding:20px 22px 16px;display:flex;justify-content:space-between;align-items:center}.panel h2{margin:0;font-size:16px}.panel-heading p{font-size:11px;color:var(--muted);margin:5px 0 0}.tools{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 22px;display:grid;grid-template-columns:minmax(240px,1fr) 190px 170px auto;gap:10px}.search{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;padding:0 12px}.search input,.tools select{border:0;background:#fff;width:100%;height:40px;font:500 11px Inter;color:#526075;outline:none}.tools select{border:1px solid var(--line);border-radius:8px;padding:0 11px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:880px;table-layout:fixed}th:nth-child(1),td:nth-child(1){width:25%}th:nth-child(2),td:nth-child(2){width:11%}th:nth-child(3),td:nth-child(3){width:12%}th:nth-child(4),td:nth-child(4){width:9%}th:nth-child(5),td:nth-child(5){width:9%}th:nth-child(6),td:nth-child(6){width:12%}th:nth-child(7),td:nth-child(7){width:11%}th:nth-child(8),td:nth-child(8){width:11%}th{background:#f8fafc;padding:12px 20px;text-align:left;font-size:9px;letter-spacing:.55px;text-transform:uppercase;color:#8190a3}td{border-top:1px solid var(--line);padding:13px 20px;font-size:11px;color:#536176}.product-cell{display:flex;align-items:center;gap:11px;min-width:0}.thumb{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;font-size:20px;background:linear-gradient(135deg,#edf3f8,#dce7f0);flex:0 0 42px}.product-cell div{display:grid;gap:4px;min-width:0}.product-cell strong{color:var(--ink);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-cell small{color:#8c98a7;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.price{color:var(--ink);font-weight:700;white-space:nowrap}.stock.low{color:var(--orange)}.badge{display:inline-flex;padding:5px 9px;border-radius:20px;font-size:9px;font-weight:700}.badge.published{background:#e1f8ee;color:#098358}.badge.draft{background:#fff2d7;color:#b36c02}.actions{border:0;background:transparent;color:#7b899a;font-size:18px;cursor:pointer}.pagination{padding:14px 20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#7f8b9c;font-size:10px}.pagination div{display:flex;gap:5px}.pagination button{width:29px;height:29px;border:1px solid var(--line);background:#fff;border-radius:7px;color:#647287}.pagination .current{background:var(--navy2);color:#fff}
.modal-backdrop{position:fixed;inset:0;background:rgba(2,12,23,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:50;backdrop-filter:blur(3px)}.modal-backdrop.open{display:flex}.modal{background:#fff;width:min(680px,100%);border-radius:15px;box-shadow:0 25px 80px rgba(0,0,0,.25);max-height:94vh;overflow:auto}.modal>header{padding:22px 25px 18px;display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid var(--line)}.pos-header-link{white-space:nowrap;padding:9px 13px;font-size:11px}.modal header h2{font-size:20px;margin:3px 0}.modal header p{font-size:11px;color:var(--muted);margin:0}.modal header button{border:0;background:#f3f6f9;width:31px;height:31px;border-radius:8px;font-size:21px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:1px;color:var(--cyan2)}
/* Modal de "Imprimir cotización": el título centrado se ve mejor que pegado
   a la izquierda — el botón de cerrar (×) se mantiene fijo en su esquina. */
#quote-receipt-modal>header{position:relative;justify-content:center;text-align:center}
#quote-receipt-modal>header>div:first-child{flex:1}
#quote-receipt-modal>header>button{position:absolute;right:25px;top:50%;transform:translateY(-50%)}.steps{padding:17px 25px;background:#f8fafc;display:flex;align-items:center;justify-content:space-between;color:#98a5b5}.steps span{font-size:10px;display:flex;align-items:center;gap:6px}.steps span:first-child{background:var(--cyan);color:#fff;width:22px;height:22px;border-radius:50%;justify-content:center}.steps span:first-child b{position:absolute;margin-top:43px;color:var(--cyan2)}.steps i{height:1px;background:#dce3eb;flex:1;margin:0 9px}.steps b{font-size:9px;font-weight:600}form{padding:27px 25px 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:10px;font-weight:700;color:#4d5a6d}.field input,.field textarea,.field select{border:1px solid var(--line);border-radius:8px;padding:11px 12px;font:500 11px Inter;outline:none;width:100%}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(8,185,214,.1)}.money{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.money span{display:grid;place-items:center;padding:0 11px;background:#f5f7fa;color:#7d8998;font-size:11px}.money input{border:0;border-left:1px solid var(--line);border-radius:0}.money.percent{flex-direction:row-reverse}.money.percent input{border-left:0;border-right:1px solid var(--line)}.form-actions{grid-column:1/-1;margin:4px -25px -20px;padding:17px 25px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px}.toast{position:fixed;right:24px;bottom:24px;background:var(--navy2);color:#fff;padding:13px 17px;border-radius:9px;font-size:11px;box-shadow:var(--shadow);transform:translateY(80px);opacity:0;transition:.2s;z-index:80}.toast.show{transform:none;opacity:1}
.connection{font-size:10px;font-weight:700;color:#7b899a;white-space:nowrap}.connection.online{color:var(--green)}.connection.offline{color:#dc2626}
.empty{text-align:center!important;padding:34px!important;color:var(--muted)}.empty.error{color:#b42318}.empty small{color:var(--muted)}
.thumb{overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover}.actions{font:700 10px Inter;color:var(--cyan2)}
.product-modal{width:min(920px,100%)}.product-modal form{display:block;padding:0}.form-section{padding:22px 25px;border-bottom:1px solid var(--line)}.form-section h3{font-size:14px;margin:0 0 15px}.form-section p{margin:4px 0 0}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.section-title h3{margin-bottom:0}.hint{font-size:10px;color:var(--muted)}.empty-hint{padding:15px;border:1px dashed #ccd7e3;border-radius:9px;text-align:center}
.dynamic-list{display:grid;gap:9px;margin-top:14px}.dynamic-row{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#f9fbfd}.variant-row{grid-template-columns:1fr 1fr 1fr auto .7fr auto 32px 32px;align-items:center}.wholesale-row{grid-template-columns:1fr 1fr auto 32px;max-width:680px}.dynamic-row input{width:100%;min-width:0;border:1px solid var(--line);border-radius:7px;padding:10px;font:500 10px Inter}.check{display:flex;align-items:center;gap:5px;font-size:10px;white-space:nowrap}.check input{width:auto}.remove-row,.remove-image{border:0;background:#feeceb;color:#b42318;border-radius:7px;font-size:18px;cursor:pointer}
.upload-box{margin-top:14px;border:1px dashed #a8bfd0;border-radius:10px;padding:18px;display:flex;justify-content:space-between;align-items:center;background:#f8fbfd;color:var(--muted);font-size:10px}.upload-button{display:inline-flex;background:#e1f7fa;color:#067a8f;border-radius:8px;padding:10px 13px;font-weight:700;cursor:pointer}.image-previews{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}.image-previews figure{position:relative;margin:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#f5f7fa}.image-previews img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.image-previews figcaption{padding:6px;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-image{position:absolute;right:5px;top:5px;width:24px;height:24px;background:rgba(180,35,24,.9);color:#fff}.video-field{margin-top:15px}.video-field small{font-size:9px;color:var(--muted)}.product-modal .form-actions{margin:0;padding:17px 25px;position:sticky;bottom:0;background:#fff}
.toast.success{background:#087a56}.toast.error{background:#b42318}
@media(max-width:1000px){.tools{grid-template-columns:1fr 1fr}.search{grid-column:1/-1}.variant-row{grid-template-columns:repeat(3,1fr)}.wholesale-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar:not(.collapsed){transform:none}.topbar{padding:0 17px;justify-content:flex-start;gap:12px}.topbar .primary{font-size:0;padding:10px}.topbar .primary::after{content:"＋";font-size:18px}.connection{display:none}.top-actions{margin-left:auto}.topbar p{display:none}main{margin-left:0}.content{padding:18px 14px 30px}.stats{grid-template-columns:1fr 1fr}.tools{grid-template-columns:1fr}.search{grid-column:auto}.filter-button{display:none}.panel-heading{padding:17px}.modal{max-height:100vh;border-radius:12px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.section-title{align-items:flex-start}.dynamic-row,.variant-row,.wholesale-row{grid-template-columns:1fr 1fr}.image-previews{grid-template-columns:repeat(3,1fr)}.upload-box{align-items:flex-start;gap:12px;flex-direction:column}}
@media(max-width:440px){.stats{grid-template-columns:1fr}.topbar h1{font-size:20px}.image-previews{grid-template-columns:repeat(2,1fr)}.dynamic-row,.variant-row,.wholesale-row{grid-template-columns:1fr}.form-section{padding:19px 17px}}
.sidebar{transition:transform .22s ease}
.sidebar.collapsed{transform:translateX(-100%)}
main{transition:margin-left .22s ease}
.panel-hidden main{margin-left:0}
.sidebar-overlay{position:fixed;inset:0;background:rgba(2,12,23,.42);z-index:25;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
@media(max-width:720px){body.sidebar-open{overflow:hidden}body.sidebar-open .sidebar-overlay{opacity:1;visibility:visible}}
.heading-actions,.row-actions{display:flex;align-items:center;gap:8px}
.row-actions{flex-wrap:nowrap;white-space:nowrap}
.row-actions .actions{border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:#fff;white-space:nowrap}
.pagination button:disabled{opacity:.4;cursor:not-allowed}
.pagination #page-label{display:grid;place-items:center;min-width:48px;font-weight:700}
.duplicate-row{border:0;background:#e7f7fb;color:#067a8f;border-radius:7px;font-size:17px;cursor:pointer}
.field-with-action{display:flex;gap:8px;align-items:stretch}
.field-with-action input{min-width:0;flex:1}
.inline-add{flex:0 0 auto;border:1px solid #cbd5e1;background:#f8fafc;color:#0f766e;border-radius:9px;padding:0 12px;font-weight:700;cursor:pointer;white-space:nowrap}
.inline-add:hover{background:#ecfdf5;border-color:#5eead4}
.section-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.section-kicker{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}.section-kicker>span{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:#e1f7fa;color:#067a8f;font-size:12px;font-weight:800}.section-kicker h3{margin:1px 0 3px}.section-kicker p{font-size:10px;color:var(--muted);margin:0}.section-title>.section-kicker{margin-bottom:0}.locked-input{display:flex;align-items:center;border:1px solid #cbd5e1;border-radius:9px;background:#f1f5f9;overflow:hidden}.locked-input input{border:0!important;background:transparent!important;color:#334155;font-weight:800;letter-spacing:.5px;box-shadow:none!important}.locked-input span{padding:0 11px;color:#64748b;font-size:9px;font-weight:700;white-space:nowrap}.field small{font-size:9px;color:var(--muted)}.primary.compact{padding:10px 13px}.form-section{scroll-margin-top:20px}.product-modal .form-actions{box-shadow:0 -8px 22px rgba(20,32,51,.05)}button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:720px){.modal-backdrop{padding:0;align-items:stretch}.product-modal{width:100%;height:100dvh;max-height:none;border-radius:0}.product-modal>header{position:sticky;top:0;background:#fff;z-index:3;padding:16px 17px}.product-modal header h2{font-size:17px}.product-modal header p{display:none}.form-section{padding:18px 16px}.section-title{display:grid;gap:13px}.section-actions{width:100%}.section-actions button{flex:1}.product-modal .form-actions{padding:12px 16px;display:grid;grid-template-columns:1fr 1.35fr;z-index:4}.product-modal .form-actions button{min-height:44px}.locked-input span{font-size:0}.locked-input span::after{content:"🔒";font-size:13px}.field-with-action{display:grid;grid-template-columns:1fr auto}.inline-add{min-height:42px}.upload-button{min-height:42px;align-items:center}.dynamic-row{padding:12px}.variant-row input,.wholesale-row input{min-height:42px}.variant-image-button{min-height:42px}.remove-row,.duplicate-row{min-height:38px}}
@media(max-width:440px){.product-modal .form-actions{grid-template-columns:1fr 1.4fr}.section-actions{display:grid;grid-template-columns:1fr}.image-previews{gap:8px}}
.variant-row{grid-template-columns:1fr 1fr .75fr 1fr minmax(220px,1.35fr) auto 32px 32px}
.variant-media{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.variant-media select{min-width:0;width:100%;min-height:36px;border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff;color:#344054;font:600 10px Inter}
@media(max-width:1000px){.variant-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.variant-row{grid-template-columns:1fr 1fr}.variant-media{grid-column:1/-1}}
@media(max-width:440px){.variant-row{grid-template-columns:1fr}}

/* Interfaz compacta v11 */
.stats article{min-height:0;padding:7px 9px;gap:6px}.stat-icon{width:22px;height:22px;border-radius:6px;font-size:12px}.stats strong{font-size:14px;margin:0}.stats small{font-size:8px}.stats span{font-size:7px}.panel-heading{padding:10px 18px 8px}.tools{padding:8px 18px}
.upload-box{padding:8px 10px;border-style:solid;gap:12px}.upload-button{flex:1;display:flex;gap:10px;align-items:center;padding:6px 8px;background:transparent}.upload-button>span:last-of-type{display:grid;gap:2px}.upload-button b{font-size:11px}.upload-button small{font-size:8px;color:var(--muted);font-weight:500}.upload-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:#e1f7fa;color:#067a8f;font-size:17px}.upload-box>#image-count{white-space:nowrap;padding:6px 9px;border-radius:20px;background:#edf7f9;color:#067a8f;font-weight:700}
.variant-row{grid-template-columns:1fr 1fr .72fr 1fr 1.25fr;align-items:end}.variant-field{display:grid;gap:5px;min-width:0}.variant-field>span{font-size:9px;font-weight:700;color:#64748b}.variant-field input{min-height:38px}.color-control{position:relative}.color-control input{padding-left:36px}.color-swatch{position:absolute;z-index:1;left:9px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:6px;border:1px solid rgba(15,23,42,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}.color-swatch.unknown{background:linear-gradient(135deg,#fff 45%,#e2e8f0 46%,#e2e8f0 54%,#fff 55%)!important}
.variant-media{display:grid;grid-template-columns:1fr;gap:5px}.variant-media select{min-height:38px}.variant-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:7px;border-top:1px solid var(--line);padding-top:8px}.duplicate-row,.remove-row{min-height:32px;padding:0 10px;font:700 9px Inter}.remove-row{font-size:9px}.variant-actions .check{margin-right:auto}

@media(max-width:720px){
  .topbar{height:64px;padding:0 10px;gap:8px}.menu{width:36px;height:36px;flex-basis:36px}.topbar h1{font-size:17px;white-space:nowrap}.top-actions{gap:5px}.topbar .primary{width:36px;height:36px;padding:0}.content{padding:10px 8px 22px}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.stats article{min-width:0;min-height:0;padding:7px 4px;justify-content:center;text-align:center;border-radius:9px}.stats article .stat-icon,.stats article span{display:none}.stats article>div:last-child{min-width:0}.stats small{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats strong{font-size:14px}
  .panel-heading{padding:11px 10px}.panel-heading p{display:none}.heading-actions .secondary{padding:8px 9px;font-size:0}.heading-actions .secondary::after{content:"↻";font-size:15px}
  .tools{display:grid;grid-template-columns:minmax(108px,1.6fr) minmax(82px,1fr) minmax(76px,.9fr) 34px;gap:5px;padding:7px}.search{grid-column:auto;padding:0 7px;min-width:0}.search span{display:none}.search input,.tools select{height:35px;min-width:0;padding:0 6px;font-size:9px;text-overflow:ellipsis}.filter-button{display:block;width:34px;height:35px;padding:0;font-size:0}.filter-button::after{content:"×";font-size:18px}
  .row-actions{gap:5px}.row-actions .actions{padding:6px 7px;font-size:9px}
  /* CORRECCIÓN (ago-2026, apariencia en celular): en Ventas/Cotizaciones/Cuentas
     por cobrar (todas usan .pos-history-row), la fila forzaba info + botones en
     una sola línea horizontal — con crédito (badge de 2 líneas) o varios botones
     (Registrar abono/🖨/Editar/Anular) los botones se salían del ancho de pantalla
     y quedaban cortados, obligando a hacer scroll lateral para verlos. Ahora en
     celular la fila se apila: info arriba, botones abajo en su propia línea,
     y si no caben todos en una fila, los botones pasan a una segunda línea en
     vez de cortarse — nunca desaparecen ni quedan inalcanzables.  */
  .pos-history-row{flex-direction:column;align-items:stretch}
  .pos-history-row .row-actions{flex-wrap:wrap;justify-content:flex-start;margin-top:6px;gap:8px 12px}
  table{min-width:600px}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 8px}.field.full{grid-column:1/-1}.field label{font-size:9px}.field input,.field textarea,.field select{padding:10px 9px}.field-with-action{grid-template-columns:minmax(0,1fr) 34px;gap:4px}.inline-add{min-width:34px;width:34px;padding:0;font-size:0}.inline-add::after{content:"＋";font-size:16px}.locked-input span{padding:0 7px}
  .upload-box{flex-direction:row;align-items:center;padding:6px}.upload-button{min-height:38px;padding:3px}.upload-icon{width:30px;height:30px}.upload-button small{display:none}.upload-box>#image-count{padding:5px 7px;font-size:9px}
  .section-title{display:block}.section-title>.section-kicker{margin-bottom:10px}.section-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.section-actions button{min-width:0;padding:10px 6px}
  .variant-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"color option2" "stock barcode" "media media" "actions actions";gap:9px;padding:10px}.variant-row .color-field{grid-area:color}.variant-row .variant-field:nth-child(2){grid-area:option2}.variant-row .variant-field:nth-child(3){grid-area:stock}.variant-row .variant-field:nth-child(4){grid-area:barcode}.variant-row .variant-media{grid-area:media}.variant-actions{grid-area:actions;justify-content:stretch}.variant-actions .check{margin-right:auto}.duplicate-row,.remove-row{min-height:34px}
}
@media(max-width:380px){.topbar-title h1{font-size:15px}.stats small{font-size:7px}.tools{grid-template-columns:minmax(96px,1.5fr) minmax(74px,1fr) minmax(68px,.9fr) 32px}.search input,.tools select{font-size:8px}.form-section{padding:15px 10px}.variant-actions{gap:4px}.duplicate-row,.remove-row{padding:0 7px}}

/* Selectores administrables y campos alineados v13 */
.form-grid>.field>select{height:42px;min-height:42px}
.color-control select{width:100%;min-height:38px;border:1px solid var(--line);border-radius:8px;padding:8px 9px 8px 36px;background:#fff;color:#344054;font:500 11px Inter;outline:none}
.color-control select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(8,185,214,.1)}

/* Variantes agrupadas y controles pulcros v14 */
.form-grid>.field{align-content:start}
.form-grid>.field>select{height:42px}
.upload-box{background:#f5fcfe;border-color:#9de4ee}
.upload-button{flex:0 1 auto;min-height:42px;padding:7px 13px;background:linear-gradient(135deg,#dff9fc,#c9f2f7);border:1px solid #8edfe9;color:#067a8f;box-shadow:0 4px 10px rgba(8,185,214,.1);transition:.18s}
.upload-button:hover{background:linear-gradient(135deg,#cef5f9,#b8edf4);border-color:#51cdda;transform:translateY(-1px)}
.upload-button:focus-within{outline:3px solid rgba(8,185,214,.16)}
.variant-group{border:1px solid #d9e5ee;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 4px 14px rgba(20,32,51,.04)}
.variant-group-head{display:grid;grid-template-columns:minmax(180px,1fr) minmax(190px,1.15fr) auto 34px;gap:9px;align-items:end;padding:11px;background:#f3fbfd;border-bottom:1px solid #dbeaf0}
.variant-group .color-control select,.variant-group .variant-media select{min-height:40px;background:#fff}
.variant-group .color-swatch{width:20px;height:20px;border-radius:50%}
.add-size-row{min-height:40px;border:1px solid #79d8e4;border-radius:8px;background:#e4f9fc;color:#067a8f;padding:0 12px;font:700 10px Inter;cursor:pointer;white-space:nowrap}
.remove-group{width:34px;height:40px;border:0;border-radius:8px;background:#feeceb;color:#b42318;font-size:18px;cursor:pointer}
.size-list{display:grid;gap:7px;padding:9px}
.variant-group .variant-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(115px,.65fr) minmax(160px,1fr) auto;gap:8px;align-items:end;padding:8px;background:#f9fbfd}
.variant-group .variant-actions{grid-column:auto;border-top:0;padding-top:0;align-self:end;min-height:38px}
.variant-group .variant-actions .check{margin-right:4px}
.variant-group .duplicate-row,.variant-group .remove-row{min-height:38px}
@media(max-width:720px){
  .upload-box{padding:7px}.upload-button{flex:1;min-width:0}
  .variant-group-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;grid-template-areas:"color image remove" "add add add";padding:9px 8px}
  .variant-group-head .color-field{grid-area:color}.variant-group-head .variant-media{grid-area:image}.variant-group-head .add-size-row{grid-area:add}.variant-group-head .remove-group{grid-area:remove;width:36px}
  .variant-group .variant-row{grid-template-columns:minmax(0,1fr) minmax(0,.72fr);grid-template-areas:"size stock" "barcode barcode" "actions actions";padding:8px}
  .variant-group .variant-row>.variant-field:nth-child(1){grid-area:size}
  .variant-group .variant-row>.variant-field:nth-child(2){grid-area:stock}
  .variant-group .variant-row>.variant-field:nth-child(3){grid-area:barcode}
  .variant-group .variant-actions{grid-area:actions;border-top:1px solid var(--line);padding-top:7px}
}
@media(max-width:380px){
  .variant-group-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px}
  .variant-group-head .remove-group{width:32px}
  .variant-group .variant-actions{gap:4px}
}

/* Nombre de producto completo en celular v17 — se revierte el diseño de tarjetas: vuelve a
   ser una fila de tabla por producto (como antes), con scroll horizontal si hace falta. La
   diferencia es que la columna del nombre ya no tiene ancho fijo ni "…": se deja que la tabla
   la dimensione según el contenido, así el nombre entra completo en una sola línea siempre. */
/* Nombre de producto completo en celular y PC — la columna del nombre ya no tiene
   ancho fijo ni "…": se deja que la tabla la dimensione según el contenido, así el
   nombre entra completo en una sola línea siempre. */
.table-wrap{overflow:auto}
table{table-layout:auto;min-width:600px}
td:nth-child(n){width:auto}
.product-cell{width:auto}
.product-cell div{max-width:none;min-width:0}
.product-cell strong{white-space:nowrap;overflow:visible;text-overflow:clip}
.product-cell small{white-space:nowrap;overflow:visible;text-overflow:clip}


/* Configuración de SAGC PLATFORM v18 — pantalla dentro del panel para editar la pestaña
   CONFIG del Sheet sin tocar Google Sheets directamente. */
.config-grid{row-gap:16px}
.config-field small{color:var(--muted);font-size:9px;margin-top:2px;display:block;line-height:1.4}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px;font-weight:700;color:#344054;cursor:default}
.switch{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 40px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch-track{position:absolute;inset:0;background:#d7dee6;border-radius:20px;transition:.18s}
.switch-track::before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,32,51,.3);transition:.18s}
.switch input:checked+.switch-track{background:linear-gradient(135deg,var(--cyan),var(--cyan2))}
.switch input:checked+.switch-track::before{transform:translateX(18px)}
.switch input:focus-visible+.switch-track{box-shadow:0 0 0 3px rgba(8,185,214,.25)}
@media(max-width:720px){.config-grid{grid-template-columns:1fr}.switch-row{font-size:10.5px}}

/* Información del negocio v21 — pantalla dentro del panel para editar la pestaña
   INFORMACION del Sheet (portada del catálogo público) sin tocar Google Sheets.
   Se usa grid de columnas fijas (no flex) para el campo + botón de subir: así el botón
   nunca puede quedar encima del texto, sin importar el largo del enlace guardado. */
.info-image-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.info-image-row input{width:100%;min-width:0;box-sizing:border-box;height:38px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font:500 11px Inter;outline:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#fff;color:var(--ink)}
.info-image-row input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(8,185,214,.1)}
.info-upload-btn{border:1px solid var(--line);background:#fff;color:#536176;border-radius:8px;height:38px;display:flex;align-items:center;justify-content:center;gap:6px;font:700 14px Inter;cursor:pointer;white-space:nowrap;box-sizing:border-box;padding:0;width:38px}
.info-upload-btn.wide{width:auto;padding:0 15px}
.info-upload-btn:hover{border-color:#b7c6d6;background:#f8fafc}
.info-upload-btn.uploading{opacity:.55;pointer-events:none}
.info-image-preview:empty{display:none}
.info-image-preview img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#f5f7fa;margin-top:8px;display:block}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:16px}
.gallery-slot{border:1px solid var(--line);border-radius:10px;padding:10px;background:#f9fbfd;display:grid;gap:6px;align-content:start;min-width:0}
.gallery-slot .info-image-preview img{width:100%;height:100px;margin-top:0}
.gallery-slot-link{width:100%;min-width:0;box-sizing:border-box;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font:500 10px Inter;outline:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#fff;color:var(--ink)}
.gallery-slot-link:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(8,185,214,.1)}
.gallery-more{grid-column:1/-1;justify-self:start}
@media(max-width:720px){.info-upload-btn.wide{width:100%}.info-image-row{grid-template-columns:1fr auto}}

/* Punto de venta (Ventas) — carrito, escaneo con cámara y resumen de caja diaria. */
.pos-modal{width:min(720px,100%)}
.pos-scan-row{display:flex;gap:10px;flex-wrap:wrap}
/* CORRECCIÓN (ago-2026): fila de "Umbral por defecto / Guardar umbral / Actualizar"
   en Alertas de stock. Antes usaba .pos-scan-row (flex-wrap:wrap), así que en
   pantallas angostas el campo y los dos botones no cabían en una fila y el
   segundo botón se caía a una línea aparte. Ahora es una fila fija (nunca se
   parte), los 3 controles miden lo mismo de alto (38px) y quedan alineados
   por su borde inferior (el label queda arriba del input sin desalinear los
   botones). "Guardar umbral" usa .primary (color cyan) para que se note que
   es EL botón de acción; "Actualizar" se queda .secondary (gris, de apoyo). */
.stock-alert-toolbar{display:flex;align-items:flex-end;gap:8px;flex-wrap:nowrap}
.stock-alert-toolbar .field{flex:0 0 auto;gap:5px}
.stock-alert-toolbar .field input{height:38px;width:90px;box-sizing:border-box}
.stock-alert-toolbar .primary,
.stock-alert-toolbar .secondary{height:38px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;flex:0 0 auto;box-sizing:border-box}
@media(max-width:480px){
  .stock-alert-toolbar{gap:6px}
  .stock-alert-toolbar .field label{font-size:9px}
  .stock-alert-toolbar .field input{width:62px;padding:0 8px}
  .stock-alert-toolbar .primary,
  .stock-alert-toolbar .secondary{padding:0 10px;font-size:11px}
}
@media(max-width:360px){
  .stock-alert-toolbar .primary{padding:0;width:38px;font-size:0}
  .stock-alert-toolbar .primary::after{content:"💾";font-size:15px}
  .stock-alert-toolbar .secondary{padding:0;width:38px;font-size:0}
  .stock-alert-toolbar .secondary::after{content:"↻";font-size:15px}
}
.pos-scan-row .primary{flex:0 0 auto;white-space:nowrap}

/* Ticket de venta: los 3 botones (Imprimir, Descargar imagen, WhatsApp) en una
   sola fila siempre, achicando un poco su padding/letra si hace falta en vez
   de saltar de línea. Se aplica también al modal de cotización (mismos 3
   botones: Imprimir ticket / Descargar imagen / Imprimir hoja completa). */
#receipt-modal .pos-scan-row,
#quote-receipt-modal .pos-scan-row{
  flex-wrap:nowrap;
}
#receipt-modal .pos-scan-row button,
#quote-receipt-modal .pos-scan-row button{
  flex:1 1 0;
  min-width:0;
  padding:11px 8px;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pos-search{flex:1;min-width:220px}
.pos-search input{height:44px}
.pos-results{margin-top:12px;display:grid;gap:8px;max-height:260px;overflow:auto}
.pos-result-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f9fbfd;cursor:pointer;text-align:left}
.pos-result-item:hover,.pos-result-item.active,.pos-result-item:focus{border-color:var(--cyan);background:#eefcfd;outline:none}
.pos-result-item .thumb{width:36px;height:36px;border-radius:8px;flex:0 0 36px;font-size:16px}
.pos-result-item div{display:grid;gap:2px;min-width:0;flex:1}
.pos-result-item strong{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-result-item small{font-size:10px;color:var(--muted)}
.pos-result-item .pos-result-price{font-size:12px;font-weight:700;color:var(--cyan2);white-space:nowrap}
.pos-cart-list{display:grid;gap:8px;margin-top:14px}
.pos-cart-row{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f9fbfd}
.pos-cart-row .pos-item-name{display:grid;gap:2px;min-width:0}
.pos-cart-row .pos-item-name strong{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-cart-row .pos-item-name small{font-size:10px;color:var(--muted)}
.pos-cart-row-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.pos-qty{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.pos-qty button{width:24px;height:24px;border:1px solid var(--line);background:#fff;border-radius:6px;font:700 13px Inter;cursor:pointer;color:var(--ink)}
.pos-qty span{min-width:18px;text-align:center;font:700 11px Inter}
.pos-qty-input{width:34px;text-align:center;font:700 11px Inter;border:1px solid var(--line);border-radius:6px;padding:3px 1px}
.pos-unit-price{flex:1 1 0;min-width:0;border:1px solid var(--line);border-radius:7px;padding:6px 4px;font:600 11px Inter;text-align:right}
.pos-unit-price[readonly]{background:#f1f2f5;color:var(--muted);cursor:not-allowed}
.pos-subtotal{flex:0 0 auto;font:700 12px Inter;color:var(--ink);white-space:nowrap;text-align:right}
.pos-cart-row .remove-row{width:24px;height:24px;flex:0 0 auto}
.pos-total-row{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:13px;font-weight:700;color:var(--ink)}
.pos-total-row strong{font-size:19px;color:var(--cyan2)}
.pos-payment-methods{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pos-pay-chip{border:1px solid var(--line);background:#fff;color:#536176;border-radius:20px;padding:9px 15px;font:600 11px Inter;cursor:pointer}
.pos-pay-chip.active{border-color:var(--cyan);background:linear-gradient(135deg,var(--cyan),var(--cyan2));color:#fff}
.pos-pay-split-row{display:flex;gap:8px;margin-bottom:8px}
.pos-pay-split-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:600 13px Inter}
.pos-pay-split-row .secondary{white-space:nowrap;border-radius:10px}
.pos-pay-list{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.pos-pay-row{display:flex;align-items:center;gap:10px;background:#f7f8fa;border-radius:10px;padding:7px 12px;font:600 12px Inter}
.pos-pay-row span{flex:1;color:#536176}
.pos-pay-row .remove-row{border:none;background:none;color:#c23c5a;font-size:16px;cursor:pointer;line-height:1}
.pos-pay-remaining{font:700 12px Inter;color:#c23c5a;margin-bottom:10px;min-height:16px}
.pos-pay-remaining.ok{color:#1f9d6b}
.pos-charge-btn{width:100%;padding:15px;font-size:13px;margin-top:6px}
.pos-history-summary,.pos-history-section p{font-size:11px;color:var(--muted)}
.pos-history-list{display:grid;gap:6px;margin-top:12px;max-height:200px;overflow:auto}
.pos-history-row{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:11px;color:#536176}
.pos-history-row strong{color:var(--ink)}
.pos-history-row.voided{opacity:.55}
.pos-history-row .row-info{min-width:0;display:grid;gap:2px}
.pos-history-row .row-actions{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.status-badge{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#c0392b}
/* Visibilidad por rol: Admin ve todo. Cajero pierde pantallas administrativas y de
   utilidad. Vendedor solo vende (y ve clientes para la venta normal). */
body.role-cajero #new-product,body.role-vendedor #new-product,
body.role-cajero .actions,body.role-vendedor .actions,
body.role-cajero #open-config,body.role-vendedor #open-config,
body.role-cajero #open-info,body.role-vendedor #open-info,
body.role-cajero #open-users,body.role-vendedor #open-users,
body.role-cajero [data-section="utilidad"],
body.role-cajero [data-section="auditoria"],body.role-vendedor [data-section="auditoria"],
/* CORRECCIÓN (auditoría pre-lanzamiento, ago-2026): saveStockSettings
   (guardar el umbral por defecto de Alertas de stock) es Admin-only en el
   backend, pero el botón "Guardar umbral" no estaba oculto para Cajero —
   lo veía, le hacía clic, y el servidor se lo rechazaba con un error de
   permisos que no tenía cómo entender (Cajero SÍ puede abrir la pantalla
   de Alertas de stock, solo no puede cambiar el umbral). Vendedor ni
   siquiera ve la pantalla (ver regla de #open-stock-alerts más abajo), así
   que solo hacía falta la regla para Cajero. */
body.role-cajero #stock-alert-threshold-save,
/* CORRECCIÓN (auditoría pre-lanzamiento, ago-2026): "Anular"/"Editar" en el
   Historial de ventas y "Anular" en Cotizaciones apuntan a updateSaleMeta/
   voidSale/voidQuote (Admin-o-Cajero) — Vendedor SÍ ve la pantalla de Ventas
   (vende normal), pero antes veía también estos 3 botones ahí mismo y el
   backend se los rechazaba con un error de permisos sin explicación. */
body.role-vendedor [data-void-sale],body.role-vendedor [data-edit-sale],
body.role-vendedor [data-void-quote],
/* "Anular" en Compras apunta a voidPurchase, que es Admin-only (a propósito:
   registrar una compra es de menor riesgo que anularla, que ya ajustó costo
   y stock). Cajero SÍ ve la pantalla de Compras (registra compras), pero
   veía también "Anular" ahí — se oculta solo ese botón para Cajero; para
   Vendedor no hace falta la regla aparte porque #open-purchases ya está
   oculto completo más abajo. */
body.role-cajero [data-void-purchase],
/* "Eliminar cliente"/"Eliminar proveedor" apuntan a deleteClient/deleteProvider,
   ambas Admin-only — Cajero y Vendedor SÍ pueden abrir Clientes/Proveedores
   (crean clientes al vuelo, Cajero además registra proveedores), pero no
   deben poder borrar ninguno de los dos. */
body.role-cajero #clients-delete,body.role-vendedor #clients-delete,
body.role-cajero #providers-delete,body.role-vendedor #providers-delete,
body.role-vendedor #open-purchases,body.role-vendedor #open-reports,body.role-vendedor #open-cash,
body.role-vendedor #open-stock-alerts,body.role-vendedor #open-providers,
body.role-vendedor #open-users,
body.role-vendedor [data-mark-credit-paid],body.role-vendedor [data-mark-credit-paid-modal]{display:none!important}
/* Historial de ventas/cotizaciones (modal #reports-modal) — versión compacta:
   filtros más chicos, buscador y botón Actualizar en la misma fila, para que
   la lista de ventas empiece más arriba sin tener que hacer scroll. */
#reports-modal .reports-filters{padding:14px 20px 8px}
#reports-modal .filter-group{margin-bottom:8px}
#reports-modal .filter-group-label{margin-bottom:4px}
#reports-modal .pos-type-tabs{gap:6px}
#reports-modal .pos-type-tab{padding:6px 8px;font-size:10px}
#reports-modal .pos-pay-split-row{margin-bottom:0}
#reports-modal .pos-pay-split-row input{padding:6px 10px;font:600 11px Inter;height:32px}
#reports-modal .pos-pay-split-row .secondary{padding:0 12px;height:32px;font-size:11px}
#reports-modal .reports-list-section{padding:12px 20px 20px}
#reports-modal .history-summary{margin:0 0 8px;font-size:11px;color:var(--muted)}
#reports-modal .history-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:10px}
#reports-modal .history-toolbar .search{flex:1;margin-bottom:0;height:34px}
#reports-modal .history-toolbar .search input{height:32px;font-size:12px}
#reports-modal .refresh-btn{flex:0 0 auto;width:34px;height:34px;padding:0;font-size:15px;border-radius:8px;display:grid;place-items:center}
#reports-modal .pos-history-list{margin-top:0}
.receipt-body{border:1px dashed var(--line);border-radius:10px;padding:16px;font:500 12px/1.6 "Courier New",monospace;color:var(--ink);background:#fafcfe}
.receipt-body .r-line{display:flex;justify-content:space-between;gap:10px}
.receipt-body .r-line span:last-child{white-space:nowrap;flex-shrink:0}
.receipt-body hr{border:0;border-top:1px dashed var(--line);margin:8px 0}


/* Hoja formal de cotización (A4). */
#quote-formal-body{display:none}
.qf-sheet{font:400 13px/1.5 Arial,sans-serif;color:#111;background:#fff;padding:8px}
.qf-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:12px;gap:14px}
.qf-brand{display:flex;align-items:center;gap:14px}
.qf-brand-text{display:flex;flex-direction:column;justify-content:center}
.qf-header h1{font-size:20px;margin:0 0 3px;line-height:1.2}
.qf-logo{max-height:72px;max-width:180px;display:block;flex:0 0 auto}
.qf-business-lines{font-size:11px;color:#555;line-height:1.4}
.qf-doc-box{flex:0 0 auto;text-align:right;border:1px solid #111;border-radius:6px;padding:6px 12px;display:flex;flex-direction:column;gap:0;font-size:11px;line-height:1.3;white-space:nowrap}
.qf-doc-box strong{font-size:15px;line-height:1.3}
.qf-client{margin-bottom:16px;font-size:13px;line-height:1.7}
.qf-label{font-weight:700;color:#444}
.qf-table{width:100%;border-collapse:collapse;margin-bottom:14px;table-layout:fixed}
.qf-table th,.qf-table td{border:1px solid #ccc;padding:6px 8px;font-size:12px;text-align:left;word-wrap:break-word}
.qf-table th{background:#f3f4f6;text-transform:uppercase;font-size:10px;letter-spacing:.4px;color:#555;font-weight:700}
.qf-table td.num,.qf-table th.num{text-align:right}
.qf-table th:nth-child(1),.qf-table td:nth-child(1){width:6%;text-align:center}
.qf-table th:nth-child(2),.qf-table td:nth-child(2){width:44%}
.qf-table th:nth-child(3),.qf-table td:nth-child(3){width:12%;text-align:center}
.qf-table th:nth-child(4),.qf-table td:nth-child(4){width:19%}
.qf-table th:nth-child(5),.qf-table td:nth-child(5){width:19%}
.qf-total{display:flex;justify-content:flex-end;gap:16px;font-size:16px;margin-bottom:20px}
.qf-note{font-size:12px;color:#333;margin-bottom:24px}
.qf-footer p{font-size:11px;color:#666;margin-bottom:40px;text-align:center}
.qf-signature{border-top:1px solid #111;width:240px;padding-top:6px;font-size:11px;color:#444;text-align:center}

/* Impresión: #print-area es un <div> aparte, SIN ninguna clase de modal (nada de
   max-height, padding, centrado ni fondo oscuro heredado de la pantalla) — al
   imprimir (ticket de venta, ticket de cotización, u hoja A4), el botón copia ahí
   justo el contenido a imprimir y listo. Que sea una zona limpia y propia evita
   pelear con estilos pensados para pantalla y evita que dos impresiones se mezclen.
*/
#print-area{display:none}
@media print{
  body.is-printing > *:not(#print-area){display:none!important}
  body.is-printing #print-area{display:block;background:#fff;margin:0;padding:0}
  /* El borde punteado es solo para la vista previa en pantalla — en el ticket
     impreso no debe salir ningún borde exterior, y la letra debe quedar clara y
     legible en térmica (10-12px, negro sólido, sin fondo de color). */
  body.is-printing #print-area .receipt-body{border:none;border-radius:0;padding:0;background:#fff;color:#000;font-size:11px}
}
.stock-badge{font-size:9px;font-weight:700;padding:3px 7px;border-radius:20px;background:#e1f8ee;color:#098358;white-space:nowrap}
.location-popover{position:absolute;z-index:60;min-width:200px;max-width:260px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.16);padding:12px 14px}
.location-popover .location-line{font-size:12px;color:var(--ink);line-height:1.5}
.location-popover .location-line + .location-line{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.location-popover .location-line strong{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#8ca1b5;margin-bottom:2px}
.location-popover .hint{color:#8ca1b5}
.stock-badge.low{background:#fff2d7;color:#b36c02}
.stock-badge.out{background:#feeceb;color:#b42318}
.price-discounted{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.price-discounted s{color:#8a8f98;font-size:11px;font-weight:400}
.discount-badge{font-size:9px;font-weight:700;padding:2px 6px;border-radius:20px;background:#feeceb;color:#b42318;margin-left:4px}
.barcode-input-row{display:flex;gap:8px}
.barcode-input-row input{flex:1;min-width:0}
.scan-btn{border:1px solid var(--line);background:#fff;border-radius:8px;width:42px;flex:0 0 42px;font-size:16px;cursor:pointer;display:grid;place-items:center;padding:0}
.scan-btn:hover{border-color:var(--cyan);background:#eefcfd}
.variant-row .barcode-input-row .scan-btn{width:34px;flex:0 0 34px;height:34px;font-size:14px}
.stock-view-btn{border:0;background:transparent;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-family:inherit}
.stock-view-btn small{color:var(--cyan2);font-weight:700;font-size:9px;text-decoration:underline}

/* Escáner de cámara */
.scanner-modal{width:min(460px,100%)}
.scanner-shell{padding:20px 25px 25px}
#scanner-viewport{border-radius:12px;overflow:hidden;background:#000;min-height:260px}
#scanner-viewport video{width:100%;display:block}
#scanner-status{text-align:center;margin-top:12px}

/* Selector de variante al escanear/buscar un producto con tallas o colores */
.variant-pick-card{width:min(420px,100%)}
.variant-pick-list{padding:10px 25px 25px;display:grid;gap:9px;max-height:60vh;overflow:auto}
.variant-pick-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#f9fbfd;cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
.variant-pick-row:hover,.variant-pick-row:focus{border-color:var(--cyan);background:#eefcfd;outline:none}
.variant-pick-row:disabled{opacity:.45;cursor:not-allowed}
.variant-pick-row strong{font-size:12px}
.variant-pick-row .pos-result-price{font-size:12px;font-weight:700;color:var(--cyan2)}

@media(max-width:720px){.pos-cart-row-actions{gap:5px}.pos-qty-input{width:28px}.pos-unit-price{font-size:10px;padding:6px 2px}}

/* Resumen de ventas (hoy / mes / año) dentro del punto de venta */
.pos-summary-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pos-summary-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#f9fbfd;display:grid;gap:3px}
.pos-summary-card small{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.3px}
.pos-summary-card strong{font-size:17px;color:var(--navy2)}
.pos-summary-card span{font-size:10px;color:var(--muted)}
@media(max-width:520px){.pos-summary-cards{grid-template-columns:1fr}}

/* Pestañas venta rápida / venta normal */
.pos-type-tabs{display:flex;gap:8px}
.pos-type-tab{flex:1;border:1px solid var(--line);border-radius:9px;padding:10px;background:#fff;font:700 11px Inter;color:#4d5a6d;cursor:pointer}
.pos-type-tab.active{background:var(--cyan);border-color:var(--cyan);color:#fff}
.filter-group{margin-bottom:14px}
.filter-group-label{display:block;font:700 9px Inter;letter-spacing:.4px;text-transform:uppercase;color:#8b98a9;margin-bottom:6px}
.filter-group:last-child{margin-bottom:0}
.pos-client-section{margin-top:12px;display:grid;gap:10px}
.pos-client-selected{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--cyan);background:#eefbfd;border-radius:9px;padding:9px 12px;font-size:12px;font-weight:700;color:var(--navy2)}
.pos-client-new-form{display:grid;gap:10px;border:1px dashed var(--line);border-radius:10px;padding:12px}
.link-btn{border:0;background:transparent;color:var(--cyan2);font:700 11px Inter;cursor:pointer;padding:0}
.full-search{flex:1}

/* Venta a crédito (fiado) — CORREGIDO41 */
.pos-pay-chip-credit{border-color:#fecaca;color:#b91c1c;background:#fef2f2}
.pos-pay-chip-credit.active{border-color:#dc2626;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.pos-note-credit-row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.pos-note-credit-row .field.full{flex:1;min-width:180px}
.pos-note-credit-row .field:not(.full){min-width:160px}
.credits-due-banner{margin:0 25px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:10px;padding:11px 16px;font:600 12px Inter;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.credits-due-banner button{border:0;background:#dc2626;color:#fff;font:700 11px Inter;padding:7px 13px;border-radius:8px;cursor:pointer;margin-left:auto}
@media(max-width:720px){.credits-due-banner{margin:0 14px}}

/* Checkbox "¿Quiere boleta o factura?" en el checkout (CORREGIDO44) */
.pos-receipt-checkbox{display:flex;align-items:center;gap:8px;font:600 12px Inter;color:#334155;margin-top:10px;cursor:pointer;user-select:none}
.pos-receipt-checkbox input{width:16px;height:16px;cursor:pointer}