/* ============================================================
   Family Rewards — Frontend Dashboard
   Direção visual: inspirada na Todoist — fundo branco, vermelho
   como única cor de destaque, sidebar minimalista, linhas de
   tarefa com círculo de conclusão, tipografia limpa.
   Aplicado por agora a: Tarefas, Calendário.
   Compras e Refeições mantêm o estilo anterior (a redesenhar a seguir).
   ============================================================ */

/* As variáveis vivem em :root, e não em .fr-app, porque os modais são
   inseridos em document.body — fora do contentor da app. Se estivessem
   apenas em .fr-app, todos os modais herdariam cores indefinidas
   (botões vermelhos ficavam brancos sobre branco, invisíveis). */
:root {
	--fr-red: #db4c3f;
	--fr-red-hover: #c53727;
	--fr-red-dim: #fbeceb;
	--fr-green: #34c759;
	--fr-text: #202020;
	--fr-text-secondary: #808080;
	--fr-border: #ebebeb;
	--fr-sidebar-bg: #fcfaf8;
	--fr-sidebar-hover: #f1ede9;

	/* mantidos por compatibilidade com módulos ainda não redesenhados */
	--fr-blue: #db4c3f;
	--fr-blue-hover: #c53727;
}

.fr-app {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--fr-text);
}

/* Os modais precisam da mesma tipografia e cor de texto da app, já que
   estão fora de .fr-app. */
.fr-modal-overlay {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--fr-text);
}

.fr-loading {
	color: var(--fr-text-secondary);
	font-size: 14px;
	padding: 20px 32px;
}

.fr-notice {
	padding: 18px 20px;
	background: #f7f7f7;
	border-radius: 10px;
	font-size: 14px;
	color: var(--fr-text-secondary);
}

/* ------------------------------------------------------------
   Calendário — cabeçalho: navegação + seletor semana/mês
   ------------------------------------------------------------ */

.fr-calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.fr-calendar-nav {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fr-cal-nav-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--fr-border);
	background: #ffffff;
	color: var(--fr-text-secondary);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fr-cal-nav-btn:hover {
	border-color: var(--fr-red);
	color: var(--fr-red);
}

.fr-calendar-label {
	font-size: 15px;
	font-weight: 600;
	min-width: 140px;
	text-align: center;
}

.fr-view-toggle {
	display: flex;
	background: #f0f0f0;
	border-radius: 999px;
	padding: 3px;
}

.fr-view-toggle-btn {
	border: none;
	background: transparent;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--fr-text-secondary);
	border-radius: 999px;
	cursor: pointer;
}

.fr-view-toggle-btn.is-active {
	background: #ffffff;
	color: var(--fr-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------------------------
   Página em ecrã inteiro (sem header/footer do tema)
   ------------------------------------------------------------ */

body.fr-fullscreen-page {
	margin: 0;
	background: #ffffff;
	height: 100%;
	overflow: hidden;
}

html:has(body.fr-fullscreen-page) {
	height: 100%;
}

/* ------------------------------------------------------------
   Shell: sidebar + conteúdo (estilo Todoist)
   ------------------------------------------------------------ */

.fr-shell {
	display: flex;
	height: 100vh;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

/* No desktop os três blocos da esquerda (cabeçalho, navegação, extras)
   empilham-se numa coluna, com o conteúdo ao lado. Uma grelha resolve
   isto de forma limpa, sem hacks de margem.
   Estão separados no HTML porque em mobile a navegação tem de escapar
   ao bloco de contenção criado pelo backdrop-filter da sidebar. */
.fr-shell {
	display: grid;
	grid-template-columns: 266px minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	height: 100vh;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.fr-sidebar {
	grid-column: 1;
	grid-row: 1;
	background: var(--fr-sidebar-bg);
	border-right: none;
	display: flex;
	flex-direction: column;
	padding: 16px 8px 4px;
	box-sizing: border-box;
}

.fr-sidebar-nav {
	grid-column: 1;
	grid-row: 2;
	background: var(--fr-sidebar-bg);
	display: flex;
	flex-direction: column;
	padding: 0 8px;
	box-sizing: border-box;
	overflow-y: auto;
	align-content: flex-start;
}

.fr-sidebar-extras {
	grid-column: 1;
	grid-row: 3;
	background: var(--fr-sidebar-bg);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 0 8px 0;
}

.fr-main {
	grid-column: 2;
	grid-row: 1 / -1;
}

.fr-sidebar-top {
	padding: 6px 12px 18px;
}

.fr-sidebar-logo {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.fr-sidebar-nav {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.fr-nav-item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 12px;
	margin: 1px 0;
	border-radius: 8px;
	color: var(--fr-text);
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.12s ease;
}

.fr-nav-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fr-text-secondary);
}

.fr-nav-icon svg {
	width: 19px;
	height: 19px;
	display: block;
}

.fr-nav-item:hover {
	background: var(--fr-sidebar-hover);
}

.fr-nav-item.active {
	background: var(--fr-red-dim);
	color: var(--fr-red);
	font-weight: 500;
}

.fr-nav-item.active .fr-nav-icon {
	color: var(--fr-red);
}

.fr-sidebar-bottom {
	padding: 14px 12px 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* ------------------------------------------------------------
   Mini-calendário persistente na sidebar (semana ou mês)
   ------------------------------------------------------------ */

.fr-sidebar-calendar {
	padding: 16px 12px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.fr-sidebar-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.fr-sidebar-cal-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fr-text-secondary);
	font-weight: 700;
	text-align: center;
	flex: 1;
}

.fr-mini-nav-btn {
	width: 18px;
	height: 18px;
	border: none;
	background: transparent;
	color: var(--fr-text-secondary);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	border-radius: 4px;
}

.fr-mini-nav-btn:hover {
	background: var(--fr-sidebar-hover);
	color: var(--fr-text);
}

.fr-sidebar-cal-toggle {
	display: flex;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 999px;
	padding: 2px;
	margin-bottom: 10px;
}

.fr-mini-toggle-btn {
	flex: 1;
	border: none;
	background: transparent;
	padding: 4px 0;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--fr-text-secondary);
	border-radius: 999px;
	cursor: pointer;
}

.fr-mini-toggle-btn.is-active {
	background: #ffffff;
	color: var(--fr-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.fr-sidebar-cal-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px;
}

.fr-mini-weekday-label {
	font-size: 9px;
	text-align: center;
	color: var(--fr-text-secondary);
	padding-bottom: 4px;
}

.fr-mini-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: transparent;
	border: none;
	border-radius: 6px;
	padding: 4px 0;
	cursor: pointer;
}

.fr-mini-day:hover {
	background: var(--fr-sidebar-hover);
}

.fr-mini-day-num {
	font-size: 11px;
	font-weight: 600;
}

.fr-sidebar-cal-days.is-month .fr-mini-day-num {
	font-size: 10px;
}

.fr-mini-day.is-muted .fr-mini-day-num {
	color: #cfcfcf;
	font-weight: 400;
}

.fr-mini-day.is-today .fr-mini-day-num {
	background: var(--fr-red);
	color: #ffffff;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fr-mini-day-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--fr-red);
}

.fr-sidebar-user {
	font-size: 13px;
	font-weight: 600;
}

.fr-logout-link {
	font-size: 12px;
	color: var(--fr-text-secondary);
	text-decoration: none;
	width: fit-content;
}

.fr-logout-link:hover {
	color: var(--fr-red);
}

.fr-main {
	min-height: 0;
	overflow-y: auto;
	padding: 40px 48px;
	box-sizing: border-box;
}

.fr-main > * {
	max-width: 720px;
}



.fr-page-title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 24px 0;
}

/* ------------------------------------------------------------
   Tarefas — secções por membro, linhas com círculo de conclusão
   ------------------------------------------------------------ */

.fr-member-section {
	margin-bottom: 32px;
}

.fr-section-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.fr-section-title {
	font-size: 15px;
	font-weight: 600;
	margin: 0;
}

.fr-points-pill {
	background: #f0f0f0;
	color: var(--fr-text-secondary);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 999px;
}

.fr-task-rows {
	display: flex;
	flex-direction: column;
}

.fr-task-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f2f2f2;
}

.fr-check-circle {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid #c7c7c7;
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: all 0.15s ease;
}

.fr-check-circle:hover {
	border-color: var(--fr-red);
}

.fr-check-circle.is-done {
	background: var(--fr-red);
	border-color: var(--fr-red);
}

.fr-check-circle.is-pending {
	background: #f0f0f0;
	border-color: #c7c7c7;
	cursor: default;
}

.fr-check-circle:disabled {
	cursor: default;
}

.fr-task-status-badge {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	color: #ff9f0a;
	background: #fff4e5;
	padding: 3px 9px;
	border-radius: 999px;
}

.fr-task-date-badge {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	color: var(--fr-text-secondary);
	background: #f0f0f0;
	padding: 3px 9px;
	border-radius: 999px;
}

/* ------------------------------------------------------------
   Formulário "Adicionar tarefa" (visível a todos os membros)
   ------------------------------------------------------------ */

.fr-add-task-card {
	margin-bottom: 28px;
}

.fr-add-task-card select {
	padding: 9px 12px;
	font-size: 14px;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	background: #fafafa;
	font-family: inherit;
	flex: 1;
	min-width: 140px;
}

.fr-schedule-row {
	align-items: center;
}

.fr-schedule-toggle {
	display: flex;
	background: #f0f0f0;
	border-radius: 999px;
	padding: 3px;
	flex: 0 0 auto;
}

.fr-schedule-date {
	flex: 0 0 160px !important;
}

/* ------------------------------------------------------------
   Aprovações pendentes (visível só para pais)
   ------------------------------------------------------------ */

.fr-approvals-section {
	background: #fffaf0;
	border: 1px solid #ffe8bf;
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 28px;
}

.fr-approvals-section .fr-section-title {
	margin: 0 0 10px 0;
}

.fr-approval-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #f4e6c8;
	font-size: 13px;
}

.fr-approval-row:last-child {
	border-bottom: none;
}

.fr-approval-text {
	flex: 1;
}

.fr-btn-approve,
.fr-btn-reject {
	border: none;
	border-radius: 999px;
	padding: 5px 13px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.fr-btn-approve {
	background: var(--fr-green);
	color: #ffffff;
}

.fr-btn-reject {
	background: #ffffff;
	border: 1px solid var(--fr-border);
	color: var(--fr-text-secondary);
}

.fr-btn-reject:hover {
	border-color: var(--fr-red);
	color: var(--fr-red);
}

.fr-task-text {
	flex: 1;
	font-size: 14px;
}

.fr-task-points {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--fr-green);
}

.fr-rewards-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.fr-reward-chip {
	background: #ffffff;
	border: 1px solid var(--fr-border);
	color: var(--fr-text);
	font-size: 12px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 999px;
	cursor: pointer;
}

.fr-reward-chip:hover {
	border-color: var(--fr-red);
	color: var(--fr-red);
}

/* ------------------------------------------------------------
   Ecrã de login
   ------------------------------------------------------------ */

.fr-login-screen {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.fr-login-card {
	background: #ffffff;
	border: 1px solid var(--fr-border);
	border-radius: 12px;
	padding: 36px 32px;
	width: 100%;
	max-width: 360px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.fr-login-card h2 {
	margin: 0 0 4px 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.fr-login-subtitle {
	margin: 0 0 24px 0;
	font-size: 14px;
	color: var(--fr-text-secondary);
}

.fr-login-error {
	background: var(--fr-red-dim);
	color: var(--fr-red-hover);
	font-size: 13px;
	padding: 10px 14px;
	border-radius: 8px;
	margin-bottom: 16px;
}

.fr-login-card label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--fr-text-secondary);
	margin: 14px 0 6px 0;
}

.fr-login-card label:first-of-type {
	margin-top: 0;
}

.fr-login-card input[type="text"],
.fr-login-card input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	font-size: 15px;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	background: #fafafa;
}

.fr-login-card input:focus {
	outline: none;
	border-color: var(--fr-red);
	background: #ffffff;
}

.fr-btn-primary {
	background: var(--fr-red);
	color: #ffffff;
	border: none;
	padding: 11px 22px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.fr-btn-primary:hover {
	background: var(--fr-red-hover);
}

.fr-btn-full {
	width: 100%;
	margin-top: 22px;
}

/* ------------------------------------------------------------
   Cartões genéricos de módulo (Calendário / Compras / Refeições)
   ------------------------------------------------------------ */

.fr-card {
	background: #ffffff;
	border: 1px solid var(--fr-border);
	border-radius: 10px;
	padding: 22px;
	margin-bottom: 16px;
}

.fr-card h3 {
	margin: 0 0 14px 0;
	font-size: 15px;
	font-weight: 600;
}

.fr-inline-form .fr-form-row {
	display: flex;
	gap: 10px;
}

.fr-form-row-wrap {
	flex-wrap: wrap;
}

.fr-form-row input,
.fr-form-row select {
	flex: 1;
	min-width: 120px;
	padding: 9px 12px;
	font-size: 14px;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	background: #fafafa;
	font-family: inherit;
}

.fr-input-small {
	flex: 0 0 100px !important;
}

.fr-form-row input:focus,
.fr-form-row select:focus {
	outline: none;
	border-color: var(--fr-red);
	background: #ffffff;
}

.fr-empty-state {
	color: var(--fr-text-secondary);
	font-size: 14px;
	margin: 0;
}

.fr-btn-small {
	padding: 5px 12px;
	font-size: 12px;
}

.fr-btn {
	border: 1px solid var(--fr-border);
	background: #ffffff;
	color: var(--fr-text);
	border-radius: 999px;
	font-weight: 500;
	cursor: pointer;
}

.fr-btn:hover {
	border-color: var(--fr-red);
	color: var(--fr-red);
}

.fr-btn-icon-delete {
	border: none;
	background: transparent;
	color: var(--fr-text-secondary);
	cursor: pointer;
	font-size: 13px;
	padding: 4px 8px;
}

.fr-btn-icon-delete:hover {
	color: var(--fr-red);
}

/* ------------------------------------------------------------
   Refeições — lista agenda (por redesenhar numa próxima fase)
   ------------------------------------------------------------ */

.fr-agenda-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fr-agenda-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 14px;
}

