v-sistec-features 1.31.11 → 1.31.13

package/src/DataAgenda/components/AgendaMatrixBase.vue

@@ -1,211 +1,284 @@
 <!--
 ========
-Este arquivo representa o componente base de visualização e processamento em grade (matriz) da agenda.
-Ele centraliza o cálculo de colspan dos horários, a busca de dados na API, a renderização da tabela 
-e o controle dos modais de criação e detalhes de reserva, servindo de estrutura tanto para a visão 
-múltipla com filtros quanto para a visão de recurso único.
+Este arquivo representa o componente base da visão em matriz horizontal ('tabela').
+Ele ordena a semana a partir do dia inicial da agenda, exibe a barra de data seguida pelos horários
+daquele dia em cada bloco diário, utiliza o componente genérico BlocoArrastavel para seleção horizontal
+e mescla células de reservas contínuas com colspan.
 ========
 -->
 <script setup lang="ts">
-import { computed, onMounted, watch, ref, inject } from 'vue';
-import { useAgenda } from '../composables/useAgenda';
+import { computed, inject } from 'vue';
+import { useCoresAgenda } from '../composables/useCoresAgenda';
+import { useSelecaoArrasto } from '../composables/useSelecaoArrasto';
+import {
+    SIGLAS_DIAS_JS,
+    extrairDataHoraLocal,
+    extrairHoraFormatada,
+    criarDataLocal,
+    mesclarSlotsReservados,
+    useGradeSemanal
+} from '../composables/useGradeCompartilhada';
+import BlocoArrastavel from './BlocoArrastavel.vue';
 import ModalReserva from './ModalReserva.vue';
 import ModalDetalhesReserva from './ModalDetalhesReserva.vue';
 
+interface MetadadoColuna {
+    corFundo: string | null;
+    corBorda: string;
+    fimDeSubbloco: boolean;
+    fimDeBlocoPrincipal: boolean;
+}
+
 const props = defineProps<{
     idsRecursosVisiveis: string[];
     usaInterceptador?: boolean;
     tituloPadrao?: string;
     ocultarTituloModal?: boolean;
     mensagemVazio?: string;
+    configuracaoBlocos?: any;
 }>();
 
 const api = inject('api-instance-agenda') as any;
-const emit = defineEmits(['before-save']);
+defineEmits(['before-save']);
+
+const { obterCoresBloco } = useCoresAgenda();
 
 const {
     dadosMatrix,
-    buscarSlotsMatrix,
-    buscarReservas,
-    agendaSelecionada,
-    dataSelecionada,
-    converterParaUtc
-} = useAgenda(api);
-
-// Indica se a matriz está buscando e processando dados na API.
-const carregando = ref(false);
-
-// Controla a abertura do modal de criação de reserva.
-const modalAberto = ref(false);
-
-// Armazena os dados do slot livre clicado para preencher o modal de criação.
-const dadosParaModal = ref({});
-
-// Controla a abertura do modal de detalhes de uma reserva existente.
-const modalDetalhesAberto = ref(false);
+    carregando,
+    modalAberto,
+    dadosParaModal,
+    modalDetalhesAberto,
+    reservaSelecionadaDetalhes,
+    obterBlocosDoDia,
+    dispararBuscaSemanal
+} = useGradeSemanal(api, () => props.configuracaoBlocos);
+
+const controladorArrastoHorizontal = useSelecaoArrasto({
+    aoClicarItemIndisponivel: (item) => {
+        if (item?.slot?.reservado_slot && item?.slot?.detalhes_reserva) {
+            reservaSelecionadaDetalhes.value = item.slot.detalhes_reserva;
+            modalDetalhesAberto.value = true;
+        }
+    },
+    aoFinalizarSelecao: ({ itensSelecionados }) => {
+        const primeiro = itensSelecionados[0];
+        const ultimo = itensSelecionados[itensSelecionados.length - 1];
+        if (!primeiro?.slot || !ultimo?.slot) return;
+
+        const inicio = extrairDataHoraLocal(primeiro.slot.data_inicio_slot);
+        const fim = extrairDataHoraLocal(ultimo.slot.data_fim_slot);
+
+        dadosParaModal.value = {
+            id_recurso: Number(primeiro.idRecurso),
+            titulo_reserva: '',
+            data_inicio: inicio.data,
+            hora_inicio: inicio.hora,
+            data_fim: fim.data,
+            hora_fim: fim.hora
+        };
+
+        modalAberto.value = true;
+    }
+});
 
