/* Molde · Brand panel (molde/brand-panel.js): the "Previsualizá tu marca" inspector + its summary sheet.
   Hub chrome, not store UI: it reads the host's chrome tokens (--paper, --ink, --line, --violet…). */

/* ---------- inspector ---------- */
.insp{display:flex; flex-direction:column; background:var(--surface); border-right:1px solid var(--line); font-size:12.5px; color:var(--ink)}
.insp-head{padding:14px 14px 12px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:3px}
.insp-head .mono{font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--violet)}
.insp-head b{font:600 15px/1.2 var(--f-display, "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif); letter-spacing:-.015em}
.insp-body{flex:1; overflow:auto}
.insp details{border-bottom:1px solid var(--line)}
.insp summary{list-style:none; cursor:pointer; padding:10px 14px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); display:flex; justify-content:space-between; align-items:center}
.insp summary::-webkit-details-marker{display:none}
.insp summary::after{content:""; width:7px; height:7px; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--ease)}
.insp details:not([open]) summary::after{transform:rotate(-45deg)}
.insp summary:hover{color:var(--ink)}
.insp .sec{padding:0 14px 12px; display:flex; flex-direction:column; gap:8px}
.insp .r{display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:8px}
.insp .r > label, .insp .lb{color:var(--ink-2); font-size:12px}
.insp .in{width:100%; height:30px; min-height:30px; border:1px solid var(--line); border-radius:7px; padding:0 8px; font:12.5px var(--f-ui); background:var(--paper); color:var(--ink)}
.insp .in:focus{background:var(--surface); border-color:var(--violet); outline:none}
.insp .hint{font-size:11.5px; color:var(--ink-3)}
.insp .presets{display:flex; gap:4px; flex-wrap:wrap}
.insp .preset{display:flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); border-radius:99px; padding:3px 9px; cursor:pointer; font-size:12px; min-height:28px; color:var(--ink)}
.insp .preset[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.insp .preset .dot{width:8px; height:8px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); flex:none}
.insp .pen{width:13px; height:13px; flex:none}
.insp .color{display:flex; align-items:center; gap:6px; height:30px; border:1px solid var(--line); border-radius:7px; padding:0 6px; background:var(--paper)}
.insp .color input[type=color]{width:20px; height:20px; border:0; padding:0; background:none; border-radius:5px; flex:none; cursor:pointer}
.insp .color input[type=text]{flex:1; min-width:0; border:0; background:transparent; font:12px var(--f-mono); color:var(--ink); outline:none}
.insp .fontrow{display:flex; gap:4px}
.insp .fontrow select{flex:1}
.insp .iconbtn{border:1px solid var(--line); background:var(--surface); width:30px; min-height:30px; height:30px; border-radius:7px; flex:none; cursor:pointer; display:grid; place-items:center; color:var(--ink)}
.insp .iconbtn:hover{border-color:var(--ink)}
.insp .upload{display:flex; align-items:center; gap:8px; border:1.5px dashed var(--line-2); border-radius:8px; padding:7px 10px; cursor:pointer; background:var(--paper); font-size:12.5px}
.insp .upload:hover{border-color:var(--ink)}
.insp .seg{width:100%}
.insp .seg button{flex:1; justify-content:center; padding:4px 8px; font-size:12px; min-height:26px}
.insp .range{display:flex; align-items:center; gap:8px}
.insp .range input{flex:1; min-width:0}
.insp .range span{font-family:var(--f-mono); font-size:11px; color:var(--ink-2); white-space:nowrap}
.insp-foot{border-top:1px solid var(--line); padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:6px; background:var(--surface)}

