/* LA MESA DE TRABAJO (crm#239, crm#254): la tira de ventanas arriba y los huecos (1, 2 o 4). Va en píxeles,
   no en rem: el rem del Portal sale del tamaño de la escena y la tira no debe crecer ni encoger con ella. */

.mesa-tira { display: none; }
html.con-mesa .mesa-tira {
  display: flex; align-items: flex-end; gap: 4px;
  position: fixed; left: 0; right: 0; top: 0; height: 44px; z-index: 50;
  padding: 0 12px; box-sizing: border-box;
  background: var(--marino); color: #fff; font: 14px var(--fuente);
}
/* Con la tira, la escena baja 44 px y se ajusta al alto que queda (mismas cuentas que portal.css). */
html.con-mesa { font-size: calc(min(100vw, (100vh - 44px) * 1.77778) / 167.2); }
html.con-mesa .escena { top: calc(50% + 22px); }

.mesa-pestanas { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mesa-pestana {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; max-width: 300px;
  height: 36px; padding: 0 12px; border: 0; border-radius: 8px 8px 0 0; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; font: inherit; white-space: nowrap;
  touch-action: none; /* en el móvil, mantener pulsado es arrastrar, no desplazar la tira */
}
.mesa-pestana:hover { background: rgba(255, 255, 255, .22); }
.mesa-pestana.activa { background: rgba(255, 255, 255, .85); color: var(--marino); }
.mesa-pestana.foco, .mesa-cristales.activa { background: #eef3f0; color: var(--marino); font-weight: 600; }
.mesa-pestana.origen { opacity: .4; }
.mesa-pestana .mesa-nombre { overflow: hidden; text-overflow: ellipsis; }
.mesa-x { opacity: .55; font-size: 16px; line-height: 1; padding: 0 2px; }
.mesa-x:hover { opacity: 1; }
.mesa-cristales { flex: none; }
.mesa-hueco-tira { flex: 1; }
.mesa-rotulo { align-self: center; font-size: 12px; opacity: .75; }
.mesa-reparto { align-self: center; display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, .12); }
.mesa-reparto button {
  display: grid; grid-auto-flow: column; gap: 2px; width: 34px; height: 26px; padding: 4px;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
}
.mesa-reparto button[data-reparto="4"] { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
.mesa-reparto b { display: block; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.mesa-reparto button.activo { background: #fff; }
.mesa-reparto button.activo b { background: var(--azul); }

/* Los huecos. Las ventanas viven TODAS en esta caja y nunca se mueven (un marco movido se recarga):
   cambia su clase. Fuera de la vista de la mesa, la caja entera se esconde y la escena queda debajo. */
.mesa-marcos { display: none; }
html.mesa-a-la-vista .mesa-marcos {
  display: block; position: fixed; left: 0; right: 0; top: 44px; bottom: 0; z-index: 40;
  background: #eef3f0; font: 13px var(--fuente);
}
.mesa-ventana, .mesa-hueco {
  position: absolute; top: 6px; bottom: 6px; left: 6px; right: 6px;
  overflow: hidden; border-radius: 10px; box-sizing: border-box;
}
.mesa-ventana {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #d5ded9;
}
.mesa-ventana.escondida { display: none; }
/* Dónde cae cada hueco según el reparto: con 2, lado a lado; con 4, dos filas. */
.mesa-marcos[data-reparto="2"] .en-hueco-0 { right: calc(50% + 3px); }
.mesa-marcos[data-reparto="2"] .en-hueco-1 { left: calc(50% + 3px); }
.mesa-marcos[data-reparto="4"] .en-hueco-0 { right: calc(50% + 3px); bottom: calc(50% + 3px); }
.mesa-marcos[data-reparto="4"] .en-hueco-1 { left: calc(50% + 3px); bottom: calc(50% + 3px); }
.mesa-marcos[data-reparto="4"] .en-hueco-2 { right: calc(50% + 3px); top: calc(50% + 3px); }
.mesa-marcos[data-reparto="4"] .en-hueco-3 { left: calc(50% + 3px); top: calc(50% + 3px); }
.mesa-ventana.foco, .mesa-hueco.foco { outline: 3px solid var(--azul); outline-offset: -3px; }
.mesa-cabecera {
  display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 10px; flex: none;
  background: #f7faf8; border-bottom: 1px solid #d5ded9; color: var(--marino); cursor: grab;
  touch-action: none;
}
.mesa-cabecera.origen { opacity: .5; }
.mesa-cabecera .mesa-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa-cabecera button { border: 0; background: none; color: #5b6080; font: inherit; cursor: pointer; padding: 2px 4px; }
.mesa-cabecera button:hover { color: var(--azul); }
.mesa-cerrar { font-size: 17px; line-height: 1; }
/* Con un solo hueco no hace falta la cabecera: el nombre ya está en la tira. */
.mesa-marcos[data-reparto="1"] .mesa-cabecera { display: none; }
.mesa-marco { flex: 1; width: 100%; border: 0; }
/* Un hueco libre: se puede soltar en él y un clic lleva a los cristales. Sólo se pinta el que está libre. */
.mesa-hueco { display: none; }
.mesa-hueco.libre {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 20px; cursor: pointer;
  border: 1px dashed #b9c6bf; color: #6b7872; font-size: 15px;
  background: repeating-linear-gradient(135deg, #eef3f0 0 14px, #e6ece8 14px 28px);
}
.mesa-hueco.libre b { font-size: 18px; color: var(--marino); }
/* Mientras se arrastra: el destino se marca y los marcos no reciben el ratón (si no, se lo tragan y no se
   sabe sobre qué hueco se está). */
.mesa-ventana.destino { outline: 3px dashed var(--azul); outline-offset: -3px; }
.mesa-hueco.destino { border-color: var(--azul); background: #e3ecff; color: var(--marino); }
body.arrastrando .mesa-marco { pointer-events: none; }
.mesa-fantasma {
  display: flex; align-items: center; padding: 0 12px; box-sizing: border-box; max-width: 320px;
  background: #fff; border: 1px solid var(--azul); border-radius: 8px; color: var(--marino); font: 600 14px var(--fuente);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}