:root {
    /* BRAND */
    --primary: #D8A7B1;
    --primary-dark: #8B5E66;
    --primary-light: #F7E6EA;

    /* ACCENT */
    --gold: #C9A96A;

    /* NEUTRALS */
    --text-dark: #2B2B2B;
    --text-muted: #6B6B6B;
    --bg-soft: #FFF7F9;
    --white: #ffffff;

    /* SHADOW */
    --shadow-soft: rgba(139, 94, 102, 0.15);
}

.container {
    max-width: 1140px;
}

main.container {
    padding-top: 64px;
    padding-bottom: 64px;
}

/* Base */
body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background: #FFF7F9;
    overflow-x: hidden;
}

a, button {
    transition: all 0.2s ease;
}

.dashboard-metric-card {
    background: #ffffff;
    border: 1px solid #ead7dc;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 10px 28px rgba(43, 43, 43, 0.05);
}

.dashboard-metric-card span {
    display: block;
    color: #8b5e66;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.dashboard-metric-card strong {
    display: block;
    color: #2b2b2b;
    font-size: 2rem;
    font-weight: 800;
}

.dashboard-metric-card small {
    color: #6b6b6b;
}

.dashboard-today-list {
    display: grid;
    gap: 12px;
}

.dashboard-today-item {
    background: #faf7f8;
    border: 1px solid #ead7dc;
    border-radius: 18px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.dashboard-today-item strong {
    color: #8b5e66;
    font-size: 1.1rem;
    margin-right: 10px;
}

.dashboard-today-item span {
    color: #2b2b2b;
    font-weight: 700;
}

.dashboard-today-item small {
    display: block;
    color: #6b6b6b;
    margin-top: 4px;
}  

/* ======================
   PREMIUM UI BASE
====================== */
/* Containers */
.soft-container {
    background: #ffffff;
    border-radius: 28px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(139, 94, 102, 0.08);
}

/* Seções */
.section-spacing {
    margin-bottom: 64px;
}

/* Títulos principais */
h1, h2, h3, .hero-title, .section-title {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.5px;
}

/* Subtítulos */
.hero-subtitle {
    font-family: 'Inter', sans-serif;
}

/* Assinatura / destaque */
.signature-font {
    font-family: 'Allura', cursive;
    font-size: 1.8rem;
    color: var(--primary-dark);
}

.navbar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #f1d5db;
}

.nav-link {
    font-weight: 500;
    color: #2B2B2B;
}

.nav-link:hover {
    color: #8B5E66;
}

/* Public homepage styles */

.hero-section {
    background: linear-gradient(135deg,#FFF7F9 0%,#F7E6EA 50%,#F2D6DC 100%);
    border-radius: 32px;
    padding: 72px 32px;
}

.hero-badge {
    display: inline-block;
    background-color: var(--white);
    color: var(--primary-dark);
    border: 1px solid var(--primary);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.hero-title {
    font-size: clamp(2.4rem, 5vw, 3.5rem);
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-dark);
}

.hero-subtitle {
    font-size: 1.1rem;
    color: #6b7280;
    max-width: 720px;
    margin: 0 auto;
}

.gold-accent {
    color: #C9A96A;
}

.gold-divider {
    width: 60px;
    height: 2px;
    background: #C9A96A;
    margin: 12px 0;
}

.hero-section {
    background: linear-gradient(
        135deg,
        #FFF7F9 0%,
        #F7E6EA 100%
    );
    border-radius: 32px;
    padding: 80px 32px;
    box-shadow: 0 12px 40px rgba(139, 94, 102, 0.08);
}

.section-title {
    color: var(--text-dark);
    position: relative;
    font-size: 1.8rem;
    font-weight: 600;
}

.section-title::after {
    content: "";
    width: 40px;
    height: 2px;
    background: var(--gold);
    display: block;
    margin-top: 8px;
}

.premium-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 28px;
    border: 1px solid #f1d5db;
    box-shadow: 0 12px 30px rgba(139, 94, 102, 0.08);
    transition: all 0.25s ease;
}

.premium-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(139, 94, 102, 0.12);
}

.public-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-light);
    color: var(--primary-dark);
    font-size: 1.5rem;
    font-weight: 700;
}

.section-title {
    color: #111827;
    font-weight: 700;
}

.soft-panel {
    background-color: #ffffff;
    border-radius: 28px;
    box-shadow: 0 12px 32px rgba(31, 41, 55, 0.06);
}

/* Logo styles */

/* ======================
   LOGO HEADER
====================== */


.home-logo {
    max-width: 360px;
    width: 100%;
    height: auto;
    border-radius: 28px;
    box-shadow: 0 16px 40px rgba(120, 72, 72, 0.16);
}

.navbar-brand img {
    border-radius: 10px;
}

/* Floating WhatsApp button */

