/* =====================================================================
   LOOKLY — Calendário por blocos
   Visões: Dia · Semana · Mês
   ===================================================================== */

.calendar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    /* A grade rola dentro de si mesma; a página nunca rola de lado por ela. */
    max-width: 100%;
}

/* ---------------------------------------------------------------
   1. Barra de controle
   --------------------------------------------------------------- */
.calendar-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    background: var(--surface);
}

.calendar-nav { display: flex; align-items: center; gap: .25rem; }

.calendar-nav-btn {
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--gray-600);
    cursor: pointer;
    transition: all var(--t-fast);
}
.calendar-nav-btn:hover { background: var(--primary-50); border-color: var(--primary-300); color: var(--primary); }

.calendar-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: capitalize;
    min-width: 170px;
}

.calendar-views {
    display: inline-flex;
    padding: 3px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    gap: 2px;
}
.calendar-view-btn {
    padding: .35rem .8rem;
    border: 0;
    border-radius: 6px;
    background: none;
    font-size: .82rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.calendar-view-btn.is-active { background: var(--surface); color: var(--primary-700); box-shadow: var(--shadow-xs); }

.calendar-spacer { flex: 1; }
.calendar-filter { width: auto; max-width: 210px; }

/* Legenda de status */
.calendar-legend {
    display: flex;
    gap: .875rem;
    flex-wrap: wrap;
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
    font-size: .75rem;
    color: var(--text-muted);
}
.legend-item { display: flex; align-items: center; gap: .35rem; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
/* Amostra do riscado usado nos blocos travados. */
.legend-dot.is-blocked {
    background:
        repeating-linear-gradient(45deg,
            var(--gray-400) 0, var(--gray-400) 2px,
            var(--gray-200) 2px, var(--gray-200) 4px);
}

/* Dica de uso: só faz sentido (e só aparece) no celular, onde a semana
   inteira não cabe e o toque no dia é o atalho para entrar nele. */
.calendar-hint {
    display: none;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    font-size: .72rem;
    color: var(--text-subtle);
}
.calendar-hint svg { flex-shrink: 0; color: var(--primary); }
/* O texto da dica muda conforme a visão (o JS marca data-view no .calendar).
   Sem data-view ainda (antes do 1º render), mostramos a da semana. */
.calendar-hint > span { display: none; }
.calendar:not([data-view]) .hint-week,
.calendar[data-view="week"] .hint-week,
.calendar[data-view="day"] .hint-day,
.calendar[data-view="month"] .hint-month { display: inline; }
/* A dica de destravar vale em todas as visões. */
.calendar-hint > .hint-unlock { display: inline; }

/* ---------------------------------------------------------------
   2. Visão Dia / Semana — grade de horários
   --------------------------------------------------------------- */
.calendar-grid {
    position: relative;
    overflow: auto;
    /* O cabeçalho agora mora aqui dentro (gruda no topo), então a área ganha
       de volta a altura que ele ocupava fora da rolagem. */
    max-height: calc(100vh - 205px);
    -webkit-overflow-scrolling: touch;
}

.calendar-grid-inner {
    display: grid;
    /* A primeira coluna é a régua de horários; as demais são os dias. */
    grid-template-columns: 60px repeat(var(--day-count, 1), minmax(120px, 1fr));
    position: relative;
}

/* Cabeçalho dos dias */
.calendar-head {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 60px repeat(var(--day-count, 1), minmax(120px, 1fr));
    /* Ocupa a largura TODA das colunas (não só a parte visível). Sem isto, ao
       rolar a semana de lado no celular, os dias além da 1ª tela ficariam sem
       fundo e a grade vazaria por trás do cabeçalho. As colunas usam 30vw
       (medida da tela), então cabeçalho e corpo continuam alinhados. */
    min-width: max-content;
}

/* Canto (horas × cabeçalho): fica preso no canto superior esquerdo. O JS o
   desloca conforme a rolagem lateral (sticky horizontal falha dentro de grid
   em alguns navegadores, incl. iOS). */
.calendar-head-corner {
    z-index: 6;
    background: var(--surface);
    border-right: 1px solid var(--gray-100);
    will-change: transform;
}

.calendar-day-head {
    padding: .625rem .5rem;
    text-align: center;
    border-right: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background var(--t-fast);
}
.calendar-day-head:last-child { border-right: 0; }
.calendar-day-head:hover { background: var(--primary-50); }
.calendar-day-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.calendar-day-name {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-subtle);
}
.calendar-day-number {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gray-800);
}
.calendar-day-head.is-today .calendar-day-number {
    display: inline-grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1rem;
}
.calendar-day-head.is-today .calendar-day-name { color: var(--primary); }
.calendar-day-head.is-closed { background: var(--gray-50); }