.fr-agenda-item:last-child {
	border-bottom: none;
}

.fr-agenda-date {
	flex: 0 0 110px;
	color: var(--fr-text-secondary);
	font-size: 13px;
}

.fr-agenda-title {
	flex: 1;
}

.fr-meal-type-badge {
	background: #f0f0f0;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	color: var(--fr-text-secondary);
	flex: 0 0 auto;
}

/* ------------------------------------------------------------
   Lista de compras (por redesenhar numa próxima fase)
   ------------------------------------------------------------ */

.fr-shopping-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fr-shopping-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 14px;
}

.fr-shopping-item:last-child {
	border-bottom: none;
}

.fr-shopping-item input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--fr-red);
}

.fr-shopping-label {
	flex: 1;
}

.fr-shopping-item.is-checked .fr-shopping-label {
	text-decoration: line-through;
	color: var(--fr-text-secondary);
}

/* ------------------------------------------------------------
   Calendário — timeline vertical, acento vermelho único
   ------------------------------------------------------------ */

.fr-timeline-day-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--fr-text-secondary);
	margin: 22px 0 10px 0;
}

.fr-timeline-day-label:first-of-type {
	margin-top: 0;
}

.fr-timeline {
	position: relative;
}

.fr-timeline-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding-left: 4px;
}

.fr-timeline-row::before {
	content: '';
	position: absolute;
	left: 9px;
	top: 26px;
	bottom: -6px;
	width: 2px;
	background: var(--fr-border);
}

.fr-timeline-row.is-last::before {
	display: none;
}

.fr-timeline-marker {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	position: relative;
	z-index: 1;
	background: var(--fr-red);
}

.fr-timeline-marker::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	transform: translate(-50%, -50%);
}

.fr-timeline-card {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	margin: 4px 0;
	background: #fafafa;
	border-radius: 10px;
	font-size: 14px;
	border: 1px solid #f2f2f2;
}

.fr-timeline-time {
	flex: 0 0 auto;
	font-weight: 600;
	font-size: 12px;
	color: var(--fr-text-secondary);
	min-width: 44px;
}

.fr-timeline-title {
	flex: 1;
	font-weight: 500;
}

/* ------------------------------------------------------------
   Calendário — layout: grelha grande + painel lateral
   ------------------------------------------------------------ */

.fr-calendar-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.fr-cal-grid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	min-width: 0;
}

.fr-cal-weekday {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fr-text-secondary);
	text-align: center;
	padding-bottom: 4px;
}

.fr-cal-cell {
	background: #fafafa;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	padding: 6px;
	min-height: 92px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: background 0.1s ease;
}

.fr-cal-grid.is-week .fr-cal-cell {
	min-height: 260px;
}

.fr-cal-cell.is-outside {
	background: #f5f5f5;
	opacity: 0.5;
}

.fr-cal-cell.is-today {
	border-color: var(--fr-red);
	background: var(--fr-red-dim);
}

.fr-cal-cell.is-drop-target {
	background: #ffe9e6;
	border-color: var(--fr-red);
}

.fr-cal-cell-num {
	font-size: 12px;
	font-weight: 600;
	color: var(--fr-text-secondary);
}

.fr-cal-cell.is-today .fr-cal-cell-num {
	color: var(--fr-red);
}

.fr-cal-chips {
	display: flex;
	flex-direction: column;
	gap: 3px;
	overflow-y: auto;
	flex: 1;
}

.fr-cal-chip {
	background: #ffffff;
	border: 1px solid var(--fr-border);
	border-left: 3px solid var(--fr-red);
	border-radius: 4px;
	padding: 3px 6px;
	font-size: 11px;
	line-height: 1.3;
	cursor: grab;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fr-cal-chip:hover {
	background: var(--fr-red-dim);
}

.fr-cal-chip.is-dragging {
	opacity: 0.4;
}

/* -- Painel lateral -- */

.fr-calendar-side {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
}

.fr-form-col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fr-form-col input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	font-size: 14px;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	background: #fafafa;
	font-family: inherit;
}

.fr-form-col input:focus {
	outline: none;
	border-color: var(--fr-red);
	background: #ffffff;
}

.fr-calendar-list-card {
	max-height: 480px;
	overflow-y: auto;
}

.fr-side-event-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 0;
	border-bottom: 1px solid #f2f2f2;
	cursor: pointer;
}

.fr-side-event-row:last-child {
	border-bottom: none;
}

.fr-side-event-row:hover .fr-side-event-title {
	color: var(--fr-red);
}

.fr-side-event-date {
	font-size: 11px;
	color: var(--fr-text-secondary);
}

.fr-side-event-title {
	font-size: 13px;
	font-weight: 500;
}

@media (max-width: 1000px) {
	.fr-calendar-layout {
		flex-direction: column;
	}
	.fr-calendar-side {
		flex: 1 0 auto;
		width: 100%;
	}
}

/* ------------------------------------------------------------
   Popup centrado — editar/eliminar evento
   ------------------------------------------------------------ */

.fr-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 20px;
	box-sizing: border-box;
}

.fr-modal {
	background: #ffffff;
	border-radius: 12px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 28px;
	width: 100%;
	max-width: 380px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.fr-modal h3 {
	margin: 0 0 18px 0;
	font-size: 17px;
	font-weight: 700;
}

.fr-modal label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--fr-text-secondary);
	margin: 12px 0 6px 0;
}

.fr-modal label:first-of-type {
	margin-top: 0;
}

.fr-modal input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 14px;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	background: #fafafa;
}

.fr-modal input:focus {
	outline: none;
	border-color: var(--fr-red);
	background: #ffffff;
}

.fr-modal-actions {
	display: flex;
	gap: 8px;
	margin-top: 22px;
}

.fr-modal-actions .fr-btn-primary {
	flex: 1;
}

/* ------------------------------------------------------------
   Refeições — sub-navegação, biblioteca e planeador
   ------------------------------------------------------------ */

.fr-subnav {
	display: flex;
	gap: 4px;
	background: #f0f0f0;
	border-radius: 999px;
	padding: 3px;
	width: fit-content;
	margin-bottom: 20px;
}

.fr-subnav-btn {
	border: none;
	background: transparent;
	padding: 7px 18px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fr-text-secondary);
	border-radius: 999px;
	cursor: pointer;
}

.fr-subnav-btn.is-active {
	background: #ffffff;
	color: var(--fr-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.fr-help-text {
	font-size: 13px;
	color: var(--fr-text-secondary);
	line-height: 1.5;
	margin: 0 0 16px 0;
}

.fr-form-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--fr-text-secondary);
	margin: 14px 0 8px 0;
}

.fr-card .fr-form-row {
	margin-bottom: 10px;
}

.fr-card select {
	padding: 9px 12px;
	font-size: 14px;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	background: #fafafa;
	font-family: inherit;
	flex: 1;
	min-width: 120px;
}

.fr-checkbox-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 18px;
}

.fr-checkbox-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	cursor: pointer;
}

.fr-checkbox-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--fr-red);
}

/* Biblioteca de receitas */

.fr-recipe-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 14px;
}

.fr-recipe-row:last-child {
	border-bottom: none;
}

.fr-recipe-cat {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 3px 9px;
	border-radius: 999px;
	background: #f0f0f0;
	color: var(--fr-text-secondary);
	min-width: 78px;
	text-align: center;
}

.fr-cat-carne { background: #fdecea; color: #b3261e; }
.fr-cat-peixe { background: #e8f1fb; color: #1a5fa8; }
.fr-cat-vegetariano { background: #e9f7ec; color: #1a7f37; }
.fr-cat-sopa { background: #fff4e5; color: #a35c00; }
.fr-cat-outro { background: #f0f0f0; color: #6e6e73; }

.fr-recipe-title {
	flex: 1;
	font-weight: 500;
}

.fr-recipe-effort,
.fr-recipe-used {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--fr-text-secondary);
}

.fr-recipe-used {
	min-width: 32px;
	text-align: right;
}

/* Planeador: grelha de slots */

.fr-week-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.fr-slot-grid {
	display: grid;
	grid-template-columns: 1fr repeat(2, 80px);
	gap: 4px;
	align-items: center;
	margin-bottom: 20px;
}

.fr-slot-head {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fr-text-secondary);
	text-align: center;
	padding-bottom: 6px;
}

.fr-slot-day {
	font-size: 13px;
	padding: 8px 0;
	border-top: 1px solid #f2f2f2;
}

.fr-slot-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 0;
	border-top: 1px solid #f2f2f2;
	cursor: pointer;
}

.fr-slot-cell input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--fr-red);
	cursor: pointer;
}

/* Plano da semana */

.fr-meal-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 14px;
}

.fr-meal-row:last-child {
	border-bottom: none;
}

.fr-lock-btn {
	border: none;
	background: transparent;
	font-size: 14px;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
	opacity: 0.45;
}

.fr-lock-btn:hover {
	background: #f0f0f0;
	opacity: 1;
}

.fr-lock-btn.is-locked {
	opacity: 1;
}

/* ------------------------------------------------------------
   Refeições — edição, importação, troca e exportação
   ------------------------------------------------------------ */

.fr-clickable {
	cursor: pointer;
}

.fr-clickable:hover {
	color: var(--fr-red);
}

.fr-btn-icon-edit {
	border: none;
	background: transparent;
	color: var(--fr-text-secondary);
	cursor: pointer;
	font-size: 13px;
	padding: 4px 6px;
	border-radius: 6px;
}

.fr-btn-icon-edit:hover {
	background: #f0f0f0;
	color: var(--fr-text);
}

/* Modal largo (edição de receita / troca) */

.fr-modal-wide {
	max-width: 520px;
}

.fr-modal-wide select,
.fr-modal-wide textarea,
.fr-modal-wide input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	font-size: 14px;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	background: #fafafa;
	font-family: inherit;
	margin-bottom: 4px;
}

.fr-modal-wide textarea {
	resize: vertical;
}

.fr-modal-wide input:focus,
.fr-modal-wide select:focus,
.fr-modal-wide textarea:focus {
	outline: none;
	border-color: var(--fr-red);
	background: #ffffff;
}

/* Importação em lote */

.fr-collapse-toggle {
	border: none;
	background: transparent;
	color: var(--fr-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
}

.fr-collapse-toggle:hover {
	color: var(--fr-red);
}

.fr-collapse-content {
	margin-top: 16px;
}

.fr-import-example {
	background: #fafafa;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 11.5px;
	line-height: 1.6;
	overflow-x: auto;
	margin: 0 0 12px 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--fr-text-secondary);
}

.fr-collapse-content textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 13px;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	background: #fafafa;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	resize: vertical;
	margin-bottom: 12px;
}

.fr-collapse-content textarea:focus {
	outline: none;
	border-color: var(--fr-red);
	background: #ffffff;
}

/* Lista de troca de refeição */

.fr-swap-list {
	max-height: 320px;
	overflow-y: auto;
	margin: 12px 0;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
}

.fr-swap-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: none;
	border-bottom: 1px solid #f2f2f2;
	background: #ffffff;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: 14px;
}

.fr-swap-row:last-child {
	border-bottom: none;
}

.fr-swap-row:hover {
	background: var(--fr-red-dim);
}

.fr-swap-row.is-current {
	background: #f7f7f7;
}

.fr-swap-row.is-current .fr-recipe-title::after {
	content: ' (atual)';
	color: var(--fr-text-secondary);
	font-size: 11px;
}

/* Ações da semana */

.fr-week-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.fr-week-actions .fr-btn {
	padding: 10px 18px;
	font-size: 13px;
}

/* ------------------------------------------------------------
   Lista de compras — seletor de quantidade
   ------------------------------------------------------------ */

.fr-qty-stepper {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	border: 1px solid var(--fr-border);
	border-radius: 999px;
	background: #ffffff;
	overflow: hidden;
}

.fr-qty-btn {
	border: none;
	background: transparent;
	width: 30px;
	height: 30px;
	font-size: 16px;
	line-height: 1;
	color: var(--fr-text-secondary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	padding: 0;
}

.fr-qty-btn:hover {
	background: var(--fr-red-dim);
	color: var(--fr-red);
}

.fr-qty-value {
	min-width: 30px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	user-select: none;
}

.fr-qty-inline {
	height: 28px;
}

.fr-qty-inline .fr-qty-btn {
	width: 26px;
	height: 26px;
	font-size: 14px;
}

.fr-qty-inline .fr-qty-value {
	min-width: 26px;
	font-size: 12px;
}

.fr-unit-select {
	flex: 0 0 74px !important;
	min-width: 74px !important;
}

.fr-shopping-form-row {
	align-items: center;
}

.fr-done-card {
	opacity: 0.75;
}

.fr-done-card .fr-btn {
	margin-top: 12px;
}

/* ------------------------------------------------------------
   Tarefas — cabeçalho, estados, extrato e badge de pendentes
   ------------------------------------------------------------ */

.fr-tasks-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.fr-tasks-head .fr-page-title {
	margin: 0;
}

/* Badge de pendentes na sidebar */

.fr-nav-badge {
	margin-left: auto;
	background: var(--fr-red);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}

/* Linha de tarefa: texto com nota de rejeição */

.fr-task-text-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fr-task-rejected-note {
	font-size: 11px;
	color: var(--fr-red);
}

.fr-task-row.is-overdue {
	background: #fff8f7;
	border-radius: 8px;
	padding-left: 8px;
	padding-right: 8px;
	margin: 0 -8px;
}

.fr-task-date-badge.is-overdue {
	background: var(--fr-red-dim);
	color: var(--fr-red);
}

/* Extrato */

.fr-ledger-link {
	border: 1px solid var(--fr-border);
	background: #ffffff;
	color: var(--fr-text-secondary);
	font-size: 11px;
	font-weight: 600;
	padding: 3px 11px;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
}

.fr-ledger-link:hover {
	border-color: var(--fr-red);
	color: var(--fr-red);
}

.fr-ledger-balance {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 16px 0;
}

.fr-ledger-list {
	max-height: 340px;
	overflow-y: auto;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
}

.fr-ledger-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid #f2f2f2;
	font-size: 13px;
}

