/* ==========================================================================
   SISTEMA DE AGENDAMENTO — FOLHA DE ESTILOS
   --------------------------------------------------------------------------
   Organização:
     1.  Tokens de design (:root)
     2.  Base / reset
     3.  Layout (container, header, footer)
     4.  Botões
     5.  Alertas
     6.  Fluxo do cliente (agendamento)
     7.  Formulários
     8.  Painel (cards, estatísticas, tabelas, badges)
     9.  Calendário (FullCalendar)
    10.  Modais
    11.  Menu lateral + barra superior (painel admin)
    12.  Utilitários e responsividade
   ========================================================================== */

/* ==========================================================================
   1. TOKENS DE DESIGN
   ========================================================================== */
/* Cada variável abaixo representa um "papel" visual do sistema. Os temas
   (theme-sobrio/dark/feminino) reescrevem apenas estes valores, por isso TODA
   cor/forma deve vir daqui em vez de valores literais espalhados pelo arquivo. */
:root {
    /* Superfícies e neutros — hierarquia de fundos, do mais claro ao mais recuado */
    --bg: #f0f0f0;              /* Fundo geral da página */
    --surface: #ffffff;         /* Fundo de cards, modais, barras e tabelas */
    --surface-2: #e8ebed;       /* Superfície levemente recuada (hover, listras) */
    --surface-3: #dde2e4;       /* Superfície mais recuada (blocos discretos) */
    --border: #d8dee1;          /* Borda padrão dos componentes */
    --border-strong: #c5ced1;   /* Borda de maior destaque (inputs, botão secundário) */

    /* Texto (contraste equilibrado: legível sem ser agressivo) */
    --text: #23282d;            /* Texto principal */
    --text-soft: #49535a;       /* Texto secundário, ainda com bom contraste */
    --muted: #69757d;           /* Texto de apoio: legendas, dicas e metadados */

    /* Cor de marca da Anotu — usada em ações e elementos de identidade */
    --primary: #017b89;         /* Cor base de destaque e de ações */
    --primary-strong: #016772;  /* Versão escura, usada em texto sobre fundo claro */
    --primary-soft: #e4f3f5;    /* Fundo suave da marca (chips, destaques leves) */
    --primary-ring: rgba(1, 123, 137, 0.18);  /* Cor do anel de foco (glow) */
    --brand-gradient: linear-gradient(135deg, #017b89 0%, #0297a7 100%);  /* Degradê da marca */
    --accent: #017b89;          /* Alias de destaque (compatibilidade) */
    --secondary: #017b89;       /* Alias de cor secundária (compatibilidade) */

    /* Semânticas — cada estado tem fundo, cor de texto e borda próprias */
    --success: #10b981;
    --success-bg: #e7f7f0;
    --success-text: #0f7a54;
    --danger: #ef4444;
    --danger-bg: #fdecec;
    --danger-text: #b02a2a;
    --warning: #f59e0b;
    --warning-bg: #fef5e7;
    --warning-text: #96610a;
    --info: #3b82f6;
    --info-bg: #eaf1fe;
    --info-text: #2a5db0;

    /* Compatibilidade — mantidos para trechos que ainda usam estes nomes */
    --light: #f0f0f0;
    --dark: #23282d;

    /* Tipografia — corpo e títulos em famílias distintas */
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Formas — escala de cantos arredondados (xs -> pill totalmente arredondado) */
    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius: 13px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* Sombras (em camadas, suaves) — quanto maior o sufixo, maior a elevação */
    --shadow-xs: 0 1px 2px rgba(20, 27, 45, 0.05);
    --shadow-sm: 0 1px 2px rgba(20, 27, 45, 0.04), 0 2px 6px rgba(20, 27, 45, 0.05);
    --shadow: 0 2px 4px rgba(20, 27, 45, 0.04), 0 8px 20px rgba(20, 27, 45, 0.06);
    --shadow-md: 0 6px 24px rgba(20, 27, 45, 0.09);
    --shadow-lg: 0 18px 48px rgba(20, 27, 45, 0.16);
    --ring: 0 0 0 3px var(--primary-ring);  /* Halo de foco reutilizável */

    /* Movimento — curva de aceleração única e duas durações padronizadas */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 0.15s var(--ease);  /* Transições rápidas (hover, cores) */
    --t: 0.22s var(--ease);       /* Transições padrão (movimento, sombra) */

    /* Menu lateral — largura fixa e fundo escuro próprio */
    --sidebar-width: 268px;
    --sidebar-bg: linear-gradient(180deg, #17353a 0%, #10282c 100%);
}

/* ==========================================================================
   1.1 TEMAS DAS PÁGINAS
   --------------------------------------------------------------------------
   O admin escolhe o tema em "Meu Negócio". A escolha vira uma classe
   `theme-<chave>` no <body> (ver templates/base.html) e cada tema reescreve
   os tokens acima. O tema "padrao" é o próprio :root — não precisa de bloco.
   ========================================================================== */

/* TEMA SÓBRIO — grafite/azul-acinzentado, tons neutros e discretos.
   Sobrescreve apenas os tokens que mudam em relação ao tema padrão. */
body.theme-sobrio {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #f2f3f6;
    --surface-3: #e7e9ee;
    --border: #e1e3e9;
    --border-strong: #cfd3dc;

    --text: #1f2733;
    --text-soft: #48505e;
    --muted: #6b7383;

    --primary: #46566e;         /* A marca deixa o índigo e vira azul-acinzentado */
    --primary-strong: #354357;
    --primary-soft: #eef0f4;
    --primary-ring: rgba(70, 86, 110, 0.18);
    --brand-gradient: linear-gradient(135deg, #3b4759 0%, #6b7a91 100%);
    --accent: #46566e;
    --secondary: #46566e;

    --light: #f5f6f8;
    --dark: #1f2733;

    --sidebar-bg: linear-gradient(180deg, #14181f 0%, #232a35 100%);  /* Menu em tom de carvão */
}

/* A faixa superior dos cards de serviço também acompanha o tema */
body.theme-sobrio .service-thumb {
    background: linear-gradient(135deg, #eef0f4 0%, #e3e7ee 100%);
}

/* TEMA ESCURO — fundo escuro para uso noturno. Inverte a lógica de superfícies:
   o "branco" vira uma superfície escura e o texto passa a ser claro. */
body.theme-dark {
    --bg: #0e1320;
    --surface: #161d2c;
    --surface-2: #1b2333;
    --surface-3: #232d42;
    --border: #283349;
    --border-strong: #3a4763;

    --text: #e9edf6;
    --text-soft: #c3cbdc;
    --muted: #8e99af;

    --primary: #6b8afd;         /* Marca clareada para manter legibilidade no escuro */
    --primary-strong: #8aa3ff;
    --primary-soft: #1d2740;
    --primary-ring: rgba(107, 138, 253, 0.28);
    --brand-gradient: linear-gradient(135deg, #5b7cfa 0%, #8b5cf6 100%);
    --accent: #6b8afd;
    --secondary: #6b8afd;

    --light: #161d2c;
    --dark: #e9edf6;

    /* Semânticas adaptadas para superfícies escuras */
    --success-bg: #10312a;
    --success-text: #6ee7b7;
    --danger-bg: #3a1c1c;
    --danger-text: #fca5a5;
    --warning-bg: #3a2c11;
    --warning-text: #fcd34d;
    --info-bg: #16233c;
    --info-text: #93c5fd;

    --sidebar-bg: linear-gradient(180deg, #0a0e18 0%, #131a28 100%);
}

/* Superfícies claras fixas no CSS precisam acompanhar o tema escuro
   (o header e a barra superior são translúcidos e ficariam claros demais). */
body.theme-dark .site-header,
body.theme-dark .topbar {
    background: rgba(14, 19, 32, 0.85);
}

body.theme-dark .service-thumb {
    background: linear-gradient(135deg, #1b2333 0%, #241f38 100%);
}

/* Bordas dos alertas: as cores originais eram pensadas para fundo claro */
body.theme-dark .alert-success { border-color: #1c4a3c; }
body.theme-dark .alert-danger { border-color: #4a2626; }
body.theme-dark .alert-warning { border-color: #4a3a17; }
body.theme-dark .alert-info { border-color: #1f3357; }

/* TEMA FEMININO — rosé e lilás, mais delicado */
body.theme-feminino {
    --bg: #fdf6fa;
    --surface: #ffffff;
    --surface-2: #fbeef5;
    --surface-3: #f7e2ee;
    --border: #f2dbe8;
    --border-strong: #e8c3d8;

    --text: #3a2733;
    --text-soft: #5d4653;
    --muted: #8b7383;

    --primary: #d24f8b;         /* Marca em rosa, mantendo o mesmo papel das ações */
    --primary-strong: #b03a72;
    --primary-soft: #fdeaf3;
    --primary-ring: rgba(210, 79, 139, 0.2);
    --brand-gradient: linear-gradient(135deg, #e0629b 0%, #a855f7 100%);
    --accent: #d24f8b;
    --secondary: #d24f8b;

    --light: #fdf6fa;
    --dark: #3a2733;

    --sidebar-bg: linear-gradient(180deg, #2b1430 0%, #4a1f42 100%);  /* Menu em vinho/lilás */
}

body.theme-feminino .service-thumb {
    background: linear-gradient(135deg, #fdeaf3 0%, #f3e6ff 100%);
}

/* MODO ESCURO DO TOPO — alternado localmente pelo usuário.
   Usa a mesma paleta da marca, mas sobre fundo #202024. */
html.ui-dark-mode {
    --bg: #202024;
    --surface: #2a2b31;
    --surface-2: #30323a;
    --surface-3: #3a3d45;
    --border: #3f434d;
    --border-strong: #555b67;

    --text: #f5f6f7;
    --text-soft: #d7dde1;
    --muted: #aab3b9;

    --primary: #22a8b4;
    --primary-strong: #65c7d0;
    --primary-soft: rgba(1, 123, 137, 0.18);
    --primary-ring: rgba(34, 168, 180, 0.24);
    --brand-gradient: linear-gradient(135deg, #017b89 0%, #22a8b4 100%);

    --light: #2a2b31;
    --dark: #f5f6f7;

    --success-bg: #0f3129;
    --success-text: #7ce4be;
    --danger-bg: #3c1e1f;
    --danger-text: #ffb0b2;
    --warning-bg: #3b3017;
    --warning-text: #ffd46e;
    --info-bg: #173243;
    --info-text: #95d7ff;

    --sidebar-bg: linear-gradient(180deg, #15181d 0%, #101216 100%);
}

html.ui-dark-mode .site-header,
html.ui-dark-mode .topbar {
    background: rgba(32, 32, 36, 0.84);
}

html.ui-dark-mode .site-footer {
    background: #25262b;
}

html.ui-dark-mode .service-thumb {
    background: linear-gradient(135deg, #2d3038 0%, #23262d 100%);
}

html.ui-dark-mode .alert-success { border-color: #1b4b3d; }
html.ui-dark-mode .alert-danger { border-color: #5a2c2d; }
html.ui-dark-mode .alert-warning { border-color: #5a481f; }
html.ui-dark-mode .alert-info { border-color: #28526a; }

/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
/* Reset universal: todos os elementos usam box-sizing previsível (largura já
   inclui padding/borda) e começam sem margens/paddings padrão do navegador. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;  /* Evita "saltos" de zoom no iOS */
    scroll-behavior: smooth;         /* Rolagem suave em âncoras */
}

/* Estilos globais de página: fonte, cor de fundo/texto e suavização */
body {
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Campos de formulário herdam a fonte e o tamanho do contexto */
input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
}

/* Títulos: usam a família de display e um leve "aperto" de letras */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text);
}

/* Escala tipográfica fixa dos títulos */
h1 { font-size: 1.9rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
h4 { font-size: 1rem; }

a { color: var(--primary-strong); }

/* Cor de seleção de texto, discreta e na tonalidade da marca */
::selection {
    background: rgba(1, 123, 137, 0.18);
}

/* Anel de foco acessível para navegação por teclado */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Os campos de formulário têm o próprio realce de foco (borda + anel),
   então removemos o outline padrão para não exibir dois contornos. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.owner-selector select:focus-visible {
    outline: none;
}

/* Scrollbar discreta (Firefox: via propriedades; WebKit: via pseudo-elementos) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    border: 3px solid transparent;   /* Truque: borda transparente "afina" o polegar */
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #bcc3d6; background-clip: content-box; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
/* Container central: limita a largura do conteúdo da área do cliente e
   centraliza na página, com respiro lateral. */
.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --------------------------------------------------------------------------
   HEADER (cliente / profissional)
   -------------------------------------------------------------------------- */
/* Cabeçalho fixo no topo ao rolar, com fundo translúcido e desfoque do que
   passa por baixo (efeito "vidro fosco"). */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
}

/* Logo à esquerda, navegação à direita; quebra em várias linhas se faltar espaço */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.header-spacer {
    display: none;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading);
    color: var(--text);
    text-decoration: none;
}

/* Marca exibida no topo: ícone do sistema dentro de um quadrado claro. */
.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 7px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.logo-mark img {
    width: 100%;
    height: 100%;
    display: block;
}

.logo-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
}

.logo-system-name {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
}

.logo-system-name img {
    display: block;
    width: auto;
    max-width: min(220px, 62vw);
    height: 34px;
    object-fit: contain;
}

.logo-context {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--muted);
}

/* Navegação do topo: botões lado a lado que quebram linha em telas estreitas */
.site-header nav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.user-info {
    color: var(--muted);
    font-size: 0.9rem;
    margin-right: 4px;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
    margin-top: 72px;
    padding: 26px 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.85rem;
}

/* Marca à esquerda, links à direita (empilham quando falta largura) */
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
}

.footer-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.footer-brand-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #98a0b4;
    text-decoration: none;
    font-size: 0.82rem;
    transition: color var(--t-fast);
}

.footer-links a:hover { color: var(--text-soft); }
.footer-links a svg { width: 15px; height: 15px; }

/* ==========================================================================
   4. BOTÕES
   ========================================================================== */
/* Classe base compartilhada por todos os botões: define tamanho mínimo, forma,
   tipografia e transições. As variações (primary/secondary/...) só trocam cor. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), box-shadow var(--t-fast),
                transform var(--t-fast);
}

/* Ícones internos não encolhem e mantêm tamanho uniforme */
.btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Microinteração: sobe levemente no hover e "assenta" no clique */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Botão principal: fundo em degradê da marca + sombra colorida */
.btn-primary {
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 4px 14px rgba(1, 123, 137, 0.32);
}
.btn-primary:hover { box-shadow: 0 8px 22px rgba(1, 123, 137, 0.4); }

/* Botão secundário: fundo neutro com borda, para ações de menor destaque */
.btn-secondary {
    background: var(--surface);
    color: var(--text-soft);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}

/* Variantes semânticas (confirmar/cancelar ações) */
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { box-shadow: 0 6px 18px rgba(239, 68, 68, 0.32); }

/* Botão compacto (usado em tabelas e ações secundárias) */
.btn-sm {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 0.82rem;
    border-radius: var(--radius-xs);
}

/* Ocupa toda a largura do contêiner */
.btn-block { display: flex; width: 100%; }

/* Botão "Voltar": fica acima do conteúdo com um respiro abaixo */
.btn-back {
    margin-bottom: 18px;
    font-size: 0.86rem;
    padding: 8px 14px;
}

/* Botão "Entrar com Google": fundo neutro com a marca colorida do Google.
   Usado como alternativa ao login por senha no painel do programador. */
.btn-google {
    gap: 10px;
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
}

.btn-google:hover {
    background: var(--surface-2);
    border-color: #c3cadb;
}

/* O logotipo do Google mantém um tamanho fixo dentro do botão */
.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Divisor "ou" entre o login por senha e o login com Google */
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* As duas linhas que cercam o texto "ou" */
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ==========================================================================
   5. ALERTAS
   ========================================================================== */
/* Faixa de mensagem (sucesso/erro/aviso/informação). Entra com uma animação
   suave de deslizar de cima. As variações trocam fundo/texto/borda. */
.alert {
    display: flex;
    align-items: center;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    margin: 16px 0;
    font-size: 0.92rem;
    font-weight: 500;
    border: 1px solid transparent;
    animation: slideIn 0.28s var(--ease);
}

/* Animação de entrada do alerta */
@keyframes slideIn {
    from { transform: translateY(-10px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Combinações de cor por tipo de alerta (borda levemente colorida) */
.alert-success { background: var(--success-bg); color: var(--success-text); border-color: #cdeee0; }
.alert-danger  { background: var(--danger-bg);  color: var(--danger-text);  border-color: #f8d7d7; }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: #fbe7c6; }
.alert-info    { background: var(--info-bg);    color: var(--info-text);    border-color: #d5e3fb; }

/* ==========================================================================
   6. FLUXO DE AGENDAMENTO (CLIENTE)
   ========================================================================== */
/* Coluna central que concentra todas as etapas do agendamento */
.booking-flow {
    max-width: 960px;
    margin: 0 auto 40px;
}

/* --------------------------------------------------------------------------
   FOTO DE CAPA DO NEGÓCIO (tela do cliente)
   -------------------------------------------------------------------------- */
/* Faixa de destaque no topo da página da empresa, com a logo/fachada
   cadastrada em "Meu Negócio". Mantém a proporção 12x7 do recorte e recorta
   o excedente (object-fit) sem distorcer a imagem. */
.business-cover {
    margin: 30px 0 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.business-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 12 / 7;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   HERO (destaque da tela do cliente)
   -------------------------------------------------------------------------- */
/* Bloco de destaque no topo, com fundo em degradê da marca */
.hero {
    position: relative;
    overflow: hidden;               /* Mantém o brilho do ::after dentro da caixa */
    margin: 30px 0 8px;
    padding: 46px 48px;
    border-radius: 26px;
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 26px 60px -18px rgba(1, 123, 137, 0.48);
}

/* Brilho suave no canto, no estilo "gradiente moderno" */
.hero::after {
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 66%);
    pointer-events: none;   /* Não intercepta cliques dos textos abaixo */
}

/* "Sobrancelha": pequeno rótulo acima do título */
.hero-eyebrow {
    position: relative;     /* Fica acima do brilho do ::after */
    display: inline-block;
    padding: 6px 13px;
    margin-bottom: 18px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Título do hero: tamanho fluido entre 1.9rem e 2.6rem conforme a largura */
.hero h1 {
    position: relative;
    max-width: 620px;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.15;
    color: #fff;
}

.hero-sub {
    position: relative;
    max-width: 560px;
    margin-top: 12px;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.booking-flow h1 { font-size: 2rem; margin-bottom: 6px; }

.subtitle {
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 28px;
}

/* Cada etapa do fluxo é separada por um respiro no topo */
.step { margin-top: 40px; }

/* Título da etapa com o "chip" numerado à esquerda */
.step h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.step h2 small { font-weight: 500; color: var(--muted); font-size: 0.86rem; }

/* Número da etapa em destaque (círculo com a cor suave da marca) */
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-strong);
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
}

/* Utilitário global de ocultação (usado por templates e pelo JS) */
.hidden { display: none; }

/* Grade responsiva de cards: quantas colunas couberem, com mínimo de 230px */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.card {
    background: var(--surface);
    padding: 22px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

/* Hover: card "levanta" levemente e ganha sombra/borda mais fortes */
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
}

.card h3 { margin-bottom: 8px; }

/* Descrição curta dentro do card */
.card-desc {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

/* Linha de metadados em destaque (ex.: preço/duração) */
.card-meta {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-strong);
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   CARDS DE SERVIÇO E DE PROFISSIONAL (etapas do agendamento)
   -------------------------------------------------------------------------- */
/* Card de serviço: empilha faixa de imagem + corpo; padding zerado porque a
   faixa superior deve tocar as bordas do card. */
.service-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* Faixa superior com ícone — dá "respiro visual" ao card */
.service-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    background: linear-gradient(135deg, #eef1ff 0%, #f3ecff 100%);
    color: var(--primary-strong);
}

.service-thumb svg {
    width: 44px;
    height: 44px;
    transition: transform var(--t);
}

/* Quando o serviço tem imagem cadastrada, a faixa vira um quadrado grande
   (mesma proporção da imagem) e a imagem preenche todo o espaço. */
.service-thumb--image {
    height: auto;
    aspect-ratio: 1 / 1;
    background: var(--surface-2);
}

/* Empresa com FOTO DE CAPA cadastrada (diretório público): para o card não
   ficar alto demais e atrapalhar a navegação, a faixa é exibida como uma tira
   16x9 — praticamente a mesma proporção da imagem original (12x7), então o
   corte é mínimo. Como a imagem é cortada por `object-fit: cover`
   (centralizado), o excesso sai do TOPO e do RODAPÉ, sem distorcer. A imagem
   gravada e o topo da página da empresa seguem em 12x7. */
.service-thumb--cover {
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--surface-2);
}

.service-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Recorta a imagem para preencher sem distorcer */
    transition: transform var(--t);
}

/* Zoom sutil do ícone/imagem quando o mouse passa pelo card inteiro */
.service-card:hover .service-thumb svg { transform: scale(1.1) rotate(-6deg); }
.service-card:hover .service-thumb img { transform: scale(1.05); }

/* Corpo do card: ocupa o espaço restante para que rodapé fique sempre embaixo */
.service-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 22px;
}

/* Rodapé do card: preço à esquerda, botão à direita, alinhado ao fundo */
.service-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;   /* Empurra o rodapé para a base do card */
}

.service-foot .card-meta { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   LISTA DE SERVIÇOS EM LINHAS CLICÁVEIS (etapa 1 do agendamento do cliente)
   Em vez de um card grande por serviço, o cliente vê uma linha por serviço,
   clicável por inteiro (sem botão "Selecionar"). Colunas:
   serviço | valor | tempo | imagem.
   -------------------------------------------------------------------------- */
.service-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 20px 0;
}

/* A linha inteira é um <button>: clicar em qualquer ponto seleciona o serviço.
   O layout segue a divisão pedida pelo usuário:
   1) nome + duração, 2) espaço de respiro, 3) bloco do preço, 4) imagem. */
.service-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(32px, 0.5fr) auto 72px;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 18px 20px;
    /* Superfície e borda seguem o TEMA (claro/escuro). Antes o fundo era
       branco fixo e, no modo escuro, o nome do serviço (texto claro) ficava
       invisível sobre ele. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 10px 26px -20px rgba(15, 23, 42, 0.55);
    color: var(--text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.service-row:hover {
    border-color: rgba(1, 123, 137, 0.2);
    box-shadow: 0 20px 36px -24px rgba(1, 123, 137, 0.34);
    transform: translateY(-2px);
}

.service-row:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}

/* Bloco esquerdo: serviço + duração */
.service-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.service-row-spacer {
    min-height: 1px;
}

.service-row-name {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Bloco do preço: cabeçalho opcional + valor principal */
.service-row-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 128px;
}

.service-row-price-label {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.1;
    white-space: nowrap;
}

.service-row-price {
    color: var(--text);
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
}

.service-row-time {
    color: var(--muted);
    font-size: 0.96rem;
    white-space: nowrap;
}

.service-row-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--surface-2);
    overflow: hidden;
}

.service-row-thumb--image {
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.service-row-thumb--empty {
    background: transparent;
    border: none;
}

.service-row-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Recorta a imagem para preencher sem distorcer */
}

/* Lista de profissionais: uma linha por profissional.
   O card de profissional tem 3 partes fixas (foto + texto + botão "Selecionar");
   se ele for espremido nas várias colunas do `.card-grid` (mínimo de 230px), não
   sobra largura para o nome e o valor do serviço, que passam a transbordar por
   cima do botão. Por isso aqui a grade fica com uma única coluna. */
#professional-list {
    grid-template-columns: 1fr;
}

/* Card de profissional: conteúdo centralizado na vertical */
.professional-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    appearance: none;
    /* Superfície do TEMA (antes era branco fixo e, no modo escuro, o card
       ficava claro com o nome do profissional ilegível). */
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
}

.professional-card:hover {
    border-color: rgba(1, 123, 137, 0.22);
    box-shadow: 0 20px 36px -24px rgba(1, 123, 137, 0.3);
    transform: translateY(-2px);
}

.professional-card:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}

.professional-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.professional-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.professional-card-name {
    font-family: var(--font-heading);
    font-size: 1.04rem;
    font-weight: 700;
}

.professional-card-service {
    margin-top: 4px;
    color: var(--primary-strong);
    font-size: 0.94rem;
    font-weight: 700;
}

.professional-card-action {
    align-self: center;
    white-space: nowrap;
    color: var(--primary-strong);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(1, 123, 137, 0.08);
}

/* Avatar circular com a inicial do profissional (usado quando não há foto) */
.prof-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -6px rgba(1, 123, 137, 0.55);
}

/* Foto de perfil do profissional (proporção 3x4) exibida ao cliente */
.prof-photo {
    width: 72px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

/* Foto do profissional no resumo do agendamento */
.summary-prof {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.summary-prof-photo {
    width: 46px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

/* Versão com a inicial (quando não há foto), na mesma proporção 3x4 */
.summary-prof-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
    background: var(--brand-gradient);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
}

.summary-prof p { margin: 0; }

.professional-card .card-desc {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.92rem;
}

/* Texto de apoio/dica dentro do fluxo */
.hint {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 12px 0;
}

/* Linha de botões de navegação entre etapas (anterior/próximo) */
.step-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   HORÁRIOS DISPONÍVEIS
   -------------------------------------------------------------------------- */
/* Bloco que agrupa os horários de um mesmo dia */
.day-slots {
    background: var(--surface);
    padding: 18px 20px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: box-shadow var(--t), border-color var(--t);
}

.day-slots:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }

/* Cabeçalho do dia: título à esquerda, contador de vagas à direita */
.day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.day-slots h4 { color: var(--text); font-size: 0.98rem; }

/* "Pílula" com a quantidade de horários livres naquele dia */
.day-count {
    padding: 3px 11px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Grade de botões de horário, quebrando linha conforme necessário */
.slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Botão de horário individual */
.btn-slot {
    background: var(--primary-soft);
    color: var(--primary-strong);
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background var(--t-fast), color var(--t-fast),
                transform var(--t-fast), box-shadow var(--t-fast);
}

/* Hover do horário: preenche com a cor da marca */
.btn-slot:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(1, 123, 137, 0.32);
}

/* --------------------------------------------------------------------------
   FILTRO DE CALENDÁRIO (tela do cliente)
   O cliente escolhe um dia específico. A data aparece em um campo com ícone
   de calendário; clicar nele abre o calendário como um popup flutuante.
   Dias sem horários disponíveis (ou já passados) ficam desabilitados.
   -------------------------------------------------------------------------- */
/* Área do campo de data; é o "pai posicionado" do popup do calendário. */
.date-picker {
    position: relative;
    max-width: 420px;
    margin-bottom: 16px;
}

/* Variação usada dentro de formulários (modal "Adicionar evento"): o campo
   ocupa toda a largura disponível e não acrescenta margem inferior. */
.date-picker--field {
    max-width: none;
    margin-bottom: 0;
}

/* Campo que mostra a data escolhida. É um botão: clicar abre/fecha o popup. */
.date-field {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.date-field:hover { border-color: #c3cadb; }

.date-field:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}

/* Rótulo fixo "Data", à esquerda do valor */
.date-field-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Valor da data: ocupa o espaço restante e empurra o ícone para a direita.
   `min-width: 0` permite encolher (e quebrar linha) em telas estreitas. */
.date-field-value { flex: 1; min-width: 0; font-weight: 600; }

/* Ícone de calendário, na cor da marca */
.date-field-icon {
    width: 18px;
    height: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

/* Popup do calendário: flutua logo abaixo do campo, sobre o conteúdo.
   A classe `.hidden` (utilitário global) é usada para exibi-lo/ocultá-lo. */
.cal-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 18px 20px 16px;
}

/* Painel de filtro em formato de cartão. Usado pelos formulários de busca
   (`form.date-filter`) no portal de empresas e no painel master. O antigo
   calendário do cliente agora vive dentro de `.cal-popup`. */
.date-filter {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px 16px;
    margin-bottom: 16px;
    max-width: 420px;
}

/* Cabeçalho do calendário: mês à esquerda e setas de navegação à direita */
.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cal-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--text);
}

/* Duas classes para vencer a especificidade de .icon-btn (definido depois) */
.icon-btn.cal-nav { width: 36px; height: 36px; }
.icon-btn.cal-nav svg { width: 18px; height: 18px; }

/* Semana de 7 colunas: usada tanto pela linha de nomes dos dias quanto pela grade */
.cal-weekdays,
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-weekdays { margin-bottom: 6px; }

/* Nomes dos dias da semana (dom, seg, ter...), em caixa alta */
.cal-weekdays span {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
    text-transform: uppercase;
}

/* Célula de um dia. Quadrada (aspect-ratio 1/1) e não clicável por padrão. */
.cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-soft);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: default;
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), transform var(--t-fast);
}

/* Células de preenchimento antes do dia 1: ocupam lugar sem aparecer */
.cal-day-empty { visibility: hidden; }

/* Dia com horários livres: destacado e clicável */
.cal-day.available {
    background: var(--primary-soft);
    color: var(--primary-strong);
    font-weight: 700;
    cursor: pointer;
}

.cal-day.available:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(1, 123, 137, 0.32);
}

/* Dia sem horários (ou já passado): apagado e sem clique */
.cal-day.disabled {
    color: var(--muted);
    opacity: 0.45;
    cursor: not-allowed;
}

/* Dia de hoje: apenas contorno na cor da marca */
.cal-day.today { border-color: var(--primary); }

/* Dia escolhido pelo cliente: preenchido com o degradê da marca */
.cal-day.selected {
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(1, 123, 137, 0.52);
}

/* Legenda abaixo do calendário explicando as cores */
.cal-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.78rem;
}

.legend-dot {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: var(--primary-soft);
    flex-shrink: 0;
}

/* Aviso de filtro ativo (com botão para voltar a ver todos os dias) */
.filter-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--primary-soft);
    border: 1px solid rgba(1, 123, 137, 0.25);
    color: var(--primary-strong);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.88rem;
    font-weight: 600;
}

/* Duas classes: garante que o aviso realmente some quando oculto */
.filter-status.hidden { display: none; }

/* Botão que parece um link de texto (ex.: "ver todos os dias") */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-strong);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.btn-link:hover { color: var(--primary); }

/* ==========================================================================
   7. FORMULÁRIOS
   ========================================================================== */
/* Cartão central que envolve um formulário isolado (login, cadastro, etc.) */
.form-container {
    max-width: 520px;
    margin: 40px auto;
    background: var(--surface);
    padding: 34px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.form-container h1 {
    font-size: 1.5rem;
    margin-bottom: 24px;
    text-align: center;
}

/* Cada campo do formulário ocupa uma linha com respiro abaixo */
.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-soft);
}

.form-group label small { font-weight: 500; color: var(--muted); }

/* Complemento do rótulo (ex.: "(opcional)") na MESMA linha do texto do
   rótulo. É um <span> para não herdar o `display: block` de `.form-group
   small`, que jogava esse texto para a linha de baixo. */
.form-group label .label-optional {
    font-weight: 500;
    font-size: 0.9em;
    color: var(--muted);
}

/* Campos de texto/select/textarea: mesma aparência base e foco consistente */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

/* O textarea cresce conforme o conteúdo, sem altura mínima imposta */
.form-group textarea { min-height: 0; line-height: 1.55; }

.form-group input::placeholder,
.form-group textarea::placeholder { color: #9aa2b6; }

/* Realce leve no hover do campo */
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: #c3cadb; }

/* Foco: borda na cor da marca + anel suave */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--ring);
}

/* Textos de apoio abaixo dos campos (dicas/explicações) */
.form-group small,
.form-hint {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 5px;
}

/* Linha de seleção (checkbox/radio) — ex.: "Profissional ativo" */
.checkbox-group label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--text);
    cursor: pointer;
}

