:root{--primary:#3568ff;--primary2:#2857e8;--soft:#eef3ff;--success:#16a66a;--success-soft:#eaf8f1;--warning:#f4a62a;--warning-soft:#fff6e5;--danger:#e5484d;--danger-soft:#fff0f0;--purple:#7b61ff;--purple-soft:#f1eeff;--text:#172033;--muted:#667085;--muted2:#98a2b3;--bg:#f6f8fc;--surface:#fff;--border:#e6eaf0;--shadow:0 14px 40px #17203310;--radius:16px;--sidebar:228px}*{box-sizing:border-box}html{font-size:16px}body{margin:0;font:14px/1.45 Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button,a{transition:.18s ease}button{cursor:pointer}a{color:inherit;text-decoration:none}input,select,textarea{outline:none}.eyebrow{display:block;font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);margin-bottom:4px}h1,h2,h3,p{margin-top:0}h1{font-size:30px;line-height:1.1;margin-bottom:8px}h2{font-size:20px;margin-bottom:6px}h3{font-size:15px}p{color:var(--muted)}.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px #17203305}.btn{border:1px solid transparent;border-radius:11px;min-height:42px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;background:#fff;color:var(--text)}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--primary);color:#fff}.btn.primary:hover{background:var(--primary2)}.btn.success{background:var(--success);color:#fff}.btn.teacher{background:var(--purple);color:#fff}.btn.danger{background:var(--danger);color:#fff}.btn.dangerOutline{border-color:#f5b9bc;color:var(--danger);background:#fff}.btn.soft{background:#f2f4f7;color:#344054}.btn.ghost{border-color:var(--border);background:#fff;color:var(--muted)}.btn.sm{min-height:34px;padding:7px 10px;font-size:12px}.btn.xl{min-height:60px;border-radius:14px;font-size:16px}.btn.full{width:100%}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}kbd{font:10px inherit;padding:2px 5px;border:1px solid #d8dde6;border-bottom-width:2px;border-radius:5px;background:#fff;color:var(--muted)}.badge,.pill,.stock,.count{display:inline-flex;align-items:center;border-radius:999px;font-size:10px;font-weight:900;white-space:nowrap}.badge{padding:5px 8px}.badge.ok,.pill.ok{background:var(--success-soft);color:#0e7d4d}.badge.warn{background:var(--warning-soft);color:#9c6508}.badge.bad{background:var(--danger-soft);color:#b42318}.badge.neutral{background:#f2f4f7;color:var(--muted)}.badge.purple{background:var(--purple-soft);color:#6248dc}.green{color:var(--success)!important}.amber{color:#c27a03!important}.red{color:var(--danger)!important}label{display:flex;flex-direction:column;gap:7px;margin:16px 0;font-weight:750;color:#344054;font-size:13px}label small{font-weight:500;color:var(--muted2)}input,select,textarea{width:100%;border:1px solid #d7dce5;border-radius:11px;padding:11px 12px;min-height:44px;background:#fff;color:var(--text)}input:focus,select:focus,textarea:focus{border-color:#96adff;box-shadow:0 0 0 4px var(--soft)}textarea{resize:vertical}.moneyInput{display:flex;align-items:center;border:1px solid #d7dce5;border-radius:11px;overflow:hidden;background:#fff}.moneyInput:focus-within{border-color:#96adff;box-shadow:0 0 0 4px var(--soft)}.moneyInput span{padding-left:13px;font-weight:900;color:var(--muted)}.moneyInput input{border:0!important;box-shadow:none!important;padding-left:7px!important}.moneyInput.big{min-height:58px}.moneyInput.big input{font-size:22px;font-weight:900}.alert,.info{padding:12px 14px;border-radius:11px;display:flex;flex-direction:column;gap:2px}.alert.warning{background:var(--warning-soft);border:1px solid #f6ddae;color:#87570a}.alert.danger{background:var(--danger-soft);border:1px solid #f6c8ca;color:#a82329}.info{background:var(--soft);border:1px solid #d7e1ff;color:#3c54a0;font-size:12px}.info b{color:#2744a5}
/* login */.login{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;background:#fff}.loginHero{background:linear-gradient(145deg,#1a39bd,#3568ff 50%,#7287ff);color:#fff;padding:52px 62px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.loginHero:before,.loginHero:after{content:"";position:absolute;border-radius:50%;background:#ffffff12}.loginHero:before{width:430px;height:430px;right:-150px;top:-120px}.loginHero:after{width:280px;height:280px;left:-100px;bottom:120px}.loginBrand{display:flex;align-items:center;gap:13px;position:relative;z-index:1}.loginBrand>b{width:48px;height:48px;border-radius:14px;background:#fff;color:var(--primary);display:grid;place-items:center;font-size:16px}.loginBrand>span{font-size:18px;font-weight:900;display:flex;flex-direction:column}.loginBrand small{font-size:10px;font-weight:500;opacity:.72}.loginHero>div:nth-child(2){max-width:660px;position:relative;z-index:1}.loginHero em{font-style:normal;display:inline-block;border:1px solid #ffffff35;background:#ffffff12;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;margin-bottom:20px}.loginHero h1{font-size:48px;letter-spacing:-.04em;line-height:1.02;max-width:650px}.loginHero p{color:#ffffffd5;font-size:16px;line-height:1.7;max-width:620px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:30px}.steps span{border:1px solid #ffffff30;background:#ffffff0d;border-radius:13px;padding:13px;font-weight:800;font-size:12px;display:flex;flex-direction:column;gap:8px}.steps b{font-size:10px;opacity:.65}.loginHero>small{opacity:.65;position:relative;z-index:1}.loginForm{display:grid;place-items:center;padding:35px}.loginForm form{width:min(420px,100%)}.loginForm h2{font-size:30px;margin:4px 0 8px}.demo{margin-top:18px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px;display:grid;gap:4px;font-size:11px;color:var(--muted)}
/* shell */.shell{min-height:100vh;display:flex}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:#fff;border-right:1px solid var(--border);padding:18px 13px;display:flex;flex-direction:column;z-index:20}.brand{height:52px;display:flex;align-items:center;gap:10px;padding:0 6px;margin-bottom:12px}.brand>b{width:40px;height:40px;border-radius:12px;background:var(--primary);color:#fff;display:grid;place-items:center}.brand>span{display:flex;flex-direction:column;white-space:nowrap}.brand strong{font-size:14px}.brand small{font-size:9px;color:var(--muted2)}.sidebar nav{display:flex;flex-direction:column;gap:5px;flex:1}.nav{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:11px;color:#596579;font-weight:750;min-height:43px}.nav i{width:22px;text-align:center;font-style:normal;font-size:16px}.nav kbd{margin-left:auto}.nav:hover{background:#f8fafc;color:var(--text)}.nav.active{background:var(--soft);color:var(--primary)}.nav.logout{color:#b42318;border-top:1px solid var(--border);border-radius:0;padding-top:14px}.shell>main{margin-left:var(--sidebar);width:calc(100% - var(--sidebar));min-width:0}.topbar{height:78px;position:sticky;top:0;z-index:15;background:#ffffffed;backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px}.status,.userbox{display:flex;align-items:center;gap:9px}.status span{font-size:11px;color:var(--muted)}.pill{padding:5px 8px;background:#f2f4f7;color:var(--muted)}.userbox .clock{font-size:12px;font-weight:800;padding-right:14px;border-right:1px solid var(--border)}.avatar{width:36px;height:36px;border-radius:11px;background:var(--soft);color:var(--primary);font-weight:900;display:grid;place-items:center}.userbox>div:last-child{display:flex;flex-direction:column}.userbox strong{font-size:12px}.userbox small{font-size:10px;color:var(--muted2)}.content{padding:22px 24px 40px}.pageHead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:4px 0 20px}.pageHead p{margin-bottom:0}.sectionHead{display:flex;justify-content:space-between;align-items:center;gap:12px}.sectionHead h2{margin:0}
/* pos */.pos{display:grid;grid-template-columns:minmax(300px,.88fr) minmax(430px,1.3fr) minmax(260px,.72fr);gap:14px;height:calc(100vh - 122px);min-height:610px}.catalog,.cart,.summary{padding:16px;overflow:hidden;min-width:0}.catalog{display:flex;flex-direction:column}.count{background:var(--soft);color:var(--primary);padding:5px 8px}.search{display:flex;align-items:center;gap:8px;border:1px solid #d8dde6;border-radius:12px;padding:0 11px;min-height:46px;background:#fff}.search:focus-within{border-color:#9bb0ff;box-shadow:0 0 0 4px var(--soft)}.search input{border:0;box-shadow:none!important;padding:0;min-height:42px;flex:1;min-width:0}.search.compact{max-width:320px;min-height:40px}.chips{display:flex;gap:7px;overflow:auto;scrollbar-width:none;padding:11px 0}.chips::-webkit-scrollbar{display:none}.chips button{border:1px solid var(--border);background:#fff;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:900;color:var(--muted);white-space:nowrap}.chips button.active,.chips button:hover{background:var(--soft);border-color:#c9d6ff;color:var(--primary)}.productGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;overflow:auto;padding:2px;align-content:start}.product{border:1px solid var(--border);background:#fff;border-radius:13px;padding:11px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:126px}.product:hover{border-color:#b9c8ff;box-shadow:0 6px 18px #3568ff12;transform:translateY(-1px)}.product.disabled{opacity:.5;cursor:not-allowed}.product>i{font-style:normal;width:34px;height:34px;border-radius:10px;background:var(--soft);color:var(--primary);display:grid;place-items:center}.product>strong{font-size:12px;line-height:1.25}.product>small{font-size:9px;color:var(--muted2)}.product>div{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:auto}.product>div>b{font-size:13px}.stock{padding:3px 6px;font-size:9px}.stock.ok{background:var(--success-soft);color:#0b7a4a}.stock.low{background:var(--warning-soft);color:#946005}.stock.out{background:var(--danger-soft);color:#b42318}.cart{display:flex;flex-direction:column}.cartHead,.cartRow{display:grid;grid-template-columns:minmax(150px,1fr) 100px 100px 34px;gap:9px;align-items:center}.cartHead{padding:8px;color:var(--muted2);font-size:9px;font-weight:900;text-transform:uppercase;border-bottom:1px solid var(--border)}.cartItems{flex:1;min-height:0;overflow:auto}.emptyCart{height:100%;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}.emptyCart i{font-style:normal;width:46px;height:46px;border-radius:14px;background:var(--soft);color:var(--primary);display:grid;place-items:center;font-size:22px}.emptyCart h3{color:var(--text);margin:12px 0 4px}.emptyCart p{font-size:11px;max-width:260px}.cartRow{padding:10px 8px;border-bottom:1px solid #f0f2f5}.cartProd{min-width:0;display:flex;flex-direction:column}.cartProd strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cartProd small{font-size:9px;color:var(--muted2)}.qty{display:grid;grid-template-columns:28px 34px 28px;border:1px solid var(--border);border-radius:9px;overflow:hidden}.qty button{border:0;background:#f8fafc;height:30px;font-weight:900}.qty input{border:0!important;box-shadow:none!important;width:34px;height:30px;min-height:0;padding:0;text-align:center}.cartSubtotal{text-align:right;font-weight:900}.remove{border:0;background:transparent;color:var(--muted2);border-radius:8px;padding:7px}.remove:hover{background:var(--danger-soft);color:var(--danger)}.cartFoot{border-top:1px solid var(--border);padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted)}.summary{display:flex;flex-direction:column;gap:18px}.summaryRows{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.summaryRows div{display:flex;justify-content:space-between;color:var(--muted)}.summaryRows b{color:var(--text)}.total{background:linear-gradient(145deg,#f6f8ff,#edf2ff);border:1px solid #d9e2ff;border-radius:15px;padding:18px;display:flex;flex-direction:column}.total span{text-transform:uppercase;font-size:11px;font-weight:900;color:var(--primary)}.total strong{font-size:39px;letter-spacing:-.05em;color:#244fd4}.summary>.btn{margin-top:auto}.links{display:flex;flex-direction:column;gap:6px;font-size:10px;color:var(--muted)}.links a:hover{color:var(--primary)}
/* modal */.modal{position:fixed;inset:0;background:#10182878;backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;z-index:100}.modal[hidden]{display:none}.modalBox{position:relative;width:min(980px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:20px;padding:24px;box-shadow:0 28px 80px #10182835}.modalBox.small{width:min(450px,95vw)}.modalBox.medium{width:min(720px,95vw)}.modalBox.checkoutBox{width:min(1000px,96vw)}.x{position:absolute;top:17px;right:17px;width:38px;height:38px;border:1px solid var(--border);background:#fff;border-radius:10px;font-size:20px;color:var(--muted)}.checkoutGrid{display:grid;grid-template-columns:1.45fr .68fr;gap:22px}.payTotal{display:flex;justify-content:space-between;align-items:end;background:var(--bg);border:1px solid var(--border);padding:14px 16px;border-radius:14px;margin:15px 0}.payTotal strong{font-size:29px}.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.methods button{border:1px solid var(--border);background:#fff;border-radius:13px;min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-weight:900}.methods button.active,.methods button:hover{background:var(--soft);border-color:#a9bcff;color:var(--primary)}.denoms{display:flex;gap:6px;flex-wrap:wrap}.denoms button{border:1px solid var(--border);background:#fff;border-radius:9px;padding:8px 10px;font-size:11px;font-weight:900;color:var(--muted)}.denoms button:hover{background:var(--soft);color:var(--primary)}.mixed{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.remain{display:flex;justify-content:space-between;background:var(--warning-soft);border:1px solid #f3dba9;padding:11px;border-radius:11px}.change{border-left:1px solid var(--border);padding-left:22px;display:flex;flex-direction:column}.changeCard{background:var(--success-soft);border:1px solid #c5ead7;border-radius:15px;padding:18px;margin-top:12px;display:flex;flex-direction:column}.changeCard span{font-size:11px;font-weight:900;color:#16784a}.changeCard strong{font-size:38px;color:var(--success);letter-spacing:-.04em}.payExplain{margin:18px 0;display:flex;flex-direction:column;gap:9px}.payExplain div{display:flex;justify-content:space-between;color:var(--muted)}.payExplain b{color:var(--text)}.change>.btn{margin-top:auto}.center{text-align:center}.check,.resultIcon{width:78px;height:78px;border-radius:50%;background:var(--success-soft);color:var(--success);display:grid;place-items:center;margin:0 auto 15px;font-size:38px;font-weight:900}.successValues,.resultGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0}.successValues{grid-template-columns:1fr 1fr}.successValues div,.resultGrid div{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column}.successValues span,.resultGrid span{font-size:10px;color:var(--muted)}.successValues b,.resultGrid strong{font-size:20px}
/* generic pages */.stats{display:grid;gap:13px;margin-bottom:18px}.stats.three{grid-template-columns:repeat(3,1fr)}.stats.six{grid-template-columns:repeat(6,1fr)}.stats>div{background:#fff;border:1px solid var(--border);border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:5px}.stats span{font-size:11px;color:var(--muted);font-weight:800}.stats strong{font-size:24px;letter-spacing:-.03em}.stats small{color:var(--muted2)}.stats .success{background:var(--success-soft);border-color:#cbeedc}.stats .warning{background:var(--warning-soft);border-color:#f4dfb4}.stats .danger{background:var(--danger-soft);border-color:#f5d0d2}.tableCard{overflow:hidden;margin-bottom:18px}.toolbar{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}.toolbar h2{margin:0}.tableWrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th{text-align:left;padding:10px 14px;background:#fbfcfd;color:var(--muted2);font-size:9px;text-transform:uppercase;letter-spacing:.06em}td{padding:12px 14px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}td strong{color:var(--text)}.emptyCell{text-align:center!important;padding:32px!important;color:var(--muted2)!important}.prodCell{display:flex;align-items:center;gap:9px}.prodCell i{font-style:normal;width:32px;height:32px;border-radius:9px;background:var(--soft);color:var(--primary);display:grid;place-items:center}.prodCell>div{display:flex;flex-direction:column}.prodCell small{font-size:9px;color:var(--muted2)}.iconBtn{width:35px;height:35px;border:1px solid var(--border);background:#fff;border-radius:10px}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:0 13px}.span2{grid-column:1/-1}.cashExpected{padding:18px 20px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between}.cashExpected>div{display:flex;flex-direction:column}.cashExpected strong{font-size:34px;color:var(--success)}.cashExpected p{font-size:11px;margin:4px 0 0}.emptyPage{min-height:350px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}.emptyPage>i{font-style:normal;font-size:32px}.twoCols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}.padded{padding:17px}.list{display:flex;flex-direction:column}.list>div{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--border)}.rank{display:flex;flex-direction:column}.rank>div{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;padding:10px 0;border-top:1px solid var(--border)}.rank>div>b{width:28px;height:28px;border-radius:9px;background:var(--soft);color:var(--primary);display:grid;place-items:center}.rank span{display:flex;flex-direction:column}.rank small{font-size:9px;color:var(--muted2)}.rank em{font-style:normal;font-weight:900}.dateFilter{display:flex;gap:8px;align-items:center}.dateFilter input{width:auto;min-height:42px;padding:9px 10px}
/* close */.closeLayout{display:grid;grid-template-columns:1.25fr .65fr;gap:16px;align-items:start}.denomCard,.closeSummary{padding:18px}.denomList{border-top:1px solid var(--border);margin-top:14px}.denomRow{display:grid;grid-template-columns:1fr 160px 120px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.denomRow>div:first-child{display:flex;gap:12px;align-items:center}.denomRow small{width:56px;font-size:9px;text-transform:uppercase;color:var(--muted2);font-weight:900}.stepper{display:grid;grid-template-columns:38px 1fr 38px;border:1px solid var(--border);border-radius:10px;overflow:hidden}.stepper button{border:0;background:#f8fafc;font-weight:900}.stepper input{border:0!important;box-shadow:none!important;text-align:center;padding:0;min-height:38px}.denomSubtotal{text-align:right}.closeSummary{position:sticky;top:100px}.counted{background:var(--soft);border:1px solid #d6e0ff;border-radius:15px;padding:18px;display:flex;flex-direction:column;margin:15px 0}.counted span{font-size:11px;font-weight:900;color:#4862ad}.counted strong{font-size:38px;color:var(--primary)}.expected{display:flex;justify-content:space-between;align-items:center;padding:12px 0;margin-bottom:12px}.expected span{color:var(--muted)}.expected strong{font-size:18px}
/* teacher/settings */.teacherHero{background:linear-gradient(135deg,#5d43dc,#8b71ff);color:#fff;border-radius:18px;padding:24px;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.teacherHero p,.teacherHero .eyebrow{color:#ffffffc0}.teacherHero h1{margin-bottom:7px}.teacherHero p{margin:0}.teacherHero .btn{background:#fff;color:#644cdb}.practiceList,.studentList{display:flex;flex-direction:column;gap:9px}.practice{border:1px solid var(--border);border-radius:13px;padding:13px;display:grid;grid-template-columns:1fr auto;gap:14px}.practice h3{margin:7px 0 4px}.practice p{font-size:11px;max-height:72px;overflow:hidden}.practice>aside{display:flex;flex-direction:column;justify-content:center;align-items:flex-end}.practice>aside strong{font-size:22px;color:var(--purple)}.practice>aside span{font-size:9px;color:var(--muted2)}.student{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--border)}.student>div:nth-child(2){display:flex;flex-direction:column}.student small{font-size:9px;color:var(--muted2)}.student aside{display:flex;flex-direction:column;align-items:flex-end;gap:3px}.toggle{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--border);padding:13px 0;margin:0}.toggle>span{display:flex;flex-direction:column}.toggle input{width:20px;height:20px;min-height:0}.dangerZone{border-top:1px solid #f2c7c9;margin-top:18px;padding-top:14px}.dangerZone h3{color:var(--danger)}.saleMeta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.saleMeta>div{background:var(--bg);border-radius:10px;padding:10px;display:flex;flex-direction:column}.saleMeta span{font-size:9px;color:var(--muted2)}.saleLine{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}.returnLine{display:grid;grid-template-columns:1fr 100px;gap:10px;align-items:center;border-bottom:1px solid var(--border);padding:9px 0}.returnLine input{min-height:38px;padding:8px}.remain b{color:#986106}
/* toast */#toasts{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:8px}.toast{min-width:280px;max-width:390px;background:#fff;border:1px solid var(--border);border-left:4px solid var(--success);border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;display:flex;gap:10px;animation:in .18s ease}.toast.error{border-left-color:var(--danger)}.toast strong{display:block}.toast span{font-size:11px;color:var(--muted)}@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1250px){:root{--sidebar:76px}.brand span,.nav span,.nav kbd{display:none}.productGrid{grid-template-columns:1fr}.stats.six{grid-template-columns:repeat(3,1fr)}.pos{grid-template-columns:minmax(270px,.8fr) minmax(390px,1.25fr) minmax(240px,.65fr)}}@media(max-width:980px){.sidebar{display:none}.shell>main{margin-left:0;width:100%}.content{padding:15px}.topbar{padding:0 14px}.pos{height:auto;grid-template-columns:1fr}.catalog,.cart{min-height:430px}.summary{min-height:300px}.stats.three,.stats.six,.twoCols,.closeLayout{grid-template-columns:1fr}.checkoutGrid{grid-template-columns:1fr}.change{border-left:0;border-top:1px solid var(--border);padding:18px 0 0}.closeSummary{position:static}}@media(max-width:720px){.login{grid-template-columns:1fr}.loginHero{display:none}.loginForm{padding:22px}.userbox .clock,.userbox>div:last-child{display:none}.pageHead{flex-direction:column;align-items:flex-start}.methods{grid-template-columns:repeat(2,1fr)}.mixed,.formGrid{grid-template-columns:1fr}.span2{grid-column:auto}.denomRow{grid-template-columns:1fr 130px}.denomSubtotal{grid-column:1/-1;text-align:left;padding-left:68px}.successValues,.resultGrid,.saleMeta{grid-template-columns:1fr}}

/* v1.1 · barra horizontal de funciones */
.topShell{display:block}.mainFull{margin-left:0!important;width:100%!important;min-width:0}.topbarV11{height:74px;z-index:40}.topLeft{display:flex;align-items:center;gap:16px}.brandTop{height:auto;margin:0;padding:0 18px 0 0;border-right:1px solid var(--border)}.brandTop>span{display:flex}.pageContext{min-width:160px}.topLogout{width:38px;height:38px;border:1px solid var(--border);border-radius:10px;display:grid;place-items:center;color:var(--muted);font-size:18px}.topLogout:hover{background:var(--danger-soft);color:var(--danger)}
.functionBar{position:sticky;top:74px;z-index:35;display:flex;align-items:stretch;gap:8px;padding:8px 14px;background:#fffffff5;backdrop-filter:blur(10px);border-bottom:1px solid var(--border);box-shadow:0 3px 10px #17203308}.functionScroll{display:flex;gap:7px;overflow:auto;scrollbar-width:none;flex:1}.functionScroll::-webkit-scrollbar{display:none}.functionHome,.functionKey{min-height:48px;display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:#fff;border-radius:12px;padding:7px 11px;color:var(--muted);font-weight:850;white-space:nowrap}.functionHome{min-width:82px;justify-content:center}.functionHome>span{color:var(--primary);font-size:10px}.functionKey i{font-style:normal;font-size:16px}.functionKey kbd{min-width:29px;text-align:center}.functionHome:hover,.functionKey:hover{background:var(--soft);border-color:#c6d3ff;color:var(--primary)}.functionHome.active,.functionKey.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 7px 18px #3568ff28}.functionHome.active>span{color:#fff}.functionKey.active kbd{background:#ffffff22;color:#fff;border-color:#ffffff40}.functionKey.extra{margin-left:4px}.contentV11{padding-top:18px}.topShell .pos{height:calc(100vh - 173px)}.topShell .closeSummary{top:145px}
/* dashboard */
.dashboardHero{padding:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:radial-gradient(circle at 86% 18%,#3568ff20,transparent 28%),linear-gradient(135deg,#fff,#f7f9ff)}.dashboardHero h1{font-size:34px}.dashboardHero p{max-width:760px;margin-bottom:0}.dashState{min-width:180px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:5px}.dashState>strong{font-size:28px;letter-spacing:-.04em}.dashState small{color:var(--muted2)}.stats.four{grid-template-columns:repeat(4,1fr)}.dashStats{margin-top:16px}.dashboardGrid{display:grid;grid-template-columns:1.5fr .65fr;gap:16px;margin-top:16px;align-items:start}.routeCard{padding:18px}.routeList{display:flex;flex-direction:column}.routeStep{display:grid;grid-template-columns:44px 42px 1fr 26px;align-items:center;gap:12px;padding:14px 8px;border-top:1px solid var(--border)}.routeStep:hover{background:#fafbff;border-radius:12px}.routeNum{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#f2f4f7;color:var(--muted);font-size:10px}.routeStep>i{font-style:normal;width:38px;height:38px;border-radius:11px;background:var(--soft);display:grid;place-items:center;font-size:17px}.routeStep>div{display:flex;flex-direction:column;gap:3px}.routeStep>div span{font-size:11px;color:var(--muted)}.routeStep em{font-size:19px;font-style:normal;color:var(--muted2)}.dashSide{display:flex;flex-direction:column;gap:16px}.quickCard,.shortcutCard{padding:18px}.quickCard .btn+.btn{margin-top:8px}.shortcutGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.shortcutGrid>div{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;padding:9px}.shortcutGrid span{font-size:11px;color:var(--muted)}.baseIcon{width:54px;height:54px;border-radius:16px;background:var(--soft);display:grid;place-items:center;font-size:23px;margin-bottom:14px}.basePresets{margin:0 0 14px}
@media(max-width:1180px){.pageContext{display:none}.stats.four{grid-template-columns:repeat(2,1fr)}.dashboardGrid{grid-template-columns:1fr}.functionKey.extra{display:none}}@media(max-width:800px){.brandTop>span{display:none}.functionKey>span,.functionHome>b{display:none}.functionKey{min-width:62px;justify-content:center}.dashboardHero{align-items:flex-start;flex-direction:column}.dashState{width:100%}.stats.four{grid-template-columns:1fr}.shortcutGrid{grid-template-columns:1fr}}


/* ===== CAJA LAB · v1.1 CLEAN =====
   Limpieza de interfaz sin modificar la barra F1-F8.
*/
.contentV11{max-width:1540px;margin:0 auto;width:100%}
.cleanPageHead{margin-bottom:14px}
.cleanPageHead p{margin-bottom:0}
.cleanPageHead .actions{gap:8px}

.cleanHero{
    padding:23px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    background:linear-gradient(135deg,#fff,#f7f9ff);
    margin-bottom:14px;
}
.cleanHero h1{font-size:34px;margin-bottom:7px}
.cleanHero p{max-width:760px;margin-bottom:0}
.cleanHeroState{
    min-width:180px;
    padding:15px 17px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    display:flex;
    flex-direction:column;
    gap:3px;
}
.cleanHeroState span{font-size:10px;font-weight:900;text-transform:uppercase;color:var(--muted)}
.cleanHeroState strong{font-size:27px;letter-spacing:-.04em}
.cleanHeroState small{color:var(--muted2)}
.cleanHeroState.open{background:var(--success-soft);border-color:#cbeedc}
.cleanHeroState.open strong{color:var(--success)}

.cleanRoute{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-bottom:14px;
}
.cleanRouteItem{
    padding:15px;
    min-height:112px;
    display:grid;
    grid-template-columns:30px 34px 1fr;
    gap:10px;
    align-items:start;
}
.cleanRouteItem>b{
    width:28px;height:28px;border-radius:9px;
    display:grid;place-items:center;
    background:var(--soft);color:var(--primary);
}
.cleanRouteItem>i{
    font-style:normal;width:32px;height:32px;
    display:grid;place-items:center;
    background:#f6f7f9;border-radius:9px;
}
.cleanRouteItem>div{display:flex;flex-direction:column;gap:3px}
.cleanRouteItem strong{font-size:13px}
.cleanRouteItem span{font-size:11px;color:var(--muted);line-height:1.4}
.cleanRouteItem:hover{border-color:#c6d3ff;transform:translateY(-1px)}

.cleanSummary,.cleanAction{
    padding:16px 18px;
    display:flex;
    align-items:center;
    gap:18px;
}
.cleanSummary>div{display:flex;flex-direction:column;min-width:150px}
.cleanSummary span{font-size:10px;text-transform:uppercase;font-weight:900;color:var(--muted2)}
.cleanSummary strong{font-size:20px}
.cleanSummary .btn{margin-left:auto}
.cleanAction{justify-content:space-between}
.cleanAction h2{margin-bottom:4px}
.cleanAction p{margin-bottom:0}

.cleanToolbar{
    padding:11px 12px;
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:10px;
}
.growSearch{flex:1;max-width:none}
.cleanSelect{
    width:auto;min-width:230px;min-height:40px;
    border-radius:10px;padding:8px 10px;
}
.cleanTableCard{overflow:hidden}
.deptPill{
    display:inline-flex;padding:5px 8px;
    border-radius:999px;background:var(--soft);
    color:var(--primary);font-size:10px;font-weight:900;
}
.rowActions{display:flex;gap:5px;justify-content:flex-end}
.modalActions{justify-content:flex-end}

.cleanAdvanced{
    border:1px solid var(--border);
    background:#fafbfc;
    border-radius:11px;
    padding:10px 12px;
    margin:4px 0 12px;
}
.cleanAdvanced summary{
    cursor:pointer;
    font-size:12px;
    font-weight:800;
    color:var(--muted);
}
.cleanAdvanced[open] summary{margin-bottom:4px}

.departmentInventory{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.inventoryDepartment{padding:15px}
.inventoryDeptHead{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin-bottom:12px;
}
.inventoryDeptHead h2{margin:0}
.inventoryDeptMeta{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}
.inventoryProductGrid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}
.inventoryProduct{
    border:1px solid var(--border);
    border-radius:12px;
    padding:11px;
    background:#fff;
    min-width:0;
}
.inventoryProductTop{display:flex;gap:9px;align-items:center;margin-bottom:13px}
.inventoryProductTop>div:last-child{min-width:0;display:flex;flex-direction:column}
.inventoryProductTop strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inventoryProductTop small{font-size:10px;color:var(--muted2)}
.inventoryProdIcon{
    width:32px;height:32px;border-radius:9px;
    background:var(--soft);color:var(--primary);
    display:grid;place-items:center;flex:0 0 auto;
}
.inventoryProductBottom{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.inventoryProductBottom>div{display:flex;flex-direction:column}
.inventoryProductBottom>div span{font-size:9px;text-transform:uppercase;font-weight:900;color:var(--muted2)}
.inventoryProductBottom>div strong{font-size:19px}

.cleanHistory{margin-top:12px;overflow:hidden}
.cleanHistory>summary{
    list-style:none;cursor:pointer;padding:14px 16px;
    display:flex;align-items:center;justify-content:space-between;
}
.cleanHistory>summary::-webkit-details-marker{display:none}
.cleanHistory>summary>div{display:flex;flex-direction:column}
.cleanHistory>summary>span{font-size:11px;color:var(--primary);font-weight:800}
.cleanHistory[open]>summary{border-bottom:1px solid var(--border)}

.cleanTextButton{
    border:0;background:transparent;color:var(--muted);
    font-weight:800;font-size:11px;padding:5px 3px;
}
.cleanTextButton:hover{color:var(--primary)}

@media(max-width:1200px){
    .inventoryProductGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
    .cleanRoute{grid-template-columns:repeat(2,1fr)}
    .inventoryProductGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cleanSummary{flex-wrap:wrap}
    .cleanSummary .btn{margin-left:0}
}
@media(max-width:700px){
    .cleanHero,.cleanAction{align-items:stretch;flex-direction:column}
    .cleanHeroState{width:100%}
    .cleanRoute{grid-template-columns:1fr}
    .cleanToolbar{align-items:stretch;flex-direction:column}
    .cleanSelect{width:100%}
    .inventoryProductGrid{grid-template-columns:1fr}
    .inventoryDeptHead{align-items:flex-start;flex-direction:column}
}


/* ===== PATCH ventas + pagos + inventario desplegable ===== */
.salesFilters{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 0 11px;
}
.salesFilterLabel{
    width:100%;
    margin:0;
    gap:5px;
}
.salesFilterLabel>span{
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted2);
}
.salesFilterLabel select{
    min-height:40px;
    padding:8px 10px;
    border-radius:10px;
    background:#fff;
}

.electronicPane{margin-top:14px}
.electronicIntro{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:2px;
}
.electronicIntro h3{margin:0}
.electronicIntro p{
    max-width:390px;
    margin:0;
    font-size:11px;
    line-height:1.5;
    text-align:right;
}
.electronicFields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 10px;
}
.electronicFields label{margin:11px 0}
.electronicFields #cardLast4Wrap{grid-column:1/-1}
.electronicGuide{
    display:flex;
    flex-direction:column;
    gap:3px;
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:11px;
    padding:10px 12px;
    font-size:11px;
    color:var(--muted);
    margin:3px 0 9px;
}
.electronicGuide b{color:var(--text)}
.electronicCashNote{margin-top:8px}

.collapsibleDepartment{padding:0;overflow:hidden}
.inventoryDeptSummary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 15px;
    user-select:none;
}
.inventoryDeptSummary::-webkit-details-marker{display:none}
.inventoryDeptSummary:hover{background:#fbfcff}
.inventoryDeptTitle{display:flex;align-items:center;gap:10px}
.inventoryDeptTitle h2{margin:0}
.deptChevron{
    width:30px;height:30px;
    border-radius:9px;
    background:var(--soft);
    color:var(--primary);
    display:grid;
    place-items:center;
    font-size:15px;
    font-weight:900;
    transition:transform .18s ease;
}
.collapsibleDepartment[open] .deptChevron{transform:rotate(180deg)}
.inventoryDeptBody{
    border-top:1px solid var(--border);
    padding:12px 15px 15px;
}

@media(max-width:720px){
    .electronicIntro{flex-direction:column;gap:4px}
    .electronicIntro p{text-align:left;max-width:none}
    .electronicFields{grid-template-columns:1fr}
    .electronicFields #cardLast4Wrap{grid-column:auto}
    .inventoryDeptSummary{align-items:flex-start;flex-direction:column}
}


/* ===== Ayuda contextual de acciones ===== */
.actionInfoRoot{
    position:fixed;
    right:22px;
    top:145px;
    z-index:500;
    width:min(390px,calc(100vw - 30px));
    pointer-events:none;
    opacity:0;
    transform:translateY(-8px) scale(.985);
    transition:opacity .18s ease,transform .18s ease;
}
.actionInfoRoot.show{
    opacity:1;
    transform:translateY(0) scale(1);
}
.actionInfoCard{
    display:grid;
    grid-template-columns:34px 1fr 28px;
    gap:10px;
    align-items:start;
    padding:12px 12px;
    border:1px solid #cdd9ff;
    border-radius:13px;
    background:#f6f8ff;
    box-shadow:0 14px 35px rgba(31,55,120,.14);
    pointer-events:auto;
}
.actionInfoIcon{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--primary);
    color:#fff;
    font-weight:900;
    font-family:Georgia,serif;
    font-size:17px;
}
.actionInfoCopy{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}
.actionInfoCopy strong{
    color:#2446a8;
    font-size:11px;
}
.actionInfoCopy span{
    color:#52607a;
    font-size:11px;
    line-height:1.45;
}
.actionInfoClose{
    width:26px;
    height:26px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#7180a0;
    font-size:17px;
    padding:0;
}
.actionInfoClose:hover{
    background:#e9efff;
    color:var(--primary);
}

@media(max-width:720px){
    .actionInfoRoot{
        top:auto;
        right:15px;
        left:15px;
        bottom:18px;
        width:auto;
    }
}


/* ===== Ayuda contextual por hover ===== */
button,
a.btn,
.functionKey,
.functionHome,
.product,
.inventoryDeptSummary,
summary,
[role="button"]{
    position:relative;
}

.actionInfoRoot{
    transition:opacity .14s ease,transform .14s ease;
}

.actionInfoCard{
    border-color:#c8d5ff;
}

@media(hover:hover){
    button:hover,
    a.btn:hover,
    .functionKey:hover,
    .functionHome:hover,
    .product:hover,
    .inventoryDeptSummary:hover{
        cursor:pointer;
    }
}


/* ===== Ayuda educativa anclada sobre cada botón ===== */
.actionInfoRoot{
    position:fixed !important;
    right:auto !important;
    bottom:auto !important;
    z-index:9999;
    width:340px;
    pointer-events:none;
    opacity:0;
    transform:translateY(4px) scale(.985);
    transition:opacity .14s ease,transform .14s ease;
}
.actionInfoRoot.show{
    opacity:1;
    transform:translateY(0) scale(1);
}
.actionInfoCard{
    position:relative;
    display:block;
    padding:12px 13px 13px;
    border:1px solid #bfcfff;
    border-radius:12px;
    background:#ffffff;
    box-shadow:0 12px 32px rgba(26,48,110,.16);
    pointer-events:none;
}
.actionInfoHeader{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:7px;
}
.actionInfoHeader strong{
    color:#2446a8;
    font-size:11px;
    letter-spacing:.01em;
}
.actionInfoIcon{
    width:24px;
    height:24px;
    border-radius:7px;
    font-size:13px;
    flex:0 0 auto;
}
.actionInfoCopy{
    display:block;
}
.actionInfoCopy span{
    display:block;
    color:#475467;
    font-size:11px;
    line-height:1.52;
}
.actionInfoArrow{
    position:absolute;
    width:10px;
    height:10px;
    background:#fff;
    border:1px solid #bfcfff;
    transform:rotate(45deg);
}
.actionInfoRoot[data-placement="top"] .actionInfoArrow{
    bottom:-6px;
    border-left:0;
    border-top:0;
}
.actionInfoRoot[data-placement="bottom"] .actionInfoArrow{
    top:-6px;
    border-right:0;
    border-bottom:0;
}
.actionInfoClose{display:none!important}

@media(max-width:720px){
    .actionInfoRoot{
        width:min(320px,calc(100vw - 24px)) !important;
    }
}


/* ===== CESCOR CAJA LAB · Branding final =====
   Azul principal tomado del logotipo CESCOR: #0177C7
*/
:root{
    --cescor-blue:#0177C7;
    --cescor-blue-dark:#0068B0;
    --cescor-blue-light:#1594DA;
}

.cescorLoginHero{
    background:var(--cescor-blue) !important;
    padding:58px 66px;
    justify-content:flex-start;
    gap:clamp(90px,15vh,170px);
}
.cescorLoginHero:before{
    width:460px;
    height:460px;
    right:-180px;
    top:-145px;
    background:#ffffff0b;
}
.cescorLoginHero:after{
    width:330px;
    height:330px;
    left:-150px;
    bottom:-90px;
    background:#ffffff0b;
}

.cescorLoginBrand>b{
    width:52px;
    height:52px;
    border-radius:15px;
    color:var(--cescor-blue);
    font-size:14px;
}
.cescorLoginBrand>span{
    font-size:19px;
    letter-spacing:-.01em;
}
.cescorLoginBrand small{
    font-size:10px;
}

.loginHeroContent{
    position:relative;
    z-index:1;
    max-width:720px;
}
.loginHeroContent h1{
    max-width:700px;
}
.loginHeroContent p{
    max-width:650px;
}

.login .btn.primary{
    background:var(--cescor-blue);
}
.login .btn.primary:hover{
    background:var(--cescor-blue-dark);
}

.registerStudentBtn{
    border:1px solid #b9dff3;
    background:#eef9ff;
    color:var(--cescor-blue-dark);
}
.registerStudentBtn:hover{
    background:#e1f4fd;
    border-color:#8bcbe9;
}

.loginDivider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:14px 0;
    color:var(--muted2);
    font-size:10px;
    font-weight:800;
}
.loginDivider:before,
.loginDivider:after{
    content:"";
    height:1px;
    background:var(--border);
    flex:1;
}
.loginDivider span{
    text-transform:uppercase;
}

.registerHint{
    font-size:10px;
    line-height:1.5;
    margin:9px 2px 0;
    color:var(--muted);
}

.loginSuccess{
    background:#eaf8f1;
    border:1px solid #bde6d0;
    color:#176846;
    margin-bottom:12px;
}
.loginSuccess span{
    font-size:11px;
}

.loginRegisterModal{
    position:fixed;
    inset:0;
    z-index:1000;
    display:grid;
    place-items:center;
    padding:20px;
    background:#0a253a80;
    backdrop-filter:blur(5px);
}
.loginRegisterModal[hidden]{
    display:none;
}
.loginRegisterCard{
    width:min(500px,96vw);
    max-height:92vh;
    overflow:auto;
    background:#fff;
    border-radius:20px;
    padding:25px;
    box-shadow:0 28px 80px #082a3d38;
    position:relative;
}
.loginRegisterCard h2{
    margin-bottom:7px;
}
.loginRegisterCard>p{
    font-size:12px;
    line-height:1.55;
}
.loginRegisterClose{
    position:absolute;
    top:16px;
    right:16px;
    width:36px;
    height:36px;
    border:1px solid var(--border);
    background:#fff;
    border-radius:10px;
    color:var(--muted);
    font-size:19px;
}
.studentRoleNotice{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:11px 12px;
    margin:6px 0 14px;
    border-radius:11px;
    background:#eef9ff;
    border:1px solid #c8e8f8;
    color:#205d7d;
}
.studentRoleNotice b{
    font-size:11px;
}
.studentRoleNotice span{
    font-size:10px;
}

@media(max-width:900px){
    .cescorLoginHero{
        padding:38px 30px;
        gap:55px;
    }
}


/* ===== Logo gráfico CESCOR ===== */
.brandLogoImage{
    display:block;
    object-fit:contain;
    flex:0 0 auto;
}

.loginBrandLogo{
    width:42px;
    height:42px;
    border-radius:16px;
    background:#fff;
    padding:4px;
    box-shadow:0 6px 18px rgba(5,44,94,.10);
}

.topBrandLogo{
    width:34px;
    height:34px;
    border-radius:12px;
    background:#fff;
    padding:3px;
    box-shadow:0 4px 12px rgba(5,44,94,.08);
}

.cescorLoginBrand{
    align-items:center;
}

.cescorLoginBrand>b{
    display:none !important;
}

.brandTop{
    align-items:center;
    gap:10px;
}

.brandTop>b{
    display:none !important;
}

@media(max-width:900px){
    .loginBrandLogo{
        width:38px;
        height:38px;
    }

    .topBrandLogo{
        width:30px;
        height:30px;
    }
}


/* ===== HOTFIX: filtro funcional de productos en Ventas =====
   Los productos marcados como hidden por JavaScript deben desaparecer.
   La regla .product { display:flex } estaba anulando el atributo hidden.
*/
.product[hidden],
#productGrid .product[hidden]{
    display:none !important;
}


/* ===== SOMBRAS LEVES GLOBALES · CESCOR CAJA LAB =====
   Objetivo: dar profundidad sutil a botones, tarjetas y cajas
   sin romper el estilo limpio de la interfaz.
*/
:root{
    --soft-shadow: 0 2px 8px rgba(15, 23, 42, .05);
    --soft-shadow-hover: 0 6px 18px rgba(15, 23, 42, .08);
    --soft-shadow-strong: 0 10px 24px rgba(15, 23, 42, .08);
}

/* Cajas principales */
.card,
.stat,
.summaryCard,
.kpi,
.tile,
.panel,
.modalBox,
.loginForm form,
.demo,
.alert,
.tableWrap,
details.cleanHistory,
.inventoryDepartment,
.inventoryProduct,
.product,
.clientCard,
.saleCard,
.ticketCard,
.cashCard,
.box,
.widget,
.emptyState,
.stepCard{
    box-shadow: var(--soft-shadow);
}

/* Barras y botones de navegación */
.functionKey,
.functionHome,
.brandTop,
.topbar .user,
.userBox,
header.topbar,
nav.functions,
.actions .btn,
.saleRowActions .btn{
    box-shadow: var(--soft-shadow);
}

/* Botones globales */
.btn,
button,
a.btn{
    box-shadow: var(--soft-shadow);
    transition: box-shadow .18s ease, transform .12s ease, filter .18s ease;
}

.btn:hover,
button:hover,
a.btn:hover,
.functionKey:hover,
.functionHome:hover{
    box-shadow: var(--soft-shadow-hover);
}

/* Inputs y cajones de formulario */
input,
select,
textarea,
.search,
.searchBox,
.moneyInput,
label.select,
label.input,
.formCard,
.formGrid label,
.loginRegisterCard,
.studentRoleNotice,
.info,
.electronicGuide,
.checkoutSummary,
.checkoutAside,
.receiptBox{
    box-shadow: var(--soft-shadow);
}

/* Tarjetas de productos / clientes / ventas */
.product:hover,
.inventoryProduct:hover,
.clientCard:hover,
.saleCard:hover{
    box-shadow: var(--soft-shadow-hover);
}

/* Modales y popovers */
.modalBox,
.loginRegisterCard,
.actionInfoCard{
    box-shadow: var(--soft-shadow-strong);
}

/* Detalles desplegables */
details.card > summary,
.inventoryDeptSummary,
.cleanAdvanced,
.cleanHistory > summary{
    box-shadow: var(--soft-shadow);
}

/* Evitar exageración en elementos muy pequeños */
.actionInfoIcon,
.badge,
.chip,
.statusDot{
    box-shadow: none !important;
}


/* ===== Administración de usuarios ===== */
.adminUserList{gap:8px}
.adminUserRow{
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto auto;
    align-items:center;
    gap:10px;
    padding:10px 0;
}
.adminUserIdentity{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.adminUserIdentity strong{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.adminUserIdentity small{line-height:1.35}
.adminUserActions{
    display:flex;
    gap:6px;
    justify-content:flex-end;
}
.userAdminHint{
    margin:0 0 10px;
    padding:9px 10px;
    border-radius:10px;
    border:1px solid var(--border);
    background:#fafbfc;
    color:var(--muted);
    font-size:10px;
    line-height:1.45;
    box-shadow:var(--soft-shadow);
}
.userModalIntro{
    margin-top:-4px;
    margin-bottom:12px;
    font-size:11px;
    line-height:1.5;
}
.userEditNotice{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin:4px 0 12px;
    padding:10px 11px;
    border-radius:10px;
    background:#eef9ff;
    border:1px solid #c6e9f8;
    color:#285d78;
}
.userEditNotice b{font-size:11px}
.userEditNotice span{font-size:10px;line-height:1.45}

@media(max-width:760px){
    .adminUserRow{
        grid-template-columns:40px minmax(0,1fr) auto;
    }
    .adminUserActions{
        grid-column:2/-1;
        justify-content:flex-start;
    }
}


/* ===== Vista ADMIN · Clientes de todos los perfiles ===== */
.adminClientsSummary{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,180px));
    gap:10px;
    margin-bottom:10px;
}
.adminClientStat{
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    gap:3px;
}
.adminClientStat span{
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    color:var(--muted2);
}
.adminClientStat strong{
    font-size:22px;
    letter-spacing:-.03em;
}

.clientOwner{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:180px;
}
.clientOwnerAvatar{
    width:30px;
    height:30px;
    border-radius:9px;
    background:var(--soft);
    color:var(--primary);
    display:grid;
    place-items:center;
    font-size:11px;
    font-weight:900;
    flex:0 0 auto;
}
.clientOwner>div{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:1px;
}
.clientOwner strong{
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.clientOwner small{
    font-size:9px;
    color:var(--muted2);
}

.adminReadOnlyLabel{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 8px;
    border-radius:8px;
    background:#f5f6f8;
    color:var(--muted2);
    font-size:9px;
    font-weight:800;
    white-space:nowrap;
}

@media(max-width:760px){
    .adminClientsSummary{
        grid-template-columns:1fr 1fr;
    }
}


/* ===== Ajustes finales CESCOR · v2.0 ===== */

/* Nombre + rol del usuario en la barra superior */
.topUserIdentity{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    white-space:nowrap;
}

.topUserIdentity strong{
    display:block;
    max-width:230px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.topUserIdentity small{
    display:inline-flex;
    align-items:center;
    padding-left:9px;
    border-left:1px solid var(--border);
    color:var(--muted2);
    font-size:9px;
    line-height:1;
}

/* Fondo gráfico del panel azul del login.
   Coloca la imagen como: assets/fondo.jpg */
.cescorLoginHero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:var(--cescor-blue) !important;
}

/* Imagen de fondo al 80% de opacidad */
.cescorLoginHero::before{
    content:"";
    position:absolute;
    inset:0;
    width:auto;
    height:auto;
    border-radius:0;
    background-image:url("fondo.jpg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    opacity:.92;
    z-index:0;
    pointer-events:none;
}

/* Capa azul muy ligera para conservar legibilidad y marca */
.cescorLoginHero::after{
    content:"";
    position:absolute;
    inset:0;
    width:auto;
    height:auto;
    border-radius:0;
    background:rgba(1,119,199,.10);
    z-index:1;
    pointer-events:none;
}

/* Contenido siempre por encima de la imagen */
.cescorLoginBrand,
.loginHeroContent{
    position:relative;
    z-index:2;
}

/* Ligero refuerzo del texto sobre fotografía */
.loginHeroContent h1,
.loginHeroContent p,
.loginHeroContent em,
.cescorLoginBrand{
    text-shadow:0 1px 5px rgba(0,40,80,.18);
}

@media(max-width:900px){
    .topUserIdentity{
        gap:6px;
    }

    .topUserIdentity small{
        padding-left:6px;
    }

    .cescorLoginHero::before{
        background-position:center;
    }
}


/* ===== Login CESCOR · azul muy dominante + foto al 10% ===== */
.cescorLoginHero{
    background:#0177C7 !important;
}

.cescorLoginHero::before{
    opacity:.10 !important; /* foto visible solo al 10% */
    filter:saturate(.75) contrast(.95);
}

.cescorLoginHero::after{
    background:rgba(1,119,199,.82) !important;
}


/* ===== Login final: foto ambiental 20% + texto totalmente legible ===== */
.cescorLoginHero{
    background:#0177C7 !important;
    color:#fff !important;
}

/* La fotografía solo ambienta */
.cescorLoginHero::before{
    background-image:url("fondo.jpg") !important;
    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    opacity:.20 !important;
    filter:none !important;
    z-index:0 !important;
}

/* Azul dominante, pero sin apagar el contenido */
.cescorLoginHero::after{
    background:rgba(1,119,199,.58) !important;
    opacity:1 !important;
    z-index:1 !important;
}

/* Todo el contenido textual queda por encima y al 100% */
.cescorLoginBrand,
.loginHeroContent{
    position:relative !important;
    z-index:3 !important;
    opacity:1 !important;
}

.cescorLoginBrand,
.cescorLoginBrand span,
.cescorLoginBrand small,
.loginHeroContent,
.loginHeroContent h1,
.loginHeroContent p,
.loginHeroContent em{
    color:#fff !important;
    opacity:1 !important;
}

.loginHeroContent h1{
    text-shadow:0 2px 8px rgba(0,35,75,.28) !important;
}

.loginHeroContent p{
    color:rgba(255,255,255,.94) !important;
    text-shadow:0 1px 5px rgba(0,35,75,.22) !important;
}

.loginHeroContent em{
    background:rgba(255,255,255,.10) !important;
    border-color:rgba(255,255,255,.36) !important;
    text-shadow:0 1px 4px rgba(0,35,75,.22) !important;
}

.cescorLoginBrand small{
    color:rgba(255,255,255,.90) !important;
}


/* ===== Login CESCOR · solo fondo.jpg, sin capa azul ===== */
.cescorLoginHero{
    background:transparent !important;
    color:#fff !important;
}

/* Mostrar la fotografía completa como fondo */
.cescorLoginHero::before{
    background-image:url("fondo.jpg") !important;
    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    opacity:1 !important;
    filter:none !important;
    z-index:0 !important;
}

/* Eliminar por completo la capa azul */
.cescorLoginHero::after{
    background:transparent !important;
    opacity:0 !important;
}

/* Mantener el contenido visible sobre la foto */
.cescorLoginBrand,
.loginHeroContent{
    position:relative !important;
    z-index:3 !important;
}

.cescorLoginBrand,
.cescorLoginBrand span,
.cescorLoginBrand small,
.loginHeroContent,
.loginHeroContent h1,
.loginHeroContent p,
.loginHeroContent em{
    color:#fff !important;
    opacity:1 !important;
}

.loginHeroContent h1{
    text-shadow:0 2px 10px rgba(0,0,0,.55) !important;
}

.loginHeroContent p,
.cescorLoginBrand small{
    text-shadow:0 1px 7px rgba(0,0,0,.50) !important;
}

.loginHeroContent em{
    background:rgba(0,0,0,.18) !important;
    border-color:rgba(255,255,255,.45) !important;
    text-shadow:0 1px 6px rgba(0,0,0,.50) !important;
}


/* ===== Pie institucional del login ===== */
.cescorLoginHero{
    position:relative !important;
}

.cescorLoginFooter{
    position:absolute;
    left:60px;
    right:60px;
    bottom:34px;
    z-index:3;
    display:flex;
    flex-direction:column;
    gap:4px;
    max-width:680px;
    color:#fff;
}

.cescorLoginFooter strong{
    font-size:11px;
    font-weight:800;
    letter-spacing:.01em;
    text-shadow:0 1px 6px rgba(0,0,0,.45);
}

.cescorLoginFooter span{
    max-width:620px;
    font-size:10px;
    line-height:1.5;
    color:rgba(255,255,255,.82);
    text-shadow:0 1px 6px rgba(0,0,0,.42);
}

@media(max-width:900px){
    .cescorLoginFooter{
        left:30px;
        right:30px;
        bottom:22px;
    }
}