@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #f8fafc; /* Light slate */
    color: #0f172a;
}

/* Premium Card & App Feel */
.app-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* ================= Calendário: grade e células (calendar.js: criarCelula) =================
   Cores da escala com contraste AA: número slate-900 sobre emerald-100/orange-100 (>12:1);
   barra -600 de 4px (>=3:1 contra o fundo da célula e o branco). Dia passado: tom -50 e
   número slate-600 (>6:1). A célula nunca estica além do que cabe: no Mês as linhas
   dividem a altura disponível (mínimo 44px), no Ano têm altura fixa. */
:root {
    --st-com: #059669; --st-com-bg: #d1fae5; --st-com-bg-passado: #ecfdf5; --st-com-txt: #065f46;
    --st-sem: #ea580c; --st-sem-bg: #ffedd5; --st-sem-bg-passado: #fff7ed; --st-sem-txt: #9a3412;
    --cal-cel: #ffffff; --cal-cel-fora: #f8fafc; --cal-borda: #e2e8f0;
    --cal-num: #0f172a; --cal-num-passado: #475569; --cal-num-fora: #64748b;
    --cal-hoje: #4f46e5; --cal-foco: #3730a3;
}
body.dark-theme {
    --st-com: #34d399; --st-com-bg: rgba(16, 185, 129, .22); --st-com-bg-passado: rgba(16, 185, 129, .10); --st-com-txt: #6ee7b7;
    --st-sem: #fb923c; --st-sem-bg: rgba(249, 115, 22, .22); --st-sem-bg-passado: rgba(249, 115, 22, .10); --st-sem-txt: #fdba74;
    --cal-cel: #1e293b; --cal-cel-fora: #172033; --cal-borda: #334155;
    --cal-num: #f1f5f9; --cal-num-passado: #cbd5e1; --cal-num-fora: #94a3b8;
    --cal-hoje: #818cf8; --cal-foco: #c7d2fe;
}

.calendar-container { background: transparent; }
.cal-grade { display: grid; gap: 3px; }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; min-height: 0; }