.checkbox-group small { display: block; color: var(--muted); font-size: 0.8rem; }

/* Checkboxes e radios NÃO herdam o estilo dos campos de texto
   (largura total, borda e padding), que os deixava "quebrados". */
.form-group input[type="checkbox"],
.form-group input[type="radio"],
.checkbox-group input[type="checkbox"],
.weekday-picker input[type="checkbox"],
.overlay-item input[type="checkbox"] {
    width: 17px;
    height: 17px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    accent-color: var(--primary);   /* Cor nativa do check/radio na marca */
    cursor: pointer;
    flex-shrink: 0;
}

/* Barra de botões do formulário (salvar/cancelar) */
.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* Barra de ações CENTRALIZADA, mantendo os botões na mesma linha.
   Usada no bloco "Ações do profissional" da tela de edição. Em telas
   estreitas a quebra de linha é liberada para nada estourar a largura. */
.form-actions-center { justify-content: center; }
.form-actions-center .btn { flex: 0 1 auto; }

@media (min-width: 601px) {
    .form-actions-center { flex-wrap: nowrap; }
}

/* Resumo em destaque (usado na confirmação do agendamento) */
.summary-card {
    background: var(--surface-2);
    padding: 18px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);  /* Faixa lateral destacando o bloco */
}

.summary-card h3 { margin-bottom: 8px; }
.summary-card p { margin: 5px 0; color: var(--text-soft); }

