:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#13233d;background:#f3f6fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}button:disabled{opacity:.5;cursor:not-allowed}.splash{display:grid;place-items:center;min-height:100vh;color:#53637b}.layout{display:grid;grid-template-columns:246px minmax(0,1fr);min-height:100vh}.sidebar{background:#0b1b37;color:#d4e2fc;padding:24px 16px;position:sticky;top:0;height:100vh;overflow:auto}.brand{display:flex;gap:11px;align-items:center;margin:0 5px 28px}.brand-icon{display:grid;place-items:center;width:45px;height:45px;background:linear-gradient(135deg,#477cff,#2ec5cd);border-radius:14px;font-size:23px;color:white}.brand strong{font-size:20px;color:white}.brand small{display:block;color:#a6b5d3;margin-top:2px}.nav button{display:flex;align-items:center;gap:12px;width:100%;background:transparent;color:#b9c8e3;border:0;padding:13px 14px;border-radius:12px;margin:4px 0;text-align:left}.nav button.active,.nav button:hover{background:#20416e;color:white}.nav .ic{font-size:20px;width:23px;text-align:center}.main{min-width:0;padding:30px 36px 52px}.top{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:22px}.eyebrow{text-transform:uppercase;font-size:11px;color:#6280aa;font-weight:800;letter-spacing:1.2px;margin:0 0 4px}h1{margin:0;font-size:30px;letter-spacing:-.6px}h2{font-size:18px;margin:0}p.sub{color:#697b94;margin:6px 0 0;font-size:13px}.user{background:white;border:1px solid #e3e9f1;padding:8px 12px;border-radius:12px;font-size:12px;color:#526882;display:flex;align-items:center;gap:9px}.user b{color:#263b5b}.selector{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:20px}.tab,.button{border-radius:11px;border:1px solid #dce4ef;background:#fff;color:#35506d;padding:11px 15px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.tab.active,.button.primary{background:#2365db;color:white;border-color:#2365db}.button.danger{border-color:#f4c9c9;color:#c24a4a;background:#fff8f8}.button.good{background:#0e9d77;color:white;border-color:#0e9d77}.button.small{padding:7px 11px}.spacer{flex:1}.card{background:#fff;border:1px solid #e5eaf3;border-radius:18px;box-shadow:0 5px 26px rgba(27,46,79,.035);padding:21px;min-width:0}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:17px}.kpi{padding:20px}.kpi small{color:#73849a;font-weight:650}.kpi .val{font-weight:800;font-size:29px;margin-top:12px;color:#213d65}.kpi .hint{font-size:12px;color:#8a9ab1;margin-top:6px}.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:17px}.muted{color:#75869e}.small{font-size:12px}.input,.select{border:1px solid #d7e1ed;border-radius:10px;padding:11px 12px;background:white;color:#203954;outline:0;width:100%;min-width:0}.input:focus,.select:focus{border-color:#4483e6;box-shadow:0 0 0 3px #3a7afa19}label.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#556b85;font-weight:750}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.full{grid-column:1/-1}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:17px;align-items:center}.table-wrap{overflow-x:auto;width:100%;border:1px solid #e7edf5;border-radius:11px}table{border-collapse:collapse;width:100%;font-size:12px;text-align:left;white-space:nowrap}th{background:#f7f9fd;color:#7890aa;padding:13px;font-size:11px;text-transform:uppercase;letter-spacing:.35px}td{padding:13px;border-top:1px solid #edf1f7;color:#304761}tr:hover td{background:#fbfcff}.product-cell{display:flex;gap:10px;align-items:center}.thumb{width:38px;height:38px;background:#e9f0ff;display:grid;place-items:center;border-radius:10px;color:#346ddd;font-size:19px;object-fit:cover}.badge{border-radius:24px;padding:4px 9px;background:#e8f1ff;color:#2b69c8;font-size:11px;font-weight:750;display:inline-block}.badge.ok{background:#e2f8ef;color:#0d9969}.badge.warn{background:#fff3d9;color:#a87204}.badge.bad{background:#ffe7e8;color:#c24052}.statlist{display:flex;flex-direction:column;gap:13px}.statline{display:flex;align-items:center;justify-content:space-between;background:#f8faff;border-radius:11px;padding:13px}.notice{background:#edf5ff;border:1px solid #d7e6ff;color:#3d689f;border-radius:12px;padding:12px 15px;font-size:12px;line-height:1.6}.empty{text-align:center;color:#8a9bb1;padding:34px 12px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.filters .input{max-width:360px}.count-row{display:grid;grid-template-columns:1fr 110px auto;gap:12px;align-items:center;border-bottom:1px solid #edf1f7;padding:12px 0}.count-row:last-child{border:0}.count-row b{display:block}.count-row small{color:#7a8ca4}.count-row input{max-width:110px}.status{font-weight:750}.status.neg{color:#d64c59}.status.pos{color:#cb850b}.status.zero{color:#129a78}.auth{max-width:475px;margin:9vh auto 0;padding:28px}.auth-logo{margin-bottom:25px;font-size:27px;font-weight:800;color:#1e4ea4}.auth .formgrid{grid-template-columns:1fr}.auth .button{width:100%}.bar{height:9px;background:#ecf2fa;border-radius:12px;overflow:hidden}.bar i{height:100%;display:block;background:#2771e6}.photo-upload{border:2px dashed #b6cbea;border-radius:13px;background:#f7faff;padding:22px;text-align:center}.photo-upload input{width:100%;margin-top:8px}.footer-note{font-size:11px;color:#9aaac0;margin-top:28px}.mobilebar{display:none}.toast{position:fixed;z-index:100;right:24px;bottom:24px;background:#203c67;color:white;max-width:460px;padding:14px 18px;border-radius:13px;box-shadow:0 10px 40px #1b2a4c3d}.toast.error{background:#bb3d50}.loading{opacity:.7;pointer-events:none}@media(max-width:1080px){.cards{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.sidebar{width:220px}.layout{grid-template-columns:220px 1fr}.main{padding:25px 20px}}@media(max-width:700px){.layout{display:block}.sidebar{display:none}.main{padding:18px 13px 90px}.top{align-items:flex-start}.top h1{font-size:24px}.user{padding:7px;font-size:10px}.cards{gap:9px}.kpi{padding:14px}.kpi .val{font-size:24px}.card{padding:15px}.formgrid{grid-template-columns:1fr}.count-row{grid-template-columns:1fr 80px auto;gap:5px}.mobilebar{display:flex;position:fixed;z-index:40;bottom:0;left:0;right:0;background:white;border-top:1px solid #e3e9f1;justify-content:space-around;padding:9px 0 max(9px,env(safe-area-inset-bottom))}.mobilebar button{background:transparent;border:0;color:#73849a;display:flex;flex-direction:column;align-items:center;font-size:10px;gap:3px}.mobilebar .selected{color:#1e63ce}.mobilebar span{font-size:20px}.selector{gap:7px}.button,.tab{padding:10px 11px}.toast{left:14px;right:14px;bottom:80px}.auth{margin:7vh 12px}.filters .input{max-width:none}}

