/* ===========================================================
   Central JOTA-JOTI — GE Brownsea 113/SC
   Complementa chefes.css (mesma identidade visual do painel).
   =========================================================== */

[hidden] { display: none !important; }

.jj-area { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }

/* entrada */
.jj-ou { display: flex; align-items: center; gap: 0.8em; margin: 1.4em 0; color: var(--dim); font-size: 0.75em; text-transform: uppercase; letter-spacing: 2px; }
.jj-ou::before, .jj-ou::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.jj-btn-chefia { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.6em; padding: 0.85em; }

.chefia-user a { color: var(--dim); }
.chefia-user a:hover { color: var(--gold); }

.jj-dica { color: rgba(255, 255, 255, 0.75); font-size: 0.85em; line-height: 1.6; padding: 1.1em 1.4em; }
.jj-dica strong { color: var(--gold); }
.jj-dica em { color: white; font-style: normal; font-weight: 700; }

.jj-filtros { display: flex; gap: 0.5em; overflow-x: auto; padding-bottom: 2px; margin: 0.4em 0 1em; }
.jj-filtros .painel-tab { padding: 0.55em 1em; font-size: 0.76em; }

.jj-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.5em; height: 1.5em; padding: 0 0.4em;
    background: var(--red); color: white; border-radius: 999px; font-size: 0.8em;
}

/* ---------- lista de tarefas ---------- */
.jj-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9em; }

.jj-tarefa {
    display: flex; flex-direction: column; gap: 0.5em;
    text-align: left;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--linha);
    border-left: 4px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 1em 1.1em;
    color: white;
    font-family: var(--fn);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.jj-tarefa:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-2px); }