/* Link "Cancelar" abaixo do formulário: ocupa a mesma largura do botão
   principal e ganha um respiro para não ficar colado nele. */
.form-cancel {
    display: flex;
    width: 100%;
    margin-top: 12px;
}

/* Caixa informativa (tom azul) para orientações ao usuário */
.info-box {
    background: var(--info-bg);
    padding: 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--info-text);
}

/* Aviso de ambiente de teste/desenvolvimento (tom de alerta) */
.test-hint {
    background: var(--warning-bg);
    padding: 14px;
    border-radius: var(--radius-sm);
    margin-top: 22px;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--warning-text);
}

/* Exibição de código (ex.: código de confirmação), com letras espaçadas */
.code-display {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary-strong);
    letter-spacing: 4px;
}

.success-box { text-align: center; }

/* Aviso de confirmação e botão final: espaçamento para não ficarem colados */
.success-note { margin-top: 4px; }

.success-action {
    display: inline-flex;
    margin-top: 24px;
}

/* Círculo verde com o ícone de sucesso */
.success-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
}

.success-icon svg { width: 38px; height: 38px; }

/* ==========================================================================
   8. PAINEL (DASHBOARD / LISTAS)
   ========================================================================== */
/* Área principal do painel (usada fora do layout com menu lateral) */
.dashboard {
    max-width: 1100px;
    margin: 40px auto;
}

.dashboard h1 { font-size: 1.75rem; }

/* Dentro do painel admin, o padding do container já dá o espaçamento */
.app-content .dashboard,
.app-content .form-container { margin-top: 4px; }

