/* MENU 360 · estilos compartidos (tema claro) */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface2:#f3f3f6; --line:#ebebef;
  --fg:#1c1c21; --muted:#6c6c75; --faint:#a0a0a8;
  --acc:#ff6a1a; --ink:#ffffff; --ok:#14a44d; --warn:#c27400; --bad:#e23d3d;
  --sh:0 1px 3px rgba(20,20,30,.06),0 1px 2px rgba(20,20,30,.04); --sh2:0 6px 22px rgba(20,20,30,.09);
  --display:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --body:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font-family:var(--body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea,select{font:inherit;color:var(--fg)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.field span{font-size:12.5px;font-weight:800;color:var(--muted)}
.field input,.field textarea,.field select{background:var(--surface2);border:1.5px solid transparent;border-radius:12px;padding:11px 12px;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--acc);outline:none}
.field textarea{min-height:80px;resize:vertical}
.field small{color:var(--faint);font-size:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:11px 16px;font-weight:800;background:var(--surface);border:1.5px solid var(--line);color:var(--fg)}
.btn:hover{border-color:#d6d6dd}
.btn.pri{background:var(--acc);color:var(--ink);border-color:var(--acc)}
.btn.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn.danger{color:var(--bad);border-color:#f3c9c9}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:200;background:#1c1c21;color:#fff;font-weight:800;padding:12px 18px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.25);max-width:calc(100% - 32px);text-align:center}
.scrim{position:fixed;inset:0;background:rgba(20,20,30,.45);z-index:150;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:560px;max-height:92vh;overflow:auto;background:var(--surface);border-radius:24px 24px 0 0;padding:10px max(18px,env(safe-area-inset-left,0px)) calc(18px + env(safe-area-inset-bottom,0px));animation:up .26s cubic-bezier(.2,.8,.2,1)}
@media (min-width:700px){.scrim{align-items:center}.sheet{border-radius:24px}}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.grab{width:44px;height:5px;border-radius:5px;background:#dcdce2;margin:4px auto 12px;position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a.btn{color:inherit;text-decoration:none}
.m360ring{display:block}
.m360ring .tr{stroke:var(--surface2)}
.m360ring .ar{stroke:var(--acc);transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}
.m360ring .hd2{fill:var(--acc)}
.m360ring.done .ar{stroke:var(--ok)}.m360ring.done .hd2{fill:var(--ok)}
.m360spin{animation:m360spin 1.1s linear infinite}
@keyframes m360spin{to{transform:rotate(360deg)}}