/* Control 360 v0.4 · adaptable a perfiles, centro y navegador */
.collapsed{grid-template-columns:82px minmax(0,1fr)}
.collapsed .sidebar{width:82px;padding-left:11px;padding-right:11px}
.collapsed .brand-label,.collapsed .nav button{font-size:0}
.collapsed .nav button{justify-content:center;padding:13px 5px}
.collapsed .nav .ic{font-size:22px}
.collapsed .brand-icon{flex:none}
.collapsed .brand{margin-left:5px}
.collapse-button{width:100%;background:rgba(255,255,255,.09);color:#e9f1ff;border:1px solid rgba(255,255,255,.12);padding:11px;border-radius:10px;margin:0 0 14px;text-align:center}
.collapse-button:hover{background:#20416e}
.ceve-chip{background:#e6efff;border:1px solid #cfddf4;border-radius:10px;padding:11px 15px;font-size:13px;font-weight:700;color:#27549b}
.ceve-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:7px;border:1px solid #dfe8f4;background:#f8faff;max-height:230px;overflow:auto;padding:11px;border-radius:12px;margin-top:7px}
.ceve-check{display:flex;align-items:center;gap:8px;font-size:12px;padding:9px;background:white;border:1px solid #e5eaf4;border-radius:9px;cursor:pointer}
.ceve-check input{width:17px;height:17px;accent-color:#2967d2}
.ceve-check:hover{border-color:#97baf0}
@media(max-width:1080px){.collapsed{grid-template-columns:70px minmax(0,1fr)}.collapsed .sidebar{width:70px}}
@media(max-width:700px){.collapsed{display:block}.collapsed .sidebar{display:none}.collapse-button{display:none}.ceve-options{grid-template-columns:1fr 1fr}.ceve-chip{font-size:12px}.selector{flex-wrap:wrap}.selector .select{max-width:100%!important}}
@media(max-width:380px){.ceve-options{grid-template-columns:1fr}}

/* v0.6: enrollment and fullscreen */
.login-modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.login-modes .button{flex:1;min-width:145px}
.qr-backdrop{position:fixed;inset:0;z-index:130;background:#0b1b37c9;display:grid;place-items:center;padding:20px}
.qr-dialog{width:min(100%,430px);text-align:center;box-shadow:0 20px 70px #070d1b66}
.qr-canvas{display:block;width:244px;height:244px;margin:20px auto;background:white}
.qr-dialog .actions{justify-content:center}
@media(max-width:680px){.auth{margin:3vh 12px}.qr-dialog{padding:16px}.login-modes{flex-direction:column}.login-modes .button{width:100%}}
@media(display-mode:fullscreen){body{overscroll-behavior:none}}


/* v0.8 - rail lateral compacto, expansión superpuesta por hover o teclado */
@media(min-width:701px){
 .layout,.layout.collapsed{grid-template-columns:76px minmax(0,1fr)}
 .layout>.sidebar,.layout.collapsed>.sidebar{
  width:76px;min-width:76px;padding:22px 9px;
  position:sticky;top:0;left:0;z-index:60;overflow-x:hidden;overflow-y:auto;
  transition:width .2s ease,box-shadow .2s ease,padding .2s ease;
  scrollbar-width:none;box-shadow:0 0 0 transparent;
 }
 .layout>.sidebar::-webkit-scrollbar{display:none}
 .layout>.sidebar .brand{margin:0 0 28px 5px;gap:11px;white-space:nowrap}
 .layout>.sidebar .brand-icon{flex:0 0 45px}
 .layout>.sidebar .brand-label{font-size:inherit;opacity:0;visibility:hidden;white-space:normal;width:160px;flex:0 0 160px;transition:opacity .12s}
 .layout>.sidebar .nav button{font-size:0;white-space:nowrap;overflow:hidden;justify-content:flex-start;gap:12px;padding:13px 14px}
 .layout>.sidebar .nav .ic{flex:0 0 23px;font-size:21px}
 .layout>.sidebar:is(:hover,:has(:focus-visible)),.layout.collapsed>.sidebar:is(:hover,:has(:focus-visible)){
  width:256px;padding:22px 14px;box-shadow:12px 0 34px rgba(7,19,41,.19);
 }
 .layout>.sidebar:is(:hover,:has(:focus-visible)) .brand-label{
  opacity:1;visibility:visible;
 }
 .layout>.sidebar:is(:hover,:has(:focus-visible)) .nav button{font-size:14px}
 .layout>.sidebar .collapse-button{display:none}
}
@media(max-width:700px){.layout,.layout.collapsed{display:block}.layout>.sidebar{display:none}}
@media(prefers-reduced-motion:reduce){.layout>.sidebar{transition:none!important}}


/* v0.9 - cierre de sesión accesible, adaptación real a móviles y tabletas */
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.top-actions .user{min-width:0;max-width:min(370px,48vw)}
.top-actions .user>div{min-width:0}
.top-actions .user b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout-button{flex:0 0 auto;border-color:#f5cfd0;color:#b33549;background:#fff8f8}
.logout-button:hover{background:#ffecec}
.qr-domain{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:700px){
 html,body,#app{width:100%;max-width:100%;min-height:100dvh;overflow-x:clip}
 .layout,.layout.collapsed{width:100%;min-width:0}
 .main{width:100%;max-width:100%;min-width:0;min-height:100dvh;padding:16px 12px calc(85px + env(safe-area-inset-bottom))}
 .top{display:flex;flex-direction:column;align-items:stretch;gap:12px}
 .top>div:first-child{min-width:0}
 .top h1{font-size:clamp(22px,6vw,30px);overflow-wrap:anywhere}
 .top-actions{width:100%;justify-content:space-between;gap:7px}
 .top-actions .user{flex:1 1 0;max-width:unset;min-width:0}
 .top-actions .user b{font-size:11px}
 .logout-button{flex:0 0 auto;padding:10px 9px;font-size:11px}
 .selector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
 .selector>.button,.selector>.tab{min-width:0;min-height:42px;padding:9px 7px;white-space:normal;text-align:center}
 .selector>.spacer{display:none}
 .selector>.select,.selector>.ceve-chip{grid-column:1/-1;width:100%;max-width:100%;min-width:0}
 .selector>.button[data-action="export"]{grid-column:1/-1}
 .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .card,.kpi,.table-wrap,.filters,.split{min-width:0;max-width:100%}
 .split{grid-template-columns:minmax(0,1fr)}
 .formgrid{grid-template-columns:minmax(0,1fr)}
 .formgrid>.field{min-width:0}
 .mobilebar{width:100%;max-width:100%;gap:2px;padding:7px 5px max(8px,env(safe-area-inset-bottom))}
 .mobilebar button{flex:1 1 0;min-width:0;padding:4px 2px;font-size:10px;overflow:hidden;text-overflow:ellipsis}
 .mobilebar span{font-size:19px}
 .qr-backdrop{padding:max(8px,env(safe-area-inset-top)) 10px max(12px,env(safe-area-inset-bottom))}
 .qr-dialog{width:min(100%,420px);max-height:calc(100dvh - 30px);overflow-y:auto}
 .auth{max-width:100%;margin:clamp(12px,5vh,45px) 12px;padding:clamp(17px,5vw,28px)}
 .auth-logo{font-size:clamp(21px,6vw,27px)}
 .count-row{grid-template-columns:minmax(0,1fr) 86px auto}
}
@media(max-width:390px){
 .main{padding-left:9px;padding-right:9px}
 .cards{grid-template-columns:minmax(0,1fr)}
 .count-row{grid-template-columns:minmax(0,1fr) 70px auto;gap:5px}
 .mobilebar button{font-size:9px}
 .mobilebar span{font-size:17px}
}

/* v0.9 - PWA instalable: botones solo cuando el navegador habilita instalación */
[hidden]{display:none!important}
.mobile-install-help{display:none}
@media(max-width:700px){
 .mobile-install-help{display:inline}
 .install-pwa:not([hidden]){grid-column:1/-1;min-height:43px;background:#e8f1ff;color:#2159ab}
}


/* v0.11 — reconocimiento de productos con visor y estado de consulta */
.photo-workspace{align-items:start}
.photo-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:150px;cursor:pointer}
.photo-upload:focus-within{outline:3px solid #9ac5ff;outline-offset:2px}
.photo-upload-icon{font-size:40px;color:#3478da}
.photo-upload input{max-width:100%;font-size:13px;cursor:pointer}
.photo-preview{margin-top:16px;border-radius:14px;overflow:hidden;background:#eff4fc;text-align:center}
.photo-preview img{width:100%;max-height:330px;object-fit:contain;display:block}
.photo-loading{display:flex;align-items:center;gap:16px;background:#edf5ff;color:#244d82;padding:15px;border-radius:13px;margin-top:14px;min-height:76px}
.photo-loading p{font-size:12px;margin:5px 0 0;line-height:1.4}
.photo-spinner{display:block;width:32px;height:32px;flex:0 0 32px;border-radius:50%;border:4px solid #c4dfff;border-top-color:#2467d9;animation:photo-rotate 0.8s linear infinite}
@keyframes photo-rotate{to{transform:rotate(360deg)}}
.photo-found{border-top:1px solid #e2e8f3;margin-top:16px;padding-top:18px}
.photo-found h2{margin-bottom:12px}
.photo-found form{margin-top:14px}
.photo-meta{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:10px}
.photo-sources{font-size:12px;color:#3d6392;line-height:1.7;margin-top:12px;overflow-wrap:anywhere}
.photo-sources a{color:#2365db;text-decoration:underline}
@media(max-width:700px){
 .photo-workspace{grid-template-columns:minmax(0,1fr)}
 .photo-preview img{max-height:290px}
 .photo-found .formgrid{grid-template-columns:minmax(0,1fr)}
 .photo-upload{padding:18px 10px}
}
@media(prefers-reduced-motion:reduce){.photo-spinner{animation-duration:2.5s}}


/* v0.12 · espacio aprovechado en dispositivos táctiles */
.top-actions .user small{display:block;color:#697b94;font-size:10px;line-height:1.15;margin-top:2px}
@media(max-width:800px), (pointer:coarse){
 .desktop-only{display:none!important}
}
@media(max-width:700px){
 .main{padding-top:max(10px,env(safe-area-inset-top));padding-left:12px;padding-right:12px}
 .top{
   display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,33vw);
   gap:9px;align-items:center;margin-bottom:12px;
 }
 .top .top-heading{min-width:0}
 .top .eyebrow{font-size:9px;letter-spacing:.45px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 4px}
 .top h1{font-size:clamp(18px,5.3vw,24px);line-height:1.16;letter-spacing:-.35px}
 .top .sub{display:none}
 .top-actions{width:auto;max-width:100%;justify-content:end;min-width:0}
 .top-actions .user{width:100%;max-width:100%;flex:0 1 auto;min-width:0;padding:6px 7px;border-radius:9px;gap:0;font-size:9px;line-height:1.1}
 .top-actions .user .user-dot{display:none}
 .top-actions .user b{font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .top-actions .user small{font-size:9px;margin-top:2px;line-height:1.1}
 .top-actions .logout-button{display:none}
 .selector{gap:7px;margin-bottom:12px}
 .selector>.button,.selector>.tab{min-height:39px}
 .selector>.button[data-action="export"]{min-height:38px}
 .photo-workspace>.card{padding:13px}
 .photo-found{padding-top:12px}
 .photo-found form{gap:10px}
 .photo-found .field .input{min-height:44px}
}
@media(max-width:390px){
 .top{grid-template-columns:minmax(0,1fr) minmax(94px,31vw);gap:6px}
 .top h1{font-size:18px}
 .top-actions .user{padding:5px}
 .top-actions .user b{font-size:9px}
 .top-actions .user small{font-size:8px}
}