/* =====================================================================================================
   Sophium Calívia — identidade visual "Premium Contemporâneo" (Stage C1b-A).
   Fonte única dos tokens visuais do painel. As cores do MudBlazor vêm de Theme/CaliviaTheme.cs (mesmos
   valores); aqui ficam superfícies, bordas, sombras, espaçamentos, tipografia da marca, estados e foco.
   Contrastes (WCAG 2.2 AA) registrados no CLAUDE.md — conferir antes de trocar uma cor.
   ===================================================================================================== */

:root {
    /* Paleta oficial */
    --cv-sage: #365C50;            /* Verde Sálvia Profundo */
    --cv-sage-night: #264239;      /* Sálvia Noturno (hover) */
    --cv-champagne: #D8B5A5;       /* Champagne Rosé: só decorativo em fundo claro */
    --cv-burnt-rose: #9E6B58;      /* Rosé Queimado: texto grande e ícones */
    --cv-burnt-rose-text: #8F5F4D; /* Rosé para texto pequeno (5,37:1 em branco) */
    --cv-ivory: #FAF8F5;           /* Marfim Aquecido: fundo */
    --cv-surface: #FFFFFF;
    --cv-sage-mist: #E8EFEA;       /* Sálvia Claro */
    --cv-ink: #29332F;             /* Grafite Floresta */
    --cv-ink-soft: #5C6B64;        /* Grafite Suave */

    /* Derivados */
    --cv-line: #E2E7E3;            /* bordas de superfícies (decorativas) */
    --cv-line-strong: #7A8C84;     /* limites de componentes interativos (3,55:1) */
    --cv-sage-tint: #F1F5F2;       /* fundo de cabeçalhos de tabela e realces leves */
    --cv-rose-tint: #F6EEEA;       /* fundo do realce rosé */
    --cv-on-sage: #FFFFFF;         /* texto sobre o verde (7,49:1) */
    --cv-on-sage-soft: #C9D6CF;    /* texto auxiliar sobre o verde (4,99:1) */
    --cv-champagne-on-sage: #E6CDC1; /* champagne para texto pequeno sobre o verde (4,95:1) */

    /* Estados (texto sobre o fundo tingido correspondente ≥ 4,5:1) */
    --cv-success: #2E7D32; --cv-success-bg: #EEF6EF;
    --cv-warning: #B45309; --cv-warning-bg: #FEF5E7;
    --cv-error: #B42318;   --cv-error-bg: #FDEDEB;
    --cv-info: #2563A6;    --cv-info-bg: #EAF1F9;
    --cv-neutral: #5C6B64; --cv-neutral-bg: #EEF1EF;

    /* Forma */
    --cv-radius-sm: 8px;
    --cv-radius: 10px;
    --cv-radius-lg: 14px;
    --cv-shadow-sm: 0 1px 2px rgba(41, 51, 47, 0.04), 0 1px 3px rgba(41, 51, 47, 0.05);
    --cv-shadow-md: 0 4px 14px rgba(41, 51, 47, 0.07);

    /* Espaçamento (escala de 4 px) */
    --cv-space-1: 4px;
    --cv-space-2: 8px;
    --cv-space-3: 12px;
    --cv-space-4: 16px;
    --cv-space-5: 24px;
    --cv-space-6: 32px;

    /* Tipografia */
    --cv-font-ui: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cv-font-brand: "Playfair Display", Georgia, "Times New Roman", serif; /* acentos corretos no Chromium (a Cormorant os desloca) */

    /* Foco */
    --cv-focus: #365C50;
}

body { background: var(--cv-ivory); color: var(--cv-ink); font-family: var(--cv-font-ui); -webkit-font-smoothing: antialiased; }

/* ---- Foco visível (teclado) ---- */
:focus-visible { outline: 2px solid var(--cv-focus); outline-offset: 2px; border-radius: 4px; }
.mud-drawer :focus-visible { outline-color: var(--cv-champagne); }

