/* COMMANDER BUSINESS · Demo (demo.html) — misma paleta y tipografía que la página principal */
:root{
  --tinta:#14213D; --tinta-2:#1C2D52; --tinta-3:#2A3D68; --naranja:#F28C28; --naranja-tinta:#1E1304;
  --fondo:#EEF1F6; --papel:#FFF; --linea:#D5DCE8; --gris:#5B6880; --ok:#1C7F4E; --ok-f:#DDF1E5;
  --f-disp:"Archivo","Arial Narrow",system-ui,sans-serif; --f-cuerpo:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:15px/1.5 var(--f-cuerpo);color:var(--tinta);background:var(--fondo);-webkit-font-smoothing:antialiased}
.incrustada body{background:transparent}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--naranja);outline-offset:2px;border-radius:6px}
.mk{display:inline-flex;flex:none}

/* ---------- fila de sectores ---------- */
.sectores{display:flex;align-items:center;gap:6px;padding:12px 14px 4px;overflow-x:auto;scrollbar-width:none}
.sectores .et{color:#8C9BB8;font-size:.82rem;font-weight:600;margin-right:6px;white-space:nowrap}
.sector{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border:1px solid #2E4170;border-radius:999px;background:none;color:#C9D2E3;font-weight:600;font-size:.9rem;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.sector:hover{color:#fff;border-color:var(--c)}
.sector[aria-pressed=true]{background:#fff;color:var(--tinta);border-color:#fff}
.sector[aria-pressed=true] .mk svg path{fill:var(--tinta)}

/* ---------- 2) la demo ---------- */
.escena{height:100%;display:flex;flex-direction:column;background:var(--tinta);border-radius:18px;overflow:hidden}
html:not(.incrustada) .escena{border-radius:0}
.barra-demo{display:flex;align-items:center;gap:14px;padding:10px 14px;color:#fff;min-height:58px}
.quien{display:flex;align-items:center;gap:10px;padding-right:14px;border-right:1px solid #2E4170;min-width:0}
.quien small{display:block;color:#8C9BB8;font-size:.74rem;line-height:1.1}
.quien b{display:block;font-family:var(--f-disp);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.pestanas{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.pestana{display:flex;align-items:center;gap:7px;border:0;background:none;color:#93A3BE;font-weight:600;padding:8px 12px;border-radius:8px;white-space:nowrap}
.pestana:hover{color:#fff;background:var(--tinta-2)}
.pestana[aria-selected=true]{color:#fff;background:var(--tinta-3)}
.herr{display:flex;gap:6px}
.herr-btn{border:1px solid #2E4170;background:none;color:#D5DCE8;font-weight:600;font-size:.86rem;padding:7px 12px;border-radius:8px;white-space:nowrap}
.herr-btn:hover{border-color:#5A6E99;color:#fff}

.cuerpo{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;background:var(--fondo)}
.ventana{position:relative;display:flex;flex-direction:column;min-height:0;margin:14px 0 14px 14px;border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 18px 40px -24px rgba(20,33,61,.45)}
.ventana-barra{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#E3E8F1;border-bottom:1px solid var(--linea)}
.ventana-barra i{width:10px;height:10px;border-radius:50%;background:#C6CEDC}
.ventana-barra span{margin-left:10px;padding:3px 12px;border-radius:6px;background:#fff;color:var(--gris);font-size:.78rem}
.ventana iframe{flex:1;width:100%;border:0;display:block;background:#F3F5F9}

/* piloto automático */
.escena{position:relative}
.cursor{position:absolute;left:0;top:0;z-index:20;pointer-events:none;transition:transform .7s cubic-bezier(.45,.05,.25,1);filter:drop-shadow(0 3px 4px rgba(20,33,61,.35))}
.cursor::after{content:"";position:absolute;left:-14px;top:-14px;width:30px;height:30px;border-radius:50%;border:3px solid var(--naranja);opacity:0}
.cursor.toca::after{animation:toque .5s ease-out}
@keyframes toque{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
.aviso-piloto{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;margin:0;max-width:calc(100% - 32px);padding:10px 16px;border-radius:999px;background:var(--tinta);color:#fff;font-size:.9rem;
  box-shadow:0 10px 30px -12px rgba(20,33,61,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aviso-piloto span{color:#F7B26A;font-weight:600;margin-left:6px}
.aviso-piloto.tuyo{background:var(--naranja);color:var(--naranja-tinta)}
.piloto .ventana{outline:3px solid rgba(242,140,40,.55);outline-offset:-1px}

.misiones{overflow:auto;padding:18px 18px 22px;display:flex;flex-direction:column;gap:16px}
.misiones summary{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:10px;cursor:default}
.misiones summary::-webkit-details-marker{display:none}
.misiones summary span{font-family:var(--f-disp);font-weight:800;font-size:1.15rem}
.misiones summary b{font-size:.84rem;color:var(--gris);font-weight:600}
.rol{margin:8px 0 14px;color:var(--gris);font-size:.92rem}
.lista-misiones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lista-misiones li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:12px;border:1px solid var(--linea);border-radius:10px;background:#fff;transition:border-color .2s,background .2s}
.lista-misiones .check{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;background:var(--fondo);color:var(--tinta)}
.lista-misiones b{display:block;font-weight:700;line-height:1.3}
.lista-misiones p{margin:3px 0 8px;color:var(--gris);font-size:.86rem;line-height:1.45}
.mostrar{border:0;background:none;padding:0;color:var(--tinta);font-weight:700;font-size:.86rem;text-decoration:underline;text-decoration-color:var(--naranja);text-decoration-thickness:2px;text-underline-offset:4px}
.lista-misiones li.ok{border-color:#B7DEC8;background:#F5FBF7}
.lista-misiones li.ok .check{background:var(--ok);color:#fff}
.lista-misiones li.ok p{display:none}
.hecho{color:var(--ok);font-weight:700;font-size:.82rem}
.lista-misiones li.recien .check{animation:pop .5s ease-out}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.brilla summary b{animation:brilla 1.2s ease-out}
@keyframes brilla{0%{color:var(--ok);transform:scale(1.25)}100%{transform:scale(1)}}
.libre{margin:12px 0 0;color:var(--gris);font-size:.85rem}

.premio{padding:18px;border-radius:12px;background:var(--tinta);color:#fff;display:flex;flex-direction:column;gap:10px}
.premio b{font-family:var(--f-disp);font-weight:800;font-size:1.25rem;line-height:1.15}
.premio p{margin:0;color:#B9C4DA;font-size:.92rem}
.cta{display:flex;justify-content:center;padding:11px 16px;border-radius:10px;border:2px solid var(--naranja);background:var(--naranja);color:var(--naranja-tinta);font-weight:700;text-decoration:none}
.cta:hover{filter:brightness(1.06)}
.cta.linea{background:none;color:#fff;border-color:#5A6E99}
.cta.linea:hover{border-color:#fff;filter:none}

@media (prefers-reduced-motion:reduce){.lista-misiones li.recien .check,.cursor.toca::after{animation:none}.sector{transition:none}.cursor{transition-duration:.01s}}

/* ---------- vista de teléfono (página principal en celular): solo el programa ---------- */
.telefono .sectores,.telefono .barra-demo,.telefono .misiones,.telefono .ventana-barra{display:none!important}
.telefono .escena{border-radius:0;background:#F3F5F9}
.telefono .cuerpo{grid-template-columns:1fr;grid-template-rows:1fr}
.telefono .ventana{margin:0;border:0;border-radius:0;box-shadow:none;outline:0}
.telefono .aviso-piloto{bottom:auto;top:56px;font-size:.78rem;padding:8px 12px;white-space:normal;text-align:center;border-radius:14px}
.telefono .aviso-piloto span{display:none}
.telefono .cursor svg{display:none}
.telefono .cursor::before{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:rgba(242,140,40,.85);border:2px solid #fff}

/* ---------- pantallas angostas ---------- */
@media (max-width:900px){
  .barra-demo{flex-wrap:wrap;gap:8px}
  .quien{border-right:0;padding-right:0;flex:1}
  .pestanas{order:3;flex-basis:100%}
  .herr #completa{display:none}
  .cuerpo{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .misiones{order:-1;padding:10px 12px;border-bottom:1px solid var(--linea);max-height:45vh}
  .misiones summary{cursor:pointer}
  .misiones summary::after{content:"Ver";font-size:.82rem;font-weight:700;color:var(--tinta);text-decoration:underline;text-decoration-color:var(--naranja)}
  .misiones details[open] summary::after{content:"Ocultar"}
  .ventana{margin:0;border-radius:0;border:0;box-shadow:none}
  .ventana-barra{display:none}
}
@media (max-width:560px){ .sectores .et{display:none} .quien>span:last-child{min-width:0} .quien b{max-width:100%} .herr-btn{padding:6px 9px;font-size:.8rem} .aviso-piloto{white-space:normal;border-radius:14px;text-align:center} }