/* Os dois atalhos, lado a lado no canto inferior direito. */
.floating-actions {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Só o ícone, do mesmo tamanho do botão do WhatsApp ao lado: dois círculos
   iguais lêem-se como um par, e a etiqueta em texto desequilibrava-os. */
.floating-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #a9707b, #8b5e66);
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(139, 94, 102, 0.34);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-book:hover {
    color: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(139, 94, 102, 0.42);
}

.floating-book i {
    font-size: 1.6rem;
}

/* A barra do telemóvel: só aparece em ecrã estreito, e aí é ela que manda —
   os botões flutuantes tapariam conteúdo num ecrã pequeno. */
.mobile-action-bar {
    display: none;
}

@media (max-width: 768px) {
    .floating-actions {
        display: none;
    }

    .mobile-action-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #ffffff;
        border-top: 1px solid #f1d5db;
        box-shadow: 0 -6px 22px rgba(139, 94, 102, 0.12);
        /* Nos telemóveis com barra de gestos, o rodapé do sistema fica por
           cima do que estiver colado ao fundo. */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .mobile-action {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 15px 10px;
        font-size: 0.97rem;
        font-weight: 700;
        text-decoration: none;
    }

    .mobile-action i {
        font-size: 1.1rem;
    }

    .mobile-action-book {
        background: linear-gradient(135deg, #a9707b, #8b5e66);
        color: #ffffff;
    }

    .mobile-action-whatsapp {
        background: #25d366;
        color: #ffffff;
    }

    /* A barra tapa o fim da página. Sem esta folga, as últimas linhas do
       rodapé ficavam permanentemente debaixo dela. */
    body {
        padding-bottom: 62px;
    }
}

.whatsapp-floating-button {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #25d366;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-floating-button:hover {
    color: #ffffff;
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 16px 36px rgba(37, 211, 102, 0.45);
}

@media (max-width: 576px) {
    .whatsapp-floating-button {
        right: 18px;
        bottom: 18px;
        width: 56px;
        height: 56px;
    }
}

/* Public visual schedule */

.public-agenda-hero {
    background: linear-gradient(135deg, #fff7fb 0%, #f8e7ef 45%, #f3e8ff 100%);
    border-radius: 32px;
    padding: 48px 24px;
    box-shadow: 0 12px 32px rgba(120, 72, 72, 0.08);
}

.public-slot-card {
    border: 1px solid #f1d5db;
    border-radius: 20px;
    background: #ffffff;
    transition: all 0.25s ease;
}

.public-slot-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 35px rgba(139, 94, 102, 0.12);
}

.public-slot-time {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: #8B5E66;
}

.public-slot-status {
    margin-top: 8px;
    color: #198754;
    font-size: 0.9rem;
    font-weight: 600;
}

.public-slot-action {
    margin-top: 12px;
    background: linear-gradient(135deg, #d8a7b1 0%, #8b5e66 100%);
    color: #ffffff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 700;
}

.public-empty-state {
    background: #fff7fb;
    border: 1px dashed #d8a7b1;
    border-radius: 28px;
}

@media (max-width: 576px) {
    .public-agenda-hero {
        padding: 36px 18px;
        border-radius: 24px;
    }

    .public-slot-card {
        padding: 16px 10px;
        border-radius: 18px;
    }

    .public-slot-time {
        font-size: 1.25rem;
    }
}

.btn-primary {
    background: linear-gradient(135deg, #D8A7B1, #8B5E66);
    border: none;
    border-radius: 999px;
    padding: 12px 28px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(139, 94, 102, 0.25);
}

.btn-outline-secondary {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.btn-outline-secondary:hover {
    background-color: var(--primary);
    color: #fff;
}

/* ======================
   LUXURY HOME REDESIGN
====================== */

.luxury-hero {
    background:
        radial-gradient(circle at top right, rgba(201, 169, 106, 0.16), transparent 34%),
        linear-gradient(135deg, #fff7f9 0%, #f7e6ea 52%, #ffffff 100%);
    border: 1px solid #f1d5db;
    border-radius: 36px;
    padding: 72px 48px;
    box-shadow: 0 24px 60px rgba(139, 94, 102, 0.12);
}

.luxury-eyebrow {
    display: inline-block;
    color: #8b5e66;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.coming-soon-badge {
    display: inline-block;
    background: var(--gold);
    color: #2b2b2b;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
    vertical-align: middle;
}

.luxury-title {
    font-family: 'Playfair Display', serif;
    color: #2b2b2b;
    font-size: clamp(2.1rem, 5vw, 4.1rem);
    line-height: 1.05;
    font-weight: 600;
}

.luxury-subtitle {
    color: #6b6b6b;
    font-size: 1.08rem;
    line-height: 1.8;
    max-width: 580px;
}

.signature-font {
    font-family: 'Allura', cursive;
    color: #8b5e66;
    font-size: 1.35em;
    font-weight: 400;
}

.luxury-logo-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #f1d5db;
    border-radius: 32px;
    padding: 36px;
    box-shadow: 0 18px 48px rgba(139, 94, 102, 0.12);
}

.luxury-logo {
    width: 100%;
    max-width: 520px;
    height: auto;
}

.luxury-card {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 28px;
    padding: 32px;
    box-shadow: 0 14px 36px rgba(139, 94, 102, 0.08);
    transition: all 0.25s ease;
}

.luxury-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(139, 94, 102, 0.14);
}

.luxury-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f7e6ea;
    color: #8b5e66;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    margin-bottom: 22px;
}

.luxury-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    color: #2b2b2b;
    margin-bottom: 12px;
}

.luxury-card p {
    color: #6b6b6b;
    line-height: 1.7;
}

.luxury-link {
    color: #8b5e66;
    font-weight: 600;
    text-decoration: none;
}

.luxury-link:hover {
    color: #c9a96a;
}

.luxury-info-panel {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 32px;
    padding: 48px;
    box-shadow: 0 16px 42px rgba(139, 94, 102, 0.08);
}

.luxury-code-box {
    background: linear-gradient(135deg, #fff7f9, #f7e6ea);
    border: 1px solid #f1d5db;
    border-radius: 24px;
    padding: 28px;
    text-align: center;
}

.luxury-code-box span {
    display: block;
    color: #8b5e66;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.luxury-code-box strong {
    color: #2b2b2b;
    font-size: 2rem;
    letter-spacing: 0.08em;
}

.luxury-final-cta {
    background: #fff7f9;
    border-radius: 32px;
    padding: 56px 24px;
    border: 1px solid #f1d5db;
}

@media (max-width: 768px) {
    .luxury-hero {
        padding: 48px 24px;
        border-radius: 28px;
    }

    .luxury-logo-card {
        padding: 24px;
    }

    .luxury-info-panel {
        padding: 32px 24px;
    }
}

/* ======================
   APP STYLE AGENDA
====================== */

.app-agenda-page {
    max-width: 1180px;
    margin: 0 auto;
}

.app-agenda-header {
    text-align: center;
}

.app-agenda-header h1 {
    font-family: 'Playfair Display', serif;
    color: #2b2b2b;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 600;
    margin: 8px 0 12px;
}

.app-agenda-header p {
    color: #6b6b6b;
    max-width: 680px;
    margin: 0 auto;
    font-size: 1.05rem;
}

.app-agenda-shell {
    display: grid;
    grid-template-columns: 360px 1fr;
    grid-template-areas: "feed results";
    gap: 28px;
    align-items: start;
}

.app-agenda-feed {
    grid-area: feed;
}

.app-agenda-results {
    grid-area: results;
}

/* Uma célula de grelha com `min-width: auto` nunca fica mais estreita do que
   aquilo que tem dentro. A faixa de dias tem lá dentro a janela de marcação
   inteira — um mês de cartões, que só se veem a rolar —, e sem isto a célula
   estica até caberem todos e leva a página atrás dela, para fora do ecrã.

   Vale para as duas células: qualquer uma pode vir a ter conteúdo largo. */
.app-agenda-feed,
.app-agenda-results {
    min-width: 0;
}

.app-agenda-results {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 32px;
    box-shadow: 0 18px 48px rgba(139, 94, 102, 0.08);
}

.app-agenda-results {
    padding: 32px;
}

.app-results-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.app-results-top h2 {
    font-family: 'Playfair Display', serif;
    color: #2b2b2b;
    font-size: 2rem;
    font-weight: 600;
    margin: 6px 0 0;
}

.app-duration-pill {
    background: #f7e6ea;
    color: #8b5e66;
    border: 1px solid #f1d5db;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 700;
    white-space: nowrap;
}

.app-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

/* Um horário é só a hora: sem rótulo de estado nem botão, o que era uma
   coluna de três peças passa a um quadrado com um número ao centro. */
.app-slot-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    background: #fff7f9;
    border: 1px solid #f1d5db;
    border-radius: 24px;
    padding: 20px;
    text-decoration: none;
    color: #2b2b2b;
    transition: all 0.22s ease;
}

/* Num ecrã tátil o :hover fica agarrado depois do toque: o cartão levantava-se
   e assim ficava. Só se aplica onde existe mesmo um ponteiro. */
@media (hover: hover) {
    .app-slot-card:hover {
        background: #ffffff;
        border-color: #d8a7b1;
        transform: translateY(-5px);
        box-shadow: 0 16px 36px rgba(139, 94, 102, 0.14);
    }
}

.app-slot-time {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #8b5e66;
}



.app-empty-state {
    background: #fff7f9;
    border: 1px dashed #d8a7b1;
    border-radius: 28px;
    padding: 56px 24px;
    text-align: center;
}

.app-empty-icon {
    font-size: 2.4rem;
    margin-bottom: 12px;
}

.app-empty-state h3 {
    font-family: 'Playfair Display', serif;
    color: #2b2b2b;
    font-size: 1.5rem;
}

.app-empty-state p {
    color: #6b6b6b;
    margin-bottom: 0;
}


/* ======================
   PREMIUM FORMS
====================== */

.card form {
    text-align: left;
}

.form-label {
    color: #2b2b2b;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 8px;
}

.form-control,
.form-select,
textarea.form-control {
    border: 1px solid #f1d5db;
    border-radius: 18px;
    background-color: #fffafa;
    color: #2b2b2b;
    padding: 14px 16px;
    font-size: 0.98rem;
    transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: #d8a7b1;
    background-color: #ffffff;
    box-shadow: 0 0 0 0.22rem rgba(216, 167, 177, 0.18);
}

.form-control::placeholder {
    color: #b89ca2;
}

.form-text {
    color: #8b5e66;
    font-size: 0.85rem;
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.form-check-input {
    border-color: #d8a7b1;
}

.form-check-input:checked {
    background-color: #8b5e66;
    border-color: #8b5e66;
}

.invalid-feedback,
.text-danger,
.errorlist {
    color: #b4233c !important;
    font-size: 0.88rem;
    margin-top: 6px;
}

.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #d96b7c;
    background-image: none;
}

.card.shadow-sm.border-0 {
    border: 1px solid #f1d5db !important;
    border-radius: 30px;
    box-shadow: 0 18px 48px rgba(139, 94, 102, 0.08) !important;
}

.card-body {
    border-radius: 30px;
}

.card-body h1,
.card-body h2 {
    font-family: 'Playfair Display', serif;
    color: #2b2b2b;
    font-weight: 600;
}

.card-body > p.text-muted {
    color: #6b6b6b !important;
}

form .btn {
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 600;
}

.btn-outline-secondary {
    border-color: #d8a7b1;
    color: #8b5e66;
}

.btn-outline-secondary:hover {
    background-color: #8b5e66;
    border-color: #8b5e66;
    color: #ffffff;
}

.alert-info {
    background: #fff7f9;
    border-color: #f1d5db;
    color: #8b5e66;
    border-radius: 18px;
}

.alert-warning {
    background: #fff8e7;
    border-color: #ead7a3;
    color: #8a6a22;
    border-radius: 18px;
}

.premium-form-card {
    background:
        radial-gradient(circle at top right, rgba(201, 169, 106, 0.12), transparent 32%),
        #ffffff;
}

.premium-form-card .card-body {
    padding: 40px !important;
}

@media (max-width: 576px) {
    .premium-form-card .card-body {
        padding: 28px 22px !important;
    }
}

.booking-summary {
    background: linear-gradient(135deg, #fff7f9, #f7e6ea);
    border: 1px solid #f1d5db;
    border-radius: 24px;
    padding: 20px;
}

.booking-summary span {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #8b5e66;
    font-weight: 700;
    margin-bottom: 10px;
}

.booking-summary-content {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.booking-summary-content strong {
    font-size: 0.8rem;
    color: #6b6b6b;
}

.booking-summary-content p {
    margin: 0;
    font-weight: 600;
    color: #2b2b2b;
}

.success-box {
    padding: 40px;
}

.success-code {
    background: #2b2b2b;
    color: #fff;
    font-size: 1.6rem;
    padding: 16px;
    border-radius: 16px;
    letter-spacing: 2px;
    font-weight: 700;
}

.app-slot-card:active {
    transform: scale(0.96);
}

.success-reference-code {
    background: #2b2b2b;
    color: #ffffff;
    border-radius: 18px;
    padding: 18px 20px;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

/* ======================
   INTERNAL APP CALENDAR
====================== */

.internal-calendar-page {
    max-width: 1180px;
    margin: 0 auto;
}

.internal-calendar-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
}

.internal-calendar-header h1 {
    font-family: 'Playfair Display', serif;
    color: #2b2b2b;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    margin: 6px 0;
}

.internal-calendar-header p {
    color: #6b6b6b;
    margin: 0;
}

.internal-calendar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.internal-calendar-filter,
.internal-business-hour,
.internal-calendar-board {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 28px;
    box-shadow: 0 16px 42px rgba(139, 94, 102, 0.08);
}

.internal-calendar-filter {
    padding: 24px;
}

.internal-business-hour {
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.internal-business-hour span {
    color: #8b5e66;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.internal-business-hour strong {
    color: #2b2b2b;
}

.internal-calendar-board {
    overflow: hidden;
}

.internal-slot-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    min-height: 72px;
    border-bottom: 1px solid #f5e3e7;
    background: #ffffff;
}

.internal-slot-row:last-child {
    border-bottom: 0;
}

.internal-slot-row.is-muted {
    background: #fffafa;
}

.internal-slot-row.is-blocked {
    background: #fff8e7;
}

.internal-slot-time {
    border-right: 1px solid #f5e3e7;
    padding: 18px 16px;
    color: #8b5e66;
    font-weight: 800;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
}

.internal-slot-content {
    padding: 12px 16px;
}

.internal-slot-muted-text {
    color: #a0898f;
    font-size: 0.9rem;
}

.calendar-empty-slot {
    min-height: 48px;
    border: 1px dashed #d8a7b1;
    border-radius: 18px;
    background: #fff7f9;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.calendar-empty-slot span {
    color: #6b6b6b;
    font-weight: 600;
}

.calendar-event {
    border-radius: 22px;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #f1d5db;
    border-left: 6px solid #d8a7b1;
    background: #fff7f9;
}

.calendar-event h2 {
    font-family: 'Playfair Display', serif;
    color: #2b2b2b;
    font-size: 1.35rem;
    font-weight: 600;
    margin: 4px 0 6px;
}

.calendar-event p {
    color: #6b6b6b;
    margin: 0;
}

.calendar-event small {
    display: block;
    margin-top: 8px;
    color: #6b6b6b;
}

.calendar-event-kicker {
    color: #8b5e66;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.calendar-event-side {
    min-width: 190px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.calendar-event-buttons {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.calendar-event-buttons form {
    display: inline;
}

.status-pill {
    background: #ffffff;
    border: 1px solid #f1d5db;
    color: #8b5e66;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 0.78rem;
    font-weight: 800;
}

.status-blocked {
    background: #fff8e7;
    border-color: #ead7a3;
    color: #8a6a22;
}

.calendar-event-scheduled {
    border-left-color: #8b5e66;
    background: #fff7f9;
}

.calendar-event-confirmed {
    border-left-color: #198754;
    background: #f1fbf5;
}

.calendar-event-completed {
    border-left-color: #2b2b2b;
    background: #f7f7f7;
}

.calendar-event-cancelled {
    border-left-color: #d96b7c;
    background: #fff1f3;
    opacity: 0.75;
}

.calendar-event-block {
    border-left-color: #c9a96a;
    background: #fff8e7;
}

@media (max-width: 992px) {
    .internal-calendar-header {
        flex-direction: column;
        align-items: stretch;
    }

    .internal-calendar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .internal-slot-row {
        grid-template-columns: 78px 1fr;
    }

    .internal-slot-time {
        font-size: 1rem;
        padding: 16px 10px;
    }

    .calendar-event {
        flex-direction: column;
    }

    .calendar-event-side {
        min-width: 0;
        align-items: flex-start;
    }

    .calendar-event-buttons {
        justify-content: flex-start;
    }

    .internal-calendar-actions .btn {
        width: 100%;
    }
}

/* ======================
   PUBLIC WEEK NAVIGATION
====================== */

/* A faixa e as duas setas numa linha só. A faixa é a única parte que encolhe:
   sem o `min-width: 0` o flex dá-lhe a largura de todos os dias juntos e a
   seta da direita sai do ecrã. */
.app-week-carousel {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.app-week-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #f1d5db;
    border-radius: 50%;
    background: #ffffff;
    color: #8b5e66;
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(139, 94, 102, 0.07);
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .app-week-arrow:not(:disabled):hover {
        border-color: #d8a7b1;
        background: #fff5f6;
    }
}

/* Desligada é o estado normal nas pontas — hoje à esquerda, o fim do horizonte
   à direita — e não um erro. Fica visível e apagada, para se perceber que o
   carrossel acabou e não que a seta desapareceu. */
.app-week-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

.app-week-strip {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
    overflow-x: auto;
    padding: 6px 2px 12px;
    scroll-snap-type: x mandatory;
}

.app-week-strip::-webkit-scrollbar {
    height: 6px;
}

.app-week-strip::-webkit-scrollbar-thumb {
    background: #d8a7b1;
    border-radius: 999px;
}

.app-week-day {
    flex: 0 0 auto;
    min-width: 92px;
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 22px;
    padding: 14px 12px;
    text-align: center;
    text-decoration: none;
    color: #2b2b2b;
    box-shadow: 0 10px 28px rgba(139, 94, 102, 0.07);
    scroll-snap-align: start;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .app-week-day:hover {
        transform: translateY(-3px);
        border-color: #d8a7b1;
        color: #2b2b2b;
    }
}

.app-week-day span {
    display: block;
    color: #8b5e66;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.app-week-day strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.7rem;
    line-height: 1;
    margin: 6px 0 4px;
}

.app-week-day small {
    color: #6b6b6b;
    font-weight: 600;
    text-transform: uppercase;
}

.app-week-day.is-active {
    background: linear-gradient(135deg, #d8a7b1, #8b5e66);
    border-color: #8b5e66;
    color: #ffffff;
}

.app-week-day.is-active span,
.app-week-day.is-active small {
    color: #ffffff;
}

/* ======================
   ONE PAGE PUBLIC SITE
====================== */

html {
    scroll-behavior: smooth;
}

.one-page-section {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 32px;
    padding: 56px 40px;
    box-shadow: 0 16px 42px rgba(139, 94, 102, 0.08);
}


@media (max-width: 768px) {
    .one-page-section {
        padding: 36px 24px;
        border-radius: 26px;
    }
}

/* ======================
   STICKY PREMIUM NAVBAR
====================== */

/* ======================
   BARRA DE NAVEGAÇÃO PÚBLICA

   Um bloco só. A altura do logótipo estava definida em quatro sítios do
   ficheiro e os itens do menu em dois, com valores diferentes: ganhava o que
   estivesse mais abaixo, e mudar o de cima não fazia nada. Tudo o que diz
   respeito a esta barra vive aqui.
====================== */

.public-navbar {
    position: sticky;
    top: 0;
    z-index: 1040;
    padding-block: 12px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid #f4e3e7;
    box-shadow: 0 4px 18px rgba(139, 94, 102, 0.05);
}

.public-navbar .container {
    gap: 16px;
}

.public-navbar .navbar-brand {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* O <picture> entraria na flexbox como um bloco de altura própria e
   desalinhava a imagem. */
.public-navbar .navbar-brand picture {
    display: flex;
    align-items: center;
}

/* O logótipo tem o monograma e o nome. O nome ocupa dois terços da largura
   e leva três linhas de texto lá dentro, portanto abaixo de meia centena de
   píxeis deixa de se ler. */
.site-logo {
    height: 60px;
    width: auto;
    transition: transform 0.25s ease;
}

.site-logo:hover {
    transform: scale(1.03);
}

/* Os itens ficam entre a marca e o canto direito, com o mesmo ar de
   pastilha do resto do site quando o rato passa por cima. */
.public-navbar .navbar-nav {
    align-items: center;
    gap: 2px;
    margin-inline: auto;
}

.public-navbar .nav-link {
    color: #4a3b38;
    font-size: 0.98rem;
    font-weight: 600;
    padding: 8px 13px;
    border-radius: 999px;
    /* "Antes e depois" partia-se em três linhas e desalinhava a barra
       inteira. Um item de menu nunca dobra. */
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease;
}

.public-navbar .nav-link:hover,
.public-navbar .nav-link:focus-visible {
    color: #8b5e66;
    background: #fdf4f6;
}

.public-navbar .nav-link.is-active {
    color: #8b5e66;
    background: #fbeef1;
}

/* A coluna da direita: bandeiras em cima, menu do cliente por baixo. */
.navbar-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.language-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* A bandeira em uso fica apagada e a outra viva. É o contrário do que se vê
   por aí, e é de propósito: a que está viva é a única em que faz sentido
   carregar, e é ela que tem de chamar. A que está apagada é o estado atual,
   não um botão. */
.language-flag {
    display: block;
    width: 26px;
    padding: 0;
    border: 1px solid #ead6da;
    border-radius: 4px;
    background: transparent;
    line-height: 0;
    overflow: hidden;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.language-flag svg {
    display: block;
    width: 100%;
    height: auto;
}

.language-flag:hover,
.language-flag:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(139, 94, 102, 0.18);
}

.language-flag.is-active,
.language-flag:disabled {
    opacity: 0.4;
    filter: saturate(0.55);
    cursor: default;
    transform: none;
    box-shadow: none;
}

.btn-client-area {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #a9707b, #8b5e66);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(139, 94, 102, 0.22);
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.btn-client-area:hover,
.btn-client-area:focus-visible {
    color: #ffffff;
    filter: brightness(1.07);
    box-shadow: 0 9px 20px rgba(139, 94, 102, 0.3);
}

.btn-client-area i {
    font-size: 0.95rem;
}

.btn-client-area.dropdown-toggle::after {
    margin-left: 2px;
}

/* O "Sair" é um <button> dentro de um <form>, para levar o CSRF. Sem isto
   ficava com a largura do texto e não da linha. */
.navbar-side-actions .dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

/* Menu recolhido: tudo passa a ocupar a linha toda. */
@media (max-width: 991px) {
    .public-navbar {
        padding-block: 8px;
    }

    .site-logo {
        height: 42px;
    }

    .public-navbar .navbar-nav {
        width: 100%;
        margin: 14px 0 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .public-navbar .nav-link {
        background: #fff7f9;
        border: 1px solid #f1d5db;
        padding: 8px 14px;
    }

    .navbar-side {
        align-items: stretch;
        width: 100%;
        margin-top: 14px;
    }

    .navbar-side .language-switcher {
        justify-content: center;
    }

    .btn-client-area {
        justify-content: center;
    }
}

section[id] {
    scroll-margin-top: 96px;
}

/* ======================
   TRUST STRIP
====================== */

/* `auto-fit` e não quatro colunas fixas: o cartão da nota só existe quando a
   Google responde, e com três cartões numa grelha de quatro ficava um vazio
   à direita. */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
}

.trust-item {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 24px;
    padding: 22px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(139, 94, 102, 0.07);
}

.trust-item strong {
    display: block;
    color: #2b2b2b;
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    margin-bottom: 6px;
}

.trust-item span {
    color: #6b6b6b;
    font-size: 0.95rem;
}

/* O cartão da nota é uma ligação para o perfil na Google — os termos deles
   exigem que a nota leve à origem. */
.trust-item-rating {
    display: block;
    text-decoration: none;
    background: linear-gradient(135deg, #fffdf7, #fff7f9);
    border-color: #f0dcc8;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trust-item-rating:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(139, 94, 102, 0.12);
}

.trust-stars {
    display: block;
    color: #e0a63c;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

@media (max-width: 992px) {
    .trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .trust-strip {
        grid-template-columns: 1fr;
    }
}

/* ======================
   MOBILE NAVBAR
====================== */

.mobile-menu-button {
    border: 1px solid #f1d5db;
    border-radius: 14px;
    padding: 8px 10px;
    background: #fff7f9;
}

.mobile-menu-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(216, 167, 177, 0.2);
}

@media (max-width: 991px) {
    .public-navbar .navbar-collapse {
        background: #ffffff;
        border: 1px solid #f1d5db;
        border-radius: 24px;
        margin-top: 16px;
        padding: 18px;
        box-shadow: 0 18px 42px rgba(139, 94, 102, 0.12);
    }

    .public-navbar .navbar-nav {
        gap: 8px;
    }

}

/* ======================
   PREMIUM FOOTER
====================== */

.site-footer {
    background: linear-gradient(135deg, #ffffff 0%, #fff7f9 100%);
    border-top: 1px solid #f1d5db;
    padding: 56px 0 28px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.4fr;
    gap: 32px;
    align-items: stretch;
}

.footer-brand-panel,
.footer-info-panel {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 30px;
    padding: 32px;
    box-shadow: 0 16px 42px rgba(139, 94, 102, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.footer-brand-panel:hover,
.footer-info-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(139, 94, 102, 0.12);
}

/* ======================
   LOGO FOOTER
====================== */

.footer-brand-panel img {
    height: 120px;
    width: auto;
    margin-bottom: 18px;
    transition: transform 0.25s ease;
}

.footer-brand-panel img:hover {
    transform: scale(1.05);
}

/* mobile */
@media (max-width: 768px) {
    .footer-brand-panel img {
        height: 64px;
    }
}

.footer-brand-panel p,
.footer-info-panel p,
.footer-hours p {
    color: #6b6b6b;
    margin-bottom: 8px;
    line-height: 1.7;
}

.footer-hours {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #f1d5db;
}

.footer-hours h4,
.footer-info-panel h4 {
    font-family: 'Playfair Display', serif;
    color: #2b2b2b;
    font-size: 1.35rem;
    margin-bottom: 14px;
}

.footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.footer-info-panel a:not(.btn) {
    display: block;
    color: #6b6b6b;
    text-decoration: none;
    margin-bottom: 9px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-info-panel a:not(.btn):hover {
    color: #8b5e66;
    transform: translateX(4px);
}

.footer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.footer-map {
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid #f1d5db;
    min-height: 220px;
}

.footer-map iframe {
    width: 100%;
    height: 240px;
    border: 0;
    display: block;
    filter: saturate(0.85) contrast(0.95);
}

.footer-bottom {
    margin-top: 28px;
    text-align: center;
    color: #8b5e66;
    font-size: 0.9rem;
}

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .site-footer {
        padding-top: 40px;
    }

    .footer-brand-panel,
    .footer-info-panel {
        padding: 24px;
        border-radius: 24px;
    }

    .footer-columns {
        grid-template-columns: 1fr;
    }

    .footer-actions .btn {
        width: 100%;
    }
}

html {
    scroll-behavior: smooth;
}

section[id],
footer[id] {
    scroll-margin-top: 110px;
}


/* ======================
   STICKY FOOTER LAYOUT
====================== */

.app-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-main {
    flex: 1;
}

/* ======================
   INTERNAL SYSTEM LAYOUT
====================== */

.internal-layout {
    background: #f7f4f5;
}

.internal-layout .public-navbar {
    background: #ffffff;
    border-bottom: 1px solid #ead7dc;
    box-shadow: 0 6px 24px rgba(43, 43, 43, 0.06);
}

.internal-layout .app-main {
    padding-inline: 32px;
}

.internal-layout .card {
    border: 1px solid #ead7dc !important;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(43, 43, 43, 0.06) !important;
}

.internal-layout .card-body h1,
.internal-layout .card-body h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.internal-layout .navbar-nav .nav-link {
    font-size: 0.92rem;
    font-weight: 600;
}

.internal-layout .navbar-nav .nav-link:hover {
    color: #8b5e66;
    background: #fff7f9;
    border-radius: 999px;
}

@media (max-width: 768px) {
    .internal-layout .app-main {
        padding-inline: 16px;
    }
}

/* ======================
   INTERNAL DASHBOARD
====================== */

.internal-dashboard {
    max-width: 1280px;
    margin: 0 auto;
}

.dashboard-hero {
    background: #ffffff;
    border: 1px solid #ead7dc;
    border-radius: 28px;
    padding: 32px;
    box-shadow: 0 12px 32px rgba(43, 43, 43, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.dashboard-hero h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    color: #2b2b2b;
    margin: 6px 0;
}

.dashboard-hero p {
    color: #6b6b6b;
    margin: 0;
}

.dashboard-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-action-card {
    display: block;
    height: 100%;
    background: #ffffff;
    border: 1px solid #ead7dc;
    border-radius: 24px;
    padding: 24px;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(43, 43, 43, 0.05);
    transition: all 0.22s ease;
}

.dashboard-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(43, 43, 43, 0.09);
}

.dashboard-action-card span {
    display: block;
    color: #8b5e66;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.dashboard-action-card strong {
    display: block;
    color: #2b2b2b;
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.dashboard-action-card small {
    color: #6b6b6b;
    line-height: 1.5;
}

.dashboard-panel {
    background: #ffffff;
    border: 1px solid #ead7dc;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 12px 32px rgba(43, 43, 43, 0.06);
}

.dashboard-panel-header h2 {
    font-family: 'Inter', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #2b2b2b;
    margin: 6px 0 22px;
}

.dashboard-flow {
    display: grid;
    gap: 16px;
}

.dashboard-flow div {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 4px 14px;
    align-items: start;
    background: #faf7f8;
    border: 1px solid #ead7dc;
    border-radius: 18px;
    padding: 16px;
}

.dashboard-flow strong {
    grid-row: span 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f7e6ea;
    color: #8b5e66;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-flow span {
    color: #2b2b2b;
    font-weight: 800;
}

.dashboard-flow p {
    color: #6b6b6b;
    margin: 0;
}

.dashboard-quick-links {
    display: grid;
    gap: 12px;
}

.dashboard-quick-links a {
    background: #faf7f8;
    border: 1px solid #ead7dc;
    border-radius: 16px;
    padding: 14px 16px;
    color: #2b2b2b;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s ease;
}

.dashboard-quick-links a:hover {
    background: #f7e6ea;
    color: #8b5e66;
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .dashboard-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-hero-actions .btn {
        width: 100%;
    }
}

.premium-modal {
    border: 1px solid #f1d5db;
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(139, 94, 102, 0.18);
}

.appointment-card {
    border: 1px solid #f1d5db;
    border-radius: 18px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff7f9;
}

.appointment-main strong {
    display: block;
    color: #2b2b2b;
}

.appointment-main p {
    margin: 4px 0;
    color: #6b6b6b;
}

.status-pill {
    font-size: 0.8rem;
    font-weight: 600;
    color: #8b5e66;
}

/* ======================
   CUSTOMER APPOINTMENT DETAIL
====================== */

.appointment-detail-card {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 32px;
    padding: 36px;
    box-shadow: 0 18px 48px rgba(139, 94, 102, 0.1);
}

.appointment-detail-header {
    text-align: center;
    margin-bottom: 28px;
}

.appointment-detail-header h1 {
    font-family: 'Playfair Display', serif;
    color: #2b2b2b;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 8px 0 14px;
}

.appointment-detail-status {
    display: inline-block;
    background: #f7e6ea;
    color: #8b5e66;
    border: 1px solid #f1d5db;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 700;
}

.appointment-detail-code {
    background: #2b2b2b;
    color: #ffffff;
    border-radius: 24px;
    padding: 22px;
    text-align: center;
    margin-bottom: 24px;
}

.appointment-detail-code span {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.75;
    margin-bottom: 6px;
}

.appointment-detail-code strong {
    font-size: 1.6rem;
    letter-spacing: 0.12em;
}

.appointment-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.appointment-detail-grid div,
.appointment-detail-notes {
    background: #fff7f9;
    border: 1px solid #f1d5db;
    border-radius: 20px;
    padding: 18px;
}

.appointment-detail-grid span,
.appointment-detail-notes span {
    display: block;
    color: #8b5e66;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.appointment-detail-grid strong {
    color: #2b2b2b;
    font-size: 1.05rem;
}

.appointment-detail-notes {
    margin-top: 14px;
}

.appointment-detail-notes p {
    color: #6b6b6b;
    margin: 0;
}

.appointment-detail-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

@media (max-width: 576px) {
    .appointment-detail-card {
        padding: 24px;
        border-radius: 26px;
    }

    .appointment-detail-grid {
        grid-template-columns: 1fr;
    }

    .appointment-detail-actions .btn {
        width: 100%;
    }
}                                                                             

/* ======================
   FIX AJAX FOOTER JUMP
====================== */

/* ======================
   AJAX SCHEDULE NO FLICKER
====================== */

#agenda-slots-container {
    position: relative;
}

/* Alturas mínimas só onde servem para alguma coisa. No telemóvel, reservar
   620px para oito horários deixava um retângulo branco enorme por baixo. */
@media (min-width: 993px) {
    .app-agenda-results {
        min-height: 620px;
    }

    #agenda-slots-container {
        min-height: 420px;
    }
}

#agenda-slots-container.is-loading::after {
    content: "A carregar horários...";
    position: absolute;
    inset: 0;
    background: rgba(255, 247, 249, 0.72);
    backdrop-filter: blur(2px);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b5e66;
    font-weight: 700;
    z-index: 5;
}

.btn i {
    font-size: 16px;
    line-height: 1;
}

.email-preview-html-body {
        background: #ffffff;
        padding: 0;
        overflow: hidden;
    }

/* ======================
   HOME HERO LAYOUT OPTIONS
====================== */

.luxury-hero-logo-top {
    text-align: center;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.luxury-hero-logo-top-content {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.luxury-logo-transparent {
    /* Sem isto a imagem é inline e o sobretítulo, que também é inline,
       encosta-se-lhe ao lado quando o texto é curto o bastante para caber —
       era o que acontecia em inglês, onde "PODIATRY • BEAUTY • NURSING" é
       mais curto do que a versão portuguesa e deixava de mudar de linha. */
    display: block;
    width: min(100%, 560px);
    max-width: 560px;
    height: auto;
    filter: drop-shadow(0 18px 28px rgba(139, 94, 102, 0.14));
}

.luxury-hero-logo-top .luxury-title {
    max-width: 780px;
}

.luxury-hero-logo-top .luxury-subtitle {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.luxury-hero-actions {
    justify-content: center;
}

@media (max-width: 768px) {
    .luxury-logo-transparent {
        max-width: 340px;
    }

    .luxury-hero-logo-top {
        padding: 44px 22px;
    }
}

/* ======================
   HERO COM FOTO + PARALLAX
====================== */

.luxury-hero-photo {
    position: relative;
    /* full-bleed: quebra o container e ocupa toda a largura da viewport */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* sobe o banner para encostar na navbar (cancela o padding-top do <main>) */
    margin-top: -4rem;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 100vh, 1000px);
    overflow: hidden;
    /* parallax: o fundo fica fixo enquanto a página rola */
    background-image: var(--hero-bg);
    background-repeat: no-repeat;
    /* `auto 100%` e não `cover`: com `cover`, uma fotografia de retrato num
       ecrã largo é ampliada até encher a largura, e o rosto fica com o dobro
       da altura do texto ao lado. Assim ela fica à altura da secção, no
       tamanho que tem, encostada à direita — e o texto ocupa a esquerda em
       vez de se sobrepor a uma cara ampliada. */
    background-size: auto 100%;
    background-position: right center;
    background-attachment: fixed;
    /* o que fica à esquerda da fotografia */
    background-color: #fdf1f3;
}

/* véu claro à esquerda para o texto ficar legível,
   esfumaçando a foto para a esquerda e deixando o rosto visível à direita */
.luxury-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(255, 247, 249, 0.92) 0%,
        rgba(255, 247, 249, 0.7) 34%,
        rgba(255, 247, 249, 0.22) 56%,
        rgba(255, 247, 249, 0) 72%
    );
    pointer-events: none;
}

.luxury-hero-photo-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.luxury-hero-photo-content {
    max-width: 560px;
    text-align: left;
}

.luxury-hero-photo .luxury-logo-transparent {
    width: min(100%, 360px);
    max-width: 360px;
    filter: drop-shadow(0 18px 28px rgba(139, 94, 102, 0.14));
}

.luxury-hero-photo .luxury-subtitle {
    max-width: 520px;
}

.luxury-hero-photo .luxury-hero-actions {
    justify-content: flex-start;
}

/* mobile: `background-attachment: fixed` é instável no iOS/Android, e o
   `cover` do ecrã grande não serve aqui — num ecrã estreito a fotografia é
   mais alta que a secção e o cartão do texto tapava-lhe a cara. Aqui a
   fotografia manda na altura e o cartão vem a seguir ao rosto. */
@media (max-width: 768px) {
    .luxury-hero-photo {
        margin-top: -3rem;
        min-height: auto;
        background-attachment: scroll;
        /* A fotografia à largura toda em vez de `cover`: assim a altura dela
           é previsível — 1,5 × a largura do ecrã, que é a proporção do
           ficheiro — e dá para colocar o cartão a seguir ao rosto em vez de
           por cima dele. Com `cover` a altura dependia da do cartão, e a
           profissional ficava no que sobrasse. */
        background-size: 100% auto;
        background-position: center top;
        background-repeat: no-repeat;
        /* onde a fotografia acaba, abaixo do cartão */
        background-color: #fff7f9;
    }

    .luxury-hero-photo-inner {
        /* Contas sobre a fotografia, em unidades de largura do ecrã. A
           fotografia tem 1,5 × a largura do ecrã de altura; nela, o queixo
           fica a 50% e os ombros a 58% — ou seja, a 75vw e a 87vw. O cartão
           começa depois do queixo, com folga.

           Este número depende da fotografia: trocá-la obriga a medir outra
           vez onde cai o queixo, senão o cartão corta-lhe a cara. */
        padding: 78vw 20px 28px;
    }

    /* Cartão próprio atrás do texto: assim o véu geral pode ficar bem
       mais leve sem comprometer a leitura, revelando o rosto na foto. */
    .luxury-hero-photo-content {
        background: rgba(255, 247, 249, 0.88);
        border-radius: 24px;
        padding: 18px 16px;
    }

    .luxury-hero-photo::before {
        background: linear-gradient(
            180deg,
            rgba(255, 247, 249, 0.34) 0%,
            rgba(255, 247, 249, 0.16) 22%,
            rgba(255, 247, 249, 0) 42%
        );
    }

    /* Daqui para baixo, o cartão encolhe. A fotografia ocupa 72vw antes de
       ele começar, e sem isto os botões caíam abaixo do primeiro ecrã: só o
       rosto dela obriga a 64vw, e o cartão no tamanho de origem não cabe no
       que sobra. Nada sai — muda o tamanho, não o conteúdo. */
    .luxury-hero-photo .luxury-logo-transparent {
        max-width: 170px;
    }

    .luxury-hero-photo .luxury-title {
        font-size: clamp(1.6rem, 6.4vw, 2rem);
    }

    .luxury-hero-photo .luxury-subtitle {
        font-size: 0.94rem;
        line-height: 1.55;
    }

    /* Lado a lado, a dividir a largura em partes iguais. O `px-5` e o
       `btn-lg` do HTML são para ecrã grande e aqui não caberiam. */
    .luxury-hero-photo .luxury-hero-actions .btn {
        flex: 1 1 0;
        font-size: 0.95rem;
    }
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    .luxury-hero-photo {
        background-attachment: scroll;
    }
}

/* ======================
   SERVICE LIST VISUAL UPGRADE
====================== */

.service-feed-page {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.service-feed-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: stretch;
    background: linear-gradient(135deg, #fff7f9 0%, #ffffff 56%, #f7e6ea 100%);
    border: 1px solid #f1d5db;
    border-radius: 36px;
    padding: clamp(28px, 4vw, 48px);
    box-shadow: 0 24px 60px rgba(139, 94, 102, 0.10);
}

.service-feed-lead {
    color: #6b6b6b;
    max-width: 760px;
    font-size: 1.08rem;
    line-height: 1.75;
}

.service-feed-hero-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #f1d5db;
    border-radius: 28px;
    padding: 26px;
}

.service-feed-hero-card i {
    color: #8b5e66;
    font-size: 2rem;
}

.service-feed-hero-card strong {
    color: #2b2b2b;
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
}

.service-feed-hero-card span {
    color: #6b6b6b;
    line-height: 1.6;
}

.service-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.service-category-card {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 32px;
    padding: 28px;
    box-shadow: 0 18px 48px rgba(139, 94, 102, 0.08);
}

.service-category-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.service-category-icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #f7e6ea, #fff7f9);
    color: #8b5e66;
    font-size: 1.45rem;
    flex-shrink: 0;
}

.service-category-card h2 {
    color: #2b2b2b;
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    margin: 4px 0 0;
}

.service-category-description {
    color: #6b6b6b;
    line-height: 1.7;
    margin-bottom: 22px;
}

.service-card-list {
    display: grid;
    gap: 14px;
}

.service-public-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "main meta"
        "cta cta";
    gap: 14px 18px;
    background: #fff7f9;
    border: 1px solid #f1d5db;
    border-radius: 24px;
    padding: 20px;
    color: #2b2b2b;
    text-decoration: none;
    transition: all 0.22s ease;
}

.service-public-card:hover {
    background: #ffffff;
    border-color: #d8a7b1;
    box-shadow: 0 16px 36px rgba(139, 94, 102, 0.14);
    color: #2b2b2b;
    transform: translateY(-4px);
}

.service-public-card.is-coming-soon {
    opacity: 0.7;
}

.service-public-card.is-coming-soon:hover {
    background: #fff7f9;
    border-color: #f1d5db;
    box-shadow: none;
    transform: none;
}

.service-public-main {
    grid-area: main;
}

.service-public-main strong {
    display: block;
    font-size: 1.04rem;
    margin-bottom: 6px;
}

.service-public-main p {
    color: #6b6b6b;
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 0;
}

.service-public-meta {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.service-public-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 999px;
    color: #8b5e66;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 7px 11px;
    white-space: nowrap;
}

.service-public-cta {
    grid-area: cta;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid rgba(216, 167, 177, 0.35);
    color: #8b5e66;
    font-weight: 800;
    padding-top: 12px;
}

.service-public-empty {
    background: #fff7f9;
    border: 1px dashed #d8a7b1;
    border-radius: 18px;
    color: #6b6b6b;
    padding: 16px;
}

.service-feed-bottom-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #2b2b2b;
    border-radius: 32px;
    color: #ffffff;
    padding: 32px;
}

.service-feed-bottom-cta .luxury-eyebrow {
    color: #f7e6ea;
}

.service-feed-bottom-cta h2 {
    font-family: 'Playfair Display', serif;
    margin: 4px 0 8px;
}

.service-feed-bottom-cta p {
    color: rgba(255, 255, 255, 0.76);
    margin-bottom: 0;
}

.internal-services-page {
    max-width: 1180px;
    margin: 0 auto;
}

.internal-services-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.internal-services-header h1 {
    color: #2b2b2b;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 6px 0 10px;
}

.internal-services-header p {
    color: #6b6b6b;
    max-width: 760px;
    margin-bottom: 0;
}

.service-admin-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.service-admin-metric-card {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 12px 34px rgba(139, 94, 102, 0.08);
}

.service-admin-metric-card span {
    color: #8b5e66;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-admin-metric-card strong {
    display: block;
    color: #2b2b2b;
    font-family: 'Playfair Display', serif;
    font-size: 2.15rem;
    line-height: 1;
    margin: 10px 0 8px;
}

.service-admin-metric-card small {
    color: #6b6b6b;
}

.service-admin-metric-card.is-active {
    background: #f4fff8;
    border-color: #bfe8cb;
}

.service-admin-metric-card.is-muted {
    background: #f8f8f8;
    border-color: #e3e3e3;
}

.service-admin-category-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.service-admin-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff7f9;
    border: 1px solid #f1d5db;
    border-radius: 999px;
    padding: 10px 14px;
}

.service-admin-category-chip span {
    color: #2b2b2b;
    font-weight: 700;
}

.service-admin-category-chip strong {
    color: #8b5e66;
    font-size: 0.92rem;
}

.service-admin-groups {
    display: grid;
    gap: 28px;
}

.service-admin-group {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 32px;
    padding: 28px;
    box-shadow: 0 18px 48px rgba(139, 94, 102, 0.08);
}

.service-admin-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.service-admin-group-title h2 {
    color: #2b2b2b;
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    margin: 4px 0 0;
}

.service-admin-group-count {
    background: #f7e6ea;
    color: #8b5e66;
    border-radius: 999px;
    font-weight: 800;
    padding: 10px 14px;
    white-space: nowrap;
}

.service-admin-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.service-admin-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #fff7f9;
    border: 1px solid #f1d5db;
    border-radius: 26px;
    padding: 22px;
}

.service-admin-card.is-inactive {
    background: #f8f8f8;
    border-color: #e2e2e2;
    opacity: 0.82;
}

.service-admin-card-top,
.service-admin-card-meta,
.service-admin-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.service-admin-category-badge,
.service-admin-status,
.service-admin-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 7px 11px;
}

.service-admin-category-badge {
    background: #ffffff;
    color: #8b5e66;
    border: 1px solid #f1d5db;
}

.service-admin-status.is-active {
    background: #e8f7ee;
    color: #198754;
}

.service-admin-status.is-inactive {
    background: #eeeeee;
    color: #6c757d;
}

.service-admin-card-body {
    flex: 1;
    margin: 18px 0;
}

.service-admin-card-body h3 {
    color: #2b2b2b;
    font-family: 'Playfair Display', serif;
    font-size: 1.45rem;
    margin-bottom: 8px;
}

.service-admin-card-body p {
    color: #6b6b6b;
    line-height: 1.6;
    margin-bottom: 0;
}

.service-admin-card-meta {
    border-top: 1px solid rgba(216, 167, 177, 0.35);
    border-bottom: 1px solid rgba(216, 167, 177, 0.35);
    padding: 14px 0;
    margin-bottom: 16px;
}

.service-admin-card-meta span {
    background: #ffffff;
    color: #8b5e66;
    border: 1px solid #f1d5db;
}

.service-admin-card-actions {
    justify-content: flex-end;
}

/* ======================
   PUBLIC AGENDA BLOCKED DAY UPGRADE
====================== */

.app-agenda-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.app-agenda-results-header h2 {
    color: #2b2b2b;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin: 4px 0 0;
}

.availability-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    font-weight: 800;
    padding: 10px 14px;
    white-space: nowrap;
}

.availability-status-pill.status-available {
    background: #e8f7ee;
    color: #198754;
}

.availability-status-pill.status-no_slots {
    background: #fff3cd;
    color: #8a6d1d;
}

.availability-status-pill.status-full_day_blocked,
.availability-status-pill.status-closed {
    background: #f8d7da;
    color: #842029;
}

.app-week-day em {
    display: block;
    color: #842029;
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.04em;
    margin-top: 6px;
    text-transform: uppercase;
}

.app-week-day.is-fully-blocked {
    background: #fff5f6;
    border-color: #f0b6bd;
}

.app-week-day.is-fully-blocked strong {
    color: #842029;
}

.app-week-day.is-active.is-fully-blocked {
    background: linear-gradient(135deg, #c76d78, #842029);
    border-color: #842029;
    color: #ffffff;
}

.app-week-day.is-active.is-fully-blocked span,
.app-week-day.is-active.is-fully-blocked small,
.app-week-day.is-active.is-fully-blocked strong,
.app-week-day.is-active.is-fully-blocked em {
    color: #ffffff;
}

.app-full-blocked-state {
    background: linear-gradient(135deg, #fff5f6, #ffffff);
    border: 1px solid #f0b6bd;
    box-shadow: 0 18px 46px rgba(132, 32, 41, 0.08);
}

.app-full-blocked-state .app-empty-icon {
    display: inline-flex;
    width: 68px;
    height: 68px;
    align-items: center;
    justify-content: center;
    background: #f8d7da;
    border-radius: 24px;
    color: #842029;
    font-size: 2rem;
}

.full-blocked-reason {
    max-width: 460px;
    margin: 24px auto 0;
    background: #ffffff;
    border: 1px solid #f0b6bd;
    border-radius: 22px;
    padding: 18px;
}

.full-blocked-reason span {
    display: block;
    color: #842029;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.full-blocked-reason strong {
    display: block;
    color: #2b2b2b;
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
}

.full-blocked-reason small {
    display: block;
    color: #6b6b6b;
    line-height: 1.6;
    margin-top: 6px;
}

.agenda-service-feed-card .accordion-button {
    font-weight: 800;
}

@media (max-width: 992px) {
    .service-feed-hero,
    .service-category-grid,
    .service-admin-card-grid,
    .service-admin-metrics {
        grid-template-columns: 1fr;
    }

    .internal-services-header,
    .service-feed-bottom-cta,
    .app-agenda-results-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .service-category-card,
    .service-admin-group,
    .service-feed-hero,
    .service-feed-bottom-cta {
        border-radius: 24px;
        padding: 22px;
    }

    .service-public-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "meta"
            "cta";
    }

    .service-public-meta {
        align-items: flex-start;
    }

    .availability-status-pill {
        white-space: normal;
    }
}

/* Internal visual agenda: compact full-day block state */
.internal-full-day-block-card {
    background: linear-gradient(135deg, #fff8e7, #ffffff);
    border: 1px solid #ead7a3;
    border-radius: 30px;
    box-shadow: 0 18px 48px rgba(139, 94, 102, 0.1);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: flex-start;
    padding: 28px;
}

.internal-full-day-block-icon {
    width: 74px;
    height: 74px;
    border-radius: 26px;
    background: #fff3cd;
    color: #8a6a22;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: inset 0 0 0 1px rgba(138, 106, 34, 0.12);
}

.internal-full-day-block-main h2 {
    color: #2b2b2b;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    margin: 6px 0 10px;
}

.internal-full-day-block-main > p {
    color: #6b6b6b;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    max-width: 760px;
}

.internal-full-day-block-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.internal-full-day-block-meta span {
    align-items: center;
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 999px;
    color: #8b5e66;
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 800;
    gap: 8px;
    padding: 9px 13px;
}

.internal-full-day-block-notes {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 22px;
    margin-top: 22px;
    padding: 16px 18px;
}

.internal-full-day-block-notes strong {
    color: #8b5e66;
    display: block;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.internal-full-day-block-notes p {
    color: #6b6b6b;
    line-height: 1.6;
    margin: 0;
}

.internal-full-day-block-actions {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 170px;
}

.internal-full-day-block-actions .btn {
    width: 100%;
}

@media (max-width: 992px) {
    .internal-full-day-block-card {
        grid-template-columns: 1fr;
    }

    .internal-full-day-block-actions {
        align-items: stretch;
        width: 100%;
    }
}


/* ======================
   FIX: PUBLIC MINIMUM LEAD TIME AND INTERNAL AGENDA RESPONSIVENESS
====================== */

.internal-calendar-page,
.internal-calendar-page * {
    min-width: 0;
}

.internal-full-day-block-card {
    grid-template-columns: 74px minmax(0, 1fr) minmax(180px, 220px);
    overflow: hidden;
}

.internal-full-day-block-main h2,
.internal-full-day-block-main p,
.internal-full-day-block-notes p,
.calendar-event h2,
.calendar-event p,
.calendar-event small {
    overflow-wrap: anywhere;
    word-break: normal;
}

.internal-full-day-block-actions {
    min-width: 0;
}

.internal-full-day-block-actions .status-pill {
    text-align: center;
    width: 100%;
}

.calendar-event {
    min-width: 0;
}

.calendar-event-main {
    min-width: 0;
}

.calendar-event-side {
    flex-shrink: 0;
}

@media (max-width: 1200px) {
    .internal-full-day-block-card {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .internal-full-day-block-actions {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        grid-column: 1 / -1;
        width: 100%;
    }

    .internal-full-day-block-actions .btn,
    .internal-full-day-block-actions .status-pill {
        width: auto;
    }
}

@media (max-width: 768px) {
    .internal-calendar-header,
    .internal-calendar-actions,
    .internal-business-hour,
    .calendar-empty-slot,
    .calendar-event {
        align-items: stretch;
        flex-direction: column;
    }

    .internal-calendar-actions .btn,
    .calendar-empty-slot .btn,
    .calendar-event-buttons .btn,
    .calendar-event-buttons form,
    .calendar-event-buttons button {
        width: 100%;
    }

    .internal-slot-row {
        grid-template-columns: 1fr;
    }

    .internal-slot-time {
        border-bottom: 1px solid #f5e3e7;
        border-right: 0;
        padding: 12px 16px;
    }

    .internal-full-day-block-card {
        border-radius: 24px;
        gap: 18px;
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .internal-full-day-block-icon {
        height: 58px;
        width: 58px;
    }

    .internal-full-day-block-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .internal-full-day-block-actions .btn,
    .internal-full-day-block-actions .status-pill {
        width: 100%;
    }

    .internal-full-day-block-meta span {
        border-radius: 16px;
        width: 100%;
    }
}

/* ======================
   LEGAL PAGES AND COOKIE CONSENT
====================== */

.legal-page {
    margin: 0 auto;
    max-width: 980px;
}

.legal-hero {
    background:
        linear-gradient(135deg, rgba(255, 247, 244, 0.96), rgba(255, 255, 255, 0.98)),
        radial-gradient(circle at top left, rgba(168, 117, 95, 0.16), transparent 34%);
    border: 1px solid rgba(168, 117, 95, 0.14);
    border-radius: 34px;
    box-shadow: 0 24px 70px rgba(68, 44, 38, 0.08);
    margin-bottom: 28px;
    overflow: hidden;
    padding: clamp(28px, 5vw, 54px);
    position: relative;
}

.legal-hero::after {
    background: rgba(168, 117, 95, 0.08);
    border-radius: 999px;
    content: "";
    height: 180px;
    position: absolute;
    right: -70px;
    top: -70px;
    width: 180px;
}

.legal-hero h1 {
    color: #2f2522;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.1rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 10px 0 18px;
    position: relative;
    z-index: 1;
}

.legal-hero p {
    color: #6f5c55;
    font-size: 1.04rem;
    line-height: 1.8;
    margin: 0;
    max-width: 760px;
    position: relative;
    z-index: 1;
}

.legal-hero small {
    color: #92776e;
    display: inline-block;
    font-weight: 700;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

.legal-content-card {
    background: #ffffff;
    border: 1px solid rgba(168, 117, 95, 0.12);
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(68, 44, 38, 0.07);
    padding: clamp(24px, 5vw, 46px);
}

.legal-content-card h2 {
    color: #3b2c28;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    margin: 34px 0 12px;
}

.legal-content-card h2:first-child {
    margin-top: 0;
}

.legal-content-card p,
.legal-content-card li {
    color: #685852;
    font-size: 0.98rem;
    line-height: 1.78;
}

.legal-content-card a {
    color: #9d604b;
    font-weight: 800;
    text-decoration: none;
}

.legal-content-card a:hover {
    text-decoration: underline;
}

.legal-content-card ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.legal-alert {
    background: #fff8e6;
    border: 1px solid #f4ddb2;
    border-radius: 18px;
    color: #745b22;
    line-height: 1.65;
    margin-bottom: 30px;
    padding: 16px 18px;
}

.cookie-policy-table-wrap {
    border: 1px solid rgba(168, 117, 95, 0.14);
    border-radius: 20px;
    margin: 20px 0 10px;
    overflow: hidden;
}

.cookie-policy-table {
    margin: 0;
}

.cookie-policy-table th {
    background: #fff4ef;
    color: #4f3831;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cookie-policy-table td,
.cookie-policy-table th {
    border-color: rgba(168, 117, 95, 0.12);
    padding: 16px;
    vertical-align: top;
}

.legal-consent-box {
    background: #fff8f5;
    border: 1px solid rgba(168, 117, 95, 0.18);
    border-radius: 18px;
    padding: 14px 16px 14px 42px;
}

.legal-consent-box .form-check-input {
    margin-left: -26px;
    margin-top: 0.32rem;
}

.legal-consent-box .form-check-label {
    color: #66524b;
    line-height: 1.55;
}

.legal-consent-box a {
    color: #9d604b;
    font-weight: 800;
    text-decoration: none;
}

.legal-consent-box a:hover {
    text-decoration: underline;
}

.footer-legal-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.footer-legal-links a,
.footer-legal-links button {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0;
    text-decoration: none;
}

.footer-legal-links a:hover,
.footer-legal-links button:hover {
    text-decoration: underline;
}

.cookie-map-placeholder,
.cookie-embed-placeholder {
    align-items: flex-start;
    background: linear-gradient(135deg, #fff8f5, #ffffff);
    border: 1px dashed rgba(168, 117, 95, 0.34);
    border-radius: 22px;
    color: #624d45;
    display: flex;
    gap: 14px;
    min-height: 220px;
    padding: 24px;
}

.cookie-map-placeholder i,
.cookie-embed-placeholder i {
    color: #a8755f;
    font-size: 1.8rem;
}

.cookie-map-placeholder strong,
.cookie-embed-placeholder strong {
    color: #3f2f2a;
    display: block;
    margin-bottom: 6px;
}

.cookie-map-placeholder p,
.cookie-embed-placeholder p {
    color: #6b5a54;
    line-height: 1.6;
    margin-bottom: 14px;
}

.cookie-consent-banner {
    bottom: 24px;
    left: 50%;
    max-width: min(1120px, calc(100% - 32px));
    position: fixed;
    transform: translateX(-50%);
    width: 100%;
    z-index: 1080;
}

.cookie-consent-content {
    align-items: center;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(168, 117, 95, 0.18);
    border-radius: 28px;
    box-shadow: 0 26px 80px rgba(40, 26, 22, 0.2);
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 22px;
}

.cookie-consent-kicker {
    color: #a8755f;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.cookie-consent-content h2,
.cookie-preferences-header h2 {
    color: #332622;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin: 0 0 8px;
}

.cookie-consent-content p,
.cookie-preferences-intro {
    color: #66554f;
    font-size: 0.95rem;
    line-height: 1.62;
    margin: 0;
}

.cookie-consent-content a {
    color: #9d604b;
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 800;
    margin-top: 8px;
    text-decoration: none;
}

.cookie-consent-content a:hover {
    text-decoration: underline;
}

.cookie-consent-actions,
.cookie-preferences-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.cookie-consent-actions {
    min-width: 320px;
}

.cookie-preferences-backdrop {
    background: rgba(20, 14, 12, 0.52);
    inset: 0;
    position: fixed;
    z-index: 1085;
}

.cookie-preferences-panel {
    background: #ffffff;
    border: 1px solid rgba(168, 117, 95, 0.18);
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(20, 14, 12, 0.28);
    left: 50%;
    max-height: min(760px, calc(100vh - 32px));
    max-width: min(720px, calc(100% - 32px));
    overflow-y: auto;
    padding: 26px;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1090;
}

.cookie-preferences-header {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.cookie-preferences-close {
    align-items: center;
    background: #fff4ef;
    border: 1px solid rgba(168, 117, 95, 0.18);
    border-radius: 999px;
    color: #6a4a40;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.45rem;
    font-weight: 800;
    height: 38px;
    justify-content: center;
    line-height: 1;
    width: 38px;
}

.cookie-preference-list {
    display: grid;
    gap: 12px;
    margin: 22px 0;
}

.cookie-preference-item {
    align-items: flex-start;
    background: #fffaf8;
    border: 1px solid rgba(168, 117, 95, 0.14);
    border-radius: 18px;
    cursor: pointer;
    display: flex;
    gap: 14px;
    padding: 16px;
}

.cookie-preference-item input {
    accent-color: #a8755f;
    height: 20px;
    margin-top: 3px;
    width: 20px;
}

.cookie-preference-item strong {
    color: #3d2e29;
    display: block;
    margin-bottom: 4px;
}

.cookie-preference-item small {
    color: #6f5d56;
    display: block;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .cookie-consent-content {
        grid-template-columns: 1fr;
    }

    .cookie-consent-actions {
        min-width: 0;
        width: 100%;
    }

    .cookie-consent-actions .btn,
    .cookie-preferences-actions .btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .legal-content-card,
    .legal-hero,
    .cookie-preferences-panel {
        border-radius: 22px;
    }

    .cookie-consent-banner {
        bottom: 12px;
        max-width: calc(100% - 20px);
    }

    .cookie-consent-content {
        border-radius: 22px;
        padding: 18px;
    }

    .cookie-map-placeholder,
    .cookie-embed-placeholder {
        flex-direction: column;
    }
}

/* ======================
   VISUAL SOFTENING PASS
   Objetivo: reduzir peso visual, escala tipográfica e excesso de contraste.
====================== */

:root {
    --text-dark: #343032;
    --text-muted: #70686b;
    --bg-soft: #fff9fb;
    --shadow-soft: rgba(139, 94, 102, 0.08);
}

html {
    font-size: 15px;
}

body {
    background: #fffafb;
    color: var(--text-dark);
    font-size: 0.96rem;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container {
    max-width: 1080px;
}

main.container {
    padding-top: 42px;
    padding-bottom: 48px;
}

h1,
h2,
h3,
.hero-title,
.section-title,
.luxury-title,
.app-agenda-header h1,
.internal-calendar-header h1,
.internal-services-header h1,
.legal-hero h1,
.appointment-detail-header h1 {
    letter-spacing: 0.01em;
    line-height: 1.14;
}

h1,
.luxury-title,
.hero-title {
    font-size: clamp(2rem, 4.2vw, 3.15rem);
}

h2,
.section-title,
.app-results-top h2,
.app-agenda-results-header h2 {
    font-size: clamp(1.45rem, 2.6vw, 1.85rem);
}

h3,
.luxury-card h3,
.service-admin-card-body h3 {
    font-size: clamp(1.1rem, 2vw, 1.28rem);
}

p,
li,
.text-muted,
.luxury-subtitle,
.hero-subtitle,
.service-feed-lead,
.app-agenda-header p,
.internal-calendar-header p,
.legal-hero p {
    font-size: 0.95rem;
    line-height: 1.62;
}

.small,
small,
.form-text,
.footer-bottom,
.public-slot-status,
.service-public-main p,
.service-public-meta span {
    font-size: 0.82rem;
}

/* Navbar mais leve */
.public-navbar {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 20px rgba(139, 94, 102, 0.045);
}


.navbar-brand img {
    border-radius: 8px;
}

/* Botões menos pesados */
.btn,
form .btn {
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 9px 20px;
}

.btn-lg,
.btn-group-lg > .btn {
    font-size: 0.95rem;
    padding: 10px 24px;
}

.btn-sm,
.btn-group-sm > .btn {
    font-size: 0.8rem;
    padding: 6px 14px;
}

/* Levantar o elemento ao passar por cima só faz sentido com ponteiro. Num
   ecrã tátil o :hover fica agarrado depois do toque e o cartão não volta ao
   sítio. */
@media (hover: hover) {
    .btn-primary:hover,
    .btn-outline-secondary:hover,
    .luxury-card:hover,
    .premium-card:hover,
    .public-slot-card:hover,
    .app-slot-card:hover,
    .service-public-card:hover,
    .dashboard-action-card:hover,
    .footer-brand-panel:hover,
    .footer-info-panel:hover {
        transform: translateY(-2px);
    }
}

/* Cards e painéis com menos volume */
.soft-container,
.premium-card,
.soft-panel,
.luxury-card,
.luxury-info-panel,
.luxury-logo-card,
.one-page-section,
.app-agenda-results,
.internal-calendar-filter,
.internal-business-hour,
.internal-calendar-board,
.dashboard-hero,
.dashboard-panel,
.dashboard-action-card,
.dashboard-metric-card,
.service-feed-hero,
.service-category-card,
.service-admin-group,
.service-admin-card,
.footer-brand-panel,
.footer-info-panel,
.legal-hero,
.legal-content-card,
.appointment-detail-card {
    border-color: rgba(216, 167, 177, 0.55);
    box-shadow: 0 10px 28px rgba(139, 94, 102, 0.055);
}

.soft-container,
.premium-card,
.soft-panel,
.luxury-card,
.one-page-section,
.app-agenda-results,
.service-category-card,
.service-admin-group,
.footer-brand-panel,
.footer-info-panel,
.legal-content-card,
.appointment-detail-card {
    border-radius: 22px;
}

.luxury-hero,
.hero-section,
.service-feed-hero {
    border-radius: 26px;
    padding: clamp(34px, 5vw, 54px) clamp(22px, 4vw, 40px);
    box-shadow: 0 14px 38px rgba(139, 94, 102, 0.07);
}

.luxury-title {
    font-size: clamp(2rem, 4.6vw, 3.25rem);
    line-height: 1.12;
}

.luxury-subtitle {
    font-size: 0.98rem;
    line-height: 1.68;
}

.signature-font {
    font-size: 1.18em;
}

.luxury-eyebrow,
.dashboard-action-card span,
.dashboard-metric-card span,
.booking-summary span,
.calendar-event-kicker,
.appointment-detail-grid span,
.appointment-detail-notes span,
.cookie-consent-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
}

.one-page-section {
    padding: clamp(30px, 4vw, 44px) clamp(22px, 4vw, 34px);
}

.section-spacing {
    margin-bottom: 42px;
}

.section-title {
    font-weight: 600;
}

.trust-strip {
    gap: 14px;
}

.trust-item,
.luxury-code-box,
.booking-summary,
.calendar-empty-slot,
.service-public-card,
.service-admin-metric-card,
.service-feed-hero-card,
.cookie-consent-content {
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(139, 94, 102, 0.05);
}

.trust-item {
    padding: 18px;
}

.trust-item strong {
    font-size: 1.08rem;
    font-weight: 600;
}

.trust-item span {
    font-size: 0.86rem;
}

.luxury-card,
.premium-card,
.dashboard-panel,
.service-category-card,
.service-admin-group {
    padding: 24px;
}

.luxury-icon,
.service-category-icon,
.public-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 1.15rem;
}

.luxury-card p,
.service-category-description {
    line-height: 1.6;
}


/* Agenda pública e interna mais compactas */
.app-agenda-shell {
    grid-template-columns: 320px 1fr;
    gap: 22px;
}

.app-agenda-header h1,
.internal-calendar-header h1,
.internal-services-header h1 {
    font-size: clamp(1.75rem, 3.4vw, 2.45rem);
}

.app-agenda-results,
.internal-calendar-filter,
.dashboard-hero,
.dashboard-panel {
    padding: 22px;
}

.app-results-top,
.app-agenda-results-header {
    margin-bottom: 20px;
}

.app-week-strip {
    gap: 10px;
}

.app-week-day {
    min-width: 82px;
    border-radius: 16px;
    padding: 11px 10px;
    box-shadow: 0 6px 18px rgba(139, 94, 102, 0.045);
}

.app-week-day strong {
    font-size: 1.36rem;
}

.app-slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
}

.app-slot-card,
.public-slot-card {
    border-radius: 18px;
    padding: 15px;
}

.app-slot-time,
.public-slot-time {
    font-size: 1.36rem;
}

.public-slot-action {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 7px 11px;
}

.app-empty-state {
    border-radius: 20px;
    padding: 40px 20px;
}

.app-empty-state h3 {
    font-size: 1.25rem;
}

.internal-slot-row {
    grid-template-columns: 92px 1fr;
    min-height: 62px;
}

.internal-slot-time {
    font-size: 0.96rem;
    padding: 14px 12px;
}

.internal-slot-content {
    padding: 10px 12px;
}

.calendar-event {
    border-left-width: 4px;
    border-radius: 18px;
    gap: 14px;
    padding: 14px;
}

.calendar-event h2 {
    font-size: 1.12rem;
}

.status-pill,
.service-admin-category-badge,
.service-admin-status,
.service-admin-card-meta span,
.app-duration-pill,
.availability-status-pill {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 7px 11px;
}

.internal-full-day-block-card {
    border-radius: 22px;
    gap: 18px;
    padding: 22px;
}

.internal-full-day-block-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 1.5rem;
}

.internal-full-day-block-main h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
}

.internal-full-day-block-main > p,
.internal-full-day-block-notes p {
    font-size: 0.92rem;
}

/* Formulários */
.form-label {
    font-size: 0.86rem;
    font-weight: 500;
}

.form-control,
.form-select,
textarea.form-control {
    border-radius: 13px;
    font-size: 0.92rem;
    padding: 10px 13px;
}

.card.shadow-sm.border-0 {
    border-radius: 22px;
    box-shadow: 0 12px 34px rgba(139, 94, 102, 0.06) !important;
}

.card-body {
    border-radius: 22px;
}

.premium-form-card .card-body {
    padding: 30px !important;
}

.success-code,
.success-reference-code,
.appointment-detail-code strong {
    font-size: 1.2rem;
    letter-spacing: 0.08em;
}

/* Serviços */
.service-feed-lead {
    font-size: 0.98rem;
}

.service-category-grid {
    gap: 18px;
}

.service-category-card h2,
.service-admin-group-title h2 {
    font-size: 1.4rem;
}

.service-admin-metric-card strong {
    font-size: 1.7rem;
}

.service-public-card {
    padding: 16px;
}

.service-public-main strong {
    font-size: 0.96rem;
}

.service-feed-bottom-cta {
    border-radius: 22px;
    padding: 26px;
}

/* Rodapé e cookies */
.site-footer {
    padding: 42px 0 24px;
}

.footer-brand-panel,
.footer-info-panel {
    padding: 24px;
}

.footer-brand-panel img {
    height: 82px;
}

.footer-hours h4,
.footer-info-panel h4 {
    font-size: 1.12rem;
}

.cookie-consent-content {
    padding: 18px;
}

.cookie-consent-content h2,
.cookie-preferences-header h2 {
    font-size: 1.25rem;
}

.cookie-consent-content p,
.cookie-preferences-intro {
    font-size: 0.88rem;
}

/* Melhor leitura em telemóveis */
@media (max-width: 991px) {
    .public-navbar .navbar-collapse {
        border-radius: 18px;
        margin-top: 12px;
        padding: 14px;
        box-shadow: 0 12px 30px rgba(139, 94, 102, 0.08);
    }

    .public-navbar .navbar-nav {
        gap: 6px;
    }

    .app-agenda-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14.5px;
    }

    main.container {
        padding-top: 28px;
        padding-bottom: 34px;
    }

    .luxury-hero,
    .hero-section,
    .one-page-section,
    .service-feed-hero,
    .service-category-card,
    .service-admin-group,
    .footer-brand-panel,
    .footer-info-panel,
    .legal-content-card,
    .legal-hero,
    .appointment-detail-card {
        border-radius: 18px;
        padding: 22px;
    }

    .luxury-title,
    .hero-title {
        font-size: clamp(1.75rem, 9vw, 2.35rem);
    }

    .section-title {
        font-size: 1.35rem;
    }

    .luxury-logo-transparent {
        max-width: 280px;
    }

    .btn,
    .btn-lg,
    form .btn {
        font-size: 0.9rem;
        padding: 9px 18px;
    }

    .app-slots-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-brand-panel img {
        height: 58px;
    }
}

@media (max-width: 576px) {
    .public-navbar .container {
        padding-inline: 14px;
    }

    .luxury-hero-actions,
    .d-flex.flex-column.flex-md-row.gap-3 {
        gap: 0.65rem !important;
    }

    .app-week-day {
        min-width: 76px;
    }

    .app-week-day strong {
        font-size: 1.22rem;
    }

    .app-slot-card,
    .public-slot-card {
        padding: 13px 10px;
    }

    .app-slot-time,
    .public-slot-time {
        font-size: 1.18rem;
    }

    .premium-form-card .card-body {
        padding: 22px !important;
    }
}

/* =========================================================================
   Avaliações do Google
   ========================================================================= */

.reviews-score {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}

.reviews-score strong {
    color: #3f3138;
    font-size: 2rem;
    line-height: 1;
}

.reviews-stars,
.review-card-stars {
    color: #e8a53d;
    letter-spacing: 1px;
}

.reviews-count {
    color: #6b6b6b;
    font-size: 0.95rem;
}

/* Flex e não grid, por causa da última fila: são cinco avaliações, e numa
   grelha de três colunas as duas que sobram encostavam à esquerda, com um
   buraco à direita. Em flex, `justify-content: center` centra o que sobrar —
   e continua a valer se um dia forem quatro ou duas. */
.reviews-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.review-card {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 22px;
    /* A largura vem daqui e não do número de colunas. `flex-grow` a zero é o
       que impede as duas da última fila de esticarem para ocupar a linha
       toda: centradas e do mesmo tamanho das de cima é o que se quer. */
    flex: 0 1 100%;
}

@media (min-width: 576px) {
    .review-card {
        flex-basis: calc((100% - 20px) / 2);
    }
}

@media (min-width: 992px) {
    .review-card {
        flex-basis: calc((100% - 40px) / 3);
    }
}

.review-card-head {
    align-items: center;
    display: flex;
    gap: 12px;
}

.review-card-photo {
    border-radius: 50%;
    height: 40px;
    object-fit: cover;
    width: 40px;
}

.review-card-author {
    color: #3f3138;
    display: block;
    font-size: 0.98rem;
}

.review-card-when {
    color: #8a7b81;
    font-size: 0.85rem;
}

.review-card-text {
    color: #5b4a52;
    line-height: 1.7;
    margin: 0;
    /* O texto vai inteiro, como os termos da Google exigem. O cartão cresce
       com ele em vez de o cortar. */
    white-space: pre-line;
}

.review-card figcaption {
    font-size: 0.85rem;
    margin-top: auto;
    padding-top: 6px;
}

/* =========================================================================
   Seletor de idioma
   ========================================================================= */

.language-switcher {
    align-items: center;
    display: flex;
    gap: 6px;
}

.language-switcher i {
    color: var(--primary-dark);
    font-size: 1rem;
}

.language-switcher .form-select {
    border: 1px solid rgba(139, 94, 102, 0.25);
    border-radius: 999px;
    color: var(--primary-dark);
    font-weight: 600;
    padding-block: 4px;
    padding-inline: 12px 30px;
    width: auto;
}

.language-switcher .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(216, 167, 177, 0.3);
}

@media (max-width: 991.98px) {
    .language-switcher {
        justify-content: flex-start;
    }

    .language-switcher .form-select {
        width: 100%;
    }
}

/* =========================================================================
   Preço dos serviços na lista resumida da página inicial
   ========================================================================= */

.service-teaser-list li {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.service-teaser-name {
    min-width: 0;
}

.service-teaser-price {
    color: var(--primary-dark);
    flex-shrink: 0;
    font-weight: 700;
    white-space: nowrap;
}

/* =========================================================================
   Seleção visual de horários para bloquear (agenda interna)
   ========================================================================= */

.slot-block-choice {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    margin: 0;
    user-select: none;
}

.slot-block-choice input {
    accent-color: #b3454f;
    cursor: pointer;
    height: 16px;
    width: 16px;
}

.internal-slot-row.is-selected .calendar-empty-slot {
    background: rgba(179, 69, 79, 0.08);
    border-color: rgba(179, 69, 79, 0.35);
}

/* A barra que aparece ao escolher horários para bloquear.
   Era uma pastilha de raio 999px que envolvia tudo numa linha só — e quando o
   conteúdo não cabia, quebrava para duas linhas e a pastilha deixava de fazer
   sentido, com os cantos redondos a abraçar um retângulo alto. Agora é um
   cartão: quebra sem estragar a forma, e as duas metades — o que está
   escolhido, e o que fazer com isso — separam-se. */
.slot-blocking-bar {
    align-items: center;
    background: var(--white);
    border: 1px solid rgba(139, 94, 102, 0.18);
    border-radius: 22px;
    bottom: 24px;
    box-shadow: 0 18px 44px rgba(40, 26, 22, 0.18);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    left: 50%;
    max-width: min(860px, calc(100% - 24px));
    padding: 14px 18px;
    /* `fixed` e não `sticky`: presa ao ecrã, fica sempre no meio e à vista.
       Com `sticky` acompanhava o fluxo da página e afastava-se do centro
       conforme a lista de horários crescia. */
    position: fixed;
    transform: translateX(-50%);
    width: fit-content;
    z-index: 1040;
}

.slot-blocking-summary {
    align-items: center;
    display: flex;
    gap: 12px;
}

/* O número em destaque: diz de relance quantos vão ser bloqueados, que é a
   única coisa que se confirma antes de carregar no botão. */
.slot-blocking-badge {
    align-items: center;
    background: linear-gradient(135deg, #a9707b, #8b5e66);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 700;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.slot-blocking-summary strong {
    color: var(--text-dark);
    display: block;
    font-size: 0.92rem;
    line-height: 1.3;
}

.slot-blocking-summary small {
    color: var(--text-muted);
    display: block;
    font-size: 0.76rem;
    line-height: 1.4;
}

.slot-blocking-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.slot-blocking-bar .form-control {
    max-width: 190px;
}

.slot-blocking-bar .btn {
    border-radius: 999px;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    /* No telemóvel a barra parte-se em duas metades separadas por uma linha:
       em cima o que está escolhido, em baixo o que fazer com isso. Numa
       largura destas, misturar as duas dava uma papa de texto e botões.

       Sobe acima da barra fixa de "Agendar / WhatsApp", que também vive
       colada ao fundo — senão uma tapava a outra. */
    .slot-blocking-bar {
        border-radius: 20px;
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        gap: 0;
        max-width: calc(100% - 16px);
        padding: 0;
        width: 100%;
    }

    .slot-blocking-summary {
        border-bottom: 1px solid rgba(139, 94, 102, 0.16);
        padding: 14px 16px;
        width: 100%;
    }

    .slot-blocking-actions {
        padding: 12px 16px 14px;
        width: 100%;
    }

    .slot-blocking-bar .form-control {
        max-width: none;
        width: 100%;
    }

    /* Os dois botões a meias, lado a lado, por baixo do motivo. */
    .slot-blocking-actions .btn {
        flex: 1 1 0;
    }
}

@media (max-width: 767.98px) {
    .slot-blocking-bar {
        border-radius: 20px;
        max-width: calc(100% - 20px);
    }

    .slot-blocking-bar .form-control {
        max-width: none;
        width: 100%;
    }
}

/* =========================================================================
   Escolha entre cliente registado e cliente novo (marcação interna)
   ========================================================================= */

.customer-mode-switch {
    background: #fdf7f8;
    border: 1px solid #ead7dc;
    border-radius: 18px;
    margin-bottom: 20px;
    padding: 16px 18px;
}

.customer-mode-switch .form-label,
.customer-mode-switch legend {
    color: #8b5e66;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.customer-mode-switch .form-check {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    padding-left: 0;
}

.customer-mode-switch .form-check:last-child {
    margin-bottom: 0;
}

.customer-mode-switch .form-check-input {
    accent-color: #8b5e66;
    flex-shrink: 0;
    float: none;
    margin: 0;
}

.customer-mode-switch .form-check-label {
    cursor: pointer;
    font-weight: 500;
}

/* =========================================================================
   Registo clínico: notas de evolução e histórico de alterações
   ========================================================================= */

.clinical-note-entry {
    border-left: 3px solid #ead7dc;
    margin-bottom: 16px;
    padding-left: 14px;
}

.clinical-note-entry:last-child {
    margin-bottom: 0;
}

.clinical-log-changes {
    background: #fdf7f8;
    border-radius: 10px;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.85rem;
    margin: 6px 0 0;
    padding: 10px 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* =========================================================================
   Ficha de anamnese: pensada para ser preenchida em tablet
   ========================================================================= */

.anamnesis-page {
    margin: 0 auto;
    max-width: 900px;
    padding-bottom: 96px;
}

/* A anamnese com a lista de clientes ao lado: duas colunas, e a ficha com o
   espaço que sempre teve. A página deixa de estar limitada a 900px porque
   passou a ter duas coisas lado a lado. */
.anamnesis-with-list {
    display: grid;
    grid-template-columns: 280px minmax(0, 900px);
    gap: 24px;
    max-width: 1220px;
    align-items: start;
}

/* Recolhida, a coluna fica com a largura do botão — a lista sai da frente
   sem sair da página, e volta com um clique. */
.anamnesis-with-list.is-collapsed {
    grid-template-columns: 52px minmax(0, 900px);
}

.anamnesis-with-list.is-collapsed .anamnesis-people-body {
    display: none;
}

.anamnesis-with-list.is-collapsed .anamnesis-people-head {
    justify-content: center;
}

.anamnesis-with-list.is-collapsed .anamnesis-people-head .luxury-eyebrow {
    display: none;
}

.anamnesis-with-list.is-collapsed .anamnesis-people-toggle i {
    transform: rotate(180deg);
}

.anamnesis-people {
    position: sticky;
    top: 88px;
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 10px 28px rgba(139, 94, 102, 0.055);
}

.anamnesis-people-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.anamnesis-people-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid #f1d5db;
    border-radius: 50%;
    background: #ffffff;
    color: #8b5e66;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .anamnesis-people-toggle:hover {
        border-color: #d8a7b1;
        background: #fff5f6;
    }
}

.anamnesis-people-search {
    margin-bottom: 8px;
}

.anamnesis-people-list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Rola por dentro: com duzentos nomes, a página é que rolava e a ficha
       ficava para trás. */
    max-height: 60vh;
    overflow-y: auto;
}

.anamnesis-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    color: #2b2b2b;
    font-size: 0.92rem;
    text-decoration: none;
}

@media (hover: hover) {
    .anamnesis-person:hover {
        background: #fff5f6;
        color: #2b2b2b;
    }
}

.anamnesis-person.is-open {
    background: linear-gradient(135deg, #d8a7b1, #8b5e66);
    color: #ffffff;
    font-weight: 600;
}

/* Quem ainda não tem ficha fica em cinzento — continua a abrir, mas o que
   abre é o botão que a cria, e isso vê-se antes de clicar. */
.anamnesis-person.has-no-record {
    color: #9a9a9a;
}

.anamnesis-person.has-no-record.is-open {
    color: #ffffff;
    opacity: 0.9;
}

/* Um retorno cuja data já passou. O cartão diz-se por si, sem obrigar a ler
   a data e a fazer a conta. */
.return-card-late {
    border-color: #f0c36d;
    background: #fffaf0;
}

/* O ícone da anamnese, na lista de clientes, quando não há ficha: apagado
   como um botão desligado, mas continua a poder ser carregado — é ele que
   pergunta se a ficha deve ser criada. */
.customer-action-button.is-recordless {
    opacity: 0.45;
}

@media (hover: hover) {
    .customer-action-button.is-recordless:hover {
        opacity: 1;
    }
}

.anamnesis-person-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anamnesis-person-alert {
    color: #b8860b;
    flex: 0 0 auto;
}

.anamnesis-person.is-open .anamnesis-person-alert {
    color: #ffffff;
}

.anamnesis-people-empty,
.anamnesis-people-none {
    color: #6b6b6b;
    font-size: 0.88rem;
    margin: 8px 0 0;
    padding: 0 10px;
}

/* Num ecrã estreito não há duas colunas: a lista fica por cima da ficha, e o
   botão continua a tirá-la da frente. */
@media (max-width: 992px) {
    .anamnesis-with-list,
    .anamnesis-with-list.is-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .anamnesis-people {
        position: static;
    }

    .anamnesis-people-list {
        max-height: 40vh;
    }

    .anamnesis-with-list.is-collapsed .anamnesis-people-head {
        justify-content: space-between;
    }

    .anamnesis-with-list.is-collapsed .anamnesis-people-head .luxury-eyebrow {
        display: block;
    }
}

.anamnesis-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.anamnesis-alert {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.anamnesis-accordion .accordion-item {
    border: 1px solid #ead7dc;
    border-radius: 16px !important;
    margin-bottom: 12px;
    overflow: hidden;
}

.anamnesis-accordion .accordion-button {
    font-size: 1.05rem;
    font-weight: 600;
    /* Alvo confortável para o dedo. */
    min-height: 60px;
    padding: 16px 20px;
}

.anamnesis-accordion .accordion-button:not(.collapsed) {
    background: #fdf7f8;
    color: var(--primary-dark);
}

.anamnesis-accordion .accordion-body {
    padding: 20px;
}

/* Caixas de antecedentes: alvos grandes, em grelha. */
.anamnesis-flags {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin-bottom: 24px;
}

.anamnesis-flag {
    align-items: center;
    background: #fdf7f8;
    border: 1px solid #ead7dc;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    /* 56px cumpre a área mínima de toque com folga. */
    min-height: 56px;
    padding: 12px 16px;
    user-select: none;
}

.anamnesis-flag:active {
    background: #f7e6ea;
}

.anamnesis-flag input[type="checkbox"] {
    accent-color: #8b5e66;
    flex-shrink: 0;
    height: 24px;
    margin: 0;
    width: 24px;
}

.anamnesis-flag span {
    font-size: 0.95rem;
    line-height: 1.3;
}

.anamnesis-flag:has(input:checked) {
    background: #f7e6ea;
    border-color: var(--primary);
    font-weight: 600;
}

/* 16px evita o zoom automático do iOS ao focar um campo. */
.anamnesis-page .form-control,
.anamnesis-page .form-select {
    border-radius: 12px;
    font-size: 16px;
    padding: 12px 14px;
}

.anamnesis-page textarea.form-control {
    line-height: 1.5;
}

.anamnesis-actions {
    align-items: center;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #ead7dc;
    border-radius: 999px;
    bottom: 16px;
    box-shadow: 0 18px 44px rgba(40, 26, 22, 0.16);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-top: 20px;
    padding: 12px 16px 12px 22px;
    position: sticky;
    z-index: 20;
}

.anamnesis-actions-hint {
    color: var(--text-muted);
    font-size: 0.82rem;
}

@media (max-width: 575.98px) {
    .anamnesis-actions {
        border-radius: 18px;
        justify-content: stretch;
    }

    .anamnesis-actions .btn {
        flex: 1 1 auto;
    }
}

/* =========================================================================
   Horários já reservados na agenda pública
   ========================================================================= */

.app-slot-card.is-reserved {
    background: #f6f1f2;
    border-color: #e4d5d9;
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.75;
    pointer-events: none;
}

.app-slot-card.is-reserved .app-slot-time {
    color: var(--text-muted);
    text-decoration: line-through;
}


/* =========================================================================
   Página offline da PWA
   ========================================================================= */

.offline-icon {
    color: var(--primary);
    font-size: 3rem;
}

/* =========================================================================
   Entrada com biometria
   ========================================================================= */

.passkey-divider {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font-size: 0.8rem;
    gap: 12px;
    margin: 20px 0 14px;
    text-transform: uppercase;
}

.passkey-divider::before,
.passkey-divider::after {
    background: #ead7dc;
    content: "";
    flex: 1;
    height: 1px;
}

.passkey-device {
    align-items: center;
    border: 1px solid #ead7dc;
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 14px 16px;
}

.passkey-device-name {
    font-weight: 600;
}

.passkey-device small {
    color: var(--text-muted);
    display: block;
}


/* =========================================================================
   Agenda pública em ecrãs pequenos

   Este bloco fica no fim do ficheiro de propósito. Mais acima há camadas
   que redefinem .app-slots-grid, .app-slot-card e .app-week-day sem media
   query nenhuma; como uma media query não acrescenta especificidade, quem
   vem depois ganha. Colocado a meio, o telemóvel voltava às duas colunas.
   ========================================================================= */

@media (max-width: 992px) {
    /* Uma coluna, e o catálogo de serviços passa para o fim: primeiro
       escolher, depois ver os horários, e só então explorar o resto. */
    .app-agenda-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "results"
            "feed";
        grid-template-rows: auto;
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .app-agenda-header p {
        font-size: 0.95rem;
    }

    .app-agenda-results {
        border-radius: 22px;
        padding: 18px;
    }

    .app-results-top,
    .app-agenda-results-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    /* O título e a etiqueta de estado lado a lado não cabiam: a etiqueta é
       nowrap e empurrava a página para fora do ecrã. */
    .app-agenda-results-header h2 {
        font-size: 1.55rem;
    }

    .availability-status-pill {
        font-size: 0.82rem;
        padding: 8px 12px;
        white-space: normal;
    }

    /* A tira de dias corre de margem a margem em vez de ficar encaixada
       dentro do cartão, que só dava para ver dois dias e meio. Agora é o
       carrossel que sangra: as margens negativas na faixa punham-na por baixo
       das setas. */
    .app-week-carousel {
        gap: 4px;
        margin-inline: -18px;
        padding-inline: 6px;
    }

    .app-week-arrow {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .app-week-strip {
        gap: 8px;
        scroll-padding-left: 2px;
    }

    .app-week-day {
        min-width: 72px;
        border-radius: 16px;
        padding: 10px 6px;
    }

    .app-week-day strong {
        font-size: 1.35rem;
        margin: 4px 0 2px;
    }

    .app-week-day small,
    .app-week-day span {
        font-size: 0.68rem;
    }

    /* Uma linha por horário era para caber a hora, o estado e o botão. Sem
       eles cabem três horas por linha, e vê-se o dia todo sem rolar. */
    .app-slots-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .app-slot-card {
        min-height: 54px;
        padding: 10px 6px;
        border-radius: 16px;
    }

    .app-slot-time {
        font-size: 1.3rem;
    }

    .app-empty-state {
        border-radius: 20px;
        padding: 32px 18px;
    }

    .app-empty-state h3 {
        font-size: 1.2rem;
    }

    .app-empty-state p {
        font-size: 0.9rem;
    }

}

/* =========================================================================
   Menu Configurações da área interna
   ========================================================================= */

.public-navbar .dropdown-menu {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(139, 94, 102, 0.12);
    padding: 8px;
    margin-top: 8px;
    min-width: 232px;
}

.public-navbar .dropdown-item {
    border-radius: 12px;
    color: #2b2b2b;
    font-weight: 600;
    padding: 10px 14px;
}

.public-navbar .dropdown-item:hover,
.public-navbar .dropdown-item:focus {
    background: #fff7f9;
    color: #8b5e66;
}

.public-navbar .dropdown-divider {
    border-top-color: #f1d5db;
    margin: 6px 4px;
}

@media (max-width: 991px) {
    /* Dentro do menu recolhido a lista aparece encaixada; sem a moldura e a
       sombra fica mais claro que é uma continuação do menu e não um painel
       solto por cima dele.
       
       `.navbar-nav` no meio, e não `.public-navbar .dropdown-menu`: é o
       Bootstrap que decide quais destas listas ficam encaixadas, e a regra
       dele — `.navbar-expand-lg .navbar-nav .dropdown-menu { position:
       static }` — só apanha as que estão dentro de um `.navbar-nav`.
       
       A "Área do cliente" vive em `.navbar-side-actions` e por isso continua
       posicionada em absoluto: flutua por cima da página, fora do fundo da
       barra. Sem fundo próprio, via-se a página através dela. */
    .public-navbar .navbar-nav .dropdown-menu {
        background: transparent;
        border: 0;
        box-shadow: none;
        margin: 4px 0 8px 12px;
        padding: 0;
    }

    .public-navbar .dropdown-item {
        padding: 8px 14px;
    }
}

/* O logo passou a estar dentro de um <picture>, que sem isto entra na flexbox
   da marca como um bloco de altura própria e desalinha a imagem. */
.public-navbar .navbar-brand picture {
    display: flex;
    align-items: center;
}

/* Encaixe: marcação posta fora do horário ou sobre um bloqueio. Precisa de se
   distinguir das outras à primeira vista, senão não há como saber que aquela
   hora não é normal. */
.calendar-event-tag {
    background: #fff3cd;
    border: 1px solid #f0d68a;
    border-radius: 999px;
    color: #8a6d1d;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-left: 8px;
    padding: 2px 9px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* =========================================================================
   Agenda pública: o que existe só no telemóvel e o que existe só no ecrã largo

   No telemóvel a escolha é toda por lista — serviço e dia — e no fim ficam só
   os cartões do dia escolhido. A faixa de dias e o catálogo de serviços são
   formas de navegar por aquilo que a lista já resolve, e num ecrã estreito
   afastam os horários para longe.
   ========================================================================= */

[data-agenda-mobile-only] {
    display: none;
}

@media (max-width: 767px) {
    [data-agenda-desktop-only] {
        display: none;
    }

    [data-agenda-mobile-only] {
        display: block;
    }
}

/* =========================================================================
   Pré-visualização de modelos de email
   ========================================================================= */

.email-preview-text {
    background: #fff7f9;
    border: 1px solid #f1d5db;
    border-radius: 14px;
    color: #2b2b2b;
    font-size: 0.9rem;
    margin: 0;
    padding: 18px;
    white-space: pre-wrap;
    word-break: break-word;
}

.email-preview-frame {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 14px;
    height: 460px;
    width: 100%;
}

/* ======================
   Painel de filtros colapsável
   ====================== */

/* Nos ecrãs pequenos os campos de pesquisa ficam fechados dentro do card: uma
   coluna de seis campos empurrava a lista para fora do primeiro ecrã. A partir
   de lg o botão desaparece e o painel fica sempre aberto (d-lg-block). */
.filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: #3f3138;
}

.filter-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Quantos filtros estão aplicados. Um painel fechado esconde a razão de a
   lista estar curta, e este número é o que evita a leitura errada. */
.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #6c5962;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.filter-chevron {
    transition: transform 0.2s ease;
    color: #6c5962;
}

.filter-toggle.collapsed .filter-chevron {
    transform: rotate(-90deg);
}

/* A margem entre o botão e os campos só faz sentido com o painel aberto — no
   ecrã grande não há botão nenhum por cima. */
@media (max-width: 991.98px) {
    .filter-body.show,
    .filter-body.collapsing {
        margin-top: 16px;
    }
}

/* ======================
   ANTES E DEPOIS
====================== */

/* Flex e não grid: com um número ímpar de casos, a grelha deixava o último
   encostado à esquerda e a coluna vazia ao lado. Aqui a última linha
   incompleta fica centrada. */
.ba-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 44px 32px;
}

/* A comparação não ganha nada em ocupar a largura toda: fotografias de pés a
   meio metro de altura no ecrã são mais do que é preciso para ver a
   diferença, e obrigam a rolar entre um caso e o seguinte. */
.ba-case {
    flex: 0 1 100%;
    max-width: 460px;
}

/* Duas colunas a partir do tablet. No telemóvel continuam empilhadas: lado a
   lado, cada comparação ficaria pequena de mais para se ver o que mudou. */
@media (min-width: 768px) {
    .ba-case {
        flex-basis: calc((100% - 32px) / 2);
    }
}

.ba-case-title {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    margin-bottom: 14px;
    text-align: center;
}

/* A caixa que as duas fotografias partilham. É ela que fixa o enquadramento:
   com `aspect-ratio` e `object-fit: cover`, duas fotografias de tamanhos
   diferentes ocupam exatamente o mesmo espaço, que é o que faz a comparação
   ler-se como uma só imagem a mudar. */
.ba-compare {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(139, 94, 102, 0.14);
    background: #f4ecec;
    touch-action: pan-y;
}

/* A moldura é que é recortada pela linha; a imagem lá dentro é que leva a
   aproximação. Ao contrário, o recorte seria transformado com a imagem e a
   linha deixava de coincidir com o que se vê. */
.ba-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* O recorte do "antes": da esquerda até à linha. */
.ba-frame-before {
    clip-path: inset(0 calc(100% - var(--ba-position)) 0 0);
}

.ba-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Enquadramento decidido ao carregar a fotografia, no formulário. Os
       valores por omissão dão a imagem inteira, centrada. */
    object-position: var(--ba-x, 50%) var(--ba-y, 50%);
    transform: scale(var(--ba-zoom, 1));
    transform-origin: var(--ba-x, 50%) var(--ba-y, 50%);
    user-select: none;
    -webkit-user-drag: none;
}

.ba-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-position);
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(139, 94, 102, 0.25);
    pointer-events: none;
}

.ba-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: #8b5e66;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 0.85rem;
    box-shadow: 0 8px 20px rgba(139, 94, 102, 0.28);
}

.ba-tag {
    position: absolute;
    top: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(43, 43, 43, 0.62);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
}

.ba-tag-before {
    left: 14px;
}

.ba-tag-after {
    right: 14px;
}

/* Invisível, mas é este elemento que recebe o arrasto — do rato, do dedo e do
   teclado. Fica por cima de tudo e cobre a caixa toda, para que tocar em
   qualquer ponto leve a linha até lá. */
.ba-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: ew-resize;
}

.ba-range:focus-visible {
    outline: 3px solid #8b5e66;
    outline-offset: 3px;
}

.ba-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: ew-resize;
}

.ba-range::-moz-range-thumb {
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: ew-resize;
}

/* =========================
   Comparação de cima para baixo

   A escolha é da profissional, caso a caso: um pé fotografado ao comprido
   divide-se melhor assim do que lado a lado. `--ba-position` continua a
   querer dizer o mesmo — quanto do "antes" se vê, contado do princípio —,
   por isso o JavaScript é o mesmo nas duas direções.
   ========================= */

.ba-compare.is-horizontal {
    /* O arrasto passa a ser vertical, e quem o recebe é o comparador. Quem
       estiver a percorrer a página desvia-se pelas margens, como em qualquer
       controlo que se arrasta na mesma direção em que a página corre. */
    touch-action: pan-x;
}

/* O recorte do "antes": de cima até à linha. */
.ba-compare.is-horizontal .ba-frame-before {
    clip-path: inset(0 0 calc(100% - var(--ba-position)) 0);
}

.ba-compare.is-horizontal .ba-line {
    top: var(--ba-position);
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 2px;
    margin-top: -1px;
    margin-left: 0;
}

/* O punho é um círculo: rodá-lo não se nota, e as setas lá dentro passam a
   apontar para cima e para baixo — que é para onde se arrasta. */
.ba-compare.is-horizontal .ba-grip {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* O "depois" está por baixo da linha, e o rótulo vai com ele. */
.ba-compare.is-horizontal .ba-tag-after {
    top: auto;
    right: auto;
    bottom: 14px;
    left: 14px;
}

/* É `writing-mode` que faz um <input type="range"> correr de cima para baixo,
   com o mínimo em cima. Não lhe mexe na caixa: continua a cobrir o comparador
   todo, o punho continua invisível e as setas do teclado continuam a andar
   com a linha.

   Deliberadamente sem `appearance: slider-vertical`, que era como isto se
   fazia antes: repõe o desenho nativo do controlo, e o carril e o punho do
   sistema apareciam por cima das fotografias. Num browser velho de mais para
   `writing-mode`, o arrasto fica para os lados — a linha continua a andar. */
.ba-compare.is-horizontal .ba-range {
    writing-mode: vertical-lr;
    cursor: ns-resize;
}

.ba-compare.is-horizontal .ba-range::-webkit-slider-thumb {
    cursor: ns-resize;
}

.ba-compare.is-horizontal .ba-range::-moz-range-thumb {
    cursor: ns-resize;
}

.ba-caption {
    color: #6b6b6b;
    font-size: 0.94rem;
    line-height: 1.6;
    margin: 14px 0 0;
    text-align: center;
}

.ba-more {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

/* Gestão */

.ba-admin-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.ba-admin-card {
    border: 1px solid #f1e3e6;
    border-radius: 20px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(139, 94, 102, 0.08);
}

.ba-admin-card.is-hidden {
    opacity: 0.62;
}

.ba-admin-thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ba-admin-thumbs figure {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
}

.ba-admin-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--ba-x, 50%) var(--ba-y, 50%);
    transform: scale(var(--ba-zoom, 1));
    transform-origin: var(--ba-x, 50%) var(--ba-y, 50%);
    display: block;
}

.ba-admin-thumbs figcaption {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(43, 43, 43, 0.62);
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ba-admin-body {
    padding: 18px 20px 20px;
}

.ba-admin-body h2 {
    font-size: 1.05rem;
    margin-bottom: 4px;
}

/* ======================
   BANNER "SOBRE A PROFISSIONAL"

   De um lado da página ao outro, como o herói do topo: é a apresentação de
   quem trata, e a seguir a uma promessa ("voltar a andar sem dor") o que se
   procura é a razão para acreditar nela.
====================== */

.about-banner {
    /* Quebra o container e ocupa a largura toda do ecrã. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 72px 24px;
    background: linear-gradient(135deg, #fff7f9 0%, #fdf1f3 45%, #f8e8ec 100%);
    border-top: 1px solid #f3dde2;
    border-bottom: 1px solid #f3dde2;
}

.about-banner-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.about-banner-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 3.2vw, 2.05rem);
    line-height: 1.35;
    font-weight: 600;
    color: #2b2b2b;
    margin: 12px 0 0;
}

.about-banner-signature {
    display: block;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    margin: 18px 0 6px;
}

/* Um traço curto por baixo da assinatura, em vez de mais uma linha de texto
   a separar a apresentação do currículo. */
.about-banner-signature::after {
    content: "";
    display: block;
    width: 64px;
    height: 1px;
    margin: 14px auto 0;
    background: #d8b3bb;
}

.about-banner-text {
    margin-top: 26px;
    text-align: left;
}

.about-banner-text p {
    color: #5f5350;
    font-size: 1.02rem;
    line-height: 1.85;
    margin-bottom: 18px;
}

.about-banner-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .about-banner {
        padding: 48px 22px;
    }

    .about-banner-text {
        margin-top: 22px;
    }

    .about-banner-text p {
        font-size: 0.97rem;
        line-height: 1.75;
    }
}

/* A frase de posicionamento do herói: entre o título e a lista de
   tratamentos, e por isso entre os dois em tamanho. */
.luxury-lead {
    color: #8b5e66;
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .luxury-lead {
        font-size: 0.98rem;
        margin-bottom: 10px;
    }
}

/* Os dois botões do fim das avaliações, lado a lado e centrados. */
.reviews-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

@media (max-width: 576px) {
    .reviews-actions .btn {
        width: 100%;
    }
}

/* ======================
   PRINCIPAIS PROBLEMAS TRATADOS
====================== */

.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

.problem-card {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 22px;
    padding: 26px 24px;
    box-shadow: 0 10px 28px rgba(139, 94, 102, 0.06);
}

.problem-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.18rem;
    color: #2b2b2b;
    margin-bottom: 8px;
}

/* O passo seguinte do card, quando existe uma página para onde ir. Só
   aparece nos que estão publicados, por isso o espaço acima é dele e não do
   parágrafo: um card sem ligação não fica com uma folga por baixo à espera
   de nada. */
.problem-card-link {
    align-items: center;
    color: #8b5e66;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 12px;
    text-decoration: none;
}

.problem-card-link:hover {
    color: #2b2b2b;
    text-decoration: underline;
}

.problem-card p {
    color: #6b6b6b;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* ======================
   SOBRE: FOTOGRAFIA AO LADO DO TEXTO
====================== */

.about-banner-photo {
    margin: 0 0 26px;
}

/* Redondo a sério: a largura e a altura têm de ser iguais, senão o
   `border-radius: 50%` desenha uma elipse. Daí o `aspect-ratio` e o
   `object-fit`, que recortam a imagem em vez de a espremerem. */
.about-banner-photo img {
    display: block;
    width: 320px;
    height: 320px;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    border: 5px solid #ffffff;
    box-shadow: 0 18px 40px rgba(139, 94, 102, 0.18);
}

@media (min-width: 992px) {
    /* Em ecrã largo o retrato fica ao lado do texto, e não por cima. */
    .about-banner-inner {
        display: grid;
        grid-template-columns: 340px 1fr;
        gap: 44px;
        align-items: center;
        max-width: 1000px;
        text-align: left;
    }

    .about-banner-photo {
        margin: 0;
    }

    .about-banner-signature::after {
        margin-left: 0;
    }
}

/* ======================
   ANTES E DEPOIS: CHAMADA NA PÁGINA INICIAL
====================== */

.ba-teaser {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 64px 24px;
    background: linear-gradient(135deg, #fdf1f3, #fff8f5);
    border-top: 1px solid #f3dde2;
    border-bottom: 1px solid #f3dde2;
}

.ba-teaser-inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

/* ======================
   COMO FUNCIONA A MARCAÇÃO
====================== */

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.step-card {
    position: relative;
    background: #fff7f9;
    border: 1px solid #f1d5db;
    border-radius: 22px;
    padding: 28px 24px 24px;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a9707b, #8b5e66);
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 14px;
    box-shadow: 0 8px 18px rgba(139, 94, 102, 0.24);
}

.step-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    color: #2b2b2b;
    margin-bottom: 8px;
}

.step-card p {
    color: #6b6b6b;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.steps-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.steps-note {
    color: #6b6b6b;
    font-size: 0.94rem;
    text-align: center;
    margin: 18px 0 0;
}

/* ======================
   PERGUNTAS FREQUENTES
====================== */

.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

/* <details> e não JavaScript: abre e fecha sozinho, funciona sem scripts, e
   o que está fechado continua a ser encontrado pela pesquisa do browser. */
.faq-item {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 18px;
    padding: 4px 22px;
}

.faq-item summary {
    cursor: pointer;
    padding: 16px 0;
    font-weight: 600;
    color: #2b2b2b;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    color: #8b5e66;
    font-size: 1.35rem;
    line-height: 1;
    flex-shrink: 0;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item p {
    color: #6b6b6b;
    font-size: 0.96rem;
    line-height: 1.75;
    margin: 0 0 18px;
}

/* ======================
   APELO FINAL
====================== */

.final-cta {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 72px 24px;
    background: linear-gradient(135deg, #8b5e66, #a9707b);
}

.final-cta-inner {
    max-width: 660px;
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
}

.final-cta-inner h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    color: #ffffff;
    margin-bottom: 14px;
}

.final-cta-inner p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.02rem;
    line-height: 1.7;
    margin-bottom: 28px;
}

.final-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.final-cta-primary {
    background: #ffffff;
    border: 0;
    color: #8b5e66;
    border-radius: 999px;
    font-weight: 700;
}

.final-cta-primary:hover {
    background: #fff7f9;
    color: #8b5e66;
}

.final-cta-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
    border-radius: 999px;
    font-weight: 600;
}

.final-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

@media (max-width: 576px) {
    .steps-actions .btn,
    .final-cta-actions .btn {
        width: 100%;
    }
}

/* A nota de consentimento das fotografias. Discreta mas presente: é uma
   afirmação sobre pessoas reais e não pode passar por texto decorativo. */
.consent-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    background: #f4f8f4;
    border: 1px solid #dcebdc;
    color: #4c6350;
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: left;
}