/* ---- Marca: assinatura tipográfica provisória (substituível pelo logotipo oficial) ---- */
.cv-brand { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; color: inherit; }
.cv-brand__name { font-family: var(--cv-font-brand); font-size: 26px; font-weight: 600; letter-spacing: 0.005em; }
.cv-brand__by { margin-top: 3px; font-family: var(--cv-font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; }
.cv-brand--on-sage .cv-brand__name { color: var(--cv-on-sage); }
.cv-brand--on-sage .cv-brand__by { color: var(--cv-champagne-on-sage); }
.cv-brand--on-light .cv-brand__name { color: var(--cv-sage); }
.cv-brand--on-light .cv-brand__by { color: var(--cv-burnt-rose-text); }

/* ---- Barra superior ---- */
.cv-appbar.mud-appbar { border-bottom: 1px solid var(--cv-line); box-shadow: none; }
.cv-appbar__clinic { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cv-appbar__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cv-ink-soft); }
.cv-appbar__name { font-size: 15px; font-weight: 600; color: var(--cv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-avatar.mud-avatar { background: var(--cv-champagne); color: var(--cv-sage-night); font-weight: 600; font-size: 14px; }
.cv-account-button { display: inline-flex; align-items: center; gap: var(--cv-space-2); padding: 4px 6px 4px 4px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--cv-ink); font: inherit; cursor: pointer; }
.cv-account-button:hover { background: var(--cv-sage-tint); border-color: var(--cv-line); }
.cv-account-name { font-size: 14px; font-weight: 500; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-menu-header { padding: 12px 16px 8px; }
.cv-menu-header__name { font-weight: 600; color: var(--cv-ink); }
.cv-menu-header__role { font-size: 12px; color: var(--cv-ink-soft); }
.cv-menu-form { display: block; width: 100%; margin: 0; }
.cv-menu-form button { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 8px 16px; border: 0; background: none; color: var(--cv-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.cv-menu-form button:hover { background: var(--cv-sage-tint); }

/* ---- Menu lateral (verde sálvia) ---- */
.cv-drawer.mud-drawer { border-right: 0; }
.cv-drawer__brand { display: flex; align-items: center; height: 64px; padding: 0 var(--cv-space-5); border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.cv-drawer .mud-navmenu { padding: var(--cv-space-3) var(--cv-space-3) var(--cv-space-5); }
.cv-drawer .mud-nav-link { margin: 2px 0; padding: 9px 12px; border-radius: var(--cv-radius-sm); color: rgba(255, 255, 255, 0.90); font-size: 14px; font-weight: 500; transition: background-color .12s ease; }
.cv-drawer .mud-nav-link .mud-nav-link-icon { color: var(--cv-on-sage-soft); font-size: 20px; }
.cv-drawer .mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) { background-color: rgba(255, 255, 255, 0.08); color: #fff; }
.cv-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.cv-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover { background-color: rgba(255, 255, 255, 0.15); color: #fff; box-shadow: inset 3px 0 0 var(--cv-champagne); }
.cv-drawer .mud-navmenu .mud-nav-link.active .mud-nav-link-icon { color: #fff; }
.cv-nav-section { margin: var(--cv-space-4) 12px var(--cv-space-1); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cv-on-sage-soft); }
.cv-nav-section:first-child { margin-top: var(--cv-space-1); }
/* Contador da Central no menu: champagne com texto grafite; alerta em vermelho de erro com texto branco (6,5:1). */
.cv-drawer .mud-nav-link .mud-nav-link-text { display: flex; align-items: center; gap: 8px; }
.cv-nav-count { display: inline-block; flex: none; min-width: 22px; margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--cv-champagne); color: var(--cv-ink); font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
.cv-nav-count--alert { background: var(--cv-error); color: #fff; }

/* ---- Superfícies: cartões, painéis e tabelas ---- */
.mud-paper-outlined, .mud-card.mud-paper-outlined, .mud-table-outlined, .mud-tabs-rounded.mud-paper-outlined {
    border-color: var(--cv-line) !important;
    border-radius: var(--cv-radius-lg) !important;
    background-color: var(--cv-surface);
    box-shadow: var(--cv-shadow-sm);
}
.mud-table-outlined .mud-table-head .mud-table-cell { background: var(--cv-sage-tint); color: var(--cv-ink-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.mud-table-outlined .mud-table-head .mud-table-cell:first-child { border-top-left-radius: var(--cv-radius-lg); }
.mud-table-outlined .mud-table-head .mud-table-cell:last-child { border-top-right-radius: var(--cv-radius-lg); }
.mud-button-filled.mud-button-filled-primary:hover { background-color: var(--cv-sage-night); }
.mud-alert-outlined { border-radius: var(--cv-radius); }
.mud-breadcrumbs { font-size: 13px; color: var(--cv-ink-soft); }
.mud-breadcrumbs .mud-breadcrumb-item.mud-disabled > a { color: var(--cv-ink-soft); }
.mud-tab { text-transform: none; font-weight: 500; }

/* ---- Cabeçalho de página ---- */
.cv-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cv-space-3) var(--cv-space-5); margin-bottom: var(--cv-space-5); }
.cv-page-header__text { flex: 1 1 320px; min-width: 0; }
.cv-page-header__eyebrow { margin: 0 0 var(--cv-space-1); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cv-burnt-rose-text); }
.cv-page-header__title { margin: 0; font-size: 1.75rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--cv-ink); }
.cv-page-header__subtitle { margin: var(--cv-space-1) 0 0; max-width: 760px; font-size: 0.9375rem; line-height: 1.55; color: var(--cv-ink-soft); }
.cv-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--cv-space-2); }

/* Título de seção dentro de cartões */
.cv-section-title { display: flex; align-items: center; gap: var(--cv-space-2); margin: 0 0 var(--cv-space-1); font-size: 1.0625rem; font-weight: 600; color: var(--cv-ink); }
.cv-section-title .mud-icon-root { color: var(--cv-sage); }
.cv-section-hint { margin: 0 0 var(--cv-space-4); font-size: 0.875rem; line-height: 1.5; color: var(--cv-ink-soft); }

/* ---- Badges de estado (sempre com texto; ícone quando ajuda) ---- */
.cv-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.cv-badge .mud-icon-root { font-size: 15px; }
.cv-badge--success { color: var(--cv-success); background: var(--cv-success-bg); }
.cv-badge--warning { color: var(--cv-warning); background: var(--cv-warning-bg); }
.cv-badge--error { color: var(--cv-error); background: var(--cv-error-bg); }
.cv-badge--info { color: var(--cv-info); background: var(--cv-info-bg); }
.cv-badge--neutral { color: var(--cv-neutral); background: var(--cv-neutral-bg); }
.cv-badge--brand { color: var(--cv-sage-night); background: var(--cv-champagne); }

/* ---- Início: boas-vindas e roteiro de configuração ---- */
.cv-welcome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cv-space-5); padding: var(--cv-space-6); margin-bottom: var(--cv-space-6); border: 1px solid var(--cv-line); border-radius: var(--cv-radius-lg); background: linear-gradient(135deg, #FFFFFF 0%, var(--cv-sage-tint) 100%); box-shadow: var(--cv-shadow-sm); }
.cv-welcome__text { flex: 1 1 340px; min-width: 0; }
.cv-welcome__title { margin: 0; font-family: var(--cv-font-brand); font-size: 2rem; font-weight: 500; line-height: 1.15; color: var(--cv-sage); }
.cv-welcome__lead { margin: var(--cv-space-2) 0 0; font-size: 1rem; line-height: 1.55; color: var(--cv-ink-soft); }
.cv-welcome__concept { margin: var(--cv-space-3) 0 0; font-size: 13px; color: var(--cv-burnt-rose-text); font-weight: 500; }
.cv-progress { flex: 0 1 280px; min-width: 220px; }
.cv-progress__label { display: flex; justify-content: space-between; margin-bottom: var(--cv-space-2); font-size: 14px; color: var(--cv-ink); }
.cv-progress__label b { color: var(--cv-sage); }
.cv-setup-card { display: flex; flex-direction: column; height: 100%; padding: var(--cv-space-5); border: 1px solid var(--cv-line); border-radius: var(--cv-radius-lg); background: var(--cv-surface); box-shadow: var(--cv-shadow-sm); transition: box-shadow .15s ease, border-color .15s ease; }
.cv-setup-card:hover { box-shadow: var(--cv-shadow-md); border-color: #D3DCD6; }
.cv-setup-card__head { display: flex; align-items: center; gap: var(--cv-space-3); margin-bottom: var(--cv-space-3); }
.cv-setup-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--cv-sage-mist); color: var(--cv-sage); }
.cv-setup-card__step { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cv-ink-soft); }
.cv-setup-card__title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--cv-ink); }
.cv-setup-card__text { flex: 1; margin: 0 0 var(--cv-space-4); font-size: 0.875rem; line-height: 1.5; color: var(--cv-ink-soft); }
.cv-setup-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--cv-space-2); }