/* Dia travado: o cabeçalho avisa antes de a dona rolar a grade atrás do bloco. */
.calendar-day-head.is-blocked { background: var(--gray-50); }
.calendar-day-head.is-blocked .calendar-day-number { color: var(--gray-500); }
.calendar-day-lock {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-top: .2rem;
    padding: .05rem .3rem;
    border-radius: var(--radius-full, 999px);
    background: var(--gray-200);
    color: var(--gray-700);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
}
.calendar-day-lock.is-partial { background: var(--warning-bg, #FEF4E3); color: #92400E; }

/* Régua de horários: fica fixa à esquerda ao arrastar a semana de lado. O
   deslocamento é feito por JS (translateX = scrollLeft), porque sticky na
   horizontal dentro de grid não é confiável entre navegadores (iOS "solta"
   a régua ao rolar). */
.calendar-hours {
    grid-column: 1;
    border-right: 1px solid var(--gray-100);
    background: var(--surface);
    z-index: 10;
    will-change: transform;
}

.calendar-hour {
    height: var(--hour-height, 60px);
    padding-right: .5rem;
    text-align: right;
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-subtle);
    border-bottom: 1px solid var(--gray-100);
    position: relative;
}
.calendar-hour span { position: relative; top: -.55em; background: var(--surface); padding-left: 4px; }

/* Coluna de um dia */
.calendar-col {
    position: relative;
    border-right: 1px solid var(--gray-100);
    min-height: 100%;
}
.calendar-col:last-child { border-right: 0; }
.calendar-col.is-closed { background: repeating-linear-gradient(
    45deg, var(--gray-50), var(--gray-50) 6px, transparent 6px, transparent 12px
); }

/* Faixa clicável de cada hora (abre o modal de novo agendamento) */
.calendar-slot {
    height: var(--hour-height, 60px);
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background var(--t-fast);
    position: relative;
}
.calendar-slot:hover { background: var(--primary-50); }
.calendar-slot::after {
    content: '+';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--primary-300);
    opacity: 0;
    transition: opacity var(--t-fast);
    pointer-events: none;
}
.calendar-slot:hover::after { opacity: 1; }
.calendar-slot.is-blocked { cursor: not-allowed; background: var(--gray-50); }
.calendar-slot.is-blocked:hover::after { opacity: 0; }

/* Meia hora — linha mais clara */
.calendar-slot::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    border-top: 1px dashed var(--gray-100);
    pointer-events: none;
}

/* Linha do "agora" */
.calendar-now {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--danger);
    /* Acima dos eventos (5), abaixo da régua de horas (10): ao rolar de lado, a
       régua fixa tapa a linha em vez de deixá-la vazar por cima. */
    z-index: 8;
    pointer-events: none;
}
.calendar-now::before {
    content: '';
    position: absolute;
    left: -4px; top: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--danger);
}

/* ---------------------------------------------------------------
   3. Bloco de agendamento
   --------------------------------------------------------------- */
.event {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 6px;
    padding: .3rem .45rem;
    font-size: .74rem;
    line-height: 1.3;
    overflow: hidden;
    cursor: pointer;
    border-left: 3px solid var(--event-color, var(--primary));
    background: var(--event-bg, var(--primary-100));
    color: var(--event-text, var(--primary-700));
    transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
    z-index: 5;
    min-height: 22px;
}
.event:hover {
    z-index: 12;
    box-shadow: var(--shadow);
    transform: scale(1.015);
    filter: brightness(.98);
}