/* Contagem discreta logo após um título (ex: "Rotinas ativas: 23") */
.title-count {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-soft);
    letter-spacing: 0.01em;
}

/* Cabeçalho de página: título à esquerda, ações à direita, com quebra de linha */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.date-filter { margin: 20px 0; }

.inline-form { display: inline; }

/* Formulários de busca/filtro com a classe .date-filter (diretório de empresas
   e painel do programador). O campo e o botão ficam lado a lado separados por
   um espaçamento confortável (gap). O campo é flexível e o botão mantém o
   tamanho, evitando que fiquem "colados" em telas estreitas. */
form.date-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Dentro do formulário, o espaçamento passa a ser controlado pelo gap. */
form.date-filter input,
form.date-filter select {
    flex: 1 1 180px;
    min-width: 0;
    margin-right: 0;
}

/* O botão "Buscar" nunca encolhe: fica sempre na MESMA linha da caixa de
   texto, mesmo quando o campo precisa diminuir para caber. */
form.date-filter .btn { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   FILTROS ADICIONAIS (seta para baixo + popup de opções)
   -------------------------------------------------------------------------- */
/* Usado na lista de empresas (painel do programador): ao lado do campo de
   busca há uma SETA para baixo que abre um popup com filtros extras (Status).
   A busca de texto acontece ao digitar; o popup complementa com o filtro de
   situação. Os dois somam (E/AND). */
.company-filter .filter-more {
    position: relative;
    flex: 0 0 auto;
}

/* Botão redondo com a seta. Quando há filtro aplicado (classe .is-set),
   ganha destaque com a cor da marca para indicar que há algo ativo. */
.filter-more-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-soft);
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.filter-more-btn:hover { border-color: var(--primary); color: var(--primary-strong); }

.filter-more-btn.is-set {
    border-color: var(--primary);
    color: var(--primary-strong);
    background: var(--primary-soft);
}

/* Popup ancorado abaixo do botão, alinhado à direita do campo */
.filter-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 210px;
    padding: 14px 12px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Garante que o popup comece FECHADO: o atributo `hidden` precisa vencer o
   `display: flex` acima (senão o popup apareceria sempre aberto). */
.filter-popup[hidden] { display: none; }

/* "X" no canto superior direito: fecha o popup */
.filter-popup-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.filter-popup-close:hover { background: var(--surface-2); color: var(--text); }
.filter-popup-close svg { width: 16px; height: 16px; }

/* Rótulo do grupo de opções dentro do popup */
.filter-popup-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* Campo com rótulo + lista suspensa (ex.: Status) */
.filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
}

.filter-field select:focus {
    outline: none;
    border-color: var(--primary);
}

/* O select de Status vive dentro do popup: NÃO deve herdar o layout de campo
   largo do formulário de filtro (lá o `flex-basis` do select viraria altura,
   por causa da coluna do popup). */
form.date-filter .filter-field select {
    flex: 0 0 auto;
    margin-right: 0;
}

/* Filtros de data/select dentro do painel */
.date-filter input,
.date-filter select {
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    margin-right: 6px;
    background: var(--surface);
    color: var(--text);
}

/* --------------------------------------------------------------------------
   AGENDAMENTOS (CARDS)
   -------------------------------------------------------------------------- */
/* Lista vertical de agendamentos, um card por linha */
.appointments {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Card de agendamento: hora à esquerda, infos no meio, ações à direita.
   A faixa lateral colorida indica o status (ver regras abaixo). */
.appointment-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--surface);
    padding: 16px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    transition: transform var(--t), box-shadow var(--t);
}

.appointment-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* Cor da faixa lateral conforme o status do agendamento */
.appointment-card.status-confirmed { border-left-color: var(--success); }
.appointment-card.status-pending   { border-left-color: var(--warning); }
.appointment-card.status-cancelled { border-left-color: var(--danger); opacity: 0.65; }
.appointment-card.status-completed { border-left-color: var(--info); }

/* Hora do agendamento em destaque, com largura mínima para alinhar a coluna */
.appointment-time {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    min-width: 80px;
    font-family: var(--font-heading);
}

.appointment-info { flex: 1; }
.appointment-info p { margin: 2px 0; color: var(--text-soft); }

.appointment-actions { display: flex; gap: 8px; }

/* --------------------------------------------------------------------------
   BADGES
   -------------------------------------------------------------------------- */
/* "Selo" compacto e arredondado usado para status (pendente, confirmado...) */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Cores dos selos: reaproveitam as paletas semânticas do tema */
.badge-pending   { background: var(--warning-bg); color: var(--warning-text); }
.badge-confirmed { background: var(--success-bg); color: var(--success-text); }
.badge-cancelled { background: var(--danger-bg);  color: var(--danger-text); }
.badge-completed { background: var(--info-bg);    color: var(--info-text); }
.badge-active    { background: var(--success-bg); color: var(--success-text); }
.badge-inactive  { background: var(--danger-bg);  color: var(--danger-text); }
.badge-warning   { background: var(--warning-bg); color: var(--warning-text); }
.badge-no_show   { background: var(--surface-3);  color: var(--muted); }

/* --------------------------------------------------------------------------
   TABELAS
   -------------------------------------------------------------------------- */
/* Tabela em "cartão": cantos arredondados obtidos com border-collapse:separate
   + border-spacing:0 e overflow hidden (não funciona com collapse). */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

/* Células com espaçamento uniforme e separador inferior discreto */
.table th,
.table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

/* Cabeçalho: rótulos em caixa alta e tom apagado, no estilo "tabela limpa" */
.table th {
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.table td { font-size: 0.92rem; color: var(--text-soft); }

.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-2); }

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

.actions-cell { white-space: nowrap; }
.actions-cell .btn { margin-right: 4px; }

/* Tabela de empresas (painel do programador): na MESMA célula, o nome vem na
   primeira linha e o endereço/nickname na segunda — os dois alinhados à
   esquerda. As ações ficam à direita, com apenas o botão "Editar". */
.table-companies .company-address {
    display: block;
    margin-top: 2px;
    font-size: 0.85rem;
}

/* Coluna de ações da lista de empresas: o STATUS (badge) aparece ACIMA do
   botão "Editar", empilhados e alinhados à direita. Os demais botões
   (Desativar/Excluir) só existem na tela de edição, não nesta listagem. */
.table-companies td.actions-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.table-companies td.actions-cell .btn { margin-right: 0; }

/* --------------------------------------------------------------------------
   BUSCA EM LISTAS (lupa dentro do campo + botão na mesma linha)
   -------------------------------------------------------------------------- */
/* Linha única: o campo de busca ocupa o espaço restante e o botão fica
   alinhado à direita. */
.list-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.search-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Lupa desenhada dentro do campo (não intercepta cliques) */
.search-field > svg {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--muted);
    pointer-events: none;
}

/* O campo de busca fica fora do .form-group, então recebe o estilo base aqui */
.search-field input {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px 10px 39px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.search-field input::placeholder { color: #9aa2b6; }
.search-field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}

/* --------------------------------------------------------------------------
   CAMPO DIGITÁVEL COM SUGESTÕES (autocomplete de cliente)
   -------------------------------------------------------------------------- */
.autocomplete { position: relative; }

/* Lista de sugestões flutuante, logo abaixo do campo */
.autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 264px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

/* Cada sugestão: nome em destaque e celular logo abaixo */
.autocomplete-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--t-fast);
}

.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: var(--surface-2); }
.autocomplete-item strong { font-size: 0.92rem; color: var(--text); font-weight: 600; }
.autocomplete-item small { font-size: 0.78rem; color: var(--muted); }

/* Aviso de "nenhum cliente encontrado" */
.autocomplete-empty {
    padding: 12px 14px;
    font-size: 0.86rem;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   LISTA ORDENÁVEL (prioridade de atendimento)
   -------------------------------------------------------------------------- */
.page-hint {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: -8px 0 18px;
    max-width: 720px;
}

.page-hint strong { color: var(--text-soft); }

/* Cursor de "agarrar" na alça de arrasto; muda ao arrastar. Fica na alça
   (e não na linha inteira) porque o arrasto é iniciado por ela — inclusive
   no celular, onde o resto da linha continua rolando a página normalmente. */
.table-sortable .drag-cell { cursor: grab; }
.table-sortable .drag-cell:active { cursor: grabbing; }

/* Linha em processo de arrasto: semitransparente e elevada */
.table-sortable tbody tr.dragging {
    opacity: 0.55;
    background: var(--primary-soft);
    box-shadow: var(--shadow-md);
}

.table-sortable .col-drag { width: 78px; }

.drag-cell { white-space: nowrap; touch-action: none; }

/* Alinha a alça e o número de prioridade sem tirar a célula do layout de
   tabela (usar display:flex no próprio <td> desalinhava a linha). */
.drag-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
}

/* Alça de arrasto (ícone de "grip"), discreta e que ganha cor no hover */
.drag-handle {
    width: 15px;
    height: 15px;
    color: var(--border-strong);
    flex-shrink: 0;
    transition: color var(--t-fast);
}

.table-sortable tbody tr:hover .drag-handle { color: var(--muted); }

/* Selo com o número da prioridade */
.prio-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary-strong);
    font-size: 0.75rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   ESTATÍSTICAS
   -------------------------------------------------------------------------- */
/* Grade que distribui os cards de estatística automaticamente */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin: 26px 0;
}

/* Card de estatística: ícone à esquerda, número e rótulo à direita */
.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    padding: 22px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
}

/* Quadrado com o ícone da métrica */
.stat-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.stat-icon svg { width: 23px; height: 23px; }

/* Número grande da métrica + rótulo abaixo */
.stat-body h3 {
    font-size: 2rem;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 2px;
}

.stat-body p { color: var(--muted); font-size: 0.86rem; }

.section-title { font-size: 1.1rem; margin: 36px 0 6px; }

/* Atalhos rápidos exibidos no dashboard */
.shortcuts {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* --------------------------------------------------------------------------
   ESTADOS VAZIOS
   -------------------------------------------------------------------------- */
/* Mensagem centralizada quando não há dados a exibir */
.empty-state {
    text-align: center;
    padding: 44px;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   LAYOUT DE DUAS COLUNAS
   -------------------------------------------------------------------------- */
.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

/* ==========================================================================
   9. CALENDÁRIO (FullCalendar)
   ========================================================================== */
/* Cabeçalho da página: título + seletor de profissional/menu */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.page-head h1 { font-size: 1.75rem; margin-bottom: 4px; }

/* Agrupador com rótulo + select do profissional (filtro do calendário) */
.owner-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    padding: 10px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    /* Pode encolher dentro do `.page-head` (flex) sem estourar a largura da
       página — sem isso o balão empurraria a tela e exigiria rolagem lateral. */
    min-width: 0;
    max-width: 100%;
}

.owner-selector label { font-size: 0.9rem; color: var(--muted); }

.owner-selector select {
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.94rem;
    background: var(--surface);
    color: var(--text);
    /* O navegador reserva, para o <select>, a largura do MAIOR nome da lista —
       o que estoura a tela no celular (nomes completos). `min-width: 0`
       permite encolher; a largura real é definida pelos contextos abaixo. */
    min-width: 0;
    max-width: 100%;
}

/* Barra acima do calendário: controles do FC à esquerda, legenda à direita */
.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 22px 0 14px;
}

.calendar-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--muted);
}

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

/* Quadradinho colorido ao lado do texto da legenda */
.legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 4px;
    display: inline-block;
}

.calendar-card { padding: 18px; margin-top: 0; }

/* Nas visões de dia e semana a agenda recebe altura fixa (definida no JS) e
   passa a rolar por dentro. A barra fica discreta para não poluir o card. */
.calendar-card .fc .fc-scroller {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.4) transparent;
}

.calendar-card .fc .fc-scroller::-webkit-scrollbar { width: 8px; }

