/* ============================================================
   Wero MX — office.css
   Estilos del modulo "Oficina Virtual" (mundo 2D tipo Gather, motor Phaser).
   Tematizado con las variables .px-skin (nunca hex crudo salvo el letterbox
   oscuro del lienzo de juego, estandar como el backdrop de las llamadas #0c0e12).
   Fase 1: shell + lienzo a pantalla completa de la ventana + ayuda de controles.
   ============================================================ */

/* Contenedor raiz: ocupa todo el alto de la ventana del WebOS. */
.office-shell {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-body);
}

/* Lienzo del juego: Phaser inserta aqui su <canvas>. El fondo oscuro es el
   letterbox del juego (fuera del mundo), no un color de tema. */
.office-canvas {
    width: 100%;
    height: 100%;
    background: #0c0e12;   /* letterbox del canvas de juego (estandar, como call.css) */
    overflow: hidden;
}

/* El <canvas> que monta Phaser debe llenar el contenedor y bloquear el menu
   contextual / seleccion para que el input del juego se sienta nativo. */
.office-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
}

/* Ayuda flotante de controles (esquina inferior). Tematizada .px-skin. */
.office-hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem .7rem;
    font-size: .8rem;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-card) 82%, transparent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius, .55rem);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    pointer-events: none;
    z-index: 2;
}

.office-hint i {
    color: var(--primary);
}

/* ============================================================
   MINIMAPA (MEJORA 2): marco redondeado abajo-derecha. El CONTENIDO (un punto por
   avatar + el mapa) lo pinta una 2a camara de Phaser DENTRO de este recuadro; aqui
   solo va el borde/sombra. Centro transparente para dejar ver el render del canvas.
   ============================================================ */
.office-minimap {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 160px;
    height: 110px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
    pointer-events: none;
    z-index: 3;
}

/* ============================================================
   Barra inferior estilo Gather (Fase 3): mic de proximidad + chat de burbujas.
   Tematizada .px-skin (variables CSS; sin hex crudo salvo estados de marca).
   ============================================================ */
.office-bar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;              /* una sola fila: nunca envuelve (se veria en 2 pisos) */
    gap: .5rem;
    padding: .4rem .65rem;
    max-width: min(940px, calc(100% - 24px));
    width: max-content;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
    z-index: 4;
}

/* Grupo logico de la barra: iconos afines juntos con un gap comodo. No se comprime (mantiene el tamano tactil). */
.office-bar-group {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
}

/* Grupo del CHAT: CRECE para llenar el espacio restante y NUNCA baja del ancho que muestra el placeholder entero. */
.office-bar-group--chat {
    flex: 1 1 320px;
    min-width: 240px;
}

/* Divisor sutil entre grupos: linea vertical tenue, centrada verticalmente. */
.office-bar-sep {
    flex: 0 0 auto;
    width: 1px;
    align-self: stretch;
    min-height: 24px;
    margin: 0 .15rem;
    background: color-mix(in srgb, var(--border-color) 80%, transparent);
}

/* Boton de microfono (redondo). is-off = apagado/sin entrar; is-on = transmitiendo. */
.office-mic,
.office-chat-send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.office-mic:hover,
.office-chat-send:hover {
    background: color-mix(in srgb, var(--primary) 16%, var(--bg-body));
    color: var(--text-primary);
    border-color: var(--primary);
}

.office-mic.is-on {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.office-mic.is-off {
    color: var(--text-secondary);
}

/* Campo de texto del chat (burbujas): ocupa todo el ancho del grupo; el placeholder no se trunca. */
.office-chat-input {
    flex: 1 1 auto;
    min-width: 210px;
    width: 100%;
    height: 38px;
    padding: 0 .9rem;
    font-size: .9rem;
    color: var(--text-primary);
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    outline: none;
    text-overflow: ellipsis;
}

.office-chat-input::placeholder {
    color: var(--text-secondary);
    opacity: .8;
}

.office-chat-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.office-chat-send {
    color: var(--primary);
}

/* Boton "Mi avatar" (F4): mismo tamano/estilo redondo que el mic, acento primario. */
.office-avatar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--primary);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.office-avatar-btn:hover {
    background: color-mix(in srgb, var(--primary) 16%, var(--bg-body));
    color: var(--text-primary);
    border-color: var(--primary);
}

/* Boton de la barra en estado activo (selector de pisos abierto). */
.office-avatar-btn.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ============================================================
   GLOBO DE PROXIMIDAD: al acercarte a otro avatar aparece flotante SOBRE la barra inferior, con el nombre del
   usuario cercano y dos acciones (Llamar / Chat). Tematizado .px-skin. Se muestra/oculta desde C# (OnProximo/
   OnAlejado del motor). Aparece con una pequena animacion para no ser brusco.
   ============================================================ */