.event-time { font-weight: 700; font-size: .7rem; opacity: .85; }
.event-client { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-service { opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }

/* Blocos curtos: só cabe uma linha */
.event.is-short { padding: .15rem .4rem; display: flex; align-items: center; gap: .35rem; }
.event.is-short .event-service, .event.is-short .event-time { display: none; }

.event.is-canceled { opacity: .55; }
.event.is-canceled .event-client { text-decoration: line-through; }

/* Estilos por status */
.event[data-status="pending"]   { --event-color: var(--status-pending);   --event-bg: #FEF4E3; --event-text: #92400E; }
.event[data-status="confirmed"] { --event-color: var(--status-confirmed); --event-bg: #EDE6FE; --event-text: #5B21B6; }
.event[data-status="completed"] { --event-color: var(--status-completed); --event-bg: #E7F8F1; --event-text: #065F46; }
.event[data-status="canceled"]  { --event-color: var(--status-canceled);  --event-bg: var(--gray-100); --event-text: var(--gray-600); }
.event[data-status="no_show"]   { --event-color: var(--status-no_show);   --event-bg: #FDECEC; --event-text: #991B1B; }

/* -----------------------------------------------------------------
   Travas da agenda (blackouts)
   O bloco fica ATRÁS dos agendamentos (z-index menor que .event): um
   horário pode ter sido marcado antes de a dona travar o dia, e ele
   precisa continuar visível e clicável.
   ----------------------------------------------------------------- */
.calendar-col.is-blocked { background: var(--gray-50); }

.blackout {
    position: absolute;
    left: 3px;
    right: 3px;
    z-index: 3;
    border-radius: 6px;
    padding: .3rem .45rem;
    overflow: hidden;
    cursor: pointer;
    border-left: 3px solid var(--gray-400);
    color: var(--gray-700);
    background:
        repeating-linear-gradient(45deg,
            rgba(148, 163, 184, .18) 0, rgba(148, 163, 184, .18) 6px,
            rgba(148, 163, 184, .06) 6px, rgba(148, 163, 184, .06) 12px);
    background-color: var(--gray-50);
    font-size: .72rem;
    line-height: 1.3;
    transition: filter var(--t-fast), box-shadow var(--t-fast);
}
.blackout:hover { filter: brightness(.97); box-shadow: var(--shadow); }
.blackout:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.blackout-head { display: flex; align-items: center; gap: .25rem; font-weight: 700; }
.blackout-head svg { flex-shrink: 0; }
.blackout-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blackout-who { font-size: .68rem; font-weight: 600; opacity: .9; }
.blackout-time { font-size: .68rem; opacity: .75; }
.blackout-reason {
    font-size: .68rem;
    opacity: .8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Destravar" fica sempre visível: a profissional usa o celular, onde não
   existe hover para revelar o botão. */
.blackout-unlock {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-top: .25rem;
    padding: .1rem .35rem;
    border-radius: var(--radius-full, 999px);
    background: var(--surface);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.08));
    color: var(--primary-700);
    font-size: .66rem;
    font-weight: 700;
    white-space: nowrap;
}
/* Bloco baixo (trava de 30–45 min): só cabe o cadeado e a hora. */
.blackout.is-short { padding: .15rem .4rem; display: flex; align-items: center; }
.blackout.is-short .blackout-head { min-width: 0; }
.blackout.is-short .blackout-title { font-size: .68rem; }

/* Dia inteiro: o traço some e a faixa cobre a coluna toda. */
.blackout.is-all-day { border-left-color: var(--gray-500); }

/* ---------------------------------------------------------------
   4. Visão Mês
   --------------------------------------------------------------- */
.calendar-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-month-head {
    padding: .625rem .25rem;
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-subtle);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}

.calendar-cell {
    min-height: 108px;
    padding: .375rem;
    border-right: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background var(--t-fast);
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.calendar-cell:nth-child(7n) { border-right: 0; }
.calendar-cell:hover { background: var(--primary-50); }
.calendar-cell.is-outside { background: var(--gray-50); color: var(--gray-400); }
.calendar-cell.is-outside:hover { background: var(--gray-100); }

.calendar-cell-date {
    font-size: .8rem;
    font-weight: 650;
    color: var(--gray-700);
    align-self: flex-start;
    padding: 1px 5px;
    border-radius: var(--radius-full);
    line-height: 1.5;
}
.calendar-cell.is-today .calendar-cell-date { background: var(--primary); color: #fff; }
.calendar-cell.is-outside .calendar-cell-date { color: var(--gray-400); }

.month-event {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: .68rem;
    line-height: 1.5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: var(--event-bg, var(--primary-100));
    color: var(--event-text, var(--primary-700));
    cursor: pointer;
}
.month-event[data-status="pending"]   { --event-bg: #FEF4E3; --event-text: #92400E; }
.month-event[data-status="confirmed"] { --event-bg: #EDE6FE; --event-text: #5B21B6; }
.month-event[data-status="completed"] { --event-bg: #E7F8F1; --event-text: #065F46; }
.month-event[data-status="canceled"]  { --event-bg: var(--gray-100); --event-text: var(--gray-600); }
.month-event[data-status="no_show"]   { --event-bg: #FDECEC; --event-text: #991B1B; }

.month-event-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Dia travado no mês: fundo riscado + etiqueta que destrava ao clicar. */
.calendar-cell.is-blocked {
    background:
        repeating-linear-gradient(45deg,
            rgba(148, 163, 184, .14) 0, rgba(148, 163, 184, .14) 6px,
            transparent 6px, transparent 12px);
    background-color: var(--gray-50);
}
.calendar-cell.is-blocked:hover { background-color: var(--gray-100); }

.month-blocked {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .15rem;
    padding: .1rem .3rem;
    border-radius: 4px;
    background: var(--gray-200);
    color: var(--gray-700);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}
.month-blocked svg { flex-shrink: 0; }
.month-blocked span { overflow: hidden; text-overflow: ellipsis; }
.month-blocked:hover { background: var(--gray-300); }
.month-blocked:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.month-more {
    font-size: .66rem;
    font-weight: 600;
    color: var(--text-subtle);
    padding: 0 4px;
}

/* ---------------------------------------------------------------
   5. Modal de detalhes do agendamento
   --------------------------------------------------------------- */
.event-detail-header {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.event-detail-list { display: flex; flex-direction: column; gap: .875rem; }

.detail-row { display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem; }
.detail-row svg { width: 18px; height: 18px; color: var(--gray-400); flex-shrink: 0; margin-top: 2px; }
.detail-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle); }
.detail-value { font-weight: 550; }

.service-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--gray-100);
    font-size: .875rem;
}
.service-line:last-child { border-bottom: 0; }

.status-picker { display: flex; gap: .375rem; flex-wrap: wrap; }
.status-option {
    padding: .4rem .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: all var(--t-fast);
}
.status-option:hover { border-color: var(--gray-400); }
.status-option.is-active { border-color: transparent; }
.status-option.is-active[data-status="pending"]   { background: var(--warning-bg); color: #92400E; }
.status-option.is-active[data-status="confirmed"] { background: var(--primary-100); color: var(--primary-700); }
.status-option.is-active[data-status="completed"] { background: var(--success-bg); color: #065F46; }
.status-option.is-active[data-status="canceled"]  { background: var(--gray-100); color: var(--gray-700); }
.status-option.is-active[data-status="no_show"]   { background: var(--danger-bg); color: #991B1B; }

/* ---------------------------------------------------------------
   6. Seletor de horários (agendamento manual e público)
   --------------------------------------------------------------- */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .5rem;
}

.slot-btn {
    padding: .625rem .25rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: .875rem;
    font-weight: 650;
    color: var(--gray-700);
    cursor: pointer;
    text-align: center;
    transition: all var(--t-fast);
}
.slot-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }
.slot-btn.is-selected {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-primary);
}
.slot-btn:disabled { opacity: .35; cursor: not-allowed; background: var(--gray-50); }

/* Mini calendário de seleção de data */
.mini-calendar { user-select: none; }

.mini-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.mini-calendar-title { font-size: .95rem; font-weight: 650; text-transform: capitalize; }

.mini-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.mini-weekday {
    text-align: center;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-subtle);
    padding: .25rem 0;
}
.mini-day {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    transition: all var(--t-fast);
}
.mini-day:hover:not(:disabled) { background: var(--primary-50); color: var(--primary-700); }
.mini-day.is-selected { background: var(--primary); color: #fff; }
.mini-day.is-today { box-shadow: inset 0 0 0 1.5px var(--primary-300); }
.mini-day:disabled { color: var(--gray-300); cursor: not-allowed; }
.mini-day.is-outside { visibility: hidden; }
.mini-day.has-slots::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--success);
}
.mini-day { position: relative; }
/* ---------------------------------------------------------------
   7. Responsivo
   --------------------------------------------------------------- */

/* Celular e tablet estreito: a toolbar precisa caber sem empurrar a agenda
   para o fim da rolagem. Título em cima; navegar e trocar de visão na mesma
   linha; os dois filtros lado a lado, ocupando a largura toda. */
@media (max-width: 640px) {
    .calendar-toolbar {
        gap: .5rem .5rem;
        align-items: center;
    }
    .calendar-title {
        order: -1;
        flex: 1 1 100%;
        min-width: auto;
        font-size: 1rem;
        text-align: center;
    }
    .calendar-nav { order: 1; }
    .calendar-views { order: 2; margin-left: auto; }
    .calendar-spacer { display: none; }

    /* Os filtros descem para uma linha própria (a largura mínima os expulsa
       da linha das abas) e a dividem meio a meio — assim mostram o texto,
       não um "To..." cortado. */
    .calendar-filter {
        order: 3;
        flex: 1 1 40%;
        width: auto;
        max-width: none;
        min-width: 148px;
    }

    .calendar-legend { gap: .5rem 1rem; font-size: .7rem; }
    .calendar-hint { display: flex; }

    /* Deixa mais tela para a grade (a toolbar já é mais compacta e o
       cabeçalho agora rola junto, dentro da própria grade). O desconto maior
       que no desktop reserva espaço para a dica de uso, que só existe aqui. */
    .calendar-grid { max-height: calc(100dvh - 235px); }
    .calendar-hours { width: 46px; }

    /* Encaixe rápido: os horários e serviços do dia ficam com blocos maiores. */
    .slot-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}

/* Semana no celular vertical: 7 colunas nunca cabem legíveis numa tela
   estreita. Mostramos ~3 dias por vez, cada um confortável, com rolagem
   lateral suave — e a régua de horas fica fixa à esquerda. A visão Dia
   (uma coluna) e o Mês (7 colunas 1fr) usam o mesmo bloco sem prejuízo. */
@media (max-width: 640px) {
    .calendar-grid { overscroll-behavior-x: contain; scroll-snap-type: x proximity; }

    .calendar-grid-inner,
    .calendar-head {
        grid-template-columns: 46px repeat(var(--day-count, 1), minmax(30vw, 1fr));
    }

    .calendar-col { scroll-snap-align: start; }

    .calendar-day-head { padding: .5rem .25rem; }
    .calendar-day-name { font-size: .66rem; }
    .calendar-day-number { font-size: 1rem; }

    .event { font-size: .68rem; padding: 2px 4px; }
    .event-service { display: none; }   /* nome do serviço fica no toque/modal */
    .calendar-hour span { font-size: .64rem; }
}

/* Dia: uma coluna deve ocupar a largura inteira (sem exigir os 30vw). */
@media (max-width: 640px) {
    .calendar[data-view="day"] .calendar-grid-inner,
    .calendar[data-view="day"] .calendar-head {
        grid-template-columns: 46px minmax(0, 1fr);
    }
}

/* Mês no celular: células compactas e tocáveis; os eventos não transbordam. */
@media (max-width: 640px) {
    .calendar-month-head { padding: .5rem .15rem; font-size: .6rem; }
    .calendar-cell { min-height: 70px; padding: .25rem .2rem; }
    .calendar-cell-date { font-size: .74rem; }
    .month-event {
        font-size: .58rem;
        padding: 0 3px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .month-more { font-size: .56rem; }
}

/* Muito estreito (iPhone SE e afins): o horário some do bloco do mês,
   sobra a bolinha colorida — evita o texto brigar com a largura. */
@media (max-width: 380px) {
    .calendar-grid-inner,
    .calendar-head:not(.calendar-month) {
        grid-template-columns: 42px repeat(var(--day-count, 1), minmax(33vw, 1fr));
    }
    .calendar-hours { width: 42px; }
    /* No Dia a 1ª coluna continua 46px (override de data-view vence o grid de
       42px acima); a régua precisa acompanhar para casar com o canto. */
    .calendar[data-view="day"] .calendar-hours { width: 46px; }
    .month-event { text-indent: -9999px; position: relative; height: 8px; padding: 0; }
    .month-event .month-event-dot { position: absolute; left: 3px; top: 2px; text-indent: 0; }
}