.calendar-card .fc .fc-scroller::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 8px;
}

.calendar-card .fc .fc-scroller::-webkit-scrollbar-track { background: transparent; }

/* Balão "Exibir também as agendas de:". O `margin` vertical separa este card
   do cabeçalho (seletor) acima e da barra do calendário abaixo — sem ele os
   dois balões ficavam colados. */
.overlay-professionals { margin: 16px 0; padding: 16px 20px; }

.overlay-title {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.overlay-list { display: flex; flex-wrap: wrap; gap: 20px; }

/* Item de filtro com checkbox (mostrar/ocultar profissionais na agenda) */
.overlay-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--text-soft);
    cursor: pointer;
    user-select: none;   /* Evita selecionar o texto ao clicar no rótulo */
}

.overlay-item input[type="checkbox"] { cursor: pointer; }

/* Ajustes visuais do FullCalendar para casar com o tema do sistema.
   O FullCalendar expõe variáveis CSS próprias (--fc-*) que aqui são "ligadas"
   aos tokens do tema, mantendo a libreria alinhada às cores do projeto. */
.fc {
    --fc-border-color: var(--border);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--surface-2);
    --fc-today-bg-color: rgba(1, 123, 137, 0.06);
    --fc-now-indicator-color: var(--primary);
    --fc-button-bg-color: var(--surface);
    --fc-button-border-color: var(--border-strong);
    --fc-button-text-color: var(--text-soft);
    --fc-button-hover-bg-color: var(--surface-2);
    --fc-button-hover-border-color: var(--border-strong);
    --fc-button-active-bg-color: var(--primary);
    --fc-button-active-border-color: var(--primary);
    font-size: 0.9rem;
    color: var(--text);
}

/* Título do calendário (mês/ano) na tipografia de display do sistema */
.fc .fc-toolbar-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* Botões da barra de ferramentas do FullCalendar */
.fc .fc-button {
    text-transform: capitalize;
    box-shadow: none !important;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

/* Botão ativo do calendário: texto branco sobre o fundo da marca */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    color: #fff !important;
}

/* Eventos (agendamentos) exibidos dentro do calendário */
.fc .fc-event {
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 1px 6px;
}

/* Cabeçalho e número dos dias, sem sublinhado de link */
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
}

.fc .fc-col-header-cell-cushion { text-transform: capitalize; padding: 8px 4px; }

/* Dia atual: número e rótulo em destaque na cor da marca */
.fc .fc-day-today .fc-col-header-cell-cushion,
.fc .fc-day-today .fc-daygrid-day-number { color: var(--primary-strong); }

/* Indicador da hora atual (linha e seta) na visualização por dia/semana */
.fc .fc-timegrid-now-indicator-line { border-color: var(--primary); border-width: 2px; }
.fc .fc-timegrid-now-indicator-arrow { border-color: var(--primary); }

/* ==========================================================================
   10. MODAIS
   ========================================================================== */
/* Fundo escurecido que cobre a tela. Fica oculto por padrão e só aparece
   quando recebe a classe .open (adicionada pelo JS). */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;                       /* Ocupa toda a viewport (top/right/bottom/left: 0) */
    background: rgba(16, 23, 40, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1000;
    justify-content: center;
    align-items: flex-start;        /* Alinha no topo e permite rolar se for alto */
    padding: 48px 16px;
    overflow-y: auto;
}

.modal-overlay.open { display: flex; }

/* Caixa do modal (centralizada horizontalmente pelo overlay em flex) */
.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 540px;
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.22s var(--ease);
}

/* Animação de entrada do modal: surge de cima, levemente menor */
@keyframes modalIn {
    from { opacity: 0; transform: translateY(-14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cabeçalho: título à esquerda, botão de fechar à direita */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 { color: var(--text); }

/* Botão "x" de fechar, que fica vermelho no hover */
.modal-close {
    background: none;
    border: none;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
    border-radius: var(--radius-xs);
    transition: color var(--t-fast);
}

.modal-close:hover { color: var(--danger); }

.modal-body { padding: 24px; }

/* Rodapé do modal: botões alinhados à direita */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

/* --------------------------------------------------------------------------
   CONTEÚDO DO MODAL DE DETALHES
   -------------------------------------------------------------------------- */
.details-summary { margin-bottom: 16px; }

.details-rows {
    display: flex;
    flex-direction: column;
}

/* Linha "rótulo ... valor": separados pelos extremos, com separador tracejado */
.details-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
}

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

.details-row span {
    color: var(--muted);
    font-size: 0.86rem;
    white-space: nowrap;
}

.details-row strong {
    font-weight: 600;
    font-size: 0.94rem;
    text-align: right;
    color: var(--text);
}

/* Bloco separado dentro do modal (ex.: histórico/observações) */
.details-block {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.details-block h4 {
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: var(--text);
}

.details-block .btn { margin-top: 4px; }

.details-note {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-soft);
    font-size: 0.92rem;
}

/* Duas colunas de campos lado a lado dentro do formulário */
.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; }

/* --------------------------------------------------------------------------
   ENDEREÇO (tela "Meu Negócio" > Endereço)
   -------------------------------------------------------------------------- */
/* CEP + botão de lupa na MESMA linha: o campo ocupa o espaço e a lupa fica à
   frente (à direita), alinhada à altura do campo. */
.cep-input {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.cep-input input {
    flex: 1;
    min-width: 0;
}

/* Botão da lupa com o mesmo acabamento dos campos (borda e altura). */
.cep-search-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 42px;
    padding: 0 12px;
    height: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-soft);
}

.cep-search-btn:hover { border-color: var(--primary); color: var(--primary-strong); }
.cep-search-btn:disabled { opacity: 0.6; cursor: progress; }

/* Mensagens do retorno da busca de CEP (carregando, encontrado, erro) */
.cep-status.is-error { color: var(--danger-text); }

/* Enquanto busca, o campo de CEP mostra que está em andamento */
.address-form.is-loading .cep-search-btn svg { animation: cep-spin 0.8s linear infinite; }

@keyframes cep-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Número do endereço: coluna estreita, à frente (ao lado) da rua */
.form-group--short { flex: 0 0 120px !important; }
.form-group--uf { flex: 0 0 90px !important; }

/* Seletor de dias da semana em formato de pílulas clicáveis */
.weekday-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.weekday-picker label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 0.88rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.weekday-picker label:hover { border-color: var(--border-strong); }

/* Destaca a pílula do dia quando o checkbox interno está marcado */
.weekday-picker label:has(input:checked) {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-strong);
}

.weekday-picker input { width: auto; accent-color: var(--primary); }

/* --------------------------------------------------------------------------
   SELETOR DE TEMA ("Meu Negócio") — cartões com prévia das cores
   -------------------------------------------------------------------------- */
/* Grade de opções de tema */
.theme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

/* Cartão de um tema: empilha a prévia de cores e o texto */
.theme-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.theme-option:hover { border-color: var(--border-strong); }

/* Tema selecionado: borda/realce na cor da marca */
.theme-option:has(input:checked) {
    border-color: var(--primary);
    box-shadow: var(--ring);
    background: var(--primary-soft);
}

/* O rádio fica escondido: o cartão inteiro é clicável */
.theme-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Prévia: faixa superior na cor da marca + "conteúdo" do tema */
.theme-swatch {
    display: block;
    height: 62px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow: hidden;
}

.theme-swatch-bar { display: block; height: 16px; }

.theme-swatch-body { display: block; padding: 10px 10px 0; }

/* "Linhas de texto" falsas que simulam o conteúdo dentro da prévia */
.theme-swatch-line {
    display: block;
    height: 7px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: rgba(20, 27, 45, 0.14);
}

.theme-swatch-line.short { width: 55%; }

/* Cores fixas de cada tema (a prévia não deve seguir o tema atual) */
.theme-swatch--padrao { background: #f4f5fa; }
.theme-swatch--padrao .theme-swatch-bar { background: linear-gradient(135deg, #4f6ef7, #7c3aed); }

.theme-swatch--sobrio { background: #f5f6f8; }
.theme-swatch--sobrio .theme-swatch-bar { background: linear-gradient(135deg, #3b4759, #6b7a91); }

.theme-swatch--dark { background: #0e1320; border-color: #283349; }
.theme-swatch--dark .theme-swatch-bar { background: linear-gradient(135deg, #5b7cfa, #8b5cf6); }
.theme-swatch--dark .theme-swatch-line { background: rgba(255, 255, 255, 0.24); }

.theme-swatch--feminino { background: #fdf6fa; }
.theme-swatch--feminino .theme-swatch-bar { background: linear-gradient(135deg, #e0629b, #a855f7); }

.theme-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.theme-desc {
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   FOTO DE PERFIL (3x4) — campo, prévia e tela de enquadrar
   -------------------------------------------------------------------------- */
/* Campo de imagem: prévia em cima, botões abaixo, tudo centralizado */
.photo-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Moldura da prévia (proporção 3x4 por padrão) */
.photo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Inicial exibida no lugar da foto quando ainda não há imagem */
.photo-initial {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--primary);
}

.photo-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.photo-hint {
    max-width: 300px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
    text-align: center;
}

/* Variante quadrada (imagem do serviço) */
.photo-field--square .photo-preview {
    width: 140px;
    aspect-ratio: 1 / 1;
}

/* Variante "capa" (foto de capa do negócio, 12x7): prévia larga, ocupando a
   largura disponível até um limite confortável. */
.photo-field--cover .photo-preview {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 12 / 7;
}

/* Estado vazio: ícone exibido enquanto não há imagem cadastrada.
   Não definir `display` aqui — o `.hidden` (usado quando já existe imagem)
   é declarado antes no arquivo e seria sobrescrito. */
.photo-empty {
    color: var(--primary-strong);
    opacity: 0.6;
}

.photo-empty svg {
    display: block;
    width: 52px;
    height: 52px;
}

/* Quadro de recorte: a proporção é definida pelo JS conforme o campo (3x4 ou 1x1) */
.cropper-viewport {
    position: relative;
    width: min(300px, 68vw);
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    overflow: hidden;
    background: #0f172a;
    border-radius: var(--radius);
    cursor: grab;
    touch-action: none;          /* Impede a rolagem da página durante o arrasto */
    user-select: none;
    -webkit-user-select: none;
}

.cropper-viewport.dragging { cursor: grabbing; }

/* A imagem é posicionada em absoluto e deslocada via transform pelo JS */
.cropper-viewport img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;                  /* Anula o max-width:100% global de imagens */
    transform-origin: top left;       /* Facilita o cálculo de deslocamento no JS */
    pointer-events: none;             /* Os gestos são capturados pelo quadro */
    -webkit-user-drag: none;
}

/* Controle de zoom (lupa "-" / slider / lupa "+") */
.cropper-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(300px, 68vw);
    margin: 18px auto 0;
    color: var(--muted);
}

.cropper-zoom svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Específico o bastante para não herdar a largura total dos inputs do formulário */
.cropper-zoom input[type="range"] {
    flex: 1;
    width: auto;
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ==========================================================================
   11. MENU LATERAL + BARRA SUPERIOR (painel admin)
   O menu fica oculto por padrão e é expandido pelo botão da barra superior.
   ========================================================================== */
/* Corpo do app admin em coluna. O padding-left anima quando o menu abre
   (em telas grandes, o conteúdo é "empurrado" em vez de sobreposto). */
.app-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    transition: padding-left var(--t);
}

.app-body > main { flex: 1; }

/* Área de conteúdo: largura máxima e centralizada */
.app-content {
    flex: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 30px 32px 52px;
}

/* --------------------------------------------------------------------------
   BARRA SUPERIOR
   -------------------------------------------------------------------------- */
/* Barra fixa no topo do painel admin, também com efeito de vidro fosco */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 12px 32px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(20, 27, 45, 0.03);
}

/* Alinha o conteúdo da barra superior com o conteúdo da página */
.topbar-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 1176px;
    margin: 0 auto;
}

.topbar-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--text);
}

.topbar-system-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text);
    text-decoration: none;
}

.topbar-system-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 5px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.topbar-system-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.topbar-system-name {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
}

.topbar-system-name img {
    display: block;
    width: auto;
    max-width: 88px;
    height: 22px;
    object-fit: contain;
}

/* Área do usuário: empurrada para a direita (margin-left:auto) */
.topbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 500;
}

/* Botão quadrado só com ícone (ex.: abrir menu) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-soft);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.icon-btn:hover {
    background: var(--primary-soft);
    color: var(--primary-strong);
    border-color: var(--primary);
}

.icon-btn svg { width: 20px; height: 20px; }

.theme-toggle .theme-toggle-sun { display: none; }
html.ui-dark-mode .theme-toggle .theme-toggle-sun { display: block; }
html.ui-dark-mode .theme-toggle .theme-toggle-moon { display: none; }

/* Avatar do usuário: círculo com a inicial, na cor da marca */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow: 0 3px 10px rgba(1, 123, 137, 0.32);
    overflow: hidden;
}

/* Quando há FOTO DE PERFIL, ela preenche o círculo (recorte centralizado,
   sem distorcer). Sem foto, o avatar mostra a inicial do nome. */
.avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   MENU LATERAL
   -------------------------------------------------------------------------- */
/* Menu fixo à esquerda, deslocado para fora da tela (translateX(-100%)).
   Abre quando o <body> recebe a classe .sidebar-open. */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--t);
    z-index: 200;
    box-shadow: 0 0 44px rgba(15, 23, 42, 0.28);
}

