:root{--bg:#0f1226;--panel:#171a33;--card:#1e2142;--txt:#f2f3fa;--mut:#a7abd0;--acc:#6c7cff;--ok:#2ecc71;--warn:#f5b041;--radius:14px}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--txt)}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:var(--panel);border-bottom:1px solid #2a2e55;flex-wrap:wrap;gap:8px}
.tag{background:#2a2e55;color:var(--warn);border-radius:99px;padding:2px 10px;font-size:.78rem;margin-left:8px}
.brand-icon{height:30px;width:30px;vertical-align:-9px;border-radius:7px}
.tenant{color:var(--mut);font-size:.9rem}
.layout{display:flex;min-height:calc(100vh - 53px)}
nav{width:210px;background:var(--panel);padding:14px 10px;display:flex;flex-direction:column;gap:6px}
nav button{background:transparent;border:0;color:var(--txt);text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:.95rem}
nav button:hover,nav button.active{background:var(--card)}
.badge{background:var(--acc);border-radius:99px;padding:0 7px;font-size:.75rem}
main{flex:1;padding:22px;max-width:980px}
.view{display:none}.view.active{display:block}
h1{margin-top:0}h2{margin-top:26px}
.hint{color:var(--mut)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.card{background:var(--card);border-radius:var(--radius);padding:16px}
.card b{font-size:1.6rem;display:block}
.list{list-style:none;padding:0}.list li{background:var(--card);border-radius:10px;padding:12px 14px;margin-bottom:8px}
.list li.empty{color:var(--mut)}
.btn{background:var(--acc);color:#fff;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;text-decoration:none;display:inline-block;font-size:.95rem}
form{display:grid;gap:12px;max-width:520px}label{display:grid;gap:6px;color:var(--mut)}
input,textarea,select{background:var(--card);border:1px solid #2a2e55;color:var(--txt);border-radius:10px;padding:10px;font:inherit}
.ok{color:var(--ok)}
.conv{background:var(--card);border-radius:var(--radius);padding:14px;margin-bottom:12px}
.conv .meta{color:var(--mut);font-size:.85rem}
.chan{background:#2a2e55;border-radius:99px;padding:1px 9px;font-size:.75rem;text-transform:capitalize}
.msg{margin:8px 0;padding:8px 12px;border-radius:10px;max-width:85%}
.msg.in{background:#262a52}.msg.out{background:#233d2e;margin-left:auto}.msg small{display:block;color:var(--mut)}
.replyRow{display:flex;gap:8px;margin-top:10px}.replyRow input{flex:1}
.cmdRow{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}.cmdRow .btn{padding:7px 12px;font-size:.85rem;background:#2a2e55}
.cmdRow .btn.danger{background:#5a2430}.cmdRow .btn.danger:hover{background:#7a2e3e}
.code{background:#0b0d1d;padding:12px;border-radius:10px;overflow:auto}
/* Medios: rejilla de imágenes subidas y miniaturas */
.mediaGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;max-width:640px;margin-top:10px}
.mediaItem{background:var(--card);border:2px solid transparent;border-radius:10px;padding:6px;cursor:pointer;color:var(--mut);font-size:.75rem;font:inherit}
.mediaItem img{width:100%;height:80px;object-fit:cover;border-radius:7px;display:block}
.mediaItem.sel{border-color:var(--acc)}
.mediaItem span{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fileBtn{cursor:pointer}
.thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;vertical-align:middle;margin-right:8px}
.msgImg{max-width:220px;width:100%;border-radius:8px;display:block;margin-top:6px}
#postPreview img{max-width:180px;border-radius:10px;margin-top:4px}
/* Revisor visual: marco tipo teléfono con zonas seguras */
.revControls{display:flex;gap:14px;flex-wrap:wrap;max-width:640px}
.phoneFrame{position:relative;width:min(300px,82vw);aspect-ratio:9/16;margin:16px 0;background:#000;border-radius:26px;overflow:hidden;border:3px solid #2a2e55}
.phoneFrame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#revZones{position:absolute;inset:0;z-index:2}
.revZone{position:absolute;background:rgba(255,60,60,.38)}
.revSafe{position:absolute;border:2px dashed var(--ok);z-index:3;pointer-events:none}
.revIcons{position:absolute;right:3%;top:46%;display:flex;flex-direction:column;gap:12px;z-index:4}
.revIcons span{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px}
.revNote{color:var(--warn);max-width:520px}
.sug{background:#3a3416;border-radius:10px;padding:8px 12px;margin-top:8px}
/* Tendencias: aviso de ejemplo, tarjetas por anillo y etiquetas de seguridad */
.warnBox{background:#3a3416;border:1px solid #6b5c1e;color:var(--warn);border-radius:10px;padding:10px 14px;max-width:640px}
#view-tendencias label{max-width:320px}
.trendCard{background:var(--card);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;max-width:720px}
.trendHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.trendCard p{color:var(--mut);margin:8px 0}
.trendCard .meta{font-size:.8rem;color:var(--mut)}
.chip{background:#2a2e55;border-radius:99px;padding:1px 9px;font-size:.75rem}
.safetyOk{background:#1d4d2e;color:#8fe6ae;border-radius:99px;padding:1px 9px;font-size:.75rem}
.safetyNo{background:#5a2430;color:#ff9aa8;border-radius:99px;padding:1px 9px;font-size:.75rem}
/* Pedidos: tablero por columnas de estado */
.orderBoard{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;align-items:start}
.orderCol h3{margin:4px 0 10px;font-size:.95rem}
.orderCard{background:var(--card);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px}
.orderItems{list-style:none;padding:0;margin:8px 0;color:var(--mut);font-size:.9rem}
.orderTotal{font-weight:700;margin-bottom:4px}
.orderCard .cmdRow .btn{background:#2a2e55;padding:7px 12px;font-size:.85rem}
.orderCard .cmdRow .btn.danger{background:#5a2430}
/* Ayuda: guías con snapshot por vista */
#view-ayuda label{max-width:420px}
.helpCard{background:var(--card);border-radius:var(--radius);padding:16px 18px;margin:14px 0;max-width:760px}
.helpCard h2{margin:0 0 6px;font-size:1.15rem}
.helpWhat{margin:0 0 8px}
.helpSteps{margin:0 0 12px;padding-left:20px;color:var(--mut)}
.helpSteps li{margin-bottom:4px}
.helpShot{width:100%;display:block;border-radius:10px;border:1px solid #2a2e55}
.helpCard .meta{color:var(--mut);font-size:.8rem;margin:8px 0 0}
@media(max-width:720px){.layout{flex-direction:column}nav{width:auto;flex-direction:row;flex-wrap:wrap}}