/* modulos/54-panel.css — los estilos de la tanda del 8/10 en 54 (Tu espacio, Mandar coins, la hoja de
   Configuración del sitio, el tráfico, las filas deslizables y el CMO flotante). Archivo estático que sale con
   el deploy: hal54-app.html tiene un tope de 800.000 caracteres (tests/54-portada-injertada.test.mjs). */
/* Tu espacio (8/10): sin marco, una superficie y la barra con el color del estado. */
.spc{background:rgba(255,255,255,.035);border-radius:16px;padding:16px 18px}
.spc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.spc-h{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8b8b93}
.spc-plan{font-size:.75rem;color:#a1a1aa;background:rgba(255,255,255,.06);border-radius:999px;padding:3px 10px;white-space:nowrap}
.spc-plan.pro{color:#e9cf86;background:rgba(202,166,74,.14)}
.spc-num{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.spc-big{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:#f2f2f2}
.spc-de{font-size:.8125rem;color:#77777f;flex:1;min-width:0}
.spc-pct{font-size:.8125rem;font-weight:600;color:#86d39a}.spc-pct.ojo{color:#e9c46a}.spc-pct.mal{color:#ff8a8a}
.spc-barra{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.spc-barra span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#4ade80,#22c55e);transition:width .4s}
.spc-barra span.ojo{background:linear-gradient(90deg,#fcd34d,#f59e0b)}.spc-barra span.mal{background:linear-gradient(90deg,#fca5a5,#ef4444)}
.spc-tg{margin-top:12px;background:none;border:0;color:#b8b8c0;font:500 .8125rem inherit;cursor:pointer;padding:6px 0;min-height:32px}
.spc-tg:hover{color:#fff}
.spc-lista{flex-direction:column;gap:10px;margin-top:4px}
.spc-fn{display:flex;align-items:center;gap:10px;font-size:.8125rem;color:#d6d6da}
.spc-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spc-lapiz{color:#6b6b73}
.spc-mb{color:#77777f;flex-shrink:0;font-variant-numeric:tabular-nums}
.spc-tag{flex-shrink:0;white-space:nowrap;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#77777f;background:rgba(255,255,255,.05);border-radius:999px;padding:2px 8px}
.spc-tag.pro{color:#e9cf86;background:rgba(202,166,74,.14)}
.spc-up{flex-shrink:0;white-space:nowrap;border:0;cursor:pointer;font:600 .75rem inherit;letter-spacing:.05em;text-transform:uppercase;color:#1a1408;background:#e2c068;border-radius:999px;padding:4px 10px}
.spc-up:hover{background:#f0d07a}
.spc-mini{height:3px;border-radius:99px;background:rgba(255,255,255,.04);margin-top:5px;overflow:hidden}
.spc-mini span{display:block;height:100%;background:rgba(255,255,255,.22);border-radius:99px}
.spc-nota{margin:12px 0 0;font-size:.75rem;line-height:1.55;color:#77777f}
/* Tu saldo y Mandar coins (8/10): sin marcos, el saldo grande y el formulario que se despliega en el lugar. */
.bcm-saldo .dom-h{margin-bottom:.3rem;color:#8b8b93;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.bcm-top{display:flex;align-items:baseline;gap:.6rem;margin-bottom:1.1rem}
.bcm-bal{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:#f2f2f2}
.bcm-usd{font-size:.8125rem;color:#77777f}
.bcm-env{background:rgba(255,255,255,.04);border-radius:14px;padding:0;overflow:hidden}
.bcm-envb{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;color:#ececec;font:inherit;text-align:left;padding:14px 16px;cursor:pointer;min-height:56px}
.bcm-envb:hover{background:rgba(255,255,255,.04)}
.bcm-envb span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bcm-envb b{font-size:.9375rem;font-weight:600}
.bcm-envb small{font-size:.75rem;color:#8a877f;line-height:1.35}
.bcm-envb i{font-style:normal;font-size:1.125rem;color:#6b6b73}
.sc-inline{padding:14px 16px 16px;animation:scAbre .18s ease-out}
@keyframes scAbre{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sc-inline{animation:none}}
.sc-tit{font-size:.9375rem;font-weight:600;color:#ececec;margin-bottom:.2rem}
.sc-bal{font-size:.8125rem;color:#8a877f;margin-bottom:.4rem}
.sc-l{display:block;font-size:.75rem;font-weight:600;color:#c9c5bc;margin:.7rem 0 .3rem}
.sc-i{display:block;width:100%;box-sizing:border-box;background:#0c0c0e;border:0;border-radius:10px;color:#f2f2f2;font:inherit;font-size:.9375rem;padding:.65rem .75rem;outline:none;min-height:44px}
.sc-i:focus{box-shadow:0 0 0 2px rgba(124,92,255,.55)}
.sc-dos{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px}
.sc-cant{display:flex;align-items:center;background:#0c0c0e;border-radius:10px;padding-left:.7rem}
.sc-cant span{color:#8a877f}.sc-cant .sc-i{background:transparent;padding-left:.4rem}
.sc-cant:focus-within{box-shadow:0 0 0 2px rgba(124,92,255,.55)}.sc-cant .sc-i:focus{box-shadow:none}
.sc-msg{font-size:.75rem;color:#ff8a8a;margin:.6rem 0 .2rem;min-height:1em}
.sc-acc{display:flex;gap:8px;margin-top:.5rem}
.sc-b1,.sc-b2{flex:1;min-height:44px;font-size:.8125rem;font-weight:600}
.sc-b1{flex:1.4}
.sc-conf{font-size:.9375rem;font-weight:600;color:#f2f2f2;margin-bottom:.3rem}
.sc-nota{font-size:.8125rem;color:#a1a1aa;margin-bottom:.3rem}
.sc-ok{width:40px;height:40px;border-radius:50%;background:rgba(52,211,153,.15);color:#34d399;display:flex;align-items:center;justify-content:center;font-size:1.125rem;margin-bottom:.6rem}
@media (max-width:420px){.sc-dos{grid-template-columns:1fr}}
/* Configuración del sitio (8/10): una hoja, no la primera pantalla del panel. */
.gs-abrir{width:40px;height:40px;padding:0!important}
.gs-fondo{position:fixed;inset:0;z-index:9200;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s}
.gs-fondo.on{opacity:1;pointer-events:auto}
.gs{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:#121214;box-shadow:-20px 0 60px rgba(0,0,0,.5);display:flex;flex-direction:column;transform:translateX(24px);transition:transform .22s ease}
.gs-fondo.on .gs{transform:none}
.gs-cab{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.gs-cab h2{margin:0;font-size:1.125rem;font-weight:700;color:#f2f2f2}
.gs-x{width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#bbb;cursor:pointer;font-size:.9375rem}
.gs-cuerpo{flex:1;overflow-y:auto;padding:16px 20px 28px;-webkit-overflow-scrolling:touch}
.gs-cuerpo .grow-panel{background:transparent;padding:0;margin:0 0 18px;box-shadow:none;border:0}
.gs-cuerpo .grow-panel .grow-h2{display:none}
.gs-cuerpo .grow-name{width:100%;box-sizing:border-box;background:#0c0c0e;border:0;border-radius:10px;padding:10px 12px;font-size:1.125rem;font-weight:700;color:#f2f2f2}
.gs-cuerpo .grow-name:focus,.gs-cuerpo .grow-desc:focus{outline:none;box-shadow:0 0 0 2px rgba(124,92,255,.55)}
.gs-cuerpo .grow-handle{margin:.55rem 0 .2rem}
.gs-cuerpo .grow-desc{border:0!important;background:#0c0c0e;border-radius:10px}
.gs-cuerpo .btn{justify-content:flex-start!important;gap:.7rem;min-height:46px;font-size:.8125rem;color:#e5e5e5;background:rgba(255,255,255,.04);border-radius:12px;padding:0 14px;position:relative}
.gs-cuerpo .btn:hover{background:rgba(255,255,255,.08)}
.gs-cuerpo .btn:not(.danger)::after{content:"\203A";margin-left:auto;color:#6b6b73;font-size:1.125rem}
.gs-cuerpo .btn.danger{color:#ff8a8a;background:rgba(255,90,90,.08);justify-content:center!important}
@media (max-width:600px){.gs{top:auto;left:0;width:100%;max-height:88vh;border-radius:20px 20px 0 0;transform:translateY(30px)}.gs-fondo.on .gs{transform:none}}
@media (prefers-reduced-motion:reduce){.gs,.gs-fondo{transition:none}}
/* Tráfico (8/10): top 3 con su parte del total, y el resto a un toque. */
.gt{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:4px}
.gt-f{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);overflow:hidden;font-size:.8125rem}
.gt-b{position:absolute;left:0;top:0;bottom:0;background:rgba(111,174,95,.14);border-radius:10px}
.gt-f.robot .gt-b{background:rgba(255,255,255,.05)}
.gt-k{position:relative;display:flex;align-items:center;gap:8px;min-width:0;color:#e5e5e5}
.gt-i{flex-shrink:0;width:1.2em;text-align:center}
.gt-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gt-f.robot .gt-t{color:#8a877f}
.gt-r{flex-shrink:0;font-style:normal;font-size:.75rem;color:#8a877f;background:rgba(255,255,255,.06);border-radius:999px;padding:1px 7px}
.gt-n{position:relative;flex-shrink:0;display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.gt-n b{color:#f2f2f2;font-weight:600}.gt-n small{color:#8a877f;font-size:.75rem;min-width:2.6em;text-align:right}
.gt-mas{margin-top:4px}
.gt[hidden]{display:none}
.gt-ver{margin-top:6px;border:0;background:transparent;color:#b98cff;font:500 .8125rem inherit;cursor:pointer;padding:8px 2px;min-height:36px}
/* Studio (8/10): plantillas y opciones en filas deslizables. */
.st-slide{display:flex!important;flex-wrap:nowrap!important;gap:.5rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;margin-left:-2px;padding:2px 28px 6px 2px;mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.st-slide::-webkit-scrollbar{display:none}
.st-slide>*{flex-shrink:0;scroll-snap-align:start}
.st-slide .st-check{white-space:nowrap}
/* El CMO flotante (8/10): abajo a la derecha, como un chat; coordina a los agentes. */
.cmo-flot{position:fixed;right:20px;bottom:20px;z-index:8000;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.cmo-flot>*{pointer-events:auto}
.cmo-fab{position:relative;display:flex;align-items:center;gap:8px;height:52px;padding:0 18px 0 14px;border:0;border-radius:999px;background:linear-gradient(135deg,#7c5cff,#5b3fd6);color:#fff;font:600 .9375rem inherit;cursor:pointer;box-shadow:0 12px 30px rgba(91,63,214,.45)}
.cmo-fab:hover{filter:brightness(1.08)}
.cmo-fab-ic{display:flex}
.cmo-fab-dot{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:#34d399;color:#06281c;font:700 .75rem/20px inherit;font-style:normal;text-align:center}
.cmo-flot.abierto .cmo-fab{background:#1d1d22;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.cmo-f-hoja{width:min(380px,calc(100vw - 32px));max-height:min(600px,calc(100vh - 120px));display:flex;flex-direction:column;border-radius:20px;background:#141416;box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden}
.cmo-f-hoja[hidden]{display:none}
.cmo-f-panel{text-align:left!important;background:transparent!important;padding:0!important;display:flex;flex-direction:column;min-height:0;flex:1}
.cmo-f-cab{display:flex;align-items:center;gap:10px;padding:14px 16px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.cmo-f-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c5cff,#5b3fd6);color:#fff;flex-shrink:0}
.cmo-f-q{flex:1;min-width:0;display:flex;flex-direction:column}
.cmo-f-q b{font-size:.9375rem;color:#f2f2f2}.cmo-f-q small{font-size:.75rem;color:#8a877f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmo-f-x{width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:#bbb;cursor:pointer}
.cmo-f-panel .cmo-chat-msgs{flex:1;max-height:none;min-height:160px;margin:0;padding:14px 16px}
.cmo-acc{padding:4px 16px 10px!important;margin:0!important;scroll-padding-inline:16px}
.cmo-acc button{border:0;border-radius:999px;background:rgba(124,92,255,.14);color:#d7c9ff;font:500 .8125rem inherit;padding:8px 12px;cursor:pointer;min-height:36px;white-space:nowrap}
.cmo-acc button:hover{background:rgba(124,92,255,.24)}
#cmo-msgs .cmo-espera{opacity:.7}
.cmo-f-panel .cmo-chat-row{padding:0 16px!important;margin:0!important;display:flex;gap:8px;align-items:stretch}
.cmo-f-panel .cmo-inp{min-height:44px;border-radius:12px;font-size:.9375rem}
.cmo-f-panel .cmo-send{border-radius:12px;min-width:72px;background:#7c5cff;color:#fff;font-weight:600}
.cmo-f-panel .cmo-msg-note{padding:0 16px}
.cmo-f-panel .cmo-hire,.cmo-f-panel #cmo-cancel-btn{margin:8px 16px 16px!important;width:auto!important}
.cmo-f-panel .cmo-active-badge,.cmo-f-panel>div:last-child{margin-left:16px;margin-right:16px}
@media (max-width:560px){.cmo-flot{right:16px;bottom:16px}.cmo-flot.abierto{left:0;right:0;bottom:0;align-items:stretch}.cmo-flot.abierto .cmo-fab{display:none}.cmo-f-hoja{width:100%;max-height:85vh;border-radius:20px 20px 0 0}}
.ag-quietos{margin-top:10px}
.ag-q-t{font-size:.75rem;color:#8a877f;margin-bottom:6px}
.ag-q{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap;background:rgba(255,255,255,.04);color:#b8b4aa;border-radius:999px;padding:6px 10px;font-size:.8125rem}