.calendar-day {
    position: relative; display: flex; flex-direction: column; align-items: flex-start;
    min-width: 0; min-height: 44px; padding: 6px 4px 4px; overflow: hidden;
    border-radius: 8px; background: var(--cal-cel); box-shadow: inset 0 0 0 1px var(--cal-borda);
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow .15s ease;
}
.calendar-day::before {   /* barra da escala no topo */
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--barra, transparent);
}
.calendar-day:hover { box-shadow: inset 0 0 0 2px #a5b4fc; }
.calendar-day:focus-visible { outline: 3px solid var(--cal-foco); outline-offset: 1px; z-index: 2; }

.calendar-day.bg-com-filhos { background: var(--st-com-bg); box-shadow: none; --barra: var(--st-com); }
.calendar-day.bg-sem-filhos { background: var(--st-sem-bg); box-shadow: none; --barra: var(--st-sem); }
/* ---- Dia de troca: a célula é dividida por uma LINHA HORIZONTAL ----
   Em cima, a cor de antes da troca; embaixo, a de depois. A altura da linha diz o momento:
   20% de manhã (faixa fina de antes), 50% à tarde, 80% à noite (faixa pequena de depois
   embaixo) — EscalaRegras.CORTE. Classes: sentido (troca-com-sem | troca-sem-com) + momento
   (troca-manha | troca-tarde | troca-noite). Cada lugar só diz as cores dos dois lados
   (--tr-com/--tr-sem) e da linha (--tr-com-l/--tr-sem-l, a cor forte de quem recebe). */
.troca-manha { --corte: 20%; }
.troca-tarde { --corte: 50%; }
.troca-noite { --corte: 80%; }
.troca-com-sem { --tr-a: var(--tr-com); --tr-d: var(--tr-sem); --tr-l: var(--tr-sem-l); --tr-al: var(--tr-com-l); }
.troca-sem-com { --tr-a: var(--tr-sem); --tr-d: var(--tr-com); --tr-l: var(--tr-com-l); --tr-al: var(--tr-sem-l); }
.calendar-day.bg-troca, .rc-dia.bg-troca, .ini-dia.st-troca, .mc-troca, .tr-cel {
    background: linear-gradient(to bottom,
        var(--tr-a, var(--tr-com)) 0 var(--corte, 50%),
        var(--tr-l, var(--tr-sem-l)) var(--corte, 50%) calc(var(--corte, 50%) + var(--tr-lw, 2px)),
        var(--tr-d, var(--tr-sem)) calc(var(--corte, 50%) + var(--tr-lw, 2px)) 100%);
}
.calendar-day, .rc-dia, .ini-dia { --tr-com: var(--st-com-bg); --tr-sem: var(--st-sem-bg); --tr-com-l: var(--st-com); --tr-sem-l: var(--st-sem); }
.calendar-day.bg-troca, .ini-dia.st-troca { box-shadow: none; --barra: var(--tr-al, var(--st-com)); }
/* Quando a linha passa na altura do número (manhã; no Ano, também a tarde), um halo da cor de
   cima mantém os algarismos legíveis sem parecer riscado */
.ini-dia.st-troca .ini-dia-n, .ini-dia.st-troca b,
.calendar-day.bg-troca:not(.day-today) .dia-num { text-shadow: 0 0 2px var(--tr-a, var(--tr-com)), 0 0 4px var(--tr-a, var(--tr-com)), 0 0 6px var(--tr-a, var(--tr-com)); }
/* Miniaturas (prévias, regras, chips de momento): tons mais cheios, linha branca */
.mc-troca, .tr-cel { --tr-com: #a7f3d0; --tr-sem: #fed7aa; --tr-com-l: #059669; --tr-sem-l: #ea580c; }
/* Na prévia do mês o número fica no meio da célula: a divisa das cores já é a linha (sem traço
   por cima do número, que pareceria riscado) */
.mini-grid .mc-troca { --tr-lw: 0px; }

/* Passado: tom mais claro (a escala continua legível); sem cinza nem opacidade no número */
.calendar-day.is-past.bg-com-filhos { background: var(--st-com-bg-passado); }
.calendar-day.is-past.bg-sem-filhos { background: var(--st-sem-bg-passado); }
.calendar-day.is-past.bg-troca { --tr-com: var(--st-com-bg-passado); --tr-sem: var(--st-sem-bg-passado); }
.calendar-day.is-past::before { opacity: .55; }
/* Dias de fora do mês exibido: sem preenchimento, só um fio da cor */
#calendar-root .calendar-day.fora-mes { background: var(--cal-cel-fora); box-shadow: inset 0 0 0 1px var(--cal-borda); }
#calendar-root .calendar-day.fora-mes::before { height: 3px; opacity: .8; }
#calendar-root .calendar-day.fora-mes.day-today { box-shadow: inset 0 0 0 2px var(--cal-hoje); }
.calendar-day.cel-filtrada { opacity: .32; }

.dia-num {
    display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px;
    font-size: 13px; font-weight: 800; line-height: 1; color: var(--cal-num);
    font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0;
}
.dia-num small { font-size: 10px; font-weight: 700; }
.is-past .dia-num { color: var(--cal-num-passado); font-weight: 700; }
.fora-mes .dia-num { color: var(--cal-num-fora); font-weight: 600; }
/* Hoje: o número vira um círculo (o marcador É o número; nada por cima dele) */
.calendar-day.day-today { box-shadow: inset 0 0 0 2px var(--cal-hoje); }
.calendar-day.day-today .dia-num { background: var(--cal-hoje); color: #fff; }
body.dark-theme .calendar-day.day-today .dia-num { color: #0f172a; }

/* Período especial: pontinho no canto superior direito */
.period-mark {
    position: absolute; top: 8px; right: 5px; width: 7px; height: 7px; border-radius: 999px;
    background: #4f46e5; box-shadow: 0 0 0 2px var(--cal-cel);
}
/* Selo "Dia de troca" do detalhe do dia (o texto ao lado diz o momento e o sentido) */
.badge-troca { background: #e0e7ff; color: #3730a3; }
body.dark-theme .badge-troca { background: rgba(99, 102, 241, .25); color: #c7d2fe; }
.period-mark-troca { background: linear-gradient(to bottom, var(--st-com) 0 50%, var(--st-sem) 50% 100%); }

/* Indicador de eventos: até 3 pontinhos, ou o número; selo "cobre" vira um ícone */
.dia-marcas { position: absolute; right: 4px; bottom: 4px; display: flex; align-items: center; gap: 3px; }
.dia-pt { width: 6px; height: 6px; border-radius: 999px; background: var(--c, #4f46e5); }
.dia-qtd {
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #4f46e5; color: #fff;
    font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
}
.dia-selo { font-size: 13px; color: #047857; }
body.dark-theme .dia-selo { color: #6ee7b7; }
.dia-titulos { display: none; }

@media (min-width: 640px) {
    .calendar-day { padding: 7px 6px 5px; border-radius: 10px; }
    .dia-num { font-size: 14px; min-width: 26px; height: 26px; }
    /* Desktop: até 2 títulos curtos (uma linha cada), sem esticar a célula */
    .dia-titulos { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; margin-top: 4px; }
    .dia-tit {
        display: block; min-width: 0; padding: 1px 6px; border-radius: 4px; border-left: 3px solid var(--c, #4f46e5);
        background: rgba(255, 255, 255, .72); color: #1e293b; font-size: 11.5px; font-weight: 600; line-height: 1.35;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .dia-tit b { font-weight: 800; }
    .dia-tit-selo { border-left-color: #047857; color: #065f46; background: rgba(209, 250, 229, .9); }
    .dia-mais { font-size: 11px; font-weight: 700; color: #475569; padding-left: 6px; }
    .dia-marcas .dia-pt, .dia-marcas .dia-qtd, .dia-marcas .dia-selo { display: none; }
    body.dark-theme .dia-tit { background: rgba(15, 23, 42, .55); color: #e2e8f0; }
    body.dark-theme .dia-mais { color: #cbd5e1; }
}
@media (prefers-reduced-motion: reduce) { .calendar-day { transition: none; } }

/* Sobreposição "Compartilhados comigo" dentro da célula: menor no celular (não briga com os pontinhos) */
@media (max-width: 639px) {
    #calendar-root .cs-ov { left: 3px; bottom: 3px; max-width: calc(100% - 26px); }
    #calendar-root .cs-mini { width: 12px; height: 12px; font-size: 7px; }
}

/* Legenda (header): uma linha só; cada item encolhe com reticências */
.cal-legenda { border-top: 1px solid #f1f5f9; }
.cal-legenda-lista {
    display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0;
    padding: 5px 0; margin: 0; list-style: none; font-size: 11px; font-weight: 700; color: #475569; white-space: nowrap;
}
.cal-legenda-lista li { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cal-legenda-lista li > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cal-legenda-lista li.hidden { display: none; }
.leg-sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.leg-com { background: var(--st-com); }
.leg-sem { background: var(--st-sem); }
/* ícone da troca: as duas cores separadas por uma linha horizontal (a cor da célula) */
.leg-troca { background: linear-gradient(to bottom, var(--st-com) 0 40%, var(--cal-cel) 40% 60%, var(--st-sem) 60% 100%); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); }
.leg-nd { background: transparent; box-shadow: inset 0 0 0 1.5px #94a3b8; }
@media (min-width: 640px) { .cal-legenda-lista { font-size: 12px; gap: 22px; padding: 6px 0; } .leg-sw { width: 12px; height: 12px; } }
body.dark-theme .cal-legenda { border-color: #1e293b; }
body.dark-theme .cal-legenda-lista { color: #cbd5e1; }

/* Dias da semana: contraste AA (slate-600; fim de semana indigo-700) */
.cal-dias-semana {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center;
    padding: 4px 0; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #475569;
}
.cal-dias-semana .fds { color: #4338ca; }
@media (min-width: 640px) { .cal-dias-semana { font-size: 12px; padding: 6px 0; } }
body.dark-theme .cal-dias-semana { color: #cbd5e1; }
body.dark-theme .cal-dias-semana .fds { color: #a5b4fc; }
/* No Ano a linha dos dias acompanha a rolagem */
body.cal-anual .cal-dias-semana {
    position: sticky; top: var(--hdr-h, 112px); z-index: 20;
    background: rgba(248, 250, 252, .95); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.dark-theme.cal-anual .cal-dias-semana { background: rgba(15, 23, 42, .95); }
body.cal-anual .cal-grade { grid-auto-rows: 54px; }
body.cal-anual .cal-semana { height: 54px; }
@media (min-width: 640px) { body.cal-anual .cal-grade { grid-auto-rows: 88px; } body.cal-anual .cal-semana { height: 88px; } }

/* --- Mês inteiro na tela, sem rolar: entre a barra do mês e a barra de abas ---
   #view-calendario tem a altura que sobra (dvh − header − barra de abas); a grade ocupa o
   resto e cada semana leva 1fr (mínimo 44px). Num celular baixo demais, ela rola.
   --bia-sobra (voz.css): o botão central da Bia sobe ~18px acima da barra; a grade termina
   antes dele, para a última semana nunca ficar coberta. */
body.aba-agenda.cal-mensal #app-main { padding-bottom: 0; }
body.aba-agenda.cal-mensal #view-calendario {
    display: flex; flex-direction: column;
    height: calc(100vh - var(--hdr-h, 112px) - var(--abas-h, 0px) - var(--bia-sobra, 0px));
    height: calc(100dvh - var(--hdr-h, 112px) - var(--abas-h, 0px) - var(--bia-sobra, 0px));
    padding-bottom: 6px;
}
body.aba-agenda.cal-mensal #view-calendario > * { flex: none; }
body.aba-agenda.cal-mensal #calendar-root { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.cal-mensal .cal-mes { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.cal-mensal .cal-mes .cal-grade { flex: 1 1 auto; min-height: 0; grid-template-rows: repeat(var(--semanas, 5), minmax(44px, 1fr)); }
@media (min-width: 640px) {
    body.aba-agenda.cal-mensal #view-calendario { padding-bottom: 16px; }
    /* Desktop: acompanha a altura, mas sem esticar (até 132px por semana) */
    body.cal-mensal .cal-mes .cal-grade { grid-template-rows: repeat(var(--semanas, 5), minmax(64px, 132px)); align-content: start; }
}

/* Glassmorphism Modals */
.modal-content {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}


/* Separator */
.month-separator {
    display: flex;
    align-items: center;
    margin: 3rem 0 1.5rem;
}
.month-separator::before,
.month-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
}
.month-separator span {
    padding: 0 1.5rem;
    font-weight: 800;
    color: #1e293b; /* Slate 800 */
    font-size: 1.35rem;
    letter-spacing: -0.025em;
}

/* Animations */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.97) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-fade-in {
    animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* --- DARK MODE OVERRIDES --- */
body.dark-theme {
    background-color: #0f172a;
    color: #f1f5f9;
}
body.dark-theme .bg-white { background-color: #1e293b !important; }
body.dark-theme .bg-slate-50 { background-color: #0f172a !important; }
body.dark-theme .text-slate-800 { color: #f1f5f9 !important; }
body.dark-theme .text-slate-700 { color: #e2e8f0 !important; }
body.dark-theme .text-slate-600 { color: #cbd5e1 !important; }
body.dark-theme .text-slate-500 { color: #94a3b8 !important; }
body.dark-theme .text-slate-400 { color: #64748b !important; }
body.dark-theme .border-slate-100, 
body.dark-theme .border-slate-200, 
body.dark-theme .border-slate-300 { border-color: #334155 !important; }

body.dark-theme .app-header {
    background: rgba(15, 23, 42, 0.85);
    border-bottom-color: rgba(51, 65, 85, 0.8);
}
body.dark-theme .modal-content {
    background: rgba(30, 41, 59, 0.98);
    border-color: rgba(51, 65, 85, 0.5);
}
body.dark-theme .month-separator span {
    color: #f1f5f9;
}
body.dark-theme .month-separator::before,
body.dark-theme .month-separator::after {
    background: linear-gradient(to right, transparent, #334155, transparent);
}
body.dark-theme input, body.dark-theme select, body.dark-theme textarea {
    color: #f1f5f9;
}
body.dark-theme #splash-screen {
    background-color: #0f172a !important;
}

/* --- CASA "APOIO" / MÓDULO ESCALA (apoio.js) --- */
/* Escala desligada: some o que só faz sentido com Com/Sem Filhos; nada é apagado */
body.escala-off .escala-only { display: none !important; }

/* Fora da aba Agenda some o que é do calendário (legenda e linha SEG–DOM no header) */
body.aba-inicio .cal-only, body.aba-rede .cal-only, body.aba-passeios .cal-only { display: none !important; }
[data-aba-sec][hidden] { display: none !important; }

/* O header é fixo: a altura muda conforme legenda/dias da semana aparecem */
/* --hdr-h e medido em versao.js (ResizeObserver): vale para todas as casas */
#app-main { margin-top: var(--hdr-h, 112px); }


@media (prefers-reduced-motion: reduce) {
    .animate-fade-in, .animate-pulse { animation: none !important; }
}

body.dark-theme #view-apoio .text-slate-400 { color: #94a3b8 !important; }
body.dark-theme #view-apoio .border-dashed { border-color: #475569 !important; }

/* Feed de eventos (casa Apoio, bloco 3) */
.feed-chip { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 6px; vertical-align: middle; white-space: nowrap; }
.feed-chip-comunidade { background: #fef3c7; color: #b45309; }
.feed-chip-manual { background: #e0e7ff; color: #4338ca; }
.feed-chip-publico, .feed-chip-exemplo { background: #f1f5f9; color: #64748b; }
.feed-chip-gratis { background: #dcfce7; color: #15803d; }
.feed-chip-pago { background: #ffedd5; color: #c2410c; text-transform: none; letter-spacing: 0; }
/* Passeios por idade (passeios.js): editor das idades (na folha da aba Passeios) e "combina com seus filhos" */
.feed-chip-combina { background: #fef3c7; color: #92400e; text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 3px; }
.idades-card { background: #fffbeb; border: 1px solid #fde68a; border-radius: 16px; padding: 12px 14px; }
.idades-card.hidden { display: none; }
.idades-topo { display: flex; align-items: flex-start; gap: 8px; }
.idades-ico { color: #d97706; font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.idades-titulo { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; color: #334155; }
.idades-titulo b { font-weight: 800; color: #1e293b; }
.idades-titulo span { color: #64748b; font-weight: 500; }
.idades-fechar { width: 32px; height: 32px; margin: -6px -6px 0 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #94a3b8; flex-shrink: 0; }
.idades-fechar:hover { background: #fef3c7; color: #475569; }
.idades-lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.idade-filho { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 10px; border-radius: 999px; background: #fff; border: 1px solid #fcd34d; font-size: 12px; font-weight: 700; color: #92400e; }
.idade-filho button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #b45309; }
.idade-filho button:hover { background: #fef3c7; }
.idades-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.idade-nome { width: 7.5rem; flex-shrink: 0; min-height: 36px; padding: 4px 8px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; font-size: 12px; font-weight: 600; color: #334155; outline: none; }
.idade-nome:focus { border-color: #f59e0b; }
.idades-chips { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.idades-chips::-webkit-scrollbar { display: none; }
.idade-chip { flex-shrink: 0; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 999px; border: 1px solid #fcd34d; background: #fff; font-size: 13px; font-weight: 800; color: #92400e; transition: background .15s, color .15s; }
.idade-chip:hover, .idade-chip:focus-visible { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.idade-chip:disabled, .idade-filho button:disabled { opacity: .5; cursor: default; }
.idades-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; min-height: 20px; }
.idades-dica { font-size: 11px; font-weight: 600; color: #94a3b8; }
.idades-pronto { padding: 6px 14px; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.idades-pronto:hover { background: #d97706; }
body.dark-theme .feed-chip-comunidade { background: rgba(180, 83, 9, .25); color: #fcd34d; }
body.dark-theme .feed-chip-manual { background: rgba(67, 56, 202, .3); color: #c7d2fe; }
body.dark-theme .feed-chip-publico, body.dark-theme .feed-chip-exemplo { background: #334155; color: #cbd5e1; }
body.dark-theme .feed-chip-gratis { background: rgba(21, 128, 61, .35); color: #86efac; }
body.dark-theme .feed-chip-pago { background: rgba(194, 65, 12, .3); color: #fdba74; }
body.dark-theme .feed-chip-combina { background: rgba(180, 83, 9, .25); color: #fcd34d; }
body.dark-theme .idades-card { background: rgba(120, 53, 15, .2); border-color: rgba(252, 211, 77, .25); }
body.dark-theme .idades-titulo { color: #cbd5e1; }
body.dark-theme .idades-titulo b { color: #f1f5f9; }
body.dark-theme .idades-titulo span, body.dark-theme .idades-dica { color: #94a3b8; }
body.dark-theme .idade-filho, body.dark-theme .idade-chip, body.dark-theme .idade-nome { background: #0f172a; color: #fcd34d; border-color: rgba(252, 211, 77, .35); }
body.dark-theme .idade-nome { color: #e2e8f0; }
body.dark-theme .idade-chip:hover, body.dark-theme .idade-chip:focus-visible { background: #d97706; color: #fff; }
body.dark-theme .idades-fechar:hover, body.dark-theme .idade-filho button:hover { background: rgba(252, 211, 77, .15); color: #fcd34d; }

/* --- AJUSTE DE ESCALA EM LOTE (escala-lote.js) --- */
.lote-ajustar {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .6rem 1rem; border-radius: .9rem; font-weight: 800; font-size: .875rem;
    color: #fff; background: #4f46e5; box-shadow: 0 6px 16px -8px rgba(79, 70, 229, .7);
    transition: background-color .15s;
}
.lote-ajustar:hover { background: #4338ca; }
.lote-ajustar:focus-visible, .lote-sheet button:focus-visible, .lote-bar button:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }

.lote-sheet-wrap { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; }
.lote-sheet-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.lote-sheet {
    position: relative; width: 100%; max-width: 32rem; max-height: 92vh; overflow-y: auto;
    background: #fff; border-radius: 1.5rem 1.5rem 0 0; padding: .6rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px -12px rgba(15, 23, 42, .35); animation: loteSobe .22s ease-out;
}
@media (min-width: 640px) { .lote-sheet-wrap { align-items: center; } .lote-sheet { border-radius: 1.5rem; } }
@keyframes loteSobe { from { transform: translateY(24px); } to { transform: none; } }
.lote-grip { width: 40px; height: 4px; border-radius: 4px; background: #e2e8f0; margin: 0 auto .6rem; }
.lote-x { position: absolute; top: .6rem; right: .7rem; width: 2.25rem; height: 2.25rem; border-radius: 999px; color: #64748b; font-size: 1.15rem; display: grid; place-items: center; }
.lote-x:hover { background: #f1f5f9; }
.lote-h { font-size: 1.15rem; font-weight: 800; color: #1e293b; line-height: 1.3; padding-right: 2.5rem; margin: .2rem 0 .35rem; }
.lote-sub { font-size: .85rem; color: #64748b; font-weight: 500; margin-bottom: 1rem; }
.lote-rot { display: block; font-size: .8rem; font-weight: 700; color: #475569; margin: 1rem 0 .5rem; }
.lote-rot input { margin-top: .4rem; }
.lote-rot .opc { font-weight: 500; color: #94a3b8; }
.lote-sheet input[type=text], .lote-sheet input[type=date], .lote-sheet textarea, .lote-sheet select {
    width: 100%; min-width: 0; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .75rem; padding: .6rem .75rem;
    font-size: 16px; font-weight: 500; color: #1e293b; outline: none;
}
.lote-sheet input:focus, .lote-sheet textarea:focus, .lote-sheet select:focus { background: #fff; box-shadow: 0 0 0 2px #6366f1; }
.lote-opcoes, .lote-lista { display: flex; flex-direction: column; gap: .6rem; }
.lote-opcao {
    display: flex; align-items: center; gap: .9rem; text-align: left; padding: .9rem 1rem;
    border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; transition: border-color .15s, background-color .15s;
}
.lote-opcao:hover { border-color: #a5b4fc; background: #eef2ff; }
.lote-opcao > i { font-size: 1.6rem; color: #4f46e5; flex-shrink: 0; }
.lote-opcao b { display: block; font-size: .95rem; color: #1e293b; }
.lote-opcao small { display: block; font-size: .78rem; color: #64748b; font-weight: 500; margin-top: .1rem; }
.lote-opcao-simples { padding: .85rem 1rem; border: 2px solid #e2e8f0; border-radius: 1rem; font-weight: 700; color: #334155; text-align: left; background: #fff; }
.lote-opcao-simples.on { border-color: #4f46e5; background: #eef2ff; color: #3730a3; }
.lote-passos { display: flex; align-items: center; gap: .75rem; font-size: .75rem; font-weight: 700; color: #6366f1; margin: .2rem 2.5rem .8rem 0; }
.lote-trilho { flex: 1; height: 6px; border-radius: 6px; background: #e0e7ff; overflow: hidden; }
.lote-trilho > div { height: 100%; background: #4f46e5; border-radius: 6px; transition: width .25s; }
.lote-trilho-calmo { flex: none; }
.lote-trilho-calmo > div { width: 35%; animation: loteVai 1.8s ease-in-out infinite alternate; }
@keyframes loteVai { from { margin-left: 0; } to { margin-left: 65%; } }
.lote-espera { margin-top: .9rem; font-size: .8rem; font-weight: 600; color: #4f46e5; display: flex; flex-direction: column; gap: .45rem; }
.lote-espera.hidden { display: none; }
.lote-dias { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.lote-dia { padding: .9rem 0; border-radius: .9rem; border: 2px solid #e2e8f0; font-weight: 800; color: #475569; background: #fff; }
.lote-dia.on { border-color: #10b981; background: #ecfdf5; color: #047857; }
.lote-atalhos { display: flex; gap: 1rem; margin-top: .6rem; }
.lote-link { font-size: .8rem; font-weight: 700; color: #4f46e5; text-decoration: underline; text-underline-offset: 3px; }
.lote-escolha { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.lote-pill { padding: .75rem .5rem; border-radius: .9rem; border: 2px solid #e2e8f0; font-weight: 800; font-size: .9rem; color: #475569; background: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-pill.pill-com.on { border-color: #10b981; background: #ecfdf5; color: #047857; }
.lote-pill.pill-sem.on { border-color: #f97316; background: #fff7ed; color: #c2410c; }
.lote-datas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.lote-datas label { font-size: .75rem; font-weight: 700; color: #64748b; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.lote-pe { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.25rem; }
.lote-btn-pri, .lote-btn-sec { padding: .7rem 1.1rem; border-radius: .9rem; font-weight: 800; font-size: .9rem; display: inline-flex; align-items: center; gap: .35rem; }
.lote-btn-pri { background: #4f46e5; color: #fff; }
.lote-btn-pri:disabled { background: #c7d2fe; cursor: not-allowed; }
.lote-btn-sec { background: #f1f5f9; color: #334155; }
.lote-btn-sec:disabled { opacity: .45; }
.lote-pe .lote-btn-pri { flex: 1; justify-content: center; }
.lote-aviso { margin-top: .75rem; font-size: .8rem; font-weight: 600; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: .75rem; padding: .55rem .75rem; }
.lote-aviso.hidden { display: none; }
.lote-nota { margin-top: .5rem; font-size: .75rem; color: #64748b; font-weight: 500; display: flex; gap: .35rem; align-items: center; }
.lote-confirma { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; padding: .75rem; border-radius: .9rem; background: #fffbeb; border: 1px solid #fde68a; font-size: .85rem; font-weight: 700; color: #92400e; }
.lote-confirma input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; accent-color: #4f46e5; flex-shrink: 0; }
.lote-itens { display: flex; flex-direction: column; gap: .6rem; }
.lote-itens li { border: 1px solid #e2e8f0; border-left: 4px solid #a5b4fc; border-radius: .9rem; padding: .6rem; display: flex; flex-direction: column; gap: .45rem; }
.lote-itens li.falta { border-left-color: #f59e0b; background: #fffbeb; }
.lote-item-linha { display: flex; gap: .45rem; align-items: center; }
.lote-rm { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: .75rem; color: #ef4444; display: grid; place-items: center; }
.lote-rm:hover { background: #fef2f2; }
.lote-sheet:focus { outline: none; }
/* Hub: "Regras avançadas" fica por último, discreto (o editor antigo, regra a regra) */
.lote-avancado {
    width: 100%; display: flex; align-items: center; gap: .75rem; min-height: 56px; margin-top: .9rem;
    padding: .6rem .9rem; border-radius: 1rem; border: 1px dashed #cbd5e1; background: transparent; text-align: left; color: #475569;
}
.lote-avancado:hover { border-color: #a5b4fc; background: #f8fafc; }
.lote-avancado > span { flex: 1; min-width: 0; }
.lote-avancado b { display: block; font-size: .88rem; color: #334155; }
.lote-avancado small { display: block; font-size: .75rem; font-weight: 500; color: #64748b; }
.lote-voltar { border: 0; background: none; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; margin: -.2rem 0 .2rem -.4rem; padding: 0 .5rem; border-radius: .75rem; font-size: .82rem; font-weight: 800; color: #4338ca; }
.lote-voltar:hover { background: #eef2ff; }
.lote-regras { display: flex; flex-direction: column; gap: .45rem; margin: 0 0 .4rem; padding: 0; list-style: none; }
.lote-regras li { display: flex; align-items: center; gap: .7rem; padding: .45rem .45rem .45rem .7rem; border: 1px solid #e2e8f0; border-radius: .9rem; }
.lote-regra-sw { width: .8rem; height: 2.2rem; border-radius: .35rem; flex-shrink: 0; }
.lote-regra-txt { flex: 1; min-width: 0; }
.lote-regra-txt b { display: block; font-size: .88rem; color: #1e293b; }
.lote-regra-txt small { display: block; font-size: .75rem; font-weight: 500; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-regras .lote-rm { width: 3rem; height: 3rem; }
.lote-datas select { width: 100%; }

/* ---- Escolha da troca (escala-lote.js: escolhaTroca) ----
   Sentido em dois chips largos e momento em três; cada chip leva a miniatura da célula com a
   linha horizontal na altura certa, e a prévia repete a célula grande com a frase da troca. */
.tr-cel { display: inline-block; flex-shrink: 0; width: 1.5rem; height: 1.9rem; border-radius: .4rem; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1); }
.lote-sentido { margin-bottom: .1rem; }
.lote-chip-tr {
    display: flex; align-items: center; gap: .6rem; min-width: 0; min-height: 3.6rem; padding: .6rem .65rem;
    border-radius: 1rem; border: 2px solid #e2e8f0; background: #fff; text-align: left;
}
.lote-chip-tr > span:last-child { min-width: 0; }
.lote-chip-tr b { display: block; font-size: .84rem; font-weight: 800; line-height: 1.2; color: #1e293b; }
.lote-chip-tr small { display: block; margin-top: .15rem; font-size: .72rem; font-weight: 600; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lote-momentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.lote-chip-m {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 4.6rem;
    padding: .55rem .3rem; border-radius: 1rem; border: 2px solid #e2e8f0; background: #fff; font-size: .85rem; font-weight: 800; color: #334155;
}
.lote-chip-m .tr-cel { width: 1.9rem; height: 2.3rem; }
.lote-chip-tr.on, .lote-chip-m.on, .lote-pill.on:not(.pill-com):not(.pill-sem), .lote-dias-7 .lote-dia.on { border-color: #4f46e5; background: #eef2ff; color: #3730a3; }
.lote-chip-tr.on b { color: #312e81; }
.lote-tr-prev {
    display: flex; align-items: center; gap: .8rem; margin-top: .75rem; padding: .6rem .75rem;
    border-radius: 1rem; border: 1px dashed #c7d2fe; background: #f8fafc; font-size: .88rem; font-weight: 800; color: #1e293b;
}
.lote-tr-prev small { display: block; font-size: .7rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.lote-tr-prev .tr-cel-g { width: 3rem; height: 3.5rem; border-radius: .6rem; --tr-lw: 3px; }
.lote-dias-7 { grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.lote-dias-7 .lote-dia { padding: .8rem 0; font-size: .78rem; }
.lote-add-troca { width: 100%; justify-content: center; margin-top: .75rem; }
.lote-add-troca:disabled { cursor: not-allowed; }
.lote-trocas { margin-bottom: .2rem; }
.lote-trocas .lote-regra-sw, .lote-regras .tr-cel.lote-regra-sw { width: 1.6rem; height: 2.2rem; }
/* Na barra do pincel: os mesmos chips, mais baixos */
.lote-bar-troca { max-width: 48rem; margin: .5rem auto 0; display: grid; gap: .4rem; }
.lote-bar-troca .lote-chip-tr { min-height: 2.9rem; padding: .35rem .5rem; }
.lote-bar-troca .lote-chip-tr .tr-cel { width: 1.2rem; height: 1.5rem; }
.lote-bar-troca .lote-chip-m { flex-direction: row; min-height: 2.75rem; padding: .3rem; }
.lote-bar-troca .lote-chip-m .tr-cel { width: 1.2rem; height: 1.5rem; }
/* Pincel/intervalo: o mês encolhe para caber acima da barra (--lote-bar-h vem do escala-lote.js);
   sem isso as últimas semanas ficavam escondidas atrás dela */
body.lote-modo.aba-agenda.cal-mensal #view-calendario {
    height: calc(100vh - var(--hdr-h, 112px) - var(--lote-bar-h, 0px));
    height: calc(100dvh - var(--hdr-h, 112px) - var(--lote-bar-h, 0px));
}
body.dark-theme .lote-chip-tr, body.dark-theme .lote-chip-m { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-theme .lote-chip-tr b { color: #f1f5f9; }
body.dark-theme .lote-chip-tr.on, body.dark-theme .lote-chip-m.on, body.dark-theme .lote-pill.on:not(.pill-com):not(.pill-sem), body.dark-theme .lote-dias-7 .lote-dia.on { background: #1e1b4b; border-color: #818cf8; color: #c7d2fe; }
body.dark-theme .lote-tr-prev { background: #0f172a; border-color: #3730a3; color: #f1f5f9; }
body.dark-theme .lote-avancado { border-color: #475569; color: #cbd5e1; }
body.dark-theme .lote-avancado b, body.dark-theme .lote-regra-txt b { color: #f1f5f9; }
body.dark-theme .lote-avancado:hover { background: #0f172a; }
body.dark-theme .lote-regras li { border-color: #334155; }
body.dark-theme .lote-voltar { color: #a5b4fc; }
body.dark-theme .lote-voltar:hover { background: #1e1b4b; }

/* Mini calendário das prévias */
.mini-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; margin-top: .9rem; }
.mini-tit { font-size: .75rem; font-weight: 800; color: #475569; text-transform: capitalize; margin-bottom: .35rem; }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: .7rem; text-align: center; }
.mini-grid b { color: #94a3b8; font-weight: 700; padding-bottom: 2px; }
.mini-grid span { padding: .3rem 0; border-radius: .4rem; font-weight: 700; color: #334155; }
.mc-com { background: #a7f3d0; }
.mc-sem { background: #fed7aa; }
/* .mc-troca: desenhada pelo bloco "Dia de troca" lá em cima (linha horizontal) */
.mc-vazio { background: #f1f5f9; color: #94a3b8 !important; }
.mini-leg { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .6rem; font-size: .7rem; font-weight: 700; color: #64748b; }
.mini-leg i { display: inline-block; width: .7rem; height: .7rem; border-radius: .2rem; margin-right: .3rem; vertical-align: -1px; }

/* Barra do pincel / intervalo (acima da navegação inferior do celular) */
.lote-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff;
    border-top: 1px solid #e2e8f0; box-shadow: 0 -10px 30px -12px rgba(15, 23, 42, .3);
    padding: .6rem .75rem calc(.7rem + env(safe-area-inset-bottom));
}
.lote-bar-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; max-width: 48rem; margin: 0 auto .5rem; }
.lote-dica { font-size: .78rem; font-weight: 700; color: #475569; display: inline-flex; align-items: center; gap: .3rem; }
.lote-bar-acoes { display: flex; gap: .45rem; }
.lote-bar-linha { max-width: 48rem; margin: 0 auto; }
.lote-bar-linha button { flex: 1; justify-content: center; }
.lote-bar .lote-btn-pri, .lote-bar .lote-btn-sec { padding: .5rem .8rem; font-size: .8rem; }
.lote-brushes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; max-width: 48rem; margin: 0 auto; }
.lote-brush { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .45rem .2rem; border-radius: .9rem; border: 2px solid transparent; background: #f8fafc; min-width: 0; }
.lote-brush .sw { width: 1.9rem; height: 1.9rem; border-radius: 999px; display: grid; place-items: center; font-size: 1rem; color: #64748b; }
.lote-brush .tx { font-size: .7rem; font-weight: 800; color: #334155; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-com .sw { background: #10b981; }
.br-sem .sw { background: #f97316; }
.br-troca .sw { --tr-com: #10b981; --tr-sem: #f97316; --tr-com-l: #fff; --tr-sem-l: #fff; }
.br-apagar .sw { background: #fff; border: 2px dashed #cbd5e1; }
.lote-brush.on { border-color: #4f46e5; background: #eef2ff; }
.lote-brush.on .sw { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #4f46e5; }
body.lote-modo main { padding-bottom: 9rem; }
body.lote-modo #calendar-root .calendar-day { touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
body.lote-modo #calendar-root .calendar-day:hover { transform: none; }
.lote-pop { animation: lotePop .18s ease-out; }
@keyframes lotePop { from { transform: scale(.9); } to { transform: none; } }
.lote-ponta { box-shadow: inset 0 0 0 3px #4f46e5 !important; }

.lote-toast {
    position: fixed; left: 50%; bottom: 6rem; transform: translate(-50%, 20px); z-index: 130; opacity: 0;
    background: #1e293b; color: #fff; font-weight: 700; font-size: .85rem; padding: .6rem 1rem; border-radius: 999px;
    pointer-events: none; transition: opacity .2s, transform .2s;
}
.lote-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
    .lote-sheet, .lote-pop, .lote-trilho-calmo > div { animation: none; }
}
body.dark-theme .lote-sheet, body.dark-theme .lote-bar, body.dark-theme .lote-opcao, body.dark-theme .lote-dia,
body.dark-theme .lote-pill, body.dark-theme .lote-opcao-simples { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-theme .lote-h, body.dark-theme .lote-opcao b, body.dark-theme .lote-brush .tx { color: #f1f5f9; }
body.dark-theme .lote-brush { background: #0f172a; }
body.dark-theme .lote-sheet input, body.dark-theme .lote-sheet textarea, body.dark-theme .lote-sheet select { background: #0f172a; border-color: #334155; color: #e2e8f0; }


/* ================= Header compacto (mobile) ================= */
@media (max-width: 639px) {
    .hdr-desktop { display: none !important; }
}

/* Conta: avatar redondo no canto direito */
.acct-btn {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
    overflow: hidden; font-weight: 800; font-size: 1rem; transition: box-shadow .15s;
}
.acct-btn:hover { box-shadow: 0 0 0 3px #e0e7ff; }
.acct-btn:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.acct-btn img { width: 100%; height: 100%; object-fit: cover; }
.acct-btn.is-inicial { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.acct-menu {
    position: absolute; top: 48px; right: 0; z-index: 60;
    width: min(18rem, calc(100vw - 1.5rem));
    background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem;
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, .25); padding: .4rem; font-size: .875rem;
}
.acct-head { display: flex; gap: .65rem; align-items: center; padding: .55rem .6rem .7rem; border-bottom: 1px solid #f1f5f9; margin-bottom: .25rem; }
.acct-head .acct-btn { width: 36px; height: 36px; }
.acct-head div { min-width: 0; }
.acct-head > div > b { display: block; color: #1e293b; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-head > div > span { display: block; color: #64748b; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-item {
    width: 100%; display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem;
    border-radius: .65rem; color: #334155; font-weight: 600; text-align: left;
}
.acct-item:hover, .acct-item:focus-visible { background: #f1f5f9; outline: none; }
.acct-item i { font-size: 1.1rem; color: #6366f1; flex-shrink: 0; }
.acct-item small { margin-left: auto; color: #94a3b8; font-weight: 700; font-size: .75rem; }
.acct-item.is-sair, .acct-item.is-sair i { color: #dc2626; }
.acct-sep { height: 1px; background: #f1f5f9; margin: .25rem .3rem; }
.acct-versao { padding: .45rem .6rem .35rem; font-size: .72rem; color: #64748b; font-weight: 600; }
.acct-versao [data-update-status]:not(:empty) { display: block; margin-top: .2rem; color: #4338ca; }

/* Aviso discreto de uma linha (instalar, nova versao, autocuidado, convites) */
.cal-aviso {
    display: flex; align-items: center; gap: .5rem; min-height: 36px;
    padding: .35rem .4rem .35rem .75rem; border-radius: .75rem;
    background: #f8fafc; border: 1px solid #e2e8f0; color: #475569;
    font-size: .78rem; font-weight: 600;
}
.cal-aviso.hidden { display: none; }
.cal-aviso > i { font-size: 1rem; color: #6366f1; flex-shrink: 0; }
.cal-aviso > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-aviso button { font-weight: 800; color: #4338ca; padding: .3rem .5rem; border-radius: .5rem; flex-shrink: 0; }
.cal-aviso button:hover { background: #eef2ff; }
.cal-aviso .cal-aviso-x { color: #94a3b8; font-weight: 400; }
.update-toast {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + var(--bia-sobra, 0px) + env(safe-area-inset-bottom));
    z-index: 85; width: max-content; max-width: calc(100vw - 2rem); background: #fff;
    box-shadow: 0 10px 25px -10px rgba(15, 23, 42, .3);
}
@media (min-width: 640px) { .update-toast { bottom: 1.5rem; } }

/* ================= Barra do mes, colada na grade ================= */
.cal-bar {
    display: flex; align-items: center; justify-content: space-between; gap: .35rem;
    min-height: 44px; padding: 0 .1rem;
}
.cal-bar-nav { display: flex; align-items: center; gap: .1rem; min-width: 0; }
.cal-bar-title { font-weight: 800; color: #334155; font-size: .95rem; white-space: nowrap; padding: 0 .15rem; }
.cal-bar-tools { display: flex; align-items: center; gap: .2rem; flex-shrink: 0; }
.cal-bar-ico {
    width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    color: #475569; font-size: 1.1rem; transition: background-color .15s; flex-shrink: 0;
}
.cal-bar-ico:hover { background: #f1f5f9; color: #4338ca; }
.cal-bar-ico:focus-visible, .cal-bar-chips button:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 1px; }
.cal-bar-chips { display: inline-flex; background: #f1f5f9; border-radius: 999px; padding: 2px; margin-left: .15rem; }
.cal-bar-chips button { padding: .3rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #64748b; }
.cal-bar-chips button.is-on { background: #fff; color: #4f46e5; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
body.dark-theme .cal-bar-title { color: #e2e8f0; }
body.dark-theme .acct-menu, body.dark-theme .update-toast { background: #1e293b; border-color: #334155; }
body.dark-theme .acct-item { color: #e2e8f0; }
body.dark-theme .acct-item:hover { background: #334155; }
body.dark-theme .acct-head b { color: #f1f5f9; }
body.dark-theme .cal-aviso { background: #1e293b; border-color: #334155; color: #cbd5e1; }

.evt-btn { padding: 6px 12px; border-radius: 9999px; font-size: 12px; font-weight: 700; line-height: 1.2; transition: background-color .15s, color .15s; }
.evt-btn:disabled { opacity: .55; cursor: default; }
.evt-btn-ok { color: #fff; background: #14b8a6; }
.evt-btn-ok:hover:not(:disabled) { background: #0d9488; }
.evt-btn-soft { color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; }
.evt-btn-soft.is-on { color: #e11d48; border-color: #fecdd3; background: #fff1f2; }
.evt-btn-nao { color: #64748b; background: #fff; border: 1px solid #e2e8f0; }
.evt-btn-nao:hover { background: #fef2f2; color: #dc2626; }
.evt-btn-lg { padding: 11px 14px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.evt-btn:focus-visible, .evt-sheet-close:focus-visible, .evt-d-link:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }

/* Detalhe do evento: bottom sheet no mobile, modal centrado no desktop */
.evt-sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.evt-sheet.hidden { display: none; }
.evt-sheet-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.evt-sheet-panel { position: relative; width: 100%; max-height: 88vh; overflow-y: auto; border-radius: 1.5rem 1.5rem 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); animation: evt-sobe .22s ease-out; }
.evt-sheet-panel::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 9999px; background: #cbd5e1; margin: -10px auto 12px; }
.evt-sheet-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: #f1f5f9; color: #64748b; }
.evt-d-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 4px; padding-right: 44px; }
.evt-d-chips .feed-chip { margin-left: 0; }
.evt-d-title { font-size: 20px; font-weight: 800; line-height: 1.25; color: #1e293b; margin: 8px 44px 12px 0; }
.evt-d-lista { display: grid; gap: 10px; margin-bottom: 14px; }
.evt-d-linha { display: flex; gap: 10px; font-size: 14px; font-weight: 500; color: #334155; line-height: 1.4; }
.evt-d-linha > i { font-size: 18px; color: #14b8a6; margin-top: 1px; flex-shrink: 0; }
.evt-d-cap::first-letter { text-transform: uppercase; }
.evt-d-cap { display: inline-block; }
.evt-d-link { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: #0f766e; text-decoration: underline; text-underline-offset: 2px; }
.evt-d-desc { font-size: 14px; color: #475569; line-height: 1.55; white-space: pre-line; margin-bottom: 12px; }
.evt-d-fonte { font-size: 14px; margin-bottom: 16px; color: #475569; font-weight: 600; }
body.dark-theme .evt-d-fonte { color: #cbd5e1; }
.evt-d-acoes { display: grid; gap: 8px; margin-top: 4px; }
.evt-d-acoes-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.evt-sheet-aberto { overflow: hidden; }
@keyframes evt-sobe { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
  .evt-sheet { align-items: center; padding: 16px; }
  .evt-sheet-panel { max-width: 440px; border-radius: 1.5rem; padding: 26px 24px 22px; }
  .evt-sheet-panel::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .evt-sheet-panel { animation: none; } }
body.dark-theme .evt-d-title { color: #f1f5f9; }
body.dark-theme .evt-d-desc { color: #94a3b8; }
body.dark-theme .evt-d-linha { color: #cbd5e1; }
body.dark-theme .evt-d-link { color: #5eead4; }
body.dark-theme .evt-sheet-close { background: #1e293b; color: #94a3b8; }
body.dark-theme .evt-btn-nao { background: #0f172a; border-color: #334155; color: #94a3b8; }
body.dark-theme .evt-btn-soft { background: rgba(20, 184, 166, .12); border-color: rgba(45, 212, 191, .35); color: #5eead4; }


/* ================= Abas: Início · Agenda · Rede · Passeios (abas.js) ================= */
/* Nunca rolar para o lado: nada passa da largura da tela */
html, body { max-width: 100%; overflow-x: clip; }
#app-main { min-width: 0; }

/* Barra inferior (celular). 4 colunas iguais (5 com a Bia no meio, voz.css); a ativa ganha a "pílula" atrás do ícone. */
.aba-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: rgba(255, 255, 255, .97); border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 20px -12px rgba(15, 23, 42, .18);
    padding: 4px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
}
.aba-bar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 60px; min-width: 0; padding: 4px 2px 6px; color: #64748b; border-radius: 14px;
    -webkit-tap-highlight-color: transparent;
}
.aba-bar-ic {
    display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 999px;
    font-size: 1.45rem; transition: background-color .2s ease, color .2s ease;
}
.aba-bar-lb { font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.aba-bar-item[aria-current="page"] { color: #4338ca; }
.aba-bar-item[aria-current="page"] .aba-bar-ic { background: #e0e7ff; }
.aba-bar-item[aria-current="page"] .aba-bar-lb { font-weight: 800; }
.aba-bar-item:focus-visible { outline: 3px solid #a5b4fc; outline-offset: -3px; }
@media (min-width: 640px) { .aba-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .aba-bar-ic { transition: none; } }

/* Abas no header (desktop) */
.abas-topo { display: none; }
@media (min-width: 640px) {
    .abas-topo { display: flex; flex: 1; justify-content: center; gap: .25rem; min-width: 0; }
    .aba-topo {
        display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1rem; border-radius: 999px;
        font-weight: 700; font-size: .9rem; color: #64748b; transition: background-color .15s, color .15s;
    }
    .aba-topo i { font-size: 1.2rem; }
    .aba-topo:hover { background: #f1f5f9; color: #334155; }
    .aba-topo[aria-current="page"] { background: #e0e7ff; color: #4338ca; font-weight: 800; }
    .aba-topo:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
}
@media (min-width: 640px) and (max-width: 860px) { .aba-topo span { display: none; } .aba-topo { padding: 0 .9rem; } }

/* Faixa "Exemplo" (sem login) */
.aba-exemplo {
    display: flex; align-items: center; gap: .5rem; max-width: 48rem; margin: 1rem auto 0;
    background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; border-radius: 1rem; padding: .5rem .5rem .5rem .85rem;
    font-size: .8rem; font-weight: 700;
}
.aba-exemplo.hidden { display: none; }
.aba-exemplo span { flex: 1; min-width: 0; }
.aba-exemplo button { min-height: 40px; padding: 0 1rem; border-radius: 999px; background: #4f46e5; color: #fff; font-weight: 800; flex-shrink: 0; }
#view-apoio > .aba-sec { margin-top: 1rem; }

/* Barra do mês: pílula Hoje e funil */
.cal-bar { position: relative; }
.cal-bar-tools { margin-left: auto; }
.cal-bar-hoje {
    min-height: 32px; padding: 0 .8rem; margin-left: .2rem; border-radius: 999px; flex-shrink: 0;
    background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; font-size: .78rem; font-weight: 800;
}
.cal-bar-hoje.hidden { display: none; }
.cal-bar-hoje:hover { background: #e0e7ff; }
.cal-bar-hoje:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 1px; }
#btn-toggle-filters { position: relative; }
#btn-toggle-filters[aria-expanded="true"] { background: #e0e7ff; color: #4338ca; }
#btn-toggle-filters.is-filtrando::after {
    content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 999px;
    background: #f97316; box-shadow: 0 0 0 2px #fff;
}
.filtros-painel {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 45;
    width: min(22rem, calc(100vw - 1rem));
}
@media (max-width: 380px) { .cal-bar-ico { width: 32px; height: 32px; } .cal-bar-title { font-size: .9rem; } }

/* Bolinha genérica (também usada nos pincéis do ajuste em lote) */
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 999px; border: 2px solid; }

/* Início: botão "Pedir ajuda" */
.inicio-pedir {
    width: 100%; display: flex; align-items: center; gap: .9rem; text-align: left; min-height: 72px;
    border-radius: 1.1rem; padding: .9rem 1.1rem; background: #f97316; color: #fff;
    box-shadow: 0 8px 20px -10px rgba(234, 88, 12, .7); transition: background-color .15s, transform .1s;
}
.inicio-pedir:hover { background: #ea580c; }
.inicio-pedir:active { transform: scale(.99); }
.inicio-pedir > i { font-size: 2rem; flex-shrink: 0; }
.inicio-pedir span { display: flex; flex-direction: column; min-width: 0; }
.inicio-pedir b { font-size: 1.1rem; font-weight: 800; }
.inicio-pedir small { font-size: .78rem; font-weight: 600; color: #ffedd5; }
.inicio-pedir:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
#inicio-meus-pedidos:not(:empty) { margin-top: .25rem; }

/* Rede */
.rede-acao {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: 0 1rem;
    border-radius: 999px; font-size: .85rem; font-weight: 800; border: 1px solid #e2e8f0; color: #334155; background: #fff;
}
.rede-acao-prim { background: #10b981; border-color: #10b981; color: #fff; }
.rede-acao-prim:hover { background: #059669; }
.rede-acao-zap { background: #16a34a; border-color: #16a34a; color: #fff; }
.rede-acao:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.rede-livre { display: flex; gap: .4rem; align-items: flex-start; font-size: .85rem; font-weight: 700; color: #065f46; background: #ecfdf5; border-radius: .8rem; padding: .55rem .75rem; margin-bottom: .75rem; }
.rede-livre i { margin-top: 2px; }

/* Tema escuro */
body.dark-theme .aba-bar { background: rgba(15, 23, 42, .97); border-color: #334155; }
body.dark-theme .aba-bar-item { color: #94a3b8; }
body.dark-theme .aba-bar-item[aria-current="page"], body.dark-theme .aba-topo[aria-current="page"] { color: #c7d2fe; }
body.dark-theme .aba-bar-item[aria-current="page"] .aba-bar-ic, body.dark-theme .aba-topo[aria-current="page"] { background: #312e81; }
body.dark-theme .aba-topo:hover { background: #1e293b; color: #e2e8f0; }
body.dark-theme .aba-exemplo { background: #1e1b4b; border-color: #3730a3; color: #c7d2fe; }
body.dark-theme .cal-bar-hoje, body.dark-theme #btn-toggle-filters[aria-expanded="true"] { background: #1e1b4b; border-color: #3730a3; color: #c7d2fe; }
body.dark-theme .rede-livre { background: rgba(16, 185, 129, .12); border-color: #065f46; color: #6ee7b7; }
body.dark-theme .rede-acao:not(.rede-acao-prim):not(.rede-acao-zap) { background: #0f172a; border-color: #334155; color: #e2e8f0; }

/* Sincronização (sync.js): indicador discreto ao lado do avatar — sem animação nem piscar.
   No celular: só o ícone (e o número de alterações aguardando quando sem internet). */
.sync-status { display: inline-flex; align-items: center; gap: .3rem; min-height: 1.75rem; padding: 0 .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1; color: #64748b; white-space: nowrap; max-width: 52vw; cursor: default; }
.sync-status[hidden] { display: none; }
.sync-status i { font-size: 1rem; flex-shrink: 0; }
.sync-status .sync-longo { overflow: hidden; text-overflow: ellipsis; }
.sync-status .sync-curto { display: none; }
.sync-status[data-estado="salvo"] { color: #94a3b8; }
.sync-status[data-estado="salvando"] { color: #6366f1; }
.sync-status[data-estado="offline"],
.sync-status[data-estado="erro"] { color: #92400e; background: #fef3c7; }
@media (max-width: 639px) {
    .sync-status { padding: 0 .4rem; }
    .sync-status .sync-longo { display: none; }
    .sync-status[data-estado="offline"] .sync-curto,
    .sync-status[data-estado="erro"] .sync-curto { display: inline; }
}
body.dark-theme .sync-status[data-estado="offline"],
body.dark-theme .sync-status[data-estado="erro"] { color: #fcd34d; background: rgba(251, 191, 36, .14); }
.acct-sync { display: flex; align-items: center; gap: .4rem; padding: .35rem .75rem .5rem; font-size: .75rem; font-weight: 600; color: #64748b; }
.acct-sync[data-estado="offline"], .acct-sync[data-estado="erro"] { color: #92400e; }
body.dark-theme .acct-sync[data-estado="offline"], body.dark-theme .acct-sync[data-estado="erro"] { color: #fcd34d; }

/* ================= Agenda enxuta: barra do mês em uma linha, menu ⋯, compartilhar o dia ================= */
.cal-bar { flex-wrap: nowrap; gap: 4px; min-height: 48px; }
.cal-bar-nav { flex: 1 1 auto; min-width: 0; gap: 0; }
.cal-bar-title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; color: #1e293b; }
.cal-bar .cal-bar-ico { width: 40px; height: 40px; color: #334155; }
.cal-bar-tools { gap: 2px; margin-left: 0; }
@media (max-width: 639px) {
    .cal-so-desk { display: none !important; }
    .cal-bar-title { font-size: .95rem; padding: 0 2px; }
    .cal-bar .cal-bar-ico { width: 38px; height: 40px; }
    .cal-bar-hoje { min-height: 34px; padding: 0 .7rem; margin-left: 2px; }
}
@media (max-width: 370px) { .cal-bar .cal-bar-ico { width: 36px; } .cal-bar-title { font-size: .9rem; } }
.cal-bar-chips button[aria-pressed="true"] { background: #fff; color: #4338ca; }
.cal-bar-chips button { color: #475569; min-height: 32px; }
.cal-mais { position: relative; }
.cal-mais-menu {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 46; min-width: 13.5rem; padding: .35rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 18px 36px -14px rgba(15, 23, 42, .3);
}
.cal-mais-menu.hidden { display: none; }
.cal-mais-menu [role="menuitem"] {
    width: 100%; display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .7rem;
    border-radius: .7rem; font-size: .875rem; font-weight: 700; color: #334155; text-align: left;
}
.cal-mais-menu [role="menuitem"] i { font-size: 1.15rem; color: #4f46e5; }
.cal-mais-menu [role="menuitem"]:hover, .cal-mais-menu [role="menuitem"]:focus-visible { background: #eef2ff; outline: none; }
.cal-mais-menu [role="menuitem"]:focus-visible { box-shadow: inset 0 0 0 2px #4338ca; }
body.escala-off .cal-mais-menu .escala-only { display: none !important; }
body.dark-theme .cal-bar-title { color: #f1f5f9; }
body.dark-theme .cal-bar .cal-bar-ico { color: #cbd5e1; }
body.dark-theme .cal-mais-menu { background: #1e293b; border-color: #334155; }
body.dark-theme .cal-mais-menu [role="menuitem"] { color: #e2e8f0; }
body.dark-theme .cal-mais-menu [role="menuitem"]:hover, body.dark-theme .cal-mais-menu [role="menuitem"]:focus-visible { background: #312e81; }

/* Modal do dia: "Compartilhar este dia" */
.dia-share { margin-top: .7rem; }
.dia-share-btn {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .9rem; border-radius: 999px;
    font-size: .8rem; font-weight: 800; color: #3730a3; background: #eef2ff; border: 1px solid #c7d2fe;
}
.dia-share-btn:hover { background: #e0e7ff; }
.dia-share-btn[aria-expanded="true"] { background: #e0e7ff; }
.dia-share-btn:focus-visible, .dia-share-op:focus-visible { outline: 3px solid #4338ca; outline-offset: 2px; }
.dia-share-painel { margin-top: .6rem; display: flex; flex-direction: column; gap: .45rem; }
.dia-share-painel.hidden { display: none; }
.dia-share-op {
    display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 52px; padding: .55rem .8rem; text-align: left;
    border: 1px solid #e2e8f0; border-radius: .9rem; background: #fff; color: #1e293b;
}
.dia-share-op:hover { border-color: #a5b4fc; background: #f8faff; }
.dia-share-op > i { font-size: 1.35rem; color: #4f46e5; flex-shrink: 0; }
.dia-share-op b { display: block; font-size: .875rem; font-weight: 800; }
.dia-share-op small { display: block; font-size: .75rem; font-weight: 600; color: #475569; }
.dia-share-op.is-off { cursor: not-allowed; background: #f8fafc; }
.dia-share-op.is-off b { color: #475569; }
.dia-share-op.is-off > i { color: #64748b; }
.dia-share-op[aria-busy="true"] { opacity: .7; cursor: progress; }
.dia-share-link { display: flex; flex-direction: column; gap: .45rem; padding: .6rem; border-radius: .9rem; background: #f8fafc; border: 1px solid #e2e8f0; }
.dia-share-link.hidden { display: none; }
.dia-share-linha { display: flex; gap: .4rem; }
.dia-share-linha input { flex: 1; min-width: 0; border: 1px solid #cbd5e1; border-radius: .6rem; padding: .45rem .55rem; font-size: .75rem; font-family: ui-monospace, monospace; color: #334155; background: #fff; }
.dia-share-zap { justify-content: center; min-height: 40px; }
.dia-share-msg { font-size: .75rem; font-weight: 600; color: #334155; margin: 0; }
.dia-share-msg:empty { display: none; }
body.dark-theme .dia-share-btn { background: #1e1b4b; border-color: #3730a3; color: #c7d2fe; }
body.dark-theme .dia-share-op { background: #0f172a; border-color: #334155; color: #e2e8f0; }
body.dark-theme .dia-share-op small { color: #cbd5e1; }
body.dark-theme .dia-share-op.is-off { background: #1e293b; }
body.dark-theme .dia-share-link { background: #0f172a; border-color: #334155; }
body.dark-theme .dia-share-linha input { background: #1e293b; border-color: #475569; color: #e2e8f0; }
body.dark-theme .dia-share-msg { color: #cbd5e1; }

/* ================= Início enxuto: 4 blocos ================= */
.inicio { display: flex; flex-direction: column; gap: 12px; }
.ini-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1.1rem; padding: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ini-link {
    display: inline-flex; align-items: center; gap: .2rem; min-height: 40px; padding: 0 .25rem;
    font-size: .8rem; font-weight: 800; color: #4338ca; background: none; border: 0; white-space: nowrap; cursor: pointer;
}
.ini-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ini-link:focus-visible, .ini-dia:focus-visible, .ini-ev:focus-visible, .ini-pedido:focus-visible, .ini-recebido:focus-visible,
.pv-acao:focus-visible, .pv-x:focus-visible { outline: 3px solid #4338ca; outline-offset: 2px; }

/* 1. Hoje e a semana */
.ini-hoje-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 10px; }
.ini-hoje-tit { margin: 0; font-size: 1.15rem; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.ini-hoje-tit span { text-transform: capitalize; }
.ini-hoje-st { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .8rem; font-weight: 700; color: #334155; }
.ini-hoje-st-nd { color: #475569; font-weight: 600; }
.ini-hoje-config { min-height: 32px; padding: 0; white-space: normal; text-align: left; }
.ini-dias { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.ini-dia {
    width: 100%; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    position: relative; overflow: hidden; border-radius: .75rem; background: #f8fafc; color: #1e293b;
    box-shadow: inset 0 0 0 1px #e2e8f0;
}
.ini-dia::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--barra, transparent); }
.ini-dia-n { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #334155; }
.ini-dia b { font-size: 1rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ini-dia-ev { width: 5px; height: 5px; border-radius: 999px; background: #4f46e5; }
.ini-dia-ev.is-vazio { visibility: hidden; }
.ini-dia.st-com { background: var(--st-com-bg); box-shadow: none; --barra: var(--st-com); }
.ini-dia.st-sem { background: var(--st-sem-bg); box-shadow: none; --barra: var(--st-sem); }
/* .ini-dia.st-troca: bloco "Dia de troca" lá em cima (linha horizontal no momento da troca) */
.ini-dia.is-hoje { box-shadow: inset 0 0 0 2px var(--cal-hoje); }
.ini-dia.is-hoje .ini-dia-n { color: #3730a3; }
.ini-evs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ini-ev {
    width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: .6rem;
    text-align: left; font-size: .85rem; color: #1e293b;
}
.ini-ev:hover { background: #f1f5f9; }
.ini-ev-q { flex-shrink: 0; width: 4.2rem; font-size: .72rem; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: .03em; }
.ini-ev-t { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-ev-t b { font-weight: 800; color: #3730a3; }
.ini-vazio { margin: 10px 0 0; padding: 0 8px; font-size: .85rem; font-weight: 500; color: #475569; }
.ini-rodape { display: flex; justify-content: flex-end; margin-top: 2px; margin-bottom: -6px; }

/* 2. Pedir ajuda */
.ini-ajuda { display: flex; flex-direction: column; gap: 6px; }
.ini-ajuda .inicio-pedir { min-height: 64px; padding: .7rem 1rem; }
.ini-ajuda .inicio-pedir > i { font-size: 1.75rem; }
.ini-pedidos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ini-pedido {
    width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: .75rem;
    background: #f8fafc; text-align: left;
}
.ini-pedido:hover { background: #f1f5f9; }
.ini-pedido-t { flex: 1; min-width: 0; font-size: .85rem; font-weight: 700; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-pedido-t small { display: block; font-size: .72rem; font-weight: 600; color: #475569; }
#inicio-meus-pedidos > .ini-link { align-self: flex-end; }
#inicio-meus-pedidos:empty, #inicio-recebidos-linha:empty { display: none; }
#inicio-meus-pedidos { display: flex; flex-direction: column; }
.ini-recebido {
    width: 100%; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 4px 4px 10px; border-radius: .75rem;
    background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; text-align: left; font-size: .82rem;
}
.ini-recebido > i { font-size: 1.2rem; color: #c2410c; flex-shrink: 0; }
.ini-recebido > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-recebido .ini-link { color: #9a3412; }

/* 3. Quem está livre (uma linha) */
.ini-livre { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; }
.ini-livre > i { font-size: 1.2rem; color: #047857; flex-shrink: 0; }
.ini-livre p { flex: 1; min-width: 0; margin: 0; font-size: .85rem; font-weight: 600; line-height: 1.3; color: #1e293b; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ini-livre p b { font-weight: 800; color: #065f46; }
#inicio-grupo:empty { display: none; }

/* 4. Para você: um cartão pequeno por vez */
.pv[hidden] { display: none; }
.pv-tit { margin: 0 0 6px 4px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #475569; }
.pv-card {
    display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 4px 4px 12px;
    border-radius: 1rem; background: #f8fafc; border: 1px solid #e2e8f0;
}
.pv-card > i { font-size: 1.2rem; color: #4f46e5; flex-shrink: 0; }
.pv-txt { flex: 1; min-width: 0; margin: 0; font-size: .82rem; font-weight: 600; color: #1e293b; line-height: 1.3; }
.pv-acao { flex-shrink: 0; min-height: 40px; padding: 0 .8rem; border-radius: 999px; font-size: .8rem; font-weight: 800; color: #3730a3; background: #eef2ff; }
.pv-acao:hover { background: #e0e7ff; }
.pv-x { flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; font-size: 1.25rem; line-height: 1; color: #475569; }
.pv-x:hover { background: #e2e8f0; }

body.dark-theme .ini-card { background: #1e293b; border-color: #334155; }
body.dark-theme .ini-hoje-tit, body.dark-theme .ini-ev, body.dark-theme .ini-pedido-t, body.dark-theme .ini-livre p, body.dark-theme .pv-txt { color: #f1f5f9; }
body.dark-theme .ini-hoje-st, body.dark-theme .ini-hoje-st-nd, body.dark-theme .ini-ev-q, body.dark-theme .ini-vazio,
body.dark-theme .ini-pedido-t small, body.dark-theme .pv-tit, body.dark-theme .pv-x, body.dark-theme .ini-dia-n { color: #cbd5e1; }
body.dark-theme .ini-link { color: #a5b4fc; }
body.dark-theme .ini-dia { background: #0f172a; color: #f1f5f9; box-shadow: inset 0 0 0 1px #334155; }
body.dark-theme .ini-ev:hover, body.dark-theme .ini-pedido { background: #0f172a; }
body.dark-theme .ini-ev-t b { color: #c7d2fe; }
body.dark-theme .ini-recebido { background: rgba(124, 45, 18, .3); border-color: rgba(253, 186, 116, .4); color: #fed7aa; }
body.dark-theme .ini-recebido .ini-link { color: #fdba74; }
body.dark-theme .ini-livre p b { color: #6ee7b7; }
body.dark-theme .pv-card { background: #1e293b; border-color: #334155; }
body.dark-theme .pv-acao { background: #312e81; color: #e0e7ff; }

/* Faixa "Exemplo" (sem login): uma linha curta */
.aba-exemplo { padding: .3rem .3rem .3rem .8rem; }
.aba-exemplo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-apoio > .aba-sec.inicio { margin-top: 12px; }

/* Rede: destinos do Início ("Responder" e "ver quadro") param abaixo do header fixo */
#rede-recebidos, #rede-grupos-bloco { scroll-margin-top: calc(var(--hdr-h, 80px) + 8px); }
#rede-recebidos:empty { display: none; }

/* ================= Passeios enxuto (apoio.js): chips de filtro, lista por data, folhas =================
   Cartão = ingresso: a data fica num canhoto à esquerda, separado por um picote tracejado com dois
   meios-círculos. Teal é a cor da aba; âmbar só marca o que falta informar ou o que combina com os filhos. */
:root {
    --pas-tinta: #0f172a; --pas-texto: #334155; --pas-suave: #475569; --pas-borda: #e2e8f0;
    --pas-cartao: #ffffff; --pas-fundo: #f8fafc; --pas-teal: #0f766e; --pas-teal-forte: #14b8a6;
    --pas-teal-claro: #f0fdfa; --pas-picote: #99f6e4; --pas-ambar-bg: #fffbeb; --pas-ambar-borda: #fcd34d;
    --pas-ambar: #92400e; --pas-verde: #15803d; --pas-foco: #4338ca;
}
body.dark-theme {
    --pas-tinta: #f1f5f9; --pas-texto: #e2e8f0; --pas-suave: #cbd5e1; --pas-borda: #334155;
    --pas-cartao: #1e293b; --pas-fundo: #0f172a; --pas-teal: #5eead4; --pas-teal-forte: #2dd4bf;
    --pas-teal-claro: rgba(20, 184, 166, .12); --pas-picote: rgba(45, 212, 191, .35); --pas-ambar-bg: rgba(180, 83, 9, .22);
    --pas-ambar-borda: rgba(252, 211, 77, .4); --pas-ambar: #fcd34d; --pas-verde: #86efac; --pas-foco: #a5b4fc;
}
.pas { display: flex; flex-direction: column; gap: 10px; }
.pas [hidden], .pas-folha [hidden] { display: none !important; }
.pas-tit { margin: 2px 4px 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: var(--pas-tinta); }

/* Filtros: uma linha de chips; se não couber, rola para o lado (a página nunca) */
.pas-filtros { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -8px; padding: 2px 8px 4px; }
.pas-filtros::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .pas-filtros { margin: 0; padding: 2px 0 4px; } }
.pas-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; min-height: 38px; max-width: 11rem; padding: 0 10px;
    border-radius: 999px; border: 1px solid var(--pas-borda); background: var(--pas-cartao); color: var(--pas-texto);
    font-size: 13px; font-weight: 700; white-space: nowrap; transition: background-color .15s, border-color .15s;
}
.pas-chip > i:first-child { font-size: 16px; color: var(--pas-teal); flex-shrink: 0; }
.pas-chip-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pas-chip-car { font-size: 12px; color: #94a3b8; flex-shrink: 0; }
.pas-chip:hover { border-color: #94a3b8; }
.pas-chip.is-falta { background: var(--pas-ambar-bg); border-color: var(--pas-ambar-borda); color: var(--pas-ambar); }
.pas-chip.is-falta > i:first-child { color: var(--pas-ambar); }
.pas-chip-on { display: none; }
#btn-feed-gratis.is-on { background: var(--pas-teal-claro); border-color: var(--pas-teal-forte); color: var(--pas-teal); }
#btn-feed-gratis.is-on .pas-chip-on { display: inline-block; font-size: 14px; color: var(--pas-teal); }

/* Lista agrupada por data */
.pas-lista { display: flex; flex-direction: column; gap: 14px; transition: opacity .2s ease; }
.pas-lista.is-carregando { opacity: .55; }
.pas-grupo-tit { margin: 0 0 6px 4px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pas-suave); }
.pas-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* Cartão-ingresso */
.pas-card {
    position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); cursor: pointer;
    background: var(--pas-cartao); border: 1px solid var(--pas-borda); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: opacity .3s ease, transform .3s ease;
}
.pas-card::before, .pas-card::after {
    content: ''; position: absolute; left: 48px; width: 12px; height: 12px; margin-left: -6px; border-radius: 999px;
    background: var(--pas-fundo); border: 1px solid var(--pas-borda); pointer-events: none;
}
.pas-card::before { top: -7px; clip-path: inset(50% 0 0 0); }
.pas-card::after { bottom: -7px; clip-path: inset(0 0 50% 0); }
.pas-card.is-saved { opacity: .75; }
.pas-card.is-leaving { opacity: 0; transform: translateX(24px); pointer-events: none; }
.pas-data {
    display: flex; flex-direction: column; align-items: center; padding: 12px 0 10px; border-radius: 13px 0 0 13px;
    background: var(--pas-teal-claro); border-right: 1.5px dashed var(--pas-picote); color: var(--pas-tinta);
}
.pas-data span { font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--pas-teal); }
.pas-data b { margin-top: 3px; font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pas-corpo { min-width: 0; padding: 10px 6px 4px 12px; }
.pas-titulo {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; text-align: left;
    font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--pas-tinta); border-radius: 4px; padding-right: 6px;
}
.pas-titulo:hover { text-decoration: underline; text-underline-offset: 2px; }
.pas-meta { display: flex; align-items: baseline; gap: 4px; min-width: 0; margin: 3px 0 0; padding-right: 6px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--pas-suave); }
.pas-meta-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pas-meta-l:empty { display: none; }
.pas-preco { flex-shrink: 0; font-weight: 700; color: var(--pas-texto); white-space: nowrap; }
.pas-meta-l:not(:empty) + .pas-preco::before { content: '·'; margin-right: 4px; font-weight: 500; color: var(--pas-suave); }
.pas-preco.is-gratis { color: var(--pas-verde); }
.pas-pe { display: flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 2px; }
.pas-tags { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; overflow: hidden; }
.pas-tag { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: #f1f5f9; color: #475569; }
.pas-tag-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pas-tag i { flex-shrink: 0; }
.pas-tag.is-combina { background: var(--pas-ambar-bg); color: var(--pas-ambar); box-shadow: inset 0 0 0 1px var(--pas-ambar-borda); }
.pas-acoes { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 0; }
.pas-ic { width: 38px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 19px; color: #64748b; transition: color .15s, background-color .15s; }
.pas-ic:hover { background: #f1f5f9; color: #334155; }
.pas-ic-gosto:hover, .pas-ic-gosto.is-on { color: #e11d48; }
.pas-ic-del:hover { color: #dc2626; }
.pas-add {
    display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-left: 2px; padding: 0 10px 0 8px; border-radius: 999px;
    font-size: 13px; font-weight: 800; color: var(--pas-teal); background: var(--pas-teal-claro); border: 1px solid var(--pas-picote);
    transition: background-color .15s, color .15s;
}
.pas-add:hover { background: #14b8a6; border-color: #14b8a6; color: #fff; }
.pas-card .evt-btn { min-height: 36px; }
.pas-card.is-pend .pas-acoes { gap: 6px; padding-right: 4px; }

/* Vazio, ver mais e rodapé */
.pas-vazio { margin: 0; padding: 14px 12px; border-radius: 14px; border: 1px dashed var(--pas-borda); background: var(--pas-cartao); font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--pas-suave); }
.pas-vazio-acao { font-weight: 800; color: var(--pas-teal); text-decoration: underline; text-underline-offset: 3px; }
.pas-mais { align-self: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--pas-teal); }
.pas-mais:hover { background: var(--pas-teal-claro); }
.pas-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.pas-sugerir { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; border-radius: 10px; font-size: 14px; font-weight: 800; color: var(--pas-teal); }
.pas-sugerir i { font-size: 16px; }
.pas-sugerir:hover { text-decoration: underline; text-underline-offset: 3px; }
.pas-revisar { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; min-height: 44px; padding: 0 6px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--pas-suave); }
.pas-revisar:hover { color: var(--pas-tinta); text-decoration: underline; text-underline-offset: 3px; }
.pas-chip:focus-visible, .pas-titulo:focus-visible, .pas-ic:focus-visible, .pas-add:focus-visible, .pas-mais:focus-visible,
.pas-sugerir:focus-visible, .pas-revisar:focus-visible, .pas-vazio-acao:focus-visible { outline: 3px solid var(--pas-foco); outline-offset: 2px; }

/* Folhas (local, idades, revisar): mesma base do detalhe (.evt-sheet); o detalhe abre por cima */
#evt-detalhe { z-index: 210; }
.pas-folha-tit { display: flex; align-items: center; gap: 8px; margin: 0 44px 4px 0; font-size: 18px; font-weight: 800; color: var(--pas-tinta); }
.pas-folha-sub { margin: 0 0 14px; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--pas-suave); }
.pas-local-form { display: grid; gap: 6px; }
.pas-campo { margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--pas-texto); }
.pas-campo span { font-weight: 500; color: var(--pas-suave); }
.pas-input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid #cbd5e1; background: #fff; font-size: 16px; font-weight: 600; color: #0f172a; outline: none; }
.pas-input:focus { border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20, 184, 166, .25); }
.pas-local-form .evt-btn-lg { margin-top: 12px; }
.pas-rev-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: #f1f5f9; font-size: 12px; font-weight: 800; color: #334155; }
.pas-rev-todos { width: 100%; min-height: 44px; margin-bottom: 12px; font-size: 14px; }
.pas-rev-lista .pas-card { background: var(--pas-fundo); }
.pas-folha .pas-card::before, .pas-folha .pas-card::after { background: var(--pas-cartao); }
.pas-folha .idades-card { background: transparent; border: 0; padding: 0; }
.pas-folha .idades-topo { padding-right: 40px; }
.pas-folha .idades-titulo { font-size: 15px; }
.idades-espera { margin: 6px 44px 10px 0; font-size: 14px; font-weight: 600; color: var(--pas-suave); }
.idades-card:not(.hidden) + .idades-espera { display: none; }

/* Aviso curto (adicionado, publicado): acima da barra de abas, sem piscar */
.pas-aviso {
    position: fixed; left: 50%; bottom: calc(var(--abas-h, 0px) + var(--bia-sobra, 0px) + 16px); transform: translateX(-50%); z-index: 260;
    width: max-content; max-width: calc(100vw - 2rem); padding: 10px 16px; border-radius: 12px;
    background: #1e293b; color: #fff; font-size: 14px; font-weight: 600; text-align: center; box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .5);
}
@media (prefers-reduced-motion: reduce) { .pas-card, .pas-lista, .pas-chip, .pas-add, .pas-ic { transition: none; } }

body.dark-theme .pas-tag { background: #334155; color: #e2e8f0; }
body.dark-theme .pas-ic { color: #94a3b8; }
body.dark-theme .pas-ic:hover { background: #0f172a; color: #e2e8f0; }
body.dark-theme .pas-ic-gosto:hover, body.dark-theme .pas-ic-gosto.is-on { color: #fb7185; }
body.dark-theme .pas-add:hover { background: #14b8a6; color: #0f172a; }
body.dark-theme .pas-input { background: #0f172a; border-color: #475569; color: #f1f5f9; }
body.dark-theme .pas-rev-n { background: #334155; color: #e2e8f0; }
body.dark-theme .pas-aviso { background: #f1f5f9; color: #0f172a; }

/* ================= Barra do mês: botão "Escala" à vista; Filtrar mora no ⋮ ================= */
/* O ícone fica num disco de duas cores (com em cima, sem embaixo): a mesma linha da célula de
   troca — o botão "é" a escala. Rótulo "Escala" quando cabe; a 440px ou menos (com a pílula Hoje não caberia), só o disco. */
.cal-bar-escala {
    display: inline-flex; align-items: center; gap: .4rem; height: 40px; padding: 0 .85rem 0 .3rem; flex-shrink: 0;
    border-radius: 999px; border: 1px solid #c7d2fe; background: #fff; color: #312e81;
    font-size: .82rem; font-weight: 800; line-height: 1; transition: background-color .15s, border-color .15s;
}
.cal-bar-escala:hover { background: #eef2ff; border-color: #a5b4fc; }
.cal-bar-escala:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 1px; }
.cal-bar-escala-ic {
    width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0;
    font-size: 1.05rem; color: #1e1b4b;
    background: linear-gradient(to bottom, #a7f3d0 0 50%, #fed7aa 50% 100%);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}
@media (max-width: 440px) {
    .cal-bar-escala { width: 40px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
    .cal-bar-escala:hover { background: #f1f5f9; border-color: transparent; }
    .cal-bar-escala-ic { width: 34px; height: 34px; font-size: 1.1rem; }
    .cal-bar-escala-lb { display: none; }
}
body.dark-theme .cal-bar-escala { background: #1e293b; border-color: #3730a3; color: #c7d2fe; }
body.dark-theme .cal-bar-escala:hover { background: #1e1b4b; }
@media (max-width: 440px) { body.dark-theme .cal-bar-escala { background: transparent; border-color: transparent; } }
/* "Ver o ano inteiro" só no celular (no desktop há os chips Mês/Ano) */
@media (min-width: 640px) { .cal-mais-menu .cal-mais-so-mob { display: none; } }
/* Filtro ligado: pontinho no ⋮ e no item do menu */
#btn-cal-mais { position: relative; }
#btn-cal-mais.is-filtrando::after {
    content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 999px;
    background: #f97316; box-shadow: 0 0 0 2px #fff;
}
.cal-mais-menu #btn-toggle-filters.is-filtrando::after { top: 50%; right: .8rem; transform: translateY(-50%); }
body.dark-theme #btn-cal-mais.is-filtrando::after { box-shadow: 0 0 0 2px #0f172a; }

/* ================= Folha do dia: "Escala deste dia" ================= */
/* Três chips grandes; cada um leva a célula como fica no mês (verde, laranja ou a troca com a
   linha horizontal). Escolhido: borda da cor do lado + ✓ (não só a cor). Na troca, os chips de
   sentido e momento do hub (escala-lote.js) com a prévia. */
.dia-escala { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #f1f5f9; }
.dia-escala:empty { display: none; }
.de-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; margin-bottom: .65rem; }
.de-tit { margin: 0; font-size: .95rem; font-weight: 800; color: #1e293b; }
.de-origem-linha { margin: 0; }
.de-origem {
    display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem .25rem .5rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; line-height: 1.2; background: #f1f5f9; color: #475569;
}
.de-origem i { font-size: .95rem; }
.de-origem-ajuste { background: #eef2ff; color: #3730a3; }
.de-origem-periodo { background: #f5f3ff; color: #5b21b6; }
.de-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.de-op {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; min-width: 0; min-height: 6.4rem;
    padding: .75rem .35rem .6rem; border-radius: 1.1rem; border: 2px solid #e2e8f0; background: #fff; text-align: center;
    transition: border-color .15s, background-color .15s;
}
.de-op:hover { border-color: #a5b4fc; }
.de-op:focus-visible { outline: 3px solid #4338ca; outline-offset: 2px; }
.de-cel { display: block; flex-shrink: 0; width: 2.2rem; height: 2.6rem; border-radius: .55rem; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1); }
.de-cel.tr-cel { --tr-lw: 3px; }
.de-cel-com { background: #a7f3d0; }
.de-cel-sem { background: #fed7aa; }
.de-op-txt { display: block; min-width: 0; max-width: 100%; }
.de-op b { display: block; font-size: .84rem; font-weight: 800; line-height: 1.15; color: #1e293b; }
.de-op small { display: block; margin-top: .15rem; font-size: .72rem; font-weight: 600; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-ok { position: absolute; top: .35rem; right: .35rem; font-size: 1.1rem; }
.de-op-com.on { border-color: #10b981; background: #ecfdf5; }
.de-op-com.on b, .de-op-com .de-ok { color: #047857; }
.de-op-sem.on { border-color: #f97316; background: #fff7ed; }
.de-op-sem.on b, .de-op-sem .de-ok { color: #c2410c; }
.de-op-troca.on { border-color: #4f46e5; background: #eef2ff; }
.de-op-troca.on b, .de-op-troca .de-ok { color: #3730a3; }
.de-troca .lote-rot:first-child { margin-top: .9rem; }
.de-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; margin-top: .6rem; }
.de-normal { display: flex; flex-direction: column; min-width: 0; }
.de-voltar {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: 0 .3rem; margin-left: -.3rem; border-radius: .6rem;
    font-size: .84rem; font-weight: 800; color: #4338ca; text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.de-voltar i { font-size: 1rem; }
.de-normal small { margin-top: -.3rem; font-size: .72rem; font-weight: 600; color: #64748b; }
.de-varios {
    display: inline-flex; align-items: center; gap: .15rem; min-height: 40px; padding: 0 .3rem; margin-left: auto; margin-right: -.3rem;
    border-radius: .6rem; font-size: .8rem; font-weight: 700; color: #64748b;
}
.de-varios:hover { color: #4338ca; }
.de-voltar:focus-visible, .de-varios:focus-visible { outline: 3px solid #4338ca; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .de-op, .cal-bar-escala { transition: none; } }
body.dark-theme .dia-escala { border-color: #334155; }
body.dark-theme .de-tit { color: #f1f5f9; }
body.dark-theme .de-origem { background: #1e293b; color: #cbd5e1; }
body.dark-theme .de-origem-ajuste { background: #1e1b4b; color: #c7d2fe; }
body.dark-theme .de-origem-periodo { background: #2e1065; color: #ddd6fe; }
body.dark-theme .de-op { background: #1e293b; border-color: #334155; }
body.dark-theme .de-op b { color: #f1f5f9; }
body.dark-theme .de-op small, body.dark-theme .de-normal small { color: #94a3b8; }
body.dark-theme .de-op-com.on { background: rgba(16, 185, 129, .14); border-color: #34d399; }
body.dark-theme .de-op-sem.on { background: rgba(249, 115, 22, .14); border-color: #fb923c; }
body.dark-theme .de-op-troca.on { background: #1e1b4b; border-color: #818cf8; }
body.dark-theme .de-op-com.on b, body.dark-theme .de-op-com .de-ok { color: #6ee7b7; }
body.dark-theme .de-op-sem.on b, body.dark-theme .de-op-sem .de-ok { color: #fdba74; }
body.dark-theme .de-op-troca.on b, body.dark-theme .de-op-troca .de-ok { color: #c7d2fe; }
body.dark-theme .de-voltar { color: #a5b4fc; }
body.dark-theme .de-varios { color: #94a3b8; }
/* Celular estreito: os dois sentidos um embaixo do outro (os nomes cabem inteiros) */
@media (max-width: 400px) { .de-troca .lote-sentido { grid-template-columns: 1fr; } .de-troca .lote-chip-tr { min-height: 3.1rem; } }