.office-prox {
    position: absolute;
    left: 50%;
    bottom: 70px;                 /* justo encima de la barra inferior (bottom:14px + alto) */
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .55rem .4rem .5rem;
    max-width: min(340px, calc(100% - 24px));
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .34);
    z-index: 5;
    animation: office-prox-in .16s ease-out;
}

@keyframes office-prox-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Avatar generico (icono) del usuario cercano. */
.office-prox-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 18%, var(--bg-body));
    color: var(--primary);
    font-size: .95rem;
}

.office-prox-info {
    display: flex;
    flex-direction: column;
    min-width: 0;                 /* permite el ellipsis del nombre */
    line-height: 1.15;
    padding-right: .15rem;
}

.office-prox-cap {
    font-size: .66rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.office-prox-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Acciones del globo (redondas, tamano tactil). */
.office-prox-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-primary);
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease, transform .1s ease;
}

.office-prox-btn:hover {
    transform: translateY(-1px);
}

/* Llamar: acento de exito/telefono (usa la variable de "activo/mic" = primary). */
.office-prox-call {
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-body));
    border-color: var(--primary);
    color: var(--primary);
}

.office-prox-call:hover {
    background: var(--primary);
    color: #fff;
}

/* Chat: neutro; al hover toma el acento primario. */
.office-prox-chat:hover {
    background: color-mix(in srgb, var(--primary) 16%, var(--bg-body));
    border-color: var(--primary);
    color: var(--primary);
}

/* ============================================================
   NAVEGACION ENTRE PISOS (Fase 5): indicador de piso + selector rapido.
   ============================================================ */

/* Indicador del piso actual (esquina superior izquierda). */
.office-floor-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .7rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    z-index: 3;
}

.office-floor-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-card) 70%, transparent);
}

.office-floor-home {
    font-size: .72rem;
    font-weight: 600;
    color: var(--primary);
}

.office-floor-visit {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Overlay "cambiando de piso". */
.office-switching {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #e8ebf0;
    background: rgba(12, 14, 18, .55);
    backdrop-filter: blur(2px);
}

/* Popup del selector de pisos (sobre la barra inferior). */
.office-floors-pop {
    position: absolute;
    left: 50%;
    bottom: 68px;
    transform: translateX(-50%);
    width: min(320px, calc(100% - 24px));
    max-height: 52vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius, .7rem);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    z-index: 5;
    overflow: hidden;
}

.office-floors-head {
    display: flex;
    align-items: center;
    padding: .6rem .8rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.office-floors-x {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.office-floors-x:hover {
    color: var(--text-primary);
}

.office-floors-list {
    overflow-y: auto;
    padding: .35rem;
}

.office-floors-empty {
    padding: .8rem;
    font-size: .85rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Item de piso (marca) en el selector. */
.office-floor-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem .6rem;
    margin-bottom: .15rem;
    font-size: .9rem;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius, .55rem);
    cursor: pointer;
    text-align: left;
    transition: background .12s ease, border-color .12s ease;
}

.office-floor-item:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-body));
    border-color: var(--primary);
}

.office-floor-item.is-current {
    background: color-mix(in srgb, var(--primary) 16%, var(--bg-body));
    border-color: var(--primary);
}

.office-floor-item:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.office-floor-item-name {
    flex: 1 1 auto;
    font-weight: 500;
}

.office-floor-nomap {
    font-size: .7rem;
    color: var(--text-secondary);
    font-style: italic;
}

.office-floor-check {
    color: var(--primary);
}

/* ============================================================
   PANEL DE GESTION (Fase 5, ENTREGABLE 2): marcas + miembros. .px-skin.
   ============================================================ */
.office-admin-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.1rem;
    align-items: start;
}

@media (max-width: 720px) {
    .office-admin-grid {
        grid-template-columns: 1fr;
    }
}

.office-admin-list {
    max-height: 62vh;
    overflow-y: auto;
    padding-right: .2rem;
}

.office-admin-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .55rem;
    margin-bottom: .2rem;
    color: var(--text-primary);
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius, .55rem);
    cursor: pointer;
    text-align: left;
}

.office-admin-brand:hover {
    border-color: var(--primary);
}

.office-admin-brand.is-sel {
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-body));
    border-color: var(--primary);
}

.office-admin-brand.is-off {
    opacity: .6;
}

.office-admin-brand-name {
    flex: 1 1 auto;
    font-weight: 500;
}