.consent-note i {
    color: #5a8a63;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ======================
   EDITOR DE ENQUADRAMENTO (área interna)
====================== */

.ba-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin-bottom: 22px;
}

.ba-editor {
    border: 1px solid #f1d5db;
    border-radius: 18px;
    padding: 18px;
    background: #fffdfd;
}

.ba-editor-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8b5e66;
    margin-bottom: 12px;
}

/* O palco tem a mesma proporção da caixa do site: o que se vê aqui é o que
   fica publicado, e não uma aproximação. */
.ba-editor-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: #f4ecec;
    cursor: grab;
    touch-action: none;
}

.ba-editor-stage:active {
    cursor: grabbing;
}

.ba-editor-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--ba-x, 50%) var(--ba-y, 50%);
    transform: scale(var(--ba-zoom, 1));
    transform-origin: var(--ba-x, 50%) var(--ba-y, 50%);
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.ba-editor-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    color: #8b7c78;
    font-size: 0.88rem;
}

.ba-editor-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 0.85rem;
    color: #6b6b6b;
}

.ba-editor-zoom input[type="range"] {
    flex: 1 1 auto;
    accent-color: #8b5e66;
}

.ba-editor-zoom output {
    min-width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ba-editor-hint {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: #8b7c78;
}

/* Os cartões das categorias na página inicial. Ocupam sempre a largura toda,
   independentemente de quantas categorias estejam ligadas para aqui. */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

/* O ícone dos cartões de problemas: a mesma pegada em todos, para a secção se
   ler como um conjunto e não como oito símbolos diferentes. */
.problem-icon {
    display: block;
    width: 30px;
    height: 30px;
    fill: #a9707b;
    margin-bottom: 12px;
}

/* Cabeçalho do cartão de problema: o ícone à esquerda, o selo à direita
   quando o tratamento ainda não se marca. */
.problem-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.problem-card-head .problem-icon {
    margin-bottom: 0;
}

.problem-card-head + h3 {
    margin-top: 12px;
}

/* ======================
   AGENDA PÚBLICA: FAIXA DE DIAS COM CONTADOR
====================== */

.app-week-vagas {
    display: block;
    margin-top: 4px;
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 600;
    color: #5a8a63;
    letter-spacing: 0.01em;
}

.app-week-vagas.is-empty {
    color: #b08a8a;
}

/* Um dia sem vagas continua clicável — mostra a razão — mas não convida. */
.app-week-day.is-full {
    opacity: 0.62;
}

.app-week-day.is-active .app-week-vagas,
.app-week-day.is-active .app-week-vagas.is-empty {
    color: inherit;
}

/* O serviço escolhido, no feed. */
.app-agenda-feed .list-group-item.is-selected {
    font-weight: 700;
    color: #8b5e66;
}

.app-agenda-feed .list-group-item.is-selected::before {
    content: "•";
    margin-right: 8px;
    color: #a9707b;
}

/* O telefone: o seletor de indicativo e o número, lado a lado. O indicativo
   fica estreito porque o que se lê nele é um nome de país, e o número precisa
   do espaço todo. Num ecrã estreito passam a duas linhas. */
.phone-field {
    display: flex;
    gap: 8px;
}

.phone-field-country {
    flex: 0 1 42%;
    min-width: 0;
}

.phone-field-number {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 480px) {
    .phone-field {
        flex-wrap: wrap;
    }

    .phone-field-country,
    .phone-field-number {
        flex: 1 1 100%;
    }
}

/* A lista de países que a procura desenha. Solta por cima do que vem a
   seguir, como a das moradas: empurrar o formulário para baixo a cada tecla
   escrita fazia a página saltar debaixo de quem escreve. */
.phone-country-picker {
    position: relative;
}

.phone-country-list {
    position: absolute;
    z-index: 5;
    width: 100%;
    min-width: 240px;
    max-height: 260px;
    overflow-y: auto;
    margin: 4px 0 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(139, 94, 102, 0.14);
}

.phone-country-option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #2b2b2b;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
}