.fr-ledger-row:last-child {
	border-bottom: none;
}

.fr-ledger-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fr-ledger-label {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-ledger-note {
	font-size: 11px;
	color: var(--fr-text-secondary);
}

.fr-ledger-delta {
	flex: 0 0 46px;
	text-align: right;
	font-weight: 700;
	font-size: 13px;
}

.fr-ledger-delta.is-positive {
	color: #1a7f37;
}

.fr-ledger-delta.is-negative {
	color: var(--fr-red);
}

.fr-ledger-balance-col {
	flex: 0 0 62px;
	text-align: right;
	font-size: 11px;
	color: var(--fr-text-secondary);
}

/* Secção única de recompensas */

.fr-rewards-section {
	margin-top: 12px;
}

.fr-inline-label {
	font-size: 13px;
	color: var(--fr-text-secondary);
	flex: 0 0 auto;
	align-self: center;
}

.fr-reward-member-select {
	flex: 0 1 220px !important;
}

/* ------------------------------------------------------------
   Sidebar — avatar e afinações finais (estilo Todoist)
   ------------------------------------------------------------ */

.fr-sidebar-top {
	display: flex;
	align-items: center;
	gap: 9px;
}

.fr-avatar {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	border-radius: 50%;
	background: #3d7f5c;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fr-sidebar-logo {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-logout-link {
	font-size: 12px;
	color: var(--fr-text-secondary);
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 8px;
	width: fit-content;
}

.fr-logout-link:hover {
	background: var(--fr-sidebar-hover);
	color: var(--fr-text);
}

/* Área principal encostada à sidebar, sem divisória */

.fr-main {
	background: #ffffff;
	border-left: none;
}

/* Badge de pendentes alinhado com o novo espaçamento */

.fr-nav-badge {
	margin-left: auto;
	flex: 0 0 auto;
}

/* Em ecrãs pequenos a sidebar vira barra no topo — manter o tom creme */



/* ------------------------------------------------------------
   Início (dashboard) e Lembretes
   ------------------------------------------------------------ */

.fr-home-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.fr-home-head .fr-page-title {
	margin: 0;
}

.fr-home-date {
	font-size: 13px;
	color: var(--fr-text-secondary);
}

.fr-home-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}

.fr-home-card {
	background: #ffffff;
	border: 1px solid var(--fr-border);
	border-radius: 12px;
	padding: 16px 18px;
}

.fr-home-card.fr-home-alert {
	background: #fffaf0;
	border-color: #ffe8bf;
}

.fr-home-card-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fr-text-secondary);
	margin: 0 0 12px 0;
}

.fr-home-card-body {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.fr-home-big {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	margin: 0;
}

.fr-home-sub {
	font-size: 12px;
	color: var(--fr-text-secondary);
	margin: 0;
	line-height: 1.45;
}

.fr-home-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}

.fr-home-count {
	background: var(--fr-red-dim);
	color: var(--fr-red);
	font-size: 11px;
	font-weight: 700;
	min-width: 20px;
	height: 20px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
}

.fr-home-points-pair {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex: 0 0 auto;
}

.fr-home-week {
	font-size: 13px;
	font-weight: 700;
	color: #1a7f37;
}

.fr-home-total {
	font-size: 11px;
	color: var(--fr-text-secondary);
}

.fr-home-legend {
	font-size: 10px;
	color: var(--fr-text-secondary);
	margin: 4px 0 0 0;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.fr-home-meal-title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-home-deadline {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	color: var(--fr-text-secondary);
	background: #f0f0f0;
	padding: 2px 9px;
	border-radius: 999px;
}

.fr-home-deadline.is-late {
	background: var(--fr-red-dim);
	color: var(--fr-red);
}

.fr-home-card-body .fr-btn {
	align-self: flex-start;
	margin-top: 4px;
	padding: 5px 13px;
	font-size: 12px;
}

/* Lembretes */

.fr-todo-meta {
	font-size: 11px;
	color: var(--fr-text-secondary);
}

/* ------------------------------------------------------------
   Locais — lista, avaliação e filtros
   ------------------------------------------------------------ */

.fr-place-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid #f2f2f2;
}

.fr-place-row:last-child {
	border-bottom: none;
}

.fr-place-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.fr-place-title-line {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

.fr-place-cat {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 3px 9px;
	border-radius: 999px;
	background: #f0f0f0;
	color: var(--fr-text-secondary);
}

.fr-place-name {
	font-size: 14px;
	font-weight: 600;
}

.fr-place-rating {
	font-size: 12px;
	color: #e0a300;
	letter-spacing: 1px;
}

.fr-place-meta,
.fr-place-notes,
.fr-place-scheduled {
	font-size: 11.5px;
	color: var(--fr-text-secondary);
	line-height: 1.45;
}

.fr-place-notes {
	font-style: italic;
}

.fr-place-scheduled {
	color: var(--fr-red);
	font-weight: 600;
}

.fr-place-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.fr-places-filter {
	margin-bottom: 14px;
	align-items: center;
}

.fr-places-filter select {
	flex: 0 1 170px !important;
	padding: 8px 12px;
	font-size: 13px;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	background: #fafafa;
	font-family: inherit;
}

/* Seletor de estrelas */

.fr-rating-picker {
	display: flex;
	gap: 4px;
	margin-bottom: 6px;
}

.fr-star-btn {
	border: none;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	color: #c9c9c9;
	cursor: pointer;
	padding: 2px 3px;
}

.fr-star-btn:hover,
.fr-star-btn.is-on {
	color: #e0a300;
}

/* ------------------------------------------------------------
   Compositor inline "+ Adicionar" (padrão Todoist)
   Fechado é um link discreto; aberto expande em linha, dentro
   da própria lista, sem cartão de formulário separado.
   ------------------------------------------------------------ */

.fr-add-inline-holder {
	padding: 4px 0 2px;
}

.fr-add-inline-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: transparent;
	border: none;
	padding: 9px 4px;
	font-family: inherit;
	font-size: 14px;
	color: var(--fr-text-secondary);
	cursor: pointer;
	border-radius: 6px;
	text-align: left;
}

.fr-add-inline-btn:hover {
	color: var(--fr-red);
}

.fr-add-inline-plus {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: var(--fr-red);
	transition: background 0.12s ease, color 0.12s ease;
}

.fr-add-inline-btn:hover .fr-add-inline-plus {
	background: var(--fr-red);
	color: #ffffff;
}

/* Compositor aberto */

.fr-inline-composer {
	border: 1px solid var(--fr-border);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 4px 0 2px;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.fr-composer-title {
	width: 100%;
	box-sizing: border-box;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--fr-text);
	padding: 2px 0 8px;
}

.fr-composer-title::placeholder {
	color: #b8b8b8;
	font-weight: 400;
}

.fr-composer-opts {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 10px;
}

.fr-chip-group {
	display: flex;
	gap: 4px;
}

.fr-chip {
	border: 1px solid var(--fr-border);
	background: #ffffff;
	border-radius: 999px;
	padding: 4px 12px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	color: var(--fr-text-secondary);
	cursor: pointer;
}

.fr-chip:hover {
	border-color: var(--fr-red);
	color: var(--fr-red);
}

.fr-chip.is-active {
	background: var(--fr-red-dim);
	border-color: var(--fr-red);
	color: var(--fr-red);
}

.fr-composer-date,
.fr-composer-select {
	border: 1px solid var(--fr-border);
	border-radius: 999px;
	padding: 4px 11px;
	font-family: inherit;
	font-size: 12px;
	color: var(--fr-text);
	background: #ffffff;
}

.fr-composer-date:focus,
.fr-composer-select:focus {
	outline: none;
	border-color: var(--fr-red);
}

.fr-composer-points {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	border: 1px solid var(--fr-border);
	border-radius: 999px;
	padding: 3px 6px 3px 11px;
}

.fr-composer-points-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--fr-text-secondary);
	text-transform: uppercase;
}

.fr-composer-points-input {
	width: 42px;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--fr-text);
	text-align: center;
}

.fr-composer-points-input:disabled {
	color: var(--fr-text-secondary);
}

.fr-composer-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px solid #f2f2f2;
}

.fr-composer-cancel {
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--fr-text-secondary);
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
}

.fr-composer-cancel:hover {
	background: #f2f2f2;
	color: var(--fr-text);
}

/* ============================================================
   Calendário — grelha mensal, grelha semanal com horas,
   categorias (tags) e sincronização iCal
   ============================================================ */

/* Cores por categoria */