body.sidebar-open .sidebar { transform: translateX(0); }

/* Camada escurecida atrás do menu (usada no mobile para fechar ao tocar fora) */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    pointer-events: none;   /* Inativo enquanto invisível */
    transition: opacity var(--t);
    z-index: 150;
}

body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

/* Marca do negócio no topo do menu */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 6px;
    flex-shrink: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.brand-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Nome do negócio + subtítulo, empilhados */
.brand-text {
    display: flex;
    flex-direction: column;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    color: #f8fafc;
}

.brand-text small {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: #94a3b8;
}

/* Botão de fechar o menu (só aparece no mobile, ver responsividade) */
.sidebar-close {
    display: none;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.06);
    border-color: transparent;
    color: #cbd5e1;
}

.sidebar-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: transparent;
}

/* Lista de navegação do menu: ocupa o espaço restante e rola se necessário */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
}

/* Cabeçalho de seção dentro do menu (rótulos como "GESTÃO") */
.sidebar-section {
    padding: 16px 14px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #64748b;
}

/* Item de menu */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background var(--t-fast), color var(--t-fast);
}

.sidebar-link svg { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.85; }

.sidebar-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

/* Item da página atual: preenchido com o degradê da marca */
.sidebar-link.active {
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 8px 20px rgba(1, 123, 137, 0.36);
}

.sidebar-link.active svg { opacity: 1; }

/* --------------------------------------------------------------------------
   GAVETAS DO MENU LATERAL (ex: "Agenda" → Ver Agenda / Adicionar evento / ...)
   -------------------------------------------------------------------------- */
/* Agrupa o botão "pai" e a gaveta de itens filhos */
.sidebar-group {
    display: flex;
    flex-direction: column;
}

/* O item "pai" é um botão (abre a gaveta em vez de navegar). Reaproveita a
   aparência de .sidebar-link, mas precisa zerar os estilos nativos de botão. */
.sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 13px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.sidebar-group-toggle svg { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.85; }

.sidebar-group-toggle:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

/* Item "pai" com a gaveta aberta: texto em destaque (sem o degradê cheio,
   que fica reservado para a página atual) */