.office-admin-brand-meta {
    font-size: .74rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.office-admin-edit {
    min-width: 0;
}

/* Preview del logo editable de la marca (binario servido por endpoint). */
.office-admin-logo-preview {
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--px-border, rgba(128,128,128,.4));
    border-radius: 8px;
    background: var(--px-surface-2, rgba(128,128,128,.08));
    overflow: hidden;
}

.office-admin-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.office-admin-addmember {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
}

.office-admin-addmember .form-select {
    flex: 1 1 180px;
    min-width: 140px;
}

.office-admin-addmember .office-admin-rol {
    flex: 0 0 130px;
}

.office-admin-casa {
    flex: 0 0 auto;
}

.office-admin-members {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-height: 34vh;
    overflow-y: auto;
}

.office-admin-member {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .55rem;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius, .55rem);
}

.office-admin-member-name {
    flex: 1 1 auto;
    font-size: .9rem;
    color: var(--text-primary);
}

.office-admin-rolgroup {
    flex: 0 0 auto;
}

/* ============================================================
   Editor de avatar por capas (Fase 4): preview + controles. .px-skin.
   ============================================================ */
.office-av-modal .modal-body {
    padding: 1rem 1.15rem;
}

/* Layout: preview a la izquierda (fijo), controles con scroll a la derecha. */
.office-av-grid {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 1.1rem;
    align-items: start;
}

@media (max-width: 640px) {
    .office-av-grid {
        grid-template-columns: 1fr;
    }
}

/* Preview: lienzo del avatar sobre un panel tematizado. */
.office-av-preview {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .9rem;
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-body));
    border: 1px solid var(--border-color);
    border-radius: var(--radius, .7rem);
}

.office-av-canvas {
    width: 132px;
    height: 178px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Piso sutil bajo el avatar (mismo espiritu que el mundo). */
    background:
        radial-gradient(ellipse 60% 14% at 50% 92%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%);
}

.office-av-canvas svg {
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25));
}

.office-av-preview-cap {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Controles: bloques por categoria (con scroll si es alto). */
.office-av-controls {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-height: 62vh;
    overflow-y: auto;
    padding-right: .25rem;
}

.office-av-cat > label {
    display: block;
    margin-bottom: .3rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.office-av-chips,
.office-av-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* Chip de opcion (peinado/ojos/accesorio/lentes). */
.office-av-chip {
    padding: .28rem .6rem;
    font-size: .82rem;
    color: var(--text-primary);
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.office-av-chip:hover {
    border-color: var(--primary);
}

.office-av-chip.is-sel {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Swatch de color (piel/pelo/ropa). */
.office-av-sw {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 7px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: transform .1s ease, border-color .1s ease, box-shadow .1s ease;
}

.office-av-sw:hover {
    transform: translateY(-1px);
}

.office-av-sw.is-sel {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent);
}

/* ---- Pestañas del editor (Apariencia / Ropa / Accesorios / Música / Baile / Deportes) ---- */
.office-av-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding-bottom: .5rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-card, var(--bg-body));
}

.office-av-tab {
    padding: .3rem .6rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.office-av-tab:hover {
    border-color: var(--primary);
    color: var(--text-primary);
}

.office-av-tab.is-sel {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.office-av-tabbody {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* ---- Lista de emotes dentro del editor ---- */
.office-av-emotes {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.office-av-emote {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .5rem;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius, .7rem);
}

.office-av-emote-ico {
    font-size: 1.25rem;
    line-height: 1;
    width: 1.7rem;
    text-align: center;
}

.office-av-emote-name {
    flex: 1 1 auto;
    font-size: .85rem;
    color: var(--text-primary);
}

.office-av-emote-try {
    flex: 0 0 auto;
    padding: .26rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 999px;
    cursor: pointer;
    transition: filter .12s ease;
}

.office-av-emote-try:hover {
    filter: brightness(1.08);
}

.office-av-emote-hint {
    margin-top: .3rem;
    font-size: .74rem;
    color: var(--text-secondary);
}

/* ---- Popup rápido de emotes en la barra ---- */
.office-emotes-pop {
    position: absolute;
    left: 50%;
    bottom: 64px;
    transform: translateX(-50%);
    width: min(340px, 92vw);
    background: var(--bg-card, var(--bg-body));
    border: 1px solid var(--border-color);
    border-radius: var(--radius, .7rem);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    z-index: 1094;
    overflow: hidden;
}

.office-emotes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    padding: .6rem;
}

.office-emote-quick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .5rem .3rem;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius, .7rem);
    cursor: pointer;
    transition: transform .1s ease, border-color .1s ease;
}

.office-emote-quick:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
}

