Layout 100%, Notificações, SetupWizard
This commit is contained in:
Leonardo
@@ -3,141 +3,102 @@
|
||||
<Toast />
|
||||
<ConfirmDialog />
|
||||
|
||||
<!-- Sentinel para detecção de sticky -->
|
||||
<!-- Sentinel -->
|
||||
<div ref="headerSentinelRef" class="ag-sentinel" />
|
||||
|
||||
<!-- Hero Header sticky -->
|
||||
<div ref="headerEl" class="ag-hero mx-3 md:mx-5 mb-3" :class="{ 'ag-hero--stuck': headerStuck }">
|
||||
<!-- Blobs decorativos -->
|
||||
<div class="ag-hero__blobs" aria-hidden="true">
|
||||
<div class="ag-hero__blob ag-hero__blob--1" />
|
||||
<div class="ag-hero__blob ag-hero__blob--2" />
|
||||
<div class="ag-hero__blob ag-hero__blob--3" />
|
||||
<!-- Topbar compacta sticky -->
|
||||
<div ref="headerEl" class="ag-topbar mx-3 md:mx-4 mb-3" :class="{ 'ag-topbar--stuck': headerStuck }">
|
||||
<div class="ag-topbar__blobs" aria-hidden="true">
|
||||
<div class="ag-topbar__blob ag-topbar__blob--1" />
|
||||
<div class="ag-topbar__blob ag-topbar__blob--2" />
|
||||
</div>
|
||||
<div class="ag-topbar__inner">
|
||||
|
||||
<!-- Linha 1: brand + controles -->
|
||||
<div class="ag-hero__row1">
|
||||
<!-- Brand -->
|
||||
<div class="ag-hero__brand">
|
||||
<div class="ag-hero__icon">
|
||||
<i class="pi pi-calendar text-lg" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<div class="ag-hero__title">Agenda</div>
|
||||
<div class="ag-hero__sub">{{ subtitleText }}</div>
|
||||
<div class="ag-topbar__brand">
|
||||
<div class="ag-topbar__icon"><i class="pi pi-calendar text-base" /></div>
|
||||
<div class="min-w-0 hidden xl:block">
|
||||
<div class="ag-topbar__title">Agenda · Clínica</div>
|
||||
<div class="ag-topbar__sub">{{ subtitleText }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controles desktop (≥1200px) -->
|
||||
<div class="ag-hero__desktop-controls">
|
||||
<!-- Navegação (sempre visível) -->
|
||||
<div class="flex items-center gap-1">
|
||||
<Button label="Hoje" severity="secondary" outlined size="small" class="rounded-full" @click="goToday" />
|
||||
<Button icon="pi pi-chevron-left" severity="secondary" outlined class="h-8 w-8 rounded-full" @click="goPrev" />
|
||||
<Button icon="pi pi-chevron-right" severity="secondary" outlined class="h-8 w-8 rounded-full" @click="goNext" />
|
||||
<Button :label="visibleTitle" icon="pi pi-calendar" severity="secondary" outlined size="small" class="rounded-full" @click="toggleMonthPicker" />
|
||||
</div>
|
||||
<!-- Navegação -->
|
||||
<div class="ag-topbar__nav">
|
||||
<Button label="Hoje" severity="secondary" outlined size="small" class="rounded-full hidden lg:flex" @click="goToday" />
|
||||
<Button icon="pi pi-chevron-left" severity="secondary" outlined class="h-8 w-8 rounded-full" @click="goPrev" />
|
||||
<span class="ag-topbar__date-pill" @click="toggleMonthPicker">
|
||||
<i class="pi pi-calendar text-xs opacity-60" />
|
||||
{{ subtitleText }}
|
||||
</span>
|
||||
<Button icon="pi pi-chevron-right" severity="secondary" outlined class="h-8 w-8 rounded-full" @click="goNext" />
|
||||
</div>
|
||||
|
||||
<!-- Busca (oculta quando colado) -->
|
||||
<div v-if="!headerStuck" class="w-[260px]">
|
||||
<!-- Filtros (desktop) -->
|
||||
<div class="ag-topbar__filters hidden xl:flex items-center gap-1.5">
|
||||
<SelectButton v-model="calendarView" :options="viewOptions" optionLabel="label" optionValue="value" :allowEmpty="false" size="small" />
|
||||
<SelectButton v-model="timeMode" :options="timeModeOptions" optionLabel="label" optionValue="value" :allowEmpty="false" size="small" />
|
||||
<SelectButton v-model="onlySessions" :options="onlySessionsOptions" optionLabel="label" optionValue="value" :allowEmpty="false" size="small" />
|
||||
<SelectButton v-model="mosaicMode" :options="mosaicModeOptions" optionLabel="label" optionValue="value" :allowEmpty="false" size="small" />
|
||||
</div>
|
||||
|
||||
<!-- Ações -->
|
||||
<div class="ag-topbar__actions">
|
||||
<!-- Busca desktop -->
|
||||
<div class="hidden xl:block w-44">
|
||||
<FloatLabel variant="on">
|
||||
<IconField>
|
||||
<InputIcon class="pi pi-search" />
|
||||
<InputText id="agendaSearch" v-model="search" class="w-full" autocomplete="off" @keyup.enter="openSearchModal" />
|
||||
</IconField>
|
||||
<label for="agendaSearch">Buscar paciente...</label>
|
||||
<label for="agendaSearch">Buscar...</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Ações rápidas -->
|
||||
<div class="flex items-center gap-1">
|
||||
<!-- Badge: feriados próximos sem bloqueio -->
|
||||
<div v-if="feriadosTodosProximos.length" class="relative">
|
||||
<Button
|
||||
icon="pi pi-bell"
|
||||
:severity="feriadosSemBloqueio.length ? 'danger' : 'secondary'"
|
||||
outlined
|
||||
class="h-9 w-9 rounded-full"
|
||||
v-tooltip.bottom="feriadosSemBloqueio.length
|
||||
? `${feriadosSemBloqueio.length} feriado(s) sem bloqueio nos próximos 30 dias`
|
||||
: `${feriadosTodosProximos.length} feriado(s) gerenciados`"
|
||||
@click="feriadosAlertaOpen = true"
|
||||
/>
|
||||
<span v-if="feriadosSemBloqueio.length" class="ag-badge">{{ feriadosSemBloqueio.length }}</span>
|
||||
</div>
|
||||
<Button v-if="!headerStuck" label="Bloquear" icon="pi pi-lock" size="small" class="rounded-full" severity="danger" outlined @click="(e) => blockMenuRef.toggle(e)" />
|
||||
<Menu ref="blockMenuRef" :model="blockMenuItems" :popup="true" />
|
||||
<Button icon="pi pi-plus" class="h-9 w-9 rounded-full" title="Novo compromisso" @click="onCreateFromButton" />
|
||||
<Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full" title="Recarregar" @click="refetch" />
|
||||
<Button icon="pi pi-sync" severity="secondary" outlined class="h-9 w-9 rounded-full" title="Recorrências" @click="goRecorrencias" />
|
||||
<Button icon="pi pi-cog" severity="secondary" outlined class="h-9 w-9 rounded-full" title="Configurações" @click="goSettings" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu mobile (<1200px) -->
|
||||
<div class="ag-hero__mobile-controls">
|
||||
<!-- Sino: feriados próximos -->
|
||||
<!-- Sino feriados -->
|
||||
<div v-if="feriadosTodosProximos.length" class="relative">
|
||||
<Button
|
||||
icon="pi pi-bell"
|
||||
:severity="feriadosSemBloqueio.length ? 'danger' : 'secondary'"
|
||||
outlined
|
||||
class="h-9 w-9 rounded-full"
|
||||
@click="feriadosAlertaOpen = true"
|
||||
/>
|
||||
<Button icon="pi pi-bell" :severity="feriadosSemBloqueio.length ? 'danger' : 'secondary'" outlined class="h-9 w-9 rounded-full" @click="feriadosAlertaOpen = true" />
|
||||
<span v-if="feriadosSemBloqueio.length" class="ag-badge">{{ feriadosSemBloqueio.length }}</span>
|
||||
</div>
|
||||
<Button label="Ações" icon="pi pi-ellipsis-v" severity="secondary" size="small" class="rounded-full" @click="(e) => headerMenuRef.toggle(e)" />
|
||||
<Menu ref="headerMenuRef" :model="headerMenuItems" :popup="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divisor -->
|
||||
<Divider class="ag-hero__divider my-2" />
|
||||
<Button icon="pi pi-plus" class="h-9 w-9 rounded-full" title="Novo compromisso" @click="onCreateFromButton" />
|
||||
|
||||
<!-- Linha 2: filtros -->
|
||||
<div class="ag-hero__row2">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm opacity-60">Exibir:</span>
|
||||
<SelectButton v-model="onlySessions" :options="onlySessionsOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
|
||||
<!-- Mobile -->
|
||||
<div class="flex xl:hidden items-center gap-1">
|
||||
<Button icon="pi pi-search" severity="secondary" outlined class="h-9 w-9 rounded-full" @click="searchModalOpen = true" />
|
||||
<Button label="Ações" icon="pi pi-ellipsis-v" severity="secondary" size="small" class="rounded-full" @click="(e) => headerMenuRef.toggle(e)" />
|
||||
<Menu ref="headerMenuRef" :model="headerMenuItems" :popup="true" />
|
||||
</div>
|
||||
<SelectButton v-model="calendarView" :options="viewOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
|
||||
<SelectButton v-model="timeMode" :options="timeModeOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
|
||||
</div>
|
||||
|
||||
<div v-if="searchTrim" class="flex items-center gap-2">
|
||||
<Tag :value="`Busca: ${searchTrim}`" severity="secondary" />
|
||||
<Button label="Limpar" icon="pi pi-times" text severity="secondary" size="small" @click="clearSearch" />
|
||||
<Button v-if="searchResults.length" :label="`Ver resultados (${searchResults.length})`" icon="pi pi-list" severity="secondary" outlined size="small" class="rounded-full" @click="openSearchModal" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aviso: eventos fora da jornada de trabalho -->
|
||||
<div
|
||||
v-if="hasEventsOutsideWorkHours"
|
||||
class="mx-3 md:mx-5 mb-3 rounded-2xl p-3"
|
||||
style="background: color-mix(in srgb, var(--yellow-400, #facc15) 10%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--yellow-400, #facc15) 35%, transparent);"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<i class="pi pi-exclamation-triangle shrink-0 mt-0.5" style="color: var(--yellow-600, #ca8a04);" />
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="font-semibold text-sm">Existem compromissos fora da jornada de trabalho</div>
|
||||
<div class="text-xs opacity-70 mt-0.5">A exibição foi ajustada para <b>24h</b> automaticamente. Caso queira visualizar com horário reduzido (e aceite não ver alguns compromissos), escolha abaixo:</div>
|
||||
<div class="flex gap-2 mt-2 flex-wrap">
|
||||
<Button label="Meu Horário" size="small" severity="secondary" outlined class="rounded-full" @click="timeMode = 'my'" />
|
||||
<Button label="12h" size="small" severity="secondary" outlined class="rounded-full" @click="timeMode = '12'" />
|
||||
<!-- Desktop: extras -->
|
||||
<div class="hidden xl:flex items-center gap-1">
|
||||
<Button label="Bloquear" icon="pi pi-lock" size="small" class="rounded-full" severity="danger" outlined @click="(e) => blockMenuRef.toggle(e)" />
|
||||
<Menu ref="blockMenuRef" :model="blockMenuItems" :popup="true" />
|
||||
<Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full" @click="refetch" />
|
||||
<Button icon="pi pi-sync" severity="secondary" outlined class="h-9 w-9 rounded-full" title="Recorrências" @click="goRecorrencias" />
|
||||
<Button icon="pi pi-cog" severity="secondary" outlined class="h-9 w-9 rounded-full" @click="goSettings" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layout: 2 colunas -->
|
||||
<div class="flex flex-col lg:flex-row gap-4 px-3 md:px-5 pb-5">
|
||||
<!-- Coluna maior -->
|
||||
<div class="w-full lg:flex-1 lg:order-2 min-w-0">
|
||||
<div class="overflow-hidden rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-card)] shadow-sm">
|
||||
<!-- Aviso: fora da jornada -->
|
||||
<div v-if="hasEventsOutsideWorkHours" class="mx-3 md:mx-4 mb-3 rounded-[6px] p-3" style="background:color-mix(in srgb,var(--yellow-400,#facc15) 10%,var(--surface-card));border:1px solid color-mix(in srgb,var(--yellow-400,#facc15) 35%,transparent);">
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="pi pi-exclamation-triangle shrink-0" style="color:var(--yellow-600,#ca8a04);" />
|
||||
<div class="font-semibold text-sm flex-1">Compromissos fora da jornada</div>
|
||||
<div class="flex gap-1 shrink-0">
|
||||
<Button label="Meu Horário" size="small" severity="secondary" outlined class="rounded-full" @click="timeMode = 'my'" />
|
||||
<Button label="12h" size="small" severity="secondary" outlined class="rounded-full" @click="timeMode = '12'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layout 2 colunas: calendário + sidebar -->
|
||||
<div class="flex flex-col xl:flex-row gap-3 px-3 md:px-4 pb-5 items-start">
|
||||
<!-- Col centro: calendário mosaic -->
|
||||
<div class="w-full xl:flex-1 min-w-0">
|
||||
<div class="ag-cal-wrap">
|
||||
<div class="p-2">
|
||||
<AgendaClinicMosaic
|
||||
ref="calendarRef"
|
||||
@@ -169,12 +130,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="w-full lg:basis-[24%] lg:max-w-[24%] lg:order-1">
|
||||
<!-- Resultados (DESKTOP) -->
|
||||
<div
|
||||
v-if="searchTrim"
|
||||
class="hidden sm:block mb-3 rounded-3xl border border-[var(--surface-border)] bg-[var(--surface-card)] p-3 shadow-sm"
|
||||
>
|
||||
<div class="hidden xl:flex flex-col gap-3 w-full xl:w-[280px] shrink-0">
|
||||
<!-- Resultados -->
|
||||
<div v-if="searchTrim" class="ag-card">
|
||||
<div class="mb-2 flex items-center justify-between gap-2">
|
||||
<div class="min-w-0">
|
||||
<div class="font-semibold truncate">Resultados</div>
|
||||
@@ -220,40 +178,38 @@
|
||||
</div>
|
||||
|
||||
<!-- Mini calendário -->
|
||||
<div class="mb-3 rounded-3xl border border-[var(--surface-border)] bg-[var(--surface-card)] p-3 shadow-sm">
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<span class="font-semibold">Calendário</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<Button label="Hoje" severity="secondary" text class="h-9 rounded-full" @click="miniGoToday" />
|
||||
<Button icon="pi pi-chevron-left" severity="secondary" text class="h-9 w-9 rounded-full" @click="miniPrevMonth" />
|
||||
<Button icon="pi pi-chevron-right" severity="secondary" text class="h-9 w-9 rounded-full" @click="miniNextMonth" />
|
||||
<div class="ag-card">
|
||||
<div class="ag-card__head mb-1">
|
||||
<span class="ag-card__title"><i class="pi pi-calendar" />{{ visibleTitle }}</span>
|
||||
<div class="flex items-center gap-0.5">
|
||||
<Button icon="pi pi-home" severity="secondary" text class="h-7 w-7 rounded-full" v-tooltip.top="'Hoje'" @click="miniGoToday" />
|
||||
<Button icon="pi pi-chevron-left" severity="secondary" text class="h-7 w-7 rounded-full" @click="miniPrevMonth" />
|
||||
<Button icon="pi pi-chevron-right" severity="secondary" text class="h-7 w-7 rounded-full" @click="miniNextMonth" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Calendar
|
||||
v-model="miniDate"
|
||||
inline
|
||||
showWeek
|
||||
class="w-full"
|
||||
class="ag-mini-cal"
|
||||
@update:modelValue="onMiniPick"
|
||||
:pt="{ day: ({ context }) => ({ class: miniDayClass(context.date) }) }"
|
||||
>
|
||||
<template #date="{ date }">
|
||||
<span class="mini-day-num">{{ date.day }}</span>
|
||||
<span v-if="hasMiniEvent(date)" class="mini-day-dot" />
|
||||
</template>
|
||||
</Calendar>
|
||||
<template #date="{ date }">
|
||||
<span class="mini-day-num">{{ date.day }}</span>
|
||||
<span v-if="hasMiniEvent(date)" class="mini-day-dot" />
|
||||
</template>
|
||||
</Calendar>
|
||||
</div>
|
||||
|
||||
<ProximosFeriadosCard
|
||||
class="mb-3"
|
||||
:ownerId="clinicOwnerId"
|
||||
:tenantId="tenantId || ''"
|
||||
:workRules="workRules"
|
||||
@bloqueado="refetch"
|
||||
/>
|
||||
:ownerId="clinicOwnerId"
|
||||
:tenantId="tenantId || ''"
|
||||
:workRules="workRules"
|
||||
@bloqueado="refetch"
|
||||
/>
|
||||
|
||||
<div class="rounded-3xl border border-[var(--surface-border)] bg-[var(--surface-card)] p-3 shadow-sm">
|
||||
<div class="ag-card">
|
||||
<Button label="Novo Compromisso" icon="pi pi-plus" class="w-full rounded-full" @click="onCreateFromButton" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -2452,76 +2408,92 @@ function goRecorrencias () { router.push({ name: 'admin-agenda-recorrencias' })
|
||||
:deep(.evt-private) { opacity: 0.9; filter: saturate(0.25); }
|
||||
:deep(.evt-private.fc-event) { border-style: dashed; }
|
||||
|
||||
/* ── Hero Header ─────────────────────────────────── */
|
||||
/* ── Topbar ─────────────────────────────────────────── */
|
||||
.ag-sentinel { height: 1px; }
|
||||
|
||||
.ag-hero {
|
||||
.ag-topbar {
|
||||
position: sticky;
|
||||
top: var(--layout-sticky-top, 56px);
|
||||
z-index: 20;
|
||||
overflow: hidden;
|
||||
border-radius: 1.75rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--surface-border);
|
||||
background: var(--surface-card);
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
.ag-hero--stuck {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.ag-topbar--stuck { border-top-left-radius: 0; border-top-right-radius: 0; }
|
||||
.ag-topbar__blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
|
||||
.ag-topbar__blob { position: absolute; border-radius: 50%; filter: blur(60px); }
|
||||
.ag-topbar__blob--1 { width: 16rem; height: 16rem; top: -4rem; right: -2rem; background: rgba(99,102,241,0.10); }
|
||||
.ag-topbar__blob--2 { width: 18rem; height: 18rem; top: 0; left: -4rem; background: rgba(52,211,153,0.07); }
|
||||
|
||||
/* Blobs */
|
||||
.ag-hero__blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
|
||||
.ag-hero__blob { position: absolute; border-radius: 50%; filter: blur(70px); }
|
||||
.ag-hero__blob--1 { width: 18rem; height: 18rem; top: -4rem; right: -3rem; background: rgba(99,102,241,0.12); }
|
||||
.ag-hero__blob--2 { width: 20rem; height: 20rem; top: 0.5rem; left: -5rem; background: rgba(52,211,153,0.09); }
|
||||
.ag-hero__blob--3 { width: 14rem; height: 14rem; bottom: -2rem; right: 22%; background: rgba(217,70,239,0.08); }
|
||||
|
||||
/* Linha 1 */
|
||||
.ag-hero__row1 {
|
||||
.ag-topbar__inner {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; align-items: center; gap: 1rem;
|
||||
display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
|
||||
}
|
||||
.ag-hero__brand {
|
||||
display: flex; align-items: center; gap: 0.75rem;
|
||||
flex-shrink: 0; min-width: 0;
|
||||
}
|
||||
.ag-hero__icon {
|
||||
.ag-topbar__brand { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
|
||||
.ag-topbar__icon {
|
||||
display: grid; place-items: center;
|
||||
width: 2.5rem; height: 2.5rem; border-radius: 0.875rem;
|
||||
flex-shrink: 0;
|
||||
width: 2.25rem; height: 2.25rem; border-radius: 6px; flex-shrink: 0;
|
||||
background: color-mix(in srgb, var(--p-primary-500, #6366f1) 12%, transparent);
|
||||
color: var(--p-primary-500, #6366f1);
|
||||
}
|
||||
.ag-hero__title {
|
||||
font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em;
|
||||
color: var(--text-color); white-space: nowrap;
|
||||
.ag-topbar__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-color); }
|
||||
.ag-topbar__sub { font-size: 0.75rem; color: var(--text-color-secondary); }
|
||||
.ag-topbar__nav { display: flex; align-items: center; gap: 0.25rem; }
|
||||
.ag-topbar__date-pill {
|
||||
display: inline-flex; align-items: center; gap: 0.35rem;
|
||||
padding: 0.25rem 0.75rem; border-radius: 999px;
|
||||
border: 1px solid var(--surface-border); background: var(--surface-ground);
|
||||
font-size: 0.8rem; font-weight: 600; color: var(--text-color);
|
||||
cursor: pointer; white-space: nowrap; transition: border-color 0.15s;
|
||||
}
|
||||
.ag-hero__sub {
|
||||
font-size: 0.78rem; color: var(--text-color-secondary); margin-top: 2px;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
.ag-topbar__date-pill:hover { border-color: var(--p-primary-400); }
|
||||
.ag-topbar__filters { flex-shrink: 0; }
|
||||
.ag-topbar__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
|
||||
|
||||
/* ── Badge ────────────────────────────────────────────── */
|
||||
.ag-badge {
|
||||
position: absolute; top: -4px; right: -4px;
|
||||
min-width: 16px; height: 16px; border-radius: 999px; padding: 0 4px;
|
||||
background: var(--red-500, #ef4444); color: #fff;
|
||||
font-size: 0.65rem; font-weight: 700;
|
||||
display: flex; align-items: center; justify-content: center; pointer-events: none;
|
||||
}
|
||||
|
||||
.ag-hero__desktop-controls {
|
||||
flex: 1; display: flex; align-items: center;
|
||||
justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap;
|
||||
}
|
||||
.ag-hero__mobile-controls { display: none; }
|
||||
|
||||
/* Linha 2 */
|
||||
.ag-hero__row2 {
|
||||
display: flex; flex-wrap: wrap; align-items: center;
|
||||
justify-content: space-between; gap: 0.75rem;
|
||||
/* ── Calendar wrap ──────────────────────────────────── */
|
||||
.ag-cal-wrap {
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 6px; background: var(--surface-card); overflow: hidden;
|
||||
}
|
||||
|
||||
/* Mobile < 1200px */
|
||||
@media (max-width: 1199px) {
|
||||
.ag-hero__desktop-controls { display: none; }
|
||||
.ag-hero__mobile-controls { display: flex; margin-left: auto; }
|
||||
.ag-hero__divider,
|
||||
.ag-hero__row2 { display: none; }
|
||||
/* ── Sidebar cards ──────────────────────────────────── */
|
||||
.ag-card {
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 6px; background: var(--surface-card); padding: 0.75rem;
|
||||
}
|
||||
.ag-card__head { display: flex; align-items: center; justify-content: space-between; }
|
||||
.ag-card__title {
|
||||
display: flex; align-items: center; gap: 0.35rem;
|
||||
font-size: 0.7rem; font-weight: 700;
|
||||
text-transform: uppercase; letter-spacing: 0.06em;
|
||||
color: var(--text-color-secondary); opacity: 0.65;
|
||||
}
|
||||
|
||||
/* ── Mini calendário ────────────────────────────────── */
|
||||
:deep(.ag-mini-cal .p-datepicker) { width: 100%; border: none; padding: 0; background: transparent; box-shadow: none; }
|
||||
:deep(.ag-mini-cal .p-datepicker-header) { padding: 0 0 0.5rem; border: none; background: transparent; }
|
||||
:deep(.ag-mini-cal .p-datepicker-calendar) { width: 100%; font-size: 0.78rem; }
|
||||
:deep(.ag-mini-cal .p-datepicker-calendar td) { padding: 1px; }
|
||||
:deep(.ag-mini-cal .p-datepicker-calendar td > span) {
|
||||
width: 100%; min-width: unset; border-radius: 6px;
|
||||
position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
|
||||
}
|
||||
.mini-day-num { display: block; text-align: center; line-height: 1; }
|
||||
.mini-day-dot {
|
||||
position: absolute; bottom: 2px; right: 2px;
|
||||
width: 4px; height: 4px; border-radius: 50%;
|
||||
background: var(--primary-color, #6366f1);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user