/* ---- Prévia do que a assistente responde (não é campo de edição) ---- */
.cv-preview { display: flex; gap: var(--cv-space-3); align-items: flex-start; }
.cv-preview__avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--cv-champagne); color: var(--cv-sage-night); font-family: var(--cv-font-brand); font-size: 16px; font-weight: 600; }
.cv-preview__bubble { position: relative; max-width: 520px; padding: 10px 14px; border-radius: 4px 14px 14px 14px; background: var(--cv-sage-mist); color: var(--cv-ink); font-size: 0.9375rem; line-height: 1.5; }
.cv-preview__muted { color: var(--cv-ink-soft); font-style: italic; }
.cv-preview-label { display: flex; align-items: center; gap: 6px; margin: var(--cv-space-4) 0 var(--cv-space-2); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cv-ink-soft); }

/* ---- Agenda ---- */
.cv-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-time__start { font-size: 1rem; font-weight: 700; color: var(--cv-ink); }
.cv-time__end { font-size: 0.8125rem; color: var(--cv-ink-soft); }
.cv-professional { display: inline-flex; align-items: center; gap: var(--cv-space-2); }
.cv-professional__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--cv-champagne); box-shadow: 0 0 0 2px var(--cv-rose-tint); }
.cv-row-closed td { opacity: 0.72; }

