:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#162638;background:#f5f7fb}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}.shell{max-width:660px;margin:auto;padding:16px 16px 28px}.topbar{display:flex;align-items:center;gap:12px;background:#153b61;color:white;border-radius:14px;padding:13px}.brandicon{display:grid;place-items:center}.brandcopy{display:flex;flex-direction:column;flex:1}.brandname{font-weight:800}.brandsub{font-size:12px;opacity:.86}.progress{display:flex;gap:7px;align-items:center;justify-content:center;margin:22px 0}.step{display:flex;gap:5px;align-items:center;color:#7c8898;font-weight:650;font-size:13px}.stepnum{height:27px;width:27px;border-radius:50%;background:#e3e9f0;display:grid;place-items:center}.step.active{color:#114676}.step.active .stepnum{background:#1b5791;color:white}.stepdivider{flex:1;max-width:40px;height:2px;background:#dde3eb}h1{font-size:25px;letter-spacing:-.5px;margin:0 0 8px}.eyebrow{color:#426c95;font-size:11px;font-weight:800;letter-spacing:.12em;margin:0 0 8px}.intro{color:#556577;line-height:1.55;font-size:15px;margin:0 0 15px}.screen{background:white;padding:19px 16px;border:1px solid #e2e7ee;border-radius:16px}.camera-wrap{position:relative;width:100%;aspect-ratio:4/3;background:#090e17;overflow:hidden;border-radius:12px}.camera-wrap video{width:100%;height:100%;object-fit:cover}.target,.barcode-target{position:absolute;left:5%;width:90%;top:35%;height:30%;border:3px solid #53dba3;border-radius:10px;box-shadow:0 0 0 1000px #0005;pointer-events:none}.target-line{position:absolute;top:50%;height:1px;background:#ffffff8c;left:10px;right:10px}.barcode-target{top:37%;height:25%;border-color:#f6d66a}.camera-caption{position:absolute;bottom:13px;left:0;right:0;text-align:center;color:white;font-size:13px;font-weight:700;text-shadow:0 1px 2px #111}.placeholder{border:2px dashed #bfd0e2;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;border-radius:12px;color:#728aa5;background:#f5f8fb;font-size:14px;text-align:center}.actions{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0}.button{border:0;border-radius:10px;min-height:47px;padding:11px 15px;font-weight:760;font-size:15px;flex:1;cursor:pointer}.button.primary{color:#fff;background:#1461a1}.button.secondary{color:#15507f;background:#e8f0f8}.button.ghost{background:transparent;color:#175480;width:100%;margin-top:10px}.button:disabled{opacity:.5}.fallback{border-top:1px solid #e7edf3;padding-top:15px;font-size:13px}.textlink{color:#145c9b;font-weight:700;display:block}.fallback input{margin-top:10px;width:100%;max-width:100%}.tiny{font-size:12px;color:#778291}.serial-card{display:flex;flex-direction:column;background:#eaf3fd;border-radius:10px;padding:13px;margin:12px 0}.serial-card span{font-size:12px;color:#617188}.serial-card strong{font-size:24px;letter-spacing:1px}.result-icon{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:#e4f9ee;color:#13734d;font-size:40px;margin:auto auto 14px}.result-icon.bad{background:#ffe8e8;color:#aa3030}.result-lead{text-align:center;font-size:22px;font-weight:800}.screen:has(.result-icon)>h1{text-align:center}.result-rows{border:1px solid #e2e8ef;border-radius:10px;padding:5px 13px}.result-rows>div{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;flex-wrap:wrap}.result-rows>div+div{border-top:1px solid #e2e8ef}.result-rows span{font-size:13px;color:#667487}.result-rows strong{letter-spacing:.4px}.result-note{font-size:13px;line-height:1.5;margin-top:12px;color:#69778a}.busy,.message{margin:12px 0;padding:13px;border-radius:11px;background:#e8f1fa;color:#204f7d;font-size:14px}.busy{display:flex;gap:11px;align-items:center}.busy span{display:block;font-size:12px}.spinner{width:25px;height:25px;border-radius:50%;border:3px solid #b4cfe4;border-top-color:#125589;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.message.error{background:#ffeded;color:#942c2c}footer{font-size:11px;color:#7a8899;margin:18px 3px;display:flex;flex-direction:column;gap:3px}@media(max-width:390px){.shell{padding:10px}.screen{padding:15px 12px}h1{font-size:22px}.brandname{font-size:14px}}

