src/components/charts/CardIconChart.vue

@@ -1,77 +0,0 @@
-<template>
-  <q-card
-    flat
-    class="full-height q-pa-lg"
-    :style="{
-      minHeight: $q.screen.lt.sm ? '400px' : '600px',
-      minWidth: $q.screen.lt.sm ? '200px' : '300px',
-    }"
-  >
-    <div class="column no-wrap full-width">
-      <div class="flex justify-between items-center no-wrap">
-        <span class="text-h5">{{ title }}</span>
-        <div class="flex no-wrap flex-center">
-          <div class="round background">
-            <q-icon class="q-pa-sm" :name="icon" size="24px" :color="color" />
-          </div>
-          <!-- <q-icon
-            v-if="downloadImage !== null"
-            name="mdi-dots-vertical"
-            size="sm"
-            style="width: 12px;margin-right: -12px"
-            @click="downloadImage"
-          /> -->
-        </div>
-      </div>
-    </div>
-    <div class="flex flex-grow flex-center" style="height: calc(100% - 30px)">
-      <template v-if="hasChartSlot">
-        <slot name="chart"></slot>
-      </template>
-      <template v-else>
-        <div v-if="!loading" class="q-my-md row justify-center full-width">
-          <div class="q-pa-md body2">
-            {{ $t("http.errors.no_records_found") }}
-          </div>
-        </div>
-      </template>
-    </div>
-  </q-card>
-</template>
-
-<script setup>
-import { useSlots } from "vue";
-
-const hasChartSlot = useSlots("chart");
-
-const { color, title, icon } = defineProps({
-  color: {
-    type: String,
-    default: "primary",
-  },
-  title: {
-    type: String,
-    default: "Usuários",
-  },
-  icon: {
-    type: String,
-    default: "mdi-account",
-  },
-});
-</script>
-<style lang="scss" scoped>
-@use "sass:map";
-@use "src/css/quasar.variables.scss";
-
-body.body--light {
-  .background {
-    background: rgba(map.get($colors, "primary"), 0.2) !important;
-  }
-}
-
-// body.body--dark {
-//   .background {
-//     background: rgba(map.get($colors-dark, "primary"), 0.2) !important;
-//   }
-// }
-</style>

src/components/charts/CardIconMiniChart.vue

@@ -1,81 +0,0 @@
-<template>
-  <q-card flat class="q-pa-lg" style="max-height: 184px; min-width: 305px;">
-    <div class="column no-wrap full-width">
-      <div class="flex justify-between items-center no-wrap">
-        <span class="text-h5">{{ title }}</span>
-        <div class="round background">
-          <q-icon class="q-pa-sm" :name="icon" size="24px" :color="color" />
-        </div>
-      </div>
-      <div class="flex no-wrap full-width justify-between q-pa-sm">
-        <div class="column flex-center">
-          <span :class="numberCard.length >= 7 ? 'text-h4' : 'text-h3'">
-            {{ numberCard }}
-          </span>
-          <div
-            v-if="numberPorcent !== null"
-            class="flex no-wrap text-subtitle2"
-            :class="numberPorcent > 0 ? 'text-positive' : 'text-negative'"
-          >
-            <q-icon
-              :name="numberPorcent > 0 ? 'mdi-arrow-up' : 'mdi-arrow-down'"
-              size="18px"
-              class="q-mr-xs"
-            />
-            {{ numberPorcent + "%" }}
-          </div>
-        </div>
-        <div class="flex justify-end" style="max-width: 120px; height: 80px">
-          <slot name="chart" :color="color" :chart-data="chartData" />
-        </div>
-      </div>
-    </div>
-  </q-card>
-</template>
-
-<script setup>
-const { color, title, icon, chartData, numberCard, numberPorcent } =
-  defineProps({
-    color: {
-      type: String,
-      default: "primary",
-    },
-    title: {
-      type: String,
-      default: "Usuários",
-    },
-    icon: {
-      type: String,
-      default: "mdi-account",
-    },
-    chartData: {
-      type: Array,
-      default: () =>
-        Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
-    },
-    numberCard: {
-      type: String,
-      default: () => Math.floor(Math.random() * 100),
-    },
-    numberPorcent: {
-      type: Number,
-      default: () => Math.ceil(Math.random() * 200 - 100),
-    },
-  });
-</script>
-<style lang="scss" scoped>
-@use "sass:map";
-@use "src/css/quasar.variables.scss";
-
-body.body--light {
-  .background {
-    background: rgba(map.get($colors, "primary"), 0.2) !important;
-  }
-}
-
-// body.body--dark {
-//   .background {
-//     background: rgba(map.get($colors-dark, "primary"), 0.2) !important;
-//   }
-// }
-</style>

src/components/charts/custom/NPSChart.vue

@@ -1,285 +0,0 @@
-<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-<template>
-  <q-card v-bind="$attrs" class="q-px-md">
-    <q-card-section class="row justify-between">
-      <div>
-        <div class="text-h6">{{ props.title }}</div>
-        <span>{{ props.subTitle }}</span>
-      </div>
-      <q-btn
-        icon="mdi-tray-arrow-down"
-        dense
-        flat
-        class="q-my-auto"
-        @click="downloadImage"
-      />
-    </q-card-section>
-    <q-separator dark inset />
-    <div class="graph-container">
-      <div class="column">
-        <div class="col-4 row">
-          <div
-            class="bg-nps-green"
-            style="width: 1rem; min-height: max-content"
-          />
-          <div class="column q-pa-md">
-            <span class="text-bold text-h6 text-nps-green">
-              {{ $t("charts.nps.promotion_zone") }}
-            </span>
-            <span>{{ $t("charts.nps.promotion_zone_range") }}</span>
-          </div>
-        </div>
-        <div class="col-4 row">
-          <div
-            class="bg-nps-green-light"
-            style="width: 1rem; min-height: max-content"
-          />
-          <div class="column q-pa-md">
-            <span class="text-bold text-h6 text-nps-green-light">
-              {{ $t("charts.nps.quality_zone") }}
-            </span>
-            <span>{{ $t("charts.nps.quality_zone_range") }}</span>
-          </div>
-        </div>
-        <div class="col-4 row">
-          <div
-            class="bg-nps-yellow"
-            style="width: 1rem; min-height: max-content"
-          />
-          <div class="column q-pa-md">
-            <span class="text-bold text-h6 text-nps-yellow">
-              {{ $t("charts.nps.refinement_zone") }}
-            </span>
-            <span>{{ $t("charts.nps.refinement_zone_range") }}</span>
-          </div>
-        </div>
-        <div class="col-4 row">
-          <div
-            class="bg-nps-red"
-            style="width: 1rem; min-height: max-content"
-          />
-          <div class="column q-pa-md">
-            <span class="text-bold text-h6 text-nps-red">
-              {{ $t("charts.nps.critical_zone") }}</span
-            >
-            <span>{{ $t("charts.nps.critical_zone_range") }}</span>
-          </div>
-        </div>
-      </div>
-
-      <div style="display: flex; flex-direction: column; align-items: center">
-        <div style="max-height: 500px">
-          <Doughnut
-            ref="chart_ref"
-            :options="chartOptions"
-            :data="chartData"
-            :plugins="[ChartDataLabels, gaugeNeedle]"
-          />
-        </div>
-        <span>{{ titulo }}</span>
-      </div>
-
-      <div class="column q-col-gutter-md">
-        <div class="column">
-          <span>
-            {{ $t("charts.nps.promoters") }} -
-            {{ ((data.promotores / data.total) * 100).toFixed(0) }} %
-          </span>
-          <q-linear-progress
-            :value="data.promotores / data.total"
-            rounded
-            size="20px"
-            color="nps-green"
-            style="min-width: 200px"
-          />
-        </div>
-        <div class="column">
-          <span
-            >{{ $t("charts.nps.passives") }} -
-            {{ ((data.neutros / data.total) * 100).toFixed(0) }} %</span
-          >
-          <q-linear-progress
-            :value="data.neutros / data.total"
-            rounded
-            size="20px"
-            color="nps-yellow"
-            style="min-width: 200px"
-          />
-        </div>
-        <div class="column">
-          <span
-            >{{ $t("charts.nps.detractors") }} -
-            {{ ((data.detratores / data.total) * 100).toFixed(0) }} %</span
-          >
-          <q-linear-progress
-            :value="data.detratores / data.total"
-            rounded
-            size="20px"
-            color="nps-red"
-            style="min-width: 200px"
-          />
-        </div>
-      </div>
-    </div>
-  </q-card>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
-import { Doughnut } from "vue-chartjs";
-import ChartDataLabels from "chartjs-plugin-datalabels";
-import { base64ToJPEG } from "src/helpers/convertBase64Image";
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  value: {
-    type: Number,
-    required: true,
-  },
-  subTitle: {
-    type: String,
-    default: null,
-  },
-  data: {
-    type: Object,
-    required: true,
-  },
-});
-
-const chart_ref = ref(null);
-const titulo = ref(`Valor: ${props.data?.nps}`);
-
-const gaugeNeedle = {
-  id: "gaugeNeedle",
-  afterDatasetsDraw(chart) {
-    const { ctx, data } = chart;
-    ctx.save();
-
-    const needleValue = data.datasets[0].needleValue;
-    const xCenter = chart.getDatasetMeta(0).data[0].x;
-    const yCenter = chart.getDatasetMeta(0).data[0].y;
-    const outerRadius = chart.getDatasetMeta(0).data[0].outerRadius - 40;
-    const angle = Math.PI;
-
-    let circumference =
-      (chart.getDatasetMeta(0).data[0].circumference /
-        Math.PI /
-        data.datasets[0].data[0]) *
-      needleValue;
-
-    const needleAngleValue = circumference + 1.5;
-
-    ctx.translate(xCenter, yCenter);
-    ctx.rotate(angle * needleAngleValue);
-
-    // Draw the needle
-    ctx.beginPath();
-    ctx.strokeStyle = "grey";
-    ctx.fillStyle = "grey";
-    ctx.moveTo(0 - 4, 0);
-    ctx.lineTo(0, -outerRadius);
-    ctx.lineTo(0 + 4, 0);
-    ctx.stroke();
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(0, 0, 8, 0, 2 * Math.PI);
-    ctx.fillStyle = "grey";
-    ctx.fill();
-
-    ctx.restore();
-  },
-};
-
-ChartJS.register(ArcElement, Tooltip, Legend);
-
-const chartData = ref({
-  datasets: [
-    {
-      backgroundColor: ["#d43333", "#ffbe00", "#40c56c", "#0d733e"],
-      data: [100, 50, 25, 25],
-      needleValue: Number(props.data?.nps) + 100,
-      borderColor: "transparent",
-    },
-  ],
-});
-
-const chartOptions = ref({
-  rotation: 270,
-  circumference: 180,
-  cutout: "50%",
-  plugins: {
-    tooltip: {
-      enabled: false,
-    },
-    datalabels: {
-      color: "white",
-      font: {
-        size: 14,
-        weight: "bold",
-      },
-      formatter: (value, ctx) => {
-        let valor = "";
-        switch (ctx.dataIndex) {
-          case 0:
-            valor = "-100 a 0";
-            break;
-          case 1:
-            valor = "0 a 50";
-            break;
-          case 2:
-            valor = "50 a 75";
-            break;
-          case 3:
-            valor = "75 a 100";
-            break;
-          default:
-            valor = "";
-            break;
-        }
-        return valor;
-      },
-    },
-  },
-});
-
-addEventListener("resize", () => {
-  if (chart_ref.value) {
-    chart_ref.value.chart.update();
-  }
-});
-
-const downloadImage = () => {
-  const image = chart_ref.value.chart?.toBase64Image("image/jpeg", 1);
-  base64ToJPEG(image, props.title);
-};
-</script>
-
-<style scoped>
-.graph-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  align-items: center;
-  justify-content: space-around;
-  gap: 1rem;
-  width: 100%;
-  max-width: 100vw;
-  padding: 1rem;
-}
-
-@media screen and (max-width: 1024px) {
-  .graph-container {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .graph-container {
-    grid-template-columns: 1fr;
-  }
-}
-</style>

src/components/charts/custom/SpeedometerChart.vue

@@ -1,201 +0,0 @@
-<template>
-  <q-card v-bind="$attrs" class="q-px-md full-height column justify-between">
-    <q-card-section class="q-pa-none">
-      <div class="row justify-between no-wrap items-start q-py-md q-px-sm">
-        <div>
-          <div class="text-bold text-description q-mb-sm">
-            {{ String(props.title).toLocaleUpperCase() }}
-          </div>
-          <span>{{ props.subTitle }}</span>
-        </div>
-        <q-btn
-          icon="mdi-tray-arrow-down"
-          class="q-ml-md"
-          dense
-          flat
-          @click="downloadImage"
-        />
-      </div>
-      <q-separator dark />
-    </q-card-section>
-    <div class="graph-container">
-      <Doughnut
-        ref="chart_ref"
-        :options="chartOptions"
-        :data="chartData"
-        :plugins="[ChartDataLabels, gaugeNeedle]"
-      />
-    </div>
-  </q-card>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
-import { Doughnut } from "vue-chartjs";
-import ChartDataLabels from "chartjs-plugin-datalabels";
-import { base64ToJPEG } from "src/helpers/convertBase64Image";
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  valorAgulha: {
-    type: Number,
-    required: true,
-  },
-  subTitle: {
-    type: String,
-    default: null,
-  },
-});
-
-const chart_ref = ref(null);
-const titulo = ref(`Valor: ${props.valorAgulha}`);
-
-const gaugeNeedle = {
-  id: "gaugeNeedle",
-  afterDatasetsDraw(chart) {
-    const { ctx, data } = chart;
-    ctx.save();
-
-    const needleValue = data.datasets[0].needleValue;
-    const xCenter = chart.getDatasetMeta(0).data[0].x;
-    const yCenter = chart.getDatasetMeta(0).data[0].y;
-    const outerRadius = chart.getDatasetMeta(0).data[0].outerRadius - 40;
-    const angle = Math.PI;
-
-    let circumference =
-      (chart.getDatasetMeta(0).data[0].circumference /
-        Math.PI /
-        data.datasets[0].data[0]) *
-      needleValue;
-
-    const needleAngleValue = circumference + 1.5;
-
-    ctx.translate(xCenter, yCenter);
-    ctx.rotate(angle * needleAngleValue);
-
-    // Draw the needle
-    ctx.beginPath();
-    ctx.strokeStyle = "grey";
-    ctx.fillStyle = "grey";
-    ctx.moveTo(0 - 4, 0);
-    ctx.lineTo(0, -outerRadius);
-    ctx.lineTo(0 + 4, 0);
-    ctx.stroke();
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(0, 0, 8, 0, 2 * Math.PI);
-    ctx.fillStyle = "grey";
-    ctx.fill();
-
-    ctx.restore();
-  },
-};
-
-ChartJS.register(ArcElement, Tooltip, Legend);
-
-const chartData = ref({
-  datasets: [
-    {
-      backgroundColor: [
-        "#00a550",
-        "#4dbb7e",
-        "#9ad2ad",
-        "#cce156",
-        "#fff100",
-        "#ffbe00",
-        "#ff8c00",
-        "#FC3D23",
-        "#D01616",
-        "#8A0000",
-      ],
-      data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
-      needleValue: props.valorAgulha,
-      borderColor: "transparent",
-    },
-  ],
-});
-
-const chartOptions = ref({
-  rotation: 270,
-  circumference: 180,
-  cutout: "50%",
-  plugins: {
-    tooltip: {
-      enabled: false,
-    },
-    title: {
-      display: true,
-      text: titulo.value,
-      color: "#ffffff",
-      position: "bottom",
-    },
-    datalabels: {
-      color: "black",
-      font: {
-        size: 14,
-        weight: "bold",
-      },
-      formatter: (value, ctx) => {
-        const valor = ctx.dataIndex;
-        return valor;
-      },
-    },
-  },
-});
-
-addEventListener("resize", () => {
-  if (chart_ref.value) {
-    chart_ref.value.chart.update();
-  }
-});
-
-const downloadImage = () => {
-  const image = chart_ref.value.chart?.toBase64Image("image/jpeg", 1);
-  base64ToJPEG(image, props.title);
-};
-</script>
-
-<style scoped>
-.graph-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  max-height: 300px;
-}
-
-@media screen and (max-width: 1600px) {
-  .graph-container {
-    max-height: 250px;
-  }
-}
-
-@media screen and (max-width: 1360px) {
-  .graph-container {
-    max-height: 200px;
-  }
-}
-
-@media screen and (max-width: 1130px) {
-  .graph-container {
-    max-height: 175px;
-  }
-}
-
-@media screen and (max-width: 888px) {
-  .graph-container {
-    max-height: 250px;
-  }
-}
-
-@media screen and (max-width: 650px) {
-  .graph-container {
-    max-height: 300px;
-  }
-}
-</style>

src/components/charts/maps/Brasil/MapaBrasil.vue

@@ -1,228 +0,0 @@
-<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-<template>
-  <div>
-    <q-card style="height: 100%">
-      <q-card-section class="row justify-between">
-        <div class="column">
-          <span class="text-bold text-description q-mb-sm">
-            {{ props.title }}
-          </span>
-          <span>{{ props.subtitle }}</span>
-        </div>
-        <q-btn
-          icon="mdi-tray-arrow-down"
-          dense
-          flat
-          class="q-my-auto"
-          @click="downloadImage"
-        />
-      </q-card-section>
-
-      <q-separator inset />
-      <q-card-section>
-        <div style="display: flex; flex-direction: column">
-          <div @mouseover="hideInfoBox">
-            <svg
-              ref="ref_mapa"
-              xmlns="http://www.w3.org/2000/svg"
-              class="mapa-svg-estados"
-              viewBox="120 50 500 500"
-              @click="mapclick"
-            >
-              <g id="mapa-svg-area">
-                <MapaEstado
-                  v-for="item in items"
-                  ref="child"
-                  :key="item.uf"
-                  :item="item"
-                  :show-circle-info="showCircleInfo"
-                  :class="item.classObject"
-                  :style="item.color ? `fill: ${item.color}` : ''"
-                  @state-selected-event="onStateSelectedEvent"
-                  @state-mouse-over-event="onStateMouseOverEvent"
-                />
-              </g>
-            </svg>
-          </div>
-          <div class="bg-background--2 q-pa-md" style="border-radius: 0.5rem">
-            <div
-              v-if="selected"
-              style="display: flex; flex-direction: column; gap: 0.5rem"
-            >
-              <span>
-                <b> Estado:</b> {{ dadosEstado.name }} -
-                {{ dadosEstado.uf.toUpperCase() }}
-              </span>
-              <span><b>Participantes:</b> {{ dadosEstado.pessoas || 0 }}</span>
-            </div>
-            <div
-              v-else
-              style="display: flex; flex-direction: column; gap: 0.5rem"
-            >
-              <span>
-                <b>Selecione um estado</b>
-              </span>
-            </div>
-          </div>
-        </div>
-      </q-card-section>
-    </q-card>
-  </div>
-</template>
-
-<script setup>
-import { computed, onMounted, ref } from "vue";
-import MapaEstado from "../MapaEstado.vue";
-import { DadosBrasil } from "./DadosBrasil";
-import { base64ToJPEG } from "src/helpers/convertBase64Image";
-
-const selected = ref(null);
-const showCircleInfo = ref(false);
-const infoBoxActive = ref(false);
-const infoBoxPosX = ref(0);
-const infoBoxPosY = ref(0);
-const infoBoxData = ref("");
-const child = ref(null);
-const items = ref(DadosBrasil);
-const ref_mapa = ref(null);
-
-const props = defineProps({
-  data: {
-    type: Array,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: false,
-    default: "PARTICIPANTES POR ESTADO - BRASIL",
-  },
-  subtitle: {
-    type: String,
-    required: false,
-    default: "Número de participantes do evento por estado brasileiro",
-  },
-});
-
-const mapclick = (event) => {
-  // console.log("mapa-brasil: mapclick");
-  if (event.target.tagName == "svg") {
-    resetSelectionAction();
-    infoBoxActive.value = false;
-  }
-};
-const onStateSelectedEvent = (args) => {
-  // console.log("mapa-brasil: onStateSelectedEvent: ", args);
-  selected.value = args.src.item.uf;
-  resetSelectionAction();
-  args.enable();
-};
-const onStateMouseOverEvent = (args) => {
-  // console.log("mapa-brasil: onStateMouseOverEvent: ", args);
-  setInfoBoxPosition({ x: args.event.pageX, y: args.event.pageY });
-  setInfoBoxData([
-    args.src.item.name,
-    args.src.item.regional,
-    args.src.item.altText,
-  ]);
-  infoBoxActive.value = true;
-};
-const resetSelectionAction = () => {
-  // console.log("mapa-brasil: resetSelectionAction", child.value);
-  for (let index = 0; index < child.value.length; index++) {
-    child.value[index].resetAction();
-  }
-};
-const setInfoBoxPosition = (args) => {
-  infoBoxPosX.value = args.x + 30;
-  infoBoxPosY.value = args.y;
-};
-const setInfoBoxData = (args) => {
-  infoBoxData.value = args.filter(function (a) {
-    return a !== "" ? a : null;
-  });
-};
-const hideInfoBox = (args) => {
-  if (
-    ["DIV", "SVG"].indexOf(args.target.tagName.toString().toUpperCase()) > -1
-  ) {
-    infoBoxActive.value = false;
-  }
-};
-
-onMounted(() => {
-  const dataOrganizada = [...props.data].sort(
-    (a, b) => a?.total_pessoas_por_estado - b?.total_pessoas_por_estado
-  );
-  const maiorNumero =
-    dataOrganizada[dataOrganizada.length - 1]?.total_pessoas_por_estado;
-  const faixa = maiorNumero / 5;
-  const colors = ["#f6a0a1", "#f27e7f", "#ee585a", "#EB3537", "#c31315"];
-  items.value.forEach((item) => {
-    const estado = dataOrganizada.find((e) => e.estado === item.uf);
-    if (estado) {
-      const indexFaixa = Math.ceil(estado?.total_pessoas_por_estado / faixa);
-      item.color = colors[indexFaixa - 1];
-      item.pessoas = estado.total_pessoas_por_estado;
-    } else {
-      item.color = "#494949";
-      item.pessoas = 0;
-    }
-  });
-});
-
-const dadosEstado = computed(() => {
-  const estado = items.value.find((item) => item.uf === selected.value);
-  return estado;
-});
-
-const downloadImage = () => {
-  const svgString = new XMLSerializer().serializeToString(ref_mapa.value);
-  const base64String = btoa(svgString);
-  base64ToJPEG(base64String, props.title);
-};
-</script>
-
-<style lang="scss">
-svg text {
-  fill: var(--default-stroke);
-  font-family: monospace;
-}
-
-.mapa-svg-estados {
-  fill: var(--default-fill);
-  -webkit-transition: 0.8s ease;
-  -moz-transition: 0.8s ease;
-  -ms-transition: 0.8s ease;
-  -o-transition: 0.8s ease;
-  transition: 0.8s ease;
-  stroke-dasharray: 180%;
-  stroke-dashoffset: -120%;
-  stroke-width: 1px;
-  stroke: var(--default-stroke);
-  text {
-    fill: var(--default-stroke);
-    stroke: none !important;
-  }
-}
-
-.mapa-svg-estados:hover {
-  cursor: pointer;
-  fill: #8d1012 !important;
-}
-
-.mapa-svg-estados-active {
-  cursor: pointer;
-  stroke: #ffffff;
-  fill: #ffc712 !important;
-  stroke-dashoffset: 0%;
-  transition: 0.8s ease;
-  -webkit-transition: 0.8s ease;
-  -moz-transition: 0.8s ease;
-  -ms-transition: 0.8s ease;
-  -o-transition: 0.8s ease;
-  text {
-    fill: #ffffff;
-    stroke: none !important;
-  }
-}
-</style>

src/components/charts/maps/MapaEstado.vue

@@ -1,110 +0,0 @@
-<template>
-  <g
-    ref="chart_ref"
-    :class="[classObject]"
-    :data-regional="item.regional"
-    @click="clickAction"
-  >
-    <path :d="item.svgData" />
-    <text
-      :transform="item.textData"
-      class="item text-weight-medium"
-      style="font-size: 10px"
-      fill="white"
-    >
-      {{ item.pessoas || 0 }}
-    </text>
-    <circle
-      v-if="showCircleInfo"
-      :cy="item.circleData.cy"
-      :cx="item.circleData.cx"
-      r="10"
-      :class="[counterClassObject]"
-    />
-  </g>
-</template>
-
-<script setup>
-import { computed, onMounted, ref } from "vue";
-
-const props = defineProps({
-  item: {
-    type: Object,
-    default: () => ({
-      altText: "--",
-    }),
-  },
-  showCircleInfo: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emit = defineEmits(["stateSelectedEvent", "stateMouseOverEvent"]);
-
-const active = ref(false);
-const counterActive = ref(false);
-const altText = ref(props.item.altText || "-");
-const chart_ref = ref(null);
-
-const classObject = computed(() => {
-  return active.value ? ["mapa-svg-estados-active"] : ["mapa-svg-estados"];
-});
-
-const counterClassObject = computed(() => {
-  return counterActive.value ? ["sphere active"] : ["sphere"];
-});
-
-// const pad = (value) => {
-//   if (!value) return "";
-//   return ("000000000" + value).slice(-2);
-// };
-
-const clickAction = () => {
-  // console.log("mapa-estado: clickAction()");
-  emit("stateSelectedEvent", {
-    src: {
-      item: props.item,
-    },
-    enable,
-  });
-};
-const resetAction = () => {
-  disable();
-};
-const disable = () => {
-  // console.log("mapa-estado: disabled ", props.item.uf);
-  active.value = false;
-  hideCounter();
-};
-
-const enable = () => {
-  // console.log("mapa-estado: enable ");
-  active.value = true;
-  showCounter();
-};
-const setAltText = (val) => {
-  altText.value = val;
-};
-const hideCounter = () => {
-  counterActive.value = false;
-};
-const showCounter = () => {
-  counterActive.value = true;
-};
-
-onMounted(() => {
-  altText.value = props.item.altText;
-});
-
-defineExpose({
-  resetAction,
-  setAltText,
-});
-</script>
-
-<style>
-.item {
-  fill: rgb(240, 221, 221);
-}
-</style>

src/components/charts/maps/Paraguai/MapaParaguai.vue

@@ -1,225 +0,0 @@
-<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-<template>
-  <div>
-    <q-card style="height: 100%">
-      <q-card-section class="row justify-between">
-        <div class="column">
-          <span class="text-bold text-description q-mb-sm">
-            {{ props.title }}
-          </span>
-          <span>{{ props.subtitle }}</span>
-        </div>
-        <q-btn
-          icon="mdi-tray-arrow-down"
-          dense
-          flat
-          class="q-my-auto"
-          @click="downloadImage"
-        />
-      </q-card-section>
-
-      <q-separator inset />
-      <q-card-section>
-        <div style="display: flex; flex-direction: column">
-          <div @mouseover="hideInfoBox">
-            <svg
-              ref="ref_mapa"
-              xmlns="http://www.w3.org/2000/svg"
-              class="mapa-svg-estados"
-              viewBox="-100 -60 1250 1250"
-              @click="mapclick"
-            >
-              <g id="mapa-svg-area">
-                <MapaEstado
-                  v-for="item in items"
-                  ref="child"
-                  :key="item.id"
-                  :item="item"
-                  :show-circle-info="showCircleInfo"
-                  :class="item.classObject"
-                  :style="item.color ? `fill: ${item.color}` : ''"
-                  @state-selected-event="onStateSelectedEvent"
-                  @state-mouse-over-event="onStateMouseOverEvent"
-                ></MapaEstado>
-              </g>
-            </svg>
-          </div>
-          <div class="bg-background--2 q-pa-md" style="border-radius: 0.5rem">
-            <div
-              v-if="selected"
-              style="display: flex; flex-direction: column; gap: 0.5rem"
-            >
-              <span> <b> Estado:</b> {{ dadosEstado.name }} </span>
-              <span><b>Participantes:</b> {{ dadosEstado.pessoas || 0 }}</span>
-            </div>
-            <div
-              v-else
-              style="display: flex; flex-direction: column; gap: 0.5rem"
-            >
-              <span>
-                <b>Selecione um estado</b>
-              </span>
-            </div>
-          </div>
-        </div>
-      </q-card-section>
-    </q-card>
-  </div>
-</template>
-
-<script setup>
-import { computed, onMounted, ref } from "vue";
-import MapaEstado from "../MapaEstado.vue";
-import { DadosParaguai } from "./DadosParaguai";
-import { base64ToJPEG } from "src/helpers/convertBase64Image";
-
-const selected = ref(null);
-const showCircleInfo = ref(false);
-const infoBoxActive = ref(false);
-const infoBoxPosX = ref(0);
-const infoBoxPosY = ref(0);
-const infoBoxData = ref("");
-const child = ref(null);
-const items = ref(DadosParaguai);
-const ref_mapa = ref(null);
-
-const props = defineProps({
-  data: {
-    type: Array,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: false,
-    default: "PARTICIPANTES POR DEPARTAMENTO - PARAGUAI",
-  },
-  subtitle: {
-    type: String,
-    required: false,
-    default: "Número de participantes do evento por departamento do Paraguai",
-  },
-});
-
-const mapclick = (event) => {
-  // console.log("mapa-brasil: mapclick");
-  if (event.target.tagName == "svg") {
-    resetSelectionAction();
-    infoBoxActive.value = false;
-  }
-};
-const onStateSelectedEvent = (args) => {
-  // console.log("mapa-brasil: onStateSelectedEvent: ", args);
-  selected.value = args.src.item.id;
-  resetSelectionAction();
-  args.enable();
-};
-const onStateMouseOverEvent = (args) => {
-  // console.log("mapa-brasil: onStateMouseOverEvent: ", args);
-  setInfoBoxPosition({ x: args.event.pageX, y: args.event.pageY });
-  setInfoBoxData([
-    args.src.item.name,
-    args.src.item.regional,
-    args.src.item.altText,
-  ]);
-  infoBoxActive.value = true;
-};
-const resetSelectionAction = () => {
-  // console.log("mapa-brasil: resetSelectionAction", child.value);
-  for (let index = 0; index < child.value.length; index++) {
-    child.value[index].resetAction();
-  }
-};
-const setInfoBoxPosition = (args) => {
-  infoBoxPosX.value = args.x + 30;
-  infoBoxPosY.value = args.y;
-};
-const setInfoBoxData = (args) => {
-  infoBoxData.value = args.filter(function (a) {
-    return a !== "" ? a : null;
-  });
-};
-const hideInfoBox = (args) => {
-  if (
-    ["DIV", "SVG"].indexOf(args.target.tagName.toString().toUpperCase()) > -1
-  ) {
-    infoBoxActive.value = false;
-  }
-};
-
-onMounted(() => {
-  const dataOrganizada = [...props.data].sort(
-    (a, b) => a?.total_pessoas_por_estado - b?.total_pessoas_por_estado
-  );
-  const maiorNumero =
-    dataOrganizada[dataOrganizada.length - 1]?.total_pessoas_por_estado;
-  const faixa = maiorNumero / 5;
-  const colors = ["#f6a0a1", "#f27e7f", "#ee585a", "#EB3537", "#c31315"];
-  items.value.forEach((item) => {
-    const estado = dataOrganizada.find((e) => e.estado_id === item.id);
-    if (estado) {
-      const indexFaixa = Math.ceil(estado?.total_pessoas_por_estado / faixa);
-      item.color = colors[indexFaixa - 1];
-      item.pessoas = estado.total_pessoas_por_estado;
-    } else {
-      item.color = "#494949";
-      item.pessoas = 0;
-    }
-  });
-});
-
-const dadosEstado = computed(() => {
-  const estado = items.value.find((item) => item.id === selected.value);
-  return estado;
-});
-
-const downloadImage = () => {
-  const svgString = new XMLSerializer().serializeToString(ref_mapa.value);
-  const base64String = btoa(svgString);
-  base64ToJPEG(base64String, props.title);
-};
-</script>
-
-<style lang="scss">
-svg text {
-  fill: var(--default-stroke);
-  font-family: monospace;
-}
-
-.mapa-svg-estados {
-  fill: var(--default-fill);
-  -webkit-transition: 0.8s ease;
-  -moz-transition: 0.8s ease;
-  -ms-transition: 0.8s ease;
-  -o-transition: 0.8s ease;
-  transition: 0.8s ease;
-  stroke-dasharray: 180%;
-  stroke-dashoffset: -120%;
-  stroke-width: 1px;
-  stroke: var(--default-stroke);
-  text {
-    fill: var(--default-stroke);
-    stroke: none !important;
-  }
-}
-
-.mapa-svg-estados:hover {
-  cursor: pointer;
-  fill: #8d1012 !important;
-}
-
-.mapa-svg-estados-active {
-  cursor: pointer;
-  stroke: #ffffff;
-  fill: #ffc712 !important;
-  stroke-dashoffset: 0%;
-  transition: 0.8s ease;
-  -webkit-transition: 0.8s ease;
-  -moz-transition: 0.8s ease;
-  -ms-transition: 0.8s ease;
-  -o-transition: 0.8s ease;
-  text {
-    fill: #ffffff;
-    stroke: none !important;
-  }
-}
-</style>

src/components/charts/mini/MiniBarChart.vue

@@ -1,101 +0,0 @@
-<template>
-  <Bar
-    :id="id"
-    ref="chart_ref"
-    :options="chartOptions"
-    :data="computedChartData"
-  />
-</template>
-
-<script setup>
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Tooltip,
-} from "chart.js";
-import { computed, useTemplateRef } from "vue";
-import { Bar } from "vue-chartjs";
-import { getCssVar } from "quasar";
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
-
-const chart_ref = useTemplateRef(null);
-
-const { data, barColor, horizontal, showTooltip } = defineProps({
-  data: {
-    type: Array,
-    required: true,
-  },
-  barColor: {
-    type: String,
-    default: () => getCssVar("primary"),
-  },
-  horizontal: {
-    type: Boolean,
-    default: false,
-  },
-  showTooltip: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const chartOptions = computed(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
-  indexAxis: horizontal ? "y" : "x",
-
-  plugins: {
-    legend: {
-      display: false,
-    },
-    tooltip: {
-      enabled: showTooltip,
-      displayColors: false,
-      callbacks: {
-        label: (context) => `${context.raw}`,
-      },
-    },
-  },
-
-  scales: {
-    x: {
-      display: false,
-      grid: {
-        display: false,
-      },
-    },
-    y: {
-      display: false,
-      grid: {
-        display: false,
-      },
-      beginAtZero: true,
-    },
-  },
-
-  animation: {
-    duration: 750,
-    easing: "easeOutQuad",
-  },
-}));
-
-const computedChartData = computed(() => ({
-  labels: Array(data.length).fill(""),
-  datasets: [
-    {
-      data: data,
-      backgroundColor: barColor,
-      borderRadius: 2,
-      barThickness: 8,
-      maxBarThickness: 10,
-    },
-  ],
-}));
-
-defineExpose({
-  chart_ref,
-});
-</script>

src/components/charts/mini/MiniLineChart.vue

@@ -1,116 +0,0 @@
-<template>
-  <Line ref="chart_ref" :options="chartOptions" :data="computedChartData" />
-</template>
-
-<script setup>
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Tooltip,
-  Filler,
-} from "chart.js";
-import { computed, useTemplateRef } from "vue";
-import { Line } from "vue-chartjs";
-import { getCssVar } from "quasar";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Tooltip,
-  Filler,
-);
-
-const chart_ref = useTemplateRef(null);
-
-const { data, lineColor, fillColor, showTooltip, showPoints } = defineProps({
-  data: {
-    type: Array,
-    required: true,
-  },
-  lineColor: {
-    type: String,
-    default: () => getCssVar("primary"),
-  },
-  fillColor: {
-    type: String,
-    default: "rgba(25, 118, 210, 0.1)",
-  },
-  showTooltip: {
-    type: Boolean,
-    default: true,
-  },
-  showPoints: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const chartOptions = computed(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
-
-  plugins: {
-    legend: {
-      display: false,
-    },
-    tooltip: {
-      enabled: showTooltip,
-      displayColors: false,
-      callbacks: {
-        label: (context) => `${context.raw}`,
-      },
-    },
-  },
-
-  scales: {
-    x: {
-      display: false,
-      grid: { display: false },
-    },
-    y: {
-      display: false,
-      grid: { display: false },
-      beginAtZero: true,
-    },
-  },
-
-  elements: {
-    line: {
-      tension: 0.4,
-      borderWidth: 2,
-    },
-    point: {
-      radius: showPoints ? 3 : 0,
-      hitRadius: 5,
-      borderWidth: 0,
-      backgroundColor: showPoints ? lineColor : "rgba(0,0,0,0)",
-    },
-  },
-
-  animation: {
-    duration: 750,
-    easing: "easeOutQuad",
-  },
-}));
-
-const computedChartData = computed(() => ({
-  labels: Array(data?.length)?.fill(""),
-  datasets: [
-    {
-      data: data,
-      borderColor: lineColor,
-      backgroundColor: fillColor,
-      fill: true,
-    },
-  ],
-}));
-
-defineExpose({
-  chart_ref,
-});
-</script>