/* ---- Rodapé ---- */
.calivia-footer { margin-top: var(--cv-space-6); padding-top: var(--cv-space-3); border-top: 1px solid var(--cv-line); }
.calivia-support { margin: var(--cv-space-2) 0 0; font-size: 13px; color: var(--cv-ink-soft); }
.calivia-support a { color: var(--cv-sage); }

/* ---- Login (página estática) ---- */
.login-page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--cv-ivory); font-family: var(--cv-font-ui); color: var(--cv-ink); }
.login-hero { display: none; }
.login-panel { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 32px 16px; }
.login-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 8px; }
.login-card .cv-brand { margin-bottom: 28px; }
.login-title { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--cv-ink); letter-spacing: -0.01em; }
.login-subtitle { margin: 0 0 16px; color: var(--cv-ink-soft); font-size: 15px; }
.login-card label { font-size: 14px; font-weight: 500; color: var(--cv-ink); margin-top: 6px; }
.login-card input[type=email], .login-card input[type=password] {
    width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 14px;
    border: 1px solid var(--cv-line-strong); border-radius: var(--cv-radius); background: #fff;
    font: inherit; font-size: 16px; /* evita zoom automático no iOS */ color: var(--cv-ink);
}
.login-card input:focus { outline: 2px solid var(--cv-sage); outline-offset: 1px; border-color: var(--cv-sage); }
.login-card button { margin-top: 16px; min-height: 48px; border: none; border-radius: var(--cv-radius); background: var(--cv-sage); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.login-card button:hover { background: var(--cv-sage-night); }
.login-card button:focus-visible { outline: 2px solid var(--cv-sage-night); outline-offset: 2px; }
.login-alert { padding: 10px 12px; border-radius: var(--cv-radius-sm); background: var(--cv-error-bg); color: var(--cv-error); font-size: 14px; }
.login-alert-info { background: var(--cv-sage-tint); color: var(--cv-sage); }
.login-help { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--cv-ink-soft); }
.login-card .calivia-support { margin-top: 4px; }
.login-card a { color: var(--cv-sage); }

@media (min-width: 768px) {
    .login-page { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); background: #fff; }
    .login-hero { display: flex; flex-direction: column; justify-content: space-between; padding: 48px; background: var(--cv-sage); color: var(--cv-on-sage); }
    .login-hero .cv-brand__name { font-size: 34px; }
    .login-hero-concept { margin: 0; max-width: 360px; font-family: var(--cv-font-brand); font-size: 27px; font-weight: 500; line-height: 1.3; color: #fff; }
    .login-hero-text { margin: 16px 0 0; max-width: 360px; font-size: 15px; line-height: 1.6; color: var(--cv-on-sage-soft); }
    .login-hero-rule { width: 48px; height: 2px; margin-bottom: 20px; background: var(--cv-champagne); }
    .login-panel { padding: 48px 40px; }
}

/* ---- Responsividade ---- */
@media (max-width: 599.98px) {
    .cv-page-header { align-items: flex-start; }
    .cv-page-header__title { font-size: 1.5rem; }
    .cv-page-header__actions, .cv-page-header__actions .mud-button-root { width: 100%; }
    .cv-welcome { padding: var(--cv-space-5); }
    .cv-welcome__title { font-size: 1.75rem; }
    .cv-progress { flex-basis: 100%; }
    .mud-main-content .mud-container { padding-left: 12px; padding-right: 12px; }
}

/* Agenda e tabelas em telas estreitas (abaixo do breakpoint Sm do MudBlazor): cada célula vira bloco, com o rótulo
   acima do valor, para horário, cliente, situação e selos caberem no cartão sem corte nem rolagem horizontal. */
@media (max-width: 599.98px) {
    .agenda-table .mud-table-cell { display: block !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; }
    .agenda-table .mud-table-cell::before { display: block; padding: 0 0 2px; font-size: 12px; color: var(--cv-ink-soft); }
    .agenda-table .mud-table-cell:empty { display: none !important; }
    .agenda-table .mud-chip { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; }
}