#auth-panel label{display:block;margin:8px 0;font-weight:600}#auth-panel input{display:block;width:100%;box-sizing:border-box;padding:12px;font-size:16px;border:1px solid #a3a3a3;border-radius:6px;margin-top:5px}.incident-entry{padding:10px 4px;border-bottom:1px solid #ddd;overflow-wrap:anywhere}#incident-panel{margin:14px 0}#auth-panel{margin:12px 0}

/* V5.2 – jerarquía visual y alerta operacional */
#incident-panel{background:#fff;border:1px solid #dce5ee;margin:18px 0 8px}
#incident-panel h2,#auth-panel h2{font-size:18px;line-height:1.3;margin:0 0 7px;color:#1a344d}
#incident-panel h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#incident-count{font-size:13px;background:#ecf2f8;color:#284d70;border-radius:999px;padding:4px 9px}
#auth-panel{background:#eef3f7;border:1px solid #dfe7ee;margin:8px 0 16px}
#auth-panel #logged-controls{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
#auth-panel #current-user{font-size:13px;overflow-wrap:anywhere;color:#33485c}
#auth-panel #btn-logout{flex:0 1 auto}
#screen-result.result-failure{border:2px solid #b42318;background:#fffafa}
.result-error-alert,.pending-incident-alert{display:flex;align-items:flex-start;gap:13px;padding:17px 15px;border-radius:13px;border:2px solid #9f1f17;background:#b42318;color:#fff;margin:0 0 20px}
.pending-incident-alert{margin:12px 0 15px}
.result-error-alert strong,.pending-incident-alert strong{display:block;font-size:21px;font-weight:850;line-height:1.15;letter-spacing:.015em}
.pending-incident-alert strong{font-size:17px}
.result-error-alert p,.pending-incident-alert p{margin:6px 0 0;font-size:15px;line-height:1.4;font-weight:550}
.warning-symbol{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;background:white;color:#9f1f17;border-radius:50%;font-size:23px;font-weight:900;line-height:1}
.warning-symbol.large{flex-basis:36px;width:36px;height:36px;font-size:28px}
#screen-result.result-failure #result-text{color:#991b1b}
#screen-result.result-failure .result-rows{border-color:#eab4b4;background:#fff}
.button.danger{background:#a61f17;color:white}
.button.danger:focus-visible{outline:3px solid #d97638;outline-offset:3px}
@media(max-width:390px){.result-error-alert strong{font-size:18px}.result-error-alert{padding:14px 11px;gap:10px}.result-error-alert p{font-size:14px}}


/* V5.4 – paso intermedio: código de barras generado y dimensiones */
.progress{gap:5px}.step{font-size:12px;gap:4px}.stepnum{width:25px;height:25px}.stepdivider{max-width:26px;min-width:8px}
.generated-code{margin:14px 0;padding:14px 10px;border:1px solid #d3dde8;border-radius:13px;background:#fff;text-align:center}
.generated-code-inner{width:100%;overflow:hidden;display:flex;justify-content:center}
#generated-barcode{display:block;max-width:100%;height:auto;background:#fff;}
.generated-code .tiny{display:block;margin-top:6px}
.generated-code #btn-regenerate{width:100%;margin-top:12px}
.dimensions-title{font-size:18px;color:#1a344d;margin:22px 0 3px}
.measurements-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:15px 0}
.measurements-grid label{display:block;font-size:13px;font-weight:750;color:#30475a}
.measurements-grid input{display:block;width:100%;margin-top:5px;padding:12px 10px;font-size:17px;border:1px solid #a9bbc9;border-radius:9px;min-height:47px;background:#fff;color:#183149}
.measurements-grid input:focus-visible{outline:3px solid #80b5ec;outline-offset:1px}
.data-error{font-size:13px;color:#ad231c;background:#fff0ee;border-radius:8px;padding:10px;margin:10px 0}
@media(max-width:355px){.step{font-size:11px}.stepnum{width:23px;height:23px}.measurements-grid{gap:8px}}