/* shared bits used inside the panel and the sheet */
.insp .ck, .bp-scrim .ck{font-family:var(--f-mono); font-size:10px; padding:2px 5px; border-radius:5px; white-space:nowrap}
.insp .ck.ok, .bp-scrim .ck.ok{background:#E4F6E9; color:#15693A}
.insp .ck.bad, .bp-scrim .ck.bad{background:#FDECEA; color:#A1281F}
.insp .btn, .bp-scrim .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:99px; font-weight:600; border:1px solid transparent; cursor:pointer; transition:transform .12s var(--ease), background .2s, border-color .2s}
.insp .btn:active, .bp-scrim .btn:active{transform:scale(.97)}
.insp .btn-ink, .bp-scrim .btn-ink{background:var(--ink); color:#fff}
.insp .btn-ink:hover, .bp-scrim .btn-ink:hover{background:#26262f}
.bp-scrim .btn-line{background:var(--surface); border-color:var(--line-2); color:var(--ink)}
.bp-scrim .btn-line:hover{border-color:var(--ink)}
.insp-foot .btn{min-height:32px; padding:6px 12px; font-size:12.5px}

/* ---------- summary sheet ---------- */
.bp-scrim{position:fixed; inset:0; background:rgba(11,11,16,.42); z-index:120; display:flex; justify-content:center; align-items:flex-start; padding:12vh 16px 16px; opacity:0; transition:opacity .2s var(--ease); color:var(--ink); font:15px/1.5 var(--f-ui)}
.bp-scrim.open{opacity:1}
.bp-sheet{width:min(560px,100%); background:var(--surface); border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.25); overflow:hidden; display:flex; flex-direction:column; max-height:80vh; transform:scale(.97) translateY(-6px); transition:transform .25s var(--ease)}
.bp-scrim.open .bp-sheet{transform:none}
.bp-sheet .iconbtn{border:1px solid var(--line); background:var(--surface); border-radius:10px; width:38px; height:38px; cursor:pointer; display:grid; place-items:center; color:var(--ink)}
.bp-sheet .iconbtn:hover{border-color:var(--ink)}
.bp-sheet .sheet-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px 12px}
.bp-sheet .sum-id{display:flex; flex-direction:column; gap:6px}
.bp-sheet .sum-id .wm{font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1}
.bp-sheet .sum-id .sub{display:flex; gap:6px; flex-wrap:wrap}
.bp-sheet .chip{display:inline-flex; align-items:center; gap:6px; border-radius:99px; padding:3px 9px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); white-space:nowrap}
.bp-sheet .tabs{display:flex; gap:4px; padding:0 20px; border-bottom:1px solid var(--line)}
.bp-sheet .tabs button{border:0; background:none; padding:9px 4px; margin-right:12px; cursor:pointer; font-weight:500; color:var(--ink-3); border-bottom:2px solid transparent; font-size:13.5px}
.bp-sheet .tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--ink)}
.bp-sheet .sheet-body{padding:16px 20px; overflow:auto; display:flex; flex-direction:column; gap:16px}
.bp-sheet .mono{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase}
.bp-sheet .sum-row{display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:start}
.bp-sheet .sum-row > .mono{color:var(--ink-3); font-size:10.5px; padding-top:4px}
.bp-sheet .sw2{display:flex; gap:10px; flex-wrap:wrap}
.bp-sheet .sw2 div{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:8px 10px; min-width:180px}
.bp-sheet .sw2 i{width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font-style:normal; font-weight:700; font-size:13px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.bp-sheet .sw2 b{font-family:var(--f-mono); font-size:12px; font-weight:400; display:block}
.bp-sheet .sw2 small{color:var(--ink-3); font-size:11.5px}
.bp-sheet .typo div{line-height:1.25}
.bp-sheet .typo .t1{font-size:24px; font-weight:600}
.bp-sheet .typo .t2{font-size:14px; color:var(--ink-2)}
.bp-sheet .typo small{display:block; font-family:var(--f-mono); font-size:11px; color:var(--ink-3); margin-top:2px}
.bp-sheet .radii{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.bp-sheet .radii span{font-size:12px; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--ink-2); color:var(--ink-2)}
.bp-sheet .bp-note{margin:0; color:var(--ink-2); font-size:13.5px}
.bp-sheet .code{background:#16161C; color:#E9E6DD; border-radius:12px; padding:14px 16px; font:12px/1.6 var(--f-mono); white-space:pre; overflow-x:auto}
.bp-sheet .sheet-foot{display:flex; gap:8px; justify-content:flex-end; padding:12px 20px 16px; border-top:1px solid var(--line)}
.bp-sheet .sheet-foot .btn{min-height:38px; padding:8px 14px; font-size:13.5px}
@media (max-width:560px){ .bp-sheet .sum-row{grid-template-columns:1fr} }

/* ---------- toast (when the host has none) ---------- */
.bp-toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); opacity:0; background:var(--ink); color:#fff; padding:10px 16px; border-radius:99px; font:500 14px/1.3 var(--f-ui); transition:all .25s var(--ease); z-index:130; pointer-events:none}
.bp-toast.show{opacity:1; transform:translate(-50%,0)}