:root{--navy:#0F3450;--navy2:#174668;--ink:#14202b;--mut:#5d6b78;--line:#dde3ea;--bg:#eef2f6;--ok:#22a35a}
*{box-sizing:border-box}html,body{margin:0;height:100%}body{font:14px/1.45 system-ui,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);display:flex;flex-direction:column}
button{font:inherit;cursor:pointer}
.top{display:flex;align-items:center;gap:16px;background:var(--navy);color:#fff;padding:10px 18px;flex:none}
.top .logo{height:30px;width:auto;display:block}
.marca{border-left:1px solid rgba(255,255,255,.3);padding-left:16px}.marca b{font-size:15px;display:block;line-height:1.2}.marca span{font-size:11.5px;opacity:.8}
.idioma{margin-left:auto;display:flex;gap:2px;background:rgba(255,255,255,.12);border-radius:8px;padding:3px}
.idioma button{border:0;background:transparent;color:#fff;opacity:.75;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700}.idioma button.on{background:#fff;color:var(--navy);opacity:1}
.app{flex:1;display:grid;grid-template-columns:300px minmax(0,1fr) 330px;min-height:0}
.lista{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.filtros{padding:12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.fila{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.fila span{font-size:11px;color:var(--mut);width:66px}
.fila button{border:1px solid var(--line);background:#fff;border-radius:20px;padding:3px 9px;font-size:12px;color:var(--ink)}.fila button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.cuenta{font-size:12px;color:var(--mut);padding:8px 14px 2px}
.items{overflow:auto;padding:6px 10px 14px;flex:1}
.it{display:block;width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 11px;margin-bottom:6px;color:var(--ink)}
.it:hover{border-color:#9db3c8}.it.on{border-color:var(--navy);box-shadow:inset 3px 0 0 var(--navy);background:#f3f7fb}
.it b{font-size:13px}.it small{display:block;color:var(--mut);font-size:12px}.it .n{float:right;font-size:11px;color:var(--mut);font-weight:700}
.visor{position:relative;min-height:0;background:linear-gradient(#f7f9fb,#dfe6ed)}#v3d{position:absolute;inset:0}#v3d canvas{display:block}
.etiquetas{position:absolute;inset:0;pointer-events:none}
.cota{background:var(--navy);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:12px;white-space:nowrap;box-shadow:0 2px 8px rgba(15,52,80,.25)}
.tip{position:absolute;pointer-events:none;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 10px;box-shadow:0 6px 20px rgba(15,52,80,.15);font-size:12.5px;z-index:5}
.tip b{display:block}.tip span{color:var(--mut);font-size:11px}.tip[hidden]{display:none}
.cargando{position:absolute;inset:0;display:grid;place-items:center;color:var(--mut);font-weight:600;pointer-events:none}
.barra-visor{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:4px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:12px;padding:5px;box-shadow:0 6px 24px rgba(15,52,80,.12)}
.barra-visor button{border:0;background:transparent;border-radius:8px;padding:6px 11px;font-size:13px;color:var(--ink);white-space:nowrap}.barra-visor button.on{background:var(--navy);color:#fff}.barra-visor .sep{width:1px;background:var(--line);margin:3px 4px}
.ficha{background:#fff;border-left:1px solid var(--line);overflow:auto;padding:16px}
.cab .num{font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.5px}.cab h1{font-size:18px;margin:2px 0 2px}.cab p{margin:0 0 10px;color:var(--mut);font-size:13px}
.medidas{background:#f3f7fb;border-radius:9px;padding:8px 10px;margin-bottom:10px;font-size:12.5px}.medidas b{display:block;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}.medidas:empty{display:none}.medidas small{display:block;color:var(--mut);font-size:11px;margin-top:2px}
.piezas{width:100%;border-collapse:collapse;font-size:12.5px}.piezas th{text-align:left;color:var(--mut);font-weight:600;border-bottom:1px solid var(--line);padding:5px 4px}
.piezas td{border-bottom:1px solid #eef1f4;padding:5px 4px}.piezas td:last-child,.piezas th:last-child{text-align:right}
.piezas tr:hover td,.piezas tr.on td{background:#e9f7ef;color:#11643a;cursor:default}
.nota{font-size:11.5px;color:var(--mut);margin:6px 0 12px}
.prim,.sec{width:100%;border-radius:10px;padding:11px;font-weight:600;margin-bottom:8px}
.prim{border:0;background:var(--navy);color:#fff}.prim:hover{background:var(--navy2)}
.sec{border:1.5px solid var(--navy);background:#fff;color:var(--navy)}.sec:hover{background:#f3f7fb}
.credito{font-size:11px;color:var(--mut);text-align:center;margin:10px 0 0}.credito a{color:var(--mut)}
.modal{position:fixed;inset:0;background:rgba(10,25,40,.45);display:grid;place-items:center;z-index:20;padding:16px}.modal[hidden]{display:none}
.caja{background:#fff;border-radius:14px;max-width:420px;width:100%;padding:22px 24px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:center}
.caja h2{margin:0 0 8px;font-size:18px}.caja p{color:#3c4854}.caja .x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:24px;color:var(--mut)}
.caja .qr{width:220px;height:220px;image-rendering:pixelated;display:block;margin:8px auto}.caja a{color:var(--navy);font-weight:600}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#14202b;color:#fff;border-radius:10px;padding:10px 16px;z-index:30;max-width:90vw;font-size:13px}.toast[hidden]{display:none}
@media (max-width:1000px){.app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 56vh auto}.lista,.visor,.ficha{min-width:0}.visor{overflow:hidden}.lista{border-right:0}.items{display:flex;overflow-x:auto;gap:6px}.it{min-width:220px;margin:0}
.lista{order:1}.visor{order:2}.ficha{order:3;border-left:0}.marca span{display:none}body{overflow:auto;height:auto}html{height:auto}.barra-visor{flex-wrap:wrap;justify-content:center;width:calc(100% - 24px)}.top .logo{height:24px}}