src/components/charts/normal/BarChart.vue

@@ -1,267 +0,0 @@
-<template>
-  <div v-bind="$attrs" class="chart-wrapper full-width full-height">
-    <q-resize-observer @resize="onResize" />
-    <div v-if="hasData" class="chart-container">
-      <Bar
-        ref="chart_ref"
-        :options="chartBarOptions"
-        :data="chartBarData"
-        :plugins="[ChartDataLabels]"
-      />
-    </div>
-    <div v-else class="no-data-container">
-      <span :class="textColor">{{ $t("http.errors.no_records_found") }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from "vue";
-import { Bar } from "vue-chartjs";
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  BarElement,
-  CategoryScale,
-  LinearScale,
-} from "chart.js";
-import ChartDataLabels from "chartjs-plugin-datalabels";
-import { base64ToJPEG } from "src/helpers/convertBase64Image";
-import { useQuasar, colors, getCssVar } from "quasar";
-
-ChartJS.register(
-  Title,
-  Tooltip,
-  Legend,
-  BarElement,
-  CategoryScale,
-  LinearScale,
-);
-
-const $q = useQuasar();
-const chart_ref = ref(null);
-const { lighten } = colors;
-
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({
-      chart_data: [],
-      current_total: 0,
-    }),
-  },
-  dataSetLabel: {
-    type: String,
-    default: "Quantidade",
-  },
-  labelX: {
-    type: String,
-    default: "Categorias",
-  },
-  labelY: {
-    type: String,
-    default: "Valores",
-  },
-  showLegend: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: "Título",
-  },
-  backgroundColors: {
-    type: Array,
-    default: null,
-  },
-});
-
-const onResize = () => {
-  if (chart_ref.value?.chart) {
-    setTimeout(() => {
-      chart_ref.value.chart.resize();
-    }, 50);
-  }
-};
-
-const textColor = computed(() => {
-  return $q.dark.isActive ? "text-white" : "text-black";
-});
-
-const labelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
-
-const gridColor = computed(() => {
-  return $q.dark.isActive ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
-});
-
-const dataLabelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
-
-const hasData = computed(() => {
-  return props.data?.chart_data && props.data.chart_data.length > 0;
-});
-
-const chartLabels = computed(() => {
-  return props.data?.chart_data?.map((item) => item.label) || [];
-});
-
-const chartValues = computed(() => {
-  return props.data?.chart_data?.map((item) => item.value) || [];
-});
-
-const chartThemeColors = computed(() => {
-  if (props.backgroundColors) {
-    return props.backgroundColors;
-  }
-
-  const primaryColor = getCssVar("primary");
-  if (!primaryColor) return [];
-
-  const numColors = chartValues.value.length;
-  const step = numColors > 0 ? 50 / numColors : 0;
-  return Array.from({ length: numColors }, (_, i) =>
-    lighten(primaryColor, i * step),
-  );
-});
-
-const chartBarData = computed(() => ({
-  labels: chartLabels.value,
-  datasets: [
-    {
-      label: props.dataSetLabel,
-      data: chartValues.value,
-      backgroundColor: chartThemeColors.value,
-      borderColor: chartThemeColors.value,
-      borderWidth: 1,
-    },
-  ],
-}));
-
-const chartBarOptions = computed(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: {
-      display: props.showLegend,
-      position: "top",
-      labels: {
-        color: labelColor.value,
-        font: {
-          size: 14,
-        },
-      },
-    },
-    datalabels: {
-      color: dataLabelColor.value,
-      anchor: "end",
-      align: "top",
-      offset: 4,
-      font: {
-        size: 12,
-        weight: "bold",
-      },
-      formatter: (value) => {
-        return value > 0 ? value : "";
-      },
-    },
-    tooltip: {
-      backgroundColor: $q.dark.isActive
-        ? "rgba(0, 0, 0, 0.8)"
-        : "rgba(255, 255, 255, 0.9)",
-      titleColor: labelColor.value,
-      bodyColor: labelColor.value,
-      borderColor: labelColor.value,
-      borderWidth: 1,
-    },
-  },
-  scales: {
-    x: {
-      display: true,
-      title: {
-        display: !!props.labelX,
-        text: props.labelX,
-        color: labelColor.value,
-        font: {
-          size: 14,
-        },
-      },
-      grid: {
-        color: gridColor.value,
-        tickColor: gridColor.value,
-      },
-      ticks: {
-        color: labelColor.value,
-        font: {
-          size: 12,
-        },
-      },
-    },
-    y: {
-      display: true,
-      title: {
-        display: !!props.labelY,
-        text: props.labelY,
-        color: labelColor.value,
-        font: {
-          size: 14,
-        },
-      },
-      suggestedMin: 0,
-      grid: {
-        color: gridColor.value,
-        tickColor: gridColor.value,
-      },
-      ticks: {
-        color: labelColor.value,
-        font: {
-          size: 12,
-        },
-        stepSize: 1,
-      },
-    },
-  },
-}));
-
-const downloadImage = () => {
-  const image = chart_ref.value.chart?.toBase64Image("image/jpeg", 1);
-  base64ToJPEG(image, props.title || "bar-chart");
-};
-
-defineExpose({
-  downloadImage,
-  chart_ref,
-});
-</script>
-
-<style scoped>
-.chart-wrapper {
-  position: relative;
-}
-
-.chart-container {
-  position: absolute;
-  top: 10px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.no-data-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-}
-</style>

src/components/charts/normal/DoughnutChart.vue

@@ -1,204 +0,0 @@
-<template>
-  <div v-bind="$attrs" class="chart-wrapper full-width full-height">
-    <q-resize-observer @resize="onResize" />
-    <div v-if="hasData" class="chart-container">
-      <Doughnut
-        ref="chart_ref"
-        :options="chartPieOptions"
-        :data="chartPieData"
-        :plugins="[ChartDataLabels]"
-      />
-    </div>
-    <div v-else class="no-data-container">
-      <span :class="textColor">{{ $t("http.errors.no_records_found") }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from "vue";
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
-import { Doughnut } from "vue-chartjs";
-import ChartDataLabels from "chartjs-plugin-datalabels";
-import { base64ToJPEG } from "src/helpers/convertBase64Image";
-import { useQuasar, colors, getCssVar } from "quasar";
-
-ChartJS.register(ArcElement, Tooltip, Legend);
-
-const $q = useQuasar();
-const { lighten } = colors;
-
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({
-      chart_data: [],
-    }),
-  },
-  backgroundColors: {
-    type: Array,
-    default: null,
-  },
-  title: {
-    type: String,
-    default: "doughnut-chart",
-  },
-  dataSetLabel: {
-    type: String,
-    default: "Dados",
-  },
-});
-
-const chart_ref = ref(null);
-
-const onResize = () => {
-  if (chart_ref.value?.chart) {
-    setTimeout(() => {
-      chart_ref.value.chart.resize();
-    }, 50);
-  }
-};
-
-const textColor = computed(() => {
-  return $q.dark.isActive ? "text-white" : "text-black";
-});
-
-const labelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
-
-const dataLabelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
-
-const hasData = computed(() => {
-  return props.data?.chart_data && props.data.chart_data.length > 0;
-});
-
-const chartLabels = computed(() => {
-  return props.data?.chart_data?.map((item) => item.label) || [];
-});
-
-const chartValues = computed(() => {
-  return props.data?.chart_data?.map((item) => item.value) || [];
-});
-
-const chartPercentages = computed(() => {
-  const total = props.data?.current_total || 0;
-  if (total === 0) return [];
-
-  return (
-    props.data?.chart_data?.map((item) =>
-      Math.round((item.value / total) * 100),
-    ) || []
-  );
-});
-
-const chartThemeColors = computed(() => {
-  if (props.backgroundColors) {
-    return props.backgroundColors;
-  }
-
-  const primaryColor = getCssVar("primary");
-  if (!primaryColor) return [];
-
-  const numColors = chartValues.value.length;
-  const step = numColors > 0 ? 50 / numColors : 0;
-  return Array.from({ length: numColors }, (_, i) =>
-    lighten(primaryColor, i * step),
-  );
-});
-
-const chartPieData = computed(() => ({
-  labels: chartLabels.value,
-  datasets: [
-    {
-      label: props.dataSetLabel,
-      data: chartPercentages.value,
-      backgroundColor: chartThemeColors.value,
-    },
-  ],
-}));
-
-const chartPieOptions = computed(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: {
-      position: "bottom",
-      labels: {
-        color: labelColor.value,
-        font: {
-          size: 12,
-        },
-        padding: 20,
-      },
-    },
-    datalabels: {
-      color: dataLabelColor.value,
-      font: {
-        size: 12,
-        weight: "bold",
-      },
-      formatter: (value) => {
-        return value > 0 ? value + "%" : "";
-      },
-    },
-    tooltip: {
-      backgroundColor: $q.dark.isActive
-        ? "rgba(0, 0, 0, 0.8)"
-        : "rgba(255, 255, 255, 0.9)",
-      titleColor: labelColor.value,
-      bodyColor: labelColor.value,
-      borderColor: labelColor.value,
-      borderWidth: 1,
-      callbacks: {
-        label: (context) => {
-          const label = context.label || "";
-          const percentage = context.parsed;
-          const actualValue = chartValues.value[context.dataIndex];
-          return `${label}: ${actualValue} (${percentage}%)`;
-        },
-      },
-    },
-  },
-}));
-
-const downloadImage = () => {
-  const image = chart_ref.value.chart?.toBase64Image("image/jpeg", 1);
-  base64ToJPEG(image, props.title || "pie-chart");
-};
-
-defineExpose({
-  downloadImage,
-  chart_ref,
-});
-</script>
-
-<style scoped>
-.chart-wrapper {
-  position: relative;
-}
-
-.chart-container {
-  position: absolute;
-  top: 10px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.no-data-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-}
-</style>

src/components/charts/normal/LineChart.vue

@@ -1,265 +0,0 @@
-<template>
-  <div v-bind="$attrs" class="chart-wrapper full-width full-height">
-    <q-resize-observer @resize="onResize" />
-    <div v-if="hasData" class="chart-container">
-      <Line
-        ref="chart_ref"
-        :options="chartLineOptions"
-        :data="chartLineData"
-        :plugins="[ChartDataLabels]"
-      />
-    </div>
-    <div v-else class="no-data-container">
-      <span :class="textColor">{{ $t("http.errors.no_records_found") }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from "vue";
-import { Line } from "vue-chartjs";
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  LineElement,
-  PointElement,
-  CategoryScale,
-  LinearScale,
-} from "chart.js";
-import ChartDataLabels from "chartjs-plugin-datalabels";
-import { base64ToJPEG } from "src/helpers/convertBase64Image";
-import { useQuasar, getCssVar, colors } from "quasar";
-
-ChartJS.register(
-  Title,
-  Tooltip,
-  Legend,
-  LineElement,
-  PointElement,
-  CategoryScale,
-  LinearScale,
-);
-
-const $q = useQuasar();
-const { lighten } = colors;
-const chart_ref = ref(null);
-
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({
-      chart_data: [],
-    }),
-  },
-  title: {
-    type: String,
-    default: "",
-  },
-  dataSetLabel: {
-    type: String,
-    default: "Valores",
-  },
-  labelX: {
-    type: String,
-    default: "Categorias",
-  },
-  labelY: {
-    type: String,
-    default: "Valores",
-  },
-  backgroundColors: {
-    type: Array,
-    default: null,
-  },
-});
-
-const onResize = () => {
-  if (chart_ref.value?.chart) {
-    setTimeout(() => {
-      chart_ref.value.chart.resize();
-    }, 50);
-  }
-};
-
-const textColor = computed(() => {
-  return $q.dark.isActive ? "text-white" : "text-black";
-});
-
-const labelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
-
-const gridColor = computed(() => {
-  return $q.dark.isActive ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
-});
-
-const dataLabelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
-
-const hasData = computed(() => {
-  return props.data?.chart_data && props.data.chart_data.length > 0;
-});
-
-const chartLabels = computed(() => {
-  return props.data?.chart_data?.map((item) => item.label) || [];
-});
-
-const chartValues = computed(() => {
-  return props.data?.chart_data?.map((item) => item.value) || [];
-});
-
-const chartThemeColors = computed(() => {
-  if (props.backgroundColors) {
-    return props.backgroundColors;
-  }
-
-  const primaryColor = getCssVar("primary");
-  if (!primaryColor) return [];
-
-  const numColors = chartValues.value.length;
-  const step = numColors > 0 ? 50 / numColors : 0;
-  return Array.from({ length: numColors }, (_, i) =>
-    lighten(primaryColor, i * step),
-  );
-});
-
-const chartLineData = computed(() => ({
-  labels: chartLabels.value,
-  datasets: [
-    {
-      label: props.dataSetLabel,
-      data: chartValues.value,
-      borderColor: chartThemeColors.value[0],
-      backgroundColor: chartThemeColors.value,
-      fill: false,
-      cubicInterpolationMode: "monotone",
-      tension: 0.4,
-    },
-  ],
-}));
-
-const chartLineOptions = computed(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: {
-      display: false,
-    },
-    title: {
-      display: !!props.title,
-      text: props.title,
-      color: labelColor.value,
-      font: {
-        size: 16,
-      },
-    },
-    datalabels: {
-      color: dataLabelColor.value,
-      anchor: "end",
-      align: "top",
-      offset: 4,
-      font: {
-        size: 12,
-        weight: "bold",
-      },
-      formatter: (value) => {
-        return value > 0 ? value : "";
-      },
-    },
-    tooltip: {
-      backgroundColor: $q.dark.isActive
-        ? "rgba(0, 0, 0, 0.8)"
-        : "rgba(255, 255, 255, 0.9)",
-      titleColor: labelColor.value,
-      bodyColor: labelColor.value,
-      borderColor: labelColor.value,
-      borderWidth: 1,
-    },
-  },
-  interaction: {
-    intersect: false,
-  },
-  scales: {
-    x: {
-      display: true,
-      title: {
-        display: !!props.labelX,
-        text: props.labelX,
-        color: labelColor.value,
-        font: {
-          size: 14,
-        },
-      },
-      grid: {
-        color: gridColor.value,
-        tickColor: gridColor.value,
-      },
-      ticks: {
-        color: labelColor.value,
-      },
-    },
-    y: {
-      display: true,
-      title: {
-        display: !!props.labelY,
-        text: props.labelY,
-        color: labelColor.value,
-        font: {
-          size: 14,
-        },
-      },
-      suggestedMin: 0,
-      grid: {
-        color: gridColor.value,
-        tickColor: gridColor.value,
-      },
-      ticks: {
-        color: labelColor.value,
-        stepSize: 1,
-      },
-    },
-  },
-}));
-
-const downloadImage = () => {
-  if (!chart_ref.value?.chart) return;
-  const image = chart_ref.value.chart.toBase64Image("image/jpeg", 1);
-  base64ToJPEG(image, props.title || "line-chart");
-};
-
-defineExpose({
-  downloadImage,
-  chart_ref,
-});
-</script>
-
-<style scoped>
-.chart-wrapper {
-  position: relative;
-}
-
-.chart-container {
-  position: absolute;
-  top: 10px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.no-data-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-}
-</style>

src/components/charts/normal/PieChart.vue

@@ -1,205 +0,0 @@
-<template>
-  <div v-bind="$attrs" class="chart-wrapper full-width full-height">
-    <q-resize-observer @resize="onResize" />
-    <div v-if="hasData" class="chart-container">
-      <Pie
-        ref="chart_ref"
-        :options="chartPieOptions"
-        :data="chartPieData"
-        :plugins="[ChartDataLabels]"
-      />
-    </div>
-    <div v-else class="no-data-container">
-      <span :class="textColor">{{ $t("http.errors.no_records_found") }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from "vue";
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
-import { Pie } from "vue-chartjs";
-import ChartDataLabels from "chartjs-plugin-datalabels";
-import { base64ToJPEG } from "src/helpers/convertBase64Image";
-import { useQuasar, getCssVar, colors } from "quasar";
-
-ChartJS.register(ArcElement, Tooltip, Legend);
-
-const $q = useQuasar();
-const { lighten } = colors;
-
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({
-      chart_data: [],
-      current_total: 0,
-    }),
-  },
-  dataSetLabel: {
-    type: String,
-    default: "Dados",
-  },
-  title: {
-    type: String,
-    default: "Título",
-  },
-  backgroundColors: {
-    type: Array,
-    default: null,
-  },
-});
-
-const chart_ref = ref(null);
-
-const onResize = () => {
-  if (chart_ref.value?.chart) {
-    setTimeout(() => {
-      chart_ref.value.chart.resize();
-    }, 50);
-  }
-};
-
-const textColor = computed(() => {
-  return $q.dark.isActive ? "text-white" : "text-black";
-});
-
-const labelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
-
-const dataLabelColor = computed(() => {
-  return $q.dark.isActive ? "#ffffff" : "#000000";
-});
-
-const hasData = computed(() => {
-  return props.data?.chart_data && props.data.chart_data.length > 0;
-});
-
-const chartLabels = computed(() => {
-  return props.data?.chart_data?.map((item) => item.label) || [];
-});
-
-const chartValues = computed(() => {
-  return props.data?.chart_data?.map((item) => item.value) || [];
-});
-
-const chartPercentages = computed(() => {
-  const total = props.data?.current_total || 0;
-  if (total === 0) return [];
-
-  return (
-    props.data?.chart_data?.map((item) =>
-      Math.round((item.value / total) * 100),
-    ) || []
-  );
-});
-
-const chartThemeColors = computed(() => {
-  if (props.backgroundColors) {
-    return props.backgroundColors;
-  }
-
-  const primaryColor = getCssVar("primary");
-  if (!primaryColor) return [];
-
-  const numColors = chartValues.value.length;
-  const step = numColors > 0 ? 50 / numColors : 0;
-  return Array.from({ length: numColors }, (_, i) =>
-    lighten(primaryColor, i * step),
-  );
-});
-
-const chartPieData = computed(() => ({
-  labels: chartLabels.value,
-  datasets: [
-    {
-      label: props.dataSetLabel,
-      data: chartPercentages.value,
-      backgroundColor: chartThemeColors.value,
-    },
-  ],
-}));
-
-const chartPieOptions = computed(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: {
-      position: "bottom",
-      labels: {
-        color: labelColor.value,
-        font: {
-          size: 12,
-        },
-        padding: 20,
-      },
-    },
-    datalabels: {
-      color: dataLabelColor.value,
-      font: {
-        size: 12,
-        weight: "bold",
-      },
-      formatter: (value) => {
-        return value > 0 ? value + "%" : "";
-      },
-    },
-    tooltip: {
-      backgroundColor: $q.dark.isActive
-        ? "rgba(0, 0, 0, 0.8)"
-        : "rgba(255, 255, 255, 0.9)",
-      titleColor: labelColor.value,
-      bodyColor: labelColor.value,
-      borderColor: labelColor.value,
-      borderWidth: 1,
-      callbacks: {
-        label: (context) => {
-          const label = context.label || "";
-          const percentage = context.parsed;
-          const actualValue = chartValues.value[context.dataIndex];
-          return `${label}: ${actualValue} (${percentage}%)`;
-        },
-      },
-    },
-  },
-}));
-
-const downloadImage = () => {
-  const image = chart_ref.value.chart?.toBase64Image("image/jpeg", 1);
-  base64ToJPEG(image, props.title || "pie-chart");
-};
-
-defineExpose({
-  downloadImage,
-  chart_ref,
-});
-</script>
-
-<style scoped>
-.chart-wrapper {
-  position: relative;
-}
-
-.chart-container {
-  position: absolute;
-  top: 10px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.no-data-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-}
-</style>

src/components/dashboard/DashboardFavoriteProviders.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="q-mx-md q-mb-md">
-    <div class="dashboard-section-title gradient-diarista q-mb-sm">{{ $t('dashboard_client.favorites.title') }}</div>
+    <div class="dashboard-section-title gradient-diarista q-mb-sm font16 fontbold">{{ $t('dashboard_client.favorites.title') }}</div>
 
     <div class="scroll-track">
       <q-card
@@ -12,17 +12,17 @@
         <q-card-section class="q-pa-sm column text-text">
           <div class="row items-start no-wrap">
             <div class="col-3 q-my-auto">
-              <q-avatar :style="avatarColors[item.provider_id % avatarColors.length]" size="46px" class="text-weight-bold">
+              <q-avatar :style="avatarColors[item.provider_id % avatarColors.length]" size="46px" class="">
                 <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover;border-radius:50%;" />
                 <span v-else>{{ item.provider_name?.slice(0,1).toUpperCase() ?? '—' }}</span>
               </q-avatar>
             </div>
             <div class="col-5 column q-gutter-y-xs q-my-auto">
-              <span class="text-fav-name">{{ item.provider_name ?? 'Prestador' }}</span>
-              <span class="text-fav-region">{{ item.provider_district ?? 'N/A' }}</span>
+              <span class="text-fav-name font12 fontmedium">{{ item.provider_name ?? 'Prestador' }}</span>
+              <span class="text-fav-region font9 fontbold  text-grey-7">{{ item.provider_district ?? $t('dashboard_client.last_schedules.no_address') }}</span>
               <div v-if="item.average_rating != null" class="row items-center q-gutter-x-xs">
-                <q-icon name="mdi-star" color="warning" size="sm" />
-                <span class="text-fav-name">{{ Number(item.average_rating).toFixed(1) }}</span>
+                <q-icon name="mdi-star" color="warning" size="xs" />
+                <span class="text-fav-name font12 fontregular">{{ Number(item.average_rating).toFixed(1) }}</span>
               </div>
             </div>
             <div class="col-4 column q-mt-auto">

src/components/dashboard/DashboardHeaderBar.vue

@@ -4,12 +4,12 @@
     <div class="col column q-gutter-y-xs">
       <div class="row items-center q-gutter-x-xs">
         <q-icon name="mdi-star" color="warning" size="14px" />
-        <span class="dashboard-metric-value">{{ data?.rating != null ? Number(data.rating).toFixed(1).replace('.', ',') : '-' }}</span>
-        <span class="dashboard-metric-meta">({{ data?.total_ratings ?? 0 }})</span>
+        <span class="dashboard-metric-value font10 fontregular">{{ data?.rating != null ? Number(data.rating).toFixed(1).replace('.', ',') : '-' }}</span>
+        <span class="dashboard-metric-meta font10 fontregular">({{ data?.total_ratings ?? 0 }})</span>
       </div>
       <div class="row items-center q-gutter-x-xs">
         <q-icon name="mdi-broom" color="secondary" size="14px" />
-        <span class="dashboard-metric-value">{{ data?.total_services ?? 0 }}</span>
+        <span class="dashboard-metric-value font10 fontregular">{{ data?.total_services ?? 0 }}</span>
       </div>
     </div>
 
@@ -33,13 +33,12 @@
       size="20px"
     />
 
-    <!-- BADGE -->
     <q-badge
       v-if="unreadNotifications > 0"
       floating
       rounded
       color="pink"
-      class="notification-badge"
+      class="notification-badge font10 fontregular"
     >
       {{ unreadNotifications }}
     </q-badge>
@@ -96,16 +95,10 @@ const goToNotifications = () => {
   height: 32px;
 }
 .dashboard-metric-value {
-  font-family: "Inter", sans-serif;
-  font-size: 11px;
-  font-weight: 700;
   color: #3a3a4a;
   line-height: 1;
 }
 .dashboard-metric-meta {
-  font-family: "Inter", sans-serif;
-  font-size: 10px;
-  font-weight: 400;
   color: #999;
   line-height: 1;
 }