.jj-tarefa h3 { font-size: 0.98em; font-weight: 800; line-height: 1.3; }
.jj-tarefa-desc {
    font-size: 0.8em; color: rgba(255, 255, 255, 0.6); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jj-tarefa-meta { display: flex; flex-wrap: wrap; gap: 0.4em 0.9em; font-size: 0.74em; color: var(--dim); margin-top: auto; }
.jj-tarefa-meta i { margin-right: 0.25em; }

/* cores por status */
.jj-pill {
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.3em 0.75em; border-radius: 999px;
    font-size: 0.7em; font-weight: 700; letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.1); color: white;
}
.st-aberta    { --st: #9fb3d9; }
.st-andamento { --st: #5aa9ff; }
.st-enviada   { --st: #f2c94c; }
.st-ajustar   { --st: #ff8a65; }
.st-aprovada  { --st: #6fe89a; }
.st-publicada { --st: #c39bff; }
.jj-pill[class*="st-"] { background: color-mix(in srgb, var(--st) 18%, transparent); color: var(--st); border: 1px solid color-mix(in srgb, var(--st) 40%, transparent); }

.st-borda-aberta    { border-left-color: #9fb3d9; }
.st-borda-andamento { border-left-color: #5aa9ff; }
.st-borda-enviada   { border-left-color: #f2c94c; }
.st-borda-ajustar   { border-left-color: #ff8a65; }
.st-borda-aprovada  { border-left-color: #6fe89a; }
.st-borda-publicada { border-left-color: #c39bff; }

/* chefia: tarefa enviada pelos jovens esperando revisão */
.jj-tarefa-revisar {
    border-color: rgba(242, 201, 76, 0.55);
    background: rgba(242, 201, 76, 0.08);
    animation: jjRevisar 2.2s ease-in-out infinite;
}
.jj-tarefa-revisar:hover { background: rgba(242, 201, 76, 0.14); }
.jj-tarefa-revisar .jj-pill { background: #f2c94c; color: #1a1a2e; border-color: #f2c94c; }
@keyframes jjRevisar {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 201, 76, 0); }
    50%      { box-shadow: 0 0 18px 2px rgba(242, 201, 76, 0.45); }
}

/* ---------- modal de detalhe ---------- */
.jj-detalhe {
    width: min(640px, calc(100% - 1.5em));
    max-height: calc(100vh - 2em);
    margin: auto;
    padding: 0;
    background: var(--navy2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    font-family: var(--fn);
}
.jj-detalhe::backdrop { background: rgba(5, 10, 25, 0.7); backdrop-filter: blur(4px); }
.jj-detalhe[open] { animation: fadeUp 0.25s ease both; }
.jj-detalhe-corpo { padding: 1.4em 1.5em 1.6em; }

.jj-detalhe-topo { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1em; }
.jj-ramo-tag { font-size: 0.75em; color: var(--dim); margin-left: 0.4em; }
.jj-fechar {
    width: 36px; height: 36px; flex: none;
    background: rgba(255, 255, 255, 0.07); color: white;
    border: 1px solid var(--linha); border-radius: 10px; cursor: pointer;
}
.jj-fechar:hover { background: rgba(255, 255, 255, 0.14); }

.jj-detalhe-titulo { font-size: 1.25em; font-weight: 800; line-height: 1.3; margin-bottom: 0.4em; }
.jj-detalhe-desc { color: rgba(255, 255, 255, 0.75); font-size: 0.88em; line-height: 1.6; margin-bottom: 0.6em; white-space: pre-wrap; }
.jj-detalhe-meta { color: var(--dim); font-size: 0.78em; margin-bottom: 1.2em; }
.jj-com { font-size: 0.85em; color: rgba(255, 255, 255, 0.75); margin-bottom: 1.1em; }
.jj-com strong { color: var(--gold); }

.jj-bloco { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--linha); border-radius: 12px; padding: 1.1em; }
.jj-bloco-txt { font-size: 0.88em; margin-bottom: 1em; color: rgba(255, 255, 255, 0.8); }

.jj-obs {
    background: rgba(255, 138, 101, 0.12);
    border: 1px solid rgba(255, 138, 101, 0.35);
    border-radius: 10px;
    padding: 0.8em 1em;
    font-size: 0.84em; line-height: 1.5;
    margin-bottom: 1.1em;
    white-space: pre-wrap;
}
.jj-obs-ok { background: rgba(111, 232, 154, 0.12); border-color: rgba(111, 232, 154, 0.35); }
.jj-obs-info { background: rgba(242, 201, 76, 0.1); border-color: rgba(242, 201, 76, 0.35); }

.jj-leitura {
    background: rgba(0, 0, 0, 0.18); border-radius: 10px; padding: 0.8em 1em; margin-bottom: 1em;
    font-size: 0.86em; line-height: 1.55; color: rgba(255, 255, 255, 0.85); white-space: pre-wrap;
}
.jj-leitura em { color: var(--dim); }
.jj-vazio-jovens { margin: .2em 0 1em; font-size: .9em; color: var(--dim); }
.jj-link-atribuir { background: none; border: 0; padding: 0; color: var(--amarelo, #f2c94c); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- mídias e upload ---------- */
.jj-upload { margin: 0.4em 0 0.6em; }
.jj-midias .lista-titulo { margin-top: 0.4em; }
.jj-midias-lista { list-style: none; display: flex; flex-direction: column; gap: 0.4em; margin-bottom: 1em; }
.jj-midias-lista li {
    display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 0.55em 0.8em; font-size: 0.82em;
}
.jj-midia-nome { color: white; text-decoration: none; word-break: break-all; flex: 1 1 auto; min-width: 0; }
a.jj-midia-nome:hover { color: var(--gold); text-decoration: underline; }
.jj-midia-nome i { color: var(--gold); margin-right: 0.3em; }
.jj-midia-info { color: var(--dim); font-size: 0.9em; }
.jj-midia-remover { background: none; border: none; color: #ff8a80; cursor: pointer; padding: 0.2em 0.4em; }

.jj-btn-upload {
    width: 100%;
    padding: 1em;
    background: rgba(90, 169, 255, 0.1);
    color: #9ccaff;
    border: 2px dashed rgba(90, 169, 255, 0.45);
    border-radius: 12px;
    font-family: var(--fn); font-size: 0.9em; font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}
.jj-btn-upload:hover { background: rgba(90, 169, 255, 0.18); }
.jj-btn-upload:disabled { opacity: 0.6; cursor: wait; }
.jj-upload-dica { font-size: 0.72em; color: var(--dim); margin: 0.5em 0 0.8em; text-align: center; }

/* ---------- abas do detalhe (chefia) ---------- */
.jj-detalhe-abas { margin-bottom: 1.2em; }
.jj-detalhe-aba[hidden] { display: none; }

/* ---------- versão final (pública), só chefia ---------- */
.jj-publicacao {
    margin: 0 0 1.2em; padding: 1.1em;
    background: rgba(195, 155, 255, 0.07);
    border: 1px solid rgba(195, 155, 255, 0.35);
    border-radius: 14px;
}
.jj-publicacao-titulo { font-size: 1em; font-weight: 800; margin-bottom: 0.3em; color: #d9c4ff; }
.jj-publicacao-dica { font-size: 0.8em; color: rgba(255, 255, 255, 0.7); line-height: 1.5; margin-bottom: 1em; }
.jj-btn-upload-final { background: rgba(195, 155, 255, 0.1); color: #d9c4ff; border-color: rgba(195, 155, 255, 0.45); }
.jj-btn-upload-final:hover { background: rgba(195, 155, 255, 0.18); }
.jj-link-publico { display: flex; flex-direction: column; gap: 0.6em; margin-top: 0.4em; }
.jj-link-linha { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
.jj-link-url {
    flex: 1 1 14em; min-width: 0;
    background: rgba(0, 0, 0, 0.25); border-radius: 8px; padding: 0.6em 0.8em;
    font-size: 0.78em; color: #d9c4ff; word-break: break-all;
}
.jj-link-gerar { align-self: flex-start; }
.jj-link-atualizar {
    align-self: flex-start;
    background: none; border: none; color: var(--dim); cursor: pointer;
    font-family: var(--fn); font-size: 0.75em; text-decoration: underline;
}
.jj-link-atualizar:hover { color: white; }
.jj-passo-pub .jj-obs { margin-bottom: 0; }
.jj-passo-dica { font-size: 0.8em; color: var(--dim); text-align: center; }
.jj-marcar-pub { width: 100%; justify-content: center; }

.jj-fila { display: flex; flex-direction: column; gap: 0.5em; }
.jj-fila-item { display: grid; grid-template-columns: 1fr auto; gap: 0.3em 0.8em; font-size: 0.78em; background: rgba(0, 0, 0, 0.2); border-radius: 8px; padding: 0.6em 0.8em; }
.jj-fila-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jj-fila-pct { color: var(--dim); font-weight: 700; }
.jj-fila-item.ok .jj-fila-pct { color: #6fe89a; }
.jj-fila-item.erro .jj-fila-pct { color: #ff8a80; }
.jj-barra { grid-column: 1 / -1; height: 5px; background: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden; }
.jj-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5aa9ff, #6fe89a); transition: width 0.3s ease; }

/* ---------- botões extras ---------- */
a.btn-add { text-decoration: none; }
.jj-btn-largar {
    padding: 0.6em 1em;
    background: transparent; color: #ff8a80;
    border: 1px solid rgba(192, 57, 43, 0.4); border-radius: 10px;
    font-family: var(--fn); font-size: 0.78em; font-weight: 700; cursor: pointer;
}
.jj-btn-largar:hover { background: rgba(192, 57, 43, 0.2); }
.btn-add.jj-ok { color: #6fe89a; border-color: rgba(111, 232, 154, 0.45); background: rgba(111, 232, 154, 0.1); }
.btn-add.jj-ajustar { color: #ff8a65; border-color: rgba(255, 138, 101, 0.45); background: rgba(255, 138, 101, 0.1); }
.btn-add.jj-pub { color: #c39bff; border-color: rgba(195, 155, 255, 0.45); background: rgba(195, 155, 255, 0.1); }
.jj-acoes-chefia { gap: 0.6em; }

/* ---------- chefia: código e visão geral ---------- */
.jj-codigo {
    font-size: 1.8em; font-weight: 800; letter-spacing: 4px; color: var(--gold);
    background: rgba(0, 0, 0, 0.25); border: 1px dashed rgba(242, 201, 76, 0.4); border-radius: 12px;
    padding: 0.4em 0.6em; text-align: center; user-select: all; word-break: break-all;
}
button.jj-codigo { width: 100%; font-family: var(--fn); cursor: copy; transition: background 0.2s ease; }
button.jj-codigo:hover { background: rgba(242, 201, 76, 0.12); }

.jj-progresso { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden; margin: 0.8em 0 0.5em; }
.jj-progresso i { display: block; height: 100%; background: linear-gradient(90deg, var(--verde), #6fe89a); }
.jj-contagem { display: flex; flex-wrap: wrap; gap: 0.35em; margin-bottom: 1em; }

/* ---------- popup do recado (abre por cima do detalhe) ---------- */
.jj-popup {
    width: min(460px, calc(100% - 2em));
    margin: auto;
    padding: 0;
    background: var(--navy);
    color: white;
    border: 1px solid rgba(255, 138, 101, 0.45);
    border-radius: 16px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7);
    font-family: var(--fn);
}
.jj-popup::backdrop { background: rgba(5, 10, 25, 0.6); }
.jj-popup[open] { animation: fadeUp 0.2s ease both; }
.jj-popup-corpo { padding: 1.3em 1.3em 1.2em; }
.jj-popup h3 { font-size: 1.05em; font-weight: 800; margin-bottom: 0.4em; }
.jj-popup-texto { font-size: 0.8em; color: var(--dim); line-height: 1.5; margin-bottom: 1em; }
.jj-popup .campo { margin-bottom: 0.4em; }
.jj-popup-erro { color: #ff8a80; font-size: 0.78em; min-height: 1.2em; }
.jj-popup-acoes { display: flex; justify-content: flex-end; gap: 0.6em; flex-wrap: wrap; margin-top: 0.6em; }
.jj-popup-acoes .btn-salvar { padding: 0.75em 1.3em; }

.jj-recado-chefia { position: relative; padding-right: 6.5em; }
.jj-recado-editar {
    position: absolute; top: 0.6em; right: 0.6em;
    background: rgba(242, 201, 76, 0.1); color: var(--gold);
    border: 1px solid rgba(242, 201, 76, 0.35); border-radius: 8px;
    padding: 0.35em 0.7em; font-family: var(--fn); font-size: 0.75em; font-weight: 700; cursor: pointer;
}
.jj-recado-editar:hover { background: rgba(242, 201, 76, 0.2); }

.jj-tarefa-recado {
    font-size: 0.76em; font-weight: 700; color: #ff8a65;
    background: rgba(255, 138, 101, 0.12); border-radius: 8px; padding: 0.4em 0.6em;
}

/* ===========================================================
   VISÃO GERAL / PAINEL AO VIVO + MODO TV
   =========================================================== */
.jj-dim { color: var(--dim); }

.jj-dash { display: flex; flex-direction: column; gap: 1.1em; }

.jj-dash-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap;
    background: linear-gradient(120deg, rgba(30, 77, 183, 0.35), rgba(155, 28, 28, 0.3));
    border: 1px solid var(--linha); border-radius: 18px; padding: 1.1em 1.4em; color: white;
}
.jj-dash-marca h2 { font-size: 1.6em; font-weight: 800; letter-spacing: 0.5px; line-height: 1.1; margin: 0.15em 0; }
.jj-dash-marca p { font-size: 0.78em; color: rgba(255, 255, 255, 0.65); }
.jj-aovivo {
    display: inline-flex; align-items: center; gap: 0.45em;
    font-size: 0.66em; font-weight: 800; letter-spacing: 2px; color: #ff8a80;
    background: rgba(208, 59, 59, 0.18); border: 1px solid rgba(208, 59, 59, 0.45);
    border-radius: 999px; padding: 0.25em 0.75em;
}
.jj-aovivo i { width: 0.6em; height: 0.6em; border-radius: 50%; background: #e34948; animation: jjPulso 1.4s ease-in-out infinite; }
@keyframes jjPulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

.jj-dash-relogio { text-align: center; margin-left: auto; }
.jj-dash-relogio strong { display: block; font-size: 2.4em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.jj-dash-relogio span { font-size: 0.78em; color: var(--gold); font-weight: 700; }
.jj-dash-botoes { display: flex; gap: 0.5em; flex-wrap: wrap; }
.jj-dash-botoes .btn-salvar { padding: 0.75em 1.3em; }

/* números grandes */
.jj-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.9em; }
.jj-kpi {
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--linha); border-radius: 16px;
    padding: 1em 1.1em; color: white; display: flex; flex-direction: column; gap: 0.2em;
}
.jj-kpi-label { font-size: 0.74em; font-weight: 700; color: rgba(255, 255, 255, 0.7); }
.jj-kpi-valor { font-size: 2.6em; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.jj-kpi small { font-size: 0.72em; color: var(--dim); }
.jj-kpi-destaque { border-color: rgba(242, 201, 76, 0.55); background: rgba(242, 201, 76, 0.08); }
.jj-kpi-destaque .jj-kpi-valor { color: var(--gold); }

.jj-dash-pendentes { margin-bottom: 0; border-color: rgba(242, 201, 76, 0.4); }

/* ramos */
.jj-dash-ramos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1em; }
.jj-dash-ramo, .jj-dash-card {
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--linha); border-radius: 18px;
    padding: 1.2em 1.3em; color: white;
}
.jj-dash-ramo-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8em; margin-bottom: 0.8em; }
.jj-dash-ramo h3, .jj-dash-card h3 { font-size: 1.15em; font-weight: 800; }
.jj-dash-pct { text-align: right; }
.jj-dash-pct strong { display: block; font-size: 2.2em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.jj-dash-pct small { font-size: 0.72em; color: var(--dim); }

.jj-barra-ramo {
    display: flex; gap: 2px; height: 16px; border-radius: 999px; overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}
.jj-barra-ramo i { display: block; height: 100%; min-width: 4px; transition: width 0.6s ease; }
.jj-barra-ramo i:first-child { border-radius: 999px 0 0 999px; }
.jj-legenda { display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; margin: 0.6em 0 0.2em; font-size: 0.72em; color: rgba(255, 255, 255, 0.75); }
.jj-legenda span { display: inline-flex; align-items: center; gap: 0.35em; }
.jj-legenda b { width: 0.75em; height: 0.75em; border-radius: 3px; display: inline-block; }
.jj-legenda strong { color: white; }

.jj-dash-ramo h4 { font-size: 0.7em; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin: 1em 0 0.5em; }
.jj-agora { list-style: none; display: flex; flex-direction: column; gap: 0.4em; margin-bottom: 0.8em; }
.jj-agora li { font-size: 0.82em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.5em; }
.jj-agora li span { font-weight: 700; }
.jj-agora li small { color: var(--dim); }

/* placar + feed */
.jj-dash-baixo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1em; }
.jj-dash-card h3 { margin-bottom: 0.8em; }

.jj-placar { list-style: none; display: flex; flex-direction: column; gap: 0.55em; }
.jj-placar li { display: grid; grid-template-columns: 2.2em minmax(6em, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 0.6em; font-size: 0.88em; }
.jj-placar-pos { font-size: 1.15em; text-align: center; font-weight: 800; color: var(--dim); }
.jj-placar-nome { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jj-placar-barra { height: 10px; background: rgba(255, 255, 255, 0.07); border-radius: 999px; overflow: hidden; }
.jj-placar-barra i { display: block; height: 100%; background: var(--gold); border-radius: 0 999px 999px 0; transition: width 0.6s ease; }
.jj-placar-pts { font-variant-numeric: tabular-nums; }
.jj-placar-regra { font-size: 0.7em; color: var(--dim); margin-top: 0.9em; }

.jj-feed { list-style: none; display: flex; flex-direction: column; }
.jj-feed li { display: grid; grid-template-columns: 1.8em minmax(0, 1fr) auto; gap: 0.6em; align-items: baseline; padding: 0.5em 0; border-bottom: 1px solid var(--linha); font-size: 0.84em; }
.jj-feed li:last-child { border-bottom: none; }
.jj-feed-ic { font-size: 1.1em; }
.jj-feed-txt em { font-style: normal; color: var(--gold); font-weight: 700; }
.jj-feed-txt small { color: var(--dim); margin-left: 0.3em; white-space: nowrap; }
.jj-feed time { color: var(--dim); font-size: 0.85em; white-space: nowrap; }
.jj-feed-novo { animation: jjNovo 2.5s ease; border-radius: 8px; }
@keyframes jjNovo { 0% { background: rgba(242, 201, 76, 0.35); } 100% { background: transparent; } }

/* anúncio grande (modo TV) */
.jj-anuncio {
    position: fixed; left: 50%; bottom: 2.5vh; transform: translateX(-50%);
    z-index: 50; display: flex; align-items: center; gap: 0.8em;
    max-width: min(90vw, 1100px);
    background: linear-gradient(135deg, #16264a, #1e3a6e); color: white;
    border: 2px solid var(--gold); border-radius: 20px; padding: 0.9em 1.5em;
    font-family: var(--fn); font-size: clamp(16px, 1.6vw, 34px); font-weight: 600;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: jjAnuncio 0.5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.jj-anuncio em { font-style: normal; color: var(--gold); font-weight: 800; }
.jj-anuncio small { color: var(--dim); font-size: 0.7em; }
.jj-anuncio-ic { font-size: 1.6em; }
.jj-anuncio.sai { transition: opacity 0.7s ease, transform 0.7s ease; opacity: 0; transform: translateX(-50%) translateY(30px); }
@keyframes jjAnuncio { from { opacity: 0; transform: translateX(-50%) translateY(40px) scale(0.9); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }

.jj-dash-rodape { text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 0.85em; }
.jj-dash-rodape strong { color: var(--gold); }

/* ---------- Modo TV: tela inteira, letras grandes ---------- */
body.jj-modo-tv { padding: 1.4vh 1.6vw; }
body.jj-modo-tv .btn-voltar,
body.jj-modo-tv #chefia > .painel-topo,
body.jj-modo-tv #chefia-tabs { display: none !important; }
body.jj-modo-tv #chefia.jj-area { max-width: none; }
.jj-dash-tv { font-size: clamp(13px, 0.95vw, 30px); gap: 1.4vh; height: calc(100vh - 2.8vh); }
.jj-dash-tv .jj-dash-baixo { flex: 1 1 auto; min-height: 0; }
.jj-dash-tv .jj-dash-card { overflow: hidden; min-height: 0; }
.jj-dash-tv .jj-dash-rodape { flex: none; }
.jj-dash-tv .jj-dash-topo { padding: 0.9em 1.4em; }
.jj-dash-tv .jj-dash-marca h2 { font-size: 2em; }
.jj-dash-tv .jj-dash-relogio strong { font-size: 3em; }
.jj-dash-tv .jj-dash-botoes { opacity: 0.25; transition: opacity 0.2s ease; }
.jj-dash-tv .jj-dash-botoes:hover { opacity: 1; }
.jj-dash-tv .jj-kpi-valor { font-size: 3.2em; }
.jj-dash-tv .jj-dash-ramos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jj-dash-tv .jj-barra-ramo { height: 22px; }

@media (max-width: 1000px) {
    .jj-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jj-dash-baixo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .jj-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jj-kpi-valor { font-size: 2em; }
    .jj-dash-relogio { margin-left: 0; text-align: left; }
    .jj-placar li { grid-template-columns: 2em minmax(0, 1fr) auto; }
    .jj-placar-barra { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .jj-aovivo i, .jj-feed-novo, .jj-anuncio, .jj-tarefa-revisar { animation: none !important; }
}

/* ---------- entrada em 2 passos + escolha da patrulha ---------- */
.jj-ramo-escolhido {
    display: flex; align-items: center; justify-content: space-between; gap: 1em;
    background: rgba(242, 201, 76, 0.1); border: 1px solid rgba(242, 201, 76, 0.4);
    border-radius: 12px; padding: 0.75em 1em; margin-bottom: 1.2em;
}
.jj-ramo-escolhido span { color: white; font-weight: 800; font-size: 1.05em; }
.jj-ramo-escolhido a { color: var(--dim); font-size: 0.75em; }
.jj-ramo-escolhido a:hover { color: var(--gold); }

.jj-chips { display: flex; flex-wrap: wrap; gap: 0.6em; }
.jj-chip {
    flex: 1 1 8em;
    padding: 0.85em 1em;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: white; font-family: var(--fn); font-size: 0.95em; font-weight: 700;
    cursor: pointer; text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.jj-chip:hover { border-color: rgba(242, 201, 76, 0.5); }
.jj-chip.ativo { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: scale(1.03); }
.jj-chip.ativo::before { content: "✔ "; }

/* versão editável (painel da chefia) */
.jj-chip-edit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.5em; cursor: default; padding: 0.5em 0.6em 0.5em 0.9em; font-size: 0.85em; }
.jj-chip-x { background: none; border: none; color: #ff8a80; cursor: pointer; font-size: 0.85em; padding: 0.1em 0.3em; }
.jj-add-linha { display: flex; gap: 0.5em; margin-top: 0.9em; }
.jj-add-linha input {
    flex: 1; min-width: 0;
    padding: 0.6em 0.8em; background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px;
    color: white; font-family: var(--fn); font-size: 0.85em; outline: none;
}
.jj-add-linha input:focus { border-color: var(--gold); }

/* ---------- instalar o app ---------- */
.jj-btn-instalar {
    width: 100%;
    display: flex; align-items: center; gap: 0.9em; text-align: left;
    margin: 1.1em 0 0;
    padding: 0.8em 1em;
    background: rgba(242, 201, 76, 0.1);
    border: 1px solid rgba(242, 201, 76, 0.45);
    border-radius: 14px;
    color: white; font-family: var(--fn); cursor: pointer;
    transition: background 0.2s ease;
}
.jj-btn-instalar:hover { background: rgba(242, 201, 76, 0.18); }
.jj-btn-instalar img { border-radius: 10px; flex: none; }
.jj-btn-instalar span { display: flex; flex-direction: column; gap: 0.15em; }
.jj-btn-instalar strong { font-size: 0.9em; color: var(--gold); }
.jj-btn-instalar small { font-size: 0.74em; color: rgba(255, 255, 255, 0.65); }
#jovem .jj-btn-instalar { margin: 0 0 1em; }
.jj-link-oficial { text-decoration: none; }
.jj-link-oficial-ic { font-size: 1.9em; line-height: 1; width: 36px; text-align: center; flex: none; }
.jj-link-oficial > i { margin-left: auto; font-size: 0.8em; opacity: 0.6; }
.jj-popup-instalar { border-color: rgba(242, 201, 76, 0.45); }
.jj-passos { margin: 0.4em 0 1em 1.2em; display: flex; flex-direction: column; gap: 0.6em; font-size: 0.88em; line-height: 1.5; }
.jj-passos strong { color: var(--gold); }
.jj-ic-share { display: inline-block; padding: 0 0.3em; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; font-size: 0.85em; }

/* aberto como app: sem "voltar ao site" (sairia do app) */
@media (display-mode: standalone) {
    .btn-voltar { display: none; }
    body { padding-top: max(1.5em, env(safe-area-inset-top)); }
}

/* ---------- botão fixo pro site oficial (só chefia, some no Modo TV) ---------- */
.jj-fab {
    position: fixed; right: 1.4em; bottom: 1.4em; z-index: 40;
    display: flex; align-items: center; gap: 0.8em;
    padding: 0.85em 1.3em 0.85em 1em;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: white; text-decoration: none; font-family: var(--fn);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(192, 57, 43, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.jj-fab:hover { transform: translateY(-3px); box-shadow: 0 14px 38px rgba(192, 57, 43, 0.6), 0 0 0 3px rgba(242, 201, 76, 0.5); }
.jj-fab-ic { font-size: 1.7em; line-height: 1; }
.jj-fab-txt { display: flex; flex-direction: column; line-height: 1.2; }
.jj-fab-txt strong { font-size: 0.92em; font-weight: 800; letter-spacing: 0.3px; }
.jj-fab-txt small { font-size: 0.72em; opacity: 0.8; }
.jj-fab > i { font-size: 0.8em; opacity: 0.8; }
body.jj-modo-tv .jj-fab { display: none; }
#chefia { padding-bottom: 5em; } /* espaço pro botão não cobrir o fim da lista */
@media (max-width: 560px) {
    .jj-fab { right: 0.8em; bottom: 0.8em; padding: 0.7em 1em 0.7em 0.8em; }
    .jj-fab-txt small, .jj-fab > i { display: none; }
}

/* ---------- QR code (Modo TV, embaixo do placar) ---------- */
.jj-ramo-linha { display: flex; gap: 1.2em; align-items: flex-start; }
.jj-ramo-corpo { flex: 1 1 auto; min-width: 0; }
.jj-dash-tv .jj-dash-card { display: flex; flex-direction: column; }
.jj-qr-placar {
    margin-top: auto; padding-top: 1em;
    display: flex; align-items: center; gap: 1.2em;
}
.jj-qr-img {
    width: 8.5em; height: 8.5em; padding: 0.5em;
    background: #ffffff; border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.55);
}
.jj-qr-img svg { display: block; width: 100%; height: 100%; }
.jj-qr-placar .jj-qr-img { flex: none; width: 7.2em; height: 7.2em; padding: 0.4em; }
.jj-qr-txt { display: flex; flex-direction: column; gap: 0.35em; }
.jj-qr-txt strong { font-size: 1.1em; color: var(--gold); }
.jj-qr-txt span { font-size: 0.82em; color: rgba(255, 255, 255, 0.8); line-height: 1.45; }
.jj-qr-txt small { font-size: 0.78em; color: var(--dim); }

/* ---------- chefia: jovens que entraram ---------- */
.jj-jovens { margin-top: 2em; padding-top: 1.4em; border-top: 1px solid var(--linha); }
.jj-jovens-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em 1.2em; flex-wrap: wrap; margin-bottom: 0.8em; }
.jj-jovens-topo h2 { color: white; font-size: 1.1em; font-weight: 800; }
.jj-jovens-resumo { display: flex; flex-wrap: wrap; gap: 0.4em; }
.jj-jovens-resumo span {
    font-size: 0.74em; color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06); border: 1px solid var(--linha); border-radius: 999px; padding: 0.3em 0.8em;
}
.jj-jovens-resumo strong { color: var(--gold); }
.jj-tabela-wrap { overflow-x: auto; border: 1px solid var(--linha); border-radius: 12px; }
.jj-tabela { width: 100%; border-collapse: collapse; font-size: 0.82em; color: white; }
.jj-tabela th {
    text-align: left; font-size: 0.78em; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--gold); background: rgba(0, 0, 0, 0.2); padding: 0.75em 0.9em; white-space: nowrap;
}
.jj-tabela td { padding: 0.6em 0.9em; border-top: 1px solid var(--linha); white-space: nowrap; }
.jj-tabela tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.jj-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- chefia: lateral + painel grande ---------- */
#chefia.jj-area { max-width: 1400px; }
.jj-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1.4em; align-items: start; }
.jj-lateral { display: flex; flex-direction: column; gap: 1em; }
.jj-lateral .painel-card { margin-bottom: 0; padding: 1.3em; }
.jj-lateral .campos-grid { grid-template-columns: 1fr; }
.jj-lateral .painel-acoes { gap: 0.6em; margin-top: 0.8em; }
.jj-lateral .painel-acoes > * { flex: 1 1 auto; justify-content: center; }
.jj-lateral .jj-codigo { font-size: 1.35em; letter-spacing: 2px; }
.jj-principal {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--linha);
    border-radius: 18px;
    padding: 1.3em;
    min-height: 60vh;
}
.jj-principal-topo h2 { color: white; font-size: 1.1em; font-weight: 800; margin-bottom: 0.6em; }
.jj-contagem-total { color: var(--dim); font-weight: 600; font-size: 0.85em; }
.jj-filtros-quebra { flex-wrap: wrap; overflow: visible; }
.jj-principal .jj-lista { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.jj-lateral, .jj-principal { min-width: 0; }
@media (max-width: 900px) {
    .jj-layout { grid-template-columns: minmax(0, 1fr); }
    .jj-principal { padding: 1em; min-height: 0; }
}

@media (max-width: 560px) {
    .jj-lista { grid-template-columns: 1fr; }
    .jj-detalhe-corpo { padding: 1.1em 1em 1.3em; }
    .jj-codigo { font-size: 1.3em; letter-spacing: 2px; }
}

/* ---------- tipo da tarefa: Desafios / Desafios de Rádio ---------- */
.jj-categorias {
    display: flex; gap: 0.3em; padding: 0.3em;
    background: rgba(0, 0, 0, 0.25); border: 1px solid var(--linha); border-radius: 14px;
    margin: 0 0 0.8em;
}
.jj-cat {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 0.45em;
    padding: 0.75em 0.6em;
    background: transparent; border: none; border-radius: 10px;
    color: rgba(255, 255, 255, 0.65); font-family: var(--fn); font-size: 0.86em; font-weight: 800;
    cursor: pointer; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease;
}
.jj-cat span {
    font-size: 0.8em; font-weight: 700; min-width: 1.6em; padding: 0.1em 0.45em;
    background: rgba(255, 255, 255, 0.1); border-radius: 999px;
}
.jj-cat:hover { color: white; }
.jj-cat.ativa { background: var(--gold); color: var(--navy); }
.jj-cat.ativa span { background: rgba(15, 27, 53, 0.15); }
.jj-tarefa-topo { display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap; }
.jj-cat-tag {
    font-size: 0.68em; font-weight: 700; color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px; padding: 0.25em 0.65em;
}
@media (max-width: 380px) { .jj-cat { font-size: 0.78em; padding: 0.7em 0.3em; } }

/* salvamento automático */
.jj-autosave-dica { font-size: 0.72em; color: var(--dim); margin: -0.4em 0 1em; }

/* excluir mídia */
.jj-midia-remover { min-width: 36px; min-height: 36px; border-radius: 8px; font-size: 1em; margin-left: auto; }
.jj-midia-remover:hover { background: rgba(192, 57, 43, 0.2); }
.jj-midias-lista li.saindo { opacity: 0.4; }

/* trava de nome: PIN */
.jj-campo-pin input { letter-spacing: 0.6em; text-align: center; font-size: 1.3em; font-weight: 800; }
.jj-campo-pin small { display: block; margin-top: 0.4em; font-size: 0.72em; color: var(--dim); line-height: 1.4; }
.jj-pin-topo { color: var(--gold); font-weight: 700; }
.jj-pin-cel { font-variant-numeric: tabular-nums; letter-spacing: 1px; color: var(--gold); }

/* ===========================================================
   CELULAR (revisão mobile)
   =========================================================== */
/* nada de rolar pro lado */
html, body { overflow-x: hidden; }
.jj-area, #entrada { max-width: 100%; }

/* toque: sem efeito de "hover" grudado */
@media (hover: none) {
    .jj-tarefa:hover { transform: none; background: rgba(255, 255, 255, 0.05); }
    .jj-fab:hover { transform: none; }
}

@media (max-width: 560px) {
    body { padding: 3.2em 0.75em calc(2em + env(safe-area-inset-bottom)); }
    .btn-voltar { top: max(0.5em, env(safe-area-inset-top)); left: 0.6em; font-size: 0.72em; }

    /* iPhone dá zoom em campo com letra < 16px — todos com 16px */
    .campo input, .campo textarea, .campo select,
    .jj-add-linha input, .jj-popup textarea { font-size: 16px; }

    /* cartão de entrada mais enxuto */
    .card { padding: 2em 1.2em; border-radius: 20px; margin-top: 0.5em; }
    .card-header { margin-bottom: 1.4em; }
    .card-header .badge { width: 60px; height: 60px; font-size: 1.6em; }
    .card-header h1 { font-size: 1.35em; }
    .jj-chip { padding: 1em; font-size: 1em; }               /* alvo de toque grande */

    /* topo das áreas: título à esquerda, "Sair" pequeno à direita */
    .painel-topo { flex-wrap: nowrap; align-items: flex-start; margin-bottom: 1.1em; }
    .painel-topo > div:first-child { min-width: 0; }
    .painel-topo h1 { font-size: 1.12em; line-height: 1.25; }
    .painel-topo .chefia-user { font-size: 0.74em; overflow-wrap: anywhere; }
    .painel-topo .btn-sair { flex: none; padding: 0.55em 0.8em; font-size: 0.7em; }
    .painel-tabs { margin-left: -0.75em; margin-right: -0.75em; padding: 0 0.75em 2px; }
    .painel-tab { padding: 0.65em 1em; font-size: 0.78em; }

    .jj-dica { font-size: 0.8em; padding: 0.9em 1em; }
    .painel-card { padding: 1.2em 1.1em; }
    .jj-principal { padding: 0.9em 0.8em; border-radius: 14px; }

    /* detalhe da tarefa = folha que sobe de baixo, ocupando a largura toda */
    .jj-detalhe {
        width: 100%; max-width: 100%;
        max-height: 92vh; max-height: 92dvh;
        margin: auto 0 0 0;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        overflow-y: auto; overscroll-behavior: contain;
    }
    .jj-detalhe[open] { animation: jjSobe 0.28s ease both; }
    .jj-detalhe-corpo { padding: 1em 1em 0; }
    .jj-detalhe-titulo { font-size: 1.12em; }
    /* ações sempre à mão, grudadas no rodapé da folha */
    .jj-detalhe .jj-detalhe-corpo > .painel-acoes {
        position: sticky; bottom: 0; z-index: 2;
        margin: 1em -1em 0; padding: 0.8em 1em calc(0.8em + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(22, 38, 74, 0.9), #16264a 35%);
        border-top: 1px solid var(--linha);
    }
    .jj-detalhe .painel-acoes > button { flex: 1 1 auto; justify-content: center; }
    .jj-detalhe .painel-acoes .status-salvar { flex-basis: 100%; text-align: center; }
    .jj-bloco .painel-acoes > button { flex: 1 1 100%; }      /* "Pegar esta tarefa" largo */
    .jj-bloco { padding: 1em; }

    .jj-popup { width: calc(100% - 1.5em); }
    .jj-popup-acoes > * { flex: 1 1 auto; }

    /* chefia: números 2 por linha, o último ocupa a linha toda */
    .jj-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .jj-dash-topo { padding: 1em; }
    .jj-dash-marca h2 { font-size: 1.3em; }
    .jj-dash-relogio strong { font-size: 1.9em; }
    .jj-dash-botoes { width: 100%; }
    .jj-dash-botoes > * { flex: 1 1 auto; justify-content: center; }
    .jj-lateral .painel-acoes > * { flex: 1 1 100%; }

    /* botão do site oficial: compacto e sem cobrir o fim da página */
    .jj-fab { bottom: calc(0.8em + env(safe-area-inset-bottom)); padding: 0.6em 0.95em 0.6em 0.7em; }
    .jj-fab-ic { font-size: 1.35em; }
    .jj-fab-txt strong { font-size: 0.8em; }
    #chefia { padding-bottom: 4.5em; }
}
@keyframes jjSobe { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- acesso dos chefes ao Drive (Visão geral) ---------- */
.jj-acesso { margin-top: 1.2em; }
.jj-acesso .jj-add-linha { margin: 0.8em 0 0.4em; }
.jj-acesso .jj-add-linha input { font-size: 16px; }
.jj-acesso h4 { margin: 1em 0 0.4em; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
.jj-acesso-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35em; }
.jj-acesso-lista li { display: flex; align-items: center; gap: 0.6em; padding: 0.45em 0.7em; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 0.88em; }
.jj-acesso-num { flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; font-size: 0.8em; font-weight: 800; background: rgba(242, 201, 76, 0.18); color: var(--gold); }
.jj-acesso-email { flex: 1 1 auto; min-width: 0; word-break: break-all; }
.jj-acesso-lista small { flex: none; font-size: 0.75em; opacity: 0.6; }
.jj-acesso-dono { opacity: 0.75; }
.jj-acesso-lista li.jj-dim { background: none; padding-left: 0; }

/* ---------- placar do ramo (área do jovem) ---------- */
.jj-jovem-placar { padding: 1.1em 1.2em; margin-bottom: 1em; }
.jj-jp-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; flex-wrap: wrap; }
.jj-jp-topo h3 { font-size: 1em; font-weight: 800; margin: 0; }
.jj-jp-eu { font-size: 0.75em; font-weight: 700; color: #6fe89a; }
.jj-jp-frase { font-size: 0.85em; margin: 0.4em 0 0.9em; color: rgba(255, 255, 255, 0.85); }
.jj-jp-frase strong { color: var(--gold); }
.jj-jovem-placar .jj-placar li { grid-template-columns: 2em minmax(5em, 1fr) minmax(0, 1.2fr) auto; padding: 0.3em 0.4em; border-radius: 10px; }
.jj-placar-meu { background: rgba(242, 201, 76, 0.12); outline: 1px solid rgba(242, 201, 76, 0.4); }
.jj-placar-meu .jj-placar-nome { color: var(--gold); }
.jj-placar-nome small { font-weight: 400; opacity: 0.7; }

/* ---------- festa (aprovada / publicada / ajustar) ---------- */
.jj-festa {
    position: fixed; inset: 0; z-index: 200; overflow: hidden;
    display: grid; place-items: center; padding: 1em;
    background: rgba(5, 10, 25, 0.75);
    animation: jjFestaEntra 0.25s ease both;
}
.jj-festa.saindo { animation: jjFestaSai 0.2s ease both; }
.jj-festa-card {
    position: relative; z-index: 2;
    width: min(380px, 100%); text-align: center;
    padding: 1.6em 1.4em 1.3em;
    background: var(--navy); color: white; font-family: var(--fn);
    border: 2px solid var(--gold); border-radius: 20px;
    box-shadow: 0 0 0 6px rgba(242, 201, 76, 0.15), 0 25px 70px rgba(0, 0, 0, 0.7);
    animation: jjFestaPula 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.jj-festa-ajustar .jj-festa-card { border-color: #ff8a65; box-shadow: 0 0 0 6px rgba(255, 138, 101, 0.15), 0 25px 70px rgba(0, 0, 0, 0.7); }
.jj-festa-ic { font-size: 3.4em; line-height: 1; margin-bottom: 0.2em; }
.jj-festa h2 { font-size: 1.35em; font-weight: 800; margin: 0 0 0.3em; color: var(--gold); }
.jj-festa-ajustar h2 { color: #ff8a65; }
.jj-festa p { font-size: 0.9em; margin: 0 0 0.5em; line-height: 1.45; }
.jj-festa-tarefa { font-weight: 700; color: white; }
.jj-festa-recado { text-align: left; font-size: 0.85em; line-height: 1.5; margin: 0.8em 0 0.4em; padding: 0.8em 1em; border-radius: 12px; background: rgba(255, 255, 255, 0.07); }
.jj-festa-acoes { display: flex; justify-content: center; gap: 0.6em; flex-wrap: wrap; margin-top: 1em; }
.jj-festa-acoes .btn-salvar { padding: 0.8em 1.6em; }
.jj-confete {
    position: absolute; top: -12px; z-index: 1;
    width: 9px; height: 14px; border-radius: 2px;
    animation-name: jjConfete; animation-timing-function: cubic-bezier(0.3, 0.6, 0.6, 1); animation-fill-mode: both;
    pointer-events: none;
}
@keyframes jjConfete {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(var(--x), 105vh) rotate(var(--r)); opacity: 0.9; }
}
@keyframes jjFestaEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes jjFestaSai { to { opacity: 0; } }
@keyframes jjFestaPula { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .jj-festa, .jj-festa-card { animation: none; }
}

/* ---------- Cola do JOTA-JOTI ---------- */
.jj-btn-cola { margin-top: -0.4em; font-size: inherit; }
.jj-popup-cola { width: min(560px, calc(100% - 1.5em)); max-height: calc(100vh - 2em); border-color: rgba(242, 201, 76, 0.45); }
.jj-popup-cola .jj-popup-corpo { padding: 1.1em 1.1em 1.3em; }
.jj-cola-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.jj-cola-topo h3 { margin: 0; }
.jj-cola-fechar { background: none; border: none; color: white; opacity: 0.7; font-size: 1.1em; padding: 0.4em 0.6em; cursor: pointer; }
.jj-cola-fechar:hover { opacity: 1; }
.jj-cola-abas { display: flex; flex-wrap: wrap; gap: 0.35em; margin: 0.8em 0 1em; padding-bottom: 2px; }
.jj-cola-abas .painel-tab { padding: 0.55em 0.9em; font-size: 0.76em; white-space: nowrap; }
.jj-cola-sec[hidden] { display: none; }
.jj-cola-intro { font-size: 0.84em; line-height: 1.55; color: rgba(255, 255, 255, 0.8); margin: 0 0 0.9em; }
.jj-cola-intro strong { color: var(--gold); }
.jj-cola-sec .jj-passos em { color: #ffd98a; }
.jj-cola-dica { font-size: 0.82em; padding: 0.8em 1em; border-radius: 12px; background: rgba(111, 232, 154, 0.1); border: 1px solid rgba(111, 232, 154, 0.3); margin: 0; line-height: 1.5; }
.jj-fonetico { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.35em; }
.jj-fonetico span { display: flex; align-items: center; gap: 0.5em; padding: 0.4em 0.55em; border-radius: 8px; background: rgba(255, 255, 255, 0.05); font-size: 0.85em; }
.jj-fonetico b { width: 1.6em; height: 1.6em; display: grid; place-items: center; flex: none; border-radius: 6px; background: rgba(242, 201, 76, 0.18); color: var(--gold); font-weight: 800; }
.jj-soletrar { margin-top: 1em; }
.jj-soletrar input { font-size: 16px; }
.jj-soletrar-out { min-height: 1.4em; font-size: 0.9em; font-weight: 700; color: var(--gold); line-height: 1.6; margin: 0.3em 0 0; }
.jj-codigos { display: grid; grid-template-columns: auto 1fr; gap: 0.45em 0.9em; margin: 0; font-size: 0.86em; }
.jj-codigos dt { font-weight: 800; color: var(--gold); white-space: nowrap; }
.jj-codigos dd { margin: 0; line-height: 1.45; color: rgba(255, 255, 255, 0.85); }
.jj-frases h4 { font-size: 0.8em; margin: 0.9em 0 0.4em; opacity: 0.8; }
.jj-frases h4:first-child { margin-top: 0; }
.jj-frase {
    display: block; width: 100%; text-align: left; margin-bottom: 0.35em;
    padding: 0.6em 0.8em; border-radius: 10px; cursor: pointer;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--linha);
    color: white; font-family: var(--fn); font-size: 0.85em; line-height: 1.4;
}
.jj-frase:hover { border-color: rgba(242, 201, 76, 0.5); }
.jj-frase.copiada { border-color: #6fe89a; background: rgba(111, 232, 154, 0.12); }
.jj-frase.copiada::after { content: "  ✔ copiada"; color: #6fe89a; font-weight: 700; font-size: 0.85em; }
.jj-cola-seguranca { margin-top: 1em; font-size: 0.82em; line-height: 1.5; }

/* ---------- easter egg six seven (ramo Escoteiro) ---------- */
.jj-67 { background: rgba(5, 10, 25, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; text-align: center; }
.jj-67-palco { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.15em; font-family: var(--fn); }
.jj-67-num { font-size: 7em; font-weight: 900; line-height: 1; color: var(--gold); text-shadow: 0 6px 0 #c0392b, 0 0 30px rgba(242, 201, 76, 0.6); }
.jj-67-mao { font-size: 3.2em; }
.jj-67-seis, .jj-67-esq { animation: jj67Sobe 0.42s ease-in-out infinite alternate; }
.jj-67-sete, .jj-67-dir { animation: jj67Sobe 0.42s ease-in-out infinite alternate-reverse; }
.jj-67-txt { position: relative; z-index: 2; margin: 0.3em 0 0; font-size: 2em; font-weight: 900; letter-spacing: 0.12em; color: white; animation: jj67Treme 0.21s linear infinite; }
.jj-67-sub { position: relative; z-index: 2; margin: 0.4em 0 0; font-size: 0.85em; opacity: 0.75; }
@keyframes jj67Sobe { from { transform: translateY(-22px); } to { transform: translateY(22px); } }
@keyframes jj67Treme { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .jj-67-seis, .jj-67-sete, .jj-67-esq, .jj-67-dir, .jj-67-txt { animation: none; } }

/* ---------- cartões de tarefa maiores no celular ---------- */
@media (max-width: 560px) {
    .jj-lista { gap: 0.75em; }
    .jj-tarefa { padding: 1.15em 1.15em 1.1em; gap: 0.6em; border-radius: 16px; border-left-width: 5px; }
    .jj-tarefa h3 { font-size: 1.18em; }
    .jj-tarefa-desc { font-size: 0.95em; color: rgba(255, 255, 255, 0.7); }
    .jj-tarefa-meta { font-size: 0.86em; gap: 0.4em 1em; }
    .jj-tarefa .jj-pill { font-size: 0.8em; padding: 0.35em 0.85em; }
    .jj-tarefa .jj-cat-tag { font-size: 0.8em; }
    .jj-tarefa-recado { font-size: 0.9em; }
}

/* "O que é pra fazer" da chefia: cresce com o texto, sem rolagem interna */
textarea.jj-auto-altura { resize: none; overflow: hidden; min-height: 4.5em; field-sizing: content; }

/* ---------- horário das tarefas (Visão geral) ---------- */
.jj-horarios { margin-top: 1.2em; }
.jj-hor-scroll { overflow-x: auto; margin-top: 0.6em; }
.jj-hor { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: 0.85em; min-width: 420px; }
.jj-hor thead th { text-align: left; font-size: 0.8em; font-weight: 700; color: var(--dim); padding: 0.3em 0.7em; }
.jj-hor tbody th { text-align: left; white-space: nowrap; font-weight: 800; padding: 0.5em 0.7em; border-radius: 8px 0 0 8px; }
.jj-hor td { padding: 0.5em 0.7em; }
.jj-hor tbody tr:not(.jj-hor-dia) th, .jj-hor tbody tr:not(.jj-hor-dia) td { background: rgba(255, 255, 255, 0.04); }
.jj-hor tbody tr:not(.jj-hor-dia) td:last-child { border-radius: 0 8px 8px 0; }
.jj-hor tr.passou { opacity: 0.4; }
.jj-hor tr.agora th, .jj-hor tr.agora td { background: rgba(242, 201, 76, 0.16); color: var(--gold); font-weight: 700; }
.jj-hor tr.proxima th, .jj-hor tr.proxima td { background: rgba(90, 169, 255, 0.12); }
.jj-hor-dia td { padding: 0.8em 0.2em 0.2em; font-size: 0.78em; font-weight: 800; text-transform: capitalize; color: var(--gold); background: none; }
.jj-hor-tag { display: inline-block; margin-left: 0.4em; padding: 0.1em 0.45em; border-radius: 999px; font-size: 0.65em; letter-spacing: 0.05em; background: var(--gold); color: #1a1a2e; vertical-align: middle; }
.jj-hor-tag.prox { background: #5aa9ff; }
.jj-dash-relogio span { display: block; margin-top: 0.3em; line-height: 1.35; white-space: nowrap; }

/* Modo TV: aviso da próxima tarefa grande, pra ler do outro lado da sala */
.jj-dash-relogio span:empty { display: none; }
.jj-dash-tv .jj-dash-relogio span {
    margin: 0.5em auto 0;
    font-size: 1.25em; line-height: 1.3; white-space: normal;
    padding: 0.5em 1em; border-radius: 14px;
    background: rgba(242, 201, 76, 0.14); border: 2px solid rgba(242, 201, 76, 0.55);
    color: var(--gold);
}
.jj-dash-tv .jj-dash-relogio span.urgente { animation: jjUrgente 1.2s ease-in-out infinite; }
@keyframes jjUrgente {
    0%, 100% { background: rgba(242, 201, 76, 0.14); box-shadow: 0 0 0 0 rgba(242, 201, 76, 0); }
    50% { background: rgba(242, 201, 76, 0.32); box-shadow: 0 0 28px 4px rgba(242, 201, 76, 0.45); }
}
@media (prefers-reduced-motion: reduce) { .jj-dash-tv .jj-dash-relogio span.urgente { animation: none; } }
@media (max-width: 560px) { .jj-dash-relogio span { white-space: normal; } }

/* escolher o responsável da lista de jovens (detalhe da chefia) */
.jj-atribuir { padding: 0.9em 1em 0.2em; margin: 0.4em 0 0.9em; border-radius: 12px; background: rgba(242, 201, 76, 0.06); border: 1px dashed rgba(242, 201, 76, 0.35); }
.jj-escolher-jovem select { border-color: rgba(242, 201, 76, 0.5); }

/* Modo TV: ranking dos 3 ramos, linhas grandes */
.jj-placar-ramos .jj-placar { gap: 1.1em; margin-top: 0.4em; }
.jj-placar-ramos .jj-placar li { font-size: 1.35em; grid-template-columns: 2em minmax(7em, 1fr) minmax(0, 1.3fr) auto; }
.jj-placar-ramos .jj-placar-pos { font-size: 1.3em; }
.jj-placar-ramos .jj-placar-nome { white-space: normal; line-height: 1.2; }
.jj-placar-ramos .jj-placar-nome small { display: block; font-size: 0.55em; font-weight: 600; color: var(--dim); margin-top: 0.2em; }
.jj-placar-ramos .jj-placar-barra { height: 16px; }
.jj-placar-ramos .jj-placar-pts { font-size: 1.1em; }