.sidebar-group.open > .sidebar-group-toggle { color: #fff; }

/* Seta que gira quando a gaveta abre */
.sidebar-group-chevron {
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform var(--t-fast);
}

.sidebar-group.open .sidebar-group-chevron { transform: rotate(90deg); }

/* Gaveta: itens filhos recuados e ligados por uma linha guia */
.sidebar-submenu {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 4px 20px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.sidebar-group.open .sidebar-submenu { display: flex; }

/* Item filho: texto menor e mais apagado que o item "pai" */
.sidebar-sublink {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.86rem;
    transition: background var(--t-fast), color var(--t-fast);
}

.sidebar-sublink:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

/* Página atual dentro da gaveta */
.sidebar-sublink.active { color: #fff; font-weight: 600; }

/* Rodapé do menu: dados do usuário e botão de sair */
.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 8px;
}

/* Nome/e-mail do usuário: quebra com "..." quando não couber */
.sidebar-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    overflow: hidden;
}

.sidebar-user-info strong {
    color: #f1f5f9;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-info small { color: #94a3b8; font-size: 0.74rem; }

/* Link de logout: tom avermelhado para indicar ação de saída */
.sidebar-logout { color: #fca5a5; }
.sidebar-logout:hover { background: rgba(239, 68, 68, 0.15); color: #fecaca; }

/* --------------------------------------------------------------------------
   CARDS DE AÇÃO (dashboard)
   -------------------------------------------------------------------------- */
/* Card que funciona como link (ação rápida no dashboard) */
.action-card {
    display: block;
    text-decoration: none;
    color: var(--text);
}

.action-card:hover { border-color: #b7d8dc; }

/* Card clicável do diretório de empresas (página inicial da plataforma) */
.company-card { text-decoration: none; color: var(--text); }

/* O botão "Agendar" fica sempre à direita, mesmo enquanto a distância (à
   esquerda) ainda está oculta — mantém o layout do cartão como sempre foi. */
.company-card .service-foot .btn { margin-left: auto; }

/* Endereço do estabelecimento no cartão (substituiu o antigo "/nickname"):
   no máximo DUAS linhas, para o cartão não crescer de tamanho. */
.company-address-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Distância até o cliente (ex.: "850 m" / "1,4 km"), mostrada na mesma linha
   do botão "Agendar" depois de usar "Buscar mais próximos". */
.card-distance {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}

/* Garante que a distância comece oculta (o atributo `hidden` precisa vencer). */
.card-distance[hidden] { display: none; }

/* --------------------------------------------------------------------------
   BUSCA DO DIRETÓRIO PÚBLICO (portal)
   Campo que busca ao digitar e, logo abaixo, "Buscar mais próximos".
   -------------------------------------------------------------------------- */
.portal-search { margin: 20px 0 8px; }

/* Botão que pede a localização e ordena a lista por proximidade. */
.nearby-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.nearby-btn svg { width: 17px; height: 17px; }

/* Localização já aplicada: destacado com a cor da marca. */
.nearby-btn.is-active {
    border-color: var(--primary);
    color: var(--primary-strong);
}

/* Aviso do estado da localização (buscando / ordenado / negado). */
.nearby-hint {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--muted);
}

/* Inicial do negócio na faixa superior do card */
.company-mark {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
}

/* Quadrado com o ícone da ação rápida */
.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 13px;
    background: var(--primary-soft);
    color: var(--primary-strong);
    transition: background var(--t), color var(--t);
}

/* No hover do card, o ícone ganha o degradê da marca */
.action-card:hover .action-icon { background: var(--brand-gradient); color: #fff; }

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

.action-card h3 { margin-bottom: 6px; }
.action-card .card-desc { margin-bottom: 0; }

/* ==========================================================================
   12. RESPONSIVIDADE
   ========================================================================== */
/* Tablets e celulares largos (até 991px): o menu passa a ser sobreposto
   (gaveta), então o botão de fechar aparece e os espaçamentos diminuem. */
@media (max-width: 991px) {
    .sidebar-close { display: inline-flex; }

    .app-content { padding: 22px 18px 44px; }
    .topbar { padding: 10px 16px; }
    .topbar-system-name { display: none; }
    .topbar-user-name { display: none; }   /* Só o avatar permanece na barra */

    /* Título da barra: prefere encolher com "..." a empurrar a tela para o
       lado — evita a rolagem horizontal no celular. */
    .topbar-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Desktop: o menu empurra o conteúdo em vez de sobrepor.
   A regra só vale em páginas que REALMENTE têm menu lateral — assim a
   área do cliente nunca herda um espaço vazio à esquerda. */
@media (min-width: 992px) {
    .sidebar-backdrop { display: none; }
    body.has-sidebar.sidebar-open .app-body { padding-left: var(--sidebar-width); }
}

/* Telas médias/pequenas (até 768px): empilha cabeçalhos e ajusta o calendário */
@media (max-width: 768px) {
    .logo-context { display: none; }
    .page-head { flex-direction: column; align-items: stretch; gap: 14px; }

    /* ----------------------------------------------------------------------
       SELETOR "VER AGENDA DE:" NO CELULAR
       ----------------------------------------------------------------------
       Rótulo em cima e select ocupando a largura toda: o rótulo e o campo
       ficam com o mesmo peso visual (antes o texto ficava de um lado e um
       select largo do outro, com um vão no meio). O `width: 100%` com
       `min-width: 0` garante que o campo encolha em vez de empurrar a tela —
       é isso que evitava a rolagem lateral. */
    .owner-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 14px 16px;
    }

    .owner-selector label {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text);
    }

    .owner-selector select { width: 100%; }

    /* Balão "Exibir também as agendas de:": mesmo peso do seletor acima
       (mesmo recuo interno) para os dois não parecerem desproporcionais. */
    .overlay-professionals { padding: 14px 16px; }
    .overlay-list { gap: 12px 18px; }

    /* O calendário nunca deve empurrar a tela: `overflow-x: clip` corta
       qualquer sobra lateral AQUI dentro (não cria área de rolagem, então
       nada de arrastar para o lado nem quebra do cabeçalho fixo do mês). */
    .calendar-card {
        padding: 12px;
        overflow-x: clip;
    }
    .two-columns { grid-template-columns: 1fr; }   /* Duas colunas viram uma */

    .hero { padding: 34px 26px; border-radius: 20px; }

    /* Horários do dia (tela do cliente): grade SIMÉTRICA de 4 por linha.
       Com `1fr` as quatro colunas têm exatamente a mesma largura e, como os
       itens de uma linha de grid se esticam, todos os balões ficam também com
       a mesma altura — formando um quadriculado perfeito em telas estreitas. */
    .slots {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    /* Cada balão ocupa a coluna inteira e centraliza o texto do horário */
    .btn-slot {
        width: 100%;
        padding: 9px 4px;
        text-align: center;
        font-size: 0.86rem;
    }

    .fc { font-size: 0.82rem; }

    /* Empilha os grupos da barra de ferramentas para não estourar a largura */
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 0.7em;
    }

    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .fc .fc-toolbar-title { font-size: 1rem; text-align: center; }
    .fc .fc-button { padding: 5px 9px; font-size: 0.76rem; }

    /* Cabeçalho dos dias: fonte menor e quebra controlada */
    .fc .fc-col-header-cell-cushion {
        padding: 5px 2px;
        font-size: 0.72rem;
        line-height: 1.2;
        white-space: normal;
        word-break: keep-all;
    }

    .fc .fc-daygrid-day-number { font-size: 0.76rem; padding: 3px 5px; }

    .fc .fc-timegrid-axis-cushion,
    .fc .fc-timegrid-slot-label-cushion { font-size: 0.7rem; padding: 0 3px; }

    .fc .fc-event { font-size: 0.72rem; padding: 0 4px; }

    /* Tabelas: rolagem horizontal em vez de "espremer" as colunas */
    .table { display: block; overflow-x: auto; white-space: nowrap; }

    /* ----------------------------------------------------------------------
       LISTA DE PROFISSIONAIS NO CELULAR (painel do dono)
       ----------------------------------------------------------------------
       Mantém o formato TABELA (sem balões): cada linha da equipe passa a ter
       duas linhas internas, separadas pelo mesmo traço das demais tabelas:
         - superior: posição (arrastar) | nome | status
         - inferior: botões Editar e Desativar
       Telefone e e-mail não aparecem aqui para caber sem rolagem lateral. */
    .table-professionals {
        display: block;
        overflow: visible;
        white-space: normal;
    }

    /* O cabeçalho da tabela some: os rótulos não fazem sentido neste layout */
    .table-professionals thead { display: none; }
    .table-professionals tbody { display: block; }

    .table-professionals tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "drag name status"
            "actions actions actions";
        align-items: center;
        gap: 10px 12px;
        padding: 14px;
        border-bottom: 1px solid var(--border);
    }

    /* Última linha sem traço (a tabela já tem a borda de fechamento) */
    .table-professionals tbody tr:last-child { border-bottom: none; }

    /* Células sem borda nem preenchimento de tabela dentro da linha */
    .table-professionals td { border: none; padding: 0; }

    .table-professionals td.drag-cell { grid-area: drag; }

    .table-professionals td.cell-name {
        grid-area: name;
        font-size: 0.98rem;
        font-weight: 600;
        color: var(--text);
        white-space: normal;
        word-break: break-word;
    }

    .table-professionals td.cell-status { grid-area: status; }

    /* Telefone e e-mail ficam de fora no celular */
    .table-professionals td.cell-phone,
    .table-professionals td.cell-email { display: none; }

    /* Linha inferior: Editar e Desativar/Ativar alinhados à direita,
       logo abaixo do status. */
    .table-professionals td.actions-cell {
        grid-area: actions;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        white-space: normal;
    }

    /* Alça de arrasto mais generosa no toque */
    .table-professionals .drag-cell { padding: 4px 2px; }

    .table-professionals td.actions-cell .btn { margin-right: 0; }
    .table-professionals td.actions-cell .inline-form { margin: 0; }
    .table-professionals .col-drag { width: auto; }

    /* Ações extras (Serviços, Permissões e Excluir) saem da listagem no
       celular: ficam disponíveis na tela de edição do profissional. */
    .table-professionals .btn-extra { display: none; }

    /* ----------------------------------------------------------------------
       TABELA DE ROTINAS NO CELULAR (Clientes de rotina)
       ----------------------------------------------------------------------
       Evita a rolagem lateral: cada rotina vira um bloco empilhado com o
       cliente em destaque, serviço e horário abaixo, e o botão "Encerrar"
       alinhado à direita. */
    .table-routines {
        display: block;
        overflow: visible;
        white-space: normal;
    }

    .table-routines thead { display: none; }
    .table-routines tbody { display: block; }

    /* A regra de 5 resultados no celular esconde linhas com .hidden; o
       seletor :not(.hidden) garante que elas continuem ocultas. */
    .table-routines tbody tr:not(.hidden) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "cliente acao"
            "servico acao"
            "quando  acao";
        align-items: center;
        gap: 2px 12px;
        padding: 14px;
        border-bottom: 1px solid var(--border);
    }

    .table-routines tbody tr:last-child { border-bottom: none; }
    .table-routines td { border: none; padding: 0; }

    .table-routines td.cell-cliente {
        grid-area: cliente;
        font-size: 0.96rem;
        font-weight: 600;
        color: var(--text);
        white-space: normal;
        word-break: break-word;
    }

    .table-routines td.cell-servico { grid-area: servico; font-size: 0.86rem; }

    .table-routines td.cell-quando {
        grid-area: quando;
        margin-top: 4px;
        font-size: 0.86rem;
        white-space: normal;
    }

    /* Botão "Encerrar" (coluna da direita, centralizado verticalmente) */
    .table-routines td.cell-acao { grid-area: acao; white-space: nowrap; }
    .table-routines td.cell-acao .inline-form { margin: 0; }

    /* ----------------------------------------------------------------------
       TABELA DE SERVIÇOS NO CELULAR (aba Serviços do painel do dono)
       ----------------------------------------------------------------------
       Sem rolagem lateral: cada serviço vira um bloco em grade com
         - topo   : nome (esquerda) | status (direita)
         - embaixo: "duração | valor" em fonte pequena (esquerda) e os botões
           Editar + Desativar/Ativar alinhados à direita
       A descrição não aparece no celular (fica visível na tela de edição). */
    .table-services {
        display: block;
        overflow: visible;
        white-space: normal;
    }

    /* O cabeçalho da tabela some: os rótulos não fazem sentido neste layout */
    .table-services thead { display: none; }
    .table-services tbody { display: block; }

    .table-services tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "nome  status"
            "meta  acoes";
        align-items: center;
        gap: 2px 12px;
        padding: 14px;
        border-bottom: 1px solid var(--border);
    }

    /* Última linha sem traço (a tabela já tem a borda de fechamento) */
    .table-services tbody tr:last-child { border-bottom: none; }

    /* Células sem borda nem preenchimento de tabela dentro da linha */
    .table-services td { border: none; padding: 0; }

    .table-services td.cell-nome {
        grid-area: nome;
        font-size: 0.98rem;
        font-weight: 600;
        color: var(--text);
        white-space: normal;
        word-break: break-word;
    }

    /* "Duração | Valor" em fonte pequena, na mesma linha. O valor vem do
       atributo `data-valor` do próprio <td> (ver admin/services.html). */
    .table-services td.cell-duracao {
        grid-area: meta;
        font-size: 0.86rem;
        color: var(--text-muted, #6b7280);
    }

    .table-services td.cell-duracao::after {
        content: " | " attr(data-valor);
    }

    /* No celular o valor já aparece junto da duração: a coluna própria some */
    .table-services td.cell-valor { display: none; }

    .table-services td.cell-status {
        grid-area: status;
        text-align: right;
    }

    /* Descrição sai da listagem no celular para caber sem rolagem lateral */
    .table-services td.cell-descricao { display: none; }

    /* Linha inferior: Editar e Desativar/Ativar alinhados à direita,
       abaixo do status — com um respiro para não ficarem colados nele. */
    .table-services td.actions-cell {
        grid-area: acoes;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 12px;
        white-space: normal;
    }

    .table-services td.actions-cell .btn { margin-right: 0; }
    .table-services td.actions-cell .inline-form { margin: 0; }

    /* ----------------------------------------------------------------------
       TABELA DE CLIENTES NO CELULAR (aba Clientes do painel do dono)
       ----------------------------------------------------------------------
       Sem rolagem lateral: cada cliente vira um bloco com o nome e, na linha
       de baixo, o telefone — os dois à esquerda — e os botões Editar/Excluir
       à direita. E-mail e data de cadastro só aparecem no desktop. */
    .table-customers {
        display: block;
        overflow: visible;
        white-space: normal;
    }

    /* O cabeçalho da tabela some: os rótulos não fazem sentido neste layout */
    .table-customers thead { display: none; }
    .table-customers tbody { display: block; }

    .table-customers tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "nome  acoes"
            "fone  acoes";
        align-items: center;
        gap: 2px 12px;
        padding: 14px;
        border-bottom: 1px solid var(--border);
    }

    /* Última linha sem traço (a tabela já tem a borda de fechamento) */
    .table-customers tbody tr:last-child { border-bottom: none; }

    /* Células sem borda nem preenchimento de tabela dentro da linha */
    .table-customers td { border: none; padding: 0; }

    .table-customers td.cell-nome {
        grid-area: nome;
        font-size: 0.98rem;
        font-weight: 600;
        color: var(--text);
        white-space: normal;
        word-break: break-word;
    }

    .table-customers td.cell-fone {
        grid-area: fone;
        font-size: 0.86rem;
        color: var(--text-muted, #6b7280);
    }

    /* E-mail e data de cadastro saem da listagem no celular */
    .table-customers td.cell-email,
    .table-customers td.cell-data { display: none; }

    /* Botões Editar/Excluir à direita, centralizados na altura do bloco */
    .table-customers td.actions-cell {
        grid-area: acoes;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        white-space: normal;
    }

    .table-customers td.actions-cell .btn { margin-right: 0; }
    .table-customers td.actions-cell .inline-form { margin: 0; }

    /* ----------------------------------------------------------------------
       TABELA DE EMPRESAS NO CELULAR (painel do programador)
       ----------------------------------------------------------------------
       Sem rolagem lateral: o NOME da empresa fica na 1ª linha e o ENDEREÇO
       (nickname) na 2ª, ambos à esquerda, com o botão "Editar" à direita. As
       colunas de estatísticas e a situação saem da listagem no celular. */
    .table-companies {
        display: block;
        overflow: visible;
        white-space: normal;
    }

    /* O cabeçalho da tabela some: os rótulos não fazem sentido neste layout */
    .table-companies thead { display: none; }
    .table-companies tbody { display: block; }

    .table-companies tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "empresa acoes";
        align-items: center;
        gap: 2px 12px;
        padding: 14px;
        border-bottom: 1px solid var(--border);
    }

    /* Última linha sem traço (a tabela já tem a borda de fechamento) */
    .table-companies tbody tr:last-child { border-bottom: none; }

    /* Células sem borda nem preenchimento de tabela dentro da linha */
    .table-companies td { border: none; padding: 0; }

    .table-companies td.cell-company {
        grid-area: empresa;
        white-space: normal;
        word-break: break-word;
    }

    /* Estatísticas e situação não aparecem na listagem do celular */
    .table-companies td.cell-status,
    .table-companies td.cell-metric { display: none; }

    /* À direita: o STATUS fica acima do botão "Editar", empilhados
       verticalmente e alinhados à borda direita da linha. */
    .table-companies td.actions-cell {
        grid-area: acoes;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 6px;
        white-space: normal;
    }

    .table-companies td.actions-cell .btn { margin-right: 0; }

    /* ----------------------------------------------------------------------
       BOTÃO DE AÇÃO DO CABEÇALHO EM LARGURA TOTAL (celular)
       ----------------------------------------------------------------------
       Ex.: "Nova empresa" no painel do programador ocupa toda a largura. */
    .btn-full-mobile { width: 100%; }

    /* ----------------------------------------------------------------------
       TABELA "ENDEREÇOS DESTA EMPRESA" NO CELULAR (painel do programador)
       ----------------------------------------------------------------------
       Sem rolagem lateral: cada linha vira um bloco com a DESCRIÇÃO na 1ª
       linha (centralizada) e o respectivo ENDEREÇO na 2ª linha (centralizado). */
    .table-addresses tbody,
    .table-addresses tr,
    .table-addresses td { display: block; width: 100%; }

    .table-addresses tr {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }

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

    .table-addresses td {
        border: none;
        padding: 0;
        text-align: center;
    }

    /* Descrição (1ª linha) em destaque; endereço (2ª linha) logo abaixo. */
    .table-addresses td:first-child {
        font-weight: 600;
        color: var(--text);
        margin-bottom: 2px;
    }

    /* O link do endereço quebra a linha em vez de empurrar a tela para o lado. */
    .table-addresses a { word-break: break-all; }
}