@@ -113,7 +106,5 @@ const goToNotifications = () => {
 .notification-badge {
   min-width: 16px;
   height: 16px;
-  font-size: 10px;
-  font-weight: 700;
 }
 </style>

src/components/dashboard/DashboardLastDoneSchedules.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="q-mx-md q-mb-md">
-    <div class="dashboard-section-title gradient-diarista q-mb-sm">{{ $t('dashboard_client.last_schedules.title') }}</div>
+    <div class="dashboard-section-title gradient-diarista q-mb-sm font16 fontbold">{{ $t('dashboard_client.last_schedules.title') }}</div>
 
     <div class="scroll-track">
       <q-card
@@ -10,12 +10,12 @@
         :flat="false"
       >
         <q-card-section class="column q-pa-md q-gutter-y-xs text-text">
-          <q-avatar :style="avatarColors[item.provider_id % avatarColors.length]" size="56px" class="text-weight-bold q-mx-auto">
+          <q-avatar :style="avatarColors[item.provider_id % avatarColors.length]" size="56px" class="q-mx-auto">
             <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover;border-radius:50%;" />
             <span v-else>{{ item.provider_name?.slice(0,1).toUpperCase() ?? '—' }}</span>
           </q-avatar>
-          <span class="text-done-name">{{ item.provider_name ?? 'Prestador' }}</span>
-          <span v-if="item.provider_district" class="text-done-district">{{ item.provider_district != null ? item.provider_district : $t('dashboard_client.last_schedules.no_address') }}</span>
+          <span class="text-done-name font12 fontmedium">{{ item.provider_name ?? 'Prestador' }}</span>
+          <span class="text-done-district font9 fontbold text-grey-7">{{ item.provider_district != null ? item.provider_district : $t('dashboard_client.last_schedules.no_address') }}</span>
           <q-btn
             rounded color="secondary"
             padding="1px 5px" size="sm"
@@ -56,8 +56,6 @@ const avatarColors = [
   scroll-snap-align: start;
 }
 .text-done-district {
-  font-size: 11px;
-  color: var(--q-text-light, #9ca3af);
   text-align: center;
 }
 </style>

src/components/dashboard/DashboardNextSchedules.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="q-mx-md q-mb-md">
-    <div class="dashboard-section-title gradient-diarista q-mb-sm">{{ $t('dashboard_client.next_schedules.title') }}</div>
+    <div class="dashboard-section-title gradient-diarista q-mb-sm font16 fontbold">{{ $t('dashboard_client.next_schedules.title') }}</div>
 
     <div class="scroll-wrapper">
       <div class="scroll-track">
@@ -9,34 +9,34 @@
           :key="item.id"
           :flat="false"
           class="schedule-card card-border shadow-card bg-surface"
-          >
+        >
           <q-card-section class="q-pa-md row col-12 no-wrap schedule-card-section">
-            <div class="column text-center schedule-avatar">
-              <div class="col-7">
-                <q-avatar :style="avatarColors[item.id % avatarColors.length]" class="text-weight-bold q-mx-auto">
+            <div class="column text-center schedule-avatar col-4">
+              <div class="col-7 column">
+                <q-avatar :style="avatarColors[item.id % avatarColors.length]" class="q-mx-auto">
                   <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover;border-radius:50%;" />
                   <span v-else>{{ item.provider_name?.slice(0,1) ?? '—' }}</span>
                 </q-avatar>
               </div>
 
-              <div class="col-5 column justify-end">
+              <div class="col-5 column justify-end font10 fontbold">
                 <span class="text-pill text-primary customColor">
                   {{ item.schedule_type === 'custom' ? $t('dashboard_client.next_schedules.tag_custom') : $t('dashboard_client.next_schedules.tag_default') }}
                 </span>
               </div>
             </div>
 
-            <div class="column text-text q-px-sm schedule-main">
+            <div class="col-4 column text-text q-px-lg schedule-main">
               <div class="column schedule-info">
                 <div>
-                  <span class="text-provider-name provider-name-ellipsis">
+                  <span class="text-provider-name provider-name-ellipsis font12 fontbold">
                     {{ item.provider_name ?? $t('dashboard_client.next_schedules.no_provider') }}
                   </span>
                 </div>
 
-                <div class="column schedule-date-time">
+                <div class="column schedule-date-time font9">
                   <div class="schedule-line">
-                    <span class="text-schedule-date-bold">
+                    <span class="text-schedule-date-bold fontbold">
                       {{ formatWeekday(item.date) }}
                     </span>
 
@@ -50,7 +50,7 @@
                       {{ $t('dashboard_client.next_schedules.from') }}&nbsp;
                     </span>
 
-                    <span class="text-schedule-date-bold">
+                    <span class="text-schedule-date-bold fontbold">
                       {{ item.start_time?.slice(0,5) }} {{ $t('dashboard_client.next_schedules.to') }} {{ item.end_time?.slice(0,5) }}
                     </span>
                   </div>
@@ -60,13 +60,13 @@
               <div class="schedule-place">
                 <div class="column justify-end">
                   <div class="row items-center no-wrap text-pill-place schedule-place-content">
-                    <q-icon
-                      :name="addressIcon(item.address?.address_type ?? item.custom_address_type)"
-                      color="primary"
-                      size="15px"
-                    />
 
-                    <span>
+                    <span class="font10 fontbold q-ml-sm">
+                      <q-icon
+                        :name="addressIcon(item.address?.address_type ?? item.custom_address_type)"
+                        color="primary"
+                        size="12px"
+                      />
                       {{ addressLabel(item.address?.address_type ?? item.custom_address_type) }}
                     </span>
                   </div>
@@ -76,16 +76,16 @@
 
             <div class="column text-text schedule-price">
               <div class="column schedule-price-info">
-                <span class="text-price-main">
+                <span class="text-price-main font16 fontbold">
                   {{ item.total_amount && item.total_amount !== '0.00' ? formatCurrency(item.total_amount) : $t('dashboard_client.next_schedules.to_combine') }}
                 </span>
 
-                <span class="text-price-label schedule-price-label">
+                <span class="text-price-label schedule-price-label font12 fontmedium">
                   {{ formatLabelByPeriodType(item.period_type) }}
                 </span>
               </div>
 
-              <div class="column justify-end items-end">
+              <div class="column">
                 <q-btn
                   class="full-width"
                   color="primary"
@@ -166,7 +166,6 @@ const formatWeekday = (iso) => {
 
 .schedule-card {
   min-width: 90%;
-  min-height: 112px;
 }
 
 .schedule-card-section {

src/components/dashboard/DashboardPaymentIncomplete.vue

@@ -2,7 +2,7 @@
   <div class="incomplete-banner q-mx-md q-mb-md" @click="openPayments">
     <div class="row items-center no-wrap q-pa-sm q-px-md">
       <q-icon name="mdi-alert-outline" size="26px" color="primary" class="q-mr-md" />
-      <div class="col banner-text text-primary">
+      <div class="col banner-text font12 fontmedium text-primary">
         {{ $t('dashboard_client.payment_incomplete_title') }}
       </div>
       <q-btn
@@ -11,7 +11,7 @@
         color="primary"
         text-color="white"
         :label="$t('dashboard_client.payment_incomplete_cta')"
-        class="q-ml-sm resolver-btn"
+        class="q-ml-sm resolver-btn font9"
       />
     </div>
   </div>
@@ -39,15 +39,12 @@ const openPayments = () => {
 }
 
 .banner-text {
-  font-size: 13px;
-  font-weight: 500;
   line-height: 1.3;
 }
 
 .resolver-btn {
   border-radius: 20px;
   padding: 0px 4px;
-  font-size: 11px;
   white-space: nowrap;
   flex-shrink: 0;
 }

src/components/dashboard/DashboardPendingSchedules.vue

@@ -12,13 +12,13 @@
           <q-card-section class="q-pa-md">
 
             <div class="row no-wrap items-start q-mb-sm">
-              <q-avatar size="40px" :style="avatarColors[item.id % avatarColors.length]" class="text-weight-bold q-mr-sm flex-shrink-0">
+              <q-avatar size="40px" :style="avatarColors[item.id % avatarColors.length]" class="q-mr-sm flex-shrink-0">
                 <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover;border-radius:50%;" />
                 <span v-else>{{ item.provider_name?.slice(0, 2).toUpperCase() ?? '??' }}</span>
               </q-avatar>
 
               <div class="col column no-wrap overflow-hidden">
-                <span class="text-body2 text-text">
+                <span class="font12 fontmedium text-text">
                   <span v-if="item.status == 'pending'">
                     {{ $t('dashboard_client.pending_schedules.requesting_with') }}
                   </span>
@@ -26,19 +26,19 @@
                     {{ $t('dashboard_client.pending_schedules.pay_to_provider') }}
                   </span>
                   
-                  <span class="text-weight-bold">{{ ' ' +  item.provider_name ?? '—' }}</span>
+                  <span class="font12 fontbold">{{ ' ' +  item.provider_name ?? '—' }}</span>
                 </span>
                 <div class="row items-center q-mt-xs">
                   <q-icon name="mdi-clock-outline" size="13px" color="grey-5" class="q-mr-xs" />
-                  <span class="text-caption text-grey-5">{{ item.time_since_request }}</span>
+                  <span class="font9 fontmedium text-grey-5">{{ item.time_since_request }}</span>
                 </div>
               </div>
 
               <div class="clock-badge-col q-ml-sm flex-shrink-0 column items-center">
                 <div class="clock-badge">
-                  <q-icon name="mdi-clock-outline" size="18px" color="white" />
+                  <q-icon name="mdi-clock-outline" size="14px" color="white" />
                 </div>
-                <span class="text-caption text-primary text-weight-bold q-mt-xs badge-status-text">
+                <span class="font10 fontmedium text-primary q-mt-xs badge-status-text">
                   {{ $t(`dashboard_client.pending_schedules.status.${item.status ?? 'pending'}`) }}
                 </span>
               </div>
@@ -53,13 +53,13 @@
                 flat no-caps dense
                 :label="$t('dashboard_client.pending_schedules.cancel_btn')"
                 color="primary"
-                size="sm"
+                size="xs"
                 class="q-mr-sm flex-shrink-0"
                 @click="$emit('cancel', item)"
               />
               <q-space />
-              <q-icon name="mdi-map-marker-outline" size="13px" color="grey-6" class="q-mr-xs flex-shrink-0" />
-              <span class="text-caption text-grey-6 col ellipsis text-right">
+              <span class="font9 fontregular text-grey-6 col ellipsis text-right">
+                <q-icon name="mdi-map-marker-outline" size="13px" color="grey-6" class="q-mr-xs flex-shrink-0" />
                 {{ [item.address?.address, item.address?.number, item.address?.district].filter(Boolean).join(', ') || '—' }}
               </span>
             </div>
@@ -122,8 +122,8 @@ const seeDetails = (item) => {
 }
 
 .clock-badge {
-  width: 36px;
-  height: 36px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
   background: linear-gradient(135deg, #8B5CF6, #EC4899);
   display: flex;
@@ -132,7 +132,6 @@ const seeDetails = (item) => {
 }
 
 .badge-status-text {
-  font-size: 10px;
   white-space: nowrap;
 }
 

src/components/dashboard/DashboardProvidersClose.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="q-mx-md q-mb-lg">
     <div class="row items-center justify-between no-wrap q-mb-sm">
-      <div class="dashboard-section-title gradient-diarista">{{ $t('dashboard_client.providers_close.title') }}</div>
+      <div class="dashboard-section-title gradient-diarista font16 fontbold">{{ $t('dashboard_client.providers_close.title') }}</div>
       <div class="text-text-light">
-        <q-btn flat color="text-light" icon="mdi-chevron-left" @click="setPeriodTypePrevious"/>
-        <span>{{ showCorrectLabels() }}</span>
-        <q-btn flat color="text-light" icon="mdi-chevron-right" @click="setPeriodTypeNext"/>
+        <q-btn flat color="text-light" size="sm" icon="mdi-chevron-left" @click="setPeriodTypePrevious"/>
+        <span class="font10 fontbold">{{ showCorrectLabels() }}</span>
+        <q-btn flat color="text-light" size="sm" icon="mdi-chevron-right" @click="setPeriodTypeNext"/>
       </div>
     </div>
 
@@ -19,7 +19,7 @@
         <q-card-section class="row no-wrap q-pa-sm">
           <div class="row no-wrap full-width">
             <div class="col-2">
-              <q-avatar :style="avatarColors[p.provider_id % avatarColors.length]" class="text-weight-bold">
+              <q-avatar :style="avatarColors[p.provider_id % avatarColors.length]" class="">
                 <img v-if="p.provider_photo" :src="p.provider_photo" style="object-fit:cover;border-radius:50%;" />
                 <span v-else>{{ p.provider_name?.slice(0,1).toUpperCase() ?? '—' }}</span>
               </q-avatar>
@@ -27,28 +27,28 @@
 
             <div class="col-10 row">
               <div class="column col-9 justify-between">
-                <span class="text-provider-close-name">{{ p.provider_name ?? 'Prestador' }}</span>
-                <span class="text-provider-close-region">{{ p.district }}</span>
+                <span class="text-provider-close-name font12 fontmedium">{{ p.provider_name ?? 'Prestador' }}</span>
+                <span class="text-provider-close-region font9 fontmedium">{{ p.district }}</span>
                 <div class="row items-center justify-between q-pr-lg">
                   <div class="row items-center">
-                    <q-icon name="mdi-star" color="warning" size="16px" />
-                    <span class="text-provider-close-rating">
+                    <q-icon name="mdi-star" color="warning" size="12px" />
+                    <span class="text-provider-close-rating font9 fontmedium">
                       {{ p.average_rating != null ? (Number(p.average_rating).toFixed(1) + ' (' + (p.total_reviews ?? 0) + ')') : ('(' + (p.total_reviews ?? 0) + ')') }}
                     </span>
                   </div>
                   <div class="row items-center">
                     <q-icon name="mdi-broom" color="secondary" size="16px" />
-                    <span class="text-provider-close-jobs">{{ p.total_services ?? 0 }}</span>
+                    <span class="text-provider-close-jobs font9 fontmedium">{{ p.total_services ?? 0 }}</span>
                   </div>
                   <div class="row items-center">
                     <q-icon name="mdi-map-marker-outline" color="text" size="16px" />
-                    <span class="text-provider-close-jobs">{{ (p.distance_km ?? '--') + ' km' }}</span>
+                    <span class="text-provider-close-jobs font9 fontmedium">{{ (p.distance_km ?? '--') + ' km' }}</span>
                   </div>
                 </div>
               </div>
 
               <div class="column col-3 justify-between text-center items-center">
-                <span class="text-provider-close-price">
+                <span class="text-provider-close-price font12 fontmedium">
                   {{ showCorrectValues(p) }}
                 </span>
                 <div class="full-width">

src/components/dashboard/DashboardRegistrationIncomplete.vue

@@ -2,7 +2,7 @@
   <div class="incomplete-banner q-ma-md" @click="openEdit">
     <div class="row items-center no-wrap q-pa-sm q-px-md">
       <q-icon name="mdi-alert-outline" size="26px" color="primary" class="q-mr-md" />
-      <div class="col banner-text text-primary">
+      <div class="col banner-text font12 fontmedium text-primary">
         {{ $t('dashboard_client.registration_incomplete_title') }}
       </div>
       <q-btn
@@ -11,7 +11,7 @@
         color="primary"
         text-color="white"
         :label="$t('dashboard_client.registration_incomplete_cta')"
-        class="q-ml-sm resolver-btn"
+        class="q-ml-sm resolver-btn font9"
       />
     </div>
   </div>
@@ -43,15 +43,12 @@ const openEdit = () => {
 }
 
 .banner-text {
-  font-size: 13px;
-  font-weight: 500;
   line-height: 1.3;
 }
 
 .resolver-btn {
   border-radius: 20px;
   padding: 0px 4px;
-  font-size: 11px;
   white-space: nowrap;
   flex-shrink: 0;
 }

src/components/dashboard/DashboardSummaryInfos.vue

@@ -3,26 +3,26 @@
     <q-card-section class="q-pa-md">
       <div class="row items-center no-wrap q-gutter-x-md">
         <div class="row items-center no-wrap q-gutter-x-sm col">
-          <q-avatar size="54px" :style="avatarStyle" class="text-weight-bold text-h6">
+          <q-avatar size="54px" :style="avatarStyle" class="text-h6">
             <img v-if="data?.profile_photo" :src="data.profile_photo" style="object-fit:cover;border-radius:50%;" />
             <span v-else>{{ data?.name?.slice(0, 2).toUpperCase() ?? '??' }}</span>
           </q-avatar>
           <div class="column q-gutter-y-xs min-width-0">
-            <span class="summary-greeting text-greeting">{{ $t('dashboard_client.summary.welcome') }}</span>
-            <span class="summary-name text-name text-primary">{{ data?.name ?? $t('dashboard_client.summary.welcome') }}</span>
+            <span class="summary-greeting text-greeting font12 fontemedium">{{ $t('dashboard_client.summary.welcome') }}</span>
+            <span class="summary-name text-name text-primary font16 fontbold">{{ data?.name ?? $t('dashboard_client.summary.welcome') }}</span>
           </div>
         </div>
         <div class="column items-end q-gutter-y-xs col-auto">
-          <span class="summary-label text-label-bold text-grey-6">{{ $t('dashboard_client.summary.my_schedules') }}</span>
+          <span class="summary-label font12 fontbold text-grey-6">{{ $t('dashboard_client.summary.my_schedules') }}</span>
           <span class="summary-count row">
-            <q-icon name="mdi-clock-check-outline" class="q-my-auto" size="sm" color="grey-6" />
+            <q-icon name="mdi-clock-check-outline" class="q-my-auto" size="xs" color="positive" />
             <span class="q-my-auto q-ml-sm">{{ data?.pending_services ?? 0 }}</span>
           </span>
         </div>
       </div>
 
       <div class="row items-center justify-between no-wrap q-mt-xs">
-        <div class="summary-address text-caption text-text ellipsis col">
+        <div class="summary-address font8 fontmedium text-text ellipsis col">
           {{ formatAddress(data.address) }}
         </div>
         <q-icon name="mdi-chevron-down" color="secondary" size="18px" class="col-auto" />
@@ -49,9 +49,6 @@ const avatarStyle = {
 .summary-name { display: block; line-height: 1.1; }
 .summary-label { white-space: nowrap; }
 .summary-count {
-  font-family: "Inter", sans-serif;
-  font-size: 20px;
-  font-weight: 500;
   color: #3a3a4a;
 }
 .summary-address {

src/components/dashboard/DashboardTodaySchedules.vue

@@ -12,20 +12,20 @@
             <div class="row no-wrap items-start q-mb-xs">
               <q-avatar size="40px" class="flex-shrink-0 q-mr-sm">
                 <img v-if="item.provider_photo" :src="item.provider_photo" />
-                <span v-else :style="avatarColors[item.id % avatarColors.length]" class="text-weight-bold full-width full-height flex flex-center" style="font-size:14px; border-radius:50%;">
+                <span v-else :style="avatarColors[item.id % avatarColors.length]" class="full-width full-height flex flex-center" style="border-radius:50%;">
                   {{ item.provider_name?.slice(0, 2).toUpperCase() ?? '??' }}
                 </span>
               </q-avatar>
               <div class="col-7 column no-wrap overflow-hidden justify-center">
-                <span class="text-caption text-text leading-tight">
+                <span class="font12 fontmedium text-text leading-tight">
                   <template v-if="cardState(item) === 'awaiting_code'">{{ $t('dashboard_client.today_schedules.start_with') }}</template>
                   <template v-else-if="cardState(item) === 'in_progress'">{{ $t('dashboard_client.today_schedules.started_by') }}</template>
                   <template v-else>{{ $t('dashboard_client.today_schedules.finished_by') }}</template>
-                  <span class="text-weight-bold"> {{ ' ' +  item.provider_name ?? '—' }}</span>
+                  <span class="fontbold"> {{ ' ' +  item.provider_name.split(' ')[0] ?? '—' }}</span>
                 </span>
                 <div class="row items-center q-mt-xs no-wrap">
                   <q-icon name="mdi-clock-outline" size="13px" class="q-mr-xs gradient-diarista" />
-                  <span class="hours-font text-grey-5">
+                  <span class="font9 fontregular text-grey-6">
                     {{ $t('dashboard_client.next_schedules.from') }} {{ item.start_time?.slice(0, 5) }} {{ $t('dashboard_client.next_schedules.to') }} {{ item.end_time?.slice(0, 5) }}
                   </span>
                 </div>
@@ -33,8 +33,8 @@
               <div class="flex-shrink-0 q-ml-sm column items-center justify-start">
                 <template v-if="cardState(item) === 'awaiting_code'">
                   <div class="column items-center">
-                    <span class="text-caption text-primary q-mb-xs">{{ $t('dashboard_client.today_schedules.code_label') }}</span>
-                    <div class="code-pill bg-primary">{{ item.code }}</div>
+                    <span class="font9 fontbold text-primary q-mb-xs">{{ $t('dashboard_client.today_schedules.code_label') }}</span>
+                    <div class="code-pill fontbold font10 bg-primary">{{ item.code }}</div>
                   </div>
                 </template>
 
@@ -43,7 +43,7 @@
                     <div class="clock-badge">
                       <q-icon name="mdi-clock-outline" size="15px" color="white" />
                     </div>
-                    <span class="badge-status-text text-primary text-weight-bold q-mt-xs">
+                    <span class="font10 fontregular badge-status-text text-primary q-mt-xs">
                       {{ $t('dashboard_client.today_schedules.in_progress') }}
                     </span>
                   </div>
@@ -79,20 +79,20 @@
                   flat no-caps dense
                   :label="$t('dashboard_client.today_schedules.help_btn')"
                   color="primary"
-                  size="sm"
+                  size="xs"
                   class="flex-shrink-0"
                   @click.stop="openHelp"
                 />
                 <q-space />
                 <template v-if="cardState(item) === 'awaiting_code'">
-                  <q-icon name="mdi-map-marker-outline" size="13px" color="grey-6" class="q-mr-xs flex-shrink-0" />
-                  <span class="text-caption text-grey-6 col ellipsis text-right">
+                  <span class="font9 fontregular text-grey-6 col ellipsis text-right">
+                    <q-icon name="mdi-map-marker-outline" size="13px" color="grey-6" class="q-mr-xs flex-shrink-0" />
                     {{ [item.address?.address, item.address?.number, item.address?.district].filter(Boolean).join(', ') || '—' }}
                   </span>
                 </template>
                 <template v-else>
                   <q-icon name="mdi-clock-outline" size="13px" class="q-mr-xs flex-shrink-0 gradient-diarista" />
-                  <span class="text-caption text-grey-6 text-right text-no-wrap">
+                  <span class="font9 fontregular text-grey-6 text-right text-no-wrap">
                     {{ $t('dashboard_client.today_schedules.end_time_label') }} 
                     <span class="gradient-diarista">{{ item.end_time?.slice(0, 5) }}</span>
                   </span>
@@ -164,8 +164,6 @@ const openHelp = () => {
 
 .code-pill {
   color: white;
-  font-weight: 700;
-  font-size: 11px;
   letter-spacing: 1px;
   border-radius: 20px;
   padding: 4px 10px;
@@ -182,15 +180,12 @@ const openHelp = () => {
 }
 
 .badge-status-text {
-  font-size: 9px;
   white-space: nowrap;
 }
 
 .rate-btn {
   background: #EC4899;
   color: white;
-  font-weight: 600;
-  font-size: 11px;
   white-space: nowrap;
   border-radius: 10px !important;
   min-width: 45px;
@@ -205,7 +200,6 @@ const openHelp = () => {
 .reviewed-badge {
   cursor: default;
   opacity: 0.85;
-  font-size: 11px;
 }
 
 .progress-track {
@@ -227,7 +221,4 @@ const openHelp = () => {
   }
 }
 
-.hours-font {
-  font-size: 11px;
-}
 </style>

src/components/dashboard/NextSchedulesDetailsDialog.vue

@@ -3,18 +3,21 @@
     <q-card class="next-schedule-dialog-card bg-surface" :flat="false">
 
       <q-card-section class="column items-center q-pt-lg q-pb-sm">
-        <q-avatar size="80px" :style="avatarStyle" class="text-weight-bold text-h5 q-mb-sm">
+        <q-avatar size="80px" :style="avatarStyle" class="fontbold text-h5 q-mb-sm">
           <img v-if="details?.provider_photo" :src="details.provider_photo" />
           <span v-else>{{ schedule.provider_name?.slice(0, 2).toUpperCase() ?? '??' }}</span>
         </q-avatar>
 
-        <div class="provider-name text-weight-bold">
+        <div class="provider-name font16 fontbold">
           {{ schedule.provider_name }}
-          <span v-if="providerAge !== null" class="text-caption text-grey-6 text-weight-regular">
+          <span v-if="providerAge !== null" class=" text-grey-6">
             {{ '(' + providerAge + ' ' + $t('dashboard_client.next_schedules.provider_age_unit') + ')' }}
           </span>
         </div>
-        <div v-if="schedule.address" class="text-caption text-grey-6 q-mt-xs">
+        <div class="text-text font12 fontbold">
+          {{ schedule.address?.district }}
+        </div>
+        <div v-if="schedule.address" class="font9 fontmedium text-grey-7 q-mt-xs">
           <q-icon name="mdi-map-marker" color="text" size="14px" class="q-mr-xs" />
           {{ formatAddress(schedule.address) }}
         </div>
@@ -38,28 +41,28 @@
               <q-icon
                 :name="sp.has_speciality ? 'mdi-check' : 'mdi-close'"
                 color="primary"
-                size="16px"
+                size="12px"
               />
-              <span class="text-body2 text-grey-8 q-pl-sm">{{ sp.description }}</span>
+              <span class="text-grey-8 font10 fontmedium q-pl-sm">{{ sp.description }}</span>
             </div>
           </div>
           <div v-if="!details?.specialities?.length" class="row items-center q-gutter-x-sm">
             <q-icon name="mdi-check" color="secondary" size="16px" />
-            <span class="text-body2 text-grey-8">{{ $t('dashboard_client.next_schedules.default_service') }}</span>
+            <span class="text-grey-8 font10 fontmedium">{{ $t('dashboard_client.next_schedules.default_service') }}</span>
           </div>
         </template>
       </q-card-section>
 
       <q-separator class="q-mx-lg divisoria-tracejada" />
 
-      <q-card-section class="q-py-md q-px-lg">
+      <q-card-section class="q-py-md q-px-lg font12 fontmedium">
         <div class="detail-row">
           <span class="detail-label text-primary q-pr-sm">{{ $t('dashboard_client.pending_schedules.detail_date') }}</span>
           <span class="detail-value">{{ fullDateLabel }}</span>
         </div>
         <div class="detail-row">
           <span class="detail-label text-primary q-pr-sm">{{ $t('dashboard_client.pending_schedules.detail_time') }}</span>
-          <span class="detail-value text-weight-bold">
+          <span class="detail-value">
             {{ schedule.start_time?.slice(0, 5) }} {{ $t('dashboard_client.next_schedules.to') }} {{ schedule.end_time?.slice(0, 5) }}
           </span>
         </div>
@@ -72,8 +75,8 @@
           <span class="detail-value">{{ formatCurrency(serviceFee) }}</span>
         </div>
 
-        <div class="detail-row-total">
-          <span class="detail-label text-weight-bold text-primary q-pr-sm">{{ $t('dashboard_client.pending_schedules.detail_total') }}</span>
+        <div class="detail-row-total font16 fontbold">
+          <span class="detail-label text-primary q-pr-sm">{{ $t('dashboard_client.pending_schedules.detail_total') }}</span>
           <span class="total-value">{{ formatCurrency(total) }}</span>
         </div>
         
@@ -221,7 +224,6 @@ const openHelp = () => {
 }
 
 .provider-name {
-  font-size: 18px;
   color: #8B5CF6;
 }
 
@@ -239,25 +241,19 @@ const openHelp = () => {
 }
 
 .detail-label {
-  font-size: 15px;
   color: #8a8a9a;
 }
 
 .detail-value {
-  font-size: 13px;
   color: #3a3a4a;
 }
 
 .total-value {
-  font-size: 18px;
-  font-weight: 700;
   color: #3a3a4a;
 }
 
 .close-btn {
   color: white;
-  font-weight: 700;
-  font-size: 15px;
   height: 48px;
 }
 

src/components/dashboard/ScheduleAcceptedDialog.vue

@@ -3,16 +3,16 @@
     <q-card class="accepted-dialog-card bg-surface" :flat="false">
 
       <q-card-section class="column items-center q-pt-lg q-pb-sm">
-        <q-avatar size="80px" :style="avatarStyle" class="text-weight-bold text-h5 q-mb-sm">
+        <q-avatar size="80px" :style="avatarStyle" class="text-h5 q-mb-sm">
           {{ schedule.provider_name?.slice(0, 2).toUpperCase() ?? '??' }}
         </q-avatar>
 
-        <div class="text-h6 text-weight-bold provider-name">{{ schedule.provider_name }}</div>
-        <div class="text-caption text-text">{{ schedule.provider_district || '' }}</div>
+        <div class="font16 fontbold provider-name">{{ schedule.provider_name }}</div>
+        <div class="font14 fontmedium text-text">{{ schedule.address?.district || '' }}</div>
       </q-card-section>
 
       <q-card-section class="text-center q-pt-xs q-pb-md">
-        <div class="accepted-title text-weight-bold">
+        <div class="accepted-title font16 fontbold">
           {{ $t('dashboard_client.pending_schedules.accepted_title') }}
         </div>
       </q-card-section>
@@ -21,38 +21,38 @@
 
       <q-card-section class="q-py-md q-px-lg">
         <div class="detail-row">
-          <span class="detail-label">{{ $t('dashboard_client.pending_schedules.detail_date') }}</span>
+          <span class="text-primary font14 fontmedium">{{ $t('dashboard_client.pending_schedules.detail_date') }}</span>
           <span class="detail-value">{{ formattedDate }}</span>
         </div>
         <div class="detail-row">
-          <span class="detail-label">{{ $t('dashboard_client.pending_schedules.detail_time') }}</span>
-          <span class="detail-value text-weight-bold">
+          <span class="text-primary font14 fontmedium">{{ $t('dashboard_client.pending_schedules.detail_time') }}</span>
+          <span class="detail-valued text-text">
             {{ schedule.start_time?.slice(0, 5) }} {{ $t('dashboard_client.next_schedules.to') }} {{ schedule.end_time?.slice(0, 5) }}
           </span>
         </div>
         <div class="detail-row">
-          <span class="detail-label">{{ $t('dashboard_client.pending_schedules.detail_value') }}</span>
+          <span class="text-primary font14 fontmedium">{{ $t('dashboard_client.pending_schedules.detail_value') }}</span>
           <span class="detail-value">{{ formatCurrency(schedule.total_amount) }}</span>
         </div>
         <div class="detail-row">
-          <span class="detail-label">{{ $t('dashboard_client.pending_schedules.detail_service_fee') }}</span>
+          <span class="text-primary font14 fontmedium">{{ $t('dashboard_client.pending_schedules.detail_service_fee') }}</span>
           <span class="detail-value">{{ formatCurrency(serviceFee) }}</span>
         </div>
 
         <q-separator class="q-my-sm" />
 
-        <div class="detail-row">
-          <span class="detail-label text-weight-bold text-text">{{ $t('dashboard_client.pending_schedules.detail_total') }}</span>
-          <span class="total-value">{{ formatCurrency(total) }}</span>
+        <div class="text-center">
+          <span class="text-primary font14 fontmedium">{{ $t('dashboard_client.pending_schedules.detail_total') }}</span>
+          <span class="total-value font14 fontbold q-ml-sm">{{ formatCurrency(total) }}</span>
         </div>
       </q-card-section>
 
       <q-card-section class="q-pt-none q-pb-lg q-px-lg column q-gutter-y-sm">
         <q-btn
-          unelevated
           rounded
-          no-caps
+          color="primary"
           class="payment-btn full-width"
+          padding="4px 12px"
           :label="$t('dashboard_client.pending_schedules.btn_payment')"
           @click="onGoToPayment"
         />
@@ -61,6 +61,7 @@
           no-caps
           color="grey-6"
           class="full-width"
+          padding="4px 12px"
           :label="$t('dashboard_client.pending_schedules.btn_cancel')"
           @click="onDialogHide"
         />
@@ -138,7 +139,6 @@ const avatarStyle = computed(() => avatarColors[props.schedule.id % avatarColors
 }
 
 .accepted-title {
-  font-size: 22px;
   line-height: 1.3;
   color: #8B5CF6;
 }
@@ -155,26 +155,18 @@ const avatarStyle = computed(() => avatarColors[props.schedule.id % avatarColors
 }
 
 .detail-label {
-  font-size: 13px;
   color: #8a8a9a;
 }
 
 .detail-value {
-  font-size: 13px;
   color: #3a3a4a;
 }
 
 .total-value {
-  font-size: 18px;
-  font-weight: 700;
   color: #3a3a4a;
 }
 
 .payment-btn {
-  background: linear-gradient(90deg, #8B5CF6, #EC4899);
-  color: white;
-  font-weight: 700;
-  font-size: 15px;
   height: 48px;
 }
 </style>

src/components/dashboard/ScheduleCancelDialog.vue

@@ -7,13 +7,13 @@
       </div>
 
       <q-card-section class="q-pt-none q-pb-sm q-px-lg text-center">
-        <div class="cancel-title text-secondary text-weight-bold">
+        <div class="cancel-title text-primary font16 fontbold">
           {{ $t('provider.dashboard.cancel_schedule.title') }}
         </div>
       </q-card-section>
 
       <q-card-section class="q-pt-none q-pb-sm q-px-lg">
-        <div class="text-body2 text-grey-8 text-weight-bold q-mb-xs">
+        <div class="font14 fontbold text-grey-8 q-mb-xs text-center">
           {{ $t('provider.dashboard.cancel_schedule.reason_label') }}
         </div>
         <q-input
@@ -33,17 +33,16 @@
       <q-card-section class="q-pt-xs q-pb-md q-px-lg">
         <div class="warning-box row no-wrap q-gutter-x-sm q-pa-sm">
           <q-icon name="mdi-alert-outline" color="secondary" size="22px" class="q-mt-xs flex-shrink-0" />
-          <div>
-            <span class="text-caption text-weight-bold text-grey-9">
+          <div class="text-primary">
+            <span class="font14 fontbold">
               {{ $t('provider.dashboard.cancel_schedule.warning_title') }}
             </span>
-            <span class="text-caption text-grey-8">
+            <span class="">
               {{ ' ' + $t('provider.dashboard.cancel_schedule.warning_free') }}
             </span>
-            <br />
-            <span class="text-caption text-grey-8">
+            <div class="q-mt-sm">
               {{ $t('provider.dashboard.cancel_schedule.warning_fee') }}
-            </span>
+            </div>
           </div>
         </div>
       </q-card-section>
@@ -54,9 +53,11 @@
             unelevated
             rounded
             no-caps
-            class="btn-action bg-grey-3 text-grey-8"
-            :label="$t('provider.dashboard.cancel_schedule.btn_back')"
-            @click="onDialogCancel"
+            class="btn-action bg-grey-6 text-grey-1"
+            :loading="loading"
+            :disable="!cancelText || cancelText.trim().length < 5"
+            :label="$t('provider.dashboard.cancel_schedule.btn_keep')"
+            @click="confirmCancel"
           />
           <q-btn
             unelevated
@@ -64,10 +65,8 @@
             no-caps
             color="secondary"
             class="btn-action"
-            :loading="loading"
-            :disable="!cancelText || cancelText.trim().length < 5"
-            :label="$t('provider.dashboard.cancel_schedule.btn_keep')"
-            @click="confirmCancel"
+            :label="$t('provider.dashboard.cancel_schedule.btn_back')"
+            @click="onDialogCancel"
           />
         </div>
       </q-card-section>
@@ -119,7 +118,6 @@ const confirmCancel = async () => {
 }
 
 .cancel-title {
-  font-size: 18px;
   line-height: 1.35;
 }
 
@@ -130,7 +128,6 @@ const confirmCancel = async () => {
 
 .btn-action {
   min-width: 110px;
-  font-weight: 700;
 }
 
 .flex-shrink-0 {

src/components/dashboard/SchedulePaymentDialog.vue

@@ -5,7 +5,7 @@
       <div class="row items-center q-px-md q-pt-md q-pb-sm bg-surface shadow-header">
         <q-btn icon="mdi-chevron-left" flat round dense color="primary" @click="onDialogCancel" />
         <q-space />
-        <span class="text-subtitle1 text-weight-bold text-primary">
+        <span class="font16 fontbold gradient-diarista">
           {{ $t('payment.title') }}
         </span>
         <q-space />
@@ -14,16 +14,16 @@
 
       <div class="col overflow-auto q-px-md q-pt-lg q-pb-xl">
 
-        <div class="section-label q-mb-sm">{{ $t('payment.schedule_address') }}</div>
+        <div class="q-mb-sm text-text font14 fontbold">{{ $t('payment.schedule_address') }}</div>
         <div class="address-box row items-center no-wrap q-mb-lg">
           <div class="col">
-            <div class="address-type-label">{{ addressTypeLabel }}</div>
+            <div class="address-type-label fontbold">{{ addressTypeLabel }}</div>
             <div class="address-full-text text-grey-7">{{ addressFullText }}</div>
           </div>
           <q-icon name="mdi-chevron-down" color="grey-5" size="22px" />
         </div>
 
-        <div class="section-label q-mb-sm">{{ $t('payment.pay_with') }}</div>
+        <div class="text-text q-mb-sm font14 fontbold">{{ $t('payment.pay_with') }}</div>
         <div class="row q-gutter-sm q-mb-sm">
 
           <div
@@ -61,7 +61,7 @@
           >
             <div class="col column">
               <span class="card-titular-label">{{ $t('payment.card_holder') }}</span>
-              <span class="card-holder-name">{{ card.holder_name }}</span>
+              <span class="card-holder-name text-text">{{ card.holder_name }}</span>
             </div>
             <div class="column items-end">
               <span class="card-brand-text">{{ brandDisplay(card.brand) }}</span>
@@ -77,7 +77,7 @@
           <q-checkbox v-model="agreedToTerms" color="primary" keep-color />
           <span class="terms-text">
             {{ $t('payment.agree_prefix') }}
-            <span class="text-primary text-weight-bold cursor-pointer text-underline">{{ $t('payment.terms_link') }}</span>
+            <span class="text-primary cursor-pointer text-underline">{{ $t('payment.terms_link') }}</span>
           </span>
         </div>
 
@@ -85,8 +85,9 @@
           unelevated
           rounded
           no-caps
+          padding="8px 12px"
           color="primary"
-          class="full-width confirm-btn"
+          class="full-width"
           :label="$t('payment.confirm_btn')"
           :disable="!canConfirm"
           @click="onConfirm"
@@ -187,7 +188,6 @@ const onConfirm = () => {
     openPixPayment()
     return
   }
-
   const clientPaymentMethodId = Number(String(selectedMethod.value).replace('card_', ''))
 
   $q.dialog({
@@ -213,11 +213,6 @@ onMounted(() => {
   box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
 }
 
-.section-label {
-  font-size: 15px;
-  font-weight: 700;
-  color: #3a3a4a;
-}
 
 .address-box {
   border: 1px solid #e0e0e0;
@@ -227,13 +222,10 @@ onMounted(() => {
 }
 
 .address-type-label {
-  font-size: 14px;
-  font-weight: 700;
   color: #3a3a4a;
 }
 
 .address-full-text {
-  font-size: 12px;
   line-height: 1.4;
   margin-top: 2px;
 }
@@ -253,13 +245,10 @@ onMounted(() => {
 }
 
 .payment-option-title {
-  font-size: 15px;
-  font-weight: 700;
   color: #3a3a4a;
 }
 
 .payment-option-sub {
-  font-size: 11px;
   color: #9a9aaa;
   margin-top: 2px;
 }
@@ -272,36 +261,28 @@ onMounted(() => {
 }
 
 .card-titular-label {
-  font-size: 11px;
   color: #9a9aaa;
 }
 
 .card-holder-name {
-  font-size: 14px;
-  font-weight: 600;
   color: #3a3a4a;
 }
 
 .card-brand-text {
-  font-size: 14px;
-  font-weight: 700;
   color: #3a3a4a;
   text-align: right;
 }
 
 .card-last-four {
-  font-size: 13px;
   color: #6a6a7a;
   letter-spacing: 1px;
 }
 
 .card-expiry-text {
-  font-size: 12px;
   color: #9a9aaa;
 }
 
 .terms-text {
-  font-size: 13px;
   color: #5a5a6a;
   line-height: 1.4;
 }
@@ -310,9 +291,4 @@ onMounted(() => {
   text-decoration: underline;
 }
 
-.confirm-btn {
-  font-size: 16px;
-  font-weight: 700;
-  height: 52px;
-}
 </style>

src/components/dashboard/SchedulePaymentPixDialog.vue

@@ -5,7 +5,7 @@
       <div class="row items-center q-px-md q-pt-md q-pb-sm bg-surface shadow-header">
         <q-btn icon="mdi-chevron-left" flat round dense color="primary" @click="onDialogCancel" />
         <q-space />
-        <span class="text-subtitle1 text-weight-bold text-primary">
+        <span class="font16 fontbold gradient-diarista">
           {{ $t('payment.pix_title') }}
         </span>
         <q-space />
@@ -21,7 +21,7 @@
         <div class="success-icon-wrapper q-mb-lg">
           <q-icon name="mdi-check-circle" size="100px" color="primary" />
         </div>
-        <div class="success-title text-primary text-weight-bold text-center q-mb-sm">
+        <div class="success-title text-primary text-center q-mb-sm">
           {{ $t('payment.success_title') }}
         </div>
         <i18n-t keypath="payment.success_message" tag="div" class="success-message text-grey-6 text-center">
@@ -36,7 +36,7 @@
 
       <div v-else-if="processing" class="col column items-center justify-center q-px-xl">
         <q-spinner-oval color="primary" size="72px" class="q-mb-lg" />
-        <div class="processing-title text-primary text-weight-bold text-center q-mb-sm">
+        <div class="processing-title text-primary text-center q-mb-sm">
           {{ $t('payment.processing_title') }}
         </div>
         <div class="processing-message text-grey-6 text-center">
@@ -47,14 +47,14 @@
       <div v-else class="pix-payment-content col scroll q-px-lg q-pt-lg q-pb-xl column">
 
         <div class="row items-center justify-between q-mb-sm">
-          <span class="pix-label">{{ $t('payment.pix_total') }}</span>
-          <span class="pix-value text-primary">{{ formatCurrency(total) }}</span>
+          <span class="pix-label font14 fontbold">{{ $t('payment.pix_total') }}</span>
+          <span class="text-primary font14 fontbold">{{ formatCurrency(total) }}</span>
         </div>
         <q-separator />
 
         <div class="row items-center justify-between q-mt-sm q-mb-lg">
-          <span class="pix-label">{{ $t('payment.pix_expires') }}</span>
-          <span class="pix-value text-primary">{{ countdown }}</span>
+          <span class="pix-label font14 fontbold">{{ $t('payment.pix_expires') }}</span>
+          <span class="text-primary font14 fontbold">{{ countdown }}</span>
         </div>
 
         <div class="flex flex-center q-mb-md">
@@ -82,20 +82,25 @@
           rounded
           no-caps
           color="primary"
-          class="full-width copy-btn q-mb-lg"
+          padding="4px 12px"
+          class="full-width q-mb-lg"
           :label="$t('payment.pix_copy_btn')"
           :loading="processing"
           @click="copyCode"
         />
 
-        <!--
-        <p class="pix-instructions-text q-mb-sm">
-          <strong>{{ $t('payment.pix_instructions') }}</strong>
-        </p>
-        <p class="pix-instructions-text text-grey-6">
-          {{ $t('payment.pix_email_note') }}
-        </p>
-        !-->
+        <i18n-t keypath="payment.pix_instructions" tag="p" class="pix-instructions-text font14 q-mb-sm">
+          <template #copyCode>
+            <span class="fontbold">{{ $t('payment.pix_copy_code') }}</span>
+          </template>
+          <template #pasteCode>
+            <span class="fontbold">{{ $t('payment.pix_paste_code') }}</span>
+          </template>
+          <template #finalize>
+            <span class="fontbold">{{ $t('payment.pix_finalize') }}</span>
+          </template>
+        </i18n-t>
+        <p class="pix-instructions-text font14">{{ $t('payment.pix_email_note') }}</p>
       </div>
     </div>
   </q-dialog>
@@ -199,14 +204,7 @@ onUnmounted(() => {
 }
 
 .pix-label {
-  font-size: 15px;
   color: #3a3a4a;
-  font-weight: 500;
-}
-
-.pix-value {
-  font-size: 15px;
-  font-weight: 700;
 }
 
 .qrcode-wrapper {
@@ -217,7 +215,6 @@ onUnmounted(() => {
 }
 
 .pix-code-text {
-  font-size: 11px;
   color: #5a5a6a;
   text-align: center;
   word-break: break-all;
@@ -227,15 +224,9 @@ onUnmounted(() => {
   padding: 10px;
 }
 
-.copy-btn {
-  font-size: 16px;
-  font-weight: 700;
-  height: 52px;
-}
 
 .pix-instructions-text {
   align-self: stretch;
-  font-size: 13px;
   line-height: 1.5;
   color: #3a3a4a;
   margin-left: 0;
@@ -253,13 +244,11 @@ onUnmounted(() => {
 }
 
 .success-title {
-  font-size: 24px;
   line-height: 1.3;
   max-width: 280px;
 }
 
 .success-message {
-  font-size: 14px;
   line-height: 1.6;
   max-width: 280px;
 }

src/components/dashboard/SchedulePaymentProcessingDialog.vue

@@ -4,7 +4,7 @@
 
       <template v-if="!success">
         <q-spinner-oval color="primary" size="72px" class="q-mb-lg" />
-        <div class="processing-title text-primary text-weight-bold text-center q-mb-sm">
+        <div class="processing-title text-primary text-center q-mb-sm">
           {{ $t('payment.processing_title') }}
         </div>
         <div class="processing-message text-grey-6 text-center">
@@ -22,18 +22,14 @@
           @click="onDialogOK"
         />
         <img
-          src="/logo_diaria_branco.svg"
+          :src="LogoDiariaSucesso"
           alt="mascote"
           class="success-mascot q-mb-lg"
-          style="display:none"
         />
-        <div class="success-icon-wrapper q-mb-lg">
-          <q-icon name="mdi-check-circle" size="100px" color="primary" />
-        </div>
-        <div class="success-title text-primary text-weight-bold text-center q-mb-sm">
+        <div class="success-title font16 fontbold text-primary text-center q-mb-sm">
           {{ $t('payment.success_title') }}
         </div>
-        <i18n-t keypath="payment.success_message" tag="div" class="success-message text-grey-6 text-center">
+        <i18n-t keypath="payment.success_message" tag="div" class="success-message text-grey-6 text-center font14">
           <template #nextServices>
             <strong class="text-text">{{ $t('payment.success_next_services') }}</strong>
           </template>
@@ -50,6 +46,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useDialogPluginComponent, useQuasar } from 'quasar'
+import LogoDiariaSucesso from 'src/assets/diarinho-success-payment.svg';
 import { paySchedule } from 'src/api/payment'
 
 const props = defineProps({
@@ -86,12 +83,10 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 .processing-title {
-  font-size: 22px;
   line-height: 1.3;
 }
 
 .processing-message {
-  font-size: 15px;
   line-height: 1.5;
   max-width: 280px;
 }
@@ -103,13 +98,11 @@ onMounted(async () => {
 }
 
 .success-title {
-  font-size: 24px;
   line-height: 1.3;
   max-width: 280px;
 }
 
 .success-message {
-  font-size: 14px;
   line-height: 1.6;
   max-width: 280px;
 }

src/components/dashboard/ScheduleRatingDialog.vue

@@ -10,13 +10,13 @@
         <q-avatar size="64px" class="q-mb-sm">
           <span
             :style="avatarStyle"
-            class="text-weight-bold full-width full-height flex flex-center"
-            style="font-size: 20px; border-radius: 50%;"
+            class="full-width full-height flex flex-center"
+            style="border-radius: 50%;"
           >
             {{ initials }}
           </span>
         </q-avatar>
-        <div class="text-body1 text-text  text-weight-bold text-center q-px-lg" style="line-height:1.3">
+        <div class="font16 fontbold text-text text-center q-px-lg" style="line-height:1.3">
           {{ $t('dashboard_client.schedule_rating.title') }}
           <span class="text-primary"> {{ schedule.provider_name + '?' }}</span>
         </div>
@@ -35,7 +35,7 @@
       </div>
 
       <q-card-section v-if="stars > 0" class="q-pt-xs q-pb-xs">
-        <div class="text-caption text-grey-7 text-center q-mb-sm">
+        <div class="text-grey-7 font14 fontbold text-center q-mb-sm">
           {{ isNegative ? $t('dashboard_client.schedule_rating.negative_label') : $t('dashboard_client.schedule_rating.positive_label') }}
         </div>
         <div v-if="loadingTags" class="row justify-center q-py-sm">
@@ -55,7 +55,7 @@
       </q-card-section>
 
       <q-card-section class="q-pt-xs q-pb-xs q-px-lg">
-        <div class="text-caption text-grey-7 q-mb-xs">
+        <div class="font14 fontbold text-text q-mb-xs text-center">
           {{ $t('dashboard_client.schedule_rating.comment_placeholder') }}
         </div>
         <q-input
@@ -110,6 +110,7 @@
           no-caps
           full-width
           color="primary"
+          padding="8px 12px"
           class="submit-btn col-12"
           :label="$t('dashboard_client.schedule_rating.submit_btn')"
           :loading="loading"
@@ -119,7 +120,7 @@
       </q-card-section>
 
       <q-card-section class="q-pt-xs q-pb-lg text-center">
-        <span class="text-caption text-grey-6 cursor-pointer" @click="openHelp">
+        <span class="text-text font12 fontbold cursor-pointer" @click="openHelp">
           {{ $t('dashboard_client.schedule_rating.help_link') }}
         </span>
       </q-card-section>
@@ -265,7 +266,6 @@ onMounted(async () => {
   border: 1.5px solid #d1d5db;
   border-radius: 20px;
   padding: 5px 14px;
-  font-size: 12px;
   color: #6b7280;
   cursor: pointer;
   transition: border-color 0.15s, color 0.15s;
@@ -274,13 +274,10 @@ onMounted(async () => {
   &--selected {
     border-color: #8B5CF6;
     color: #8B5CF6;
-    font-weight: 600;
   }
 }
 
 .submit-btn {
-  font-size: 15px;
-  font-weight: 700;
   padding: 10px 0;
 }
 
@@ -321,7 +318,6 @@ onMounted(async () => {
   flex-shrink: 0;
 
   &__label {
-    font-size: 9px;
     color: #9ca3af;
     text-align: center;
     margin-top: 2px;

src/components/defaults/DefaultFilePicker.vue

@@ -35,7 +35,7 @@
             class="absolute-center"
           />
           <div
-            class="text-caption text-grey-6 text-center absolute-bottom q-pb-sm q-px-md"
+            class="text-grey-6 text-center absolute-bottom q-pb-sm q-px-md"
           >
             {{
               isDragging
@@ -57,7 +57,7 @@
         <div v-else class="position-relative column full-height flex-center">
           <q-icon name="mdi-file-check" size="48px" color="grey-6" />
           <div
-            class="absolute-bottom text-caption text-grey-6 text-center q-mb-sm q-px-md"
+            class="absolute-bottom text-grey-6 text-center q-mb-sm q-px-md"
           >
             {{ model.name }}
           </div>

src/components/defaults/DefaultInputDatePicker.vue

@@ -163,84 +163,4 @@ watch(
 
 <style scoped lang="scss">
 
-.calendar-custom {
-  border-radius: 20px;
-  background-color: white !important;
-
-  :deep(.q-date__main) {
-    background-color: white !important;
-  }
-
-  :deep(.q-date__content) {
-    background-color: white !important;
-  }
-
-  :deep(.q-date__calendar) {
-    background-color: white !important;
-  }
-
-  :deep(.q-date__calendar-item--out) {
-    .q-btn__content {
-      color: #CBD5E1 !important;
-    }
-  }
-
-  :deep(.q-date__calendar-days .q-btn__content) {
-    font-family: 'Inter', sans-serif;
-    font-weight: 500;
-    color: #1E293B;
-  }
-
-  :deep(.q-date__calendar-weekdays > div) {
-    color: #6366F1;
-    font-weight: 700;
-    opacity: 0.8;
-  }
-
-  :deep(.q-date__navigation) {
-    .q-btn {
-      color: #1E293B !important;
-    }
-    .q-btn__content {
-      color: #1E293B !important;
-    }
-  }
-
-  :deep(.q-date__nav-btn-month),
-  :deep(.q-date__nav-btn-year) {
-    color: #6366F1 !important;
-    font-weight: 700;
-  }
-
-  :deep(.q-date__event) {
-    bottom: 4px;
-    height: 6px;
-    width: 6px;
-    border-radius: 50%;
-  }
-
-  :deep(.q-date__today) {
-    .q-btn__content {
-      color: #7c4dff !important;
-      background: #7c4dff15;
-      border-radius: 50%;
-    }
-  }
-
-  :deep(.q-date__selected) {
-    .q-btn__content {
-      background: #6366F1 !important;
-      color: white !important;
-      border-radius: 50%;
-      box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4);
-    }
-  }
-
-  :deep(.q-date__view--months),
-  :deep(.q-date__view--years) {
-    .q-btn {
-      color: #1E293B !important;
-    }
-  }
-}
 </style>

src/components/layout/LeftMenuLayout.vue

@@ -243,7 +243,7 @@
         </q-item>
       </q-list>
       <div class="full-width text-center text-subtitle3">
-        <span class="text-caption text-weight-light">{{ version }}</span>
+        <span class="">{{ version }}</span>
       </div>
     </div>
   </q-drawer>
@@ -315,7 +315,6 @@ watch(miniState, () => {
 @import "/src/css/quasar.variables.scss";
 .text-subtitle3 {
   font-size: 1.1rem !important;
-  font-weight: 400 !important;
 }
 
 .menu-selected {

src/components/layout/LeftMenuLayoutMobile.vue

@@ -77,7 +77,7 @@
         </q-item>
       </q-list>
       <div class="full-width text-center text-subtitle3">
-        <span class="text-caption text-weight-light">1.0.0</span>
+        <span class="">1.0.0</span>
       </div>
     </div>
   </q-drawer>
@@ -113,7 +113,6 @@ const openUrl = (url) => {
 @import "/src/css/quasar.variables.scss";
 .text-subtitle3 {
   font-size: 1.1rem !important;
-  font-weight: 400 !important;
 }
 
 .menu-selected {

src/components/login/LoginStepFourPanel.vue

@@ -3,7 +3,7 @@
     <q-card class="step4-card col-12">
       <div class="bg-surface q-pa-lg">
         <div class="text-center q-mb-md">
-          <div class="text-primary text-weight-bold">
+          <div class="text-primary font14 fontbold">
             {{ $t('auth.step4_title') }}
           </div>
         </div>
@@ -24,7 +24,7 @@
           @update:model-value="onCepChange"
         >
           <template #prepend>
-            <q-icon name="mdi-map-marker-outline" color="grey-5" class="q-mr-sm" />
+            <q-icon name="mdi-map-marker-outline" color="grey-5" />
           </template>
         </q-input>
 
@@ -32,7 +32,7 @@
           color="primary-button"
           :label="$t('auth.use_location')"
           rounded
-          padding="6px 16px"
+          padding="8px 12px"
           class="full-width"
           :loading="loadingLocation"
           @click="useLocation"
@@ -122,5 +122,9 @@ const useLocation = async () => {
   border-radius: 30px;
   position: relative;
   z-index: 1;
+
+  :deep(.q-field__marginal) {
+    height: 44px;
+  }
 }
 </style>

src/components/login/LoginStepOnePanel.vue

@@ -1,7 +1,7 @@
 <template>
   <q-card-section class="full-width">
     <div class="text-text">
-      <span class="text-weight-medium">{{ $t('common.terms.email') }}</span>
+      <span class="font14 fontbold">{{ $t('common.terms.email') }}</span>
     </div>
     <q-input
       v-model="email"
@@ -28,8 +28,8 @@
     </div>
 
     <div class="text-text">
-      <span class="text-weight-medium">{{ $t('common.terms.phone') }}</span>
-      <span class="text-weight-light">{{ ' (' + $t('common.terms.celular') + ')' }}</span>
+      <span class="font14 fontbold">{{ $t('common.terms.phone') }}</span>
+      <span class="">{{ ' (' + $t('common.terms.celular') + ')' }}</span>
     </div>
     <q-input
       v-model="phone"

src/components/login/LoginStepThreePanel.vue

@@ -2,14 +2,15 @@
   <q-card-section class="no-padding">
     <div>
       <div class="text-text">
-        <span class="text-weight-medium">{{ $t('auth.full_name') }}</span>
+        <span class="font14 fontbold">{{ $t('auth.full_name') }}</span>
       </div>
       <q-input
         v-model="form.name"
         no-error-icon
         outlined
         rounded
-        class="bg-surface q-mt-sm q-mb-md"
+        bg-color="surface"
+        class="q-mt-sm q-mb-md"
         input-class="text-text"
         :placeholder="$t('auth.full_name')"
         hide-bottom-space
@@ -20,14 +21,15 @@
 
     <div>
       <div class="text-text">
-        <span class="text-weight-medium">{{ $t('common.terms.cpf') }}</span>
+        <span class="font14 fontbold">{{ $t('common.terms.cpf') }}</span>
       </div>
       <q-input
         v-model="form.document"
         no-error-icon
         outlined
         rounded
-        class="bg-surface q-mt-sm q-mb-md"
+        bg-color="surface"
+        class="q-mt-sm q-mb-md"
         input-class="text-text"
         placeholder="000.000.000-00"
         hide-bottom-space
@@ -39,14 +41,15 @@
 
     <div>
       <div class="text-text">
-        <span class="text-weight-medium">{{ $t('common.terms.cep') }}</span>
+        <span class="font14 fontbold">{{ $t('common.terms.cep') }}</span>
       </div>
       <q-input
         v-model="form.zip_code"
         no-error-icon
         outlined
         rounded
-        class="bg-surface q-mt-sm q-mb-md"
+        bg-color="surface"
+        class="q-mt-sm q-mb-md"
         input-class="text-text"
         placeholder="00000-000"
         hide-bottom-space
@@ -60,14 +63,15 @@
 
     <div>
       <div class="text-text">
-        <span class="text-weight-medium">{{ $t('common.terms.address') }}</span>
+        <span class="font14 fontbold">{{ $t('common.terms.address') }}</span>
       </div>
       <q-input
         v-model="form.address"
         no-error-icon
         outlined
         rounded
-        class="bg-surface q-mt-sm q-mb-md"
+        bg-color="surface"
+        class="q-mt-sm q-mb-md"
         input-class="text-text"
         :placeholder="`${$t('common.terms.address')}...`"
         hide-bottom-space
@@ -80,14 +84,15 @@
     <div class="row q-col-gutter-sm">
       <div class="col-4">
         <div class="text-text">
-          <span class="text-weight-medium">{{ $t('common.terms.address_number') }}</span>
+          <span class="font14 fontbold">{{ $t('common.terms.address_number') }}</span>
         </div>
         <q-input
           v-model="form.number"
           no-error-icon
           outlined
           rounded
-          class="bg-surface q-mt-sm q-mb-md"
+          bg-color="surface"
+        class="q-mt-sm q-mb-md"
           input-class="text-text"
           placeholder="0000"
           hide-bottom-space
@@ -97,14 +102,15 @@
       </div>
       <div class="col-8">
         <div class="text-text">
-          <span class="text-weight-medium">{{ $t('common.terms.district') }}</span>
+          <span class="font14 fontbold">{{ $t('common.terms.district') }}</span>
         </div>
         <q-input
           v-model="form.district"
           no-error-icon
           outlined
           rounded
-          class="bg-surface q-mt-sm q-mb-md"
+          bg-color="surface"
+        class="q-mt-sm q-mb-md"
           input-class="text-text"
           :placeholder="`${$t('common.terms.district')}...`"
           hide-bottom-space
@@ -116,29 +122,30 @@
     <div class="row q-col-gutter-sm">
       <div class="col-8">
         <div class="text-text">
-          <span class="text-weight-medium">{{ $t('common.terms.city') }}</span>
+          <span class="font14 fontbold">{{ $t('common.terms.city') }}</span>
         </div>
         <q-input
           v-model="form.city"
           no-error-icon
           outlined
           rounded
-          class="bg-surface q-mt-sm q-mb-md"
+          bg-color="surface"
+        class="q-mt-sm q-mb-md"
           input-class="text-text"
-          hide-bottom-space
           readonly
         />
       </div>
       <div class="col-4">
         <div class="text-text">
-          <span class="text-weight-medium">{{ $t('common.terms.state') }}</span>
+          <span class="font14 fontbold">{{ $t('common.terms.state') }}</span>
         </div>
         <q-input
           v-model="form.state"
           no-error-icon
           outlined
           rounded
-          class="bg-surface q-mt-sm q-mb-md"
+          bg-color="surface"
+        class="q-mt-sm q-mb-md"
           input-class="text-text"
           hide-bottom-space
           readonly
@@ -151,20 +158,22 @@
         v-model="form.no_complement"
         :label="$t('auth.no_complement')"
         color="primary"
-        class="q-mb-md text-text"
+        keep-color
+        class="q-mb-md text-text font14 fontbold"
       />
     </div>
     <div>
       <template v-if="!form.no_complement">
         <div class="text-text">
-          <span class="text-weight-medium">{{ $t('common.terms.complement') }}</span>
+          <span class="font14 fontbold">{{ $t('common.terms.complement') }}</span>
         </div>
         <q-input
           v-model="form.complement"
           no-error-icon
           outlined
           rounded
-          class="bg-surface q-mt-sm q-mb-md"
+          bg-color="surface"
+        class="q-mt-sm q-mb-md"
           input-class="text-text"
           :placeholder="`${$t('common.ui.misc.example')}: Apartamento, Conjunto, Casa`"
           hide-bottom-space
@@ -176,14 +185,15 @@
 
     <div>
       <div class="text-text">
-        <span class="text-weight-medium">{{ $t('auth.address_nickname') }}</span>
+        <span class="font14 fontbold">{{ $t('auth.address_nickname') }}</span>
       </div>
       <q-input
         v-model="form.nickname"
         no-error-icon
         outlined
         rounded
-        class="bg-surface q-mt-sm q-mb-md"
+        bg-color="surface"
+        class="q-mt-sm q-mb-md"
         input-class="text-text"
         :placeholder="`${$t('common.ui.misc.example')}: Casa`"
         hide-bottom-space
@@ -193,14 +203,15 @@
 
     <div>
       <div class="text-text">
-        <span class="text-weight-medium">{{ $t('auth.address_instructions') }}</span>
+        <span class="font14 fontbold">{{ $t('auth.address_instructions') }}</span>
       </div>
       <q-input
         v-model="form.instructions"
         no-error-icon
         outlined
         rounded
-        class="bg-surface q-mt-sm q-mb-md"
+        bg-color="surface"
+        class="q-mt-sm q-mb-md"
         input-class="text-text"
         type="textarea"
         rows="3"

src/components/login/LoginStepTwoPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <q-card-section class="no-padding q-mb-xl">
     <div class="text-text q-mb-xs text-left">
-      <span class="text-weight-medium">{{ $t('auth.validation_code') }}</span>
+      <span class="font14 fontbold">{{ $t('auth.validation_code') }}</span>
     </div>
 
     <div class="code-boxes-wrapper" @click="focusCodeInput">
@@ -61,8 +61,6 @@ const focusCodeInput = () => {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.4rem;
-    font-weight: 600;
     color: var(--q-text);
     transition: border-color 0.2s ease;
 

src/components/profile/ProfileAddressDialog.vue

@@ -4,32 +4,32 @@
       <div class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-profile bg-surface">
         <q-btn v-close-popup icon="mdi-chevron-left" flat round dense color="primary" />
         <q-space />
-        <span class="text-subtitle1 text-weight-bold text-primary">{{ $t('profile.address.title') }}</span>
+        <span class="text-subtitle1 text-primary font16 fontbold gradient-diarista">{{ $t('profile.address.title') }}</span>
         <q-space />
         <div style="width: 32px"></div>
       </div>
 
       <div class="col column q-px-md q-pt-lg overflow-auto">
-        <span class="text-h6 text-weight-bold gradient-diarista q-mb-xs">{{ $t('profile.address.my_addresses') }}</span>
-        <span class="text-grey-7 q-mb-lg" style="font-size: 14px; line-height: 1.3;">{{ $t('profile.address.manage_addresses') }}</span>
+        <span class="gradient-diarista q-mb-xs font16 fontbold gradient-diarista">{{ $t('profile.address.my_addresses') }}</span>
+        <span class="text-grey-7 q-mb-lg font12 fontregular" style="line-height: 1.3;">{{ $t('profile.address.manage_addresses') }}</span>
 
         <div class="address-card-container q-pa-lg">
           <div v-if="addresses.length > 0" class="column q-gutter-y-lg">
             <div v-for="address in addresses" :key="address.id" class="address-item-wrapper column">
-              <span class="text-weight-bold text-dark q-mb-xs" style="font-size: 16px;">
+              <span class="text-dark q-mb-xs font14 fontbold" >
                 {{ address.nickname || addressTypeLabel(address.address_type) }}
               </span>
 
               <div class="card-item-box row items-center no-wrap q-pa-md" :class="!address.is_primary ? 'text-grey-6' : 'text-dark'" style="border: 1px solid #b5b5b5; border-radius: 4px;">
                 
                 <div class="col column">
-                  <span class="text-weight-medium" style="font-size: 14px; line-height: 1.3;">
+                  <span class="font12 fontbold" style="line-height: 1.3;">
                     {{ address.address + ', ' + address.number }}
                   </span>
-                  <span style="font-size: 14px; line-height: 1.3;" class="q-mt-xs">
+                  <span style="line-height: 1.3;" class="q-mt-xs font12 fontregular">
                     {{  address.district ? address.district + ' - ' : '' }}{{ address.city?.name || '' }}{{ address.state?.name ? '/' + address.state?.name : '' }}
                   </span>
-                  <span v-if="address.complement" style="font-size: 14px; line-height: 1.3;">
+                  <span v-if="address.complement" style="line-height: 1.3;" class="font12 fontregular">
                     {{ address.complement }}
                   </span>
                 </div>
@@ -86,9 +86,8 @@
               rounded
               no-caps
               color="primary"
-              class="full-width save-btn text-weight-bold"
-              padding="14px 16px"
-              style="font-size: 16px;"
+              class="full-width save-btn"
+              padding="8px 12px"
               :label="$t('profile.address.add_address')"
               @click="openAddAddressForm"
             />

src/components/profile/ProfileAddressFormDialog.vue

@@ -4,17 +4,18 @@
       <div class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-profile bg-surface">
         <q-btn v-close-popup icon="mdi-chevron-left" flat round dense color="primary" />
         <q-space />
-        <span class="text-subtitle1 text-weight-bold text-primary">
-          {{ isEditing ? $t('profile.address.edit_address') : $t('profile.address.add_new_address') }}
-        </span>
+        <span class="text-subtitle1 text-primary font16 fontbold gradient-diarista">{{ $t('profile.address.title') }}</span>
         <q-space />
         <div style="width: 32px"></div>
       </div>
-
+      <div class="col column q-px-lg q-pt-lg overflow-auto">
+        <span class="gradient-diarista q-mb-xs font16 fontbold gradient-diarista">{{ isEditing ? $t('profile.address.edit_address') : $t('profile.address.add_new_address') }}</span>
+        <span class="text-grey-7 q-mb-lg font12 fontregular" style="line-height: 1.3;">{{ isEditing ? $t('profile.address.manage_addresses') : $t('profile.address.add_new_address_label') }}</span>
+      </div>
       <q-card-section class="col">
-        <div class="q-px-md q-pt-lg text-text">
+        <div class="text-text">
           <q-card class="q-pa-lg bg-white shadow-card" style="border-radius: 25px;" :flat="false">
-            <div class="text-weight-bold text-text q-mb-xs">{{ $t('profile.address.cep') }}</div>
+            <div class="text-text q-mb-xs font12 fontbold">{{ $t('profile.address.cep') }}</div>
             <q-input
               v-model="form.zip_code"
               input-class="text-text"
@@ -32,7 +33,7 @@
             </q-input>
 
 
-            <div class="text-weight-bold q-mb-xs text-text">{{ $t('profile.address.address_label') }}</div>
+            <div class="q-mb-xs text-text font12 fontbold">{{ $t('profile.address.address_label') }}</div>
             <q-input
               v-model="form.address"
               outlined
@@ -44,11 +45,11 @@
 
             <div class="row q-col-gutter-sm q-mb-md">
               <div class="col-4">
-                <div class="text-weight-bold q-mb-xs text-text">{{ $t('profile.address.number') }}</div>
+                <div class="q-mb-xs text-text font12 fontbold">{{ $t('profile.address.number') }}</div>
                 <q-input v-model="form.number" outlined dense input-class="text-text" placeholder="0000" />
               </div>
               <div class="col-8">
-                <div class="text-weight-bold q-mb-xs text-text">{{ $t('profile.address.complement') }}</div>
+                <div class="q-mb-xs text-text font12 fontbold">{{ $t('profile.address.complement') }}</div>
                 <q-input
                   v-model="form.complement"
                   outlined
@@ -59,16 +60,16 @@
               </div>
             </div>
 
-            <div class="text-weight-bold q-mb-xs text-text">{{ $t('profile.address.district_label') }}</div>
+            <div class="q-mb-xs text-text font12 fontbold">{{ $t('profile.address.district_label') }}</div>
             <q-input v-model="form.district" outlined dense class="q-mb-md" input-class="text-text" />
 
             <div class="row q-col-gutter-sm q-mb-lg">
               <div class="col-8">
-                <div class="text-weight-bold q-mb-xs text-text">{{ $t('profile.address.city_label') }}</div>
+                <div class="q-mb-xs text-text font12 fontbold">{{ $t('profile.address.city_label') }}</div>
                 <q-input :model-value="form.city?.name" readonly outlined dense input-class="text-text" />
               </div>
               <div class="col-4">
-                <div class="text-weight-bold q-mb-xs text-text">{{ $t('profile.address.state_label') }}</div>
+                <div class="q-mb-xs text-text font12 fontbold">{{ $t('profile.address.state_label') }}</div>
                 <q-input :model-value="form.state?.name" readonly outlined dense input-class="text-text" />
               </div>
             </div>
@@ -118,9 +119,8 @@
               rounded
               no-caps
               color="primary"
-              class="full-width q-py-md text-weight-bold"
-              padding="8px 16px"
-              style="font-size: 1.1rem;"
+              class="full-width q-py-md"
+              padding="8px 12px"
               :label="$t('common.actions.save')"
               :loading="saving"
               :disable="!hasUpdatedFields"

src/components/profile/ProfileFavoriteRemoveDialog.vue

@@ -4,7 +4,7 @@
 
       <q-card class="remove-card bg-white">
         <q-card-section class="q-pt-lg q-pb-sm q-px-lg text-center">
-          <p class="remove-title text-primary text-weight-bold">
+          <p class="remove-title text-primary font16 fontbold">
             {{ $t('profile.favorites.remove_title') }}
           </p>
         </q-card-section>
@@ -16,7 +16,7 @@
             no-caps
             text-color="grey-2"
             color="grey-6"
-            class="col remove-btn"
+            class="col remove-btn font12 fontbold"
             :label="$t('profile.favorites.remove_confirm')"
             @click="onDialogOK"
           />
@@ -25,7 +25,7 @@
             rounded
             no-caps
             color="secondary"
-            class="col remove-btn"
+            class="col remove-btn font12 fontbold"
             :label="$t('profile.favorites.remove_cancel')"
             @click="onDialogCancel"
           />
@@ -56,17 +56,11 @@ const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
 }
 
 .remove-title {
-  font-family: 'Inter', sans-serif;
-  font-size: 18px;
-  font-weight: 700;
   line-height: 1.4;
   margin: 0;
 }
 
 .remove-btn {
-  font-family: 'Inter', sans-serif;
-  font-size: 15px;
-  font-weight: 600;
   padding: 6px 12px;
 }
 </style>

src/components/profile/ProfileFavoritesDialog.vue

@@ -6,7 +6,7 @@
       <div class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-profile bg-surface">
         <q-btn v-close-popup icon="mdi-chevron-left" flat round dense color="primary" />
         <q-space />
-        <span class="text-subtitle1 text-weight-bold text-primary">{{ $t('profile.favorites.title') }}</span>
+        <span class="text-subtitle1 text-primary font16 fontbold gradient-diarista">{{ $t('profile.favorites.title') }}</span>
         <q-space />
         <div style="width: 32px"></div>
       </div>
@@ -22,10 +22,10 @@
           fit="contain"
           class="q-mb-lg"
         />
-        <p class="text-text text-center q-mb-xs" style="font-size: 15px;">
+        <p class="text-text text-center q-mb-xs" >
           {{ $t('profile.favorites.empty_message') }}
         </p>
-        <p class="text-primary text-center text-weight-bold q-mb-xl" style="font-size: 15px;">
+        <p class="text-primary text-center  q-mb-xl">
           {{ $t('profile.favorites.empty_cta') }}
         </p>
         <q-btn
@@ -36,7 +36,6 @@
           color="primary"
           class="full-width q-py-sm"
           padding="10px 16px"
-          style="font-size: 1rem; font-weight: 700;"
           :label="$t('profile.favorites.search_btn')"
         />
       </div>
@@ -44,16 +43,16 @@
       <div v-else class="col overflow-auto q-pb-xl">
 
         <div class="q-mx-md q-mt-md q-pa-md">
-          <p class="text-weight-bold gradient-diarista text-center q-mb-md indicate-title">
+          <p class="gradient-diarista text-center q-mb-md font12 fontbold">
             {{ $t('profile.favorites.indicate_title') }}
           </p>
           <div class="row items-center">
             <div class="col column items-center">
-              <q-avatar :style="avatarStyle(highlightedFavorite)" size="72px" class="text-weight-bold text-h5 q-mb-sm shadow-1">
+              <q-avatar :style="avatarStyle(highlightedFavorite)" size="72px" class=" text-h5 q-mb-sm shadow-1">
                 {{ highlightedFavorite?.provider_name?.charAt(0)?.toUpperCase() ?? '?' }}
               </q-avatar>
-              <span class="text-weight-bold text-dark" style="font-size: 15px;">{{ highlightedFavorite?.provider_name ?? '—' }}</span>
-              <span class="text-caption text-grey-6">{{ highlightedFavorite?.city_name ?? '—' }}</span>
+              <span class="font14 fontbold text-dark" >{{ highlightedFavorite?.provider_name ?? '—' }}</span>
+              <span class="font12 fontmedium text-grey-6">{{ highlightedFavorite?.city_name ?? '—' }}</span>
               <div class="row items-center q-gutter-sm q-mt-sm">
                 <q-btn flat round dense icon="mdi-chevron-left" color="primary" :disable="favorites.length <= 1" @click="prevHighlight" />
                 <q-btn
@@ -74,7 +73,7 @@
 
         <div class="q-mx-md q-mt-lg">
           <div class="row items-center justify-between q-mb-md">
-            <span class="text-h6 text-weight-bold gradient-diarista">{{ $t('profile.favorites.providers_title') }}</span>
+            <span class="font16 fontbold gradient-diarista">{{ $t('profile.favorites.providers_title') }}</span>
             <div class="row items-center">
               <q-icon
                 name="mdi-chevron-left"
@@ -83,7 +82,7 @@
                 :class="selectedHours === '2h' ? '' : 'cursor-pointer'"
                 @click="nextSelectedHours"
               />
-              <span class="text-caption text-grey-6 text-weight-medium q-px-xs" style="user-select: none; font-size: 13px;">
+              <span class="font12 fontbold text-grey-6 q-px-xs" style="user-select: none;">
                 {{ $t('profile.favorites.until') }} {{ selectedHours }}
               </span>
               <q-icon
@@ -103,7 +102,7 @@
             :class="{ 'item-separator': index < favorites.length - 1 }"
           >
             <div class="relative-position q-mr-md" style="margin-right: 16px;">
-              <q-avatar :style="avatarStyle(item)" size="60px" class="text-weight-bold avatar-font shadow-1">
+              <q-avatar :style="avatarStyle(item)" size="60px" class="shadow-1">
                 {{ item.provider_name?.charAt(0)?.toUpperCase() ?? '?' }}
               </q-avatar>
               <q-icon
@@ -118,28 +117,28 @@
             <div class="col column justify-between" style="min-height: 60px;">
               <div class="row items-start justify-between">
                 <div class="column">
-                  <span class="provider-name text-weight-regular" style="font-size: 16px; color: #4a4a4a; line-height: 1.1;">
+                  <span class="provider-name font12 fontmedium" style="color: #4a4a4a; line-height: 1.1;">
                     {{ item.provider_name ?? '—' }}
                   </span>
-                  <span class="provider-city text-grey-6" style="font-size: 13px;">
+                  <span class="provider-city font9 fontbold text-grey-7 q-pt-xs">
                     {{ item.city_name ?? '—' }}
                   </span>
                 </div>
-                <span class="provider-price text-weight-regular text-grey-7" style="font-size: 16px; line-height: 1.1;">
+                <span class="provider-price font12 fontregular text-grey-7" style="line-height: 1.1;">
                   R${{ getPriceByHours(item) ? formatPrice(getPriceByHours(item)) : '—' }}
                 </span>
               </div>
 
               <div class="row items-end justify-between q-mt-xs">
-                <div class="row items-center text-grey-5" style="font-size: 12px; margin-bottom: 2px;">
-                  <q-icon name="mdi-star" color="warning" size="18px" />
-                  <span class="q-ml-xs text-weight-medium" style="color: #666; font-size: 13px;">{{ item.average_rating ?? '—' }}</span>
-                  <span class="q-ml-xs" style="margin-right: 2px;">({{ item.total_services ?? 0 }})</span>
+                <div class="row items-center text-grey-5" style="margin-bottom: 2px;">
+                  <q-icon name="mdi-star" color="warning" size="12px" />
+                  <span class="q-ml-xs font9 fontregular" style="color: #666;">{{ item.average_rating ?? '—' }}</span>
+                  <span class="q-ml-xs font9 fontregular" style="margin-right: 2px;">({{ item.total_services ?? 0 }})</span>
+                  <q-icon name="mdi-circle-small" color="grey-4" size="12px" class="q-mx-xs" />
+                  <q-icon name="mdi-broom" size="12px" style="transform: scaleX(-1); color: #f518e3;" />
+                  <span class="q-ml-xs font9 fontregular" style="color: #666;">{{ item.total_services ?? '0' }}</span>
                   <q-icon name="mdi-circle-small" color="grey-4" size="16px" class="q-mx-xs" />
-                  <q-icon name="mdi-broom" size="16px" style="transform: scaleX(-1); color: #f518e3;" />
-                  <span class="q-ml-xs text-weight-medium" style="color: #666; font-size: 13px;">{{ item.total_services ?? '0' }}</span>
-                  <q-icon name="mdi-circle-small" color="grey-4" size="16px" class="q-mx-xs" />
-                  <span>0Km</span>
+                  <span class="font9 fontregular">0Km</span>
                 </div>
                 
                 <q-btn
@@ -149,7 +148,7 @@
                   style="background: #a63df7; color: white;"
                   padding="4px 20px"
                   size="sm"
-                  class="text-weight-medium"
+                  class=""
                   :label="$t('profile.favorites.schedule_btn')"
                 />
               </div>
@@ -274,11 +273,6 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
-.indicate-title {
-  font-family: 'Inter', sans-serif;
-  font-size: 15px;
-  font-weight: 700;
-}
 
 .heart-badge {
   position: absolute;
@@ -289,11 +283,6 @@ onMounted(async () => {
   padding: 1px;
 }
 
-.avatar-font {
-  font-family: 'Inter', sans-serif;
-  font-size: 20px;
-}
-
 .favorite-item {
   background: transparent;
 }
@@ -303,17 +292,11 @@ onMounted(async () => {
 }
 
 .provider-name {
-  font-family: 'Inter', sans-serif;
-  font-size: 14px;
-  font-weight: 700;
   color: #2c3e50;
   line-height: 1.3;
 }
 
 .provider-city {
-  font-family: 'Inter', sans-serif;
-  font-size: 12px;
-  font-weight: 400;
   color: #888;
   line-height: 1.2;
 }
@@ -323,33 +306,22 @@ onMounted(async () => {
 }
 
 .metric-value {
-  font-family: 'Inter', sans-serif;
-  font-size: 11px;
-  font-weight: 700;
   color: #3a3a4a;
   line-height: 1;
 }
 
 .metric-meta {
-  font-family: 'Inter', sans-serif;
-  font-size: 10px;
-  font-weight: 400;
   color: #999;
   line-height: 1;
 }
 
 .metric-dot {
-  font-family: 'Inter', sans-serif;
-  font-size: 10px;
   color: #ccc;
   line-height: 1;
   padding: 0 1px;
 }
 
 .provider-price {
-  font-family: 'Inter', sans-serif;
-  font-size: 14px;
-  font-weight: 700;
   color: #2c3e50;
 }
 

src/components/profile/ProfileHelpDialog.vue

@@ -5,7 +5,7 @@
       <div class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-profile bg-surface">
         <q-btn v-close-popup icon="mdi-chevron-left" flat round dense color="primary" />
         <q-space />
-        <span class="text-subtitle1 text-weight-bold text-primary">{{ $t('profile.help.title') }}</span>
+        <span class="text-subtitle1 text-primary font16 fontbold gradient-diarista">{{ $t('profile.help.title') }}</span>
         <q-space />
         <q-btn
           v-if="store.messages.length > 1"
@@ -25,15 +25,15 @@
         <div class="support-banner row no-wrap">
           <div class="col-8 q-pa-md">
             <div class="row items-center q-mb-xs q-gutter-x-sm">
-              <span class="text-h6 text-white text-weight-bold">{{ $t('profile.help.support_title') }}</span>
+              <span class="text-white font16 fontbold">{{ $t('profile.help.support_title') }}</span>
             </div>
             <div class="row items-center q-gutter-x-xs q-mb-md">
               <q-icon name="mdi-circle" color="green-4" size="10px" />
-              <span class="text-caption text-white">{{ $t('profile.help.online_status') }}</span>
+              <span class="text-white font14 fontmedium">{{ $t('profile.help.online_status') }}</span>
             </div>
             <div class="row items-center q-gutter-x-sm">
               <q-icon name="mdi-robot-outline" color="white" size="18px" />
-              <span class="text-caption text-white">{{ $t('profile.help.ai_assistant_label') }}</span>
+              <span class="text-white font14 fontmedium">{{ $t('profile.help.ai_assistant_label') }}</span>
             </div>
           </div>
           <div class="col-4 flex items-end">
@@ -76,7 +76,7 @@
           </div>
 
           <div v-if="store.messages.length === 1" class="q-pt-sm">
-            <div class="col-12 text-caption text-grey-6 q-mb-sm">{{ $t('profile.help.quick_suggestions') }}</div>
+            <div class="col-12  text-grey-6 q-mb-sm">{{ $t('profile.help.quick_suggestions') }}</div>
             <div
               v-for="suggestion in suggestions"
               :key="suggestion"
@@ -113,7 +113,7 @@
             @click="sendMessage()"
           />
         </div>
-        <div class="footer-disclaimer text-text text-center q-my-md">
+        <div class="footer-disclaimer text-text text-center q-my-md font9 fontregular">
           {{ $t('profile.help.footer_disclaimer') }}
         </div>
       </div>
@@ -231,7 +231,6 @@ onMounted(() => {
 }
 
 .bubble-text {
-  font-size: 14px;
   line-height: 1.45;
   color: #2c2c2c;
   margin: 0 0 4px 0;
@@ -239,7 +238,6 @@ onMounted(() => {
 }
 
 .bubble-time {
-  font-size: 10px;
   color: #aaa;
   display: block;
   text-align: right;
@@ -267,10 +265,7 @@ onMounted(() => {
 
 .suggestion-btn {
   border-radius: 32px;
-  font-size: 12px;
   border: 1.15px solid #d8d7d7ce;
-  font-family: Inter;
-  font-weight: 400;
   line-height: 16px;
   transition: background 0.2s;
 
@@ -328,9 +323,6 @@ onMounted(() => {
 }
 
 .footer-disclaimer {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 12px;
   line-height: 15px;
   text-align: center;
 }

src/components/profile/ProfilePaymentAddDialog.vue

@@ -62,7 +62,7 @@
 
         <q-space />
 
-        <span class="text-subtitle1 text-weight-bold text-primary">
+        <span class="text-subtitle1 text-primary font16 fontbold gradient-diarista">
           {{ $t('profile.payments.title') }}
         </span>
 
@@ -72,7 +72,7 @@
       </div>
 
       <div class="col overflow-auto q-px-md q-pt-lg q-pb-xl">
-        <div class="text-h6 text-weight-bold text-primary q-mb-md" style="text-transform: capitalize;">
+        <div class="text-h6 text-primary q-mb-md font16 fontbold gradient-diarista" style="text-transform: capitalize;">
           {{ paymentMethod ? $t('profile.payments.edit_title') : $t('profile.payments.add_card') }}
         </div>
 
@@ -116,13 +116,13 @@
           @submit="onOKClick"
         >
           <div>
-            <div class="input-label">
+            <div class="input-label font14 fontbold">
               {{ $t('profile.payments.card_number') }}
             </div>
 
             <q-input
               v-model="form.card_number"
-              class="input-field bg-surface input-border-dark"
+              class="bg-surface input-border-dark"
               hide-bottom-space
               input-class="text-text"
               mask="#### #### #### ####"
@@ -136,13 +136,13 @@
           </div>
 
           <div class="q-pt-lg">
-            <div class="input-label">
+            <div class="input-label font14 fontbold">
               {{ $t('profile.payments.holder_name') }}
             </div>
 
             <q-input
               v-model="form.holder_name"
-              class="input-field bg-surface input-border-dark"
+              class="bg-surface input-border-dark"
               hide-bottom-space
               input-class="text-text"
               outlined
@@ -156,13 +156,13 @@
 
           <div class="row col-12 q-col-gutter-sm q-pt-lg">
             <div class="col-7">
-              <div class="input-label">
+              <div class="input-label font14 fontbold">
                 {{ $t('profile.payments.expiration') }}
               </div>
 
               <q-input
                 v-model="form.expiration"
-                class="col input-field bg-surface input-border-dark"
+                class="col bg-surface input-border-dark"
                 hide-bottom-space
                 input-class="text-text"
                 mask="##/####"
@@ -176,7 +176,7 @@
             </div>
 
             <div class="col-5">
-              <div class="input-label row items-center q-gutter-x-xs">
+              <div class="input-label row items-center q-gutter-x-xs font14 fontbold">
                 <span>
                   {{ $t('profile.payments.cvv') }}
                 </span>
@@ -195,7 +195,7 @@
 
               <q-input
                 v-model="form.cvv"
-                class="col input-field bg-surface input-border-dark"
+                class="col bg-surface input-border-dark"
                 hide-bottom-space
                 input-class="text-text"
                 mask="####"
@@ -218,16 +218,16 @@
               size="18px"
             />
 
-            <span class="security-text-new">
+            <span class="security-text-new font12 fontmedium">
               {{ $t('profile.payments.security_badge') }}
             </span>
           </div>
 
           <q-btn
-            class="full-width q-mt-md save-btn q-mb-md"
+            class="full-width"
             color="primary"
             no-caps
-            padding="14px 16px"
+            padding="8px 12px"
             rounded
             type="submit"
             unelevated
@@ -627,54 +627,32 @@ const onOKClick = async () => {
 }
 
 .card-brand-label {
-  font-family: 'Inter', sans-serif;
-  font-size: 16px;
-  font-weight: 700;
   letter-spacing: 1px;
   opacity: 0.9;
 }
 
 .card-number-preview {
-  font-family: 'Inter', sans-serif;
-  font-size: 20px;
-  font-weight: 600;
   letter-spacing: 3px;
   text-align: center;
   margin: 12px 0;
 }
 
 .card-label-sm {
-  font-family: 'Inter', sans-serif;
-  font-size: 10px;
-  font-weight: 400;
   opacity: 0.7;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
 .card-holder-name {
-  font-family: 'Inter', sans-serif;
-  font-size: 13px;
-  font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
 }
 
 .card-expiry {
-  font-family: 'Inter', sans-serif;
-  font-size: 13px;
-  font-weight: 600;
   letter-spacing: 1px;
 }
 
-.input-field {
-  font-family: 'Inter', sans-serif;
-}
-
 .input-label {
-  font-family: 'Inter', sans-serif;
-  font-size: 14px;
-  font-weight: 800;
   color: #444;
   margin-bottom: 2px;
 }
@@ -694,15 +672,7 @@ const onOKClick = async () => {
 }
 
 .security-text-new {
-  font-family: 'Inter', sans-serif;
-  font-size: 13px;
-  font-weight: 500;
   color: #555;
 }
 
-.save-btn {
-  font-family: 'Inter', sans-serif;
-  font-size: 16px;
-  font-weight: 700;
-}
 </style>

src/components/profile/ProfilePaymentRemoveDialog.vue

@@ -3,7 +3,7 @@
     <div class="remove-dialog-wrapper column items-center">
       <q-card class="remove-card bg-white">
         <q-card-section class="q-pt-lg q-pb-sm q-px-lg text-center">
-          <p class="remove-title text-primary text-weight-bold">
+          <p class="remove-title text-primary font16 fontbold gradient-diarista">
             {{ $t('profile.payments.remove_title') }}
           </p>
         </q-card-section>
@@ -15,7 +15,7 @@
             no-caps
             color="grey-3"
             text-color="grey-7"
-            class="col remove-btn"
+            class="col remove-btn font12 fontbold"
             :label="$t('profile.payments.remove_confirm')"
             @click="onDialogOK"
           />
@@ -24,7 +24,7 @@
             rounded
             no-caps
             color="secondary"
-            class="col remove-btn"
+            class="col remove-btn font12 fontbold"
             :label="$t('profile.payments.remove_cancel')"
             @click="onDialogCancel"
           />
@@ -59,17 +59,11 @@ const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
 }
 
 .remove-title {
-  font-family: 'Inter', sans-serif;
-  font-size: 18px;
-  font-weight: 700;
   line-height: 1.4;
   margin: 0;
 }
 
 .remove-btn {
-  font-family: 'Inter', sans-serif;
-  font-size: 15px;
-  font-weight: 600;
   padding: 6px 12px;
 }
 </style>

src/components/profile/ProfilePaymentsDialog.vue

@@ -5,7 +5,7 @@
       <div class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-profile bg-surface">
         <q-btn v-close-popup icon="mdi-chevron-left" flat round dense color="primary" />
         <q-space />
-        <span class="text-subtitle1 text-weight-bold text-primary">{{ $t('profile.payments.subtitle') }}</span>
+        <span class="text-subtitle1 text-primary font16 fontbold gradient-diarista">{{ $t('profile.payments.subtitle') }}</span>
       <q-space />
       </div>
 
@@ -14,17 +14,17 @@
       </div>
 
       <div v-else class="col column q-px-md q-pt-lg overflow-auto">
-        <span class="text-h6 text-weight-bold text-primary q-mb-lg ml-xs">{{ $t('profile.payments.description')
+        <span class="text-primary q-mb-lg ml-xs font16 fontbold gradient-diarista">{{ $t('profile.payments.description')
           }}</span>
 
-        <div class="payment-card-container q-pa-lg">
+        <div class="payment-card-container q-pa-lg font12 fontregular">
           <div>
             <div v-if="paymentMethods.length === 0" class="column items-center justify-center q-py-xl">
               <q-icon name="mdi-credit-card-off-outline" size="64px" color="grey-4" class="q-mb-md" />
-              <p class="text-text text-center q-mb-xs" style="font-size: 15px;">
+              <p class="text-text text-center q-mb-xs">
                 {{ $t('profile.payments.no_cards') }}
               </p>
-              <p class="text-grey-6 text-center q-mb-xl" style="font-size: 14px;">
+              <p class="text-grey-6 text-center q-mb-xl">
                 {{ $t('profile.payments.add_first_card') }}
               </p>
             </div>
@@ -52,7 +52,7 @@
           </div>
 
           <div class="q-mt-xl">
-            <q-btn unelevated rounded no-caps color="primary" class="full-width save-btn" padding="8px 16px" :label="$t('profile.payments.add_card')" @click="openAddDialog" />
+            <q-btn unelevated rounded no-caps color="primary" class="full-width" padding="8px 16px" :label="$t('profile.payments.add_card')" @click="openAddDialog" />
           </div>
         </div>
       </div>
@@ -163,34 +163,20 @@ onMounted(loadPaymentMethods);
 }
 
 .card-type {
-  font-family: 'Inter', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
   line-height: 1.2;
 }
 
 .card-bank-new {
-  font-family: 'Inter', sans-serif;
-  font-size: 13px;
-  font-weight: 400;
   color: #666;
   line-height: 1.4;
 }
 
 .card-number-new {
-  font-family: 'Inter', sans-serif;
-  font-size: 13px;
-  font-weight: 500;
   color: #333;
   letter-spacing: 0.5px;
   line-height: 1.2;
 }
 
-.save-btn {
-  font-family: 'Inter', sans-serif;
-  font-size: 16px;
-  font-weight: 700;
-}
 
 .ml-xs {
   margin-left: 4px;

src/components/profile/ProfilePrivacyDialog.vue

@@ -5,7 +5,7 @@
       <div class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-profile bg-surface">
         <q-btn v-close-popup icon="mdi-chevron-left" flat round dense color="primary" />
         <q-space />
-        <span class="text-subtitle1 text-weight-bold text-primary">{{ $t('profile.privacy.title') }}</span>
+        <span class="text-subtitle1 text-primary font16 fontbold gradient-diarista">{{ $t('profile.privacy.title') }}</span>
         <q-space />
         <div style="width: 32px"></div>
       </div>
@@ -21,17 +21,17 @@
           fit="contain"
           class="q-mb-lg"
         />
-        <p class="text-text text-center text-weight-bold q-mb-xs" style="font-size: 15px;">
+        <p class="text-center q-mb-xs font16 fontbold text-primary">
           {{ $t('profile.privacy.empty_message') }}
         </p>
-        <p class="text-grey-6 text-center q-mb-xl" style="font-size: 13px;">
+        <p class="text-grey-6 text-center q-mb-xl font12 fontregular">
           {{ $t('profile.privacy.empty_sub') }}
         </p>
       </div>
 
       <div v-else class="col overflow-auto q-pb-xl">
         <div class="q-px-md q-mt-md">
-          <p class="text-weight-bold text-primary q-mb-md blocked-title">
+          <p class="text-primary q-mb-md font16 fontbold gradient-diarista">
             {{ $t('profile.privacy.blocked_title') }}
           </p>
 
@@ -43,33 +43,33 @@
             <q-avatar size="48px" class="flex-shrink-0 q-mr-sm">
               <span
                 :style="avatarStyle(block)"
-                class="text-weight-bold full-width full-height flex flex-center"
-                style="font-size: 16px; border-radius: 50%;"
+                class="full-width full-height flex flex-center"
+                style="border-radius: 50%;"
               >
                 {{ block.provider_name?.slice(0, 2).toUpperCase() ?? '??' }}
               </span>
             </q-avatar>
 
             <div class="col column no-wrap overflow-hidden">
-              <span class="text-weight-bold text-text" style="font-size: 14px; line-height: 1.3;">
+              <span class="font12 fontbold text-text" style="line-height: 1.3;">
                 {{ block.provider_name }}
               </span>
-              <span v-if="block.provider_district" class="text-grey-6" style="font-size: 12px;">
+              <span v-if="block.provider_district" class="text-grey-7 font9 fontbold" >
                 {{ block.provider_district }}
               </span>
               <div v-if="block.provider_rating" class="row items-center q-mt-xs">
-                <q-icon name="mdi-star" color="amber" size="13px" class="q-mr-xs" />
-                <span class="text-grey-7" style="font-size: 12px;">{{ Number(block.provider_rating).toFixed(1) }}</span>
+                <q-icon name="mdi-star" color="amber" size="12px" class="q-mr-xs" />
+                <span class="text-grey-7 font9 fontregular">{{ Number(block.provider_rating).toFixed(1) }}</span>
               </div>
             </div>
 
             <q-btn
-              outline
               no-caps
               rounded
               color="primary"
               size="sm"
-              class="flex-shrink-0 unblock-btn"
+              class="flex-shrink-0"
+              padding="4px 12px"
               :loading="unblockingId === block.id"
               :label="$t('profile.privacy.unblock_btn')"
               @click="unblock(block)"
@@ -135,22 +135,11 @@ onMounted(async () => {
   box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
 }
 
-.blocked-title {
-  font-size: 18px;
-}
-
 .block-item {
-  background: white;
   border-radius: 12px;
   padding: 12px;
-  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
 }
 
-.unblock-btn {
-  font-size: 12px;
-  font-weight: 600;
-  padding: 4px 14px;
-}
 
 .flex-shrink-0 {
   flex-shrink: 0;

src/components/shared/LocationMapDialog.vue

@@ -13,7 +13,7 @@
       />
 
       <div class="location-map-bottom-card">
-        <p class="location-map-address-label">{{ $t('common.terms.address') }}</p>
+        <p class="font14 fontbold">{{ $t('common.terms.address') }}</p>
         <q-input
           :model-value="currentAddress"
           outlined
@@ -194,8 +194,6 @@ onUnmounted(async () => {
 }
 
 .location-map-address-label {
-  font-size: 14px;
-  font-weight: 600;
   color: var(--q-text);
   margin: 0 0 8px;
 }

src/css/app.scss

@@ -1,6 +1,10 @@
 @use "sass:map";
 @use "src/css/quasar.variables.scss";
 
+.q-page {
+  font-family: "Inter", sans-serif;
+}
+
 .flex-grow {
   flex-grow: 1;
   flex-shrink: 1;
@@ -108,7 +112,6 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 .q-btn {
-  font-family: "Inter", sans-serif;
   font-weight: 700;
   font-size: 15px;
   color: #ffffff;
@@ -139,9 +142,7 @@ input[type="number"]::-webkit-outer-spin-button {
   );
 }
 
-// SummaryInfos / HeaderBar
 .text-greeting {
-  font-family: "Inter", sans-serif;
   font-weight: 400;
   font-size: 12px;
   line-height: 100%;
@@ -149,162 +150,96 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 .text-name {
-  font-family: "Inter", sans-serif;
-  font-weight: 700;
-  font-size: 16px;
   line-height: 100%;
   letter-spacing: 0;
 }
 
 .text-label-bold {
-  font-family: "Inter", sans-serif;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 100%;
-  letter-spacing: 0;
-}
-
-.text-address {
-  font-family: "Inter", sans-serif;
-  font-weight: 500;
-  font-size: 8px;
   line-height: 100%;
   letter-spacing: 0;
 }
 
-// NextSchedules
 .text-provider-name {
-  font-family: "Inter", sans-serif;
-  font-weight: 500;
-  font-size: 12px;
   line-height: 100%;
   letter-spacing: -0.04em;
 }
 
 .text-price-main {
-  font-family: "Inter", sans-serif;
-  font-weight: 700;
-  font-size: 14px;
   line-height: 100%;
   letter-spacing: -0.04em;
   text-align: right;
 }
 
 .text-price-label {
-  font-family: "Inter", sans-serif;
-  font-weight: 500;
-  font-size: 10px;
   line-height: 100%;
   letter-spacing: -0.04em;
   text-align: right;
 }
 
 .text-schedule-date-bold {
-  font-family: "Inter", sans-serif;
-  font-weight: 700;
-  font-size: 8px;
   line-height: 100%;
   letter-spacing: -0.04em;
 }
 
 .text-schedule-date-regular {
-  font-family: "Inter", sans-serif;
-  font-weight: 400;
-  font-size: 8px;
   line-height: 100%;
   letter-spacing: -0.04em;
 }
 
 .text-pill {
-  font-family: "Inter", sans-serif;
-  font-weight: 600;
-  font-size: 10px;
   line-height: 100%;
   letter-spacing: 0;
 }
 
 .text-pill-place {
-  font-family: "Inter", sans-serif;
-  font-weight: 600;
-  font-size: 10px;
   line-height: 100%;
   letter-spacing: -0.04em;
 }
 
-// LastDoneSchedules
 .text-done-name {
-  font-family: "Inter", sans-serif;
-  font-weight: 400;
-  font-size: 12px;
   line-height: 100%;
   letter-spacing: -0.04em;
   text-align: center;
 }
 
-// FavoriteProviders
 .text-fav-name {
-  font-family: "Inter", sans-serif;
-  font-weight: 500;
-  font-size: 12px;
   line-height: 100%;
   letter-spacing: -0.04em;
 }
 
 .text-fav-region {
-  font-family: "Inter", sans-serif;
-  font-weight: 600;
-  font-size: 8px;
   line-height: 100%;
   letter-spacing: -0.04em;
 }
 
-// ProvidersClose
 .text-provider-close-name {
-  font-family: "Inter", sans-serif;
-  font-weight: 700;
-  font-size: 12px;
   line-height: 100%;
   letter-spacing: -0.04em;
 }
 
 .text-provider-close-region {
-  font-family: "Inter", sans-serif;
-  font-weight: 500;
-  font-size: 10px;
   line-height: 100%;
   letter-spacing: 0;
 }
 
 .text-provider-close-price {
-  font-family: "Inter", sans-serif;
-  font-weight: 500;
-  font-size: 12px;
   line-height: 100%;
   letter-spacing: 0;
   text-align: right;
 }
 
 .text-provider-close-rating {
-  font-family: "Inter", sans-serif;
-  font-weight: 400;
-  font-size: 10px;
   line-height: 100%;
   letter-spacing: 0;
 }
 
 .text-provider-close-jobs {
-  font-family: "Inter", sans-serif;
-  font-weight: 400;
-  font-size: 10px;
   line-height: 100%;
   letter-spacing: 0;
   text-align: center;
 }
 
 .text-provider-close-distance {
-  font-family: "Inter", sans-serif;
-  font-weight: 300;
-  font-size: 8px;
   line-height: 100%;
   letter-spacing: 0;
   text-align: right;
@@ -321,11 +256,74 @@ box-shadow: 1px 4px 4px 0px rgba(0,0,0,0.2);
 }
 
 .dashboard-section-title {
-  font-size: 20px;
-  font-weight: 600;
   line-height: 1.05;
 }
 
+
+
+
+
+
+
+
+
+
+
+
+.font8 {
+  font-size: 8px;
+}
+
+.font9 {
+  font-size: 9px;
+}
+
+.font10 {
+  font-size: 10px;
+}
+
+.font12 {
+  font-size: 12px;
+}
+
+.font14 {
+  font-size: 14px;
+}
+
+.font16 {
+  font-size: 16px;
+}
+
+
+
+
+
+
+.fontbold {
+  font-weight: 700;
+}
+
+.fontmedium {
+  font-weight: 500;
+}
+
+.fontregular {
+  font-weight: 400;
+}
+
+.fontlight {
+  font-weight: 300;
+}
+
+
+
+
+
+
+
+
+
+
 // customizando calendario das agendas para padrao do figma
 .calendar-custom {
   border-radius: 20px;
@@ -350,7 +348,6 @@ box-shadow: 1px 4px 4px 0px rgba(0,0,0,0.2);
   }
 
   :deep(.q-date__calendar-days .q-btn__content) {
-    font-family: 'Inter', sans-serif;
     font-weight: 500;
     color: #1E293B;
   }

src/i18n/locales/en.json

@@ -448,7 +448,8 @@
       "candidate": "Candidate",
       "custom": "custom",
       "age": "({age} years)",
-      "distance": "Distance"
+      "distance": "Distance",
+      "title": "proposals from service providers"
     },
     "last_schedules": {
       "title": "Last services",
@@ -471,7 +472,8 @@
       "btn_rate": "rate",
       "btn_reschedule": "reschedule",
       "empty_upcoming": "No scheduled services",
-      "empty_completed": "No completed services"
+      "empty_completed": "No completed services",
+      "waiting_proposals": "Waiting for proposals"
     },
     "favorites": {
       "title": "Favorites",
@@ -614,6 +616,7 @@
       "update_address": "Update address",
       "add_address": "Add address",
       "add_new_address": "Add new address",
+      "add_new_address_label": "Add a new address for your services",
       "edit_address": "Edit address",
       "edit": "Edit",
       "mark_as_primary": "Mark as primary",
@@ -645,7 +648,7 @@
       "greeting_message": "Hello! How can I help you today?",
       "quick_suggestions": "Quick suggestions",
       "message_placeholder": "Type your message",
-      "footer_disclaimer": "AI Assistant powered by Diarinho",
+      "footer_disclaimer": "💡 Automated responses by AI • Human support available",
       "coming_soon": "Coming soon",
       "error_message": "Could not process your message. Please try again.",
       "suggestion_cancel": "How to cancel a daily service?",
@@ -774,8 +777,8 @@
     }
   },
   "period_types": {
-    "2": "Quick (up to 2h)",
-    "4": "Medium (up to 4h)",
+    "2": "Quick Clean (up to 2h)",
+    "4": "Half day (up to 4h)",
     "6": "Standard (up to 6h)",
     "8": "Full day (up to 8h)",
     "unknown": "No information"
@@ -794,7 +797,10 @@
     "pix_total": "Total payment",
     "pix_expires": "Pay within",
     "pix_copy_btn": "copy pix code",
-    "pix_instructions": "Copy the Pix code above, open your bank app, choose to pay with Pix, paste the code and complete the payment. Your payment will be approved in seconds.",
+    "pix_instructions": "{copyCode} above, open your bank app, choose to pay with Pix, {pasteCode} and {finalize}. Your payment will be approved in seconds.",
+    "pix_copy_code": "Copy the Pix code",
+    "pix_paste_code": "paste the code",
+    "pix_finalize": "complete the payment",
     "pix_email_note": "You will also receive instructions by email. Then just wait for confirmation from the chosen housekeeper.",
     "processing_title": "Awaiting payment",
     "processing_message": "We are processing your payment, please wait a moment...",

src/i18n/locales/es.json

@@ -444,7 +444,8 @@
       "candidate": "Candidato",
       "custom": "a medida",
       "age": "({edad} años)",
-      "distance": "Distancia"
+      "distance": "Distancia",
+      "title": "Propuestas de proveedores de servicios"
     },
     "last_schedules": {
       "title": "Últimos servicios",
@@ -467,7 +468,8 @@
       "btn_rate": "evaluar",
       "btn_reschedule": "reprogramar",
       "empty_upcoming": "Sin servicios programados",
-      "empty_completed": "Sin servicios completados"
+      "empty_completed": "Sin servicios completados",
+      "waiting_proposals": "Esperando propuestas"
     },
     "favorites": {
       "title": "Favoritos",
@@ -610,6 +612,7 @@
       "update_address": "Actualizar dirección",
       "add_address": "Agregar dirección",
       "add_new_address": "Agregar nueva dirección",
+      "add_new_address_label": "Agrega una nueva dirección para tus servicios",
       "edit_address": "Editar dirección",
       "edit": "Editar",
       "mark_as_primary": "Marcar como principal",
@@ -641,7 +644,7 @@
       "greeting_message": "¡Hola! ¿Cómo puedo ayudarte hoy?",
       "quick_suggestions": "Sugerencias rápidas",
       "message_placeholder": "Escribe tu mensaje",
-      "footer_disclaimer": "Asistente de IA impulsado por Diarinho",
+      "footer_disclaimer": "💡 Respuestas automáticas por IA • Atención humana disponible",
       "coming_soon": "Próximamente",
       "error_message": "No se pudo procesar tu mensaje. Inténtalo de nuevo.",
       "suggestion_cancel": "¿Cómo cancelar un servicio diario?",
@@ -770,10 +773,10 @@
     }
   },
   "period_types": {
-    "2": "Rápido (hasta 2h)",
-    "4": "Medio (hasta 4h)",
+    "2": "Limpieza Rápida (hasta 2h)",
+    "4": "Medio tiempo (hasta 4h)",
     "6": "Estándar (hasta 6h)",
-    "8": "Día completo (hasta 8h)",
+    "8": "Integral (hasta 8h)",
     "unknown": "Sin información"
   },
   "payment": {
@@ -790,7 +793,10 @@
     "pix_total": "Pago total",
     "pix_expires": "Pagar en hasta",
     "pix_copy_btn": "copiar código pix",
-    "pix_instructions": "Copie el código Pix de arriba, abra la aplicación de su banco, elija pagar con Pix, pegue el código y finalice el pago. Su pago será aprobado en segundos.",
+    "pix_instructions": "{copyCode} de arriba, abra la aplicación de su banco, elija pagar con Pix, {pasteCode} y {finalize}. Su pago será aprobado en segundos.",
+    "pix_copy_code": "Copie el código Pix",
+    "pix_paste_code": "pegue el código",
+    "pix_finalize": "finalice el pago",
     "pix_email_note": "También recibirá instrucciones por correo electrónico. Luego solo espere la confirmación de la empleada doméstica elegida.",
     "processing_title": "Esperando pago",
     "processing_message": "Estamos procesando su pago, por favor espere un momento...",

src/i18n/locales/pt.json

@@ -448,7 +448,8 @@
       "candidate": "Candidato",
       "custom": "sob medida",
       "age": "({idade} anos)",
-      "distance": "Distância"
+      "distance": "Distância",
+      "title": "Propostas de prestadores"
     },
     "last_schedules": {
       "title": "Últimos serviços",
@@ -471,7 +472,8 @@
       "btn_rate": "avaliar",
       "btn_reschedule": "reagendar",
       "empty_upcoming": "Nenhum serviço agendado",
-      "empty_completed": "Nenhum serviço concluído"
+      "empty_completed": "Nenhum serviço concluído",
+      "waiting_proposals": "Aguardando propostas"
     },
     "favorites": {
       "title": "Favoritos",
@@ -491,7 +493,7 @@
     },
     "pending_schedules": {
       "title": "Aguardando confirmação",
-      "requesting_with": "Solicitando agendamento com",
+      "requesting_with": "Solicitando serviço com",
       "pay_to_provider": "Realize o pagamento para",
       "no_provider": "Prestador não definido",
       "cancel_btn": "cancelar",
@@ -614,6 +616,7 @@
       "update_address": "Atualizar endereço",
       "add_address": "Adicionar endereço",
       "add_new_address": "Adicionar novo endereço",
+      "add_new_address_label": "Adicione um novo endereço para agendamentos",
       "edit_address": "Editar endereço",
       "edit": "Editar",
       "mark_as_primary": "Marcar como principal",
@@ -645,7 +648,7 @@
       "greeting_message": "Olá! Como posso ajudá-lo hoje?",
       "quick_suggestions": "Sugestões rápidas",
       "message_placeholder": "Digite sua mensagem",
-      "footer_disclaimer": "Assistente de IA alimentado por Diarinho",
+      "footer_disclaimer": "💡 Respostas automáticas por IA • Atendimento humano disponível",
       "coming_soon": "Em breve",
       "error_message": "Não foi possível processar sua mensagem. Tente novamente.",
       "suggestion_cancel": "Como cancelar uma diária?",
@@ -782,10 +785,10 @@
     }
   },
   "period_types": {
-    "2": "Rápida (até 2h)",
-    "4": "Média (até 4h)",
+    "2": "Diária Rápida (até 2h)",
+    "4": "Meia diária (até 4h)",
     "6": "Padrão (até 6h)",
-    "8": "Dia completo (até 8h)",
+    "8": "Integral (até 8h)",
     "unknown": "Sem informação"
   },
   "payment": {
@@ -802,7 +805,10 @@
     "pix_total": "Pagamento total",
     "pix_expires": "Pagar em até",
     "pix_copy_btn": "copiar código pix",
-    "pix_instructions": "Copie o código Pix acima, acesse o app do seu banco, escolha pagar com Pix, cole o código e finalize o pagamento. Seu pagamento será aprovado em alguns segundos.",
+    "pix_instructions": "{copyCode} Pix acima, acesse o app do seu banco, escolha pagar com Pix, {pasteCode} e {finalize}. Seu pagamento será aprovado em alguns segundos.",
+    "pix_copy_code": "Copie o código",
+    "pix_paste_code": "cole o código",
+    "pix_finalize": "finalize o pagamento",
     "pix_email_note": "Você também receberá as instruções no seu email. Depois, é só aguardar a confirmação do diarista escolhido.",
     "processing_title": "Aguardando pagamento",
     "processing_message": "Estamos processando seu pagamento, aguarde um momento...",
@@ -828,8 +834,8 @@
         "warning_free": "Cancelamentos gratuitos até 12h antes do horário agendado.",
         "warning_fee": "Cancelamentos após este período geram reembolso de 50% do valor, como taxa de compensação ao profissional.",
         "btn_cancel": "cancelar",
-        "btn_back": "voltar",
-        "btn_keep": "Cancelar o serviço"
+        "btn_back": "Manter o pedido",
+        "btn_keep": "Cancelar"
       }
     }
   },

src/layouts/MainLayout.vue

@@ -39,7 +39,7 @@
           :class="{ 'provider-bottom-nav-item--active': isNavItemActive(item) }"
         >
           <q-icon :name="item.icon" class="provider-bottom-nav-icon" />
-          <span class="provider-bottom-nav-label">{{ item.label }}</span>
+          <span class="provider-bottom-nav-label font12">{{ item.label }}</span>
         </router-link>
       </nav>
     </q-footer>
@@ -167,8 +167,8 @@ watch(
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   align-items: end;
-  height: 80px;
-  padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
+  height: 60px;
+  padding: 0px 0px calc(12px + env(safe-area-inset-bottom));
 }
 
 .provider-bottom-nav-item {
@@ -176,8 +176,8 @@ watch(
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
-  gap: 8px;
-  min-height: 56px;
+  gap: 2px;
+  min-height: 40px;
   color: #a1a1a1;
   text-decoration: none;
   transition: color 0.2s ease;
@@ -188,13 +188,11 @@ watch(
 }
 
 .provider-bottom-nav-icon {
-  font-size: 30px;
+  font-size: 24px;
   line-height: 1;
 }
 
 .provider-bottom-nav-label {
-  font-size: 12px;
-  font-weight: 400;
   line-height: 1.1;
   letter-spacing: -0.02em;
 }

src/pages/LoginPage.vue

@@ -31,7 +31,7 @@
             color="primary"
             :label="$t('auth.register_later')"
             icon-right="mdi-chevron-right-circle-outline"
-            class="text-caption"
+            class=""
             @click="steps = 4"
           />
         </div>
@@ -60,7 +60,7 @@
               color="primary-button"
               :label="$t('auth.continue')"
               rounded
-              padding="14px 16px"
+              padding="8px 12px"
               type="submit"
               class="full-width"
               :loading="submitting"

src/pages/agenda/CalendarPage.vue

@@ -1,8 +1,9 @@
 <template>
   <q-page class="bg-page q-pb-xl">
     <div class="calendar-header row items-center bg-white">
+      <q-btn flat round dense icon="mdi-chevron-left" color="primary" @click="router.back()" />
       <q-space />
-      <span class="text-subtitle1 text-weight-bold gradient-diarista">{{ $t('dashboard_client.agenda.title') }}</span>
+      <span class="font16 fontbold gradient-diarista">{{ $t('dashboard_client.agenda.title') }}</span>
       <q-space />
     </div>
 
@@ -14,7 +15,7 @@
 
     <template v-else>
       <div class="q-mt-md q-mx-md">
-        <div class="section-title gradient-diarista q-mb-sm">{{ $t('dashboard_client.agenda.upcoming_title') }}</div>
+        <div class="section-title gradient-diarista q-mb-sm font16 fontbold">{{ $t('dashboard_client.agenda.upcoming_title') }}</div>
 
         <template v-if="upcomingSchedules.length > 0">
           <q-card
@@ -27,20 +28,23 @@
               <div class="row no-wrap items-start q-gutter-x-sm">
                 <q-avatar size="44px">
                   <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover" />
-                  <span v-else class="text-weight-bold full-width full-height flex flex-center" :style="avatarColors[item.id % avatarColors.length]" style="font-size:13px;border-radius:50%">{{ item.provider_name?.slice(0,2).toUpperCase() ?? '??' }}</span>
+                  <span v-else class="full-width full-height flex flex-center" :style="avatarColors[item.id % avatarColors.length]" style="border-radius:50%">{{ item.provider_name?.slice(0,2).toUpperCase() ?? '??' }}</span>
                 </q-avatar>
-
-                <div class="col column">
-                  <span class="text-name ellipsis">{{ item.provider_name }}</span>
+                <div class="col column text-text">
+                  <span class="font12 fontbold">{{ item.provider_name ??  $t('dashboard_client.agenda.waiting_proposals') }}</span>
                   <div class="row items-center no-wrap">
-                    <span class="text-date-bold">{{ formatWeekday(item.date) }}</span>
-                    <span class="text-date-regular">{{ ', ' + formatDayMonth(item.date) }}</span>
+                    <span class="font10 fontbold">{{ formatWeekday(item.date) }}</span>
+                    <span class="font10 fontmedium">{{ ', ' + formatDayMonth(item.date) }}</span>
                   </div>
-                  <span class="text-date-regular">
-                    {{ $t('dashboard_client.next_schedules.from') }}
-                    <span class="text-date-bold">{{ item.start_time?.slice(0, 5) }}</span>
-                    {{ $t('dashboard_client.next_schedules.to') }}
-                    <span class="text-date-bold">{{ item.end_time?.slice(0, 5) }}</span>
+                  <span class="">
+                    <span class="font10 fontmedium">
+                      {{ $t('dashboard_client.next_schedules.from') }}                  
+                    </span>
+                    <span class="font10 fontbold q-ml-xs">
+                      {{ item.start_time?.slice(0, 5) }}
+                      {{ $t('dashboard_client.next_schedules.to') }}
+                      {{ item.end_time?.slice(0, 5) }}
+                    </span>
                   </span>
                 </div>
 
@@ -51,24 +55,25 @@
                     :color="statusBgColor(item.status)"
                     :text-color="statusTextColor(item.status)"
                     :label="statusLabel(item.status)"
-                    class="status-chip"
+                    class="font10"
                   />
-                  <span class="text-price">{{ formatCurrency(item.total_amount) }}</span>
-                  <span class="text-period">{{ periodLabel(item.period_type) }}</span>
+                  <span class="text-price font12 fontbold">{{ formatCurrency(item.total_amount) }}</span>
+                  <span class="text-period font10 fontmedium">{{ periodLabel(item.period_type) }}</span>
                 </div>
               </div>
 
               <div class="row items-center no-wrap q-mt-xs">
-                <span class="type-label" :class="item.schedule_type === 'custom' ? 'type-custom' : 'type-default'">
+                <span class="type-label text-primary font10 fontmedium">
                   {{ item.schedule_type === 'custom' ? $t('dashboard_client.agenda.type_custom') : $t('dashboard_client.agenda.type_default') }}
                 </span>
                 <q-space />
                 <q-btn
-                  flat
+                  rounded
                   no-caps
                   color="primary"
-                  size="xs"
-                  class="btn-action"
+                  size="sm"
+                  padding="4px 8px"
+                  class=""
                   :label="$t('dashboard_client.agenda.btn_view_details')"
                   @click="openDetailsDialog(item)"
                 />
@@ -83,7 +88,7 @@
       </div>
 
       <div class="q-mt-lg q-mx-md">
-        <div class="section-title gradient-diarista q-mb-sm">{{ $t('dashboard_client.agenda.completed_title') }}</div>
+        <div class="section-title gradient-diarista q-mb-sm font16 fontbold">{{ $t('dashboard_client.agenda.completed_title') }}</div>
 
         <template v-if="completedSchedules.length > 0">
           <q-card
@@ -96,20 +101,24 @@
               <div class="row no-wrap items-start q-gutter-x-sm">
                 <q-avatar size="44px">
                   <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover" />
-                  <span v-else class="text-weight-bold full-width full-height flex flex-center" :style="avatarColors[item.id % avatarColors.length]" style="font-size:13px;border-radius:50%">{{ item.provider_name?.slice(0,2).toUpperCase() ?? '??' }}</span>
+                  <span v-else class="full-width full-height flex flex-center" :style="avatarColors[item.id % avatarColors.length]" style="border-radius:50%">{{ item.provider_name?.slice(0,2).toUpperCase() ?? '??' }}</span>
                 </q-avatar>
 
-                <div class="col column">
-                  <span class="text-name ellipsis">{{ item.provider_name }}</span>
+                <div class="col column text-text">
+                  <span class="font12 fontbold">{{ item.provider_name ??  $t('dashboard_client.agenda.waiting_proposals') }}</span>
                   <div class="row items-center no-wrap">
-                    <span class="text-date-bold">{{ formatWeekday(item.date) }}</span>
-                    <span class="text-date-regular">{{ ', ' + formatDayMonth(item.date) }}</span>
+                    <span class="font10 fontbold">{{ formatWeekday(item.date) }}</span>
+                    <span class="font10 fontmedium">{{ ', ' + formatDayMonth(item.date) }}</span>
                   </div>
-                  <span class="text-date-regular">
-                    {{ $t('dashboard_client.next_schedules.from') }}
-                    <span class="text-date-bold">{{ item.start_time?.slice(0, 5) }}</span>
-                    {{ $t('dashboard_client.next_schedules.to') }}
-                    <span class="text-date-bold">{{ item.end_time?.slice(0, 5) }}</span>
+                  <span class="">
+                    <span class="font10 fontmedium">
+                      {{ $t('dashboard_client.next_schedules.from') }}                  
+                    </span>
+                    <span class="font10 fontbold q-ml-xs">
+                      {{ item.start_time?.slice(0, 5) }}
+                      {{ $t('dashboard_client.next_schedules.to') }}
+                      {{ item.end_time?.slice(0, 5) }}
+                    </span>
                   </span>
                 </div>
 
@@ -120,15 +129,15 @@
                     :color="statusBgColor(item.status)"
                     :text-color="statusTextColor(item.status)"
                     :label="statusLabel(item.status)"
-                    class="status-chip"
+                    class="font10"
                   />
-                  <span class="text-price">{{ formatCurrency(item.total_amount) }}</span>
-                  <span class="text-period">{{ periodLabel(item.period_type) }}</span>
+                  <span class="text-price font12 fontbold">{{ formatCurrency(item.total_amount) }}</span>
+                  <span class="text-period font10 fontmedium">{{ periodLabel(item.period_type) }}</span>
                 </div>
               </div>
 
               <div class="row items-center no-wrap q-mt-xs">
-                <span class="type-label" :class="item.schedule_type === 'custom' ? 'type-custom' : 'type-default'">
+                <span class="type-label text-primary font10 fontmedium">
                   {{ item.schedule_type === 'custom' ? $t('dashboard_client.agenda.type_custom') : $t('dashboard_client.agenda.type_default') }}
                 </span>
                 <q-space />
@@ -148,7 +157,8 @@
                   rounded
                   no-caps
                   color="secondary"
-                  size="xs"
+                  size="sm"
+                  padding="4px 8px"
                   class="btn-rate"
                   :label="$t('dashboard_client.agenda.btn_reschedule')"
                   @click="openSchedulingDialog(item)"
@@ -159,7 +169,8 @@
                   rounded
                   no-caps
                   color="secondary"
-                  size="xs"
+                  size="sm"
+                  padding="4px 8px"
                   class="btn-rate"
                   :label="$t('dashboard_client.agenda.btn_rate')"
                   @click="openRatingDialog(item)"
@@ -186,9 +197,11 @@ import { formatCurrency } from 'src/helpers/utils';
 import NextSchedulesDetailsDialog from 'src/components/dashboard/NextSchedulesDetailsDialog.vue';
 import ScheduleRatingDialog from 'src/components/dashboard/ScheduleRatingDialog.vue';
 import SchedulingDialog from 'src/pages/search/components/SchedulingDialog.vue';
+import { useRouter } from 'vue-router';
 
 const $q = useQuasar();
 const { t } = useI18n();
+const router = useRouter();
 
 const avatarColors = [
   { background: '#ffd5df', color: '#932e57' },
@@ -327,72 +340,25 @@ onMounted(async () => {
 }
 
 .type-label {
-  font-size: 10px;
-  font-weight: 600;
   line-height: 1.2;
 }
 
-.type-default {
-  color: #8B5CF6;
-}
 
-.type-custom {
-  color: #EC4899;
-}
 
-.text-name {
-  font-size: 13px;
-  font-weight: 700;
-  color: #3a3a4a;
-  max-width: 130px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.text-date-bold {
-  font-family: 'Inter', sans-serif;
-  font-size: 11px;
-  font-weight: 700;
-  color: #3a3a4a;
-}
-
-.text-date-regular {
-  font-family: 'Inter', sans-serif;
-  font-size: 11px;
-  font-weight: 400;
-  color: #666;
-}
 
 .text-price {
-  font-size: 13px;
-  font-weight: 700;
   color: #3a3a4a;
   white-space: nowrap;
 }
 
 .text-period {
-  font-size: 10px;
   color: #888;
   text-align: right;
   white-space: nowrap;
 }
 
-.status-chip {
-  font-size: 11px !important;
-  font-weight: 700;
-  height: auto;
-  padding: 2px 2px;
-}
-
-.btn-action {
-  font-size: 11px;
-  font-weight: 700;
-}
 
 .btn-rate {
-  font-size: 11px;
-  font-weight: 700;
   padding: 3px 10px;
 }
 

src/pages/dashboard/DashboardPage.vue

@@ -7,9 +7,9 @@
     </template>
     <template v-else>
       <DashboardHeaderBar
-  :data="headerBar"
-  :notifications="notifications"
-/>
+        :data="headerBar"
+        :notifications="notifications"
+      />
       <DashboardRegistrationIncomplete v-if="!registrationComplete" />
       <DashboardSummaryInfos v-else :data="summaryInfos" />
       <DashboardPaymentIncomplete v-if="!hasPaymentMethods" />
@@ -21,7 +21,7 @@
       />
       <DashboardTodaySchedules v-if="todaySchedules.length > 0" :data="todaySchedules" @rate="openRatingDialog" />
       <DashboardScrollAreaSchedules />
-      <DashboardClientProposals :data="clientProposals" @refresh-data="reloadDashboard" />
+      <DashboardClientProposals v-if="clientProposals.length > 0" :data="clientProposals" @refresh-data="reloadDashboard" />
       <DashboardPendingCustomSchedules v-if="clientProposals.length === 0" />
       <DashboardNextSchedules v-if="nextSchedules.length > 0" :data="nextSchedules" @view-details="openNextScheduleDialog" />
       <DashboardLastDoneSchedules v-if="lastDoneSchedules.length > 0" :data="lastDoneSchedules" />
@@ -73,8 +73,7 @@ const providersClose = ref([]);
 const todaySchedules = ref([]);
 const notifications = ref([]);
 const loading = ref(true);
-const showSuccessModal = ref(router.currentRoute.value.fullPath.includes('showSuccessModal') || false);
-
+const showSuccessModal = ref(router.currentRoute.value.fullPath.includes('showSuccessModal'));
 const registrationComplete = computed(() => store.user?.registration_complete ?? true);
 
 
@@ -106,10 +105,10 @@ const reloadDashboard = async () => {
   if( showSuccessModal.value == true) {
     $q.dialog({
        component: FinalSuccesModal   
-       })
-
-    showSuccessModal.value = false;
-    router.replace({ path: router.currentRoute.value.path, query: {} });
+    }).onDismiss(() => {
+      showSuccessModal.value = false;
+      router.replace({ path: router.currentRoute.value.path, query: {} });
+    })
   }
 
   loading.value = false;
@@ -125,7 +124,6 @@ const openNextScheduleDialog = (schedule) => {
 };
 
 const cancelSchedule = (schedule) => {
-  console.log(schedule)
   $q.dialog({
     component: ScheduleCancelDialog,
     componentProps: { schedule: schedule }

src/pages/dashboard/components/DashboardClientProposals.vue

@@ -1,68 +1,78 @@
 <template>
-  <div class="scroll-wrapper">
-    <div class="scroll-track q-pb-md q-px-md">
+  <div class="scroll-wrapper">    
+    <div class="dashboard-section-title gradient-diarista q-mb-sm font16 fontbold q-px-md">{{ $t('dashboard_client.client_proposals.title') }}</div>
+
+    <div class="scroll-track q-pb-md q-px-md text-text">
 
       <q-card v-for="item in data" :key="item.id" class="proposal-card shadow-card" :flat="false">
         <div class="row no-wrap items-center">
 
-          <q-avatar :style="avatarColors[item.id % avatarColors.length]" class="text-weight-bold q-mx-auto">
+          <q-avatar :style="avatarColors[item.id % avatarColors.length]" class="q-mx-auto">
             <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover;border-radius:50%;" />
             <span v-else>{{ item.provider_name?.slice(0, 1) ?? '—' }}</span>
           </q-avatar>
 
-          <!-- LABEL -->
-          <div class="type">
+          <div class="type customColor font10 fontbold">
             {{ $t('dashboard_client.client_proposals.candidate') }} <span>{{
               $t('dashboard_client.client_proposals.custom') }}</span>
           </div>
 
           <div class="content">
 
-            <!-- HEADER -->
             <div class="row justify-between items-center text-text ">
               <div>
-                <div class="name">
+                <div class="font12 fontbold">
                   {{ item.provider_name }}
-                  <span class="age">{{ $t('dashboard_client.client_proposals.age', { idade: item.idade }) }}</span>
+                  <span class="">{{ $t('dashboard_client.client_proposals.age', { idade: item.idade }) }}</span>
                 </div>
 
-                <span class="rating">
-                  <q-icon name="star" size="11px" />
+                <span class="font9 fontbold">
+                  <q-icon name="star" size="12px" color="warning" class="font9 fontregular"/>
                   {{ item.average_rating }}
                 </span>
               </div>
+            </div>
 
+            <div class="column font9 text-text">
+              <div class="schedule-line">
+                <span class="text-schedule-date-bold fontbold">
+                  {{ formatWeekday(item.date) }}
+                </span>
 
-            </div>
+                <span class="text-schedule-date-regular">
+                  {{ ', ' + formatDayMonth(item.date) }}
+                </span>
+              </div>
+
+              <div class="schedule-line q-pt-xs">
+                <span class="text-schedule-date-regular">
+                  {{ $t('dashboard_client.next_schedules.from') }}&nbsp;
+                </span>
 
-            <!-- DATA -->
-            <div class="datetime">
-              {{ formatDate(item.date) }} <br />
-              {{ $t('dashboard_client.next_schedules.from') }} {{ formatTime(item.start_time) }} {{
-                $t('dashboard_client.next_schedules.to') }} {{ formatTime(item.end_time) }}
+                <span class="text-schedule-date-bold fontbold">
+                  {{ item.start_time?.slice(0,5) }} {{ $t('dashboard_client.next_schedules.to') }} {{ item.end_time?.slice(0,5) }}
+                </span>
+              </div>
             </div>
 
             <!-- PREÇO -->
-            <div class="price">
-              {{ filterCurrency(chooseprice(item.period_type, item.daily_price_8h)) }}
+            <div class="price text-text">
+              <span class="font16 fontbold">
+                {{ filterCurrency(chooseprice(item.period_type, item.daily_price_8h)) }}            
+              </span>
 
-              <span class="text-price-label col-6">
+              <span class="col-6 font12 fontmedium">
                 {{ formatLabelByPeriodType(item.period_type) }}
               </span>
 
-              <span class="distance">
+              <span class="font9 fontmedium distance">
                 {{ $t('dashboard_client.client_proposals.distance') }} {{ (item.distance_km ?? '--') + ' km' }}
               </span>
             </div>
 
-
-
-
-
-            <!-- BOTÕES -->
             <div class="actions">
-              <q-btn label="recusar" flat class="btn-reject" @click="() => handleRefuseProposal(item.id)" />
-              <q-btn label="aceitar" class="btn-accept" @click="() => handleAcceptProposal(item.id)" />
+              <q-btn label="recusar" size="sm" padding="1px 5px" flat class="btn-reject" @click="() => handleRefuseProposal(item.id)" />
+              <q-btn label="aceitar" size="sm" padding="1px 5px" class="btn-accept" @click="() => handleAcceptProposal(item.id)" />
             </div>
 
           </div>
@@ -95,28 +105,28 @@ const avatarColors = [
   { background: '#ffe5cc', color: '#8a4500' },
 ];
 
-const formatTime = (time) => {
-  if (!time) return '';
+// const formatTime = (time) => {
+//   if (!time) return '';
 
 
-  const [hour, minute] = time.split(':');
-  return `${hour}:${minute}`;
-};
+//   const [hour, minute] = time.split(':');
+//   return `${hour}:${minute}`;
+// };
 
-const formatDate = (date) => {
-  if (!date) return '';
+// const formatDate = (date) => {
+//   if (!date) return '';
 
-  const d = new Date(date);
+//   const d = new Date(date);
 
-  const weekday = d.toLocaleDateString('pt-BR', {
-    weekday: 'long'
-  });
+//   const weekday = d.toLocaleDateString('pt-BR', {
+//     weekday: 'long'
+//   });
 
-  const day = String(d.getDate()).padStart(2, '0');
-  const month = String(d.getMonth() + 1).padStart(2, '0');
+//   const day = String(d.getDate()).padStart(2, '0');
+//   const month = String(d.getMonth() + 1).padStart(2, '0');
 
-  return `${weekday}, ${day}-${month}`;
-};
+//   return `${weekday}, ${day}-${month}`;
+// };
 
 const handleRefuseProposal = async (proposalId) => {
   // isLoading.value = true
@@ -132,8 +142,21 @@ const handleRefuseProposal = async (proposalId) => {
   }
 }
 
+const formatDayMonth = (iso) => {
+  if (!iso) return '';
+
+  return new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' });
+};
+
+const formatWeekday = (iso) => {
+  if (!iso) return '';
 
+  const d = new Date(iso);
 
+  const w = d.toLocaleDateString('pt-BR', { weekday: 'long' });
+
+  return w.charAt(0).toUpperCase() + w.slice(1);
+};
 
 const handleAcceptProposal = async (proposalId) => {
   // isLoading.value = true
@@ -194,86 +217,37 @@ const handleAcceptProposal = async (proposalId) => {
   gap: 2px;
 }
 
-/* nome */
-.name {
-  font-size: 14px;
-  font-weight: 600;
-  color: #5a3eff;
-}
-
-.age {
-  font-size: 11px;
-  color: #999;
-  font-weight: 400;
-}
-
-/* rating */
-.rating {
-  font-size: 11px;
-  color: #444;
-}
-
-/* distância */
-.distance {
-  font-size: 11px;
-  color: #777;
-  font-weight: 500;
-}
-
 .price .distance {
-  font-size: 9px; // 👈 menor
-  color: #777;
-  margin-top: 4px; // 👈 desce um pouco
-  font-weight: 400;
+  margin-top: 4px;
 }
 
-/* data */
 .datetime {
-  font-size: 10px;
-  color: #8f8f8f;
   margin-top: 2px;
   line-height: 1.2;
 }
 
-/* preço topo direito */
 .price {
   position: absolute;
   top: 12px;
   right: 12px;
-  font-size: 15px;
-  font-weight: 700;
-  color: #6b4eff;
+
   display: flex;
   flex-direction: column;
   align-items: flex-end;
 }
 
-.text-price-label {
-  font-size: 10px;
-  color: #999;
-  font-weight: 400;
-}
 
 
 .type {
   position: absolute;
   left: 12px;
   top: 72px;
-  font-size: 10px;
-  color: #6b4eff;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   line-height: 1.1;
 }
 
-.type span {
-  font-weight: 600;
-}
-
-.type span {
-  font-weight: 600;
-}
 
 /* avatar alinhado */
 .q-avatar {
@@ -294,7 +268,6 @@ const handleAcceptProposal = async (proposalId) => {
   color: #6b4eff;
   border-radius: 20px;
   padding: 3px 12px;
-  font-size: 11px;
 }
 
 .btn-accept {
@@ -302,6 +275,12 @@ const handleAcceptProposal = async (proposalId) => {
   color: white;
   border-radius: 20px;
   padding: 3px 12px;
-  font-size: 11px;
+}
+
+.customColor {
+  background: linear-gradient(180deg, #8B5CF6 50%, #EC4899 50%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 </style>

src/pages/dashboard/components/DashboardPendingCustomSchedules.vue

@@ -1,26 +1,28 @@
 <template>
-  <q-card flat bordered class="pending-request-card">
+  <q-card :flat="false" bordered class="pending-request-card shadow-card">
     <div class="request-wrapper">
       <!-- informações -->
       <div class="request-info">
-        <div class="request-title">
+        <div class="request-title font12 fontmedium">
           {{ $t('dashboard_client.dashboard_pending_custom_schedules.pending_request_title') }}
         </div>
 
         <div class="request-time">
-          <q-icon name="schedule" size="14px" />
-          <span>{{ $t('dashboard_client.dashboard_pending_custom_schedules.pending_request_time') }}</span>
+          <q-icon name="schedule" size="12px" />
+          <span class="font8 fontregular">{{ $t('dashboard_client.dashboard_pending_custom_schedules.pending_request_time') }}</span>
         </div>
       </div>
 
       <!-- status -->
       <div class="request-status">
-        <q-icon
-          name="hourglass_empty"
-          size="22px"
-          color="secondary"
-        />
-        <span>{{ $t('dashboard_client.dashboard_pending_custom_schedules.waiting_status') }}</span>
+        <div class="column items-center">
+          <div class="clock-badge">
+            <q-icon name="mdi-clock-outline" size="15px" color="white" />
+          </div>
+          <span class="font10 fontregular badge-status-text text-primary q-mt-xs">
+            {{ $t('dashboard_client.dashboard_pending_custom_schedules.waiting_status') }}
+          </span>
+        </div>
       </div>
     </div>
 
@@ -55,8 +57,6 @@
 }
 
 .request-title {
-  font-size: 14px;
-  font-weight: 500;
   color: #4b4b4b;
   line-height: 1.2;
 }
@@ -66,7 +66,6 @@
   align-items: center;
   gap: 4px;
   color: #999;
-  font-size: 12px;
 }
 
 .request-status {
@@ -74,8 +73,6 @@
   flex-direction: column;
   align-items: center;
   color: #9b5cff;
-  font-size: 12px;
-  font-weight: 500;
 }
 
 .progress-track {
@@ -91,4 +88,14 @@
   height: 100%;
   background: linear-gradient(90deg, #ff72df, #8f5cff);
 }
+
+.clock-badge {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #8B5CF6, #EC4899);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>

src/pages/location/AddressCompletionPage.vue

@@ -13,7 +13,7 @@
 
       <div class="address-completion-content">
         <div class="text-text">
-          <span class="text-weight-medium">{{ $t('common.terms.address') }}</span>
+          <span class="font14 fontbold">{{ $t('common.terms.address') }}</span>
         </div>
         <q-input
           :model-value="flowStore.confirmedAddress"
@@ -27,7 +27,7 @@
         <div class="row q-col-gutter-sm">
           <div class="col-4">
             <div class="text-text">
-              <span class="text-weight-medium">{{ $t('common.terms.address_number') }}</span>
+              <span class="font14 fontbold">{{ $t('common.terms.address_number') }}</span>
             </div>
             <q-input
               v-model="form.number"
@@ -40,7 +40,7 @@
           </div>
           <div class="col-8">
             <div class="text-text">
-              <span class="text-weight-medium">{{ $t('common.terms.district') }}</span>
+              <span class="font14 fontbold">{{ $t('common.terms.district') }}</span>
             </div>
             <q-input
               :model-value="flowStore.confirmedDistrict"
@@ -56,7 +56,7 @@
         <div class="row q-col-gutter-sm">
           <div class="col-8">
             <div class="text-text">
-              <span class="text-weight-medium">{{ $t('common.terms.city') }}</span>
+              <span class="font14 fontbold">{{ $t('common.terms.city') }}</span>
             </div>
             <q-input
               :model-value="flowStore.confirmedCity"
@@ -69,7 +69,7 @@
           </div>
           <div class="col-4">
             <div class="text-text">
-              <span class="text-weight-medium">{{ $t('common.terms.state') }}</span>
+              <span class="font14 fontbold">{{ $t('common.terms.state') }}</span>
             </div>
             <q-input
               :model-value="flowStore.confirmedState"
@@ -92,7 +92,7 @@
 
         <template v-if="!form.no_complement">
           <div class="text-text">
-            <span class="text-weight-medium">{{ $t('auth.complement') }}</span>
+            <span class="font14 fontbold">{{ $t('auth.complement') }}</span>
           </div>
           <q-input
             v-model="form.complement"
@@ -105,7 +105,7 @@
         </template>
 
         <div class="text-text">
-          <span class="text-weight-medium">{{ $t('auth.address_nickname') }}</span>
+          <span class="font14 fontbold">{{ $t('auth.address_nickname') }}</span>
         </div>
         <q-input
           v-model="form.nickname"
@@ -117,7 +117,7 @@
         />
 
         <div class="text-text">
-          <span class="text-weight-medium">{{ $t('auth.address_instructions') }}</span>
+          <span class="font14 fontbold">{{ $t('auth.address_instructions') }}</span>
         </div>
         <q-input
           v-model="form.instructions"

src/pages/location/LocationMapPage.vue

@@ -12,7 +12,7 @@
     />
 
     <div class="location-map-bottom-card">
-      <p class="location-map-address-label">{{ $t('common.terms.address') }}</p>
+      <p class="font14 fontbold">{{ $t('common.terms.address') }}</p>
       <q-input
         :model-value="currentAddress"
         outlined
@@ -199,8 +199,6 @@ onUnmounted(async () => {
 }
 
 .location-map-address-label {
-  font-size: 14px;
-  font-weight: 600;
   color: var(--q-text);
   margin: 0 0 8px;
 }

src/pages/notifications/NotificationsPage.vue

@@ -9,11 +9,11 @@
         round
         dense
         icon="chevron_left"
-        class="back-btn"
+        class="back-btn text-text"
         @click="router.back()"
       />
 
-      <div class="header-title">
+      <div class="header-title font16 fontbold gradient-diarista">
         {{ $t('notifications.title') }}
       </div>
 
@@ -22,7 +22,7 @@
     <!-- ACTIONS -->
     <div class="actions row justify-between items-center">
 
-      <div class="unread-text">
+      <div class="text-text font14 fontmedium">
         {{ $t('notifications.unread') }} {{ unreadCount }}
       </div>
 
@@ -42,9 +42,9 @@
       <q-card
         v-for="item in notifications"
         :key="item.id"
-        flat
+        :flat="false"
         clickable
-        class="notification-card"
+        class="notification-card shadow-card"
         :class="{ unread: !item.read }"
        @click="handleNotification(item)"
       >
@@ -53,7 +53,7 @@
 
           <!-- AVATAR -->
           <q-avatar size="44px" class="notification-avatar">
-          <img :src="getNotificationIcon(item.type)" />
+            <img :src="getNotificationIcon(item.type)" />
           </q-avatar>
 
           <!-- CONTENT -->
@@ -61,7 +61,7 @@
 
             <div class="notification-header">
 
-              <div class="notification-title">
+              <div class="notification-title text-grey-7 font14 fontbold">
                 {{ item.title }}
               </div>
 
@@ -73,11 +73,11 @@
 
             </div>
 
-            <div class="notification-description">
+            <div class="notification-description text-grey-7 font12 fontmedium">
               {{ item.description }}
             </div>
 
-            <div class="notification-time">
+            <div class="notification-time font12 fontmedium text-grey-7">
               {{ item.time }}
             </div>
 
@@ -206,7 +206,6 @@ const getNotificationIcon = (type) => {
   min-height: 100vh;
 }
 
-/* HEADER */
 .header {
   position: relative;
 
@@ -222,35 +221,22 @@ const getNotificationIcon = (type) => {
 
 .header-title {
   width: 100%;
-
   text-align: center;
-
-  font-size: 17px;
-  font-weight: 700;
-
-  color: #8B5CF6;
 }
 
-/* ACTIONS */
 .actions {
   padding: 14px 16px 10px;
 }
 
-.unread-text {
-  font-size: 13px;
-  font-weight: 500;
+.unread-ext {
 
   color: #6b7280;
 }
 
 .mark-read-btn {
-  font-size: 12px;
-  font-weight: 600;
-
   color: #ff4fd8;
 }
 
-/* LIST */
 .notifications-list {
   display: flex;
   flex-direction: column;
@@ -260,7 +246,6 @@ const getNotificationIcon = (type) => {
   padding: 0 14px 24px;
 }
 
-/* CARD */
 .notification-card {
   background: #ffffff;
 
@@ -268,9 +253,6 @@ const getNotificationIcon = (type) => {
 
   padding: 16px 16px;
 
-  box-shadow:
-    0 2px 10px rgba(0, 0, 0, 0.05);
-
   transition: 0.2s ease;
 }
 
@@ -278,7 +260,6 @@ const getNotificationIcon = (type) => {
   background: #ffffff;
 }
 
-/* WRAPPER */
 .notification-wrapper {
   display: flex;
 
@@ -287,7 +268,6 @@ const getNotificationIcon = (type) => {
   gap: 12px;
 }
 
-/* AVATAR */
 .notification-avatar {
   flex-shrink: 0;
 
@@ -295,14 +275,12 @@ const getNotificationIcon = (type) => {
   height: 44px !important;
 }
 
-/* CONTENT */
 .notification-content {
   flex: 1;
 
   min-width: 0;
 }
 
-/* HEADER */
 .notification-header {
   display: flex;
 
@@ -313,47 +291,26 @@ const getNotificationIcon = (type) => {
   gap: 10px;
 }
 
-/* TITLE */
 .notification-title {
-  font-size: 16px;
-  font-weight: 700;
-
-  color: #5b5b5b;
-
   line-height: 1.1;
 }
 
-/* DESCRIPTION */
 .notification-description {
   margin-top: 4px;
 
-  font-size: 12px;
-  font-weight: 500;
-
   line-height: 1.35;
 
-  color: #8f8f8f;
 }
 
-/* TIME */
 .notification-time {
   margin-top: 8px;
-
-  font-size: 11px;
-  font-weight: 500;
-
-  color: #b5b5b5;
 }
 
-/* STATUS */
 .status-dot {
   width: 14px;
   height: 14px;
-
   border-radius: 999px;
-
   background: #e6e6e6;
-
   flex-shrink: 0;
 }
 

src/pages/profile/ProfileEditDialog.vue

@@ -4,7 +4,7 @@
       <div class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-profile">
         <q-btn flat round dense icon="mdi-chevron-left" color="primary" @click="onDialogCancel" />
         <q-space />
-        <span class="text-subtitle1 text-weight-bold text-primary">{{ $t('profile.edit_data') }}</span>
+        <span class="text-subtitle1 text-primary font16 fontbold gradient-diarista">{{ $t('profile.edit_data') }}</span>
         <q-space />
         <div style="width: 32px"></div>
       </div>
@@ -16,7 +16,7 @@
       <template v-else>
         <q-scroll-area class="col" style="height: calc(100vh - 72px)">
           <div class="column items-center q-mt-xl q-mb-md">
-            <q-avatar size="140px" color="indigo-1" text-color="indigo-4" class="text-weight-bold text-h2 shadow-1">
+            <q-avatar size="140px" color="indigo-1" text-color="indigo-4" class="text-h2 shadow-1">
               <img v-if="avatarPreview" :src="avatarPreview" style="object-fit: cover; width: 100%; height: 100%;" />
               <span v-else>{{ form.name ? form.name.charAt(0).toUpperCase() : '' }}</span>
             </q-avatar>
@@ -33,7 +33,7 @@
           <q-form ref="formRef" @submit.prevent="onSubmit">
             <div class="q-px-xl q-gutter-y-lg">
               <div>
-                <div class="text-weight-bold text-grey-8 q-mb-sm">{{ $t('profile.full_name') }}</div>
+                <div class="text-grey-8 q-mb-sm font12 fontbold">{{ $t('profile.full_name') }}</div>
                 <q-input
                   v-model="form.name"
                   outlined
@@ -48,7 +48,7 @@
               </div>
 
               <div>
-                <div class="text-weight-bold text-grey-8 q-mb-sm">{{ $t('profile.email') }}</div>
+                <div class="text-grey-8 q-mb-sm font12 fontbold">{{ $t('profile.email') }}</div>
                 <q-input
                   v-model="form.email"
                   outlined
@@ -63,7 +63,7 @@
               </div>
 
               <div>
-                <div class="text-weight-bold text-grey-8 q-mb-sm">{{ $t('profile.phone') }}</div>
+                <div class="text-grey-8 q-mb-sm font12 fontbold">{{ $t('profile.phone') }}</div>
                 <q-input
                   v-model="form.phone"
                   outlined
@@ -79,7 +79,7 @@
               </div>
 
               <div>
-                <div class="text-weight-bold text-grey-8 q-mb-sm">{{ $t('profile.document') }}</div>
+                <div class="text-grey-8 q-mb-sm font12 fontbold">{{ $t('profile.document') }}</div>
                 <q-input
                   v-model="form.document"
                   outlined
@@ -96,11 +96,11 @@
               </div>
 
               <div>
-                <div class="text-weight-bold text-grey-8 q-mb-sm">{{ $t('profile.language') }}</div>
+                <div class="text-grey-8 q-mb-sm font12 fontbold">{{ $t('profile.language') }}</div>
                 <div class="row">
-                  <q-radio v-model="selectedLocale" val="pt" :label="$t('profile.lang_pt')" color="primary" class="text-text col-4" keep-color @update:model-value="onLocaleChange" />
-                  <q-radio v-model="selectedLocale" val="en" :label="$t('profile.lang_en')" color="primary" class="text-text col-4" keep-color @update:model-value="onLocaleChange" />
-                  <q-radio v-model="selectedLocale" val="es" :label="$t('profile.lang_es')" color="primary" class="text-text col-4" keep-color @update:model-value="onLocaleChange" />
+                  <q-radio v-model="selectedLocale" val="pt" :label="$t('profile.lang_pt')" color="primary" class="text-text col-4 font10 fontmedium" keep-color @update:model-value="onLocaleChange" />
+                  <q-radio v-model="selectedLocale" val="en" :label="$t('profile.lang_en')" color="primary" class="text-text col-4 font10 fontmedium" keep-color @update:model-value="onLocaleChange" />
+                  <q-radio v-model="selectedLocale" val="es" :label="$t('profile.lang_es')" color="primary" class="text-text col-4 font10 fontmedium" keep-color @update:model-value="onLocaleChange" />
                 </div>
               </div>
             </div>
@@ -114,7 +114,7 @@
                 rounded
                 no-caps
                 padding="8px 16px"
-                class="full-width q-py-md text-weight-bold"
+                class="full-width q-py-md"
                 :label="$t('profile.update')"
                 :color="hasUpdatedFields || avatarFile ? 'primary' : 'grey-4'"
                 :disable="!hasUpdatedFields && !avatarFile"

src/pages/profile/ProfilePage.vue

@@ -3,7 +3,7 @@
   <q-page class="bg-page q-pb-xl">
     <div class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-profile">
       <q-space />
-      <span class="text-subtitle1 text-weight-bold text-primary">{{ $t('profile.title') }}</span>
+      <span class="text-subtitle1 text-primary font16 fontbold gradient-diarista">{{ $t('profile.title') }}</span>
       <q-space />
     </div>
 
@@ -12,14 +12,14 @@
         <q-btn flat round dense icon="mdi-share-variant-outline" color="grey-6" class="absolute-top-right q-ma-sm" />
         
         <q-card-section class="column items-center q-pb-md">
-          <q-avatar size="70px" color="indigo-1" text-color="indigo-4" class="shadow-card text-weight-bold text-h5">
+          <q-avatar size="70px" color="indigo-1" text-color="indigo-4" class="shadow-card text-h5">
             <img v-if="user.client?.profile_media?.url" :src="user.client.profile_media.url" style="object-fit: cover;" />
             <span v-else>{{ user.name ? user.name.charAt(0).toUpperCase() : '' }}</span>
           </q-avatar>
           
-          <div class="fonte-nome-profile text-weight-bold q-mt-md text-dark">{{ user.name || '—' }}</div>
-          <div class="fonte-email-profile text-grey-6 q-my-sm">{{ user.email || '—' }}</div>
-          <div class="fonte-telefone-profile text-grey-7">{{ user.phone || '—' }}</div> 
+          <div class="fonte-nome-profile q-mt-md text-dark font16 fontbold">{{ user.name || '—' }}</div>
+          <div class="fonte-email-profile text-grey-6 q-my-sm font10 fontmedium">{{ user.email || '—' }}</div>
+          <div class="fonte-telefone-profile text-grey-7 font12 fontmedium">{{ user.phone || '—' }}</div> 
           
           <q-btn 
             outline 
@@ -30,7 +30,7 @@
           >
             <div class="row items-center q-gutter-x-sm">
               <q-icon name="mdi-account-outline" size="18px" />
-              <span class="text-weight-medium">{{ $t('profile.edit_profile') }}</span>
+              <span class="font10 fontbold">{{ $t('profile.edit_profile') }}</span>
             </div>
           </q-btn>
         </q-card-section>
@@ -40,8 +40,8 @@
     <div class="q-mt-md q-px-md column">
       <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openPaymentsDialog">
         <div class="column">
-          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.payments.title') }}</span>
-          <span class="menu-description text-text">{{ $t('profile.payments.description') }}</span>
+          <span class="menu-title gradient-diarista font16 fontbold">{{ $t('profile.payments.title') }}</span>
+          <span class="text-text font12 fontregular">{{ $t('profile.payments.description') }}</span>
         </div>
         <q-space/>
         <q-icon name="mdi-chevron-right" color="primary" size="md" />
@@ -49,8 +49,8 @@
 
       <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openFavoritesDialog">
         <div class="column">
-          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.favorites.title') }}</span>
-          <span class="menu-description text-text">{{ $t('profile.favorites.description') }}</span>
+          <span class="menu-title gradient-diarista font16 fontbold">{{ $t('profile.favorites.title') }}</span>
+          <span class="text-text font12 fontregular">{{ $t('profile.favorites.description') }}</span>
         </div>
         <q-space/>
         <q-icon name="mdi-chevron-right" color="primary" size="md" />
@@ -58,8 +58,8 @@
 
       <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openAddressDialog">
         <div class="column">
-          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.address.title') }}</span>
-          <span class="menu-description text-text">{{ $t('profile.address.description') }}</span>
+          <span class="menu-title gradient-diarista font16 fontbold">{{ $t('profile.address.title') }}</span>
+          <span class="text-text font12 fontregular">{{ $t('profile.address.description') }}</span>
         </div>
         <q-space/>
         <q-icon name="mdi-chevron-right" color="primary" size="md" />
@@ -67,8 +67,8 @@
 
       <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openHelpDialog">
         <div class="column">
-          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.help.title') }}</span>
-          <span class="menu-description text-text">{{ $t('profile.help.description') }}</span>
+          <span class="menu-title gradient-diarista font16 fontbold">{{ $t('profile.help.title') }}</span>
+          <span class="text-text font12 fontregular">{{ $t('profile.help.description') }}</span>
         </div>
         <q-space/>
         <q-icon name="mdi-chevron-right" color="primary" size="md" />
@@ -76,8 +76,8 @@
 
       <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openPrivacyDialog">
         <div class="column">
-          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.privacy.title') }}</span>
-          <span class="menu-description text-text">{{ $t('profile.privacy.description') }}</span>
+          <span class="menu-title gradient-diarista font16 fontbold">{{ $t('profile.privacy.title') }}</span>
+          <span class="text-text font12 fontregular">{{ $t('profile.privacy.description') }}</span>
         </div>
         <q-space/>
         <q-icon name="mdi-chevron-right" color="primary" size="md" />
@@ -85,8 +85,8 @@
 
       <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openPrivacyPolicy">
         <div class="column">
-          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.privacy_policy.title') }}</span>
-          <span class="menu-description text-text">{{ $t('profile.privacy_policy.description') }}</span>
+          <span class="menu-title gradient-diarista font16 fontbold">{{ $t('profile.privacy_policy.title') }}</span>
+          <span class="text-text font12 fontregular">{{ $t('profile.privacy_policy.description') }}</span>
         </div>
         <q-space/>
         <q-icon name="mdi-chevron-right" color="primary" size="md" />
@@ -94,8 +94,8 @@
 
       <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="openSupportPage">
         <div class="column">
-          <span class="menu-title gradient-diarista text-weight-bold">{{ $t('profile.support_page.title') }}</span>
-          <span class="menu-description text-text">{{ $t('profile.support_page.description') }}</span>
+          <span class="menu-title gradient-diarista font16 fontbold">{{ $t('profile.support_page.title') }}</span>
+          <span class="text-text font12 fontregular">{{ $t('profile.support_page.description') }}</span>
         </div>
         <q-space/>
         <q-icon name="mdi-chevron-right" color="primary" size="md" />
@@ -105,8 +105,8 @@
 
       <div class="menu-item row items-center no-wrap cursor-pointer q-py-sm" @click="handleLogout">
         <div class="column">
-          <span class="menu-title text-weight-bold text-text">{{ $t('profile.logout.title') }}</span>
-          <span class="menu-description text-text">{{ $t('profile.logout.description') }}</span>
+          <span class="menu-title text-text font16 fontbold">{{ $t('profile.logout.title') }}</span>
+          <span class="text-text font12 fontregular">{{ $t('profile.logout.description') }}</span>
         </div>
         <q-space/>
         <q-icon name="mdi-chevron-right" color="primary" size="md" />
@@ -227,14 +227,9 @@ onMounted(async () => {
 }
 
 .menu-title {
-  font-size: 18px;
   line-height: 1.4;
 }
 
-.menu-description {
-  font-size: 14px;
-}
-
 .flex-1 {
   flex: 1;
 }
@@ -244,28 +239,16 @@ onMounted(async () => {
 }
 
 .fonte-email-profile {
-  font-family: Inter;
-  font-weight: 500;
-  font-style: Medium;
-  font-size: 12px;
   line-height: 100%;
   letter-spacing: 0%;
 }
 
 .fonte-telefone-profile {
-  font-family: Inter;
-  font-weight: 500;
-  font-style: Medium;
-  font-size: 12px;
   line-height: 100%;
   letter-spacing: 0%;
 }
 
 .fonte-nome-profile {
-  font-family: Inter;
-  font-weight: 700;
-  font-style: Bold;
-  font-size: 18px;
   line-height: 100%;
   letter-spacing: 0%;
   text-align: center;

src/pages/schedules/SobMedidaPage.vue

@@ -1,19 +1,20 @@
 <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
 <template>
   <q-page class="sob-medida-page">
+    <div class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-profile">
+      <q-btn flat round dense icon="mdi-chevron-left" color="primary" @click="router.back()" />
+      <q-space />
+      <span class="text-subtitle1 text-primary font16 fontbold gradient-diarista">{{ $t('sob_medida.page_title') }}</span>
+      <q-space />
+    </div>
     <div class="page-shell">
-      <span class="page-title gradient-diarista">
-        {{ $t('sob_medida.page_title') }}
-      </span>
 
-      <!-- CARD PEDIDO -->
       <q-card flat bordered class="figma-card compact-card">
-        <div class="card-title text-center gradient-diarista">
+        <div class="card-title text-left font16 fontbold gradient-diarista">
           {{ $t('sob_medida.your_order') }}
         </div>
 
-        <!-- quantidade -->
-        <div class="field-label text-center gradient-diarista">
+        <div class="field-label text-center gradient-diarista font12 fontbold">
           {{ $t('sob_medida.quantity_service') }}
         </div>
 
@@ -23,6 +24,7 @@
             flat
             icon="remove"
             class="quantity-btn"
+            size="sm"
             @click="decreaseQuantity"
           />
 
@@ -34,12 +36,12 @@
             round
             flat
             icon="add"
+            size="sm"
             class="quantity-btn"
             @click="increaseQuantity"
           />
         </div>
 
-        <!-- endereço -->
         <div class="options-grid gradient-diarista">
           <div
             v-for="option in addressTypesOptions"
@@ -56,8 +58,7 @@
           </div>
         </div>
 
-        <!-- tipo serviço -->
-        <div class="field-label text-center gradient-diarista">
+        <div class="field-label text-center gradient-diarista font12 fontbold">
           {{ $t('sob_medida.service_type') }}
         </div>
 
@@ -77,8 +78,7 @@
           </div>
         </div>
 
-        <!-- especialidades -->
-        <div class="field-label text-center gradient-diarista">
+        <div class="field-label text-center gradient-diarista font12 fontbold">
           {{ $t('sob_medida.preferred_specialty') }}
         </div>
 
@@ -98,7 +98,6 @@
           </div>
         </div>
 
-        <!-- descrição -->
         <div class="field-label text-center gradient-diarista">
           {{ $t('sob_medida.description_label') }}
           <span class="optional">
@@ -118,8 +117,7 @@
         />
       </q-card>
 
-      <!-- FAIXA -->
-      <div class="section-title gradient-diarista">
+      <div class="section-title gradient-diarista font16 fontbold">
         {{ $t('sob_medida.price_range_title') }}
       </div>
 
@@ -148,22 +146,23 @@
           />
         </div>
 
-        <div class="range-helper gradient-diarista">
+        <div class="range-helper">
           {{ $t('sob_medida.price_range_helper') }}
         </div>
       </q-card>
 
-      <!-- DATA -->
-      <div class="section-title gradient-diarista">
+      <div class="font16 fontbold section-title gradient-diarista">
         {{ $t('sob_medida.date_and_time') }}
       </div>
 
-      <q-card flat bordered class="figma-card date-card">
+      <q-card bordered class="date-card">
         <q-date
           v-model="selectedDate"
           minimal
+          square
           color="purple"
-          class="figma-date calendar-custom"
+          class="full-width figma-date calendar-custom"
+          :options="dateOptions"
         />
       </q-card>
     </div>
@@ -171,9 +170,8 @@
 </template>
 
 <script setup>
-// IMPORTS
 import { ref, computed, watch, onMounted } from 'vue'
-import { useQuasar } from 'quasar'
+import { useQuasar, date } from 'quasar'
 import { useRouter } from 'vue-router'
 
 import ServiceSelectionSheet from 'src/pages/search/components/ServiceSelectionSheet.vue'
@@ -187,13 +185,11 @@ import {useI18n} from 'vue-i18n'
 import { userStore } from 'src/stores/user'
 import { calculateDailyPrices } from 'src/helpers/utils'
 
-// SETUP
 const $q = useQuasar()
 const router = useRouter()
 const user = userStore()
 const { t } = useI18n()
 
-// REFS
 const serviceTypes = ref([])
 const specialties = ref([])
 const address = ref(null)
@@ -215,7 +211,6 @@ const priceRange = ref({
   max: 300
 })
 
-// COMPUTED
 const addressTypesOptions = computed(() => [
   { label: t('sob_medida.residential'), value: 'home' },
   { label: t('sob_medida.commercial'), value: 'commercial' }
@@ -235,7 +230,6 @@ const maxPosition = computed(() =>
     (PRICE_LIMITS.max - PRICE_LIMITS.min)) * 100
 )
 
-// FUNCTIONS
 const openServiceSelection = () => {
   $q.dialog({
     component: ServiceSelectionSheet,
@@ -291,10 +285,7 @@ const saveFinalOrder = async (payloadFinal) => {
     message: t('sob_medida.success_message')
   })
 
-  router.push({
-  name: 'DashboardPage',
-  query: { showSuccessModal: 'true' }
-})
+  router.push('/#showSuccessModal')
 }
 
 const increaseQuantity = () => {
@@ -305,13 +296,16 @@ const decreaseQuantity = () => {
   if (quantity.value > 1) quantity.value--
 }
 
-// WATCH
+const dateOptions = (d) => {
+  const today = date.formatDate(new Date(), 'YYYY/MM/DD')
+  return d >= today
+}
+
 watch(selectedDate, (newDate, oldDate) => {
   if (!newDate || newDate === oldDate) return
   openServiceSelection()
 })
 
-// LIFECYCLE
 onMounted(async () => {
   const { data } = await getPrimaryAddress(user.user.client.id, 'client')
   address.value = data.payload
@@ -336,15 +330,12 @@ onMounted(async () => {
 .page-title {
   display: block;
   text-align: center;
-  font-size: 18px;
-  font-weight: 700;
   margin: 0 0 20px;
   width: 100%;
   margin-top: 16px;
 }
 
 .figma-card {
-  border-radius: 24px;
   background: #fff;
   padding: 18px;
   margin-bottom: 20px;
@@ -354,8 +345,6 @@ onMounted(async () => {
 .card-title,
 .section-title {
   color: #7b61ff;
-  font-size: 16px;
-  font-weight: 700;
   margin-bottom: 16px;
 }
 
@@ -369,8 +358,6 @@ onMounted(async () => {
   :deep(.q-radio__label),
   :deep(.q-checkbox__label) {
     color: #000 !important;
-    font-size: 14px;
-    font-weight: 400;
   }
 
   :deep(.q-checkbox__inner),
@@ -385,14 +372,11 @@ onMounted(async () => {
 
 .field-label {
   color: #7b61ff;
-  font-size: 13px;
-  font-weight: 600;
   margin: 18px 0 10px;
 }
 
 .optional {
   color: #9e9e9e;
-  font-weight: 400;
 }
 
 
@@ -410,9 +394,7 @@ onMounted(async () => {
   resize: none;
 }
 
-/* CARD */
 .compact-card {
-  border-radius: 32px;
   padding: 28px 22px;
   background: #fafafa;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
@@ -432,7 +414,6 @@ onMounted(async () => {
 }
 
 
-/* container */
 .range-container {
   position: relative;
   padding-top: 58px;
@@ -440,7 +421,6 @@ onMounted(async () => {
   padding-right: 10px;
 }
 
-/* bolha tipo pin */
 .price-pin {
   position: absolute;
   top: 0;
@@ -459,30 +439,24 @@ onMounted(async () => {
 .price-pin span {
   transform: rotate(45deg);
   color: #fff;
-  font-size: 13px;
-  font-weight: 700;
 }
 
-/* RANGE */
 .price-range {
   padding: 8px 0 0;
 }
 
-/* trilha */
 .price-range :deep(.q-slider__track-container) {
   height: 6px;
   border-radius: 30px;
   background: #ddd7ea;
 }
 
-/* preenchimento */
 .price-range :deep(.q-slider__track) {
   height: 6px;
   border-radius: 30px;
   background: linear-gradient(90deg, #d95cff, #7a5cff);
 }
 
-/* THUMB REAL FIGMA */
 .price-range :deep(.q-slider__thumb) {
   width: 24px;
   height: 24px;
@@ -494,7 +468,6 @@ onMounted(async () => {
   box-shadow: none;
 }
 
-/* remove quadrado interno do quasar */
 .price-range :deep(.q-slider__thumb-shape) {
   display: none;
 }
@@ -503,17 +476,13 @@ onMounted(async () => {
   display: none;
 }
 
-/* texto helper */
 .range-helper {
   margin-top: 18px;
-  font-size: 12px;
   line-height: 1.45;
   text-align: center;
   color: #6b6b6b;
 }
 
-/* transição suave */
-
 .price-pin,
 .price-range :deep(.q-slider__thumb) {
   transition:
@@ -522,7 +491,6 @@ onMounted(async () => {
     filter 0.25s ease;
 }
 
-// quantidade 
 .quantity-stepper {
   display: flex;
   justify-content: center;
@@ -534,15 +502,13 @@ onMounted(async () => {
 .quantity-btn {
   background: #f5f0ff;
   color: #7b61ff;
-  width: 38px;
-  height: 38px;
+  width: 28px;
+  height: 28px;
 }
 
 .quantity-value {
   min-width: 40px;
   text-align: center;
-  font-size: 22px;
-  font-weight: 700;
 }
 
 .service-type-inline {
@@ -572,36 +538,30 @@ onMounted(async () => {
 
 .specialties-grid :deep(.q-checkbox__label) {
   color: #000 !important;
-  font-size: 13px;
   line-height: 1.2;
   white-space: normal;
 }
 
-/* hover individual do balão */
 .price-pin:hover {
   background: linear-gradient(180deg, #7b68ff, #5f46d8);
   box-shadow: none;
 }
 
-/* clique individual do balão */
 .price-pin:active {
   background: linear-gradient(180deg, #6d52ff, #5438d6);
   box-shadow: none;
 }
 
-/* thumb hover individual */
 .price-range :deep(.q-slider__thumb:hover) {
   background: #6d52ff !important;
   box-shadow: 0 0 0 18px rgba(109, 82, 255, 0.22);
 }
 
-/* thumb selecionado */
 .price-range :deep(.q-slider__thumb:active) {
   background: #5e3fff !important;
   box-shadow: 0 0 0 22px rgba(94, 63, 255, 0.28);
 }
 
-/* trilha mais viva só quando mouse estiver no slider */
 .price-range:hover :deep(.q-slider__track) {
   filter: brightness(0.95);
 }
@@ -692,8 +652,6 @@ onMounted(async () => {
 :deep(.q-radio__label),
 :deep(.q-checkbox__label) {
   color: #000 !important;
-  font-size: 14px;
-  font-weight: 400;
 }
 
 :deep(.q-checkbox__inner),
@@ -701,7 +659,6 @@ onMounted(async () => {
   color: #a78bfa !important;
 }
 
-/* 📱 celular */
 @media (max-width: 480px) {
   .page-shell {
     max-width: 100%;
@@ -716,7 +673,6 @@ onMounted(async () => {
   }
 }
 
-/* 📲 tablet */
 @media (min-width: 768px) {
   .page-shell {
     max-width: 460px;

src/pages/schedules/components/FinalSuccesModal.vue

@@ -28,7 +28,7 @@
         />
 
         <!-- titulo -->
-        <div class="success-title gradient-diarista q-mt-md">
+        <div class="success-title gradient-diarista q-mt-md font16 fontbold">
           {{ $t('custom_schedule.success_title_line1') }}<br>
           {{ $t('custom_schedule.success_title_line2') }}
         </div>
@@ -57,6 +57,7 @@ const {
 function handleClose () {
   onDialogOK()
 }
+console.log('abriu')
 </script>
 
 <style scoped lang="scss">
@@ -95,15 +96,12 @@ function handleClose () {
 }
 
 .success-title {
-  font-size: 20px;
-  font-weight: 800;
   line-height: 1.08;
   text-align: center;
   margin-top: 8px;
 }
 
 .success-subtitle {
-  font-size: 14px;
   line-height: 1.35;
   color: #666;
   text-align: center;

src/pages/scheduling/SchedulingPage.vue

@@ -1,332 +0,0 @@
-<template>
-  <q-page class="bg-page">
-
-    <div class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-header">
-      <q-btn flat round dense icon="mdi-chevron-left" color="primary" @click="router.back()" />
-      <div class="col text-center text-subtitle1 text-weight-bold text-primary">
-        {{ $t('scheduling_page.title') }}
-      </div>
-      <div style="width: 36px" />
-    </div>
-
-    <div class="col overflow-auto q-pb-xl">
-
-      <div class="q-px-md q-pt-md">
-        <q-card class="card-border bg-white" flat>
-          <q-card-section class="q-pa-md">
-            <div class="text-subtitle2 text-weight-bold text-primary q-mb-sm">
-              {{ $t('scheduling_page.about_provider') }}
-            </div>
-            <div class="row items-center no-wrap q-gutter-x-md">
-              <q-avatar :style="avatarStyle" size="52px" class="text-weight-bold text-body1">
-                {{ provider?.provider_name?.slice(0, 1).toUpperCase() ?? '—' }}
-              </q-avatar>
-              <div class="col">
-                <div class="text-weight-bold text-text">{{ provider?.provider_name ?? '—' }}</div>
-                <div class="text-caption text-grey-6">{{ provider?.city ?? provider?.district ?? '—' }}</div>
-                <div class="row items-center q-gutter-x-sm q-mt-xs">
-                  <div class="row items-center">
-                    <q-icon name="mdi-star" color="warning" size="14px" />
-                    <span class="text-caption text-weight-medium q-ml-xs">
-                      {{ provider?.average_rating != null ? Number(provider.average_rating).toFixed(1) : '' }}
-                      <span class="text-grey-5">{{ '(' + (provider?.total_reviews ?? 0) + ')' }}</span>
-                    </span>
-                  </div>
-                  <div class="row items-center">
-                    <q-icon name="mdi-broom" color="secondary" size="14px" />
-                    <span class="text-caption q-ml-xs">{{ provider?.total_services ?? 0 }}</span>
-                  </div>
-                </div>
-              </div>
-              <div class="column items-center q-gutter-y-xs">
-                <q-btn flat round dense icon="mdi-heart-outline" color="pink-4" size="sm" />
-                <q-btn flat round dense icon="mdi-information-outline" color="grey-5" size="sm" />
-              </div>
-            </div>
-          </q-card-section>
-        </q-card>
-      </div>
-
-      <div class="q-px-md q-pt-md">
-        <div class="text-h6 text-weight-bold gradient-diarista q-mb-xs">
-          {{ $t('scheduling_page.schedule_service') }}
-        </div>
-
-        <div v-if="loadingAvailability" class="row items-center justify-center q-py-lg">
-          <q-spinner-dots color="primary" size="36px" />
-        </div>
-
-        <div v-else class="shadow-card q-mb-md" style="border-radius: 20px; overflow: hidden;">
-          <q-date
-            v-model="selectedDate"
-            square
-            class="full-width calendar-custom text-text"
-            :first-day-of-week="0"
-            :events="availableDatesForCalendar"
-            event-color="positive"
-            :options="dateOptions"
-            minimal
-          />
-        </div>
-      </div>
-
-      <div class="q-px-md q-pt-sm">
-        <div class="row items-center justify-between q-mb-sm">
-          <div class="text-h6 text-weight-bold gradient-diarista">
-            {{ $t('scheduling_page.reviews_title') }}
-          </div>
-          <span class="text-caption text-primary cursor-pointer">
-            {{ $t('scheduling_page.see_all') }}
-          </span>
-        </div>
-
-        <div v-if="loadingReviews" class="row items-center justify-center q-py-lg">
-          <q-spinner-dots color="primary" size="36px" />
-        </div>
-
-        <div v-else-if="reviews.length === 0" class="text-center text-grey-6 text-body2 q-py-md">
-          {{ $t('scheduling_page.no_reviews') }}
-        </div>
-
-        <div v-else class="row no-wrap scroll-reviews q-pb-sm" style="overflow-x: auto;">
-          <q-card
-            v-for="review in reviews"
-            :key="review.id"
-            class="review-card card-border bg-white q-mr-sm flex-shrink-0"
-            flat
-            style="min-width: 220px; max-width: 240px;"
-          >
-            <q-card-section class="q-pa-sm">
-              <div class="row items-center no-wrap q-gutter-x-sm q-mb-xs">
-                <q-avatar size="32px" :style="clientAvatarStyle(review)" class="text-weight-bold text-caption">
-                  {{ review.schedule?.client?.name?.slice(0, 1).toUpperCase() ?? '?' }}
-                </q-avatar>
-                <div class="col text-weight-medium text-text text-caption ellipsis">
-                  {{ review.schedule?.client?.name ?? $t('scheduling_page.unknown_client') }}
-                </div>
-              </div>
-              <div class="row items-center q-mb-xs">
-                <q-icon
-                  v-for="s in 5"
-                  :key="s"
-                  :name="s <= review.stars ? 'mdi-star' : 'mdi-star-outline'"
-                  color="warning"
-                  size="14px"
-                />
-              </div>
-              <div class="text-caption text-text review-comment ellipsis-2-lines">
-                {{ review.comment ?? '' }}
-              </div>
-            </q-card-section>
-          </q-card>
-        </div>
-      </div>
-
-    </div>
-  </q-page>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { date } from 'quasar';
-import { getProviderWorkingDays, getProviderBlockedDays } from 'src/api/providerAvailability';
-import { getProviderReceivedReviews } from 'src/api/review';
-
-const router = useRouter();
-
-const provider = ref(history.state?.provider ?? null);
-
-const selectedDate = ref(null);
-const workingDays = ref([]);
-const blockedDays = ref([]);
-const loadingAvailability = ref(true);
-
-const reviews = ref([]);
-const loadingReviews = ref(true);
-
-const avatarColors = [
-  { background: '#ffd5df', color: '#932e57' },
-  { background: '#d7e8ff', color: '#2158a8' },
-  { background: '#dfd',    color: '#2a7a3b' },
-  { background: '#ffe5cc', color: '#8a4500' },
-];
-
-const avatarStyle = computed(() => {
-  const idx = (provider.value?.provider_id ?? 0) % avatarColors.length;
-  return avatarColors[idx];
-});
-
-const clientAvatarStyle = (review) => {
-  const idx = (review.id ?? 0) % avatarColors.length;
-  return avatarColors[idx];
-};
-
-const availableWeekDays = computed(() =>
-  [...new Set(workingDays.value.map((wd) => wd.day))]
-);
-
-const blockedDateSet = computed(() =>
-  new Set(blockedDays.value.map((bd) => bd.date))
-);
-
-const availableDatesForCalendar = computed(() => {
-  const result = [];
-  const today = new Date();
-  const end = date.addToDate(today, { months: 3 });
-  let current = new Date(today);
-  while (current <= end) {
-    const dayOfWeek = current.getDay();
-    const dateStr = date.formatDate(current, 'YYYY-MM-DD');
-    const isWorkingDay = availableWeekDays.value.includes(dayOfWeek);
-    const isBlocked = blockedDateSet.value.has(dateStr);
-    if (isWorkingDay && !isBlocked) {
-      result.push(date.formatDate(current, 'YYYY/MM/DD'));
-    }
-    current = date.addToDate(current, { days: 1 });
-  }
-  return result;
-});
-
-const dateOptions = (d) => {
-  const today = date.formatDate(new Date(), 'YYYY/MM/DD');
-  if (d < today) return false;
-  const raw = d.replace(/\//g, '-');
-  const dayOfWeek = new Date(d.replace(/\//g, '-')).getDay();
-  const isWorkingDay = availableWeekDays.value.includes(dayOfWeek);
-  const isBlocked = blockedDateSet.value.has(raw);
-  return isWorkingDay && !isBlocked;
-};
-
-const loadAvailability = async () => {
-  if (!provider.value?.provider_id) return;
-  loadingAvailability.value = true;
-  try {
-    const [wd, bd] = await Promise.all([
-      getProviderWorkingDays(provider.value.provider_id),
-      getProviderBlockedDays(provider.value.provider_id),
-    ]);
-    workingDays.value = wd ?? [];
-    blockedDays.value = bd ?? [];
-  } catch {
-    workingDays.value = [];
-    blockedDays.value = [];
-  } finally {
-    loadingAvailability.value = false;
-  }
-};
-
-const loadReviews = async () => {
-  if (!provider.value?.provider_id) return;
-  loadingReviews.value = true;
-  try {
-    const all = await getProviderReceivedReviews(provider.value.provider_id);
-    reviews.value = (all ?? []).slice(0, 10);
-  } catch {
-    reviews.value = [];
-  } finally {
-    loadingReviews.value = false;
-  }
-};
-
-onMounted(async () => {
-  await Promise.all([loadAvailability(), loadReviews()]);
-});
-</script>
-
-<style scoped lang="scss">
-.shadow-header {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-}
-
-.review-card {
-  border-radius: 12px;
-}
-
-.review-comment {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.calendar-custom {
-  border-radius: 20px;
-  background-color: white !important;
-
-  :deep(.q-date__main) {
-    background-color: white !important;
-  }
-
-  :deep(.q-date__content) {
-    background-color: white !important;
-  }
-
-  :deep(.q-date__calendar) {
-    background-color: white !important;
-  }
-
-  :deep(.q-date__calendar-item--out) {
-    .q-btn__content {
-      color: #CBD5E1 !important;
-    }
-  }
-
-  :deep(.q-date__calendar-days .q-btn__content) {
-    font-family: 'Inter', sans-serif;
-    font-weight: 500;
-    color: #1E293B;
-  }
-
-  :deep(.q-date__calendar-weekdays > div) {
-    color: #6366F1;
-    font-weight: 700;
-    opacity: 0.8;
-  }
-
-  :deep(.q-date__navigation) {
-    .q-btn {
-      color: #1E293B !important;
-    }
-    .q-btn__content {
-      color: #1E293B !important;
-    }
-  }
-
-  :deep(.q-date__nav-btn-month),
-  :deep(.q-date__nav-btn-year) {
-    color: #6366F1 !important;
-    font-weight: 700;
-  }
-
-  :deep(.q-date__event) {
-    bottom: 4px;
-    height: 6px;
-    width: 6px;
-    border-radius: 50%;
-  }
-
-  :deep(.q-date__today) {
-    .q-btn__content {
-      color: #7c4dff !important;
-      background: #7c4dff15;
-      border-radius: 50%;
-    }
-  }
-
-  :deep(.q-date__selected) {
-    .q-btn__content {
-      background: #6366F1 !important;
-      color: white !important;
-      border-radius: 50%;
-      box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4);
-    }
-  }
-
-  :deep(.q-date__view--months),
-  :deep(.q-date__view--years) {
-    .q-btn {
-      color: #1E293B !important;
-    }
-  }
-}
-</style>

src/pages/search/SearchPage.vue

@@ -4,7 +4,7 @@
 
     <div class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-search">
       <q-btn flat round dense icon="mdi-chevron-left" color="primary" @click="router.back()" />
-      <div class="col text-center text-subtitle1 text-weight-bold text-primary">
+      <div class="col text-center font16 fontbold gradient-diarista text-primary">
         {{ $t('search_page.title') }}
       </div>
       <div style="width: 36px" />
@@ -13,7 +13,7 @@
     <div class="q-px-md q-pt-md q-pb-sm">
       <q-card class="custom-schedule-card bg-surface shadow-card q-pa-sm" :flat="false">
         <q-card-section class="row items-center no-wrap q-pa-sm q-gutter-x-sm">
-          <span class="col text-text fonte-hint">
+          <span class="col text-text font12 fontmedium fonte-hint">
             {{ $t('search_page.custom_schedule_description') }}
           </span>
           <q-btn
@@ -21,7 +21,7 @@
             no-caps
             unelevated
             padding="8px 16px"
-            class="text-weight-bold custom-schedule-btn card-border"
+            class="font12 fontmedium custom-schedule-btn card-border"
             @click="router.push({ name: 'SobMedidaPage' })"
           >
             <template #default>
@@ -63,10 +63,10 @@
     </div>
 
     <div class="row items-center justify-between no-wrap q-px-md q-pb-sm">
-      <div class="dashboard-section-title gradient-diarista">{{ $t('search_page.choose_provider') }}</div>
+      <div class="dashboard-section-title font16 fontbold gradient-diarista">{{ $t('search_page.choose_provider') }}</div>
       <div class="row items-center no-wrap text-text">
         <q-btn flat dense round icon="mdi-chevron-left" color="text" size="sm" @click="setPeriodTypePrevious" />
-        <span class="text-caption text-weight-medium">{{ periodLabel }}</span>
+        <span class="font10 fontbold">{{ periodLabel }}</span>
         <q-btn flat dense round icon="mdi-chevron-right" color="text" size="sm" @click="setPeriodTypeNext" />
       </div>
     </div>
@@ -90,35 +90,35 @@
           <q-card-section class="row no-wrap q-pa-sm">
             <div class="row no-wrap full-width">
               <div class="col-2">
-                <q-avatar :style="avatarColors[p.provider_id % avatarColors.length]" class="text-weight-bold">
+                <q-avatar :style="avatarColors[p.provider_id % avatarColors.length]" class="">
                   {{ p.provider_name?.slice(0,1).toUpperCase() ?? '—' }}
                 </q-avatar>
               </div>
 
               <div class="col-10 row">
                 <div class="column col-9 justify-between">
-                  <span class="text-provider-close-name">{{ p.provider_name ?? 'Prestador' }}</span>
-                  <span class="text-provider-close-region">{{ p.district }}</span>
+                  <span class="text-provider-close-nam font12 fontbold">{{ p.provider_name ?? 'Prestador' }}</span>
+                  <span class="text-provider-close-region font9 fontbold text-grey-7">{{ p.district }}</span>
                   <div class="row items-center justify-between q-pr-lg">
                     <div class="row items-center">
-                      <q-icon name="mdi-star" color="warning" size="16px" />
-                      <span class="text-provider-close-rating">
+                      <q-icon name="mdi-star" color="warning" size="12px" />
+                      <span class="text-provider-close-rating font9 fontmedium">
                         {{ p.average_rating != null ? (Number(p.average_rating).toFixed(1) + ' (' + (p.total_reviews ?? 0) + ')') : ('(' + (p.total_reviews ?? 0) + ')') }}
                       </span>
                     </div>
                     <div class="row items-center">
-                      <q-icon name="mdi-broom" color="secondary" size="16px" />
-                      <span class="text-provider-close-jobs">{{ p.total_services ?? 0 }}</span>
+                      <q-icon name="mdi-broom" color="secondary" size="12px" />
+                      <span class="text-provider-close-jobs font9 fontmedium">{{ p.total_services ?? 0 }}</span>
                     </div>
                     <div class="row items-center">
-                      <q-icon name="mdi-map-marker-outline" color="text" size="16px" />
-                      <span class="text-provider-close-jobs">{{ (p.distance_km ?? '--') + ' km' }}</span>
+                      <q-icon name="mdi-map-marker-outline" color="text" size="12px" />
+                      <span class="text-provider-close-jobs font9 fontmedium">{{ (p.distance_km ?? '--') + ' km' }}</span>
                     </div>
                   </div>
                 </div>
 
                 <div class="column col-3 justify-between text-center items-center">
-                  <span class="text-provider-close-price">{{ priceByPeriod(p) }}</span>
+                  <span class="text-provider-close-price font12 fontbold">{{ priceByPeriod(p) }}</span>
                   <div class="full-width">
                     <q-btn
                       unelevated rounded no-caps
@@ -291,9 +291,6 @@ onMounted(() => loadProviders());
   color: var(--q-primary) !important;
 }
 .fonte-hint {
-  font-family: Inter;
-  font-weight: 500;
-  font-size: 14px;
   line-height: 100%;
   letter-spacing: -0.04em;
   vertical-align: middle;

src/pages/search/components/OrderSummaryDialog.vue

@@ -4,7 +4,7 @@
 
       <div class="dialog-header row items-center q-px-md q-pt-md q-pb-sm bg-white">
         <q-btn v-close-popup flat round dense icon="mdi-chevron-left" color="primary" />
-        <div class="col text-center text-subtitle1 text-weight-bold text-primary">
+        <div class="col text-center font16 fontbold gradient-diarista">
           {{ $t('scheduling_page.title') }}
         </div>
         <div style="width: 36px" />
@@ -14,17 +14,17 @@
 
         <div class="q-px-md q-pt-md">
           <div class="info-banner card-border q-pa-md">
-            <div class="text-body2 text-weight-medium text-primary">
+            <div class="font14 fontbold text-primary">
               {{ $t('scheduling_page.order_summary.info_text') }}
             </div>
-            <div class="text-caption text-primary q-mt-xs" style="opacity: 0.75;">
+            <div class="font12 fontmedium text-primary q-mt-xs">
               {{ $t('scheduling_page.order_summary.info_note') }}
             </div>
           </div>
         </div>
 
         <div class="q-px-md q-pt-md">
-          <div class="text-h6 text-weight-bold gradient-diarista q-mb-sm">
+          <div class="font16 fontbold gradient-diarista q-mb-sm">
             {{ $t('scheduling_page.order_summary.title') }}
           </div>
 
@@ -32,16 +32,16 @@
             v-for="(booking, idx) in bookings"
             :key="idx"
             :flat="false"
-            class="card-border bg-surface q-mb-sm shadow-card"
+            class="card-border bg-surface q-mb-sm shadow-card q-px-md q-pb-md"
           >
             <q-card-section class="q-pa-md row items-center no-wrap">
-              <div class="col">
-                <div class="text-body2 text-text">
-                  <span class="text-weight-bold">{{ $t('scheduling_page.order_summary.service_label') }}</span>
-                  <span class="text-weight-bold">{{ ` ${booking.serviceType.label} (${booking.serviceType.hours})` }}</span>
+              <div class="col text-center">
+                <div class="text-text">
+                  <span class="font14 fontregular">{{ $t('scheduling_page.order_summary.service_label') }}</span>
+                  <span class="font14 fontbold">{{ ` ${booking.serviceType.label} (${booking.serviceType.hours})` }}</span>
                 </div>
-                <div class="text-body2 text-weight-bold text-text">{{ formatDate(booking.date) }}</div>
-                <div class="text-body2 text-text">
+                <div class="font14 fontbold text-text">{{ formatDate(booking.date) }}</div>
+                <div class="font14 fontbold text-text">
                   {{ $t('scheduling_page.order_summary.time_range', { start: booking.slot.startHour, end: booking.slot.endHour }) }}
                 </div>
               </div>
@@ -49,27 +49,30 @@
                 flat round dense
                 icon="mdi-minus-circle-outline"
                 color="grey-5"
+                padding="4px 8px"
                 @click="confirmRemove(idx)"
               />
             </q-card-section>
+            <q-btn
+              unelevated rounded no-caps
+              :label="$t('scheduling_page.order_summary.send_btn')"
+              color="secondary"
+                padding="4px 8px"
+              class="full-width q-mt-sm"
+              @click="submitOrder"
+            />
           </q-card>
 
-          <q-btn
-            unelevated rounded no-caps
-            :label="$t('scheduling_page.order_summary.send_btn')"
-            color="secondary"
-            class="full-width q-mt-sm"
-            @click="submitOrder"
-          />
-
-          <q-btn
-            outline rounded no-caps
-            :label="$t('scheduling_page.order_summary.add_date_btn')"
-            color="primary"
-            class="full-width q-mt-xs"
-            :disable="showCalendar"
-            @click="showCalendar = true"
-          />
+          <div class="full-width text-center">
+            <q-btn
+              outline rounded no-caps
+              :label="$t('scheduling_page.order_summary.add_date_btn')"
+              color="primary"
+              class="q-mt-xs"
+              :disable="showCalendar"
+              @click="showCalendar = true"
+            />
+          </div>
         </div>
 
         <div v-if="showCalendar" class="q-px-md q-pt-lg q-pb-xl">
@@ -79,11 +82,11 @@
           <div v-else class="calendar-wrapper shadow-card">
             <q-date
               v-model="addDateValue"
-              square
-              class="full-width"
+              minimal
+              color="purple"
+              class=""
               :first-day-of-week="0"
               :options="dateOptions"
-              minimal
               @update:model-value="onAddDateSelected"
             />
           </div>
@@ -376,7 +379,6 @@ const submitOrder = async () => {
   :deep(.q-date__calendar) { background: white !important; }
 
   :deep(.q-date__calendar-item .q-btn) {
-    font-size: 13px !important;
     min-width: 0 !important;
     padding: 6px 2px !important;
   }
@@ -400,4 +402,84 @@ const submitOrder = async () => {
     box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4);
   }
 }
+
+.calendar-custom {
+  border-radius: 20px;
+  background-color: white !important;
+
+  :deep(.q-date__main) {
+    background-color: white !important;
+  }
+
+  :deep(.q-date__content) {
+    background-color: white !important;
+  }
+
+  :deep(.q-date__calendar) {
+    background-color: white !important;
+  }
+
+  :deep(.q-date__calendar-item--out) {
+    .q-btn__content {
+      color: #CBD5E1 !important;
+    }
+  }
+
+  :deep(.q-date__calendar-days .q-btn__content) {
+    font-weight: 500;
+    color: #1E293B;
+  }
+
+  :deep(.q-date__calendar-weekdays > div) {
+    color: #6366F1;
+    font-weight: 700;
+    opacity: 0.8;
+  }
+
+  :deep(.q-date__navigation) {
+    .q-btn {
+      color: #1E293B !important;
+    }
+    .q-btn__content {
+      color: #1E293B !important;
+    }
+  }
+
+  :deep(.q-date__nav-btn-month),
+  :deep(.q-date__nav-btn-year) {
+    color: #6366F1 !important;
+    font-weight: 700;
+  }
+
+  :deep(.q-date__event) {
+    bottom: 4px;
+    height: 6px;
+    width: 6px;
+    border-radius: 50%;
+  }
+
+  :deep(.q-date__today) {
+    .q-btn__content {
+      color: #7c4dff !important;
+      background: #7c4dff15;
+      border-radius: 50%;
+    }
+  }
+
+  :deep(.q-date__selected) {
+    .q-btn__content {
+      background: #6366F1 !important;
+      color: white !important;
+      border-radius: 50%;
+      box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4);
+    }
+  }
+
+  :deep(.q-date__view--months),
+  :deep(.q-date__view--years) {
+    .q-btn {
+      color: #1E293B !important;
+    }
+  }
+}
 </style>

src/pages/search/components/SchedulingDialog.vue

@@ -4,7 +4,7 @@
 
       <div class="dialog-header row items-center q-px-md q-pt-md q-pb-sm bg-white">
         <q-btn v-close-popup flat round dense icon="mdi-chevron-left" color="primary" />
-        <div class="col text-center text-subtitle1 text-weight-bold text-primary gradient-diarista q-mb-xs">
+        <div class="col text-center font16 fontbold text-primary gradient-diarista q-mb-xs">
           {{ $t('scheduling_page.title') }}
         </div>
         <div style="width: 36px" />
@@ -13,32 +13,37 @@
       <div class="dialog-body">
 
         <div class="q-px-md q-pt-md">
-          <div class="text-h6 text-weight-bold gradient-diarista q-mb-xs">
+          <div class="font16 fontbold gradient-diarista q-mb-xs">
             {{ $t('scheduling_page.about_provider') }}
           </div>
           <q-card class="card-border shadow-card bg-surface text-text" :flat="false">
             <q-card-section class="q-pa-md">
               <div class="row items-center no-wrap q-gutter-x-md">
-                <q-avatar size="52px" class="text-weight-bold text-body1">
-                  {{ provider?.provider_name?.slice(0, 1).toUpperCase() ?? '—' }}
-                </q-avatar>
-                <div class="col min-width-0">
-                  <div class="text-weight-bold text-text">{{ provider?.provider_name ?? '—' }}</div>
-                  <div class="text-caption text-grey-6">{{ provider?.district ?? '—' }}</div>
+                <div class="col-2">
+                  <q-avatar :style="avatarColors[provider.provider_id % avatarColors.length]">
+                    <img v-if="provider.provider_photo" :src="provider.provider_photo" style="object-fit:cover;border-radius:50%;" />
+                    <span v-else>{{ provider.provider_name?.slice(0,1) ?? '—' }}</span>
+                  </q-avatar>
+                </div>
+                <div class="col-3 column">
+                  <div class="font12 fontbold text-text">{{ provider?.provider_name ?? '—' }}</div>
+                  <div class="font10 fontmedium text-grey-7">{{ provider?.district ?? '—' }}</div>
+                </div>
+                <div class="col-3">
                   <div class="row items-center q-gutter-x-md q-mt-xs">
                     <div class="row items-center">
-                      <q-icon name="mdi-star" color="warning" size="14px" />
-                      <span class="text-caption text-weight-medium q-ml-xs">
+                      <q-icon name="mdi-star" color="warning" size="12px" />
+                      <span class="font9 fontmedium q-ml-xs">
                         {{ (provider?.average_rating != null ? Number(provider.average_rating).toFixed(1) : '') + ' (' + (provider?.total_reviews ?? 0) + ')' }}
                       </span>
                     </div>
                     <div class="row items-center">
                       <q-icon name="mdi-broom" color="secondary" size="14px" />
-                      <span class="text-caption q-ml-xs">{{ provider?.total_services ?? 0 }}</span>
+                      <span class="font9 fontmedium q-ml-xs">{{ provider?.total_services ?? 0 }}</span>
                     </div>
                   </div>
                 </div>
-                <div class="column items-center q-gutter-y-xs">
+                <div class="col-2 column items-center q-gutter-y-xs">
                   <q-btn flat round dense icon="mdi-heart-outline" color="pink-4" size="sm" />
                   <q-btn flat round dense icon="mdi-information-outline" color="grey-5" size="sm" />
                 </div>
@@ -48,7 +53,7 @@
         </div>
 
         <div class="q-px-md q-pt-lg">
-          <div class="text-h6 text-weight-bold gradient-diarista q-mb-xs">
+          <div class="font16 fontbold gradient-diarista q-mb-xs">
             {{ $t('scheduling_page.schedule_service') }}
           </div>
 
@@ -71,11 +76,12 @@
 
         <div class="q-px-md q-pt-sm q-pb-xl">
           <div class="row items-center justify-between q-mb-sm">
-            <div class="text-h6 text-weight-bold gradient-diarista">
+            <div class="font16 fontbold gradient-diarista">
               {{ $t('scheduling_page.reviews_title') }}
             </div>
-            <span class="text-caption text-primary cursor-pointer">
+            <span class=" text-text cursor-pointer">
               {{ $t('scheduling_page.see_all') }}
+              <q-icon name="mdi-chevron-right" class="text-text" /> 
             </span>
           </div>
 
@@ -96,24 +102,25 @@
             >
               <q-card-section class="q-pa-sm">
                 <div class="row items-center no-wrap q-gutter-x-sm q-mb-xs">
-                  <q-avatar size="32px" class="text-weight-bold text-caption">
-                    {{ review.schedule?.client?.name?.slice(0, 1).toUpperCase() ?? '?' }}
+                  <q-avatar :style="avatarColors[review.schedule?.client?.id % avatarColors.length]">
+                    <img v-if="review.schedule?.client?.profile_photo" :src="review.schedule?.client?.profile_photo" style="object-fit:cover;border-radius:50%;" />
+                    <span v-else>{{review.schedule?.client?.name?.slice(0,1) ?? '—' }}</span>
                   </q-avatar>
-                  <div class="col text-weight-medium text-text text-caption ellipsis">
+                  <div class="col-3 text-text font10 fontbold">
                     {{ review.schedule?.client?.name ?? $t('scheduling_page.unknown_client') }}
                   </div>
+                  <div class="row items-center q-mb-xs q-my-auto">
+                    <q-icon
+                      v-for="s in 5"
+                      :key="s"
+                      :name="s <= review.stars ? 'mdi-star' : 'mdi-star-outline'"
+                      color="warning"
+                      size="14px"
+                    />
+                  </div>
                 </div>
-                <div class="row items-center q-mb-xs">
-                  <q-icon
-                    v-for="s in 5"
-                    :key="s"
-                    :name="s <= review.stars ? 'mdi-star' : 'mdi-star-outline'"
-                    color="warning"
-                    size="14px"
-                  />
-                </div>
-                <div class="text-caption text-text review-comment">
-                  {{ review.comment ?? '' }}
+                <div class="font9 fontregular text-text review-comment">
+                  {{ review.comment ?? '--------' }}
                 </div>
               </q-card-section>
             </q-card>
@@ -156,6 +163,12 @@ const loadingAvailability = ref(true);
 const reviews = ref([]);
 const loadingReviews = ref(true);
 
+const avatarColors = [
+  { background: '#ffd5df', color: '#932e57' },
+  { background: '#d7e8ff', color: '#2158a8' },
+  { background: '#dfd',    color: '#2a7a3b' },
+  { background: '#ffe5cc', color: '#8a4500' },
+];
 
 const bookings = ref([]);
 const providerClientBlocks = ref({

src/pages/search/components/SearchFilterDialog.vue

@@ -4,7 +4,7 @@
     <q-card class="filter-card bg-surface text-text">
 
       <q-card-section class="row items-center q-pb-none">
-        <span class="text-subtitle1 text-weight-bold text-text">{{ $t('search_filter.title') }}</span>
+        <span class="font16 fontbold gradient-diarista">{{ $t('search_filter.title') }}</span>
         <q-space />
         <q-btn flat round dense icon="mdi-close" color="grey-6" @click="onDialogCancel" />
       </q-card-section>
@@ -13,10 +13,10 @@
 
       <q-card-section class="q-pt-sm q-pb-none scroll filter-body">
 
-        <div class="text-caption text-weight-bold text-grey-7 q-mb-sm">{{ $t('search_filter.sort_by') }}</div>
+        <div class="font14 fontbold text-grey-7 q-mb-sm">{{ $t('search_filter.sort_by') }}</div>
 
         <div v-for="group in sortGroups" :key="group.key" class="q-mb-md">
-          <div class="text-body2 text-weight-medium text-text q-mb-xs">{{ group.label }}</div>
+          <div class="font12 fontmedium text-text q-mb-xs">{{ group.label }}</div>
           <div class="row q-gutter-x-lg">
             <q-radio
               v-for="opt in group.options"
@@ -27,6 +27,7 @@
               :disable="opt.disable ?? false"
               color="primary"
               keep-color
+              class="font12 fontmedium"
               dense
             />
           </div>
@@ -34,14 +35,13 @@
 
         <q-separator class="q-my-sm" />
 
-        <div class="text-caption text-weight-bold text-grey-7 q-mb-xs">{{ $t('search_filter.filter_by') }}</div>
-        <div class="text-body2 text-weight-medium text-text q-mb-xs">{{ $t('search_filter.availability') }}</div>
+        <div class="font12 fontbold text-grey-7 q-mb-xs">{{ $t('search_filter.filter_by') }}</div>
+        <div class="font12 fontmedium text-text q-mb-xs">{{ $t('search_filter.availability') }}</div>
         <DefaultInputDatePicker
           v-model:untreated-date="localDate"
           :label="$t('search_filter.availability_placeholder')"
           dense
           class="date-picker-primary"
-          input-class="text-text"
         />
       </q-card-section>
 
@@ -53,6 +53,7 @@
           :label="$t('search_filter.clear')"
           rounded
           no-caps
+          size="md"
           class="col"
           @click="clearFilters"
         />
@@ -62,6 +63,7 @@
           rounded
           no-caps
           unelevated
+          size="md"
           class="col"
           @click="applyFilters"
         />

src/pages/search/components/ServiceSelectionSheet.vue

@@ -3,9 +3,8 @@
     <q-card class="bg-surface text-text full-width sheet-card">
 
       <q-card-section class="row items-center q-pb-none">
-        <div class="text-subtitle1 text-weight-bold text-text">{{ $t('scheduling_page.select_service') }}</div>
         <q-space />
-        <q-btn flat round dense icon="mdi-close" color="grey-6" @click="onDialogCancel" />
+        <q-btn flat round dense icon="mdi-close-circle-outline" color="grey-6" @click="onDialogCancel" />
       </q-card-section>
 
       <q-separator class="q-mt-sm" />
@@ -22,7 +21,7 @@
         >
           <div class="col">
             <div class="row items-center no-wrap q-gutter-x-xs">
-              <span class="text-body2 text-weight-bold text-text">{{ type.label }}</span>
+              <span class="font14 fontbold text-text">{{ type.label }}</span>
               <q-btn
                 flat round dense
                 icon="mdi-information-outline"
@@ -31,10 +30,10 @@
                 @click="openInfo(type)"
               />
             </div>
-            <div class="text-caption text-grey-6">{{ type.hours }}</div>
+            <div class="font12 fontmedium text-grey-6">{{ type.hours }}</div>
           </div>
 
-          <div class="text-body2 text-weight-bold text-text q-mx-md" style="white-space: nowrap;">
+          <div class="font16 fontbold text-text q-mx-md" style="white-space: nowrap;">
             {{ type.price != null ? formatPrice(type.price) : $t('scheduling_page.no_price') }}
           </div>
 
@@ -45,8 +44,8 @@
             :label="$t('scheduling_page.book')"
             :disable="type.price == null"
             color="secondary"
-            size="sm"
-            style="min-width: 80px;"
+            size="md"
+            padding="2px 12px"
             @click="onDialogOK({ serviceType: type, date: selectedDate, provider })"
           />
         </div>

src/pages/search/components/ServiceTimeSelectionDialog.vue

@@ -11,11 +11,11 @@
       />
 
       <q-card-section class="text-center q-pt-lg q-pb-xs">
-        <div class="text-subtitle1 text-weight-bold text-text">
+        <div class="font16 fontbold text-text">
           {{ serviceType.label }}
-          <span class="text-weight-regular text-grey-6">{{ '(' + serviceType.hoursCount + 'h)' }}</span>
+          <span class="text-grey-6">{{ '(' + serviceType.hoursCount + 'h)' }}</span>
         </div>
-        <div class="text-caption text-grey-6 q-mt-xs">
+        <div class="font14 fontmedium text-grey-6 q-mt-xs">
           {{ $t('scheduling_page.time_selection.subtitle') }}
         </div>
       </q-card-section>
@@ -32,6 +32,7 @@
               :val="slot.value"
               :label="slot.label"
               color="primary"
+              class="font12 fontbold text-primary"
               keep-color
               dense
             />
@@ -42,14 +43,15 @@
       <template v-if="hasMealSection">
         <q-separator class="q-mx-md" />
         <q-card-section class="q-py-sm">
-          <div class="text-body2 text-weight-bold text-text q-mb-sm text-center">
+          <div class="font14 fontbold text-text q-mb-sm text-center">
             {{ $t('scheduling_page.time_selection.meal_section') }}
           </div>
-          <div class="row justify-center q-gutter-x-xl">
+          <div class="column">
             <q-radio
               v-model="selectedMeal"
               val="offer"
               :label="$t('scheduling_page.time_selection.meal_offer')"
+              class="font12 fontbold text-primary q-mx-auto q-pb-sm"
               color="primary"
               keep-color
               dense
@@ -58,6 +60,7 @@
               v-model="selectedMeal"
               val="no_offer"
               :label="$t('scheduling_page.time_selection.meal_no_offer')"
+              class="font12 fontbold text-primary q-mx-auto q-pt-sm"
               color="primary"
               keep-color
               dense
@@ -74,12 +77,13 @@
           :label="$t('scheduling_page.time_selection.continue')"
           :disable="!selectedSlot"
           color="secondary"
+          padding="4px 8px"
           class="full-width"
           @click="handleContinue"
         />
       </q-card-actions>
 
-      <div v-if="pauseNote" class="text-center text-caption text-primary q-pb-md">
+      <div v-if="pauseNote" class="text-center font12 fontmedium text-primary q-pb-md">
         {{ pauseNote }}
       </div>
 

src/pages/search/components/ServiceTypeInfoDialog.vue

@@ -3,18 +3,18 @@
     <q-card class="card-border bg-surface text-text" style="width: min(88vw, 360px);">
 
       <q-card-section class="row items-center q-pb-none">
-        <div class="text-subtitle1 text-weight-bold text-text">{{ serviceType.label }}</div>
+        <div class="font16 fontbold text-text">{{ serviceType.label }}</div>
         <q-space />
         <q-btn flat round dense icon="mdi-close" color="grey-6" @click="onDialogCancel" />
       </q-card-section>
 
-      <q-card-section class="text-caption text-grey-7 q-pt-xs">
+      <q-card-section class="font14 fontmedium text-grey-7 q-pt-xs">
         {{ serviceType.hours }}
       </q-card-section>
 
       <q-separator />
 
-      <q-card-section class="text-body2 text-text">
+      <q-card-section class="font12 fontmedium text-text">
         {{ serviceType.description }}
       </q-card-section>