/* Mi espacio: personaje, pieza y muebles dentro del panel del estudiante. */
/* display:flex no debe mostrar herramientas del dueño durante una visita. */
.esp-terreno[hidden], .esp-acciones[hidden]{ display:none }

.esp-caja{
  background:linear-gradient(135deg,#1e293b,#243349);
  border:1px solid #334155; border-radius:16px; overflow:hidden; margin-bottom:20px;
}
.esp-cab{
  display:flex; align-items:center; gap:12px; padding:14px 16px 0;
}
.esp-cab h2{ font-size:16px; margin:0; font-weight:800; color:#e8edf5 }
.esp-cab p{ margin:2px 0 0; font-size:12px; color:#94a3b8 }

.esp-tabs{ display:flex; gap:6px; padding:12px 16px 0; flex-wrap:wrap; align-items:center }
.esp-tabs button{
  border:1px solid #334155; background:transparent; color:#94a3b8;
  font-size:12px; font-weight:700; padding:7px 14px; border-radius:20px; cursor:pointer;
}
.esp-tabs button.on{ background:#38bdf8; border-color:#38bdf8; color:#04263a }
.esp-estado{ margin-left:auto; font-size:11px; font-weight:700 }
.esp-estado.bien{ color:#22c55e } .esp-estado.malo{ color:#f97316 }

.esp-panel{ padding:14px 16px 16px }
.esp-panel.oculto{ display:none }

/* ---- personaje ---- */
.esp-personaje{ display:grid; grid-template-columns:190px 1fr; gap:16px; align-items:start }
.esp-vista{
  background:#0f1a2b; border:1px solid #334155; border-radius:14px;
  padding:12px; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.esp-figura{ display:grid; place-items:center; min-height:170px }
.esp-azar{
  border:1px solid #334155; background:#1e293b; color:#cbd5e1; cursor:pointer;
  font-size:12px; font-weight:700; padding:6px 14px; border-radius:18px; width:100%;
}
.esp-azar:hover{ border-color:#38bdf8; color:#e8edf5 }

.esp-ropero{ display:grid; gap:12px; max-height:320px; overflow-y:auto; padding-right:4px }
.esp-cat h4{ margin:0 0 6px; font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:.6px }
.esp-ops{ display:flex; flex-wrap:wrap; gap:6px }
.esp-op{
  position:relative; border:1.5px solid #334155; background:#1b2739; color:#cbd5e1;
  border-radius:9px; padding:5px 9px; font-size:11px; cursor:pointer; line-height:1.2;
  display:inline-flex; align-items:center; gap:5px; min-height:30px;
}
.esp-op i{ width:18px; height:18px; border-radius:5px; display:block; border:1px solid rgba(0,0,0,.35) }
.esp-op.sel{ border-color:#38bdf8; background:#0f3548; color:#e8edf5 }
.esp-op.blo{ opacity:.45; cursor:not-allowed }
.esp-op b{ font-size:9px }
.esp-op-imagen{width:72px;min-height:86px;flex-direction:column;justify-content:end;padding:5px 3px;text-align:center}
.esp-op-imagen img{width:58px;height:58px;object-fit:contain;image-rendering:pixelated}
.esp-op-imagen b{position:absolute;top:4px;right:4px}
.esp-kit{margin-top:12px;border:1px solid #334155;border-radius:10px;color:#cbd5e1;padding:10px}
.esp-kit summary{cursor:pointer;font-size:12px;font-weight:700;padding:4px;min-height:24px}
.esp-kit p{font-size:11px;color:#94a3b8;margin:8px 0;line-height:1.5}
.esp-kit-rejilla,.esp-kit .esp-gestos{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:7px;margin-top:10px}
.esp-kit-rejilla button,.esp-kit .esp-gestos button{display:flex;flex-direction:column;align-items:center;justify-content:end;gap:5px;border:1px solid #334155;border-radius:8px;background:#1b2739;color:#cbd5e1;padding:7px 3px;font-size:11px;min-height:106px;cursor:pointer}
.esp-kit-rejilla img,.esp-kit .esp-gestos img{width:64px;height:78px;object-fit:contain;image-rendering:pixelated}
.esp-kit button:hover,.esp-kit button[aria-pressed="true"]{border-color:#38bdf8;background:#0f3548;color:#e8edf5}
.esp-kit button:focus-visible,.esp-op:focus-visible{outline:2px solid #fbbf24;outline-offset:2px}
.esp-figura canvas{image-rendering:pixelated}

/* ---- pieza ---- */
/* La casa necesita bastante más alto que el editor de personaje: si se le da el
   mismo espacio, la pieza sale diminuta y no se distinguen los muebles. */
.esp-escena{
  position:relative; height:min(74vh,620px); border-radius:14px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 10%,#223049 0%,#101a2c 60%,#0b1220 100%);
  border:1px solid #334155;
}
.esp-escena canvas{ display:block; width:100%; height:100%; touch-action:none }
.esp-acciones{ position:absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:8px }
.esp-acciones button{
  width:42px; height:42px; border-radius:11px; border:1px solid #334155;
  background:rgba(30,41,59,.92); color:#e8edf5; font-size:18px; cursor:pointer;
  display:grid; place-items:center;
}
.esp-acciones button:hover:not(:disabled){ border-color:#38bdf8 }
.esp-acciones button:disabled{ opacity:.35; cursor:default }
#espUsar{ width:59px; font-size:11px; font-weight:800; letter-spacing:.01em }
.esp-aviso{
  position:absolute; left:50%; transform:translateX(-50%); bottom:12px; opacity:0;
  background:rgba(15,23,42,.9); border:1px solid #334155; color:#cbd5e1;
  font-size:12px; padding:7px 14px; border-radius:20px; pointer-events:none;
  transition:opacity .3s; max-width:90%; text-align:center;
}

/* ---- sala: cabecera, visitas y chat ---- */
.esp-sala-cab{
  display:flex; align-items:center; gap:10px; margin:0 0 8px; flex-wrap:wrap;
}
.esp-sala-tit{ font-size:13px; font-weight:800; color:#e8edf5 }
.esp-sala-n{ font-size:11px; color:#94a3b8 }
.esp-btn-chico{
  margin-left:auto; border:1px solid #334155; background:#1b2739; color:#cbd5e1;
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:16px; cursor:pointer;
}
.esp-btn-chico:hover{ border-color:#38bdf8; color:#e8edf5 }
.esp-visitas{
  position:absolute; inset:10px auto 10px 10px; width:min(300px, calc(100% - 20px));
  background:rgba(15,23,42,.96); border:1px solid #334155; border-radius:12px;
  padding:10px; overflow:auto; z-index:3;
}
.esp-vis-cab{ display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#e8edf5; font-size:12px }
.esp-vis-lista{ display:grid; gap:5px; font-size:12px; color:#94a3b8 }
.esp-vis-item{
  display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%;
  border:1px solid #2c3a4f; background:#1b2739; color:#e8edf5; border-radius:9px;
  padding:7px 10px; cursor:pointer; text-align:left; font-size:12px;
}
.esp-vis-item:hover{ border-color:#38bdf8 }
.esp-vis-item em{ font-style:normal; font-size:10px; color:#22c55e; white-space:nowrap }
.esp-chat{ margin-top:8px; background:#0f1a2b; border:1px solid #334155; border-radius:12px; overflow:hidden }
.esp-chat-lista{ max-height:130px; overflow-y:auto; padding:8px 10px; font-size:12px; color:#cbd5e1; display:grid; gap:3px }
.esp-msg b{ color:#38bdf8; font-weight:700 }
.esp-msg.mio b{ color:#22c55e }
.esp-chat-form{ display:flex; gap:6px; padding:8px; border-top:1px solid #1e293b }
.esp-chat-form input{
  flex:1; min-width:0; background:#1b2739; border:1px solid #334155; color:#e8edf5;
  border-radius:9px; padding:8px 10px; font-size:13px;
}
.esp-chat-form input.mal{ border-color:#f97316; background:#3a1d12 }
.esp-chat-form button{
  border:none; background:#38bdf8; color:#04263a; font-weight:800; font-size:12px;
  padding:8px 14px; border-radius:9px; cursor:pointer;
}

/* ---- moverse sin mouse: pad, terreno, ayuda ---- */
.esp-escena canvas:focus{ outline:none; box-shadow:inset 0 0 0 2px rgba(56,189,248,.55) }
.esp-pad{
  position:absolute; left:10px; bottom:10px; display:grid; gap:4px;
  grid-template-columns:repeat(3,38px); grid-template-areas:". up ." "left . right" ". down .";
}
.esp-pad button{
  width:38px; height:38px; border-radius:10px; border:1px solid #334155;
  background:rgba(30,41,59,.92); color:#e8edf5; font-size:14px; cursor:pointer;
}
.esp-pad button:active{ background:#38bdf8; color:#04263a }
.esp-pad button[data-k="ArrowUp"]{ grid-area:up } .esp-pad button[data-k="ArrowDown"]{ grid-area:down }
.esp-pad button[data-k="ArrowLeft"]{ grid-area:left } .esp-pad button[data-k="ArrowRight"]{ grid-area:right }
.esp-terreno{ position:absolute; left:10px; top:10px; display:flex; gap:6px }
.esp-terreno button{
  border:1px solid #334155; background:rgba(30,41,59,.92); color:#cbd5e1;
  font-size:11px; font-weight:700; padding:6px 11px; border-radius:14px; cursor:pointer;
}
.esp-terreno button:hover{ border-color:#38bdf8; color:#e8edf5 }
.esp-ayuda{ font-size:11px; color:#64748b; margin:6px 2px 0; line-height:1.5 }
.esp-vista-controles{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:9px 2px 0; color:#94a3b8; font-size:11px }
.esp-vista-controles button{ border:1px solid #334155; border-radius:10px; background:#1b2739; color:#e8edf5; padding:5px 9px; cursor:pointer; font-size:11px }
.esp-vista-controles button:hover,.esp-vista-controles button.on{ border-color:#38bdf8; color:#38bdf8 }
#espZoomNivel{ min-width:74px; text-align:center }
.esp-gestos{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:9px 2px 0; color:#94a3b8; font-size:11px }
.esp-gestos span{ margin-right:4px; font-weight:700 }
.esp-gestos button{ border:1px solid #334155; border-radius:16px; background:#1b2739; color:#e8edf5; padding:6px 10px; cursor:pointer; font-size:11px }
.esp-gestos button:hover{ border-color:#38bdf8 }
.esp-tamano-icono{ font-style:normal; font-size:22px; line-height:20px; text-align:center; color:#38bdf8 }
.esp-paleta{ left:auto; right:60px; width:min(280px, calc(100% - 80px)) }
.esp-paleta .esp-vis-item img{ width:44px; height:32px; object-fit:contain; image-rendering:pixelated }
.esp-paleta .esp-vis-item i{ width:44px; height:22px; border-radius:5px; display:block; border:1px solid rgba(0,0,0,.35) }
.esp-paleta .esp-vis-item span{ flex:1 }
.esp-paleta .esp-vis-item.blo{ opacity:.5 }
.esp-paleta .esp-vis-item.sel{ border-color:#38bdf8; background:#0f3548 }

/* ---- muebles ---- */
.esp-muebles-integrados{
  margin-top:12px; padding:14px; border:1px solid #334155; border-radius:12px;
  background:#152033;
}
.esp-muebles-integrados h3{
  margin:0 0 10px; color:#e8edf5; font-size:13px; font-weight:800;
}
.esp-subtabs{ display:flex; align-items:center; gap:6px; margin-bottom:10px }
.esp-subtabs button{
  border:1px solid #334155; background:transparent; color:#94a3b8;
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:18px; cursor:pointer;
}
.esp-subtabs button.on{ background:#38bdf8; border-color:#38bdf8; color:#04263a }
.esp-subtabs span{ margin-left:auto; font-size:11px; color:#64748b }
.esp-familias{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px }
.esp-familias button{
  border:1px solid #2c3a4f; background:#1b2739; color:#94a3b8;
  font-size:11px; padding:4px 10px; border-radius:14px; cursor:pointer;
}
.esp-familias button.on{ background:#334d6b; border-color:#4a6a92; color:#e8edf5 }

.esp-rejilla{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px;
  max-height:420px; overflow-y:auto;
}
.esp-item{
  position:relative; background:#273449; border:1.5px solid transparent; border-radius:12px;
  padding:7px 5px 6px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.esp-item:hover{ border-color:#3f5170 }
.esp-item.sel{ border-color:#38bdf8; background:#0f3548 }
.esp-item img{ width:100%; height:54px; object-fit:contain; image-rendering:pixelated }
.esp-nom{ font-size:10px; color:#cbd5e1; line-height:1.2 }
.esp-item.blo{ opacity:.5 }
.esp-item.blo img{ filter:grayscale(1) brightness(.6) }
.esp-req{ font-size:9px; color:#f59e0b; font-weight:700; line-height:1.15 }
.esp-cont{
  position:absolute; top:4px; right:5px; background:#22c55e; color:#052e16;
  font-size:9px; font-weight:800; border-radius:9px; padding:1px 5px;
}
.esp-regalo{ position:absolute; top:3px; left:5px; font-size:13px; line-height:1 }

/* ---- placas y regalos ---- */
.esp-anuncio{
  margin:0 0 10px; background:#0f3548; border:1px solid #38bdf8; color:#e8edf5;
  font-size:13px; font-weight:700; padding:9px 12px; border-radius:10px;
}
.esp-placas{ margin-top:14px }
.esp-placas h4{ margin:0 0 8px; font-size:12px; color:#e8edf5; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline }
.esp-placas h4 span{ font-size:11px; color:#94a3b8; font-weight:600 }
.esp-placas-vacio{ margin:0; font-size:12px; color:#94a3b8; line-height:1.5 }
.esp-placas-vacio a{ color:#38bdf8 }
.esp-placas-lista{ display:flex; flex-wrap:wrap; gap:6px }
.esp-placa{
  display:flex; align-items:center; gap:7px; border:1.5px solid #2c3a4f; background:#1b2739;
  color:#cbd5e1; border-radius:10px; padding:4px 10px 4px 4px; font-size:11px; font-weight:600; cursor:pointer;
}
.esp-placa i{
  font-style:normal; width:24px; height:24px; border-radius:6px; display:grid; place-items:center;
  background:var(--rareza); font-size:14px;
}
.esp-placa:hover{ border-color:#38bdf8 }
.esp-placa.on{ border-color:var(--rareza); background:#0f2a3d; color:#e8edf5 }
.esp-btn-junto{ margin-left:0 }
.esp-regalo-nota{ margin:0 0 8px; font-size:11px; color:#94a3b8 }
.esp-regalo-rejilla{ display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:6px }
.esp-regalo-op{
  display:grid; justify-items:center; gap:3px; border:1px solid #2c3a4f; background:#1b2739;
  color:#e8edf5; border-radius:9px; padding:6px 4px; cursor:pointer; font-size:10px; line-height:1.2;
}
.esp-regalo-op img{ width:48px; height:40px; object-fit:contain; image-rendering:pixelated }
.esp-regalo-op:hover:not(:disabled){ border-color:#38bdf8 }
.esp-regalo-op:disabled{ opacity:.5; cursor:default }

@media(max-width:720px){
  .esp-personaje{ grid-template-columns:1fr }
  .esp-vista{ flex-direction:row; justify-content:center; gap:14px }
  .esp-figura{ min-height:130px }
  .esp-azar{ width:auto }
  .esp-escena{ height:min(52vh,360px) }
  .esp-acciones{ top:8px; right:8px; gap:5px }
  .esp-acciones button{ width:36px; height:36px; font-size:16px }
  #espUsar{ width:59px; font-size:10px }
}
.esp-modos{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.esp-modos button{min-height:40px;padding:8px 16px;border:1px solid #475569;border-radius:9px;background:#1e293b;color:#e2e8f0;font-weight:700;cursor:pointer}
.esp-modos button[aria-pressed="true"]{background:#0e7490;border-color:#67e8f9;color:white}
.esp-modos button:focus-visible{outline:3px solid #facc15;outline-offset:2px}
.esp-modos button:disabled{opacity:.5;cursor:not-allowed}
.esp-puerta{background:#164e63!important;color:#cffafe!important;min-height:38px}
/* Acciones accesibles también sin apuntar a los pequeños sprites. */
.esp-acciones-muebles{display:flex;flex-wrap:wrap;gap:8px;padding:10px}
.esp-acciones-muebles button{font:inherit;text-align:left;flex:1 1 160px;min-height:48px;padding:10px;border:1px solid #475569;border-radius:10px;background:#172438;color:#f1f5f9;cursor:pointer}
.esp-acciones-muebles button span{display:block;font-size:.85em;color:#a5f3fc;margin-top:3px}
.esp-acciones-muebles button:disabled{opacity:.6;cursor:default}
.esp-acciones-muebles button:focus-visible{outline:3px solid #67e8f9;outline-offset:2px}
.esp-reto{padding:12px;margin:8px 0;border:1px solid #0e7490;border-radius:10px;color:#cffafe;background:#083344;font-size:.9rem}
.esp-reto.completo{border-color:#22c55e;background:#14532d;color:#dcfce7}
.esp-sala-cab{flex-wrap:wrap}