.cat-event       { --tone: #0071e3; --tone-bg: #eaf3fd; }
.cat-birthday    { --tone: #c2185b; --tone-bg: #fdeaf1; }
.cat-appointment { --tone: #00897b; --tone-bg: #e5f5f3; }
.cat-school      { --tone: #6a3fb5; --tone-bg: #f0eafb; }
.cat-trip        { --tone: #ef6c00; --tone-bg: #fdf0e3; }
.cat-bill        { --tone: #d32f2f; --tone-bg: #fdeaea; }
.cat-other       { --tone: #757575; --tone-bg: #f1f1f1; }
.cat-task        { --tone: #34c759; --tone-bg: #e9f9ed; }
.cat-meal        { --tone: #a1887f; --tone-bg: #f4efed; }

/* Legenda */

.fr-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 14px 0 18px;
	font-size: 11px;
	color: var(--fr-text-secondary);
}

.fr-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.fr-legend-dot {
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: var(--tone, #999);
	flex: 0 0 auto;
}

/* -- Vista mensal -- */

.fr-cal-month {
	border: 1px solid var(--fr-border);
	border-radius: 10px;
	overflow: hidden;
}

.fr-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.fr-cal-weekdays {
	background: #fafafa;
	border-bottom: 1px solid var(--fr-border);
}

.fr-cal-weekday {
	padding: 8px 6px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fr-text-secondary);
	text-align: center;
}

.fr-cal-cell {
	min-height: 92px;
	border-right: 1px solid #f2f2f2;
	border-bottom: 1px solid #f2f2f2;
	padding: 5px 5px 7px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	cursor: pointer;
	background: #ffffff;
	transition: background 0.1s ease;
}

.fr-cal-cell:hover {
	background: #fcfaf8;
}

.fr-cal-cell.is-muted {
	background: #fbfbfb;
}

.fr-cal-cell.is-muted .fr-cal-cell-num {
	color: #cfcfcf;
}

.fr-cal-cell-num {
	font-size: 12px;
	font-weight: 600;
	align-self: flex-start;
	width: 21px;
	height: 21px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.fr-cal-cell.is-today .fr-cal-cell-num {
	background: var(--fr-red);
	color: #ffffff;
}

.fr-cal-chip {
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--tone-bg, #f1f1f1);
	color: var(--tone, #444);
	border-left: 2.5px solid var(--tone, #999);
	border-radius: 4px;
	padding: 2px 5px;
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	overflow: hidden;
}

.fr-cal-chip:hover {
	filter: brightness(0.96);
}

.fr-cal-chip-time {
	font-weight: 700;
	flex: 0 0 auto;
}

.fr-cal-chip-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-cal-more {
	font-size: 10px;
	color: var(--fr-text-secondary);
	padding-left: 4px;
}

/* -- Vista semanal com horas -- */

.fr-cal-week {
	border: 1px solid var(--fr-border);
	border-radius: 10px;
	overflow: hidden;
}

.fr-week-head {
	display: grid;
	grid-template-columns: 52px repeat(7, minmax(0, 1fr));
	background: #fafafa;
	border-bottom: 1px solid var(--fr-border);
}

.fr-week-gutter-head {
	border-right: 1px solid #f2f2f2;
}

.fr-week-day-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 7px 2px;
	border-right: 1px solid #f2f2f2;
	background: transparent;
	border-top: none;
	border-bottom: none;
	border-left: none;
	cursor: pointer;
	font-family: inherit;
}

.fr-week-day-head:hover {
	background: #f3efeb;
}

.fr-week-day-name {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fr-text-secondary);
}

.fr-week-day-num {
	font-size: 14px;
	font-weight: 600;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.fr-week-day-head.is-today .fr-week-day-num {
	background: var(--fr-red);
	color: #ffffff;
}

.fr-week-allday {
	display: grid;
	grid-template-columns: 52px repeat(7, minmax(0, 1fr));
	border-bottom: 1px solid var(--fr-border);
	background: #fdfdfd;
}

.fr-week-gutter-label {
	font-size: 9px;
	text-transform: uppercase;
	color: var(--fr-text-secondary);
	padding: 6px 4px;
	text-align: right;
	border-right: 1px solid #f2f2f2;
}

.fr-week-allday-cell {
	border-right: 1px solid #f2f2f2;
	padding: 4px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 26px;
}

.fr-week-body {
	display: grid;
	grid-template-columns: 52px repeat(7, minmax(0, 1fr));
	max-height: 620px;
	overflow-y: auto;
}

.fr-week-gutter {
	border-right: 1px solid #f2f2f2;
	background: #fafafa;
}

.fr-week-hour-label {
	display: block;
	height: 44px;
	box-sizing: border-box;
	padding: 2px 6px 0 0;
	font-size: 10px;
	color: var(--fr-text-secondary);
	text-align: right;
	border-bottom: 1px solid #f5f5f5;
}

.fr-week-col {
	position: relative;
	border-right: 1px solid #f2f2f2;
}

.fr-week-col.is-today {
	background: #fffdfc;
}

.fr-week-slot {
	height: 44px;
	box-sizing: border-box;
	border-bottom: 1px solid #f5f5f5;
	cursor: pointer;
}

.fr-week-slot:hover {
	background: var(--fr-red-dim);
}

.fr-week-event {
	position: absolute;
	left: 2px;
	right: 2px;
	background: var(--tone-bg, #eee);
	border-left: 3px solid var(--tone, #999);
	color: var(--tone, #333);
	border-radius: 4px;
	padding: 3px 5px;
	font-size: 10.5px;
	line-height: 1.25;
	overflow: hidden;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 1px;
	z-index: 2;
}

.fr-week-event:hover {
	filter: brightness(0.96);
}

.fr-week-event-time {
	font-weight: 700;
}

.fr-week-event-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -- Modal do dia -- */

.fr-day-title {
	margin-bottom: 14px !important;
}

.fr-day-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fr-day-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #f5f5f5;
	font-size: 13px;
}

.fr-day-row:last-child {
	border-bottom: none;
}

.fr-day-time {
	flex: 0 0 42px;
	font-size: 11px;
	font-weight: 700;
	color: var(--fr-text-secondary);
}

.fr-day-text {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-day-tag {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--fr-text-secondary);
	background: #f2f2f2;
	padding: 2px 8px;
	border-radius: 999px;
}

.fr-day-divider {
	height: 1px;
	background: var(--fr-border);
	margin: 16px 0;
}

.fr-day-composer .fr-composer-opts {
	padding-bottom: 8px;
}

.fr-tag-row {
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.fr-tag-chip.is-active {
	background: var(--tone-bg, #f1f1f1);
	border-color: var(--tone, #999);
	color: var(--tone, #333);
}

/* -- Sincronização iCal -- */

.fr-sync-card {
	margin-top: 4px;
}

.fr-feed-row {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 12px;
}

.fr-feed-url-input {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	font-size: 11.5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	border: 1px solid var(--fr-border);
	border-radius: 8px;
	background: #fafafa;
	color: var(--fr-text-secondary);
}

.fr-feed-steps {
	background: #fafafa;
	border-radius: 8px;
	padding: 12px 14px;
}

.fr-feed-step {
	font-size: 12px;
	color: var(--fr-text-secondary);
	line-height: 1.5;
	margin: 0 0 8px 0;
}

.fr-feed-step:last-child {
	margin-bottom: 0;
}

.fr-feed-regen {
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 11.5px;
	color: var(--fr-text-secondary);
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}

.fr-feed-regen:hover {
	color: var(--fr-red);
}

@media (max-width: 900px) {
	.fr-week-body,
	.fr-week-head,
	.fr-week-allday {
		grid-template-columns: 42px repeat(7, minmax(0, 1fr));
	}

	.fr-cal-cell {
		min-height: 66px;
	}
}

/* O calendário precisa de mais largura do que o resto do conteúdo,
   que está limitado a 720px para leitura confortável. */

.fr-main > .fr-panel-body > .fr-cal-month,
.fr-main > .fr-panel-body > .fr-cal-week,
.fr-main > .fr-panel-body > .fr-calendar-header,
.fr-main > .fr-panel-body > .fr-cal-legend,
.fr-main > .fr-panel-body > .fr-sync-card {
	max-width: 1080px;
}

.fr-panel-body {
	max-width: none;
}

/* ------------------------------------------------------------
   Arrastar e largar eventos no calendário
   ------------------------------------------------------------ */

.fr-draggable {
	cursor: grab;
}

.fr-draggable:active {
	cursor: grabbing;
}

.fr-cal-chip.is-dragging,
.fr-week-event.is-dragging {
	opacity: 0.4;
}

/* Célula/faixa de destino em destaque durante o arrasto */

.fr-cal-cell.is-drop-target {
	background: var(--fr-red-dim);
	box-shadow: inset 0 0 0 2px var(--fr-red);
}

.fr-week-slot.is-drop-target {
	background: var(--fr-red-dim);
	box-shadow: inset 0 0 0 1.5px var(--fr-red);
}

.fr-week-allday-cell.is-drop-target {
	background: var(--fr-red-dim);
	box-shadow: inset 0 0 0 1.5px var(--fr-red);
}

/* ============================================================
   MOBILE — padrões nativos de aplicação
   A sidebar lateral não funciona em ecrã pequeno: a navegação
   passa para uma barra fixa em baixo (convenção iOS/Android),
   o cabeçalho fica compacto e fixo no topo, e o mini-calendário
   sai da navegação para não roubar metade do ecrã.
   ============================================================ */

@media (max-width: 860px) {

	html, body.fr-fullscreen-page {
		height: auto;
		overflow: visible;
		overscroll-behavior-y: none;
		-webkit-text-size-adjust: 100%;
	}

	.fr-shell {
		display: block;
		height: auto;
		min-height: 100vh;
		min-height: 100dvh;
		overflow: visible;
	}

	/* Extras (mini-calendário e terminar sessão) saem do fluxo:
	   o botão de sair foi para o cabeçalho. */
	.fr-sidebar-extras {
		display: contents;
	}

	/* -- Sidebar vira cabeçalho + barra de separadores -- */

	.fr-sidebar {
		grid-column: auto;
		grid-row: auto;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 60;
		flex: 0 0 auto;
		height: auto;
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 8px 14px;
		padding-top: calc( 8px + env( safe-area-inset-top ) );
		background: rgba( 252, 250, 248, 0.92 );
		backdrop-filter: saturate( 180% ) blur( 14px );
		-webkit-backdrop-filter: saturate( 180% ) blur( 14px );
		border-bottom: 1px solid rgba( 0, 0, 0, 0.07 );
		overflow: visible;
		box-sizing: border-box;
	}

	.fr-sidebar-top {
		flex: 1 1 auto;
		padding: 0;
		min-width: 0;
	}

	.fr-sidebar-logo {
		font-size: 15px;
	}

	/* Navegação: barra fixa no fundo, com ícone sobre legenda */

	.fr-sidebar-nav {
		/* Anula a coluna/linha da grelha usada no desktop. */
		grid-column: auto;
		grid-row: auto;
		overflow: visible;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: stretch;
		gap: 0;
		padding: 6px 4px;
		padding-bottom: calc( 6px + env( safe-area-inset-bottom ) );
		background: rgba( 255, 255, 255, 0.94 );
		backdrop-filter: saturate( 180% ) blur( 16px );
		-webkit-backdrop-filter: saturate( 180% ) blur( 16px );
		border-top: 1px solid rgba( 0, 0, 0, 0.08 );
	}

	.fr-nav-item {
		flex: 1 1 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		/* 44px é o mínimo recomendado para alvos de toque em iOS. */
		min-height: 46px;
		padding: 5px 2px;
		margin: 0;
		border: none;
		border-radius: 10px;
		background: transparent;
		font-size: 10px;
		font-weight: 500;
		line-height: 1.1;
		text-align: center;
		-webkit-tap-highlight-color: transparent;
	}

	.fr-nav-item:hover {
		background: transparent;
	}

	.fr-nav-item.active {
		background: transparent;
		color: var(--fr-red);
		font-weight: 600;
	}

	.fr-nav-item:active {
		opacity: 0.55;
	}

	.fr-nav-icon {
		width: 23px;
		height: 23px;
		flex: 0 0 23px;
	}

	.fr-nav-icon svg {
		width: 22px;
		height: 22px;
	}

	.fr-nav-label {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Badge sobreposto ao ícone, como nas apps nativas */
	.fr-nav-badge {
		position: absolute;
		top: 2px;
		left: 50%;
		margin-left: 4px;
		min-width: 16px;
		height: 16px;
		font-size: 9px;
	}

	.fr-nav-item {
		position: relative;
	}

	/* Mini-calendário e sessão saem da navegação */

	.fr-sidebar-calendar {
		display: none;
	}

	.fr-sidebar-bottom {
		position: fixed;
		top: calc( 8px + env( safe-area-inset-top ) );
		right: 14px;
		z-index: 61;
		border-top: none;
		padding: 0;
		margin: 0;
	}

	.fr-logout-link {
		font-size: 12px;
		padding: 7px 12px;
		border-radius: 999px;
		background: rgba( 0, 0, 0, 0.045 );
		white-space: nowrap;
	}

	/* -- Conteúdo entre as duas barras -- */

	.fr-main {
		grid-column: auto;
		grid-row: auto;
		height: auto;
		min-height: auto;
		overflow: visible;
		padding: 16px 16px 26px;
		/* espaço para cabeçalho e barra inferior fixos */
		padding-top: calc( 62px + env( safe-area-inset-top ) );
		padding-bottom: calc( 86px + env( safe-area-inset-bottom ) );
	}

	.fr-main > * {
		max-width: none;
	}

	.fr-page-title {
		font-size: 26px;
		letter-spacing: -0.02em;
	}

	/* -- Alvos de toque e formulários -- */

	button,
	.fr-btn,
	.fr-btn-primary,
	.fr-view-toggle-btn,
	.fr-chip {
		-webkit-tap-highlight-color: transparent;
	}

	.fr-btn-primary {
		min-height: 46px;
		padding: 12px 20px;
		font-size: 15px;
		width: 100%;
	}

	.fr-btn {
		min-height: 42px;
		padding: 10px 18px;
		font-size: 14px;
	}

	.fr-btn-small {
		min-height: 36px;
		padding: 8px 14px;
		font-size: 13px;
		width: auto;
	}

	/* 16px evita o zoom automático do Safari ao focar um campo. */
	input[type="text"],
	input[type="password"],
	input[type="number"],
	input[type="date"],
	input[type="time"],
	input[type="datetime-local"],
	select,
	textarea {
		font-size: 16px !important;
	}

	.fr-form-row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.fr-form-row input,
	.fr-form-row select,
	.fr-card select {
		width: 100%;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		min-height: 46px;
		box-sizing: border-box;
	}

	.fr-input-small,
	.fr-unit-select,
	.fr-schedule-date,
	.fr-reward-member-select,
	.fr-composer-date,
	.fr-composer-select {
		flex: 1 1 auto !important;
		width: 100% !important;
	}

	.fr-shopping-form-row,
	.fr-schedule-row {
		align-items: stretch;
	}

	/* -- Cartões e listas -- */

	.fr-card,
	.fr-home-card {
		padding: 16px;
		border-radius: 14px;
	}

	.fr-home-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.fr-home-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.fr-tasks-head {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.fr-view-toggle {
		width: 100%;
	}

	.fr-view-toggle-btn {
		flex: 1;
		min-height: 38px;
	}

	.fr-subnav {
		width: 100%;
	}

	.fr-subnav-btn {
		flex: 1;
		min-height: 38px;
		padding: 8px 6px;
		font-size: 12px;
	}

	/* Linhas de tarefa com alvos maiores */

	.fr-task-row,
	.fr-shopping-item,
	.fr-place-row,
	.fr-recipe-row,
	.fr-meal-row {
		padding: 12px 0;
		gap: 10px;
	}

	.fr-check-circle {
		width: 24px;
		height: 24px;
		flex: 0 0 24px;
	}

	.fr-shopping-item input[type="checkbox"] {
		width: 22px;
		height: 22px;
	}

	.fr-btn-icon-delete,
	.fr-btn-icon-edit {
		min-width: 38px;
		min-height: 38px;
		font-size: 15px;
	}

	.fr-qty-btn {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}

	.fr-qty-inline .fr-qty-btn {
		width: 32px;
		height: 32px;
	}

	.fr-approval-row {
		flex-wrap: wrap;
		gap: 8px;
	}

	.fr-approval-text {
		flex: 1 0 100%;
	}

	.fr-btn-approve,
	.fr-btn-reject {
		flex: 1;
		min-height: 40px;
		font-size: 13px;
	}

	.fr-place-row {
		flex-direction: column;
	}

	.fr-place-actions {
		width: 100%;
		justify-content: flex-start;
	}

	.fr-rewards-inline {
		gap: 6px;
	}

	.fr-reward-chip {
		min-height: 38px;
		font-size: 13px;
	}

	/* -- Modais como folhas deslizantes (padrão iOS) -- */

	.fr-modal-overlay {
		align-items: flex-end;
		padding: 0;
	}

	.fr-modal,
	.fr-modal-wide {
		max-width: 100%;
		width: 100%;
		border-radius: 18px 18px 0 0;
		max-height: 88vh;
		max-height: 88dvh;
		padding: 22px 18px;
		padding-bottom: calc( 22px + env( safe-area-inset-bottom ) );
		animation: fr-sheet-up 0.22s ease-out;
	}

	@keyframes fr-sheet-up {
		from { transform: translateY( 100% ); }
		to   { transform: translateY( 0 ); }
	}

	.fr-modal-actions {
		flex-direction: column-reverse;
		gap: 8px;
	}

	.fr-modal-actions button {
		width: 100%;
		min-height: 46px;
	}

	/* -- Calendário -- */

	.fr-calendar-header {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.fr-calendar-nav {
		justify-content: space-between;
	}

	.fr-cal-nav-btn {
		width: 38px;
		height: 38px;
		font-size: 19px;
	}

	.fr-cal-cell {
		min-height: 62px;
		padding: 3px;
	}

	.fr-cal-cell-num {
		font-size: 11px;
		width: 19px;
		height: 19px;
	}

	.fr-cal-chip {
		font-size: 9px;
		padding: 1px 3px;
		gap: 2px;
	}

	.fr-cal-chip-time {
		display: none;
	}

	.fr-cal-weekday {
		font-size: 9px;
		padding: 6px 2px;
	}

	.fr-week-head,
	.fr-week-body,
	.fr-week-allday {
		grid-template-columns: 38px repeat(7, minmax(0, 1fr));
	}

	.fr-week-body {
		max-height: 58vh;
	}

	.fr-week-day-num {
		font-size: 12px;
		width: 22px;
		height: 22px;
	}

	.fr-week-event {
		font-size: 9px;
		padding: 2px 3px;
	}

	.fr-cal-legend {
		gap: 8px;
		font-size: 10px;
	}

	/* -- Planeador de refeições -- */

	.fr-slot-grid {
		grid-template-columns: 1fr 60px 60px;
	}

	/* -- Login -- */

	.fr-login-card {
		max-width: 100%;
		border-radius: 16px;
		padding: 28px 22px;
	}

	.fr-timeline-card {
		padding: 10px 12px;
	}
}

/* Ecrãs muito estreitos: legendas da barra inferior mais curtas */
@media (max-width: 400px) {
	.fr-nav-item {
		font-size: 9px;
	}

	.fr-main {
		padding-left: 13px;
		padding-right: 13px;
	}
}

/* ------------------------------------------------------------
   Tira semanal no Início — só visível em mobile, onde o
   mini-calendário da sidebar não existe.
   ------------------------------------------------------------ */

.fr-week-strip {
	display: none;
}

@media (max-width: 860px) {
	.fr-week-strip {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 4px;
		margin: 4px 0 18px;
	}

	.fr-strip-day {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 8px 0;
		border: none;
		background: #f7f7f7;
		border-radius: 12px;
		cursor: pointer;
		font-family: inherit;
		-webkit-tap-highlight-color: transparent;
	}

	.fr-strip-day:active {
		opacity: 0.6;
	}

	.fr-strip-letter {
		font-size: 9px;
		text-transform: uppercase;
		color: var(--fr-text-secondary);
		letter-spacing: 0.03em;
	}

	.fr-strip-num {
		font-size: 14px;
		font-weight: 600;
		color: var(--fr-text);
	}

	.fr-strip-day.is-today {
		background: var(--fr-red);
	}

	.fr-strip-day.is-today .fr-strip-letter,
	.fr-strip-day.is-today .fr-strip-num {
		color: #ffffff;
	}
}


/* ------------------------------------------------------------
   Datas em português: só a primeira letra em maiúscula.
   O text-transform: capitalize capitalizaria todas as palavras
   ("Sexta-Feira, 11 De Setembro"), o que está errado em pt-PT.
   ------------------------------------------------------------ */

.fr-task-date-badge::first-letter,
.fr-agenda-date::first-letter,
.fr-timeline-day-label::first-letter,
.fr-side-event-date::first-letter,
.fr-slot-day::first-letter,
.fr-day-title::first-letter,
.fr-home-date::first-letter {
	text-transform: uppercase;
}

/* ============================================================
   REFINAMENTO VISUAL — linguagem de planeador moderno
   Marcadores circulares grandes ligados por linha vertical,
   cartões com elevação suave, fundo quente e cantos generosos.
   Carregado no fim para sobrepor as regras anteriores.
   ============================================================ */

:root {
	--fr-surface: #ffffff;
	--fr-canvas: #faf7f5;
	--fr-shadow-sm: 0 1px 2px rgba( 30, 20, 15, 0.04 ), 0 2px 8px rgba( 30, 20, 15, 0.04 );
	--fr-shadow-md: 0 2px 4px rgba( 30, 20, 15, 0.05 ), 0 8px 20px rgba( 30, 20, 15, 0.06 );
	--fr-radius: 16px;
	--fr-radius-lg: 20px;
}

body.fr-fullscreen-page {
	background: var(--fr-canvas);
}

.fr-main {
	background: var(--fr-canvas);
}

/* -- Cartões: elevação em vez de contorno -- */

.fr-card,
.fr-home-card,
.fr-login-card {
	background: var(--fr-surface);
	border: none;
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow-sm);
}

.fr-home-card {
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.fr-home-card:hover {
	box-shadow: var(--fr-shadow-md);
}

.fr-login-card {
	border-radius: var(--fr-radius-lg);
	box-shadow: var(--fr-shadow-md);
}

.fr-approvals-section,
.fr-home-card.fr-home-alert {
	background: #fff8ee;
	border: none;
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow-sm);
}

/* -- Tira semanal: cartão próprio com pontos de densidade -- */

.fr-week-strip {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px;
	margin: 0 0 22px;
	padding: 10px 8px;
	background: var(--fr-surface);
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow-sm);
}

.fr-strip-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 8px 0 9px;
	border: none;
	background: transparent;
	border-radius: 12px;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.fr-strip-day:hover {
	background: #f6f2ef;
}

.fr-strip-letter {
	font-size: 10px;
	text-transform: uppercase;
	color: var(--fr-text-secondary);
	letter-spacing: 0.04em;
	font-weight: 600;
}

.fr-strip-num {
	font-size: 17px;
	font-weight: 600;
	color: var(--fr-text);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	letter-spacing: -0.01em;
}

.fr-strip-day.is-today {
	background: transparent;
}

.fr-strip-day.is-today .fr-strip-num {
	background: var(--fr-red);
	color: #ffffff;
}

.fr-strip-day.is-today .fr-strip-letter {
	color: var(--fr-red);
}

/* Pontos de densidade por dia */

.fr-strip-dots {
	display: flex;
	gap: 3px;
	min-height: 6px;
	align-items: center;
}

.fr-strip-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tone, #c9c9c9);
}

.fr-strip-dot.cat-task { --tone: #34c759; }
.fr-strip-dot.cat-todo { --tone: #8e9aaf; }
.fr-strip-dot.cat-meal { --tone: #c49a6c; }

/* -- Tarefas: linhas mais generosas, concluídas riscadas -- */

.fr-task-row,
.fr-shopping-item {
	border-bottom: 1px solid #f4f0ee;
}

.fr-check-circle {
	width: 22px;
	height: 22px;
	border-width: 2px;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.fr-check-circle:active {
	transform: scale( 0.9 );
}

.fr-check-circle.is-done {
	position: relative;
}

/* Visto branco dentro do círculo preenchido */
.fr-check-circle.is-done::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 6.5px;
	width: 5px;
	height: 9px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

/* Tarefa concluída aparece riscada, como num planeador.
   Usa uma classe no JS em vez de :has(), para funcionar também
   em browsers mais antigos. */
.fr-task-row.is-complete .fr-task-text {
	text-decoration: line-through;
	color: var(--fr-text-secondary);
}

.fr-task-row.is-complete {
	opacity: 0.72;
}

/* -- Timeline do calendário: marcadores grandes -- */

.fr-timeline-marker {
	width: 38px;
	height: 38px;
	box-shadow: 0 2px 6px rgba( 30, 20, 15, 0.12 );
}

.fr-timeline-marker::after {
	width: 10px;
	height: 10px;
}

.fr-timeline-row::before {
	left: 18px;
	width: 2.5px;
	top: 38px;
	background: #e8e2de;
}

.fr-timeline-card {
	background: var(--fr-surface);
	border: none;
	border-radius: 14px;
	box-shadow: var(--fr-shadow-sm);
	padding: 13px 16px;
}

/* -- Cartões do Início com hierarquia mais clara -- */

.fr-home-card-title {
	font-size: 11px;
	letter-spacing: 0.06em;
}

.fr-home-big {
	font-size: 34px;
	letter-spacing: -0.02em;
}

/* -- Grelha do calendário com cantos suaves -- */

.fr-cal-month,
.fr-cal-week {
	border: none;
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow-sm);
	overflow: hidden;
	background: var(--fr-surface);
}

.fr-cal-weekdays {
	background: #fdfbfa;
	border-bottom: 1px solid #f4f0ee;
}

.fr-cal-cell {
	border-right: 1px solid #f6f3f1;
	border-bottom: 1px solid #f6f3f1;
}

.fr-cal-cell:hover {
	background: #fdfaf8;
}

.fr-cal-chip {
	border-radius: 6px;
	padding: 3px 6px;
}

/* -- Botões e pílulas com mais presença -- */

.fr-btn-primary {
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba( 219, 76, 63, 0.2 );
	transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.fr-btn-primary:active {
	transform: scale( 0.985 );
}

.fr-view-toggle,
.fr-subnav {
	background: #f1ece9;
	border-radius: 12px;
	padding: 4px;
}

.fr-view-toggle-btn,
.fr-subnav-btn {
	border-radius: 9px;
}

.fr-view-toggle-btn.is-active,
.fr-subnav-btn.is-active {
	box-shadow: 0 1px 3px rgba( 30, 20, 15, 0.1 );
}

.fr-points-pill {
	background: var(--fr-red-dim);
	color: var(--fr-red);
	font-size: 11px;
	padding: 3px 11px;
}

/* -- Modais mais suaves -- */

.fr-modal {
	border-radius: var(--fr-radius-lg);
	box-shadow: 0 20px 60px rgba( 30, 20, 15, 0.2 );
}

/* -- Compositor inline alinhado com a nova linguagem -- */

.fr-inline-composer {
	border: none;
	border-radius: 14px;
	box-shadow: var(--fr-shadow-md);
}

.fr-chip {
	border-radius: 999px;
}

/* ============================================================
   INÍCIO — data em destaque, agenda do dia, grelha de módulos
   ============================================================ */

/* -- Cartão principal com a data -- */

.fr-hero {
	background: linear-gradient( 135deg, #4a7fd4 0%, #5b8fe0 100% );
	border-radius: var(--fr-radius-lg);
	padding: 22px 22px 18px;
	margin-bottom: 18px;
	color: #ffffff;
	box-shadow: 0 4px 18px rgba( 74, 127, 212, 0.22 );
}

.fr-hero-head {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-bottom: 16px;
}

.fr-hero-weekday {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.8;
}

.fr-hero-weekday::first-letter {
	text-transform: uppercase;
}

.fr-hero-date {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.fr-hero-date::first-letter {
	text-transform: uppercase;
}

.fr-hero-agenda {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fr-hero-item {
	display: flex;
	align-items: stretch;
	gap: 11px;
	padding: 7px 0;
	cursor: pointer;
	border-radius: 8px;
	transition: background 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.fr-hero-item:hover {
	background: rgba( 255, 255, 255, 0.1 );
}

.fr-hero-item:active {
	opacity: 0.7;
}

/* Barra vertical colorida por categoria, como num calendário */
.fr-hero-bar {
	flex: 0 0 3px;
	border-radius: 999px;
	background: var(--tone, #ffffff);
	filter: brightness( 1.75 ) saturate( 1.4 );
	min-height: 34px;
}

.fr-hero-item-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1;
}

.fr-hero-item-title {
	font-size: 15px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-hero-item-time {
	font-size: 12.5px;
	opacity: 0.78;
}

.fr-hero-empty {
	font-size: 14px;
	opacity: 0.8;
	margin: 2px 0 4px;
}

/* -- Avisos que exigem ação -- */

.fr-alert-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--fr-surface);
	border-radius: 14px;
	padding: 12px 16px;
	margin-bottom: 10px;
	box-shadow: var(--fr-shadow-sm);
	font-size: 14px;
}

.fr-alert-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff9f0a;
	flex: 0 0 auto;
}

.fr-alert-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-alert-action {
	flex: 0 0 auto;
	border: none;
	background: var(--fr-red-dim);
	color: var(--fr-red);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	padding: 7px 15px;
	border-radius: 999px;
	cursor: pointer;
	min-height: 34px;
}

.fr-alert-action:hover {
	background: var(--fr-red);
	color: #ffffff;
}

/* -- Grelha de módulos (2 colunas) -- */

.fr-module-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 18px 0;
}

.fr-module-card {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	background: var(--fr-surface);
	border: none;
	border-radius: var(--fr-radius);
	padding: 16px;
	box-shadow: var(--fr-shadow-sm);
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	transition: transform 0.15s ease, box-shadow 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.fr-module-card:hover {
	box-shadow: var(--fr-shadow-md);
	transform: translateY( -1px );
}

.fr-module-card:active {
	transform: scale( 0.985 );
}

.fr-module-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

.fr-module-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--fr-text);
	letter-spacing: -0.01em;
}

.fr-module-sub {
	font-size: 12.5px;
	color: var(--fr-text-secondary);
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Ícone num quadrado com a cor da categoria */
.fr-module-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tone-bg, #f2f2f2);
	color: var(--tone, #666);
}

.fr-module-icon svg {
	width: 19px;
	height: 19px;
}

.cat-shop { --tone: #0f9d58; --tone-bg: #e6f4ec; }
.cat-todo { --tone: #5b6b8c; --tone-bg: #eef1f6; }

/* -- Pontos da semana -- */

.fr-points-card {
	padding: 18px;
}

.fr-points-card .fr-home-card-title {
	margin-bottom: 12px;
}

/* -- Mobile -- */

@media (max-width: 860px) {
	.fr-hero {
		padding: 20px 18px 16px;
		border-radius: 18px;
	}

	.fr-hero-date {
		font-size: 27px;
	}

	.fr-module-grid {
		gap: 10px;
	}

	.fr-module-card {
		padding: 14px;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		min-height: 104px;
	}

	.fr-module-icon {
		order: -1;
		flex: 0 0 32px;
		width: 32px;
		height: 32px;
		border-radius: 10px;
	}

	.fr-module-title {
		font-size: 14px;
	}

	.fr-module-sub {
		font-size: 11.5px;
	}

	.fr-alert-row {
		font-size: 13px;
		padding: 11px 14px;
	}
}

/* ============================================================
   ATIVIDADES RECORRENTES DOS MEMBROS
   ============================================================ */

/* Cores por tipo de atividade */

.cat-school   { --tone: #6a3fb5; --tone-bg: #f0eafb; }
.cat-football { --tone: #1a7f37; --tone-bg: #e7f5ec; }
.cat-gym      { --tone: #c2185b; --tone-bg: #fdeaf1; }
.cat-dance    { --tone: #d81b60; --tone-bg: #fdeaf2; }
.cat-music    { --tone: #00897b; --tone-bg: #e5f5f3; }
.cat-sport    { --tone: #ef6c00; --tone-bg: #fdf0e3; }
.cat-work     { --tone: #455a64; --tone-bg: #eceff1; }

.cat-activity_school   { --tone: #6a3fb5; --tone-bg: #f0eafb; }
.cat-activity_football { --tone: #1a7f37; --tone-bg: #e7f5ec; }
.cat-activity_gym      { --tone: #c2185b; --tone-bg: #fdeaf1; }
.cat-activity_dance    { --tone: #d81b60; --tone-bg: #fdeaf2; }
.cat-activity_music    { --tone: #00897b; --tone-bg: #e5f5f3; }
.cat-activity_sport    { --tone: #ef6c00; --tone-bg: #fdf0e3; }
.cat-activity_work     { --tone: #455a64; --tone-bg: #eceff1; }
.cat-activity_other    { --tone: #757575; --tone-bg: #f1f1f1; }

.fr-strip-dot.cat-activity { --tone: #6a3fb5; }

/* Linhas de atividade */

.fr-activity-row {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 0;
	border-bottom: 1px solid #f4f0ee;
	font-size: 14px;
}

.fr-activity-row:last-child {
	border-bottom: none;
}

.fr-activity-dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--tone, #999);
}

.fr-activity-time {
	flex: 0 0 88px;
	font-size: 12px;
	font-weight: 700;
	color: var(--fr-text-secondary);
	font-variant-numeric: tabular-nums;
}

.fr-activity-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.fr-activity-title {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-activity-meta {
	font-size: 11.5px;
	color: var(--fr-text-secondary);
}

@media (max-width: 860px) {
	.fr-activity-row {
		flex-wrap: wrap;
		gap: 8px;
	}

	.fr-activity-time {
		flex: 0 0 auto;
	}

	.fr-activity-info {
		flex: 1 0 60%;
	}
}

/* ============================================================
   MARCADORES NO CALENDÁRIO + MENU DO UTILIZADOR
   ============================================================ */

/* -- Pontos por dia na grelha mensal -- */

.fr-cal-cell-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	margin-bottom: 2px;
}

.fr-cal-dots {
	display: flex;
	gap: 2.5px;
	flex: 0 0 auto;
	padding-right: 2px;
}

.fr-cal-dot {
	width: 5.5px;
	height: 5.5px;
	border-radius: 50%;
	background: var(--tone, #999);
}

/* Dia com algo marcado ganha um fundo muito ligeiro.
   Classe aplicada no JS — :has() não existe em Safari antigo. */
.fr-cal-cell.has-entries {
	background: #fdfcfb;
}

/* -- Avatar como botão de menu -- */

.fr-sidebar-top {
	display: flex;
	align-items: center;
	gap: 9px;
	background: transparent;
	border: none;
	font-family: inherit;
	cursor: pointer;
	border-radius: 10px;
	text-align: left;
	width: 100%;
	transition: background 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.fr-sidebar-top:hover {
	background: var(--fr-sidebar-hover);
}

.fr-user-chevron {
	margin-left: auto;
	font-size: 13px;
	color: var(--fr-text-secondary);
	line-height: 1;
	padding-right: 4px;
}

/* -- Modal do utilizador -- */

.fr-user-modal .fr-subnav {
	width: 100%;
	margin: 14px 0 16px;
}

.fr-user-modal .fr-subnav-btn {
	flex: 1;
}

.fr-user-modal-body {
	min-height: 180px;
}

.fr-schedule-list {
	margin-bottom: 6px;
}

/* -- Gestor de etiquetas -- */

.fr-tag-list {
	display: flex;
	flex-direction: column;
	margin-bottom: 18px;
}

.fr-tag-row {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 0;
	border-bottom: 1px solid #f4f0ee;
	font-size: 14px;
}

.fr-tag-row:last-child {
	border-bottom: none;
}

.fr-tag-swatch {
	width: 14px;
	height: 14px;
	border-radius: 5px;
	flex: 0 0 auto;
}

.fr-tag-label {
	flex: 1;
	font-weight: 500;
}

.fr-tag-builtin {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fr-text-secondary);
	background: #f2f2f2;
	padding: 2px 8px;
	border-radius: 999px;
}

.fr-tag-creator {
	margin-top: 4px;
}

.fr-palette {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 10px 0 14px;
}

.fr-palette-swatch {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	transition: transform 0.12s ease;
}

.fr-palette-swatch:hover {
	transform: scale( 1.1 );
}

.fr-palette-swatch.is-active {
	border-color: var(--fr-text);
	box-shadow: 0 0 0 2px #ffffff inset;
}

@media (max-width: 860px) {
	.fr-cal-dot {
		width: 5px;
		height: 5px;
	}

	.fr-cal-dots {
		gap: 2px;
	}

	.fr-palette-swatch {
		width: 32px;
		height: 32px;
	}
}

/* ------------------------------------------------------------
   Terminar sessão — visível no fundo da barra e no menu
   ------------------------------------------------------------ */

.fr-sidebar-extras {
	justify-content: flex-end;
}

.fr-sidebar-bottom {
	padding: 12px 8px 14px;
	border-top: 1px solid rgba( 0, 0, 0, 0.06 );
	margin-top: 8px;
}

.fr-logout-link {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	font-size: 13px;
	font-weight: 500;
	color: var(--fr-text-secondary);
	text-decoration: none;
	padding: 9px 12px;
	border-radius: 9px;
	transition: background 0.15s ease, color 0.15s ease;
}

.fr-logout-link:hover {
	background: var(--fr-red-dim);
	color: var(--fr-red);
}

.fr-logout-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.fr-logout-icon svg {
	width: 17px;
	height: 17px;
}

/* No menu do utilizador */

.fr-user-logout {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--fr-border);
}

.fr-user-logout-btn {
	width: 100%;
	border: 1px solid var(--fr-border);
	background: #ffffff;
	color: var(--fr-red);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 12px;
	border-radius: 10px;
	cursor: pointer;
	min-height: 46px;
}

.fr-user-logout-btn:hover {
	background: var(--fr-red-dim);
	border-color: var(--fr-red);
}

@media (max-width: 860px) {
	/* Em mobile o link fica no cabeçalho: só o ícone, para poupar espaço. */
	.fr-logout-link {
		width: auto;
		padding: 8px 10px;
		background: rgba( 0, 0, 0, 0.045 );
		gap: 0;
	}

	.fr-logout-link span:not(.fr-logout-icon) {
		display: none;
	}

	.fr-sidebar-bottom {
		border-top: none;
		margin-top: 0;
	}
}

/* ------------------------------------------------------------
   Modal sobre modal (editar atividade a partir do menu)
   ------------------------------------------------------------ */

.fr-modal-nested {
	z-index: 1010;
	background: rgba( 0, 0, 0, 0.45 );
}

/* Cor da etiqueta aplicada em linha, via JS, tem prioridade */
.fr-activity-dot,
.fr-legend-dot {
	transition: background 0.15s ease;
}

/* ------------------------------------------------------------
   Calendário escolar — feriados e importação
   ------------------------------------------------------------ */

.cat-holiday { --tone: #ef6c00; --tone-bg: #fdf0e3; }

.fr-bulk-row {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.fr-school-list {
	max-height: 320px;
	overflow-y: auto;
	border: 1px solid var(--fr-border);
	border-radius: 12px;
	padding: 4px 14px 10px;
	margin-bottom: 14px;
}

.fr-school-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid #f4f0ee;
	font-size: 14px;
	cursor: pointer;
}

.fr-school-row:last-child {
	border-bottom: none;
}

.fr-school-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--fr-red);
	flex: 0 0 auto;
	margin: 0;
}

.fr-school-dot {
	width: 9px;
	height: 9px;
	border-radius: 3px;
	flex: 0 0 auto;
}

.fr-school-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.fr-school-title {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-school-when {
	font-size: 11.5px;
	color: var(--fr-text-secondary);
}

.fr-school-flag {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #a35c00;
	background: #fff4e5;
	padding: 3px 8px;
	border-radius: 999px;
}

/* ============================================================
   FILTROS DO CALENDÁRIO E BLOCOS LADO A LADO
   ============================================================ */

.fr-cal-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}

.fr-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fr-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1.5px solid var(--fr-border);
	background: #ffffff;
	border-radius: 999px;
	padding: 6px 14px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--fr-text-secondary);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.fr-filter-chip:hover {
	border-color: var(--fr-text-secondary);
	color: var(--fr-text);
}

.fr-filter-chip.is-active {
	border-color: var(--fr-text);
	color: var(--fr-text);
	font-weight: 600;
}

.fr-filter-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.fr-cal-filter-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fr-color-toggle .fr-view-toggle-btn {
	font-size: 11.5px;
	padding: 6px 12px;
}

/* Blocos repartidos quando há sobreposição */

.fr-week-event.is-split {
	font-size: 9.5px;
	padding: 3px 4px;
	border-left-width: 2.5px;
}

.fr-week-event.is-split .fr-week-event-time {
	font-size: 9px;
}

.fr-week-event-who {
	font-size: 9px;
	opacity: 0.75;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Os blocos posicionam-se por left/width calculados em JS */
.fr-week-event {
	left: auto;
	right: auto;
}

@media (max-width: 860px) {
	.fr-cal-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.fr-filter-chips {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.fr-filter-chip {
		flex: 0 0 auto;
		min-height: 38px;
	}

	.fr-cal-filter-actions {
		justify-content: space-between;
	}

	.fr-color-toggle {
		flex: 1;
	}

	.fr-week-event.is-split {
		font-size: 8.5px;
	}
}

/* ------------------------------------------------------------
   Etiquetas apagadas — reposição
   ------------------------------------------------------------ */

.fr-restore-box {
	background: #fafafa;
	border-radius: 12px;
	padding: 14px 16px;
	margin: 16px 0;
}

.fr-restore-box .fr-form-label {
	margin: 0 0 10px 0;
}

.fr-restore-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.fr-restore-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	opacity: 0.75;
}

.fr-restore-chip:hover {
	opacity: 1;
}

.fr-restore-chip::after {
	content: '↺';
	font-size: 12px;
	margin-left: 2px;
}

/* ============================================================
   TAREFAS ABERTAS — disponíveis a todos, reclamadas por quem faz
   ============================================================ */

.fr-open-section {
	background: #f3f9f5;
	border-radius: var(--fr-radius);
	padding: 16px 18px;
	margin-bottom: 26px;
}

.fr-open-section .fr-section-head {
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}

.fr-open-hint {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #1a7f37;
	background: rgba( 26, 127, 55, 0.1 );
	padding: 3px 10px;
	border-radius: 999px;
}

.fr-open-row {
	border-bottom-color: rgba( 26, 127, 55, 0.12 );
}

.fr-open-claimed {
	font-size: 11.5px;
	color: #1a7f37;
	font-weight: 500;
}

.fr-open-row.is-complete .fr-open-claimed {
	color: var(--fr-text-secondary);
}

.fr-open-section .fr-check-circle {
	border-color: #6bbd85;
}

.fr-open-section .fr-check-circle:hover {
	border-color: #1a7f37;
}

.fr-open-section .fr-check-circle.is-done {
	background: #1a7f37;
	border-color: #1a7f37;
}

.fr-open-section .fr-add-inline-plus {
	color: #1a7f37;
}

.fr-open-section .fr-add-inline-btn:hover {
	color: #1a7f37;
}

.fr-open-section .fr-add-inline-btn:hover .fr-add-inline-plus {
	background: #1a7f37;
	color: #ffffff;
}

/* Modal de atribuição: quem fez a tarefa */

.fr-claim-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 14px 0 4px;
}

.fr-claim-row {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--fr-border);
	border-radius: 12px;
	background: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--fr-text);
	cursor: pointer;
	text-align: left;
}

.fr-claim-row:hover {
	border-color: #1a7f37;
	background: #f3f9f5;
}

.fr-claim-row .fr-task-points {
	margin-left: auto;
}

@media (max-width: 860px) {
	.fr-open-section {
		padding: 14px;
	}

	.fr-claim-row {
		min-height: 52px;
	}
}

/* ============================================================
   MESADA MENSAL
   ============================================================ */

.fr-allowance-nav {
	justify-content: center;
	margin-bottom: 18px;
}

.fr-allowance-card {
	padding: 18px;
	margin-bottom: 12px;
}

.fr-allowance-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.fr-allowance-name {
	font-size: 15px;
	font-weight: 600;
	flex: 1;
}

.fr-allowance-amount {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.fr-allowance-bar {
	height: 10px;
	border-radius: 999px;
	background: #f0ece9;
	overflow: hidden;
	margin-bottom: 10px;
}

.fr-allowance-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	transition: width 0.4s ease;
}

.fr-allowance-stats {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 12.5px;
	color: var(--fr-text-secondary);
}

.fr-allowance-cap {
	flex: 0 0 auto;
	font-weight: 600;
}

.fr-allowance-note {
	font-size: 11.5px;
	color: var(--fr-text-secondary);
	margin: 8px 0 0;
}

.fr-allowance-card .fr-btn {
	margin-top: 12px;
}

.fr-allowance-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	background: var(--fr-text);
	color: #ffffff;
	border-radius: var(--fr-radius);
	font-size: 15px;
	font-weight: 600;
	margin-top: 4px;
}

.fr-allowance-total-value {
	font-size: 20px;
	font-weight: 700;
}

@media (max-width: 860px) {
	.fr-allowance-amount {
		font-size: 19px;
	}

	.fr-allowance-stats {
		flex-direction: column;
		gap: 3px;
	}
}

/* ------------------------------------------------------------
   Cores de tarefas e lembretes no calendário (não são etiquetas)
   ------------------------------------------------------------ */

.cat-task { --tone: #34c759; --tone-bg: #e9f9ed; }
.cat-todo { --tone: #5b6b8c; --tone-bg: #eef1f6; }

/* Chip de etiqueta ativo usa a cor aplicada em linha pelo JS */
.fr-tag-chip.is-active {
	font-weight: 600;
}

/* ============================================================
   HISTÓRICO MENSAL, TAREFAS OBRIGATÓRIAS E POUPANÇAS
   ============================================================ */

/* -- Histórico do mês na mesada -- */

.fr-history {
	margin-top: 14px;
	border-top: 1px solid var(--fr-border);
	padding-top: 6px;
}

.fr-history-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #f4f0ee;
	font-size: 13px;
}

.fr-history-row:last-child {
	border-bottom: none;
}

.fr-history-head {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fr-text-secondary);
	border-bottom: 1px solid var(--fr-border);
}

.fr-history-title {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.fr-history-title > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-history-num {
	flex: 0 0 62px;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--fr-text-secondary);
}

.fr-history-num.is-missed {
	color: var(--fr-red);
	font-weight: 700;
}

.fr-history-row.has-missed .fr-history-title {
	font-weight: 500;
}

.fr-history-penalty {
	color: var(--fr-red);
	font-weight: 600;
}

.fr-mandatory-badge {
	flex: 0 0 auto;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #a35c00;
	background: #fff4e5;
	padding: 2px 7px;
	border-radius: 999px;
}

.fr-mandatory-check {
	font-size: 12px;
}

.fr-allowance-penalty {
	color: var(--fr-red);
}

/* -- Poupanças -- */

.fr-goal-card {
	margin-bottom: 14px;
}

.fr-goal-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.fr-goal-title {
	flex: 1;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.fr-goal-figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}

.fr-goal-figure {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	background: #fafafa;
	border-radius: 10px;
}

.fr-goal-figure-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fr-text-secondary);
}

.fr-goal-figure-value {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.fr-goal-figure.is-saved .fr-goal-figure-value {
	color: #1a7f37;
}

.fr-goal-figure.is-remaining .fr-goal-figure-value {
	color: var(--fr-red);
}

.fr-goal-meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
	color: var(--fr-text-secondary);
}

/* Movimentos */

.fr-entry-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid #f4f0ee;
	font-size: 13px;
}

.fr-entry-row:last-child {
	border-bottom: none;
}

.fr-entry-date {
	flex: 0 0 78px;
	font-size: 11.5px;
	color: var(--fr-text-secondary);
	font-variant-numeric: tabular-nums;
}

.fr-entry-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.fr-entry-label {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-entry-meta {
	font-size: 11px;
	color: var(--fr-text-secondary);
}

.fr-entry-amount {
	flex: 0 0 auto;
	font-weight: 700;
	color: #1a7f37;
	font-variant-numeric: tabular-nums;
}

.fr-entry-amount.is-negative {
	color: var(--fr-red);
}

@media (max-width: 860px) {
	.fr-goal-figures {
		grid-template-columns: 1fr 1fr;
	}

	.fr-goal-figure:last-child {
		grid-column: 1 / -1;
	}

	.fr-history-num {
		flex: 0 0 50px;
		font-size: 12px;
	}

	.fr-entry-date {
		flex: 0 0 66px;
	}
}

/* ============================================================
   TRANSPORTES — quem leva, quem traz, e conflitos
   ============================================================ */

.fr-conflict-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fff1f0;
	border-left: 4px solid var(--fr-red);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 10px;
}

.fr-conflict-icon {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--fr-red);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.fr-conflict-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.fr-conflict-title {
	font-size: 14px;
	font-weight: 600;
	color: #9b2c22;
}

.fr-conflict-detail {
	font-size: 12px;
	color: #a04b42;
	line-height: 1.45;
}

/* Cartão de transportes */

.fr-transport-card {
	margin-bottom: 18px;
	padding: 16px 18px;
}

.fr-transport-row {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 0;
	border-bottom: 1px solid #f4f0ee;
}

.fr-transport-row:last-child {
	border-bottom: none;
}

.fr-transport-time {
	flex: 0 0 44px;
	font-size: 13px;
	font-weight: 700;
	color: var(--fr-text-secondary);
	font-variant-numeric: tabular-nums;
}

.fr-transport-arrow {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
}

.fr-transport-arrow.is-out {
	background: #eaf3fd;
	color: #0071e3;
}

.fr-transport-arrow.is-in {
	background: #e7f5ec;
	color: #1a7f37;
}

.fr-transport-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.fr-transport-driver {
	font-size: 13.5px;
	font-weight: 500;
}

.fr-transport-meta {
	font-size: 11.5px;
	color: var(--fr-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Linha compacta nas listas de horário */

.fr-transport-line {
	font-size: 11px;
	color: var(--fr-text-secondary);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.fr-transport-select {
	flex: 0 1 110px !important;
}

@media (max-width: 860px) {
	.fr-transport-select {
		flex: 1 1 auto !important;
	}

	.fr-conflict-detail {
		font-size: 11.5px;
	}
}

/* ------------------------------------------------------------
   Barra de erro — falhas visíveis em vez de ecrã vazio
   ------------------------------------------------------------ */

.fr-error-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	padding-top: calc( 12px + env( safe-area-inset-top ) );
	background: #9b2c22;
	color: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.2 );
}

.fr-error-text {
	flex: 1;
	line-height: 1.4;
	word-break: break-word;
}

.fr-error-close {
	flex: 0 0 auto;
	border: none;
	background: rgba( 255, 255, 255, 0.2 );
	color: #ffffff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 13px;
	cursor: pointer;
	line-height: 1;
}

.fr-error-close:hover {
	background: rgba( 255, 255, 255, 0.35 );
}

/* ------------------------------------------------------------
   Diagnóstico da base de dados
   ------------------------------------------------------------ */

.fr-diag-summary {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #e7f5ec;
	margin-bottom: 14px;
}

.fr-diag-summary.has-problem {
	background: #fff1f0;
}

.fr-diag-summary-title {
	font-size: 14px;
	font-weight: 700;
	color: #1a7f37;
}

.fr-diag-summary.has-problem .fr-diag-summary-title {
	color: #9b2c22;
}

.fr-diag-summary-meta {
	font-size: 11.5px;
	color: var(--fr-text-secondary);
}

.fr-diag-list {
	max-height: 320px;
	overflow-y: auto;
	border: 1px solid var(--fr-border);
	border-radius: 12px;
	padding: 4px 14px;
}

.fr-diag-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #f4f0ee;
	font-size: 12.5px;
}

.fr-diag-row:last-child {
	border-bottom: none;
}

.fr-diag-mark {
	flex: 0 0 18px;
	font-weight: 700;
	color: #1a7f37;
}

.fr-diag-row.is-bad .fr-diag-mark {
	color: var(--fr-red);
}

.fr-diag-name {
	flex: 0 0 132px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
}

.fr-diag-detail {
	flex: 1;
	color: var(--fr-text-secondary);
	font-size: 11.5px;
}

.fr-diag-row.is-bad .fr-diag-detail {
	color: var(--fr-red);
}

/* ============================================================
   LOCAIS E CUSTOS — painel de administração
   ============================================================ */

.fr-location-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid #f4f0ee;
	font-size: 14px;
}

.fr-location-row:last-child {
	border-bottom: none;
}

.fr-location-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fr-location-title-line {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fr-location-name {
	font-weight: 600;
}

.fr-home-badge {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #1a7f37;
	background: #e7f5ec;
	padding: 2px 8px;
	border-radius: 999px;
}

.fr-location-meta {
	font-size: 11.5px;
	color: var(--fr-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-map-btn {
	flex: 0 0 auto;
	font-size: 11.5px;
	font-weight: 600;
	color: #0071e3;
	background: #eaf3fd;
	padding: 6px 12px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}

.fr-map-btn:hover {
	background: #0071e3;
	color: #ffffff;
}

.fr-warn-text {
	color: #a35c00;
	background: #fff4e5;
	padding: 10px 14px;
	border-radius: 10px;
}

/* Linhas de custo */

.fr-cost-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f4f0ee;
	font-size: 13px;
}

.fr-cost-row:last-child {
	border-bottom: none;
}

.fr-cost-name {
	flex: 0 0 110px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-cost-bar {
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: #f0ece9;
	overflow: hidden;
	min-width: 40px;
}

.fr-cost-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--fr-red);
}

.fr-cost-value {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--fr-text-secondary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (max-width: 860px) {
	.fr-cost-name {
		flex: 0 0 78px;
		font-size: 12px;
	}

	.fr-cost-value {
		font-size: 11px;
	}

	.fr-location-row {
		flex-wrap: wrap;
	}

	.fr-location-info {
		flex: 1 0 100%;
	}
}

/* ============================================================
   INÍCIO — navegação por dias e painéis por pessoa
   ============================================================ */

.fr-hero-head {
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.fr-hero-title-wrap {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.fr-hero-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.fr-hero-nav-btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba( 255, 255, 255, 0.18 );
	color: #ffffff;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
}

.fr-hero-nav-btn:hover {
	background: rgba( 255, 255, 255, 0.32 );
}

.fr-hero-today-btn {
	border: none;
	background: rgba( 255, 255, 255, 0.92 );
	color: #3a6bb8;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
}

.fr-hero-today-btn:hover {
	background: #ffffff;
}

/* Dia selecionado vs. hoje na tira semanal */

.fr-strip-day.is-selected .fr-strip-num {
	background: var(--fr-red);
	color: #ffffff;
}

.fr-strip-day.is-selected .fr-strip-letter {
	color: var(--fr-red);
}

.fr-strip-day.is-today:not(.is-selected) .fr-strip-num {
	box-shadow: inset 0 0 0 2px var(--fr-red);
	color: var(--fr-red);
}

/* -- O dia de cada pessoa -- */

.fr-people-day {
	margin-bottom: 20px;
}

.fr-people-day .fr-home-card-title {
	margin-bottom: 10px;
}

.fr-people-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

.fr-person-card {
	background: var(--fr-surface);
	border-radius: var(--fr-radius);
	padding: 14px 16px;
	box-shadow: var(--fr-shadow-sm);
}

.fr-person-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 9px;
	margin-bottom: 4px;
	border-bottom: 1px solid #f4f0ee;
}

.fr-person-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.fr-person-name {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-person-count {
	flex: 0 0 auto;
	font-size: 10.5px;
	color: var(--fr-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.fr-person-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 0;
	border-bottom: 1px solid #f8f5f3;
	font-size: 13px;
}

.fr-person-item:last-child {
	border-bottom: none;
}

.fr-person-time {
	flex: 0 0 38px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--fr-text-secondary);
	font-variant-numeric: tabular-nums;
}

.fr-person-item-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.fr-person-item-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-person-item-meta {
	font-size: 11px;
	color: var(--fr-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fr-person-tag {
	flex: 0 0 auto;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px 8px;
	border-radius: 999px;
}

.fr-person-tag.is-transport {
	background: #eaf3fd;
	color: #0071e3;
}

.fr-person-tag.is-task {
	background: #e9f9ed;
	color: #1a7f37;
}

.fr-person-tag.is-todo {
	background: #eef1f6;
	color: #5b6b8c;
}

.fr-person-item.is-transport .fr-person-item-title {
	font-weight: 500;
}

@media (max-width: 860px) {
	.fr-hero-nav-btn {
		width: 38px;
		height: 38px;
	}

	.fr-people-grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------
   Cartão principal: só o dia de quem está a ver
   ------------------------------------------------------------ */

.fr-hero-item {
	align-items: center;
}

.fr-hero-tag {
	flex: 0 0 auto;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.22 );
	color: #ffffff;
}

/* Deslocações em destaque: é o que exige sair de casa */
.fr-hero-item.is-transport .fr-hero-item-title {
	font-weight: 700;
}

.fr-hero-item.is-task .fr-hero-item-title,
.fr-hero-item.is-todo .fr-hero-item-title {
	font-weight: 500;
}

/* O próprio cartão na grelha fica discreto */
.fr-person-card.is-me {
	background: #f7f4f1;
	box-shadow: none;
	border: 1px dashed var(--fr-border);
}

.fr-person-card.is-me .fr-person-name {
	color: var(--fr-text-secondary);
}

/* ------------------------------------------------------------
   Dias especiais — aniversários, feriados, passeios
   ------------------------------------------------------------ */

.fr-hero-item.is-special {
	background: rgba( 255, 255, 255, 0.14 );
	border-radius: 10px;
	padding: 10px 12px;
	margin: 2px 0;
}

.fr-hero-item.is-special .fr-hero-item-title {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.01em;
}

.fr-hero-icon {
	margin-right: 7px;
	font-size: 15px;
}

.fr-hero-item.is-family .fr-hero-item-time {
	opacity: 0.85;
}

.fr-person-item.is-special .fr-person-item-title {
	font-weight: 600;
}

.fr-person-icon {
	margin-right: 5px;
}

/* Cartão de toda a família */

.fr-person-card.is-family-card {
	background: #eef5fd;
	box-shadow: none;
	border: 1px solid #cfe2f8;
}

.fr-person-card.is-family-card .fr-person-head {
	border-bottom-color: #d9e8f9;
}

.fr-person-card.is-family-card .fr-person-name {
	color: #1c5aa8;
}

/* ============================================================
   DEFINIÇÕES — barra de separadores deslizante e rodapé
   ============================================================ */

.fr-user-modal .fr-subnav {
	display: flex;
	overflow-x: auto;
	flex-wrap: nowrap;
	gap: 2px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.fr-user-modal .fr-subnav::-webkit-scrollbar {
	display: none;
}

.fr-user-modal .fr-subnav-btn {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 8px 14px;
	font-size: 12.5px;
}

/* Rodapé: fechar em destaque, sair discreto */

.fr-user-footer {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--fr-border);
}

.fr-user-footer .fr-btn-primary {
	flex: 1;
}

.fr-user-logout-link {
	flex: 0 0 auto;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 12.5px;
	color: var(--fr-text-secondary);
	text-decoration: underline;
	cursor: pointer;
	padding: 8px 4px;
	white-space: nowrap;
}

.fr-user-logout-link:hover {
	color: var(--fr-red);
}

/* ------------------------------------------------------------
   Veículos e combustível
   ------------------------------------------------------------ */

.fr-vehicle-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid #f4f0ee;
}

.fr-vehicle-row:last-child {
	border-bottom: none;
}

.fr-vehicle-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fr-fuel-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 0;
	font-size: 13px;
}

.fr-fuel-name {
	flex: 0 0 108px;
	font-weight: 500;
}

.fr-fuel-input {
	flex: 0 1 100px;
	padding: 8px 11px;
	font-size: 14px;
	border: 1px solid var(--fr-border);
	border-radius: 9px;
	background: #fafafa;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
}

.fr-fuel-unit {
	flex: 0 0 auto;
	font-size: 11.5px;
	color: var(--fr-text-secondary);
}

.fr-fuel-meta {
	font-size: 10.5px;
	color: var(--fr-text-secondary);
	margin: -4px 0 8px 108px;
}

@media (max-width: 860px) {
	.fr-fuel-name {
		flex: 0 0 82px;
		font-size: 12px;
	}

	.fr-fuel-meta {
		margin-left: 82px;
	}

	.fr-user-footer {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 10px;
	}

	.fr-user-logout-link {
		text-align: center;
	}
}

/* ------------------------------------------------------------
   Bloco de transportes: escondido quando é um adulto a conduzir
   ------------------------------------------------------------ */

.fr-transport-block {
	margin-top: 4px;
}

.fr-transport-block > label {
	display: block;
}

/* ============================================================
   COERÊNCIA VISUAL — nada transborda em ecrã pequeno
   Carregado no fim para corrigir o que ficou por uniformizar.
   ============================================================ */

/* Regra de base: tudo conta padding na largura e pode encolher.
   Sem min-width:0, um filho de flex recusa-se a encolher abaixo do
   seu conteúdo e empurra o cartão para fora do ecrã. */

.fr-app *,
.fr-modal-overlay * {
	box-sizing: border-box;
}

.fr-app,
.fr-main,
.fr-panel-body {
	max-width: 100%;
	overflow-x: hidden;
}

.fr-card,
.fr-home-card,
.fr-person-card,
.fr-goal-card,
.fr-allowance-card,
.fr-hero,
.fr-open-section,
.fr-transport-card,
.fr-week-strip,
.fr-conflict-row,
.fr-alert-row {
	max-width: 100%;
	overflow: hidden;
}

/* Qualquer contentor flexível encolhe em vez de empurrar */

.fr-task-text-wrap,
.fr-activity-info,
.fr-location-info,
.fr-vehicle-info,
.fr-person-item-body,
.fr-hero-item-body,
.fr-transport-info,
.fr-entry-info,
.fr-school-info,
.fr-place-main,
.fr-composer-opts > *,
.fr-form-row > * {
	min-width: 0;
}

/* Textos longos não rebentam a caixa */

.fr-task-text,
.fr-activity-title,
.fr-location-name,
.fr-person-item-title,
.fr-hero-item-title,
.fr-goal-title,
.fr-entry-label,
.fr-school-title,
.fr-place-name,
.fr-tag-label,
.fr-helper-name {
	/* break-word só parte quando a palavra não cabe mesmo; "anywhere"
	   partia o título letra a letra quando o espaço era pouco. */
	overflow-wrap: break-word;
}

/* Campos de formulário nunca excedem o contentor */

.fr-app input,
.fr-app select,
.fr-app textarea,
.fr-modal input,
.fr-modal select,
.fr-modal textarea {
	max-width: 100%;
}

/* Linhas de ajudante */

.fr-helper-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid #f4f0ee;
	font-size: 13.5px;
}

.fr-helper-row:last-child {
	border-bottom: none;
}

.fr-helper-name {
	flex: 1;
	min-width: 0;
	font-weight: 500;
}

/* ---- Ajustes específicos de ecrã pequeno ---- */

@media (max-width: 860px) {

	/* Modais: nunca mais largos do que o ecrã */
	.fr-modal,
	.fr-modal-wide {
		width: 100%;
		max-width: 100vw;
	}

	/* Grelhas de números passam a duas colunas legíveis */
	.fr-goal-figures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fr-module-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Linhas com muitos elementos passam a empilhar */
	.fr-composer-opts {
		flex-wrap: wrap;
	}

	.fr-composer-opts > input,
	.fr-composer-opts > select {
		flex: 1 1 130px;
		min-width: 0;
	}

	/* Grelhas horárias com scroll horizontal próprio, não da página */
	.fr-cal-week,
	.fr-cal-month {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.fr-week-head,
	.fr-week-body,
	.fr-week-allday {
		min-width: 620px;
	}

	/* Listas longas com scroll interno em vez de esticar a página */
	.fr-school-list,
	.fr-diag-list {
		max-height: 44vh;
	}

	/* Botões de ação não encolhem ao ponto de ficarem ilegíveis */
	.fr-btn-icon-edit,
	.fr-btn-icon-delete {
		flex: 0 0 auto;
	}

	/* Chips e filtros deslizam em vez de quebrar mal */
	.fr-filter-chips,
	.fr-chip-group,
	.fr-tag-row {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.fr-filter-chips::-webkit-scrollbar,
	.fr-chip-group::-webkit-scrollbar,
	.fr-tag-row::-webkit-scrollbar {
		display: none;
	}

	.fr-chip,
	.fr-filter-chip {
		flex: 0 0 auto;
	}
}

/* Ecrãs estreitos: uma coluna só */
@media (max-width: 420px) {
	.fr-module-grid,
	.fr-goal-figures {
		grid-template-columns: 1fr;
	}

	.fr-hero-date {
		font-size: 24px;
	}

	.fr-allowance-amount {
		font-size: 18px;
	}
}

/* ============================================================
   BOLEIAS EM DESTAQUE E MÓDULOS COMPACTOS
   ============================================================ */

/* -- Boleias: obrigam a sair de casa, por isso destacam-se -- */

.fr-hero-item.is-ride {
	background: rgba( 127, 211, 255, 0.18 );
	border-radius: 10px;
	padding: 10px 12px;
	margin: 2px 0;
}

.fr-hero-item.is-ride .fr-hero-item-title {
	font-weight: 700;
	font-size: 15.5px;
}

.fr-hero-item.is-ride .fr-hero-item-time {
	opacity: 0.92;
}

.fr-hero-tag.is-ride-tag {
	background: #7fd3ff;
	color: #0b3d5c;
}

/* -- Grelha de módulos: dois por linha, compactos -- */

.fr-module-grid {
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
}

.fr-module-card {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 14px;
	min-height: 0;
}

.fr-module-icon {
	order: -1;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 9px;
}

.fr-module-icon svg {
	width: 17px;
	height: 17px;
}

.fr-module-title {
	font-size: 14px;
}

.fr-module-sub {
	font-size: 11.5px;
	-webkit-line-clamp: 2;
}

@media (max-width: 860px) {
	/* Duas colunas mesmo em ecrã pequeno: uma linha inteira por
	   "Compras · 7 itens" desperdiça meio ecrã. */
	.fr-module-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px;
	}

	.fr-module-card {
		padding: 12px;
		gap: 8px;
		min-height: 94px;
	}

	.fr-module-icon {
		flex: 0 0 28px;
		width: 28px;
		height: 28px;
		border-radius: 8px;
	}

	.fr-module-icon svg {
		width: 16px;
		height: 16px;
	}

	.fr-module-title {
		font-size: 13px;
		line-height: 1.2;
	}

	.fr-module-sub {
		font-size: 11px;
		line-height: 1.3;
	}

	.fr-hero-item.is-ride {
		padding: 9px 10px;
	}

	.fr-hero-item.is-ride .fr-hero-item-title {
		font-size: 14.5px;
	}
}

/* Mesmo no iPhone mais estreito, mantêm-se duas colunas */
@media (max-width: 420px) {
	.fr-module-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.fr-module-card {
		padding: 11px;
		min-height: 88px;
	}

	.fr-module-title {
		font-size: 12.5px;
	}

	.fr-module-sub {
		font-size: 10.5px;
	}
}


/* ============================================================
   LINHAS DE TAREFA E LEMBRETE EM ECRÃ ESTREITO
   O título tem de ter uma linha só para si: espremido entre os
   selos de data e os botões, partia-se letra a letra.
   ============================================================ */

@media (max-width: 860px) {

	.fr-task-row,
	.fr-open-row {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 8px 10px;
		padding: 12px 0;
	}

	/* Título ocupa a largura toda, menos o círculo de check */
	.fr-task-text-wrap {
		flex: 1 1 calc( 100% - 34px );
		min-width: 0;
		order: 1;
	}

	.fr-task-text {
		font-size: 14.5px;
		line-height: 1.35;
	}

	.fr-check-circle {
		order: 0;
		margin-top: 1px;
	}

	/* Selos e botões descem para uma segunda linha, alinhados */
	.fr-task-date-badge,
	.fr-task-points,
	.fr-task-status-badge,
	.fr-task-rejected,
	.fr-open-claimed {
		order: 2;
	}

	.fr-task-row .fr-btn-icon-edit,
	.fr-task-row .fr-btn-icon-delete,
	.fr-open-row .fr-btn-icon-edit,
	.fr-open-row .fr-btn-icon-delete {
		order: 3;
		margin-left: auto;
	}

	.fr-task-row .fr-btn-icon-delete,
	.fr-open-row .fr-btn-icon-delete {
		margin-left: 0;
	}

	/* A segunda linha alinha por baixo do título, não do círculo */
	.fr-task-date-badge,
	.fr-task-points,
	.fr-task-status-badge {
		margin-left: 0;
	}

	.fr-task-meta {
		flex: 1 1 100%;
		order: 4;
		margin-left: 34px;
	}
}

/* iPhone estreito: selos mais compactos */
@media (max-width: 420px) {
	.fr-task-date-badge,
	.fr-task-status-badge {
		font-size: 10.5px;
		padding: 3px 9px;
	}

	.fr-task-text {
		font-size: 14px;
	}
}

/* ------------------------------------------------------------
   Cabeçalho fixo em mobile — sem sobreposições
   ------------------------------------------------------------ */

@media (max-width: 860px) {

	.fr-sidebar {
		min-height: 56px;
		align-items: center;
	}

	.fr-sidebar-top {
		gap: 8px;
		padding-right: 8px;
		min-width: 0;
	}

	.fr-sidebar-logo {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	.fr-user-chevron {
		flex: 0 0 auto;
	}

	/* O botão de sair não pode tapar o nome */
	.fr-sidebar-bottom {
		top: auto;
		position: static;
		flex: 0 0 auto;
	}

	.fr-logout-link {
		padding: 7px 9px;
	}

	/* Espaço suficiente para o cabeçalho não tapar o título */
	.fr-main {
		padding-top: calc( 74px + env( safe-area-inset-top ) );
	}

	.fr-page-title {
		margin-top: 0;
	}
}

/* ------------------------------------------------------------
   Tabela da curva de exigência
   ------------------------------------------------------------ */

.fr-curve-table {
	margin: 12px 0 16px;
	padding: 12px 14px;
	background: #fafafa;
	border-radius: 10px;
}

.fr-curve-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	font-size: 12.5px;
}

.fr-curve-effort {
	flex: 0 0 40px;
	color: var(--fr-text-secondary);
	font-variant-numeric: tabular-nums;
}

.fr-curve-bar {
	flex: 1;
	min-width: 30px;
	height: 7px;
	border-radius: 999px;
	background: #ebe6e2;
	overflow: hidden;
}

.fr-curve-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--fr-red);
}

.fr-curve-value {
	flex: 0 0 62px;
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
	.fr-curve-effort {
		flex: 0 0 34px;
		font-size: 11.5px;
	}

	.fr-curve-value {
		flex: 0 0 54px;
		font-size: 11.5px;
	}
}