.office-emote-quick-ico {
    font-size: 1.5rem;
    line-height: 1;
}

.office-emote-quick-name {
    font-size: .72rem;
    color: var(--text-secondary);
    text-align: center;
}

/* ============================================================
   EDITOR DE MAPAS (F6): barra inferior con herramientas + panel contextual +
   acciones (Guardar/Cancelar). Solo visible en modo edicion. .px-skin.
   ============================================================ */
.office-editbar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem;
    max-width: min(880px, calc(100% - 24px));
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius, .8rem);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .32);
    z-index: 5;
}

.office-edit-tools {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}

/* Boton de herramienta (icono + etiqueta). */
.office-edit-tool {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    min-width: 52px;
    padding: .35rem .4rem;
    font-size: .68rem;
    color: var(--text-secondary);
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius, .55rem);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.office-edit-tool i {
    font-size: 1rem;
}

.office-edit-tool:hover {
    border-color: var(--primary);
    color: var(--text-primary);
}

.office-edit-tool.is-sel {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Panel contextual (paleta de mobiliario / atributos de zona / picker de lugar). */
.office-edit-ctx {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding-left: .6rem;
    border-left: 1px solid var(--border-color);
    max-width: 460px;
}

.office-edit-inp {
    width: auto;
    min-width: 120px;
    max-width: 180px;
}

.office-edit-chk {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Chip de asset (paleta de mobiliario). */
.office-edit-asset {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .05rem;
    padding: .3rem .5rem;
    font-size: .78rem;
    color: var(--text-primary);
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius, .5rem);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.office-edit-asset:hover {
    border-color: var(--primary);
}

.office-edit-asset.is-sel {
    background: color-mix(in srgb, var(--primary) 16%, var(--bg-body));
    border-color: var(--primary);
}

.office-edit-asset-name {
    font-weight: 500;
    line-height: 1.1;
}

.office-edit-asset-fp {
    font-size: .66rem;
    color: var(--text-secondary);
}

.office-edit-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    padding-left: .6rem;
    border-left: 1px solid var(--border-color);
}

/* ============================================================
   CONTROL TACTIL (F8, MOVIL): joystick virtual abajo-izquierda. Solo se monta en
   dispositivos tactiles (lo crea office-game.js). Tematizado .px-skin.
   ============================================================ */
.office-joystick {
    position: absolute;
    left: 18px;
    bottom: 84px;
    z-index: 5;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.office-joystick-base {
    position: relative;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-card) 55%, transparent);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
    touch-action: none;
}

.office-joystick-base.is-active {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border-color: var(--primary);
}

.office-joystick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: color-mix(in srgb, var(--primary) 78%, var(--bg-body));
    border: 2px solid color-mix(in srgb, #fff 30%, var(--primary));
    box-shadow: 0 2px 12px rgba(0, 0, 0, .38);
    pointer-events: none;
    transition: background .12s ease;
}

/* ============================================================
   MOVIL / PANTALLAS CHICAS: la barra inferior (chat/mic/avatar/pisos) y el editor
   crecen a tamanos tactiles y la barra se desliza en horizontal si no cabe.
   ============================================================ */
@media (max-width: 640px), (pointer: coarse) {
    /* Botones a >=44px (objetivo tactil comodo). */
    .office-avatar-btn,
    .office-mic,
    .office-chat-send {
        width: 44px;
        height: 44px;
    }

    .office-chat-input {
        height: 44px;
        min-width: 140px;
    }

    /* Barra: ocupa casi todo el ancho y se desliza horizontal si hay muchos botones. */
    .office-bar {
        left: 8px;
        right: 8px;
        transform: none;
        max-width: none;
        width: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .office-bar::-webkit-scrollbar {
        display: none;
    }

    /* Editor / decoracion: mas ancho + herramientas mas grandes al tacto. */
    .office-editbar {
        left: 8px;
        right: 8px;
        transform: none;
        max-width: none;
        max-height: 46vh;
        overflow-y: auto;
    }

    .office-edit-tool {
        min-width: 60px;
        padding: .5rem .5rem;
        font-size: .72rem;
    }

    .office-edit-tool i {
        font-size: 1.15rem;
    }

    /* Globo de proximidad: sube un poco para librar la barra tactil (mas alta) y botones a tamano tactil. */
    .office-prox {
        bottom: 80px;
    }

    .office-prox-btn {
        width: 44px;
        height: 44px;
    }

    /* Ayuda de teclado: sin teclado fisico en movil, se oculta para despejar. */
    .office-hint {
        display: none;
    }
}