/* ═══════════════════════════════════════════════════════════════════════
   Emperador · Capa SISTEMAS — Mediana Empresa (USD $6.000 · demo)
   Panel de gestión multi-sucursal: sedes, stock, producción, RRHH, BI.
   Datos demostrativos, etiquetados como tales.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --sm-accent: var(--gold, var(--accent, var(--ev, var(--lime, var(--blue, var(--copper, var(--amber, var(--champ, var(--clay, var(--neon, var(--wine, var(--terra, var(--brick, #c9a86b)))))))))))));
  --sm-ink: var(--bg, var(--ink, #0c0e16));
  --sm-text: var(--text, var(--cream, #f4ecde));
  --sm-mute: var(--mute, var(--muted, rgba(244,236,222,.6)));
  --sm-border: rgba(255,255,255,.12);
  --sm-panel: rgba(12,14,22,.94);
}

/* Lanzador flotante */
.sm-launch{position:fixed;right:1.1rem;bottom:9.2rem;z-index:9040;display:flex;align-items:center;gap:.5rem;
  padding:.7rem 1.05rem;border-radius:999px;border:1px solid var(--sm-accent);background:var(--sm-panel);
  color:var(--sm-text);font:600 .82rem/1 inherit;cursor:pointer;backdrop-filter:blur(10px);
  box-shadow:0 14px 40px -12px rgba(0,0,0,.6);transition:transform .18s}
.sm-launch:hover{transform:translateY(-2px)}
.sm-launch b{color:var(--sm-accent)}

/* Panel */
.sm-panel{position:fixed;inset:auto 0 0 0;z-index:9050;max-height:88vh;overflow:auto;
  background:var(--sm-panel);border-top:1px solid var(--sm-border);backdrop-filter:blur(16px);
  transform:translateY(101%);transition:transform .32s cubic-bezier(.16,1,.3,1)}
.sm-panel.on{transform:translateY(0)}
.sm-wrap{max-width:1240px;margin:0 auto;padding:1.4rem 1.3rem 2.4rem}
.sm-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.sm-title{font:700 1.05rem/1.2 inherit;color:var(--sm-text)}
.sm-title span{color:var(--sm-accent)}
.sm-close{background:none;border:1px solid var(--sm-border);color:var(--sm-mute);border-radius:8px;
  width:32px;height:32px;font-size:1.1rem;cursor:pointer;line-height:1}
.sm-demo-flag{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sm-mute);
  border:1px dashed var(--sm-border);border-radius:999px;padding:.25rem .6rem}

/* Selector de sucursal */
.sm-sedes{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.3rem}
.sm-sede{padding:.45rem .9rem;border-radius:999px;border:1px solid var(--sm-border);background:transparent;
  color:var(--sm-mute);font:600 .78rem/1 inherit;cursor:pointer;transition:all .15s}
.sm-sede:hover{color:var(--sm-text)}
.sm-sede.on{border-color:var(--sm-accent);color:var(--sm-accent);background:rgba(255,255,255,.04)}

/* Grid de módulos */
.sm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:.9rem}
.sm-mod{border:1px solid var(--sm-border);border-radius:13px;padding:1rem 1.05rem;background:rgba(255,255,255,.02)}
.sm-mod h4{font:700 .84rem/1.2 inherit;color:var(--sm-accent);margin-bottom:.75rem;
  letter-spacing:.04em;text-transform:uppercase}
.sm-kpi{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.5rem}
.sm-kpi b{font:700 1.5rem/1 inherit;color:var(--sm-text)}
.sm-kpi span{font-size:.74rem;color:var(--sm-mute)}
.sm-row{display:flex;justify-content:space-between;gap:.7rem;padding:.4rem 0;
  border-top:1px solid rgba(255,255,255,.06);font-size:.8rem;color:var(--sm-mute)}
.sm-row:first-of-type{border-top:0}
.sm-row b{color:var(--sm-text);font-weight:600}
.sm-warn{color:#ffb454}
.sm-ok{color:#3fcf8e}

/* Barras de BI */
.sm-bars{display:flex;align-items:flex-end;gap:.3rem;height:64px;margin-top:.6rem}
.sm-bar{flex:1;background:linear-gradient(180deg,var(--sm-accent),transparent);border-radius:3px 3px 0 0;
  min-height:4px;opacity:.85}
.sm-bar.fc{background:repeating-linear-gradient(135deg,var(--sm-accent),var(--sm-accent) 2px,transparent 2px,transparent 5px)}
.sm-legend{display:flex;gap:.9rem;margin-top:.5rem;font-size:.7rem;color:var(--sm-mute)}
.sm-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--sm-accent);
  margin-right:.3rem;vertical-align:middle;font-style:normal}
.sm-legend i.fc{background:repeating-linear-gradient(135deg,var(--sm-accent),var(--sm-accent) 2px,transparent 2px,transparent 5px)}

/* Banda de capacidades */
.sm-caps{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--sm-border)}
.sm-cap{font-size:.73rem;color:var(--sm-mute);border:1px solid var(--sm-border);border-radius:999px;padding:.32rem .75rem}
.sm-cap b{color:var(--sm-text);font-weight:600}

/* Cinta de tier — z-index:50 deliberado: por debajo de .au-toast (z-index:54),
   que ocupa la misma franja izquierda pero es momentáneo. Debe coincidir con
   el STYLE de _add_ribbon_pequena.py. */
.sm-tier{position:fixed;left:1.1rem;bottom:4.6rem;z-index:50;display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem .95rem;border-radius:999px;background:var(--sm-panel);border:1px solid var(--sm-border);
  color:var(--sm-mute);font:500 .74rem/1 inherit;text-decoration:none;backdrop-filter:blur(10px)}
.sm-tier b{color:var(--sm-accent)}
.sm-dot{width:7px;height:7px;border-radius:50%;background:var(--sm-accent)}

@media(max-width:640px){
  .sm-launch{right:.7rem;bottom:8.6rem;font-size:.76rem;padding:.6rem .85rem}
  .sm-tier{left:.7rem;bottom:4.2rem;font-size:.68rem}
  .sm-wrap{padding:1.1rem .9rem 2rem}
}