/* Compartilhamento v2: recorte do link, compartilhados comigo, imagem, grupo.
   Arquivo próprio para não disputar style.css com outras branches. */
:root {
    --cs-livre: #10b981;      /* sem filhos = livre */
    --cs-livre-bg: #d1fae5;
    --cs-com: #7c3aed;        /* com filhos */
    --cs-com-bg: #ede9fe;
    --cs-vazio: #e2e8f0;
    --cs-ink: #1e293b;
    --cs-muted: #64748b;
    --cs-line: #e2e8f0;
    --cs-card: #ffffff;
}
body.dark-theme {
    --cs-livre-bg: rgba(16, 185, 129, .22);
    --cs-com-bg: rgba(124, 58, 237, .28);
    --cs-vazio: #334155;
    --cs-ink: #f1f5f9;
    --cs-muted: #94a3b8;
    --cs-line: #334155;
    --cs-card: #1e293b;
}

/* ---------- 1. recorte do link ---------- */
.cs-recorte { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--cs-line); display: flex; flex-direction: column; gap: .45rem; }
.cs-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.cs-lab { font-size: .72rem; font-weight: 700; color: var(--cs-muted); display: inline-flex; align-items: center; gap: .3rem; }
.cs-seg { display: inline-flex; background: rgba(148, 163, 184, .16); border-radius: 999px; padding: 2px; }
.cs-seg button { border: 0; background: transparent; font: inherit; font-size: .7rem; font-weight: 700; color: var(--cs-muted); padding: .3rem .7rem; border-radius: 999px; cursor: pointer; min-height: 28px; }
.cs-seg button.on { background: var(--cs-card); color: #4f46e5; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.cs-seg button:focus-visible, .cs-btn:focus-visible, .gq-cell:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.cs-datas { justify-content: flex-start; font-size: .72rem; font-weight: 600; color: var(--cs-muted); }
.cs-datas input { flex: 1; min-width: 0; border: 1px solid var(--cs-line); background: var(--cs-card); color: var(--cs-ink); border-radius: .6rem; padding: .3rem .45rem; font: inherit; font-size: .75rem; }
.cs-evlist { max-height: 11rem; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; background: var(--cs-card); border: 1px solid var(--cs-line); border-radius: .7rem; padding: .3rem; }
.cs-evlist label { display: flex; align-items: center; gap: .5rem; font-size: .75rem; padding: .3rem .35rem; border-radius: .45rem; cursor: pointer; color: var(--cs-ink); }
.cs-evlist label:hover { background: rgba(99, 102, 241, .07); }
.cs-evdate { font-weight: 800; font-size: .68rem; color: var(--cs-muted); min-width: 2.6rem; font-variant-numeric: tabular-nums; }
.cs-evtitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cs-hint { font-size: .68rem; color: var(--cs-muted); font-weight: 500; margin: 0; }

/* ---------- 2. compartilhados comigo ---------- */
.cs-toast { position: fixed; bottom: calc(5.5rem + var(--bia-sobra, 0px)); left: 50%; transform: translateX(-50%); z-index: 120; background: #1e293b; color: #fff; font-size: .85rem; font-weight: 600; padding: .55rem 1rem; border-radius: .8rem; box-shadow: 0 10px 25px rgba(15, 23, 42, .25); max-width: calc(100vw - 2rem); }
.cs-btn { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .4rem .7rem; border-radius: 999px; border: 1px solid #e0e7ff; background: #eef2ff; color: #4338ca; cursor: pointer; white-space: nowrap; min-height: 32px; }
.cs-btn:hover { background: #e0e7ff; }
.cs-btn-livre { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.cs-btn-livre:hover { background: #d1fae5; }
body.dark-theme .cs-btn { background: rgba(99, 102, 241, .18); border-color: rgba(129, 140, 248, .35); color: #c7d2fe; }
body.dark-theme .cs-btn-livre { background: rgba(16, 185, 129, .18); border-color: rgba(52, 211, 153, .35); color: #6ee7b7; }
.cs-pessoa { display: flex; align-items: center; gap: .4rem; }
.cs-pessoa-tg { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; text-align: left; border: 1px solid var(--cs-line); background: transparent; border-radius: .9rem; padding: .45rem .7rem; cursor: pointer; color: var(--cs-ink); font: inherit; }
.cs-pessoa-tg .cs-av { grid-row: span 2; }
.cs-pessoa-tg i { grid-row: span 2; grid-column: 3; color: var(--cs-muted); font-size: 1.05rem; }
.cs-pessoa-tg.off { opacity: .55; }
.cs-pessoa-nome { font-size: .85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-pessoa-sub { font-size: .68rem; font-weight: 600; color: var(--cs-muted); }
.cs-av { width: 2rem; height: 2rem; border-radius: 999px; background: var(--c); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; flex-shrink: 0; }
.cs-x { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 0; background: transparent; color: var(--cs-muted); cursor: pointer; }
.cs-x:hover { background: rgba(239, 68, 68, .1); color: #ef4444; }

.cs-bar { display: flex; align-items: center; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .55rem .25rem .1rem; margin-top: .5rem; }
.cs-bar::-webkit-scrollbar { display: none; }
.cs-bar-t { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--cs-muted); flex-shrink: 0; }
.cs-chip-tg { flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; padding: .3rem .65rem; border-radius: 999px; border: 1.5px solid var(--c); background: var(--cs-card); color: var(--cs-ink); cursor: pointer; min-height: 30px; }
.cs-chip-tg .cs-dot { width: .55rem; height: .55rem; border-radius: 999px; background: var(--c); }
.cs-chip-tg.off { border-color: var(--cs-line); color: var(--cs-muted); text-decoration: line-through; }
.cs-chip-tg.off .cs-dot { background: var(--cs-vazio); }
.cs-leg { flex-shrink: 0; display: inline-flex; align-items: center; gap: .3rem; font-size: .64rem; font-weight: 600; color: var(--cs-muted); margin-left: auto; padding-left: .5rem; }

.cs-ov { position: absolute; left: .25rem; bottom: .25rem; display: flex; gap: 2px; flex-wrap: wrap; max-width: calc(100% - 1.8rem); pointer-events: none; }
.cs-mini { width: 15px; height: 15px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; box-sizing: border-box; }
.cs-mini.com { background: var(--c); color: #fff; }
.cs-mini.sem { background: var(--cs-card); color: var(--c); border: 2px solid var(--c); }
/* troca: linha horizontal como a main (.bg-troca); cheio = com filhos, vazio = sem; em cima
   quem tinha os filhos antes, embaixo quem fica; a linha na altura do momento (--corte) */
.cs-mini.troca { background: linear-gradient(to bottom, var(--c) 0 var(--corte, 50%), var(--cs-card) var(--corte, 50%) 100%); border: 2px solid var(--c); }
.cs-mini.troca.de-sem { background: linear-gradient(to bottom, var(--cs-card) 0 var(--corte, 50%), var(--c) var(--corte, 50%) 100%); }
.cs-mini.lbl { outline: 1.5px dotted var(--c); outline-offset: 1px; }
.cs-per { display: inline-flex; gap: .35rem; flex-shrink: 0; }
.cs-per-i { flex-shrink: 0; display: inline-flex; align-items: center; gap: .25rem; font-size: .66rem; font-weight: 700; color: var(--cs-ink); background: rgba(129, 140, 248, .12); border-left: 3px solid var(--c); border-radius: .4rem; padding: .2rem .45rem; white-space: nowrap; }
.cs-per-i small { color: var(--cs-muted); font-weight: 600; }
.cs-mini.nd { background: var(--cs-card); border: 2px dashed var(--c); color: var(--c); }
.cs-mini.ev { box-shadow: 0 0 0 1.5px var(--cs-card), 0 0 0 3px var(--c); }
.cs-mais { font-size: 9px; font-weight: 800; color: var(--cs-muted); align-self: center; }
@media (min-width: 640px) { .cs-ov { left: .5rem; bottom: .5rem; gap: 3px; } .cs-mini { width: 18px; height: 18px; font-size: 10px; } }

/* ---------- 3. imagem / folhas modais (reusadas pelo grupo) ---------- */
.cs-modal { position: fixed; inset: 0; z-index: 115; display: flex; align-items: flex-end; justify-content: center; }
.cs-modal.hidden { display: none; }
.cs-modal-ov { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px); }
.cs-sheet { position: relative; background: var(--cs-card); color: var(--cs-ink); width: 100%; max-width: 34rem; max-height: 92vh; overflow-y: auto; border-radius: 1.5rem 1.5rem 0 0; padding: 1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .8rem; box-shadow: 0 -10px 40px rgba(15, 23, 42, .2); }
.cs-sheet > * { flex-shrink: 0; }
@media (min-width: 640px) { .cs-modal { align-items: center; } .cs-sheet { border-radius: 1.5rem; padding: 1.4rem; } }
.cs-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.cs-sheet-head h3 { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.cs-eyebrow { margin: 0 0 .1rem; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--cs-muted); }
.cs-img-ctrl { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.cs-img-nav { display: inline-flex; align-items: center; gap: .2rem; font-size: .85rem; font-weight: 800; }
.cs-img-nav span { min-width: 8.5rem; text-align: center; }
.cs-img-opts { display: flex; flex-direction: column; gap: .35rem; font-size: .8rem; font-weight: 600; }
.cs-img-opts label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.cs-img-opts input { width: 1.05rem; height: 1.05rem; accent-color: #4f46e5; }
.cs-img-prev { background: var(--cs-vazio); border-radius: 1rem; padding: .6rem; min-height: 10rem; display: flex; align-items: center; justify-content: center; position: relative; }
.cs-img-prev img { width: 100%; height: auto; border-radius: .6rem; display: block; box-shadow: 0 4px 14px rgba(15, 23, 42, .12); }
.cs-img-prev img:not([src]) { display: none; }
.cs-img-prev .cs-hint { position: absolute; top: .8rem; left: 50%; transform: translateX(-50%); background: var(--cs-card); padding: .25rem .6rem; border-radius: 999px; }
.cs-sheet-foot { display: flex; gap: .5rem; justify-content: flex-end; }
.cs-sheet-foot .cs-btn { min-height: 42px; padding: .5rem 1rem; font-size: .8rem; }
.cs-btn-zap { background: #16a34a; border-color: #16a34a; color: #fff; }
.cs-btn-zap:hover { background: #15803d; }
body.dark-theme .cs-btn-zap { background: #16a34a; color: #fff; }
.cs-center { text-align: center; }

/* ---------- 4. grupo: "Quem está livre" ---------- */
.gq-sheet { max-width: 52rem; gap: .9rem; }
@media (max-width: 639px) { .gq-sheet { max-height: 96vh; } }
.gq-tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.gq-nav { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.gq-nav-t { border: 0; background: transparent; font: inherit; font-weight: 800; font-size: .95rem; color: var(--cs-ink); padding: .3rem .6rem; border-radius: .6rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.gq-nav-t:hover { background: rgba(148, 163, 184, .15); }
.gq-erro { margin: 0; font-size: .8rem; font-weight: 600; color: #b91c1c; background: #fef2f2; border-radius: .7rem; padding: .5rem .7rem; }
body.dark-theme .gq-erro { background: rgba(185, 28, 28, .18); color: #fca5a5; }

/* destaque do fim de semana */
.gq-dest { display: flex; flex-direction: column; gap: .35rem; }
.gq-dest-l { display: flex; align-items: baseline; gap: .55rem; text-align: left; border: 0; cursor: pointer; font: inherit; color: #065f46; background: linear-gradient(90deg, #d1fae5, #ecfdf5 70%); border-radius: 1rem; padding: .7rem .9rem; }
body.dark-theme .gq-dest-l { color: #a7f3d0; background: linear-gradient(90deg, rgba(16, 185, 129, .3), rgba(16, 185, 129, .1)); }
.gq-dest-d { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.gq-dest-n { font-weight: 600; font-size: .88rem; }
.gq-dest-0 { flex-direction: row; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: var(--cs-muted); background: rgba(148, 163, 184, .12); border-radius: 1rem; padding: .65rem .9rem; }

/* quadro */
.gq-board-wrap { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; border-radius: 1rem; border: 1px solid var(--cs-line); transition: opacity .2s; }
.gq-load { opacity: .55; }
.gq-loading { padding: 2rem; text-align: center; }
.gq-board { display: grid; grid-template-columns: 6.6rem repeat(7, minmax(3.3rem, 1fr)); gap: 4px; padding: 6px; min-width: min-content; }
@media (max-width: 639px) { .gq-board { grid-template-columns: 5.6rem repeat(7, 3.6rem); } }
.gq-canto, .gq-nome { position: sticky; left: 0; z-index: 2; background: var(--cs-card); }
.gq-canto { grid-row: 1; grid-column: 1; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--cs-muted); display: flex; align-items: flex-end; padding: 0 .3rem .3rem; }
.gq-nome { grid-column: 1; display: flex; align-items: center; gap: .45rem; padding-right: .3rem; box-shadow: 6px 0 8px -6px rgba(15, 23, 42, .15); }
.gq-nome .cs-av { width: 1.9rem; height: 1.9rem; font-size: .8rem; }
.gq-nome-t { font-size: .8rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; }
.gq-nome-t small { display: block; font-size: .6rem; font-weight: 600; color: var(--cs-muted); }
.gq-dcab { grid-row: 1; text-align: center; scroll-snap-align: start; scroll-margin-left: 6.6rem; padding: .2rem 0 .3rem; display: flex; flex-direction: column; line-height: 1.1; color: var(--cs-muted); border-radius: .6rem; }
@media (max-width: 639px) { .gq-dcab { scroll-margin-left: 5.6rem; } }
.gq-dcab span { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.gq-dcab b { font-size: 1rem; font-weight: 800; color: var(--cs-ink); font-variant-numeric: tabular-nums; }
.gq-dcab.gq-fds span { color: #4f46e5; }
.gq-dcab.gq-hoje { background: #eef2ff; }
body.dark-theme .gq-dcab.gq-hoje { background: rgba(99, 102, 241, .2); }
.gq-cell { position: relative; border-radius: .7rem; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: transform .12s ease; }
.gq-cell:hover { transform: scale(1.04); }
.gq-cell:active { transform: scale(.97); }
.gq-sem { background: var(--cs-livre); color: #fff; }
.gq-com { background: var(--cs-com); color: #fff; }
/* troca: linha horizontal como a main (.bg-troca): de quem vem (em cima) para quem fica
   (embaixo), com a linha branca na altura do momento (--corte: 20% manhã, 50% tarde, 80% noite) */
.gq-troca { 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%); color: #fff; }
.gq-troca.gq-de-sem { 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%); }
/* dia dentro de período especial: cantinho dobrado; o rótulo aparece no detalhe */
.gq-lbl::before { content: ''; position: absolute; left: 0; bottom: 0; border-style: solid; border-width: 0 0 11px 11px; border-color: transparent transparent rgba(255, 255, 255, .85) transparent; border-bottom-left-radius: .7rem; }
.gq-nd.gq-lbl::before { border-color: transparent transparent #818cf8 transparent; }
.gq-det-p { margin: .15rem 0 0; font-size: .75rem; font-weight: 700; color: #4338ca; display: flex; align-items: center; gap: .25rem; }
body.dark-theme .gq-det-p { color: #a5b4fc; }
.gq-nd { background: repeating-linear-gradient(to bottom, var(--cs-vazio) 0 4px, transparent 4px 8px); border: 1px solid var(--cs-line); }
.gq-cell.gq-hoje { box-shadow: 0 0 0 2px var(--cs-card), 0 0 0 4px #6366f1; }
.gq-cell.gq-sel { box-shadow: 0 0 0 2px var(--cs-card), 0 0 0 4px var(--cs-ink); }
.gq-ev { position: absolute; top: 3px; right: 4px; font-size: .58rem; font-weight: 800; background: rgba(255, 255, 255, .92); color: #1e293b; border-radius: 999px; min-width: 1rem; height: 1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 .2rem; }
@media (prefers-reduced-motion: reduce) { .gq-cell, .gq-board-wrap { transition: none; scroll-behavior: auto; } }

.gq-leg { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .68rem; font-weight: 700; color: var(--cs-muted); }
.gq-leg span { display: inline-flex; align-items: center; gap: .35rem; }
.gq-sw { width: .9rem; height: .9rem; border-radius: .3rem; display: inline-block; }
.gq-detbox { min-height: 3.6rem; }
.gq-dica { display: flex; align-items: center; gap: .3rem; }
.gq-det { display: flex; gap: .7rem; align-items: flex-start; background: rgba(148, 163, 184, .1); border-radius: 1rem; padding: .7rem .8rem; }
.gq-det-ic { font-size: 1.6rem; color: var(--cs-livre); }
.gq-det-t { margin: 0; font-weight: 800; font-size: .9rem; }
.gq-det-s { margin: .1rem 0 0; font-weight: 700; font-size: .8rem; }
.gq-t-sem { color: #059669; } .gq-t-com { color: #7c3aed; } .gq-t-troca { color: #9333ea; } .gq-t-nd { color: var(--cs-muted); }
body.dark-theme .gq-t-sem { color: #6ee7b7; } body.dark-theme .gq-t-com { color: #c4b5fd; }
.gq-det ul { margin: .35rem 0 0; padding-left: 1rem; font-size: .8rem; }

.gq-mais { border-top: 1px solid var(--cs-line); padding-top: .6rem; }
.gq-mais summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--cs-muted); display: flex; align-items: center; gap: .35rem; list-style: none; min-height: 32px; }
.gq-mais summary::-webkit-details-marker { display: none; }
.gq-mais-c { display: flex; flex-direction: column; gap: .5rem; padding-top: .5rem; }
.gq-sub { margin: .4rem 0 0; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--cs-muted); }
.gq-tg { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; cursor: pointer; }
.gq-tg input { width: 1.05rem; height: 1.05rem; accent-color: #10b981; }
.gq-conv { display: flex; gap: .4rem; }
.gq-conv input { flex: 1; min-width: 0; border: 1px solid var(--cs-line); border-radius: .6rem; padding: .35rem .5rem; font-family: ui-monospace, monospace; font-size: .7rem; background: var(--cs-card); color: var(--cs-ink); }
.gq-link { align-self: flex-start; border: 0; background: transparent; font: inherit; font-size: .75rem; font-weight: 700; color: #4f46e5; cursor: pointer; padding: .2rem 0; text-decoration: underline; text-underline-offset: 2px; }
.gq-perigo { color: #dc2626; }
.gq-membros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.gq-membros li { display: flex; align-items: center; gap: .55rem; font-size: .82rem; font-weight: 600; }
.gq-membros li > span:nth-child(2) { flex: 1; }
.gq-membros small { font-size: .6rem; font-weight: 800; text-transform: uppercase; color: #059669; letter-spacing: .08em; }
.gq-membros .cs-av { width: 1.7rem; height: 1.7rem; font-size: .75rem; }
.gq-criar { display: flex; gap: .4rem; width: 100%; }
.gq-criar input { flex: 1; min-width: 0; border: 1px solid var(--cs-line); border-radius: .7rem; padding: .5rem .7rem; font: inherit; font-size: .85rem; background: var(--cs-card); color: var(--cs-ink); }
.gq-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; padding: 1rem .5rem 1.5rem; }
.gq-vazio > i { font-size: 2.6rem; color: var(--cs-livre); }
.gq-vazio p { margin: 0; font-size: .88rem; line-height: 1.45; max-width: 28rem; }
.gq-acoes { display: flex; gap: .5rem; }

/* Limite de imagens (imagens.js): aviso calmo, sem vermelho */
.cs-img-aviso { margin: 0; padding: .6rem .8rem; border-radius: .8rem; background: #eef2ff; border: 1px solid #c7d2fe; color: #312e81; font-size: .8rem; font-weight: 700; text-align: center; }
.cs-img-aviso.hidden { display: none; }
body.dark-theme .cs-img-aviso { background: #1e1b4b; border-color: #3730a3; color: #e0e7ff; }