/* Aba Rede (rede.js) e formulários da folha de grupos (grupos.js).
   Arquivo próprio para não disputar style.css com outras branches.
   Cores do calendário compartilhado = as da Agenda (.bg-com-filhos, .bg-sem-filhos,
   .bg-troca com a linha horizontal e .period-mark vêm do style.css). */

.rede-sub { margin: 0; font-size: .75rem; line-height: 1.45; font-weight: 500; color: #64748b; }
.rede-sub[hidden] { display: none; }

/* ---------- (a) minha rede de apoio ---------- */
.rede-a-share { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: .45rem; }
.rede-acao-share { width: 100%; color: #4338ca; background: #eef2ff; border-color: #e0e7ff; }
.rede-acao-share:hover { background: #e0e7ff; }

/* ---------- (b) compartilhados comigo ---------- */
.rc-vazio-msg { display: flex; flex-direction: column; gap: .3rem; }
.rc-vazio-t { margin: 0; font-size: .88rem; font-weight: 700; color: #334155; }

.rc-abas { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.25rem .85rem; padding: .15rem .25rem; }
.rc-abas::-webkit-scrollbar { display: none; }
.rc-aba {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: 0 .9rem;
    border-radius: 999px; border: 1.5px solid #e2e8f0; background: #fff; font-size: .8rem; font-weight: 700; color: #475569;
}
.rc-aba[aria-selected="true"] { border-color: var(--c); background: #f8fafc; background: color-mix(in srgb, var(--c) 12%, #fff); color: #1e293b; }
.rc-aba:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }

.rc-cab { display: flex; align-items: center; gap: .7rem; }
.rc-cab-t { min-width: 0; }
.rc-nome { margin: 0; font-size: .95rem; font-weight: 800; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rc-nav { display: flex; align-items: center; gap: .25rem; margin: .85rem 0 .35rem; }
.rc-nav-b { width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #475569; font-size: 1.1rem; }
.rc-nav-b:hover { background: #f1f5f9; }
.rc-nav-t { flex: 1; min-width: 0; min-height: 40px; border-radius: .7rem; font-size: .95rem; font-weight: 800; color: #1e293b; }
.rc-nav-t:hover { background: #f8fafc; }
.rc-nav-b:focus-visible, .rc-nav-t:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 1px; }

.rc-semana, .rc-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.rc-semana span { text-align: center; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; padding-bottom: .3rem; }
.rc-semana .rc-fds { color: #6366f1; }
.rc-grade { transition: opacity .2s; }
.rc-carregando { opacity: .45; }

.rc-dia {
    position: relative; overflow: hidden; height: 2.75rem; min-width: 0; border-radius: .55rem;
    background: #fff; border: 1px solid #eef2f6; padding: .2rem .3rem;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
    color: #334155; text-align: left; font: inherit;
}
button.rc-dia { cursor: pointer; }
.rc-fora-mes { background: transparent; border-color: transparent; }
.rc-n { font-size: .78rem; font-weight: 800; line-height: 1; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.rc-hoje .rc-n {
    color: #fff; background: linear-gradient(to bottom, #3b82f6, #6366f1); border-radius: 999px;
    min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; margin-top: .1rem; display: inline-flex; align-items: center; justify-content: center;
}
.rc-passado { opacity: .5; }
.rc-fora { opacity: .3; }
.rc-sel { box-shadow: inset 0 0 0 2px #1e293b; }
.rc-dia:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 1px; z-index: 1; }
.rc-dots { display: flex; gap: 2px; margin-bottom: .1rem; }
.rc-dots i { width: 5px; height: 5px; border-radius: 999px; background: #334155; }
.rc-dia .period-mark { top: 6px; right: 5px; width: 5px; height: 5px; }

.rc-leg { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .65rem; font-size: 11px; font-weight: 700; color: #64748b; }
.rc-leg span { display: inline-flex; align-items: center; gap: .3rem; }
.rc-leg-troca { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(to bottom, #34d399 0 40%, #fff 40% 60%, #fb923c 60% 100%); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); }
/* Cores da escala nas células (a troca, com a linha horizontal, vem do style.css) */
.rc-dia.bg-com-filhos { background: var(--st-com-bg); border-color: transparent; }
.rc-dia.bg-sem-filhos { background: var(--st-sem-bg); border-color: transparent; }
.rc-dia.bg-troca { border-color: transparent; }
.rc-leg-ev { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: #334155; }

.rc-detbox { margin-top: .75rem; }
.rc-dica { margin: 0; display: flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; color: #64748b; }
.rc-det { background: #f8fafc; border: 1px solid #eef2f6; border-radius: .9rem; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .3rem; }
.rc-det-t { margin: 0; font-size: .88rem; font-weight: 800; color: #1e293b; }
.rc-det-s { margin: 0; font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; }
.rc-det-s::before { content: ''; flex-shrink: 0; width: 10px; height: 10px; border-radius: 999px; border: 2px solid; box-sizing: border-box; }
.rc-s-com { color: #047857; } .rc-s-com::before { background: #d1fae5; border-color: #34d399; }
.rc-s-sem { color: #c2410c; } .rc-s-sem::before { background: #ffedd5; border-color: #fb923c; }
.rc-s-troca { color: #4338ca; } .rc-s-troca::before { background: linear-gradient(to bottom, #34d399 0 42%, #fff 42% 58%, #fb923c 58% 100%); border: 0; box-shadow: 0 0 0 1.5px #64748b; }
.rc-s-nd { color: #64748b; } .rc-s-nd::before { border-style: dashed; border-color: #94a3b8; }
.rc-det-p { margin: 0; font-size: .75rem; font-weight: 700; color: #4338ca; display: flex; align-items: center; gap: .25rem; }
.rc-det-ev { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.rc-det-ev li { display: flex; gap: .6rem; font-size: .82rem; color: #1e293b; }
.rc-det-ev b { flex-shrink: 0; min-width: 3.6rem; font-size: .75rem; font-weight: 800; color: #4f46e5; font-variant-numeric: tabular-nums; padding-top: .05rem; }
.rc-det-ev span { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }

.rc-rodape { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .85rem; padding-top: .6rem; border-top: 1px solid #f1f5f9; }
.rc-switch { position: relative; display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; font-size: .82rem; font-weight: 700; color: #334155; cursor: pointer; }
.rc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rc-switch-ui { position: relative; flex-shrink: 0; width: 2.15rem; height: 1.25rem; border-radius: 999px; background: #cbd5e1; transition: background-color .15s; }
.rc-switch-ui::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px);
    border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .25); transition: transform .15s;
}
.rc-switch input:checked + .rc-switch-ui { background: #4f46e5; }
.rc-switch input:checked + .rc-switch-ui::after { transform: translateX(.9rem); }
.rc-switch input:focus-visible + .rc-switch-ui { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.rc-link { min-height: 44px; padding: 0 .2rem; font-size: .75rem; font-weight: 700; color: #4f46e5; text-decoration: underline; text-underline-offset: 2px; }
.rc-link-x { color: #64748b; }
.rc-link:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 1px; }
.rc-erro { margin: .3rem 0; font-size: .78rem; font-weight: 600; color: #b91c1c; background: #fef2f2; border-radius: .7rem; padding: .45rem .7rem; }
.rc-erro .rc-link { min-height: 0; color: #b91c1c; }

@media (min-width: 640px) {
    .rc-dia { height: 3.5rem; padding: .3rem .45rem; }
    .rc-n { font-size: .85rem; }
    .rc-dots i { width: 6px; height: 6px; }
}

/* ---------- (c) grupos ---------- */
.rede-g-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.rede-g-acoes > .rede-acao { flex: 1 1 auto; }
.rede-g-acoes > .rede-acao:not(.rede-acao-prim) { color: #047857; border-color: #a7f3d0; }
.rede-g-acoes > .rede-acao:not(.rede-acao-prim):hover { background: #ecfdf5; }
.rede-g-lista { display: flex; flex-direction: column; gap: .6rem; margin-top: .85rem; }
.rede-g-lista:empty { display: none; }
.rede-g {
    width: 100%; text-align: left; display: flex; flex-direction: column; gap: .5rem; padding: .8rem .9rem;
    border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; color: #1e293b; transition: border-color .15s, background-color .15s;
}
.rede-g:hover { border-color: #a7f3d0; background: #fbfefd; }
.rede-g:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.rede-g-topo { display: flex; align-items: center; gap: .5rem; }
.rede-g-nome { flex: 1; min-width: 0; font-size: .95rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rede-g-topo i { color: #94a3b8; font-size: 1.1rem; }
.rede-g-membros { display: flex; align-items: center; gap: .55rem; font-size: .75rem; font-weight: 600; color: #64748b; min-width: 0; }
.rede-g-resumo { display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; color: #065f46; background: #ecfdf5; border-radius: .7rem; padding: .45rem .65rem; }
.rede-g-resumo i { flex-shrink: 0; }
.rede-g-resumo.is-vazio { color: #64748b; background: #f8fafc; font-weight: 600; }

/* ---------- folha do grupo (grupos.js): formulários e blocos ---------- */
.gq-form { display: flex; flex-direction: column; gap: .5rem; }
.gq-label { font-size: .82rem; font-weight: 800; color: var(--cs-ink); }
.gq-form input {
    min-height: 48px; border: 1px solid var(--cs-line); border-radius: .8rem; padding: .65rem .85rem;
    font: inherit; font-size: 1rem; background: var(--cs-card); color: var(--cs-ink);
}
.gq-form input:focus { outline: 2px solid #6366f1; outline-offset: 1px; }
.gq-form input[aria-invalid="true"] { border-color: #f87171; }
.gq-form .gq-acoes { justify-content: flex-end; margin-top: .35rem; }
.gq-form .cs-btn, .gq-vazio .cs-btn { min-height: 44px; padding: .5rem 1.05rem; font-size: .82rem; }
.gq-bloco { display: flex; flex-direction: column; gap: .55rem; border-top: 1px solid var(--cs-line); padding-top: .85rem; }
.gq-bloco-1 { border-top: 0; padding-top: 0; }
.gq-bloco > .gq-sub { margin: 0; }
.gq-bloco .gq-link { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; }

@media (prefers-reduced-motion: reduce) {
    .rc-grade, .rc-switch-ui, .rc-switch-ui::after, .rede-g { transition: none; }
}

/* ---------- tema escuro ---------- */
body.dark-theme .rede-sub, body.dark-theme .rc-dica { color: #94a3b8; }
body.dark-theme .rede-a-share, body.dark-theme .rc-rodape { border-color: #334155; }
body.dark-theme .rede-acao-share { background: #1e1b4b; border-color: #3730a3; color: #c7d2fe; }
body.dark-theme .rc-aba, body.dark-theme .rede-g { background: #0f172a; border-color: #334155; color: #e2e8f0; }
body.dark-theme .rc-aba[aria-selected="true"] { background: #1e293b; border-color: var(--c); color: #f1f5f9; }
body.dark-theme .rc-nome, body.dark-theme .rc-nav-t, body.dark-theme .rc-det-t, body.dark-theme .rc-vazio-t, body.dark-theme .rc-det-ev li { color: #f1f5f9; }
body.dark-theme .rc-dia:not(.bg-com-filhos):not(.bg-sem-filhos):not(.bg-troca) { background: #0f172a; border-color: #1e293b; color: #cbd5e1; }
body.dark-theme .rc-fora-mes { background: transparent; }
body.dark-theme .rc-sel { box-shadow: inset 0 0 0 2px #f1f5f9; }
body.dark-theme .rc-det { background: #0f172a; border-color: #334155; }
body.dark-theme .rc-switch { color: #e2e8f0; }
body.dark-theme .rc-switch-ui { background: #475569; }
body.dark-theme .rc-dots i, body.dark-theme .rc-leg-ev { background: #cbd5e1; }
body.dark-theme .rede-g-resumo { background: rgba(16, 185, 129, .12); color: #6ee7b7; }
body.dark-theme .rede-g-resumo.is-vazio { background: #1e293b; color: #94a3b8; }
body.dark-theme .rede-g-acoes > .rede-acao:not(.rede-acao-prim) { background: #0f172a; border-color: #065f46; color: #6ee7b7; }

/* =====================================================================
   Colmeia (20/10/2026): a aba Rede vista como uma colmeia.
   O hexágono é só apresentação (SVG com aria-hidden); a informação está sempre em texto
   numa lista de verdade. Movimento só suave (ease, 200–600 ms) e desligado com
   prefers-reduced-motion. Tokens de mel: o amarelo nunca é cor de texto, só fundo.
   ===================================================================== */
:root {
    --favo-tom-0: #fde68a;     /* tons de favo, só para variar (não carregam sentido) */
    --favo-tom-1: #fcd34d;
    --favo-tom-2: #fed7aa;
    --favo-cera: #d97706;       /* contorno do favo */
    --favo-tinta: #78350f;      /* inicial sobre o favo (contraste > 7:1) */
    --favo-acao: #b45309;       /* texto e traço do favo vazio (5:1 sobre branco) */
    --favo-acao-bg: #fffbeb;
}
body.dark-theme {
    --favo-tom-0: #92400e;
    --favo-tom-1: #78350f;
    --favo-tom-2: #7c2d12;
    --favo-cera: #f59e0b;
    --favo-tinta: #fef3c7;
    --favo-acao: #fbbf24;
    --favo-acao-bg: rgba(251, 191, 36, .1);
}

/* ---------- ícone da colmeia (aba Rede e títulos), no traço do Phosphor ---------- */
.ic-colmeia { width: 1em; height: 1em; flex-shrink: 0; display: block; overflow: visible; }
.ic-colmeia polygon { fill: none; stroke: currentColor; stroke-width: 16; stroke-linejoin: round; }
.ic-colmeia.cheia polygon,
[aria-current="page"] .ic-colmeia polygon { fill: currentColor; }
.aba-topo .ic-colmeia { font-size: 1.2rem; }

/* ---------- blocos e títulos da aba ---------- */
.rede-bloco { padding: 1rem; }
@media (min-width: 640px) { .rede-bloco { padding: 1.25rem; } }
.rede-tit { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 800; color: #1e293b; }
.rede-tit > i, .rede-tit > svg { font-size: 1.15rem; }
.rede-tit-mel { color: var(--favo-cera); }
.rede-sub-tit { margin: .2rem 0 .9rem; }
.rede-g-acoes { margin-top: 0; }
#aba-rede .rede-acao { min-height: 48px; }
.rede-acao-mel { background: #fef3c7; border-color: #fcd34d; color: var(--favo-tinta); }
.rede-acao-mel:hover { background: #fde68a; }
body.dark-theme .rede-tit { color: #f1f5f9; }
body.dark-theme .rede-acao-mel { background: rgba(251, 191, 36, .14); border-color: #92400e; color: #fde68a; }

/* ---------- (a) minha colmeia: favos ---------- */
/* A largura da caixa decide as colunas: 2 (até 340px), 3 e 5 (desktop). As colunas pares
   descem meio favo: é o desenho da colmeia. O conteúdo é o mesmo em qualquer largura. */
.colmeia { container-type: inline-size; }
.favos {
    --desloca: 2.3rem;
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .5rem; row-gap: .15rem;
}
.favos > .favo:nth-child(2n) { margin-top: var(--desloca); }
@container (min-width: 340px) {
    .favos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .favos > .favo:nth-child(2n) { margin-top: 0; }
    .favos > .favo:nth-child(3n+2) { margin-top: var(--desloca); }
}
@container (min-width: 560px) {
    .favos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .favos > .favo:nth-child(n) { margin-top: 0; }
    .favos > .favo:nth-child(5n+2), .favos > .favo:nth-child(5n+4) { margin-top: var(--desloca); }
}
.favo { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 .1rem .6rem; }
.favo-hex { position: relative; width: 4.5rem; height: 4.5rem; flex-shrink: 0; display: grid; place-items: center; transition: transform .35s ease; }
.favo-forma { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.favo-hex .favo-forma polygon { fill: var(--favo, var(--favo-tom-0)); stroke: var(--favo-cera); stroke-width: 3; stroke-linejoin: round; }
.favo[data-tom="1"] { --favo: var(--favo-tom-1); }
.favo[data-tom="2"] { --favo: var(--favo-tom-2); }
.favo-hex b { position: relative; font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--favo-tinta); }
.favo-nome { margin-top: .3rem; font-size: .85rem; font-weight: 800; line-height: 1.2; color: #1e293b; overflow-wrap: anywhere; }
.favo-rel { font-size: .72rem; font-weight: 600; line-height: 1.3; color: #64748b; overflow-wrap: anywhere; }
.favo-acoes { display: flex; gap: .35rem; margin-top: .4rem; }
.favo-b {
    width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; transition: background-color .2s ease;
}
.favo-b:hover { background: #eef2ff; color: #4338ca; }
.favo-zap { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.favo-zap:hover { background: #d1fae5; color: #065f46; }
.favo-sem { margin-top: .4rem; min-height: 48px; display: flex; align-items: center; font-size: .72rem; font-weight: 600; color: #64748b; }
.favo:hover .favo-hex { transform: translateY(-2px); }

/* o favo vazio, tracejado, é o botão de chamar alguém */
.favo-add {
    width: 100%; min-height: 48px; display: flex; flex-direction: column; align-items: center; padding: 0 0 .2rem;
    border: 0; border-radius: 1rem; background: none; font: inherit; color: var(--favo-acao); cursor: pointer;
}
.favo-add .favo-nome { color: var(--favo-acao); }
.favo-hex-vazio .favo-forma polygon { fill: transparent; stroke: var(--favo-acao); stroke-width: 2.5; stroke-dasharray: 6 5; transition: fill .25s ease; }
.favo-hex-vazio i { position: relative; font-size: 1.6rem; }
.favo-add:hover .favo-forma polygon { fill: var(--favo-acao-bg); }
.favo-b:focus-visible, .favo-add:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }

/* colmeia vazia: três favos tracejados e o convite */
.colmeia-vazia { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.favos-vazios { display: flex; align-items: flex-start; margin-bottom: .2rem; }
.favos-vazios .favo-forma { position: static; width: 2.4rem; height: 2.4rem; }
.favos-vazios .favo-forma + .favo-forma { margin-left: -.2rem; }
.favos-vazios .favo-forma:nth-child(2) { margin-top: 1rem; }
.favos-vazios polygon { fill: var(--favo-acao-bg); stroke: var(--favo-acao); stroke-width: 3; stroke-dasharray: 6 5; stroke-linejoin: round; }
.colmeia-vazia .rede-acao { margin-top: .35rem; }

/* abelha pousada (abelha.js, parada): na quina do favo de chamar e sobre a colmeia vazia */
.favo-abelha { position: absolute; line-height: 0; pointer-events: none; }
.favo-abelha .abelha { width: 100%; height: 100%; }
.favo-hex-vazio .favo-abelha { top: -.4rem; right: -.6rem; width: 1.9rem; height: 1.9rem; }
.favos-vazios { position: relative; }
.favos-vazios .favo-abelha { top: -.35rem; left: 2.5rem; width: 1.8rem; height: 1.8rem; }

/* entrada: os favos pousam devagar, uma vez só (o rede.js põe .colmeia-entra no 1º desenho) */
@keyframes favo-pousa { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    .colmeia-entra .favo { animation: favo-pousa .6s ease-out both; animation-delay: min(calc(var(--i, 0) * 80ms), 480ms); }
}

body.dark-theme .favo-nome { color: #f1f5f9; }
body.dark-theme .favo-add .favo-nome { color: var(--favo-acao); }
body.dark-theme .favo-rel, body.dark-theme .favo-sem { color: #94a3b8; }
body.dark-theme .favo-b { background: #0f172a; border-color: #334155; color: #cbd5e1; }
body.dark-theme .favo-b:hover { background: #1e1b4b; color: #c7d2fe; }
body.dark-theme .favo-zap { background: rgba(16, 185, 129, .14); border-color: #065f46; color: #6ee7b7; }

/* ---------- favinho: o avatar em hexágono (visita, grupos, quadro) ---------- */
.favinho { position: relative; width: 1.75rem; height: 1.75rem; flex-shrink: 0; display: inline-grid; place-items: center; }
.favinho .favo-forma polygon { fill: var(--c, #94a3b8); stroke: var(--c, #94a3b8); stroke-width: 5; stroke-linejoin: round; }
.favinho b { position: relative; font-size: .72rem; font-weight: 800; line-height: 1; color: #fff; }
/* quem compartilhou com você: favo de visita = traço pontilhado (e o texto "Compartilhou com você") */
.favo-visita .favo-forma polygon { fill: #fff; fill: color-mix(in srgb, var(--c) 14%, #fff); stroke-dasharray: 9 6; stroke-width: 6; }
.favo-visita b { color: #1e293b; }
body.dark-theme .favo-visita .favo-forma polygon { fill: #0f172a; fill: color-mix(in srgb, var(--c) 22%, #0f172a); }
body.dark-theme .favo-visita b { color: #f1f5f9; }
.rc-favo { width: 2.75rem; height: 2.75rem; }
.rc-favo b { font-size: 1rem; }
.rc-aba { min-height: 48px; padding: 0 1rem 0 .55rem; }
.rc-aba .favinho { width: 1.6rem; height: 1.6rem; }
.rc-nav-b { width: 48px; height: 48px; }
.rc-nav-t, .rc-rodape .rc-link { min-height: 48px; }

/* ---------- (c) colmeias (os grupos): membros num favinho só ---------- */
.favinhos { display: inline-flex; flex-shrink: 0; }
.favinhos .favinho { width: 1.6rem; height: 1.75rem; }
.favinhos .favinho + .favinho { margin-left: -.18rem; }
.favinhos .favinho-mais { --c: #94a3b8; }
.favinhos .favinho-mais b { font-size: .6rem; }
.gq-nome .favinho { width: 2rem; height: 2rem; }
.gq-membros .favinho { width: 1.85rem; height: 1.85rem; }
.gq-membros li { min-height: 44px; }
.gq-det .favinho { width: 2.3rem; height: 2.3rem; }
.gq-vazio > .gq-ic { width: 2.6rem; height: 2.6rem; color: var(--cs-livre); }

/* ---------- quadro "Quem está livre": cada dia num favo ---------- */
/* A célula continua retangular (o contorno de foco não é cortado); o favo é um <span>
   por dentro com o recorte hexagonal. Cor + ícone + rótulo dizem o estado, não a forma. */
.gq-cell.gq-sem, .gq-cell.gq-com, .gq-cell.gq-troca, .gq-cell.gq-nd { background: transparent; border: 0; }
.gq-cell { border-radius: .5rem; transition: transform .25s ease; }
.gq-cell:hover { transform: scale(1.03); }
.gq-cell:active { transform: scale(.98); }
.gq-favo {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: min(100%, 3.9rem);
    clip-path: polygon(24% 0, 76% 0, 100% 50%, 76% 100%, 24% 100%, 0 50%);
}
.gq-sem > .gq-favo { background: var(--cs-livre); }
.gq-com > .gq-favo { background: var(--cs-com); }
.gq-troca > .gq-favo { background: linear-gradient(to bottom, var(--cs-com) 0 var(--corte, 50%), #fff var(--corte, 50%) calc(var(--corte, 50%) + 2px), var(--cs-livre) calc(var(--corte, 50%) + 2px) 100%); }
.gq-troca.gq-de-sem > .gq-favo { background: linear-gradient(to bottom, var(--cs-livre) 0 var(--corte, 50%), #fff var(--corte, 50%) calc(var(--corte, 50%) + 2px), var(--cs-com) calc(var(--corte, 50%) + 2px) 100%); }
/* fundo opaco: o contorno de "hoje" segue a forma, não cada listra */
.gq-nd > .gq-favo { background: repeating-linear-gradient(to bottom, var(--cs-vazio) 0 4px, var(--cs-card) 4px 8px); }
.gq-cell > i { position: relative; z-index: 1; }
.gq-cell .gq-ev { z-index: 1; top: 1px; right: 18%; }
/* período especial: pontinho embaixo, dentro do favo (o rótulo aparece no detalhe) */
.gq-cell.gq-lbl::before {
    left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 1;
    width: 6px; height: 6px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92);
}
.gq-cell.gq-nd.gq-lbl::before { background: #818cf8; }
/* hoje e o dia escolhido: contorno que segue o hexágono */
.gq-cell.gq-hoje { box-shadow: none; filter: drop-shadow(2px 0 0 #6366f1) drop-shadow(-2px 0 0 #6366f1) drop-shadow(0 2px 0 #6366f1) drop-shadow(0 -2px 0 #6366f1); }
.gq-cell.gq-sel { box-shadow: none; filter: drop-shadow(2.5px 0 0 var(--cs-ink)) drop-shadow(-2.5px 0 0 var(--cs-ink)) drop-shadow(0 2.5px 0 var(--cs-ink)) drop-shadow(0 -2.5px 0 var(--cs-ink)); }
.gq-sw { border-radius: 0; width: 1rem; height: .9rem; clip-path: polygon(24% 0, 76% 0, 100% 50%, 76% 100%, 24% 100%, 0 50%); }

@media (prefers-reduced-motion: reduce) {
    .favo-hex, .favo-b, .favo-hex-vazio .favo-forma polygon, .gq-cell { transition: none; }
    .favo:hover .favo-hex, .gq-cell:hover, .gq-cell:active { transform: none; }
}