-// Armazena o objeto da reserva clicada para exibição no modal de detalhes.
-const reservaSelecionadaDetalhes = ref<any>(null);
+// Constrói os blocos principais, subdivisões, cores e bordas por coluna para o cabeçalho e células de um dia específico.
+const construirCabecalhosDeBlocos = (slotsBase: { horaInicio: string; horaFim: string }[], siglaDia: string) => {
+    const totalSlots = slotsBase.length;
+    const listaBlocosConfig = obterBlocosDoDia(siglaDia);
+
+    const metadadosColunas: MetadadoColuna[] = slotsBase.map(() => ({
+        corFundo: null,
+        corBorda: 'var(--border-light)',
+        fimDeSubbloco: false,
+        fimDeBlocoPrincipal: false
+    }));
+
+    if (!listaBlocosConfig || listaBlocosConfig.length === 0) {
+        return {
+            temBlocos: false,
+            temSubblocos: false,
+            blocosPrincipais: [],
+            subblocos: [],
+            metadadosColunas
+        };
+    }
 
-// Recebe nada e devolve uma Promise.
-// É usada para buscar os slots da matriz e as reservas correspondentes à janela de 7 dias a partir da data selecionada.
-const dispararBuscaMatrix = async () => {
-    const idAgenda = agendaSelecionada.value;
-    if (!idAgenda) return;
+    const blocosPrincipais: any[] = [];
+    const subblocos: any[] = [];
+    let cursor = 0;
+    let algumSubblocoDefinido = false;
+
+    const adicionarSubbloco = (inicioIdx: number, tam: number, cor: string, corBorda: string, fimPrincipal: boolean, marcarSub: boolean) => {
+        const iniSub = slotsBase[inicioIdx];
+        const fimSub = slotsBase[inicioIdx + tam - 1];
+        subblocos.push({
+            colspan: tam,
+            cor,
+            corBorda,
+            fimDeBlocoPrincipal: fimPrincipal,
+            etiqueta: `${iniSub?.horaInicio ?? ''} - ${fimSub?.horaFim ?? ''}`
+        });
+        if (marcarSub) {
+            const metaFimSub = metadadosColunas[inicioIdx + tam - 1];
+            if (metaFimSub) metaFimSub.fimDeSubbloco = true;
+        }
+    };
 
-    carregando.value = true;
+    listaBlocosConfig.forEach((blocoCfg: any, idxBloco: number) => {
+        if (cursor >= totalSlots) return;
 
-    const valorData = dataSelecionada.value || new Date();
-    let dataInicio: Date;
+        const qtdSolicitada = Number(blocoCfg.quantidade) || 0;
+        const qtdReal = Math.min(qtdSolicitada, totalSlots - cursor);
+        if (qtdReal <= 0) return;
 
-    if (typeof valorData === 'string') {
-        const apenasData = String(valorData).substring(0, 10);
-        const [ano, mes, dia] = apenasData.split('-');
-        dataInicio = new Date(Number(ano), Number(mes) - 1, Number(dia));
-    } else {
-        dataInicio = new Date(valorData);
-    }
+        const { corFundo: corBloco, corBorda } = obterCoresBloco(idxBloco);
+        const slotPrimeiro = slotsBase[cursor];
+        const slotUltimo = slotsBase[cursor + qtdReal - 1];
 
-    const dataFim = new Date(dataInicio);
-    dataFim.setDate(dataInicio.getDate() + 6);
+        blocosPrincipais.push({
+            nome: blocoCfg.nome || `Bloco ${idxBloco + 1}`,
+            colspan: qtdReal,
+            cor: corBloco,
+            corBorda,
+            horaInicio: slotPrimeiro?.horaInicio ?? '',
+            horaFim: slotUltimo?.horaFim ?? ''
+        });
 
-    const formatar = (dt: Date) => {
-        const ano = dt.getFullYear();
-        const mes = String(dt.getMonth() + 1).padStart(2, '0');
-        const dia = String(dt.getDate()).padStart(2, '0');
-        return `${ano}-${mes}-${dia}`;
-    };
+        for (let i = 0; i < qtdReal; i++) {
+            const meta = metadadosColunas[cursor + i];
+            if (meta) {
+                meta.corFundo = corBloco;
+                meta.corBorda = corBorda;
+            }
+        }
+
+        const tamanhoSubFixo = Number(blocoCfg.subdivisao) || 0;
+        const listaSubCustom = Array.isArray(blocoCfg.subdivisoes) ? blocoCfg.subdivisoes : null;
+
+        if (listaSubCustom && listaSubCustom.length > 0) {
+            algumSubblocoDefinido = true;
+            let consumido = 0;
+            listaSubCustom.forEach((tamSub: number) => {
+                if (consumido >= qtdReal) return;
+                const tamEfetivo = Math.min(Number(tamSub) || 1, qtdReal - consumido);
+                const ehUltimo = (consumido + tamEfetivo) >= qtdReal;
+                adicionarSubbloco(cursor + consumido, tamEfetivo, corBloco, corBorda, ehUltimo, true);
+                consumido += tamEfetivo;
+            });
+            if (consumido < qtdReal) {
+                adicionarSubbloco(cursor + consumido, qtdReal - consumido, corBloco, corBorda, true, true);
+            }
+        } else if (tamanhoSubFixo > 0) {
+            algumSubblocoDefinido = true;
+            let consumido = 0;
+            while (consumido < qtdReal) {
+                const tamEfetivo = Math.min(tamanhoSubFixo, qtdReal - consumido);
+                const ehUltimo = (consumido + tamEfetivo) >= qtdReal;
+                adicionarSubbloco(cursor + consumido, tamEfetivo, corBloco, corBorda, ehUltimo, true);
+                consumido += tamEfetivo;
+            }
+        } else {
+            adicionarSubbloco(cursor, qtdReal, corBloco, corBorda, true, false);
+        }
+
+        const metaFimPrincipal = metadadosColunas[cursor + qtdReal - 1];
+        if (metaFimPrincipal) metaFimPrincipal.fimDeBlocoPrincipal = true;
+
+        cursor += qtdReal;
+    });
 
-    const strInicio = formatar(dataInicio);
-    const strFim = formatar(dataFim);
+    if (cursor < totalSlots) {
+        const restante = totalSlots - cursor;
+        const { corFundo: corRestante, corBorda: corBordaRestante } = obterCoresBloco(blocosPrincipais.length);
+        const slotPrimeiro = slotsBase[cursor];
+        const slotUltimo = slotsBase[totalSlots - 1];
+
+        blocosPrincipais.push({
+            nome: 'Outros',
+            colspan: restante,
+            cor: corRestante,
+            corBorda: corBordaRestante,
+            horaInicio: slotPrimeiro?.horaInicio ?? '',
+            horaFim: slotUltimo?.horaFim ?? ''
+        });
 
-    const inicioUtc = encodeURIComponent(converterParaUtc(strInicio, '00:00'));
-    const fimUtc = encodeURIComponent(converterParaUtc(strFim, '23:59'));
+        for (let i = 0; i < restante; i++) {
+            const meta = metadadosColunas[cursor + i];
+            if (meta) {
+                meta.corFundo = corRestante;
+                meta.corBorda = corBordaRestante;
+            }
+        }
 
-    await buscarSlotsMatrix(idAgenda, inicioUtc, fimUtc);
-    await buscarReservas(`${strInicio}T00:00:00`, `${strFim}T23:59:59`);
-    carregando.value = false;
-};
+        adicionarSubbloco(cursor, restante, corRestante, corBordaRestante, true, false);
 
-onMounted(() => {
-    dispararBuscaMatrix();
-});
-
-watch([dataSelecionada, agendaSelecionada], () => {
-    dispararBuscaMatrix();
-});
+        const metaUltimo = metadadosColunas[totalSlots - 1];
+        if (metaUltimo) metaUltimo.fimDeBlocoPrincipal = true;
+    }
 
-// Recebe uma string ISO e devolve o total de minutos correspondente ao horário local.
-// É usada para posicionar e medir a duração dos slots na grade de horários.
-const extrairMinutos = (isoStr: string) => {
-    const d = new Date(isoStr);
-    return d.getHours() * 60 + d.getMinutes();
+    return {
+        temBlocos: blocosPrincipais.length > 0,
+        temSubblocos: algumSubblocoDefinido,
+        blocosPrincipais,
+        subblocos,
+        metadadosColunas
+    };
 };
 
-// Monta a lista ordenada de horários (em minutos) para o cabeçalho das colunas da tabela.
-const horariosGlobaisEmMinutos = computed(() => {
+// Gera a lista ordenada de dias operacionais com cabeçalhos e células mescladas por colspan.
+const diasProcessados = computed(() => {
     if (!dadosMatrix.value?.datas_matriz) return [];
-    const setMinutos = new Set<number>();
-
-    dadosMatrix.value.datas_matriz.forEach((dia: any) => {
-        dia.recursos_slot.forEach((rec: any) => {
-            rec.horarios_slot.forEach((slot: any) => {
-                setMinutos.add(extrairMinutos(slot.data_inicio_slot));
-            });
-        });
-    });
-
-    return Array.from(setMinutos).sort((a, b) => a - b);
-});
 
-// Processa os dias, filtra os recursos com base na prop idsRecursosVisiveis e calcula o colspan de cada slot.
-const matrizProcessada = computed(() => {
-    if (!dadosMatrix.value?.datas_matriz || horariosGlobaisEmMinutos.value.length === 0) return [];
+    const resultado: any[] = [];
 
-    const mapaHorarios = horariosGlobaisEmMinutos.value;
+    dadosMatrix.value.datas_matriz.forEach((dia: any) => {
+        if (dia.dia_operacional_slot === false) return;
 
-    return dadosMatrix.value.datas_matriz.map((dia: any) => {
-        const recursosFiltrados = dia.recursos_slot.filter((res: any) =>
+        const recursosFiltrados = (dia.recursos_slot || []).filter((res: any) =>
             props.idsRecursosVisiveis.includes(String(res.id_recurso))
         );
+        if (recursosFiltrados.length === 0) return;
+
+        const slotsValidosBase = (recursosFiltrados[0].horarios_slot || []).filter((s: any) => !s.bloqueado_slot);
+        if (slotsValidosBase.length === 0) return;
+
+        const definicaoColunas = slotsValidosBase.map((s: any) => ({
+            horaInicio: extrairHoraFormatada(s.data_inicio_slot),
+            horaFim: extrairHoraFormatada(s.data_fim_slot)
+        }));
+
+        const siglaDia = SIGLAS_DIAS_JS[criarDataLocal(dia.data_slot).getDay()] || 'SEG';
+        const infoBlocos = construirCabecalhosDeBlocos(definicaoColunas, siglaDia);
+
+        const recursosProcessados = recursosFiltrados.map((rec: any) => {
+            const slotsBrutos = (rec.horarios_slot || []).filter((s: any) => !s.bloqueado_slot);
+            return {
+                id_recurso: rec.id_recurso,
+                nome_recurso: rec.nome_recurso,
+                slotsBrutos,
+                horarios_slot: mesclarSlotsReservados(slotsBrutos, 'colspan')
+            };
+        });
 
-        if (recursosFiltrados.length === 0) return null;
-
-        const recursosComColspan = recursosFiltrados.map((rec: any) => {
-            const slotsCalculados = rec.horarios_slot.map((slot: any) => {
-                const inicioMin = extrairMinutos(slot.data_inicio_slot);
-                let fimMin = extrairMinutos(slot.data_fim_slot);
-
-                if (fimMin === 0 && new Date(slot.data_fim_slot) > new Date(slot.data_inicio_slot)) {
-                    fimMin = 24 * 60;
-                }
-
-                let tamanhoColspan = 0;
-                for (let h = 0; h < mapaHorarios.length; h++) {
-                    if ((mapaHorarios[h] ?? 0) >= inicioMin && (mapaHorarios[h] ?? 0) < fimMin) {
-                        tamanhoColspan++;
-                    }
-                }
-                return { ...slot, colspan: tamanhoColspan > 0 ? tamanhoColspan : 1 };
-            });
-            return { ...rec, horarios_slot: slotsCalculados };
+        resultado.push({
+            data_slot: dia.data_slot,
+            colunasHorarios: definicaoColunas,
+            ...infoBlocos,
+            recursos_slot: recursosProcessados
         });
+    });
 
-        return { ...dia, recursos_slot: recursosComColspan };
-    }).filter((dia: any) => dia !== null);
+    return resultado;
 });
 
-// Recebe minutos totais e devolve a string formatada HH:MM.
-// É usada para exibir os horários no cabeçalho da tabela.
-const formatarHoraDeMinutos = (minutosTotais: number) => {
-    const horas = Math.floor(minutosTotais / 60);
-    const minutos = minutosTotais % 60;
-    return `${String(horas).padStart(2, '0')}:${String(minutos).padStart(2, '0')}`;
-};
-
-// Recebe a string YYYY-MM-DD do dia e devolve o texto por extenso em português.
-// É usada nas barras divisórias de cada dia na tabela.
 const formatarData = (isoData: string) => {
-    const apenasData = String(isoData).substring(0, 10);
-    const [ano, mes, dia] = apenasData.split('-');
-    const data = new Date(Number(ano), Number(mes) - 1, Number(dia));
-    return data.toLocaleDateString('pt-BR', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' });
-};
-
-// Recebe o ID do recurso e o objeto slot clicado e não devolve retorno.
-// Se estiver reservado, abre o modal de detalhes; se estiver livre e reservável, abre o modal de criação.
-const aoClicarSlotMatrix = (idRecurso: number, slot: any) => {
-    if (slot.reservado_slot && slot.detalhes_reserva) {
-        reservaSelecionadaDetalhes.value = slot.detalhes_reserva;
-        modalDetalhesAberto.value = true;
-        return;
-    }
-
-    if (!slot.reservavel_slot) return;
-
-    const extrair = (isoString: string) => {
-        const d = new Date(isoString);
-        const ano = d.getFullYear();
-        const mes = String(d.getMonth() + 1).padStart(2, '0');
-        const dia = String(d.getDate()).padStart(2, '0');
-        const horas = String(d.getHours()).padStart(2, '0');
-        const min = String(d.getMinutes()).padStart(2, '0');
-        return { data: `${ano}-${mes}-${dia}`, hora: `${horas}:${min}` };
-    };
-
-    const inicio = extrair(slot.data_inicio_slot);
-    const fim = extrair(slot.data_fim_slot);
-
-    dadosParaModal.value = {
-        id_recurso: idRecurso,
-        titulo_reserva: '',
-        data_inicio: inicio.data,
-        hora_inicio: inicio.hora,
-        data_fim: fim.data,
-        hora_fim: fim.hora
-    };
-
-    modalAberto.value = true;
+    return criarDataLocal(isoData).toLocaleDateString('pt-BR', {
+        weekday: 'long',
+        day: '2-digit',
+        month: 'long',
+        year: 'numeric'
+    });
 };
 </script>
 
@@ -216,11 +289,11 @@ const aoClicarSlotMatrix = (idRecurso: number, slot: any) => {
       :dados-iniciais="dadosParaModal"
       :usa-interceptador="props.usaInterceptador"
       :ocultar-titulo-modal="props.ocultarTituloModal"
-      @before-save="$emit('before-save',$event)"
-      @salvo="dispararBuscaMatrix"
+      @before-save="$emit('before-save', $event)"
+      @salvo="dispararBuscaSemanal"
     >
-      <template #campos-extras>
-        <slot name="campos-extras"></slot>
+      <template v-for="(_, nomeSlot) in $slots" :key="nomeSlot" #[nomeSlot]="slotProps">
+        <slot v-if="nomeSlot !== 'topo'" :name="nomeSlot" v-bind="slotProps ?? {}"></slot>
       </template>
     </ModalReserva>
 
@@ -228,7 +301,7 @@ const aoClicarSlotMatrix = (idRecurso: number, slot: any) => {
       v-model="modalDetalhesAberto"
       :reserva="reservaSelecionadaDetalhes"
       :titulo-padrao="props.tituloPadrao"
-      @excluido="dispararBuscaMatrix"
+      @excluido="dispararBuscaSemanal"
     />
 
     <div class="aviso-vazio" v-if="carregando">
@@ -239,52 +312,125 @@ const aoClicarSlotMatrix = (idRecurso: number, slot: any) => {
     <div class="matriz-conteudo" v-else-if="dadosMatrix.datas_matriz">
       <slot name="topo"></slot>
 
-      <div class="tabela-wrapper" v-if="matrizProcessada.length > 0">
-        <table class="tabela-premium">
-          <thead>
-            <tr>
-              <th class="coluna-fixa cabecalho-canto">Nome</th>
-              <th v-for="minuto in horariosGlobaisEmMinutos" :key="minuto">
-                {{ formatarHoraDeMinutos(minuto) }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <template v-for="dia in matrizProcessada" :key="dia.data_slot">
+      <div class="tabelas-scroll-container" v-if="diasProcessados.length > 0">
+        <div
+          class="bloco-dia-tabela"
+          v-for="dia in diasProcessados"
+          :key="dia.data_slot"
+        >
+          <table class="tabela-premium">
+            <thead>
               <tr class="linha-data">
-                <td :colspan="horariosGlobaisEmMinutos.length + 1">
+                <th :colspan="dia.colunasHorarios.length + 1" class="th-barra-dia">
                   <div class="barra-data-full">
                     <span class="texto-data">{{ formatarData(dia.data_slot) }}</span>
                   </div>
-                </td>
+                </th>
               </tr>
 
+              <tr v-if="dia.temBlocos" class="linha-blocos-principais">
+                <th
+                  class="coluna-fixa cabecalho-canto"
+                  :rowspan="dia.temSubblocos ? 3 : 2"
+                >
+                  Nome
+                </th>
+                <th
+                  v-for="(bloco, idxB) in dia.blocosPrincipais"
+                  :key="idxB"
+                  :colspan="bloco.colspan"
+                  :style="{
+                    backgroundColor: bloco.cor,
+                    borderColor: bloco.corBorda
+                  }"
+                  class="th-bloco-principal borda-col-bloco-principal"
+                >
+                  <div class="titulo-bloco-principal">{{ bloco.nome }}</div>
+                  <div class="subtitulo-bloco-principal">{{ bloco.horaInicio }} - {{ bloco.horaFim }}</div>
+                </th>
+              </tr>
+
+              <tr v-if="dia.temBlocos && dia.temSubblocos" class="linha-subblocos">
+                <th
+                  v-for="(sub, idxS) in dia.subblocos"
+                  :key="idxS"
+                  :colspan="sub.colspan"
+                  :style="{
+                    backgroundColor: sub.cor,
+                    borderColor: sub.corBorda
+                  }"
+                  class="th-subbloco"
+                  :class="{
+                    'borda-col-bloco-principal': sub.fimDeBlocoPrincipal,
+                    'borda-col-subbloco': !sub.fimDeBlocoPrincipal
+                  }"
+                >
+                  {{ sub.etiqueta }}
+                </th>
+              </tr>
+
+              <tr class="linha-horarios-individuais">
+                <th v-if="!dia.temBlocos" class="coluna-fixa cabecalho-canto">Nome</th>
+                <th
+                  v-for="(col, idxH) in dia.colunasHorarios"
+                  :key="idxH"
+                  :style="{
+                    backgroundColor: dia.metadadosColunas[idxH]?.corFundo || 'var(--bg-primary)',
+                    borderColor: dia.metadadosColunas[idxH]?.corBorda || 'var(--border-light)'
+                  }"
+                  class="th-horario-individual"
+                  :class="{
+                    'borda-col-subbloco': dia.metadadosColunas[idxH]?.fimDeSubbloco,
+                    'borda-col-bloco-principal': dia.metadadosColunas[idxH]?.fimDeBlocoPrincipal
+                  }"
+                >
+                  <div class="empilhado-horarios">
+                    <span class="hora-topo">{{ col.horaInicio }}</span>
+                    <span class="hora-base">{{ col.horaFim }}</span>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+
+            <tbody>
               <tr v-for="recurso in dia.recursos_slot" :key="recurso.id_recurso">
                 <td class="coluna-fixa nome-recurso">{{ recurso.nome_recurso }}</td>
-                <td
-                  v-for="slot in recurso.horarios_slot"
-                  :key="slot.data_inicio_slot"
-                  :colspan="slot.colspan"
-                >
-                  <div
-                    class="bloco-tempo"
+                <template v-for="slot in recurso.horarios_slot" :key="slot.data_inicio_slot">
+                  <BlocoArrastavel
+                    v-if="!slot.ocultaPorColspan"
+                    tag="td"
+                    :grupo="`${dia.data_slot}__${recurso.id_recurso}`"
+                    :indice="slot.indiceColuna"
+                    :item="{ slot, idRecurso: recurso.id_recurso, dataSlot: dia.data_slot }"
+                    :disponivel="Boolean(slot.reservavel_slot && !slot.reservado_slot)"
+                    :controlador="controladorArrastoHorizontal"
+                    :colspan="slot.colspan || 1"
+                    class="td-celula-slot"
                     :class="{
-                      'reservado': slot.reservado_slot,
-                      'bloqueado': !slot.reservavel_slot && !slot.reservado_slot,
-                      'livre': slot.reservavel_slot && !slot.reservado_slot,
-                      'api-forjada': slot.detalhes_reserva?.origem_criacao_reserva === 'API'
+                      'slot-ocupado': slot.reservado_slot,
+                      'slot-api': slot.detalhes_reserva?.origem_criacao_reserva === 'API',
+                      'slot-selecionado-arrasto': controladorArrastoHorizontal.verificarSelecionado(`${dia.data_slot}__${recurso.id_recurso}`, slot.indiceColuna),
+                      'borda-col-subbloco': dia.metadadosColunas[slot.indiceColuna + (slot.colspan || 1) - 1]?.fimDeSubbloco,
+                      'borda-col-bloco-principal': dia.metadadosColunas[slot.indiceColuna + (slot.colspan || 1) - 1]?.fimDeBlocoPrincipal
+                    }"
+                    :style="{
+                      backgroundColor: controladorArrastoHorizontal.verificarSelecionado(`${dia.data_slot}__${recurso.id_recurso}`, slot.indiceColuna)
+                        ? 'var(--color-brand-light)'
+                        : (dia.metadadosColunas[slot.indiceColuna]?.corFundo || 'var(--bg-primary)'),
+                      borderColor: dia.metadadosColunas[slot.indiceColuna + (slot.colspan || 1) - 1]?.corBorda || 'var(--border-light)'
                     }"
-                    @click="aoClicarSlotMatrix(recurso.id_recurso, slot)"
                   >
-                    <span class="etiqueta-reserva" v-if="slot.reservado_slot">
-                      {{ slot.detalhes_reserva?.titulo_reserva?.trim() || props.tituloPadrao }}
-                    </span>
-                  </div>
-                </td>
+                    <div class="conteudo-slot-matrix" v-if="slot.reservado_slot">
+                      <span class="etiqueta-reserva">
+                        {{ slot.detalhes_reserva?.titulo_reserva?.trim() || props.tituloPadrao || 'Reservado' }}
+                      </span>
+                    </div>
+                  </BlocoArrastavel>
+                </template>
               </tr>
-            </template>
-          </tbody>
-        </table>
+            </tbody>
+          </table>
+        </div>
       </div>
 
       <div class="aviso-vazio" v-else>
@@ -295,79 +441,61 @@ const aoClicarSlotMatrix = (idRecurso: number, slot: any) => {
 </template>
 
 <style scoped>
-.matriz-container { width: 100%; height: 100%; background: var(--bg-primary); display: flex; flex-direction: column; }
+.matriz-container { width: 100%; height: 100%; background: var(--bg-primary); display: flex; flex-direction: column; user-select: none; }
 .matriz-conteudo { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
 .aviso-vazio { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; color: var(--text-secondary); font-weight: 500; font-size: 1rem; gap: 12px; }
 .spinner { width: 32px; height: 32px; border: 3px solid var(--border-light); border-top-color: var(--color-brand); border-radius: 50%; animation: spin 1s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
-.tabela-wrapper { 
-    flex-grow: 1; 
-    overflow: auto; 
-    background: var(--bg-primary); 
-}
-.tabela-premium { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; text-align: center; table-layout: fixed; }
-.tabela-premium th, .tabela-premium td { padding: 3px; min-width: 65px; height: 48px; border-bottom: 1px solid var(--border-light); border-right: 1px solid var(--border-light); }
-.tabela-premium th:first-child, .tabela-premium td:first-child { border-left: 1px solid var(--border-light); }
-.tabela-premium thead th { border-top: 1px solid var(--border-light); background: var(--bg-primary); position: sticky; top: 0; z-index: 3; font-weight: 700; color: var(--text-primary); box-shadow: var(--shadow-sm); }
-.coluna-fixa { width: 200px; text-align: left; background: var(--bg-primary); position: sticky; left: 0; z-index: 1; }
-.cabecalho-canto { z-index: 4 !important; padding-left: 24px !important; }
 
-/* Célula do dia mantendo a colagem nas laterais (sem aquele gap) */
-.tabela-premium td {
-    background: var(--bg-primary);
+.tabelas-scroll-container { flex-grow: 1; overflow: auto; background: var(--bg-primary); display: flex; flex-direction: column; gap: 18px; padding-bottom: 24px; }
+.bloco-dia-tabela { width: 100%; }
+.tabela-premium { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; text-align: center; }
+.tabela-premium th, .tabela-premium td { padding: 4px 6px; min-width: 68px; height: 44px; border-bottom: 1px solid var(--border-light); border-right: 1px solid var(--border-light); box-sizing: border-box; }
+.tabela-premium th:first-child, .tabela-premium td:first-child { border-left: 1px solid var(--border-light); }
+.tabela-premium thead th { background: var(--bg-primary); font-weight: 700; color: var(--text-primary); }
+
+.coluna-fixa { width: 200px; min-width: 200px; max-width: 200px; text-align: left; background: var(--bg-primary); position: sticky; left: 0; z-index: 2; border-right: 2px solid var(--border-light) !important; }
+.cabecalho-canto { z-index: 3 !important; padding-left: 24px !important; background: var(--bg-primary) !important; }
+.th-barra-dia { padding: 0 !important; height: auto !important; border-top: 1px solid #005291 !important; border-bottom: 1px solid #005291 !important; }
+.th-bloco-principal { color: #111827 !important; padding: 6px 4px !important; height: 36px !important; border-bottom-width: 1.5px !important; border-bottom-style: solid !important; }
+.titulo-bloco-principal { font-size: 13px; font-weight: 800; letter-spacing: 0.3px; line-height: 1.2; text-transform: uppercase; }
+.subtitulo-bloco-principal { font-size: 10.5px; font-weight: 700; opacity: 0.9; }
+.th-subbloco { color: #111827 !important; font-size: 11px !important; font-weight: 700 !important; height: 26px !important; padding: 2px 4px !important; border-bottom-width: 1.5px !important; border-bottom-style: solid !important; }
+.th-horario-individual { height: 42px !important; padding: 4px 2px !important; color: #111827 !important; border-bottom-width: 2px !important; border-bottom-style: solid !important; }
+.empilhado-horarios { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; gap: 2px; }
+.hora-topo, .hora-base { font-size: 11.5px; font-weight: 700; color: #111827; }
+
+.td-celula-slot { cursor: pointer; transition: filter 0.12s ease, box-shadow 0.12s ease; vertical-align: middle; color: #111827 !important; }
+.td-celula-slot:hover { filter: brightness(0.93); box-shadow: inset 0 0 0 1.5px var(--color-brand); }
+.slot-selecionado-arrasto { box-shadow: inset 0 0 0 2px var(--color-brand) !important; }
+.slot-ocupado {
+    font-weight: 700;
+    background-color: #e5e7eb !important;
+    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06) 10px, transparent 10px, transparent 20px) !important;
 }
 
-
-.barra-data-full { 
-    display: flex; 
-    align-items: center; 
-    justify-content: center;
-    width: 100%; 
-    /* mistura 30% da sua cor com 70% de branco */
-    background: color-mix(in srgb, var(--color-brand) 30%, white) !important;
-    color: var(--text-primary); 
-    padding: 10px 0; 
-    border-radius: 0; 
-    box-shadow: none; 
-    box-sizing: border-box; 
-    border: none;
-    text-align: center;
-}
-.texto-data { 
-    
-    font-weight: 700; font-size: 13.5px; text-transform: capitalize; letter-spacing: 0.5px; }
-.nome-recurso { 
-    font-weight: 600; 
-    color: var(--text-primary); 
-    background: var(--bg-primary) !important; 
-    padding-left: 24px !important; 
-    box-shadow: 4px 0 8px rgba(0,0,0,0.02); 
-}
-.linha-data td { 
-    background: var(--bg-secondary) !important; 
-    border: none !important; 
-    border-top: 1px solid var(--border-light) !important;
-    border-bottom: 1px solid var(--border-light) !important;
-    padding: 0 !important; 
-}
-.bloco-tempo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 6px; transition: all 0.2s ease; box-sizing: border-box; padding: 4px; }
-.bloqueado { background-color: var(--border-light); background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0, 0, 0, 0.08) 8px, rgba(0, 0, 0, 0.08) 16px); cursor: not-allowed; border: 1px solid var(--border-editor); }
-.livre { background-color: transparent; cursor: pointer; }
-.livre:hover { background-color: var(--color-brand-light); box-shadow: inset 0 0 0 1px var(--color-brand); }
-.reservado { background: var(--color-brand); color: var(--text-inverse); border: 1px solid var(--color-brand); cursor: pointer; }
-.reservado:hover { filter: brightness(1.08); }
-.api-forjada { background: var(--color-success); color: var(--text-inverse); border: 1px solid var(--color-success); cursor: pointer; }
-.etiqueta-reserva { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; font-weight: 600; }
+.conteudo-slot-matrix { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
+.etiqueta-reserva { font-size: 12px; font-weight: 700; color: #111827; line-height: 1.25; word-break: break-word; }
+.borda-col-subbloco { border-right-width: 2px !important; }
+.borda-col-bloco-principal { border-right-width: 2.5px !important; }
+.barra-data-full { display: flex; align-items: center; justify-content: center; width: 100%; background-color: #0066B3 !important; color: #FFFFFF !important; padding: 9px 0; box-sizing: border-box; text-align: center; }
+.texto-data { font-weight: 800; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.5px; }
+.nome-recurso { font-weight: 700; color: var(--text-primary); background: var(--bg-primary) !important; padding-left: 20px !important; padding-right: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 4px 0 8px rgba(0,0,0,0.03); }
 </style>
 
 <style>
-
-[data-bs-theme="dark"] .matriz-container .barra-data-full {
-    background: color-mix(in srgb, var(--color-brand) 70%, black) !important;
-    color:white;
-    font-weight: bold;
-    text-shadow: 0 0 2px rgba(0,0,0,0.3);
-    
+[data-bs-theme="dark"] .th-bloco-principal,
+[data-bs-theme="dark"] .th-subbloco,
+[data-bs-theme="dark"] .th-horario-individual,
+[data-bs-theme="dark"] .hora-topo,
+[data-bs-theme="dark"] .hora-base,
+[data-bs-theme="dark"] .td-celula-slot,
+[data-bs-theme="dark"] .etiqueta-reserva {
+    color: var(--text-primary) !important;
 }
 
+[data-bs-theme="dark"] .slot-ocupado {
+    background-color: #374151 !important;
+    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 10px, transparent 10px, transparent 20px) !important;
+}
 </style>