@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500;700&family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@1,700&display=swap');

:root {
    /* KineSaúde palette — teal / blue-slate family, matching kinesaude.com
       (accent ~#649cb0, dark ~#4389a2/#337e98, dark sections ~#0c121e,
       soft fills ~#dee7ea). Variable names are kept from the PsicoSolution
       original to avoid a churn across the whole file; "mauve"/"mint" now
       hold teals. Button/link teals are nudged a shade darker than the
       site's for readable white-on-colour text. */
    --color-bg: #f4f7f8;
    --color-surface: #ffffff;
    --color-mint: #a9cdd9;
    --color-mint-dark: #8ab8c6;
    --color-lilac: #dfe8eb;
    --color-mauve: #47869a;
    --color-mauve-dark: #356d80;
    --color-dark: #16232e;
    --color-primary: #47869a;
    --color-primary-dark: #356d80;
    --color-text: #2b3138;
    --color-text-muted: #66727d;
    --color-text-on-dark: #eef3f5;
    --color-border: #dbe3e7;
    --color-error-bg: #fbe4e1;
    --color-error-text: #a33a2f;
    --color-success-bg: #e3f0e6;
    --color-success-text: #2f6b3e;
    --radius: 14px;
    --radius-pill: 999px;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.1);
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display: 'Roboto Slab', Georgia, serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
}

a {
    color: var(--color-mauve-dark);
}

/* --- Buttons shared --- */

.btn-primary,
.btn-primary-link {
    display: inline-block;
    padding: 12px 28px;
    background: var(--color-mauve);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn-primary:hover,
.btn-primary-link:hover {
    background: var(--color-mauve-dark);
    transform: translateY(-1px);
}

.btn-on-dark {
    background: var(--color-mint);
    color: var(--color-dark);
}

.btn-on-dark:hover {
    background: var(--color-mint-dark);
}

/* --- Auth (login) --- */

.auth-page {
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(160deg, var(--color-lilac) 0%, var(--color-bg) 45%);
}

.auth-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--color-mauve-dark);
    text-decoration: none;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-mint) 0%, var(--color-lilac) 100%);
    box-shadow: var(--shadow);
}

.brand-name {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
}

.brand-city {
    font-size: 0.6em;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.tagline {
    margin: 0 0 28px;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.auth-form label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 6px;
    margin-top: 16px;
    color: var(--color-text-muted);
}

.auth-form input[type="text"],
.auth-form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--color-mauve);
}

.auth-form .btn-primary {
    margin-top: 24px;
    width: 100%;
}

.alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.alert-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.alert-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

/* --- Topbar (app pages) --- */

.topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.topbar .brand {
    margin: 0;
    font-size: 1.2rem;
}

.topbar nav a {
    color: var(--color-mauve-dark);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.topbar nav a:hover {
    text-decoration: underline;
}

/* "Volver al inicio" / "Volver atrás" bar — fragments/page-nav.html,
   included below the header on every page except landing.html. */
.page-nav {
    display: flex;
    gap: 20px;
    padding: 10px 32px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.page-nav-link {
    color: var(--color-mauve-dark);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.page-nav-link:hover {
    text-decoration: underline;
}

.logout-form {
    display: flex;
    align-items: center;
    gap: 16px;
}

.welcome {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.role-badge {
    display: inline-block;
    background: var(--color-lilac);
    color: var(--color-mauve-dark);
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    margin-right: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-mauve-dark);
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: underline;
    padding: 0;
    font-family: inherit;
}

/* --- Dashboard --- */

.dashboard-grid {
    max-width: 900px;
    margin: 48px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.dashboard-banner {
    grid-column: 1 / -1;
}

.dashboard-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    border-top: 4px solid var(--color-mint);
    box-shadow: var(--shadow);
    padding: 28px;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: block;
}

.dashboard-card:nth-child(even) {
    border-top-color: var(--color-lilac);
}

.dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
}

.dashboard-card h2 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    color: var(--color-mauve-dark);
    font-size: 1.15rem;
}

.dashboard-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.dashboard-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Cuadro de mandos --- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.stat-tile {
    background: var(--color-surface);
    border-radius: var(--radius);
    border-top: 4px solid var(--color-mint);
    box-shadow: var(--shadow);
    padding: 20px 24px;
}

.stat-tile:nth-child(even) {
    border-top-color: var(--color-lilac);
}

.stat-tile h3 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    color: var(--color-mauve-dark);
    font-size: 0.95rem;
}

