:root{--navy:#102b41;--blue:#237cc0;--aqua:#24b7ba;--cream:#f5f8fa;--white:#fff;--ink:#193044;--muted:#637486;--line:#dce6ec;--green:#199b77;--orange:#efb850;--shadow:0 6px 24px rgba(14,44,66,.07)}
*{box-sizing:border-box}html{background:#eef4f6}body{margin:0;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.4}button,input,select{font:inherit}button{cursor:pointer;min-height:44px;font-weight:800;border-radius:12px;border:0;padding:10px 16px}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #65bdde;outline-offset:2px}.primary{background:var(--blue);color:#fff;box-shadow:0 4px 10px #226fa126}.primary:hover{background:#125d9e}.ghost{color:var(--blue);background:#e9f4fc}.outline{border:1.5px solid #b6cedd;background:#fff;color:#254961}.small{min-height:34px;font-size:.8rem;padding:7px 12px}.hidden{display:none!important}.wide{width:100%;margin-top:18px}.masthead{background:var(--navy);color:white;display:flex;align-items:center;justify-content:space-between;padding:12px max(18px,calc((100vw - 900px)/2));gap:10px}.brand{display:flex;align-items:center;gap:10px}.brand-icon{background:#1c5262;border-radius:14px;font-size:1.7rem;padding:7px}.brand strong{display:block;letter-spacing:.07em;font-size:1rem}.brand small{display:block;font-size:.72rem;opacity:.8}.masthead .outline{background:transparent;color:white;border-color:#7dabb6}.app{max-width:900px;padding:20px 18px 30px;margin:auto;min-height:calc(100svh - 132px)}.steps{display:flex;gap:8px;margin-bottom:22px}.step{display:flex;align-items:center;gap:6px;flex:1;color:#7c8d9a;white-space:nowrap}.step span{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:#d8e4e9;display:grid;place-items:center;font-weight:900}.step small{font-size:.72rem;font-weight:750}.step.active{color:var(--navy)}.step.active span{background:var(--blue);color:white}.step.done span{background:#d7eee7;color:#14846a}.screen h1{font-size:clamp(1.6rem,4.5vw,2.3rem);margin:3px 0 7px;line-height:1.12;letter-spacing:-.035em}.screen h2{font-size:1rem;margin:0}.eyebrow{color:#117f9c;font-size:.78rem;font-weight:900;letter-spacing:.1em}.lead{font-size:1.05rem;color:#546b79;margin:0 0 18px}.lead.compact{font-size:.94rem}.card{background:white;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.formcard{padding:22px}label{font-weight:760;font-size:.9rem;display:block;margin:0 0 7px}input,select{background:#fff;border:1.5px solid #b9cfda;border-radius:11px;padding:12px;width:100%;color:var(--ink);min-width:0}input::placeholder{color:#90a0a8}.cols2,.record-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:16px}.notice{margin-top:18px;background:#f0f8fb;border-radius:11px;padding:12px;color:#32637a;font-size:.88rem}.canvas-frame{border-radius:16px;overflow:hidden;border:2px solid #b7d3df;background:white;box-shadow:var(--shadow)}.canvas-top,.canvas-bottom{display:flex;justify-content:space-between;align-items:center;padding:8px 13px;font-size:.77rem;font-weight:850;color:#315e6b;background:#eaf7f8}.canvas-bottom{font-weight:600;justify-content:center;color:#627e87}canvas{display:block;width:100%;height:auto}#drawCanvas{touch-action:none;cursor:crosshair;aspect-ratio:5/3;user-select:none}.toolbar,.navbuttons,.route-actions{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:12px}.toolbar button{flex:1}.navbuttons{margin-top:18px}.navbuttons .primary{flex:1}.mini-summary{border:1px solid #cae5ed;background:#eaf6fa;border-radius:12px;padding:10px 14px;margin-top:12px;font-size:.9rem;font-weight:700;color:#235c78}.calibrate{padding:14px;margin:13px 0}.calibrate label{margin:0 0 8px}.calibrate label b{color:#117f9c}.calrow{display:flex;gap:10px;align-items:center}.calrow input{flex:1}.step-length{flex:0 0 auto;font-weight:900;color:#177f77;min-width:90px;text-align:center}.calibrate small{display:block;margin-top:6px;color:var(--muted)}.route-card{padding:15px}.route-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.route-head small{color:#008c97;letter-spacing:.08em;font-size:.72rem;font-weight:900}.route-head h2{font-size:1.2rem}.tag{font-size:.68rem;font-weight:900;letter-spacing:.04em;padding:6px 8px;border-radius:8px;background:#e4f3fb;color:#2a78a2}.tag.link{background:#fff1d4;color:#946213}.route-preview{border:1px solid var(--line);background:white;aspect-ratio:5/3;width:100%;max-height:145px;object-fit:contain;margin:10px auto;border-radius:8px}.compass-row{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:center;border-top:1px solid var(--line);padding:13px 0}.compass-wrap{display:grid;justify-items:center;gap:8px}.compass{width:154px;height:154px;border-radius:50%;position:relative;background:radial-gradient(circle,#fff 0,#fff 54%,#e3f3fa 55%,#f1f6fb 75%,#d9eaf2 100%);border:5px solid #8cbacb;box-shadow:inset 0 0 0 1px #f8ffff,0 4px 12px #17374b22;overflow:hidden}.compass-rose{position:absolute;inset:0;transition:transform .1s linear}.compass-rose span{position:absolute;font-size:.82rem;font-weight:950;color:#5a6976;z-index:2}.compass-rose .north{top:2px;left:50%;transform:translateX(-50%);color:#df514d}.compass-rose .south{bottom:2px;left:50%;transform:translateX(-50%)}.compass-rose .east{right:6px;top:50%;transform:translateY(-50%)}.compass-rose .west{left:5px;top:50%;transform:translateY(-50%)}.rose-lines{position:absolute;inset:22px;border-radius:50%;background:repeating-conic-gradient(from -1deg,#bfd6e2 0 2deg,transparent 2deg 45deg);opacity:.75}.target-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:72px;font-weight:900;color:var(--green);text-shadow:0 2px 2px #fff;transform-origin:center center;z-index:3;line-height:1}.forward-marker{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:5;color:#e88f3f;font-size:24px;font-weight:900}.pin{position:absolute;left:50%;top:50%;height:14px;width:14px;border:4px solid var(--navy);border-radius:50%;transform:translate(-50%,-50%);z-index:4;background:#fff}.big-bearing{font-size:clamp(2rem,5vw,2.6rem);font-weight:950;letter-spacing:-.02em;line-height:1.1;color:var(--navy)}.big-bearing b{font-size:.65em;color:#117f9c}.planned{font-weight:850;color:#14795f;font-size:1.15rem;margin:8px 0}.subtle{font-size:.79rem;color:#667886}.record-row{margin:0;gap:12px}.record-row label{font-size:.8rem}.route-actions{margin-top:15px}.route-actions .primary{flex:1}.footnote{font-size:.77rem;color:#72848e;margin:14px 0 0}.backdesign{margin-top:12px}.identity{font-size:.85rem;color:#4c6b7c;font-weight:750;padding:0 0 12px}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare-card{padding:12px}.compare-card h2{margin:0 0 8px}.compare-card canvas{border:1px solid #dbe9ed;border-radius:9px;aspect-ratio:5/3}.compare-card small{color:var(--muted);display:block;margin-top:6px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.stat{background:#e8f4f5;border-radius:12px;padding:14px 8px;text-align:center}.stat small{display:block;font-size:.73rem;color:#486876;font-weight:750}.stat strong{font-size:clamp(1rem,3vw,1.5rem);color:#176b7d}.restart{display:block;margin:22px auto 0}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#102b41;color:white;padding:12px 17px;border-radius:12px;font-size:.92rem;max-width:90%;box-shadow:0 8px 25px #09263840;z-index:30;text-align:center}footer{text-align:center;color:#78909b;font-size:.74rem;padding:13px}
@media(max-width:540px){.app{padding:14px 12px 25px}.steps{gap:4px;margin-bottom:17px}.step{flex-direction:column;gap:4px;text-align:center;min-width:0}.step span{width:27px;height:27px;flex:0 0 27px}.step small{font-size:.62rem}.card{padding:14px}.formcard{padding:17px}.lead{font-size:.96rem}.route-card{padding:12px}.compass-row{grid-template-columns:135px 1fr;gap:10px;padding:9px 0}.compass{width:120px;height:120px;border-width:4px}.target-arrow{font-size:58px}.big-bearing{font-size:1.8rem}.planned{font-size:1rem}.subtle{font-size:.72rem}.compass-btn{font-size:.75rem;padding:5px 8px}.record-row{gap:8px}.record-row input,.record-row select{padding:10px 5px;font-size:.91rem}.route-actions button{padding:9px 11px;font-size:.84rem}.compare-grid{grid-template-columns:1fr}.compare-card{padding:10px}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stat{padding:12px 3px}.stat small{font-size:.65rem}.stat strong{font-size:1.02rem}.toolbar button{padding:9px 5px;font-size:.83rem}.calrow input{padding:11px 8px}.step-length{min-width:72px;font-size:.85rem}}
@media print{body{background:white}.masthead,.steps,footer,button,.navbuttons,.footnote,.restart,#toast{display:none!important}.app{max-width:100%;padding:0}.screen{display:none!important}#s4{display:block!important}#s4 h1{margin-bottom:10px}.compare-grid{grid-template-columns:1fr 1fr}.card{box-shadow:none;border:1px solid #b7cbd6}.stats-grid{break-inside:avoid}.compare-card{break-inside:avoid}.eyebrow{color:#000}}

/* Modo brújula con orientación confirmada — v1.1 */
.bearing-label{font-size:.69rem;letter-spacing:.055em;font-weight:950;color:#347586;margin:2px 0 4px}
.live-label{margin-top:13px}.live-reading{font-weight:950;font-size:1.65rem;color:var(--navy);line-height:1.15}
.compass-feedback{margin-top:6px;padding:8px 10px;border:1px solid #b8dbe5;background:#edf7fa;color:#30596b;border-radius:10px;font-size:.79rem;font-weight:720;min-height:42px}
.compass-feedback.aligned{background:#e0f7ea;color:#08734e;border-color:#9bdfb7}
.compass-feedback.turn{background:#fff2df;color:#94520c;border-color:#f2d4a0}
.compass-feedback.warning{background:#fff0ed;color:#97402e;border-color:#f2c7be}
.alignment-panel{background:#f2f9fb;border:1.5px solid #c2dce4;border-radius:13px;padding:13px;margin-bottom:13px}
.alignment-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.alignment-top strong{font-size:.92rem}
.text-action{min-height:30px;background:transparent;color:#08769a;text-decoration:underline;font-size:.78rem;padding:4px 2px;text-align:right}
.alignment-copy{margin:7px 0;color:#496b7c;font-size:.82rem}
.check-bearing{width:100%;background:#176c89;color:#fff;min-height:46px;margin-top:8px}
.check-bearing:disabled{background:#b3c6ce;opacity:1;color:#47606a}
.confirmed-info{font-size:.81rem;color:#607988;margin-top:9px}
.confirmed-info.success{color:#08734e;font-weight:850}
.physical-panel{margin:8px 0}.physical-panel label{font-size:.78rem}.physical-panel select{font-size:.87rem;padding:10px}
.single-row{grid-template-columns:1fr;margin:0}.single-row label{font-size:.87rem}.single-row input{font-size:1.05rem}
.single-row small{display:block;color:#627785;font-size:.77rem;margin:5px 1px 0}
@media(max-width:540px){.compass-row{grid-template-columns:126px minmax(0,1fr);gap:9px}.live-reading{font-size:1.42rem}.bearing-label{font-size:.61rem}.alignment-panel{padding:11px}}
@media print{.alignment-panel,.calibrate{display:none!important}}

.compass-legend{font-size:.64rem;line-height:1.25;color:#59768a;text-align:center;max-width:165px}
/* Versión 2 · letras rectas y autodiagnóstico del sensor real */
.design-controls{margin-bottom:12px}.design-controls small{color:#67808b;display:block;margin-top:6px;font-size:.75rem}.smallcopy{font-size:.84rem;color:#587182;margin:9px 0;line-height:1.45}.sensor-test{margin:12px 0 14px;background:#faffff}.sensor-test .route-head{align-items:center}.sensor-test h2{font-size:1rem}.sensor-test .tag{background:#e9edf0;color:#576a74}.sensor-test .tag.passed{background:#d4f6e5;color:#08784d}.test-progress{padding:11px 13px;background:#e8f4f8;border:1px solid #bfdfea;color:#24526b;border-radius:11px;font-size:.86rem;font-weight:800}.test-button{margin-top:12px}.test-detail{display:block;color:#627b88;font-size:.73rem;margin-top:8px;line-height:1.3}.physical-switch{display:block;margin-left:auto;margin-top:9px}.compass-rose,.target-arrow{pointer-events:none}.forward-marker{color:#e77e31;top:2px;font-size:18px}.compass-legend{max-width:170px}.physical-panel small{display:block;color:#687985;margin-top:5px;font-size:.77rem}#drawCanvas{touch-action:pan-y;cursor:default}.route-preview{max-height:162px}#confirmBearing:disabled{color:#4f6876}
@media(max-width:540px){.sensor-test{padding:13px}.route-card{padding:12px}.compass-legend{font-size:.61rem}.compass-row{grid-template-columns:126px minmax(0,1fr);gap:8px}.live-reading{font-size:1.27rem}.planned{font-size:.88rem}.big-bearing{font-size:1.6rem}}
@media print{.sensor-test,.design-controls{display:none!important}}