@media (hover: hover) {
    .phone-country-option:hover {
        background: #fff5f6;
    }
}

.phone-country-option:focus-visible {
    outline: 2px solid #8b5e66;
    outline-offset: -2px;
}

/* O que está escolhido, assinalado como num <select> aberto. */
.phone-country-option.is-chosen {
    background: #fff0f3;
    font-weight: 600;
}

/* A seta de uma lista pendente, porque é o que isto é. Sem ela, a caixa
   parece só um campo de texto e ninguém lhe carrega para ver as opções. */
.phone-country-search {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b5e66' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px 10px;
    padding-right: 2.25rem;
    cursor: pointer;
}

/* A lista de moradas sugeridas, no formulário da marcação. Solta por cima do
   que vem a seguir: empurrar o formulário para baixo a cada tecla escrita fazia
   a página saltar debaixo de quem escreve. */
.address-suggestions {
    position: absolute;
    z-index: 5;
    width: 100%;
    max-width: 640px;
    margin: 4px 0 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(139, 94, 102, 0.14);
}

[data-address-search] {
    position: relative;
}

.address-suggestion {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.address-suggestion strong {
    display: block;
    color: #2b2b2b;
    font-size: 0.95rem;
    font-weight: 600;
}

.address-suggestion span {
    display: block;
    color: #6b6b6b;
    font-size: 0.82rem;
}

@media (hover: hover) {
    .address-suggestion:hover {
        background: #fff5f6;
    }
}

.address-suggestion:focus-visible {
    outline: 2px solid #8b5e66;
    outline-offset: -2px;
}

/* O convite a escolher, antes de haver horários para mostrar. */
.app-pick-day-state .app-empty-icon i,
.app-pick-service-state .app-empty-icon i {
    color: #a9707b;
}

/* A mão aponta para aquilo em que é preciso carregar, e isso muda com o que
   falta escolher: a faixa de dias está por cima do convite, e o catálogo de
   serviços ao lado. O ícone é o mesmo — aponta para cima — e roda.

   `inline-block` porque o <i> é inline, e `transform` não pega em caixas
   inline: sem isto a mão ficava sempre virada para cima. */
.app-pick-service-state .app-empty-icon i {
    display: inline-block;
    transform: rotate(-90deg);
}

/* No telemóvel não há "ao lado": a grelha passa a uma coluna e o catálogo vai
   para baixo dos horários. Tem de ficar depois da regra de cima, senão perde:
   uma media query não acrescenta especificidade nenhuma. */
@media (max-width: 992px) {
    .app-pick-service-state .app-empty-icon i {
        transform: rotate(180deg);
    }
}


/* "Agenda" no menu interno: ligação e seta lado a lado, sem espaço entre
   elas, para se lerem como uma peça só. */
.internal-split-item {
    display: flex;
    align-items: center;
}

.internal-split-item .nav-link {
    padding-right: 4px;
}

.internal-split-caret {
    padding-left: 2px;
    padding-right: 10px;
}

.internal-split-caret::after {
    margin-left: 0;
}

/* ======================
   AGENDA INTERNA: FAIXA DE CONTROLO

   Uma faixa só, partilhada pelas três vistas: navegar, saltar para uma data,
   e trocar de vista. Antes eram duas — uma linha de botões no cabeçalho e um
   cartão à parte com o campo de data — que faziam a mesma coisa em dois
   sítios e partiam em duas linhas assim que o ecrã apertava.
====================== */

.agenda-controls {
    align-items: center;
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(139, 94, 102, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    padding: 14px 18px;
}

.agenda-controls-nav {
    align-items: center;
    display: flex;
    gap: 8px;
}

/* Setas redondas, só com o símbolo: "← Dia anterior" e "Próximo dia →"
   ocupavam metade da faixa para dizer o que a seta já diz. O texto vive no
   `title` e no `aria-label`, para quem passa o rato e para quem ouve. */
.agenda-arrow {
    align-items: center;
    background: #fff7f9;
    border: 1px solid #f1d5db;
    border-radius: 50%;
    color: #8b5e66;
    display: flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
    width: 40px;
}

.agenda-arrow:hover {
    background: #8b5e66;
    color: #ffffff;
}

.agenda-today {
    border-radius: 999px;
    white-space: nowrap;
}

.agenda-controls-date {
    align-items: center;
    display: flex;
    gap: 8px;
}

.agenda-controls-date .form-control {
    max-width: 180px;
}

.agenda-controls-date .btn {
    border-radius: 999px;
}

/* As três vistas, como separadores de um mesmo dado. */
.agenda-controls-views {
    background: #fdf4f6;
    border: 1px solid #f1d5db;
    border-radius: 999px;
    display: flex;
    gap: 2px;
    padding: 4px;
}

.agenda-view {
    border-radius: 999px;
    color: #8b5e66;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 7px 16px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.agenda-view:hover {
    background: #ffffff;
    color: #8b5e66;
}

.agenda-view.is-active {
    background: linear-gradient(135deg, #a9707b, #8b5e66);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(139, 94, 102, 0.24);
}

@media (max-width: 575.98px) {
    .agenda-controls {
        justify-content: center;
    }

    .agenda-controls-date {
        width: 100%;
    }

    .agenda-controls-date .form-control {
        max-width: none;
        flex: 1 1 auto;
    }
}

/* ======================
   AGENDA INTERNA: GRELHA DO MÊS
====================== */

.month-grid-wrapper {
    overflow-x: auto;
}

.month-grid {
    border-collapse: separate;
    border-spacing: 6px;
    table-layout: fixed;
    width: 100%;
}

.month-grid th {
    color: #8b5e66;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding-bottom: 4px;
    text-align: center;
    text-transform: uppercase;
}

.month-cell {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 14px;
    height: 118px;
    padding: 8px;
    vertical-align: top;
}

/* Os dias das pontas, que pertencem aos meses vizinhos: ficam lá para a
   grelha não ter buracos, mas não competem com o mês que se está a ver. */
.month-cell.is-outside {
    background: #fbf8f8;
    opacity: 0.55;
}

.month-cell.is-today {
    border-color: #a9707b;
    box-shadow: 0 0 0 2px rgba(169, 112, 123, 0.18);
}

.month-cell.is-blocked {
    background: #f6f1f2;
}

.month-cell-day {
    color: #2b2b2b;
    display: inline-block;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
    text-decoration: none;
}

.month-cell.is-today .month-cell-day {
    color: #8b5e66;
}

.month-cell-blocked {
    color: #a8755f;
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.month-cell-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.month-entry {
    align-items: baseline;
    border-radius: 6px;
    color: #4a3b38;
    display: flex;
    font-size: 0.74rem;
    gap: 5px;
    line-height: 1.35;
    padding: 2px 4px;
    text-decoration: none;
}

.month-entry:hover {
    background: #fff7f9;
    color: #8b5e66;
}

.month-entry-time {
    color: #8b5e66;
    flex-shrink: 0;
    font-weight: 700;
}

.month-entry-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Uma marcação cancelada continua à vista, riscada: o dia mostra o que
   aconteceu, e não só o que ficou. */
.month-entry.is-cancelled .month-entry-name,
.month-entry.is-cancelled .month-entry-time {
    color: var(--text-muted);
    text-decoration: line-through;
}

.month-cell-more {
    color: #8b5e66;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 2px;
    text-decoration: none;
}

/* A lista, que substitui a grelha no telemóvel. */
.month-list {
    display: none;
}

.month-list-day {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 16px;
    display: flex;
    gap: 14px;
    margin-bottom: 10px;
    padding: 14px 16px;
}

.month-list-day.is-today {
    border-color: #a9707b;
}

.month-list-date {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    text-decoration: none;
    width: 44px;
}

.month-list-date strong {
    color: #8b5e66;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1;
}

.month-list-date small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.month-list-day ul {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

.month-list-day .month-entry {
    font-size: 0.88rem;
}

@media (max-width: 767.98px) {
    /* Sete colunas num telemóvel não se lêem. O mês passa a ser a lista dos
       dias que têm alguma coisa, que é a pergunta que se faz a um mês. */
    .month-grid-wrapper {
        display: none;
    }

    .month-list {
        display: block;
    }
}

/* =========================================================================
   Páginas dos problemas tratados

   São páginas para ler, não para percorrer: a largura é limitada a uma
   medida de leitura confortável em vez de acompanhar o ecrã. Uma linha de
   texto com 1400px de largura obriga o olho a procurar o princípio da linha
   seguinte, e quem procura duas vezes fecha a página.
   ========================================================================= */

.condition-index-hero,
.condition-header {
    max-width: 760px;
}

.condition-card {
    background: var(--white);
    border: 1px solid var(--primary-light);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    padding: 26px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.condition-card:hover {
    box-shadow: 0 14px 34px rgba(139, 94, 102, 0.12);
    transform: translateY(-2px);
}

.condition-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.condition-card-title a {
    color: var(--text-dark);
    text-decoration: none;
}

.condition-card-title a:hover {
    color: var(--primary-dark);
}

.condition-card-summary {
    color: var(--text-muted);
    flex-grow: 1;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.condition-card-link {
    align-items: center;
    color: var(--primary-dark);
    display: inline-flex;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
}

.condition-breadcrumb {
    color: var(--text-muted);
    font-size: 0.86rem;
}

.condition-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.condition-breadcrumb a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.condition-breadcrumb span {
    margin: 0 6px;
}

.condition-breadcrumb span[aria-current] {
    color: var(--text-dark);
    margin-left: 0;
}

/* A medida de leitura. Vale para o corpo do texto e não para os títulos das
   secções, que ganham em ficar alinhados com a margem da página. */
.condition-section-body,
.condition-faq .accordion-body {
    color: var(--text-dark);
    font-size: 1.02rem;
    line-height: 1.75;
    max-width: 68ch;
}

.condition-section-title {
    color: var(--text-dark);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.condition-cta {
    background: var(--bg-soft);
    border: 1px solid var(--primary-light);
    border-radius: 22px;
    padding: 30px;
}

.condition-faq .accordion-item {
    border: 1px solid var(--primary-light);
    border-radius: 16px !important;
    margin-bottom: 10px;
    overflow: hidden;
}

.condition-faq .accordion-button {
    font-weight: 600;
}

.condition-faq .accordion-button:not(.collapsed) {
    background: var(--bg-soft);
    color: var(--primary-dark);
}

/* O anel de foco do Bootstrap desenha-se em azul, que não é uma cor desta
   casa. Só a cor muda: o anel fica, porque é como quem navega por teclado
   sabe onde está. */
.condition-faq .accordion-button:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(216, 167, 177, 0.4);
}

.condition-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.condition-related-list a {
    background: var(--bg-soft);
    border: 1px solid var(--primary-light);
    border-radius: 999px;
    color: var(--primary-dark);
    display: inline-block;
    font-size: 0.9rem;
    padding: 7px 16px;
    text-decoration: none;
}

.condition-related-list a:hover {
    background: var(--primary-light);
}

.condition-disclaimer {
    border-top: 1px solid var(--primary-light);
    color: var(--text-muted);
    font-size: 0.85rem;
    max-width: 68ch;
    padding-top: 18px;
}

/* Depois das regras genéricas e não antes: uma media query não acrescenta
   especificidade nenhuma, e a última a aparecer é a que ganha. */
@media (max-width: 575.98px) {
    .condition-card,
    .condition-cta {
        padding: 20px;
    }

    .condition-section-body,
    .condition-faq .accordion-body {
        font-size: 0.98rem;
    }
}

/* A imagem de abertura das páginas dos problemas.

   Proporção fixa e `object-fit: cover`: as fotografias que entram aqui vêm de
   um telemóvel e não têm todas a mesma forma, e uma altura livre fazia a
   página saltar à medida que cada imagem carregava. O `aspect-ratio` reserva
   o espaço antes de a imagem chegar. */
.condition-hero {
    border-radius: 22px;
    margin: 0;
    overflow: hidden;
}

.condition-hero img {
    aspect-ratio: 21 / 9;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.condition-card-image {
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    display: block;
    margin-bottom: 16px;
    object-fit: cover;
    /* Corta pela direita: o `cover` sozinho tira de igual dos dois lados, e o
       que interessa nestas fotografias está do lado esquerdo. Prender a
       imagem à esquerda faz o recorte cair todo no lado que sobra. */
    object-position: left center;
    width: 100%;
}

/* Depois das regras genéricas: uma media query não acrescenta especificidade,
   e a última a aparecer é a que ganha. Num ecrã estreito, 21:9 deixa uma
   faixa fina demais para se perceber o que lá está. */
@media (max-width: 575.98px) {
    .condition-hero img {
        aspect-ratio: 16 / 9;
    }
}

/* O texto escrito no editor, já na página pública.

   A folha do site não estilava tabelas nem imagens dentro de texto corrido
   porque até agora não havia texto corrido com essas coisas lá dentro. Estas
   regras vivem sob `.condition-rich-text` e não soltas: o que a profissional
   escrever não deve poder mudar o aspeto do resto do site. */
.condition-rich-text h2 {
    color: #2b2b2b;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 32px;
}

.condition-rich-text h2:first-child {
    margin-top: 0;
}

.condition-rich-text h3 {
    color: #2b2b2b;
    font-size: 1.12rem;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 24px;
}

.condition-rich-text h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: 20px;
}

.condition-rich-text ul,
.condition-rich-text ol {
    margin-bottom: 16px;
    padding-left: 22px;
}

.condition-rich-text li {
    margin-bottom: 6px;
}

.condition-rich-text a {
    color: #8b5e66;
}

.condition-rich-text blockquote {
    border-left: 3px solid #d8a7b1;
    color: #6b6b6b;
    margin: 20px 0;
    padding: 4px 0 4px 18px;
}

/* Uma imagem colada dentro do texto pode vir com a largura de um telemóvel
   moderno — 4000px — e sem isto empurra a página inteira para fora do ecrã. */
.condition-rich-text img {
    border-radius: 14px;
    height: auto;
    max-width: 100%;
}

/* A tabela não encolhe para caber: desliza dentro do seu próprio espaço. Uma
   tabela de três colunas espremida num telemóvel deixa de se conseguir ler, e
   uma página que desliza para o lado toda inteira é pior ainda. */
.condition-rich-text table {
    border-collapse: collapse;
    display: block;
    margin-bottom: 20px;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

.condition-rich-text th,
.condition-rich-text td {
    border: 1px solid #f1d5db;
    padding: 9px 14px;
    text-align: left;
}

.condition-rich-text th {
    background: #fff7f9;
    font-weight: 600;
}

.condition-rich-text caption {
    caption-side: bottom;
    color: #6b6b6b;
    font-size: 0.86rem;
    padding-top: 8px;
    text-align: left;
}

/* Cartões inteiros clicáveis, no índice e na página inicial.

   O `stretched-link` do Bootstrap estica um pseudo-elemento do link até aos
   limites do antepassado posicionado mais próximo — e é por isso que o cartão
   precisa de `position: relative`. Sem isto, o pseudo-elemento procura mais
   acima e cobre meia página.

   Fica aqui e não junto de cada cartão porque é a mesma regra para os dois. */
.condition-card,
.problem-card {
    position: relative;
}

/* O título deixa de se distinguir do resto do cartão: quem clica não está a
   clicar num link, está a clicar no cartão, e um sublinhado a meio dele
   sugere que só ali é que funciona. */
.condition-card-title a,
.problem-card h3 a {
    color: inherit;
    text-decoration: none;
}

/* O cartão inteiro responde ao rato, e não só ao passar por cima do texto. */
.problem-card:hover {
    box-shadow: 0 14px 34px rgba(139, 94, 102, 0.12);
    transform: translateY(-2px);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.condition-card:hover .condition-card-title a,
.problem-card:hover h3 a {
    color: #8b5e66;
}

/* O anel de foco tem de aparecer à volta do cartão e não à volta do texto:
   com o link esticado, é o cartão que a pessoa está a escolher. O `:has` é
   suportado em todos os browsers que este site já exige para o resto. */
.condition-card:has(.stretched-link:focus-visible),
.problem-card:has(.stretched-link:focus-visible) {
    outline: 2px solid #8b5e66;
    outline-offset: 3px;
}

.condition-card .stretched-link:focus-visible,
.problem-card .stretched-link:focus-visible {
    outline: none;
}

/* =========================================================================
   Cartões dos retornos

   Reaproveitavam o `.customer-card`, que é uma lista de pessoas — e um
   retorno não é uma pessoa: é uma data com uma pessoa agarrada. O que o
   cartão tem de responder de relance é "a quem ligo primeiro", e por isso a
   data é o maior número lá dentro.
   ========================================================================= */

.return-card {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-left: 4px solid #d8a7b1;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
}

/* Um atrasado grita, os outros não. Se todos gritassem, nenhum gritava. */
.return-card-late {
    background: #fffaf3;
    border-left-color: #d98c2b;
}

.return-card-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.return-card-identity {
    min-width: 0;
}

.return-card-name {
    color: #2b2b2b;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;
}

.return-card-service {
    color: #6b6b6b;
    font-size: 0.88rem;
    margin: 2px 0 0;
}

.return-card-date {
    align-items: baseline;
    color: #2b2b2b;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 1.05rem;
    margin: 16px 0 0;
}

.return-card-date i {
    color: #8b5e66;
}

.return-card-when {
    color: #6b6b6b;
    font-size: 0.85rem;
}

/* De onde veio e o que o cumpriu. É o histórico, e é a razão de o retorno
   guardar as duas pontas em vez de só a data. */
.return-card-facts {
    display: grid;
    /* `auto 1fr`: a coluna das etiquetas encolhe ao seu conteúdo e a dos
       valores fica com o resto. Duas colunas iguais deixavam metade do cartão
       vazia à esquerda. */
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    font-size: 0.85rem;
    margin: 14px 0 0;
}

.return-card-facts dt {
    color: #6b6b6b;
    font-weight: 500;
}

.return-card-facts dd {
    color: #2b2b2b;
    margin: 0;
}

.return-card-facts a {
    color: #8b5e66;
}

.return-card-notes {
    background: #fff7f9;
    border-radius: 12px;
    color: #6b6b6b;
    font-size: 0.85rem;
    margin: 14px 0 0;
    padding: 10px 12px;
}

/* `margin-top: auto` empurra os botões para o fundo: com cartões de alturas
   diferentes lado a lado, os botões alinham-se entre si em vez de flutuarem
   cada um à sua altura. */
.return-card-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
}

.return-card-actions form {
    margin: 0;
}

/* Depois das regras genéricas: uma media query não acrescenta especificidade,
   e a última a aparecer é a que ganha. */
@media (max-width: 575.98px) {
    .return-card {
        padding: 16px 18px;
    }

    .return-card-actions .btn {
        flex: 1 1 auto;
    }
}

/* Os campos que já vêm decididos, no ecrã de marcar um retorno.

   Parecem um campo de formulário — mesma etiqueta pequena por cima, mesmo
   espaçamento — mas não são: são o que já foi escolhido, e por isso não têm
   caixa nem cursor. Desenhá-los como caixas desativadas convidava a tentar
   clicar. */
.appointment-fixed-fields {
    background: #fff7f9;
    border: 1px solid #f1d5db;
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin-bottom: 20px;
    padding: 14px 18px;
}

.appointment-fixed-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.appointment-fixed-field strong {
    color: #2b2b2b;
    overflow-wrap: anywhere;
}

/* =========================================================================
   Financeiro
   ========================================================================= */

.finance-tile {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-left: 4px solid #d8a7b1;
    border-radius: 18px;
    display: block;
    padding: 20px 22px;
    text-decoration: none;
}

/* O previsto é o que ainda não aconteceu: fica mais apagado do que os
   números que já são factos, para não se confundir com eles. */
.finance-tile-expected {
    background: #fbfbfc;
    border-left-color: #b9b2b5;
}

.finance-tile-expected .finance-tile-value {
    color: #6b6b6b;
}

.finance-tile-in {
    border-left-color: #4f9d69;
}

/* O que está concluído e por cobrar. Fica entre o que entrou e o que saiu
   porque é dinheiro que devia ter entrado: a cor diz que falta, sem gritar
   como um erro. */
.finance-tile-owed {
    border-left-color: #b8860b;
}

.finance-tile-out {
    border-left-color: #d98c2b;
}

.finance-tile-result {
    border-left-color: #8b5e66;
}

/* Um resultado negativo tem de se ver que é negativo antes de alguém ler o
   sinal de menos. */
.finance-tile-negative {
    background: #fff5f5;
    border-left-color: #c0392b;
}

.finance-tile-negative .finance-tile-value {
    color: #c0392b;
}

.finance-tile-label {
    color: #6b6b6b;
    display: block;
    font-size: 0.82rem;
    text-transform: uppercase;
}

.finance-tile-value {
    color: #2b2b2b;
    display: block;
    font-size: 1.7rem;
    margin-top: 4px;
}

.finance-unpaid {
    align-items: center;
    background: #fff7f9;
    border: 1px solid #f1d5db;
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 16px 20px;
}

.finance-unpaid p {
    color: #6b6b6b;
    font-size: 0.86rem;
}

/* As semanas do mês. `align-items: end` para as barras crescerem de baixo
   para cima: crescendo de cima, uma semana fraca parecia uma semana forte
   pendurada. */
.finance-weeks {
    display: grid;
    /* `auto-fit` e não um número fixo: um mês tem cinco ou seis semanas
       civis conforme o dia em que começa, e a grelha acompanha. */
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 10px;
}

.finance-week {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.finance-week-total {
    color: #6b6b6b;
    font-size: 0.72rem;
    text-align: center;
    white-space: nowrap;
}

.finance-week-bar-slot {
    align-items: end;
    display: flex;
    height: 110px;
}

.finance-week-bar {
    background: #d8a7b1;
    border-radius: 6px 6px 0 0;
    /* Sem JavaScript fica no mínimo e não desaparece: os valores continuam
       escritos por cima de cada barra. */
    height: 2px;
    width: 100%;
}

.finance-week-name {
    color: #6b6b6b;
    font-size: 0.72rem;
    text-align: center;
}


/* Depois das regras genéricas: uma media query não acrescenta especificidade,
   e a última a aparecer é a que ganha. */
@media (max-width: 575.98px) {
    /* Três semanas por linha: cinco ou seis lado a lado num telemóvel são
       riscos com o valor por cima que ninguém lê. O `auto-fit` acima já
       reduziria, mas deixava-as demasiado estreitas para o número caber. */
    .finance-weeks {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 16px;
    }

    .finance-week-bar-slot {
        height: 80px;
    }

    .finance-tile-value {
        font-size: 1.3rem;
    }
}

/* Os atendimentos por concluir, no topo do dashboard operacional.

   Chamam mais a atenção do que tudo o resto porque travam tudo o resto:
   enquanto uma marcação não for concluída, não gera retorno, não entra no que
   está por receber e não conta para a receita.

   Vivem aqui e não no financeiro porque concluir é trabalho de agenda: quem
   olha para as contas quer ver o que já aconteceu, não arrumar o que falta
   registar. */
.pending-completion {
    background: #fffaf3;
    border: 1px solid #f0d9b8;
    border-left: 4px solid #d98c2b;
    border-radius: 18px;
    padding: 18px 22px;
}

.pending-completion-head h2 {
    color: #8a5a12;
}

.pending-completion-head p {
    color: #6b6b6b;
    font-size: 0.86rem;
}

.pending-completion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.pending-completion-list li {
    align-items: center;
    background: #ffffff;
    border: 1px solid #f0d9b8;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 14px;
}

.pending-completion-list form {
    margin: 0;
}

.pending-completion-who {
    min-width: 0;
}

.pending-completion-who a {
    color: #2b2b2b;
    font-weight: 600;
    text-decoration: none;
}

.pending-completion-when {
    color: #6b6b6b;
    display: block;
    font-size: 0.82rem;
}

/* Depois das regras genéricas: uma media query não acrescenta especificidade,
   e a última a aparecer é a que ganha. */
@media (max-width: 575.98px) {
    .pending-completion {
        padding: 16px 18px;
    }

    .pending-completion-list .btn {
        width: 100%;
    }
}

/* As duas contas, debaixo do gráfico do mês.

   Maiores do que os cartões de cima porque respondem a outra pergunta: os de
   cima dizem como correu o mês, estes dizem onde está o dinheiro. */
.finance-account {
    background: #ffffff;
    border: 1px solid #f1d5db;
    border-radius: 18px;
    padding: 22px 24px;
}

.finance-account-invest {
    background: #f6f8fb;
    border-color: #d7e0ec;
}

.finance-account-free {
    background: #f5faf6;
    border-color: #cfe4d4;
}

/* Disponível negativo quer dizer que as despesas passaram o que sobrou. É o
   mês que interessa ver, e por isso é o que se vê primeiro. */
.finance-account-negative {
    background: #fff5f5;
    border-color: #f0cccc;
}

.finance-account-negative .finance-account-value {
    color: #c0392b;
}

.finance-account-label {
    color: #6b6b6b;
    display: block;
    font-size: 0.82rem;
    text-transform: uppercase;
}

.finance-account-value {
    color: #2b2b2b;
    display: block;
    font-size: 2rem;
    margin: 4px 0;
}

.finance-account-link,
.finance-account-note {
    color: #6b6b6b;
    display: block;
    font-size: 0.8rem;
}

.finance-account-link {
    color: #8b5e66;
}