.stat-number {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
}

/* --- Landing --- */

.landing-header {
    background: var(--color-surface);
    padding: 20px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.landing-header .brand {
    margin: 0;
    font-size: 1.3rem;
}

.landing-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.landing-nav a:not(.btn-primary-link) {
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
}

.landing-nav a:not(.btn-primary-link):hover {
    color: var(--color-mauve-dark);
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9aa7ae;
    font-size: 0.82rem;
}

.lang-switch a {
    color: #78868d;
    font-weight: 600;
    text-decoration: none;
}

.lang-switch a:hover {
    color: var(--color-mauve-dark);
}

.lang-switch a.active {
    color: var(--color-text);
    text-decoration: underline;
}

.landing-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 24px 88px;
    text-align: center;
}

.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(250, 247, 242, 0.5) 0%, rgba(250, 247, 242, 0.87) 60%, rgba(250, 247, 242, 0.97) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-mauve-dark);
    box-shadow: var(--shadow);
}

.landing-hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-mauve);
    font-size: 2.75rem;
    line-height: 1.22;
}

.landing-hero p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    font-size: 1.02rem;
    box-shadow: var(--shadow-lift);
}

.service-hero {
    padding-bottom: 40px;
}

.service-hero h1 {
    margin-bottom: 24px;
}

.landing-hero p.service-description {
    max-width: 640px;
    margin: 0 auto 20px;
    text-align: justify;
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.landing-hero p.service-price {
    margin: 0 0 28px;
}

.landing-band {
    background: var(--color-mint);
    padding: 40px 24px;
    text-align: center;
}

.landing-band p {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--color-dark);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.landing-band .btn-primary-link {
    background: var(--color-dark);
}

.landing-band .btn-primary-link:hover {
    background: #000;
}

.services-section {
    background: var(--color-lilac);
    padding: 64px 24px;
}

.services-section h2 {
    text-align: center;
    font-family: var(--font-display);
    color: var(--color-dark);
    font-size: 1.6rem;
    margin: 0 0 32px;
}

.services-grid {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    /* Auto-wraps: 5 equal columns on desktop, down to 2 on a phone —
       never a single squeezed nowrap row. */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.service-card {
    display: block;
    min-width: 0;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 14px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.service-card:hover {
    transform: translateY(-3px);
}

.service-card h3 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--color-mauve-dark);
    font-size: 1rem;
    font-weight: 500;
}

.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(71, 134, 154, 0.12);
}

.office-photo-section {
    padding: 64px 24px;
    background: var(--color-bg);
}

.office-photo-frame {
    max-width: 1100px;
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
}