/* Celulares (até 600px): layouts de coluna única e modais mais compactos */
@media (max-width: 600px) {
    .container { padding: 0 16px; }

    .header-content {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        align-items: center;
        gap: 10px;
    }
    .header-spacer {
        display: block;
        justify-self: start;
    }
    .logo {
        justify-self: center;
        min-width: 0;
    }
    .logo-texts {
        align-items: center;
        text-align: center;
    }
    .logo-system-name img {
        max-width: min(220px, calc(100vw - 132px));
    }
    .theme-toggle {
        justify-self: end;
    }
    .site-header nav { justify-content: center; }

    .card-grid { grid-template-columns: 1fr; }
    .appointment-card { flex-direction: column; align-items: flex-start; text-align: left; }

    .hero { padding: 28px 22px; margin-top: 20px; }
    .hero h1 { font-size: 1.7rem; }
    .step { margin-top: 30px; }

    .footer-inner { flex-direction: column; text-align: center; }

    /* No modal, rótulo e valor ficam empilhados em telas estreitas */
    .details-row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .details-row strong { text-align: left; }

    .form-row { flex-direction: column; gap: 0; }
    /* No celular, os campos do endereço (Número e UF) viram largura total —
       o flex-basis fixo seria interpretado como altura na coluna. */
    .form-group--short,
    .form-group--uf { flex: 1 1 auto !important; }
    /* Exceção: os horários "Início" e "Fim" são curtos e continuam lado a lado
       no celular (Início à esquerda, Fim à direita). */
    .form-row--times { flex-direction: row; gap: 12px; }
    .calendar-toolbar { flex-direction: column; align-items: stretch; }

    /* Busca/filtro no celular: o campo continua flexível, mas ENCOLHE para
       caber ao lado do botão — assim "Buscar" fica na MESMA linha da caixa de
       texto. O botão não encolhe (flex: 0 0 auto) e mantém o tamanho. */
    form.date-filter input,
    form.date-filter select { flex: 1 1 auto; min-width: 0; }
    form.date-filter .btn { flex: 0 0 auto; }

    /* Linha de serviço mais compacta no celular: a miniatura encolhe, o preço
       ganha uma largura mais curta, mas a estrutura continua em 4 partes:
       nome | respiro | preço | imagem. */
    .service-row {
        grid-template-columns: minmax(0, 1fr) 12px minmax(92px, auto) 52px;
        gap: 10px;
        padding: 14px;
        border-radius: 18px;
    }
    .service-row-spacer { width: 12px; }
    .service-row-price-block { min-width: 96px; }
    .service-row-price { font-size: 0.98rem; }
    .service-row-time { font-size: 0.88rem; }
    .service-row-thumb { width: 52px; height: 52px; }
    .professional-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
    }
    .professional-card-action { grid-column: 1 / -1; justify-self: start; }
    .prof-photo { width: 58px; border-radius: 14px; }
    .prof-avatar { width: 54px; height: 54px; font-size: 1.2rem; }

    .modal-overlay { padding: 16px 10px; }
    .form-container { padding: 24px 20px; }
    .dashboard { margin-top: 26px; }
}

/* Celulares pequenos (até 480px): reduz ainda mais o calendário */
@media (max-width: 480px) {
    .service-row {
        grid-template-columns: minmax(0, 1fr) 8px minmax(84px, auto) 44px;
        align-items: center;
        gap: 8px;
        padding: 12px;
    }
    .service-row-spacer {
        display: block;
        width: 8px;
    }
    .service-row-price-block {
        align-items: flex-start;
        min-width: 0;
    }
    .service-row-thumb {
        width: 44px;
        height: 44px;
    }
    .service-row-name { font-size: 1rem; }
    .service-row-time { font-size: 0.84rem; }
    .service-row-price-label { font-size: 0.8rem; }
    .service-row-price { font-size: 0.95rem; }
    .fc .fc-toolbar-title { font-size: 0.95rem; }
    .fc .fc-col-header-cell-cushion { font-size: 0.68rem; }
    .appointment-actions { flex-wrap: wrap; }
}

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   13. SITE INSTITUCIONAL (rota "/")
   --------------------------------------------------------------------------
   Página única de apresentação da plataforma (portal/site.html). Reaproveita
   os tokens e os componentes já existentes — o que é exclusivo desta página
   usa os prefixos `.site-`, `.carousel-` e `.balloon`/`.plan`.

   Ver o padrão visual completo da aplicação em `.trae/skills/anotu/SKILL.md`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BARRA SUPERIOR FIXA
   --------------------------------------------------------------------------
   Três elementos na mesma linha: atalho à esquerda, marca no centro e acesso
   ao painel à direita. A grade de 3 colunas (`1fr auto 1fr`) mantém a marca
   no centro exato, mesmo com botões de larguras diferentes nas laterais. */
.site-topbar {
    position: sticky;               /* Permanece no topo ao rolar a página */
    top: 0;
    z-index: 60;                    /* Acima do conteúdo, abaixo dos modais */
    padding: 12px 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}

.site-topbar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.site-topbar-partners { justify-self: start; }
.site-topbar-login { justify-self: end; }

/* Marca central: mesmo formato do `.logo-mark` do cabeçalho público */
.site-topbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 7px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.site-topbar-brand img { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------------------
   BLOCOS DO SITE (largura e respiro entre seções)
   -------------------------------------------------------------------------- */
.site-hero {
    padding: 72px 0 8px;
    text-align: center;
}

/* A marca é o primeiro elemento da página: caixa clara com a logo em
   destaque, no mesmo espírito do `.logo-mark` do cabeçalho. */
.site-hero-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 22px;
    margin-bottom: 28px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.site-hero-logo img { display: block; height: 52px; width: auto; }

.site-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }

.site-hero-sub {
    max-width: 680px;
    margin: 14px auto 0;
    color: var(--text-soft);
    font-size: 1.04rem;
}

/* Cada seção do site: mesmo container das demais páginas + respiro no topo */
.site-section { padding-top: 64px; }

.site-heading { text-align: center; margin-bottom: 28px; }
.site-heading h2 { font-size: clamp(1.3rem, 2.6vw, 1.65rem); }
.site-heading p { margin-top: 8px; color: var(--muted); }

/* --------------------------------------------------------------------------
   BALÕES NAVEGÁVEIS (missão/visão/valores e planos)
   --------------------------------------------------------------------------
   Um item por vez: a faixa (`track`) desliza de lado em passos de 100%, no
   lugar de a página crescer para baixo. As setas ficam nas laterais e os
   indicadores (também clicáveis) logo abaixo. */
.carousel-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.carousel-viewport { flex: 1; overflow: hidden; }
.carousel-track { display: flex; transition: transform var(--t); }

/* O recuo interno dá espaço para a sombra do balão não ser cortada */
.carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
    padding: 6px;
}

.carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-soft);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}

.carousel-btn:hover { background: var(--surface-2); color: var(--text); }
.carousel-btn svg { width: 20px; height: 20px; }

/* Nas pontas a seta correspondente fica apagada (não há para onde ir) */
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
.carousel-btn:disabled:hover { background: var(--surface); color: var(--text-soft); }

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    cursor: pointer;
    transition: background var(--t-fast), width var(--t);
}

/* O item visível é uma "barrinha" na cor da marca */
.carousel-dot.is-active { width: 24px; background: var(--primary); }

/* --------------------------------------------------------------------------
   BALÃO (cartão de um item do carrossel)
   -------------------------------------------------------------------------- */
.balloon {
    padding: 34px 30px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Ícone ACIMA do título: os dois empilhados (coluna) e centralizados no balão */
.balloon-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.balloon-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 16px;
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(1, 123, 137, 0.6);
}

.balloon-icon svg { width: 26px; height: 26px; }
.balloon-head h3 { font-size: 1.2rem; }

.balloon p {
    max-width: 640px;
    margin: 0 auto;
    color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   CHAMADA PARA O DIRETÓRIO
   -------------------------------------------------------------------------- */
.site-cta {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

/* Botão grande: usado pela chamada principal do site ("Encontrar Parceiros") */
.btn-lg {
    min-height: 52px;
    padding: 14px 28px;
    font-size: 1rem;
    border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   RECURSOS DO APLICATIVO
   --------------------------------------------------------------------------
   No celular os recursos são um carrossel, como os balões acima (um cartão por
   vez). A grade exibida no desktop está na regra `.carousel--responsive`, mais
   abaixo. */
.feature {
    height: 100%;                   /* Cartões da mesma altura dentro da grade */
    padding: 24px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    /* Ícone, título e texto centralizados no balão */
    text-align: center;
}

/* Mesmo quadrado de ícone das ações rápidas do painel (`.action-icon`) */
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 13px;
    background: var(--primary-soft);
    color: var(--primary-strong);
}

.feature-icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1rem; margin-bottom: 6px; }

.feature p {
    color: var(--text-soft);
    font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   PLANOS
   -------------------------------------------------------------------------- */
.plan {
    position: relative;             /* Âncora da etiqueta sobreposta */
    display: flex;
    flex-direction: column;
    max-width: 420px;               /* Cartão estreito e centralizado */
    height: 100%;
    margin: 0 auto;
    padding: 30px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* O carrossel de planos reserva um respiro acima do cartão para a etiqueta
   sobreposta não ser cortada pelo recorte do carrossel. */
.carousel--plans .carousel-slide { padding: 20px 6px 8px; }

/* Plano em destaque: borda e sombra na cor da marca */
.plan.is-featured {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

/* Etiqueta SOBREPOSTA à borda do balão (metade para fora), centralizada no
   topo. Ficar fora do fluxo é o que mantém os três planos com os campos
   exatamente na mesma posição. */
.plan-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--brand-gradient);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.plan-name { font-size: 1.05rem; }

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 12px;
}

.plan-price strong {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    letter-spacing: -0.02em;
}

.plan-period { color: var(--muted); font-size: 0.9rem; }

.plan-annual {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.88rem;
}

.plan-features {
    display: grid;
    gap: 10px;
    margin: 20px 0 24px;
    list-style: none;               /* Lista sem marcador: usa o ícone de check */
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--text-soft);
}

.plan-features svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--success);
}

/* O botão fica sempre no rodapé do cartão, alinhado entre os planos */
.plan .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   CARROSSEL SÓ NO CELULAR (os recursos viram grade no desktop)
   --------------------------------------------------------------------------
   O carrossel de recursos só faz sentido em telas estreitas: no desktop os
   quatro cartões cabem lado a lado. Aqui o MESMO bloco vira grade e as setas e
   os indicadores somem. O deslize é anulado com `!important` porque o
   JavaScript escreve o `transform` direto no elemento (estilo em linha). */
@media (min-width: 641px) {
    .carousel--responsive .carousel-row { display: block; }
    .carousel--responsive .carousel-viewport { overflow: visible; }
    .carousel--responsive .carousel-track { transform: none !important; }

    .carousel--responsive .carousel-btn,
    .carousel--responsive .carousel-dots { display: none; }

    /* Cada item deixa de ocupar a tela inteira e passa a ser uma coluna */
    .carousel--responsive .carousel-slide {
        min-width: 0;
        padding: 0;
    }

    .site-features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 16px;
    }
}

/* --------------------------------------------------------------------------
   SITE INSTITUCIONAL EM TELAS ESTREITAS
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .site-topbar-inner { padding: 0 16px; gap: 8px; }

    /* Botões mais compactos para os três elementos caberem sem rolagem */
    .site-topbar .btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .site-topbar .btn svg { width: 16px; height: 16px; }
    .site-topbar-brand { width: 36px; height: 36px; padding: 5px; }

    .site-hero { padding-top: 48px; }
    .site-hero-logo { padding: 12px 16px; margin-bottom: 22px; }
    .site-hero-logo img { height: 38px; }

    .site-section { padding-top: 48px; }

    /* As setas encolhem para o balão não ficar espremido */
    .carousel-row { gap: 8px; }
    .carousel-btn { width: 38px; height: 38px; }
    .carousel-btn svg { width: 18px; height: 18px; }

    .balloon { padding: 26px 20px; }
    .balloon-head { gap: 12px; }
    .balloon-icon { width: 46px; height: 46px; border-radius: 14px; }
    .balloon-icon svg { width: 23px; height: 23px; }
    .balloon-head h3 { font-size: 1.08rem; }

    .site-cta .btn-lg { width: 100%; }
    .plan { padding: 26px 22px; }
}