/* GringoBox customer portal, layer v9: special states, package photos, calculator, service pages. Colours follow board L12 "Estados Especiales". */
.s9-rowchips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.s9-chip{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:12.5px;padding:4px 10px;border-radius:999px;line-height:1.2}
.s9-chip svg{width:14px;height:14px;flex:none}
.s9-chip.bad{background:#FDE3E3;color:#B4231F}.s9-chip.warn{background:#FFF0C2;color:#8A5A00}.s9-chip.info{background:#DCEBFF;color:#0E4BB5}
.s9-chip.wait{background:#E6EAF1;color:#3B4A63}.s9-chip.pic{background:#E3F6EA;color:#17713C}
.s9-states{display:grid;gap:10px;margin:0 0 14px}
.s9-state{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:16px;border:1.5px solid transparent}
.s9-state .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff}
.s9-state .ic svg{width:24px;height:24px}
.s9-state .tx{flex:1 1 200px;min-width:0}
.s9-state .tx b{display:block;font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-weight:800;font-size:18px;line-height:1.2}
.s9-state .tx span{display:block;font-weight:600;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.s9-state .tx .nt{margin-top:4px;font-weight:800}
.s9-state.bad{background:#FDE7E7;border-color:#F3B1AE;color:#7A1512}.s9-state.bad .ic{background:#E0362F}
.s9-state.warn{background:#FFF3CC;border-color:#F2D277;color:#6B4700}.s9-state.warn .ic{background:#F2A900}
.s9-state.info{background:#E2EEFF;border-color:#A9C8F7;color:#0B3A8C}.s9-state.info .ic{background:#1E6BE0}
.s9-state.wait{background:#E9EDF3;border-color:#C5CEDB;color:#2F3D55}.s9-state.wait .ic{background:#5B6B86}
.s9-photos h2{display:flex;align-items:center;gap:8px}.s9-photos h2 svg{width:20px;height:20px}
.s9-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.s9-grid button{position:relative;padding:0;border:0;border-radius:12px;overflow:hidden;aspect-ratio:1;background:#EAF1F8;cursor:pointer}
.s9-grid img{width:100%;height:100%;object-fit:cover;display:block}
.s9-grid span{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,rgba(9,25,60,.75));color:#fff;font-size:11.5px;font-weight:800;padding:12px 6px 5px;text-align:left}
.s9-view{position:fixed;inset:0;z-index:120;background:rgba(6,16,40,.92);display:grid;grid-template-rows:1fr auto;place-items:center;padding:14px}
.s9-view img{max-width:100%;max-height:calc(100vh - 110px);border-radius:12px;background:#122}
.s9-view .x{position:absolute;top:10px;right:12px;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:#0E2F78;font-size:28px;font-weight:800;line-height:1;cursor:pointer}
.s9-view .bar{display:flex;align-items:center;gap:14px;color:#fff;font-weight:800;padding-top:10px}
.s9-view .bar button{width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:#0E2F78;font-size:20px;font-weight:800;cursor:pointer}
/* calculator */
.s9-calc{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:800px){.s9-calc{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.s9-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#E6EEF8;border-radius:12px;padding:4px}
.s9-seg button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border:0;border-radius:9px;background:transparent;font:inherit;font-weight:800;color:#33456B;cursor:pointer}
.s9-seg button svg{width:20px;height:20px}.s9-seg button.on{background:#1257D6;color:#fff;box-shadow:0 2px 6px rgba(18,87,214,.35)}
.s9-dims{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:center}
.s9-dims span{font-weight:800;color:#6B7A99}.s9-dims input{min-width:0;width:100%}
.s9-result{text-align:center}.s9-result img{max-width:240px;width:70%;height:auto;border-radius:12px}
.s9-result .lbl{font-weight:800;color:#33456B;font-size:14px}
.s9-result .big{font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-weight:800;font-size:44px;line-height:1.1;color:#0E2F78}
.s9-result .big small,.s9-result .crc small{font-size:.45em;font-weight:800}
.s9-result .crc{font-weight:800;font-size:20px;color:#1257D6;margin-bottom:10px}
.s9-result .gb-kv{text-align:left}
.s9-fine{font-size:12.5px;color:#55648A;margin:12px 0 0;line-height:1.35}
/* help / service */
.s9-svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
@media(min-width:800px){.s9-svc{grid-template-columns:repeat(4,minmax(0,1fr))}}
.s9-svc a{display:block;text-decoration:none;color:inherit;text-align:center;padding:14px 10px}
.s9-svc .ic{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#1E6BE0,#0E2F78);color:#fff;display:grid;place-items:center;margin:0 auto 8px}
.s9-svc .ic svg{width:26px;height:26px}
.s9-svc b{display:block;font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-weight:800;font-size:16px;color:#0E2F78;line-height:1.2;overflow-wrap:anywhere}
.s9-svc span{display:block;font-size:12.5px;font-weight:600;color:#55648A;margin-top:2px}
.s9-support,.s9-deliv{margin:16px 0}
.s9-support ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.s9-support li{display:flex;align-items:center;gap:8px;font-weight:700}
.s9-support li svg{width:22px;height:22px;flex:none;color:#fff;background:#22A45A;border-radius:50%;padding:4px}
.s9-opt{display:flex;gap:12px;padding:12px 0;border-top:1px solid #DCE6F2}.s9-opt:first-child{border-top:0;padding-top:0}
.s9-opt .ic{flex:none;width:44px;height:44px;border-radius:12px;background:#0E2F78;color:#fff;display:grid;place-items:center}.s9-opt .ic svg{width:24px;height:24px}
.s9-opt > div:last-child{flex:1;min-width:0}
.s9-opt b{display:block;font-weight:800;color:#0E2F78}.s9-opt span{font-size:14px;color:#33456B;font-weight:600}
.s9-opt ul{list-style:none;margin:4px 0 0;padding:0}.s9-opt li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;flex-wrap:wrap}
.s9-opt li span:last-child{font-weight:800;color:#0E2F78}
.s9-how{margin-bottom:16px}
.s9-how ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:800px){.s9-how ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
.s9-how li{display:flex;gap:10px;align-items:flex-start}
.s9-how i{flex:none;width:34px;height:34px;border-radius:50%;background:#F26A1B;color:#fff;font-style:normal;font-weight:800;display:grid;place-items:center}
.s9-how b{display:block;font-weight:800;color:#0E2F78;line-height:1.2}.s9-how span{font-size:13.5px;color:#33456B;font-weight:600}
.gb-btn.orange{background:linear-gradient(180deg,#FF8A2B,#F26A1B);color:#fff;border-color:transparent;box-shadow:0 3px 0 #C9520F}.gb-btn.orange:disabled{opacity:.6}
/* login: canonical header artwork (board #04) shown at or below its real size, never stretched */
/* Build 099: original warehouse artwork fills the whole login/registration art panel (was a 150/213px strip above empty blue) */
.gb-art-stick{display:contents}
.gb-login-art{display:block;aspect-ratio:16/9;min-height:0;background:#0E5FB8}
.gb-login-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% center;display:block}
.gb-login-art .gb-login-hello{position:absolute;left:10px;bottom:10px;padding:7px 12px}
@media(min-width:900px){.gb-login{overflow:clip}.gb-login-art{overflow:clip;aspect-ratio:auto;min-height:520px;background:linear-gradient(180deg,#9a9da4,#6b6f79)}.gb-art-stick{display:block;position:sticky;top:64px;height:min(100%,calc(100vh - 80px));min-height:520px}.gb-art-stick img{position:absolute;inset:0;width:100%;height:100%;object-position:30% center}.gb-art-stick .gb-login-hello{position:absolute;left:18px;bottom:18px;margin:0;padding:8px 14px}}

/* payments: freight vs Tienda labels */
.s9-kind{display:inline-block;font-family:'Nunito',system-ui,sans-serif;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;vertical-align:middle;letter-spacing:.3px;text-transform:uppercase}
.s9-kind.f{background:#DCEBFF;color:#0E4BB5}.s9-kind.t{background:#EFE3FF;color:#5B2BB5}
.s9-tpay{border-top:4px solid #7B4BD6}