.office-photo {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.landing-footer {
    background: var(--color-dark);
    color: var(--color-text-on-dark);
    padding: 32px;
    text-align: center;
}

.landing-footer p {
    margin: 0;
    color: #9aa7ae;
    font-size: 0.85rem;
}

.landing-footer a {
    color: var(--color-mint);
}

.footer-portal-links {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.btn-footer-link {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid rgba(242, 240, 235, 0.3);
    border-radius: var(--radius-pill);
    color: var(--color-text-on-dark);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.btn-footer-link:hover {
    border-color: var(--color-mint);
    color: var(--color-mint);
}

.map-frame {
    padding: 0;
    overflow: hidden;
}

.map-frame iframe {
    display: block;
}

@media (max-width: 480px) {
    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .landing-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .landing-nav {
        flex-wrap: wrap;
        gap: 14px;
    }

    .landing-hero {
        padding: 56px 22px 52px;
    }

    .landing-hero h1 {
        font-size: 1.8rem;
    }

    .services-section {
        padding: 48px 16px;
    }

    .services-grid {
        /* Phones: a predictable 2-up grid (2 + 2 + 1) rather than letting
           auto-fit drop to a single column on the narrowest devices. */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .service-card {
        padding: 18px 10px;
    }

    .service-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    .service-icon svg {
        width: 18px;
        height: 18px;
    }

    .service-card h3 {
        font-size: 0.8rem;
    }

    .office-photo {
        height: 220px;
    }
}

/* --- App content pages (tasks, appointments) --- */

.page-content {
    max-width: 760px;
    margin: 40px auto;
    padding: 0 24px 48px;
}

/* Wider variant for pages built around a data table (patient records,
   appointments, admin listings): the 760px default is sized for forms
   and reads as cramped once a table with several columns sits inside
   it, even though the surrounding page has plenty of unused width to
   give. Still shrinks like any max-width container on narrower
   viewports — this only changes the ceiling on medium/large screens. */
.page-content--wide {
    max-width: 1100px;
}

.page-content h1 {
    font-family: var(--font-display);
    color: var(--color-mauve-dark);
    font-size: 1.8rem;
    margin-bottom: 24px;
}

.card-panel {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-top: 20px;
}

.card-panel h3 {
    margin-top: 0;
    font-family: var(--font-display);
    color: var(--color-mauve-dark);
    font-size: 1.1rem;
}

.backup-codes-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.backup-codes-list code {
    display: block;
    padding: 8px 12px;
    background: var(--color-bg);
    border-radius: 6px;
    text-align: center;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 16px 20px;
    font-size: 1rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

/* Columns that hold free-form text (descriptions, notes, reasons) should
   still wrap normally — only short, single-value columns (names, dates,
   statuses, action buttons) benefit from the nowrap default above, which
   exists to stop the browser's table layout from squeezing breakable
   text like "Juan Perez Gomez" onto multiple lines just because a
   neighboring unbreakable column (e.g. an email address) claimed more
   width. */
.data-table td.cell-wrap {
    white-space: normal;
}

.data-table th {
    background: var(--color-lilac);
    color: var(--color-dark);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.95rem;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table .completada {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.chat-thread {
    max-height: 360px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.chat-message {
    background: var(--color-lilac);
    border-radius: var(--radius);
    padding: 10px 16px;
    margin-bottom: 10px;
}

.chat-message p {
    margin: 4px 0;
}

.chat-message strong {
    font-family: var(--font-display);
    color: var(--color-mauve-dark);
}

.chat-message span {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-left: 8px;
}

.form-row {
    margin: 14px 0;
}

.form-row label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Puts two short fields (e.g. selects) side by side instead of stacked,
   for pairs that read naturally as one line — falls back to stacked on
   narrow screens instead of squeezing both into half-width each. */
.form-row-pair {
    display: flex;
    gap: 16px;
}

.form-row-pair > .form-row {
    flex: 1;
    min-width: 0;
}

@media (max-width: 480px) {
    .form-row-pair {
        flex-direction: column;
        gap: 0;
    }
}

input[type="text"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--color-surface);
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-mauve);
}

/* Multi-select checkbox groups (e.g. zona tratada, técnicas aplicadas) —
   mirrors .form-row's spacing/legend styling so a fieldset reads like any
   other form field, not a foreign element. */
fieldset.form-row {
    border: none;
    padding: 0;
}

fieldset.form-row legend {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    padding: 0;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 16px 8px 0;
    font-weight: 400;
    font-size: 0.95rem;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
}

/* min-height gives textareas a usable starting size instead of the
   browser's tiny ~2-row default; resize stays vertical-only so
   dragging bigger never breaks the form's width. */
textarea {
    min-height: 110px;
    resize: vertical;
}

.btn-action {
    cursor: pointer;
    padding: 8px 16px;
    margin-right: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.85rem;
    transition: background 0.15s ease;
}

.btn-action:hover {
    background: var(--color-lilac);
}

.btn-action.danger:hover {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.btn-submit {
    cursor: pointer;
    padding: 10px 24px;
    margin-top: 12px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-mauve);
    color: white;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.15s ease;
}

.btn-submit:hover {
    background: var(--color-mauve-dark);
}

.btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.slot-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    font-size: 0.9rem;
}

.form-error {
    color: var(--color-error-text);
    display: block;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* Honeypot field for the /como-llegar contact form: invisible to a sighted
   visitor (off-screen, unreachable by Tab), but present in the DOM for a
   bot filling every field to fall into — see ContactRequest#getWebsite(). */
.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.success-banner {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.conflict-banner {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* --- Month calendar (professional's own agenda, admin panel) --- */

.calendar-tabs {
    display: flex;
    gap: 8px;
    margin: 20px 0 12px;
}

.calendar-tab {
    padding: 8px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
}

.calendar-tab:hover {
    background: var(--color-lilac);
}

.calendar-tab--active {
    background: var(--color-mauve);
    border-color: var(--color-mauve);
    color: white;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0;
}

.calendar-nav {
    text-decoration: none;
    white-space: nowrap;
}

.calendar-month-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    color: var(--color-mauve-dark);
    font-size: 1.2rem;
    text-transform: capitalize;
}

.calendar-scroll {
    width: 100%;
    overflow-x: auto;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.calendar-weekday {
    background: var(--color-lilac);
    color: var(--color-dark);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.85rem;
    padding: 10px 12px;
    text-align: center;
}

.calendar-day {
    background: var(--color-surface);
    min-height: 110px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendar-day--other-month {
    background: var(--color-bg);
    color: var(--color-text-muted);
}

/* Day view: a single wide cell needs more room to list a full day's appointments. */
.calendar-day--wide {
    min-height: 400px;
}

.calendar-day--today .calendar-day-number {
    background: var(--color-mauve);
    color: white;
    border-radius: 50%;
}

.calendar-day-number {
    align-self: flex-start;
    font-size: 0.85rem;
    font-weight: 600;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-appointment-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--color-lilac);
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 0.78rem;
    line-height: 1.2;
}

.calendar-appointment-time {
    font-weight: 600;
    white-space: nowrap;
}

.calendar-appointment-who {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Flags a patient with a pending payment (see AdminAppointmentController)
   on the admin calendar/list — a small "€" badge rather than a plain dot,
   so it stays identifiable once other status icons (e.g. for sent
   messages) join it here later; each new one gets its own symbol/color
   rather than relying on a shape alone. */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-text-on-dark);
    flex-shrink: 0;
}

.payment-pending-icon {
    background: var(--color-error-text);
}

.calendar-appointment-cancel {
    cursor: pointer;
    border: none;
    background: none;
    color: var(--color-error-text);
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}

.calendar-appointment-cancel:hover {
    font-weight: 700;
}

/* --- Booking date-picker calendar (appointments.html) --- */
/* Compact on purpose, unlike .calendar-day above: a date picker only ever
   shows a day number, never appointment chips, so it doesn't need that
   layout's height. */

.booking-calendar-scroll {
    width: 100%;
    overflow-x: auto;
    margin-top: 10px;
}

.booking-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(44px, 1fr));
    gap: 4px;
}

.booking-calendar-weekday {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 4px 0;
}

.booking-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.9rem;
    background: var(--color-bg);
}

.booking-calendar-day[href]:hover {
    background: var(--color-lilac);
}

.booking-calendar-day--other-month {
    color: var(--color-border);
}

.booking-calendar-day--unbookable {
    color: var(--color-text-muted);
    opacity: 0.45;
}

.booking-calendar-day--selected {
    background: var(--color-mauve);
    color: white;
    font-weight: 600;
}

/* --- Floating WhatsApp button (every page) --- */

.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25d366;
    color: white;
    border-radius: 50%;
    box-shadow: var(--shadow-lift);
    z-index: 1000;
    transition: transform 0.15s ease;
}

.whatsapp-float:hover {
    transform: scale(1.08);
}

@media (max-width: 480px) {
    .whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.chat-widget-toggle {
    position: fixed;
    right: 24px;
    bottom: 92px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-mauve);
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-lift);
    z-index: 1000;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.chat-widget-toggle:hover {
    background: var(--color-mauve-dark);
    transform: scale(1.08);
}

.chat-widget-panel {
    position: fixed;
    right: 24px;
    bottom: 156px;
    width: 320px;
    max-width: calc(100vw - 32px);
    height: 420px;
    max-height: calc(100vh - 180px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lift);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* `display: flex` above has the same specificity as the browser's own
   `[hidden] { display: none }` rule and comes later in the cascade, so it
   silently wins and the panel stays visible even with `hidden` set unless
   this higher-specificity override is here to close it back out. */
.chat-widget-panel[hidden] {
    display: none;
}

.chat-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-mauve);
    color: white;
    font-weight: 600;
}

.chat-widget-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.chat-widget-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-widget-message {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.chat-widget-message-user {
    align-self: flex-end;
    background: var(--color-mint);
    color: var(--color-dark);
}

.chat-widget-message-assistant {
    align-self: flex-start;
    background: var(--color-lilac);
    color: var(--color-dark);
}

.chat-widget-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--color-border);
}

.chat-widget-form input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.chat-widget-form .btn-primary {
    padding: 8px 14px;
}

@media (max-width: 480px) {
    .chat-widget-toggle {
        right: 16px;
        bottom: 72px;
        width: 48px;
        height: 48px;
    }

    .chat-widget-panel {
        right: 16px;
        bottom: 128px;
        width: calc(100vw - 32px);
    }
}