/* SRP Aniversariantes v4.2.0 — identidade SRP (verde/ouro/creme) */ .srp-aniv{ --srp-verde:#1e5c30; --srp-verde-2:#2e7d32; --srp-ouro:#c8a84b; --srp-ouro-2:#d4ad5a; --srp-creme:#f5efe3; --srp-creme-2:#ede3d0; --srp-tinta:#22301f; --srp-erro:#a33a2a; box-sizing:border-box; min-width:auto; font-family:'DM Sans',system-ui,sans-serif; color:var(--srp-tinta); background:var(--srp-creme); border-radius:16px; padding:26px 24px 34px; margin:0 auto; max-width:1220px; } .srp-aniv *,.srp-aniv *::before,.srp-aniv *::after{box-sizing:border-box} /* -------- cabeçalho / marca -------- */ .srp-aniv-header{ display:flex;align-items:flex-start;justify-content:space-between;gap:16px; margin-bottom:24px; } .srp-aniv-brand-kicker{ display:block;font-size:11px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--srp-ouro);margin-bottom:4px; } .srp-aniv-brand-title{ font-family:'Playfair Display',Georgia,serif;font-weight:700; font-size:clamp(22px,3.4vw,30px);line-height:1.15;color:var(--srp-verde); margin:0; } .srp-aniv-brand-rule{ display:block;width:64px;height:3px;background:var(--srp-ouro); border-radius:2px;margin-top:10px; } /* -------- layout -------- */ .srp-aniv-layout{ display:grid;grid-template-columns:400px 1fr;gap:24px;align-items:start; } .srp-aniv-panel{ background:#fff;border:1px solid var(--srp-creme-2);border-radius:14px; padding:22px;box-shadow:0 8px 26px rgba(20,40,25,.08); } .srp-aniv-form{position:sticky;top:24px} .srp-aniv-panel-title{ font-family:'Playfair Display',Georgia,serif;font-weight:600; font-size:19px;color:var(--srp-verde);margin:0 0 16px; padding-bottom:10px;border-bottom:2px solid var(--srp-ouro); } /* -------- formulário -------- */ .srp-aniv label{ display:block;font-weight:700;font-size:12px;letter-spacing:.07em; text-transform:uppercase;color:var(--srp-verde);margin:14px 0 6px; } .srp-aniv input[type=text], .srp-aniv input[type=number], .srp-aniv input[type=password], .srp-aniv select, .srp-aniv textarea{ width:100%;padding:11px 12px;border:1.5px solid #d8cfb8;border-radius:9px; font:15px 'DM Sans',system-ui,sans-serif;background:#fffdf8;color:var(--srp-tinta); appearance:none;-webkit-appearance:none; } .srp-aniv select{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231e5c30' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;padding-right:34px; } .srp-aniv input:focus,.srp-aniv select:focus,.srp-aniv textarea:focus{ outline:none;border-color:var(--srp-verde-2); box-shadow:0 0 0 3px rgba(46,125,50,.14); } .srp-aniv textarea{min-height:180px;resize:vertical;line-height:1.5} .srp-aniv-row{display:grid;grid-template-columns:1fr 1.7fr;gap:12px} .srp-aniv-hint{font-size:12.5px;color:#6d7a63;line-height:1.5;margin:8px 0 0} .srp-aniv-hint b{color:var(--srp-verde)} .srp-aniv-hint--center{text-align:center;margin-top:12px} /* -------- botões (blindados contra o tema) -------- */ .srp-aniv-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; width:100%;margin-top:16px;padding:13px 16px; appearance:none;-webkit-appearance:none;border:2px solid var(--srp-verde); border-radius:10px;background:var(--srp-verde);color:#fff; font:700 15px 'DM Sans',system-ui,sans-serif;letter-spacing:.02em; cursor:pointer;transition:background .15s,color .15s;text-transform:none; } .srp-aniv-btn:hover{background:var(--srp-verde-2);border-color:var(--srp-verde-2);color:#fff} .srp-aniv-btn:disabled{opacity:.5;cursor:not-allowed} .srp-aniv-btn--ghost{background:transparent;color:var(--srp-verde)} .srp-aniv-btn--ghost:hover{background:var(--srp-verde);color:#fff} .srp-aniv-btn--small{width:auto;margin-top:0;padding:8px 16px;font-size:13px} .srp-aniv-status{ font-size:13px;color:var(--srp-verde);margin:12px 0 0;text-align:center;min-height:18px; } .srp-aniv-status--erro{color:var(--srp-erro)} /* -------- prévia -------- */ .srp-aniv-canvas-wrap{ background:var(--srp-creme);border-radius:12px;padding:14px; } .srp-aniv-canvas-wrap canvas{ display:block;width:100%;height:auto;border-radius:8px; box-shadow:0 12px 32px rgba(20,40,25,.22); } /* -------- login -------- */ .srp-aniv-login{display:flex;justify-content:center;padding:34px 0} .srp-aniv-login-card{ background:#fff;border:1px solid var(--srp-creme-2);border-radius:14px; padding:30px 28px;max-width:400px;width:100%; box-shadow:0 8px 26px rgba(20,40,25,.10); border-top:4px solid var(--srp-ouro); } .srp-aniv-login-card .srp-aniv-brand{margin-bottom:18px} .srp-aniv-login-error{ background:#fbeeea;border:1px solid #e5c4ba;color:var(--srp-erro); border-radius:9px;padding:10px 12px;font-size:13.5px;margin:0 0 6px; } /* -------- responsivo -------- */ @media (max-width:960px){ .srp-aniv{padding:20px 14px 28px} .srp-aniv-layout{grid-template-columns:1fr} .srp-aniv-form{position:static} .srp-aniv-preview{order:-1} } @media (max-width:480px){ .srp-aniv-row{grid-template-columns:1fr 1.4fr} .srp-aniv-header{flex-direction:column} } /* -------- geração em massa (v2.0.0) -------- */ .srp-aniv-layout--massa{margin-top:24px} .srp-aniv input[type=file]{ width:100%;padding:10px;border:1.5px dashed var(--srp-ouro);border-radius:9px; background:#fffdf8;font:14px 'DM Sans',system-ui,sans-serif;color:var(--srp-tinta); } .srp-aniv input[type=file]::file-selector-button{ appearance:none;-webkit-appearance:none;border:0;border-radius:7px; background:var(--srp-verde);color:#fff;font:700 13px 'DM Sans',sans-serif; padding:8px 14px;margin-right:12px;cursor:pointer; } .srp-aniv input[type=file]::file-selector-button:hover{background:var(--srp-verde-2)} /* -------- editor de registros (v2.1.0) -------- */ .srp-aniv-editor-wrap{margin-top:24px} .srp-aniv-resumo{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px} .srp-aniv-chip{background:var(--srp-creme);border:1px solid var(--srp-creme-2);border-radius:10px;padding:9px 16px;font-size:12.5px;color:#4b5a41} .srp-aniv-chip b{display:block;font-size:19px;color:var(--srp-verde);font-family:'Playfair Display',Georgia,serif} .srp-aniv-chip--erro{background:#fbeeea;border-color:#e5c4ba} .srp-aniv-chip--erro b{color:var(--srp-erro)} .srp-aniv-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px} .srp-aniv-toolbar select,.srp-aniv-toolbar input[type=search]{width:auto;min-width:150px} .srp-aniv-toolbar-spacer{flex:1} .srp-aniv-btn--gold{background:var(--srp-ouro);border-color:var(--srp-ouro);color:#1a2a16} .srp-aniv-btn--gold:hover{background:var(--srp-ouro-2);border-color:var(--srp-ouro-2);color:#1a2a16} .srp-aniv-tabela-scroll{overflow-x:auto} .srp-aniv-tabela{width:100%;border-collapse:collapse;font-size:13.5px} .srp-aniv-tabela th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--srp-verde);text-align:left;padding:8px 10px;border-bottom:2px solid var(--srp-ouro);white-space:nowrap} .srp-aniv-tabela td{padding:4px 5px;border-bottom:1px solid var(--srp-creme-2);vertical-align:middle} .srp-aniv-linha-invalida{background:#fbeeea} .srp-aniv-linha-invalida td:first-child{border-left:3px solid var(--srp-erro)} .srp-aniv-tabela td input,.srp-aniv-tabela td select{ width:100%;padding:7px 9px;border:1.5px solid transparent;border-radius:7px; background:transparent;font:13.5px 'DM Sans',system-ui,sans-serif;color:var(--srp-tinta); appearance:none;-webkit-appearance:none; } .srp-aniv-tabela td input:hover,.srp-aniv-tabela td select:hover{border-color:#d8cfb8;background:#fffdf8} .srp-aniv-tabela td input:focus,.srp-aniv-tabela td select:focus{border-color:var(--srp-verde-2);background:#fffdf8;outline:none} .srp-aniv-col-dia{width:72px} .srp-aniv-col-dia input{text-align:center} .srp-aniv-col-mes{width:140px} .srp-aniv-col-funcao{width:140px} .srp-aniv-col-status{width:200px} .srp-aniv-col-del{width:44px} /* v4.5.0 — o motivo do erro NÃO usa mais white-space:nowrap: um erro * composto ("dia ausente · nome muito longo") estourava a caixa. */ .srp-aniv-motivo{font-size:11.5px;color:var(--srp-erro);font-weight:700;line-height:1.35} .srp-aniv-ok{color:var(--srp-verde-2);font-weight:700;font-size:12px} .srp-aniv-del{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:#b08c8c;font-size:16px;cursor:pointer;padding:4px 9px;border-radius:6px} .srp-aniv-del:hover{background:#fbeeea;color:var(--srp-erro)} /* v4.5.0 — paginação do editor */ .srp-aniv-mais{ display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap; padding:14px 0 2px;border-top:1px solid var(--srp-creme-2);margin-top:8px; } .srp-aniv-mais-info{font-size:12px;color:#6d7a6a;font-weight:500} /* -------- persistência e wp-admin (v2.2.0) -------- */ .srp-aniv-salvo{font-size:12px;font-weight:700;color:var(--srp-verde-2);white-space:nowrap} .srp-aniv-salvo--erro{color:var(--srp-erro)} .srp-aniv-admin-wrap .srp-aniv{margin-top:12px;max-width:1280px} body.wp-admin .srp-aniv input[type=text], body.wp-admin .srp-aniv input[type=number], body.wp-admin .srp-aniv input[type=search], body.wp-admin .srp-aniv select, body.wp-admin .srp-aniv textarea{ max-width:none;box-shadow:none;min-height:0;line-height:normal; } /* ============================================================ * v3.0.0 — Abas (padrão srp-swipe-tabs) + próximos aniversariantes * ========================================================== */ .srp-aniv-tabs{ display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:thin; border-bottom:2px solid var(--srp-ouro); margin:0 0 22px;padding-bottom:0; } .srp-aniv-tabs::-webkit-scrollbar{height:5px} .srp-aniv-tabs::-webkit-scrollbar-thumb{background:var(--srp-creme-2);border-radius:4px} .srp-aniv-tab{ appearance:none;-webkit-appearance:none; flex:0 0 auto;white-space:nowrap;cursor:pointer; border:0;border-bottom:3px solid transparent; background:transparent;color:var(--srp-verde); font-family:'DM Sans',system-ui,sans-serif; font-size:13.5px;font-weight:700;letter-spacing:.02em; padding:11px 16px;border-radius:8px 8px 0 0; transition:background .15s,color .15s,border-color .15s; margin-bottom:-2px; } .srp-aniv-tab:hover{background:var(--srp-creme-2)} .srp-aniv-tab:focus-visible{outline:2px solid var(--srp-verde-2);outline-offset:2px} .srp-aniv-tab.is-active{ background:var(--srp-creme-2); color:var(--srp-verde); border-bottom-color:var(--srp-ouro); } .srp-aniv-panel-tab[hidden]{display:none} /* -------- próximos aniversariantes (chips) -------- */ .srp-aniv-proximos{ display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px; } .srp-aniv-prox{ appearance:none;-webkit-appearance:none;cursor:pointer;text-align:left; border:1px solid var(--srp-creme-2);border-left:3px solid var(--srp-ouro); background:#fffdf8;border-radius:0 10px 10px 0; padding:8px 14px;display:flex;flex-direction:column;gap:1px; font-family:'DM Sans',system-ui,sans-serif; transition:border-color .15s,background .15s,transform .05s; } .srp-aniv-prox:hover{border-color:var(--srp-ouro);background:#fff} .srp-aniv-prox:active{transform:translateY(1px)} .srp-aniv-prox:focus-visible{outline:2px solid var(--srp-verde-2);outline-offset:2px} .srp-aniv-prox b{color:var(--srp-verde);font-size:13.5px;font-weight:700} .srp-aniv-prox span{color:#8c781e;font-size:11.5px;letter-spacing:.02em} .srp-aniv-opt{color:#9a8f78;font-weight:400;font-size:.85em} .srp-aniv-editor-vazio{margin:0 0 4px} @media (max-width:640px){ .srp-aniv-tab{font-size:12.5px;padding:10px 13px} .srp-aniv-proximos{gap:8px} } /* ============================================================ * v4.0.0 — Níveis de acesso, exclusão em massa e responsividade * ========================================================== */ /* Cabeçalho: agrupa selo de papel + botão sair à direita */ .srp-aniv-header-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end} .srp-aniv-role-badge{ display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em; padding:5px 12px;border-radius:999px;white-space:nowrap;border:1px solid transparent; } .srp-aniv-role-badge--admin{background:#e7f0e8;color:#1a4a20;border-color:#bcd6bf} .srp-aniv-role-badge--editor{background:#f6eccf;color:#7a5a10;border-color:#e4cf90} /* Botões destrutivos (exclusão em massa — só admin) */ .srp-aniv-btn--danger{background:var(--srp-erro);border-color:var(--srp-erro);color:#fff} .srp-aniv-btn--danger:hover{background:#8a2f22;border-color:#8a2f22;color:#fff} .srp-aniv-btn--danger-ghost{background:transparent;color:var(--srp-erro);border-color:#e5c4ba} .srp-aniv-btn--danger-ghost:hover{background:#fbeeea;color:var(--srp-erro);border-color:var(--srp-erro)} /* Barra de exclusão em massa */ .srp-aniv-massa-barra{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:#fbf3f1;border:1px solid #ecd6cf;border-radius:10px; padding:8px 12px;margin:0 0 10px; } .srp-aniv-massa-cont{font-size:13px;color:var(--srp-tinta)} .srp-aniv-massa-cont b{color:var(--srp-erro)} .srp-aniv-col-sel{width:34px;text-align:center} .srp-aniv-tabela td.srp-aniv-col-sel input, .srp-aniv-tabela th.srp-aniv-col-sel input{width:18px;height:18px;cursor:pointer;accent-color:var(--srp-verde)} /* Fluidez extra: gaps/padding acompanham a viewport */ .srp-aniv-layout{gap:clamp(16px,2.4vw,24px)} .srp-aniv-tabela td input,.srp-aniv-tabela td select{min-height:40px} /* ============================================================ * v4.5.0 — Editor em CARD FLUIDO (≤900px) * * O ponto de quebra subiu de 560px para 900px. A faixa 561–900px era * onde a tabela sofria: as colunas fixas (72 + 140 + 140 + 200 + 44px) * somam 596px antes do nome, forçando scroll horizontal no tablet e no * celular deitado. * * O card usa CSS Grid com áreas nomeadas — a ordem visual muda sem * reordenar o DOM (a semântica de é preservada para leitores * de tela e para o desktop). * ========================================================== */ @media (max-width:900px){ .srp-aniv-tabela-scroll{overflow-x:visible} .srp-aniv-tabela{font-size:14px;display:block} .srp-aniv-tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .srp-aniv-tabela tbody{display:block} .srp-aniv-tabela tr{ display:grid; grid-template-columns:auto 1fr 1fr auto; grid-template-areas: "sel status status del" "dia nome nome nome" "mes mes funcao funcao"; gap:8px; background:#fff;border:1px solid var(--srp-creme-2); border-radius:12px;padding:12px;margin:0 0 10px; box-shadow:0 2px 8px rgba(20,40,25,.05); } .srp-aniv-tabela tr.srp-aniv-linha-invalida{border-color:#e5c4ba;background:#fdf7f5} .srp-aniv-linha-invalida td:first-child{border-left:0} .srp-aniv-tabela td{ display:block;padding:0;border-bottom:0;position:relative;min-width:0; } .srp-aniv-tabela td.srp-aniv-col-sel{grid-area:sel;align-self:center} .srp-aniv-tabela td.srp-aniv-col-status{grid-area:status;align-self:center;display:block} .srp-aniv-tabela td.srp-aniv-col-del{grid-area:del;align-self:center;justify-self:end} .srp-aniv-tabela td.srp-aniv-col-dia{grid-area:dia;min-width:76px} .srp-aniv-tabela td.srp-aniv-col-nome{grid-area:nome} .srp-aniv-tabela td.srp-aniv-col-mes{grid-area:mes} .srp-aniv-tabela td.srp-aniv-col-funcao{grid-area:funcao} /* Rótulo FLUTUANTE dentro do campo. Antes ele era uma coluna de 76px * fixos — quase 40% da largura útil de um celular de 375px. */ .srp-aniv-tabela td[data-label]:not(.srp-aniv-col-status)::before{ content:attr(data-label); position:absolute;top:5px;left:10px;z-index:1;pointer-events:none; font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--srp-verde); } .srp-aniv-tabela td input,.srp-aniv-tabela td select{ width:100%;min-width:0; padding:18px 10px 6px; /* espaço para o rótulo flutuante */ min-height:46px; /* alvo de toque confortável */ border:1.5px solid var(--srp-creme-2);background:#fff;border-radius:8px; } .srp-aniv-tabela td.srp-aniv-col-dia input{text-align:left} .srp-aniv-tabela td select{ background-image:linear-gradient(45deg,transparent 50%,#9aa697 50%),linear-gradient(135deg,#9aa697 50%,transparent 50%); background-position:calc(100% - 15px) 21px,calc(100% - 10px) 21px; background-size:5px 5px,5px 5px;background-repeat:no-repeat; } /* Status: CHIP sempre visível. Na v4.4.0 ele recebia display:none em * ≤760px — o motivo do erro sumia justamente no aparelho onde o * usuário vai corrigir o registro. */ .srp-aniv-tabela td.srp-aniv-col-status{width:auto} .srp-aniv-tabela td.srp-aniv-col-status .srp-aniv-ok, .srp-aniv-tabela td.srp-aniv-col-status .srp-aniv-motivo{ display:inline-block;padding:4px 9px;border-radius:20px; font-size:10.5px;letter-spacing:.04em;text-transform:uppercase; } .srp-aniv-tabela td.srp-aniv-col-status .srp-aniv-ok{background:#e2f0e4;color:var(--srp-verde-2)} .srp-aniv-tabela td.srp-aniv-col-status .srp-aniv-motivo{background:#f7e2dc;color:var(--srp-erro);text-transform:none;letter-spacing:0;font-size:11px} .srp-aniv-tabela td.srp-aniv-col-del .srp-aniv-del{ font-size:15px;width:36px;height:36px;padding:0; border:1px solid #ecd6cf;border-radius:8px;background:#fff; } .srp-aniv-tabela td.srp-aniv-col-sel input{width:18px;height:18px} .srp-aniv-header-right{width:100%;justify-content:space-between} /* Toolbar do editor: grid fluido em vez de flex com min-width fixo. */ .srp-aniv-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center} .srp-aniv-toolbar select,.srp-aniv-toolbar input[type=search]{width:100%;min-width:0;min-height:44px} .srp-aniv-toolbar input[type=search]{grid-column:1/-1} .srp-aniv-toolbar-spacer{display:none} .srp-aniv-toolbar .srp-aniv-btn{width:100%;min-height:44px} .srp-aniv-salvo{grid-column:1/-1;text-align:center;white-space:normal} } /* Abaixo de 430px o card vira uma coluna só: nenhum campo espremido. */ @media (max-width:430px){ .srp-aniv-tabela tr{ grid-template-columns:auto 1fr auto; grid-template-areas: "sel status del" "dia dia dia" "nome nome nome" "mes mes mes" "funcao funcao funcao"; } .srp-aniv-toolbar{grid-template-columns:1fr} } /* O canvas de preview nunca estoura a viewport (nem em 320px). */ .srp-aniv-canvas, .srp-aniv-preview canvas, .srp-aniv-tabela-scroll + * canvas, #srp-aniv-canvas,#srp-aniv-canvas-lista, #srp-aniv-pesar-canvas,#srp-aniv-aviso-canvas{ max-width:100%;height:auto;display:block; } /* ============================================================ * v4.1.0 — Controle de tamanho de fonte (Pesar / Aviso) * ========================================================== */ .srp-aniv-fonte{ display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 6px; } .srp-aniv-fonte-lbl{ font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--srp-verde); text-transform:uppercase;margin-right:2px; } .srp-aniv-fonte-btn{ appearance:none;-webkit-appearance:none;cursor:pointer; border:1px solid var(--srp-creme-2);background:#fffdf8;color:var(--srp-verde); font:600 13px 'DM Sans',system-ui,sans-serif; padding:7px 14px;border-radius:999px;min-height:36px; transition:background .15s,border-color .15s,color .15s; } .srp-aniv-fonte-btn:hover{border-color:var(--srp-ouro)} .srp-aniv-fonte-btn:focus-visible{outline:2px solid var(--srp-verde-2);outline-offset:2px} .srp-aniv-fonte-btn.is-active{background:var(--srp-verde);border-color:var(--srp-verde);color:#fff} /* ============================================================ * v4.2.0 — Cartão individual por seleção (Nome somente-leitura) * ========================================================== */ .srp-aniv input#srp-aniv-nome[readonly]{ background:var(--srp-creme);border-color:var(--srp-creme-2); color:var(--srp-verde);font-weight:600;cursor:default; } .srp-aniv input#srp-aniv-nome[readonly]:focus{outline:none;box-shadow:none} /* ============================================================ * v4.3.0 — Login em tela cheia, sino, pop-up e WhatsApp * ========================================================== */ /* -------- Login: área creme ocupa 100% da tela -------- */ .srp-aniv--login{ max-width:none;border-radius:0;margin:0;padding:0; /* breakout da largura do conteúdo do tema para a viewport inteira */ width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); min-height:100vh;min-height:100svh; display:flex;align-items:center;justify-content:center; } .srp-aniv--login .srp-aniv-login{padding:24px 16px;width:100%;justify-content:center} .srp-aniv--login .srp-aniv-login-card{margin:auto} /* -------- Sino do cabeçalho (reabre o aviso) -------- */ .srp-aniv-bell{ position:relative;appearance:none;-webkit-appearance:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:999px; border:1px solid var(--srp-creme-2);background:#fffdf8;color:var(--srp-verde); transition:background .15s,border-color .15s,color .15s;flex:0 0 auto; } .srp-aniv-bell:hover{border-color:var(--srp-ouro);background:#fff} .srp-aniv-bell:focus-visible{outline:2px solid var(--srp-verde-2);outline-offset:2px} .srp-aniv-bell-badge{ position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px; display:inline-flex;align-items:center;justify-content:center; background:var(--srp-ouro);color:#3a2f10;border-radius:999px; font:700 11px 'DM Sans',system-ui,sans-serif;line-height:1; border:2px solid var(--srp-creme); } /* -------- Botão WhatsApp -------- */ .srp-aniv-btn--wa{ display:inline-flex;align-items:center;justify-content:center;gap:9px; background:#1e6b3a;border-color:#1e6b3a; } .srp-aniv-btn--wa:hover{background:#17542d;border-color:#17542d;color:#fff} .srp-aniv-btn--wa svg{flex:0 0 auto} /* -------- Pop-up / modal do aniversariante do dia -------- */ .srp-aniv-modal{ position:fixed;inset:0;z-index:99999; display:flex;align-items:center;justify-content:center;padding:20px; } .srp-aniv-modal[hidden]{display:none} .srp-aniv-modal-backdrop{ position:absolute;inset:0;background:rgba(20,30,22,.55); animation:srp-aniv-fade .18s ease-out; } .srp-aniv-modal-card{ position:relative;z-index:1;width:100%;max-width:440px; background:#fff;border:1px solid var(--srp-creme-2);border-top:6px solid var(--srp-ouro); border-radius:16px;padding:28px 26px 22px;text-align:center; box-shadow:0 18px 50px rgba(20,40,25,.28); animation:srp-aniv-pop .2s cubic-bezier(.2,.8,.3,1.1); max-height:calc(100vh - 40px);overflow:auto; } .srp-aniv-modal-x{ position:absolute;top:12px;right:12px;appearance:none;-webkit-appearance:none;cursor:pointer; width:36px;height:36px;border-radius:999px;border:0;background:var(--srp-creme);color:#8a9580; display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s; } .srp-aniv-modal-x:hover{background:var(--srp-creme-2);color:var(--srp-tinta)} .srp-aniv-modal-x:focus-visible{outline:2px solid var(--srp-verde-2);outline-offset:2px} .srp-aniv-modal-icon{ width:56px;height:56px;margin:2px auto 12px;border-radius:999px; display:flex;align-items:center;justify-content:center; background:#eaf3ea;color:var(--srp-verde); } .srp-aniv-modal-kicker{ display:block;font:700 11px 'DM Sans',system-ui,sans-serif; letter-spacing:.12em;text-transform:uppercase;color:var(--srp-ouro); } .srp-aniv-modal-title{ margin:6px 0 8px;font-family:'Fraunces','Libre Baskerville',Georgia,serif; font-size:22px;font-weight:700;color:var(--srp-verde);line-height:1.15; } .srp-aniv-modal-intro{margin:0 0 16px;font-size:13.5px;color:#4d5a45;line-height:1.5} .srp-aniv-modal-list{display:flex;flex-direction:column;gap:10px;text-align:left;margin-bottom:16px} .srp-aniv-modal-item{ border:1px solid var(--srp-creme-2);border-radius:12px;padding:12px 14px;background:#fffdf8; } .srp-aniv-modal-item-nome{ display:block;font-weight:700;font-size:15px;color:var(--srp-tinta);margin-bottom:2px; } .srp-aniv-modal-item-data{display:block;font-size:12px;color:#7c8a72;margin-bottom:10px} .srp-aniv-modal-item-acoes{display:flex;gap:8px;flex-wrap:wrap} .srp-aniv-modal-item-acoes .srp-aniv-btn{width:auto;margin-top:0;flex:1 1 auto;min-width:130px} .srp-aniv-modal-foot{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; border-top:1px solid var(--srp-creme-2);padding-top:14px; } .srp-aniv-modal-dismiss{ display:flex;align-items:center;gap:7px;margin:0; font-size:12.5px;color:#6d7a63;font-weight:400;cursor:pointer;text-transform:none;letter-spacing:0; } .srp-aniv-modal-dismiss input{width:auto;margin:0} @keyframes srp-aniv-fade{from{opacity:0}to{opacity:1}} @keyframes srp-aniv-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}} @media (max-width:480px){ .srp-aniv-modal-foot{flex-direction:column;align-items:stretch} .srp-aniv-modal-item-acoes .srp-aniv-btn{min-width:0} } /* ===================================================================== * Informativo — editor livre 9x16 (v5.0.0) * =================================================================== */ .srp-aniv-info-layout{align-items:start} .srp-aniv-info-side{max-height:none} .srp-aniv-info-bg{border:1px solid var(--srp-creme-2);border-radius:12px;padding:12px;margin-bottom:14px;background:#fff} .srp-aniv-info-bg label{display:block;font-weight:600;font-size:12px;color:var(--srp-verde);margin-bottom:6px} .srp-aniv-info-file{display:inline-block;margin-top:8px;cursor:pointer;font-size:12px;font-weight:600;color:var(--srp-ouro);border:1.5px dashed var(--srp-ouro);border-radius:9px;padding:7px 12px} .srp-aniv-info-file:hover{background:#faf5e7} .srp-aniv-info-grptit{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6b6f63;margin:8px 0 6px;font-weight:700} .srp-aniv-info-list{display:flex;flex-direction:column;gap:6px} .srp-aniv-info-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--srp-creme-2);border-radius:10px;cursor:pointer;background:var(--srp-creme);transition:.12s} .srp-aniv-info-item:hover{border-color:var(--srp-ouro)} .srp-aniv-info-item.is-sel{border-color:var(--srp-verde);background:#eef4ea;box-shadow:inset 3px 0 0 var(--srp-verde)} .srp-aniv-info-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto} .srp-aniv-info-ring{width:14px;height:14px;border-radius:50%;flex:0 0 auto;border:3px solid var(--srp-verde)} .srp-aniv-info-nm{flex:1;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .srp-aniv-info-del{border:none;background:none;color:#6b6f63;cursor:pointer;font-size:18px;line-height:1;padding:0 4px;border-radius:6px} .srp-aniv-info-del:hover{color:var(--srp-erro);background:#fbeaea} .srp-aniv-info-addrow{display:flex;gap:8px;margin:10px 0 4px} .srp-aniv-info-add{flex:1;border:1.5px dashed var(--srp-ouro);background:none;color:#8c781e;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:9px;border-radius:10px;cursor:pointer} .srp-aniv-info-add:hover{background:#faf5e7} .srp-aniv-info-fmt{border-top:1px solid var(--srp-creme-2);padding-top:14px;margin-top:12px} .srp-aniv-info-fmt.is-empty{color:#6b6f63;font-size:13px;text-align:center;padding:24px 8px} .srp-aniv-info-grp{margin-bottom:12px} .srp-aniv-info-grp>label{display:block;font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--srp-verde);margin-bottom:6px} .srp-aniv-info-fmt input[type=text],.srp-aniv-info-fmt textarea,.srp-aniv-info-fmt select{width:100%;font-size:13.5px;color:var(--srp-tinta);border:1px solid var(--srp-creme-2);border-radius:9px;padding:9px 10px;background:#fdfbf6} .srp-aniv-info-fmt textarea{min-height:70px;line-height:1.45;resize:vertical} .srp-aniv-info-fmt input:focus,.srp-aniv-info-fmt textarea:focus,.srp-aniv-info-fmt select:focus{outline:none;border-color:var(--srp-verde);background:#fff} .srp-aniv-info-row2{display:grid;grid-template-columns:1fr auto;gap:10px} .srp-aniv-info-seg{display:flex;border:1px solid var(--srp-creme-2);border-radius:9px;overflow:hidden} .srp-aniv-info-seg button{flex:1;border:none;background:#fdfbf6;padding:8px 10px;cursor:pointer;font-size:13px;color:#6b6f63;border-right:1px solid var(--srp-creme-2)} .srp-aniv-info-seg button:last-child{border-right:none} .srp-aniv-info-seg button.on{background:var(--srp-verde);color:#fff} .srp-aniv-info-seg button b{font-weight:800}.srp-aniv-info-seg button i{font-style:italic} .srp-aniv-info-sws{display:flex;gap:7px;flex-wrap:wrap;align-items:center} .srp-aniv-info-sw{width:26px;height:26px;border-radius:7px;cursor:pointer;border:2px solid rgba(0,0,0,.08);transition:.12s} .srp-aniv-info-sw.on{border-color:var(--srp-tinta);transform:scale(1.08);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--srp-verde)} .srp-aniv-info-sw--none{background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 50%/10px 10px} .srp-aniv-info-swx{width:26px;height:26px;border-radius:7px;overflow:hidden;border:1px solid var(--srp-creme-2);padding:0;cursor:pointer;display:inline-block} .srp-aniv-info-swx input{width:140%;height:140%;margin:-20%;border:none;padding:0;cursor:pointer;background:none} .srp-aniv-info-slider{display:flex;align-items:center;gap:10px} .srp-aniv-info-slider input[type=range]{flex:1} .srp-aniv-info-val{font-weight:700;font-size:12px;color:var(--srp-verde);min-width:46px;text-align:right} .srp-aniv-info-note{font-size:12px;color:#6b6f63;background:var(--srp-creme);border:1px solid var(--srp-creme-2);border-radius:9px;padding:8px 10px;line-height:1.45;margin-bottom:10px} .srp-aniv-info-stage{position:relative;width:100%;max-width:360px;margin:0 auto;aspect-ratio:9/16;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(20,30,22,.2);border:1px solid rgba(0,0,0,.06);background:#f3ecdd;touch-action:none} .srp-aniv-info-stage canvas{display:block;width:100%;height:100%} .srp-aniv-info-handles{position:absolute;inset:0} .srp-aniv-info-handle{position:absolute;border:1.5px dashed transparent;border-radius:5px;cursor:grab;touch-action:none} .srp-aniv-info-handle:hover{border-color:rgba(30,92,48,.4)} .srp-aniv-info-handle.is-icon{border-radius:50%} .srp-aniv-info-handle.is-sel{border-color:var(--srp-verde);background:rgba(30,92,48,.06)} .srp-aniv-info-handle.is-sel::after{content:"";position:absolute;top:-7px;left:-7px;width:12px;height:12px;background:var(--srp-verde);border-radius:4px} @media (max-width:820px){.srp-aniv-info-stage{max-width:300px}} /* v5.1.0 — camadas de imagem/logo */ .srp-aniv-info-sq{width:14px;height:14px;border-radius:3px;flex:0 0 auto;background:linear-gradient(135deg,#c8a84b 0 50%,#1e5c30 50% 100%);border:1px solid rgba(0,0,0,.12)} .srp-aniv-info-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px} .srp-aniv-info-chip{border:1px solid var(--srp-creme-2);background:#fff;color:var(--srp-verde);font-weight:600;font-size:12px;padding:6px 11px;border-radius:999px;cursor:pointer;transition:.12s} .srp-aniv-info-chip:hover{border-color:var(--srp-verde);background:#eef4ea} .srp-aniv-info-handle.is-image.is-sel{border-style:solid} /* ===================================================================== * v5.2.0 — redimensionar por alça + responsividade mobile do editor * =================================================================== */ /* Alça de redimensionar (canto inferior-direito da camada selecionada). */ .srp-aniv-info-grip{ position:absolute;right:-9px;bottom:-9px;width:18px;height:18px; background:var(--srp-verde);border:2px solid #fff;border-radius:5px; box-shadow:0 0 0 1px var(--srp-creme-2);cursor:nwse-resize;touch-action:none;z-index:3; } .srp-aniv-info-grip::after{content:"";position:absolute;inset:4px;border-right:2px solid rgba(255,255,255,.9);border-bottom:2px solid rgba(255,255,255,.9);border-radius:0 0 2px 0} .srp-aniv-info-handle.is-icon .srp-aniv-info-grip{border-radius:50%} /* O toque no palco pode rolar a página; só a camada/alça capturam o gesto. */ .srp-aniv-info-stage{touch-action:pan-y} /* Palco fluido: usa a largura disponível do celular. */ .srp-aniv-info-stage{max-width:min(360px,92vw)} @media (max-width:820px){.srp-aniv-info-stage{max-width:min(340px,88vw)}} /* Empilhamento e toque confortável no editor em telas estreitas. */ @media (max-width:960px){ .srp-aniv-info-side{position:static;top:auto} .srp-aniv-info-layout{gap:18px} } @media (max-width:560px){ .srp-aniv-info-addrow{flex-wrap:wrap} .srp-aniv-info-add{min-width:96px;padding:11px 8px;font-size:12.5px} .srp-aniv-info-chip{padding:9px 13px;font-size:12.5px} /* alvo de toque maior */ .srp-aniv-info-item{padding:11px 12px} .srp-aniv-info-del{font-size:22px;padding:2px 8px} .srp-aniv-info-seg button{padding:11px 8px;font-size:13.5px} .srp-aniv-info-sw,.srp-aniv-info-swx{width:30px;height:30px} .srp-aniv-info-fmt input[type=text],.srp-aniv-info-fmt textarea,.srp-aniv-info-fmt select{font-size:16px} /* evita zoom do iOS */ .srp-aniv-info-grip{width:22px;height:22px;right:-11px;bottom:-11px} .srp-aniv-info-slider input[type=range]{height:6px} .srp-aniv-info-slider input[type=range]::-webkit-slider-thumb{width:22px;height:22px} .srp-aniv-info-slider input[type=range]::-moz-range-thumb{width:22px;height:22px} } /* ===================================================================== * v5.3.0 — X/Y numérico, alinhamento, catálogos e tabela de posições * =================================================================== */ .srp-aniv-info-xy{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px;align-items:center} .srp-aniv-info-xy span{font-weight:700;font-size:12px;color:var(--srp-verde)} .srp-aniv-info-xy input[type=number]{width:100%;font-size:13.5px;color:var(--srp-tinta);border:1px solid var(--srp-creme-2);border-radius:9px;padding:8px 9px;background:#fdfbf6} .srp-aniv-info-xy input:focus{outline:none;border-color:var(--srp-verde);background:#fff} .srp-aniv-info-align{display:grid;grid-template-columns:repeat(6,1fr);gap:6px} .srp-aniv-info-align button{border:1px solid var(--srp-creme-2);background:#fdfbf6;border-radius:8px;padding:9px 0;font-size:16px;color:var(--srp-verde);cursor:pointer;line-height:1} .srp-aniv-info-align button:hover{border-color:var(--srp-verde);background:#eef4ea} .srp-aniv-info-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:6px} .srp-aniv-info-galitem{padding:0;border:1px solid var(--srp-creme-2);border-radius:9px;background:var(--srp-verde);cursor:pointer;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;transition:.12s} .srp-aniv-info-galitem:hover{border-color:var(--srp-ouro);transform:translateY(-1px)} .srp-aniv-info-galitem img{width:80%;height:80%;object-fit:contain;display:block} .srp-aniv-info-catlbl{font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--srp-verde);margin:12px 0 6px} .srp-aniv-info-bgcat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .srp-aniv-info-bgitem{padding:0;border:1px solid var(--srp-creme-2);border-radius:9px;background:#fff;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;transition:.12s} .srp-aniv-info-bgitem:hover{border-color:var(--srp-verde);transform:translateY(-1px)} .srp-aniv-info-bgitem img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block} .srp-aniv-info-bgitem span{font-size:10px;color:#6b6f63;padding:4px 2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .srp-aniv-info-postit{font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--srp-verde);margin:16px 0 8px;padding-top:14px;border-top:1px solid var(--srp-creme-2)} .srp-aniv-info-postable{overflow-x:auto} .srp-aniv-info-postbl{width:100%;border-collapse:collapse;font-size:12.5px} .srp-aniv-info-postbl th{text-align:left;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#6b6f63;padding:2px 6px 6px;font-weight:700} .srp-aniv-info-postbl th:nth-child(2),.srp-aniv-info-postbl th:nth-child(3){width:76px;text-align:center} .srp-aniv-info-postbl td{padding:3px 6px;border-top:1px solid var(--srp-creme-2)} .srp-aniv-info-postbl td.nm{display:flex;align-items:center;gap:7px;cursor:pointer;max-width:150px} .srp-aniv-info-postbl td.nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .srp-aniv-info-postbl input[type=number]{width:100%;font-size:13px;border:1px solid var(--srp-creme-2);border-radius:7px;padding:6px;background:#fdfbf6;text-align:center} .srp-aniv-info-postbl input:focus{outline:none;border-color:var(--srp-verde);background:#fff} @media (max-width:560px){ .srp-aniv-info-gallery{grid-template-columns:repeat(5,1fr)} .srp-aniv-info-align button{padding:12px 0;font-size:18px} .srp-aniv-info-xy input[type=number],.srp-aniv-info-postbl input[type=number]{font-size:16px} } /* ===================================================================== * v5.4.0 — scrollbar do painel lateral + seleção múltipla + chama * =================================================================== */ /* Barra de rolagem própria para as ferramentas laterais (desktop): * o painel de ferramentas rola sozinho e a prévia continua visível. */ @media (min-width:961px){ .srp-aniv-info-side{ max-height:calc(100vh - 40px); overflow-y:auto;overflow-x:hidden; scrollbar-width:thin;scrollbar-color:var(--srp-ouro) var(--srp-creme-2); padding-right:12px; } .srp-aniv-info-side::-webkit-scrollbar{width:10px} .srp-aniv-info-side::-webkit-scrollbar-track{background:var(--srp-creme-2);border-radius:8px} .srp-aniv-info-side::-webkit-scrollbar-thumb{background:var(--srp-ouro);border-radius:8px;border:2px solid var(--srp-creme-2)} .srp-aniv-info-side::-webkit-scrollbar-thumb:hover{background:var(--srp-ouro-2)} } /* Chama animada (fallback CSS caso o rAF do JS não rode). */ @keyframes srp-aniv-flicker{0%,100%{transform:scaleY(.94)}50%{transform:scaleY(1.06)}} .srp-aniv-flame{animation:srp-aniv-flicker 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%} /* Caixa de seleção múltipla + checkbox nas camadas. */ .srp-aniv-info-chk{width:16px;height:16px;flex:0 0 auto;accent-color:var(--srp-verde);cursor:pointer;margin:0} .srp-aniv-info-handle.is-multi{border:2px dashed var(--srp-ouro);background:rgba(200,168,75,.12)} .srp-aniv-info-multi{border:1px solid var(--srp-ouro);background:#fbf6e8;border-radius:12px;padding:12px;margin:12px 0} .srp-aniv-info-multi[hidden]{display:none} .srp-aniv-info-multi-tit{font-weight:700;font-size:12.5px;color:var(--srp-ouro-esc, #8c781e);margin-bottom:8px} .srp-aniv-info-multi label{display:block;font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--srp-verde);margin:8px 0 6px} .srp-aniv-info-align2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px} .srp-aniv-info-align2 button{border:1px solid var(--srp-creme-2);background:#fff;border-radius:8px;padding:9px 0;font-size:12.5px;font-weight:600;color:var(--srp-verde);cursor:pointer} .srp-aniv-info-align2 button:hover{border-color:var(--srp-verde);background:#eef4ea} @media (max-width:560px){ .srp-aniv-info-chk{width:20px;height:20px} } /* ===================================================================== * v5.5.0 — camadas (ordem Z) na tabela + seleção dinâmica + biblioteca * =================================================================== */ #pos-z{grid-template-columns:repeat(4,1fr)} .srp-aniv-info-postbl td.ordc{white-space:nowrap;width:64px;padding-left:2px} .srp-aniv-info-drag{display:inline-block;cursor:grab;color:var(--srp-ouro-esc,#8c781e);font-size:15px;padding:2px 4px;touch-action:none;user-select:none;vertical-align:middle} .srp-aniv-info-drag:active{cursor:grabbing} .srp-aniv-info-postbl .zbt{display:inline-flex;flex-direction:column;gap:1px;vertical-align:middle;margin-left:2px} .srp-aniv-info-postbl .zbt button{border:1px solid var(--srp-creme-2);background:#fff;border-radius:4px;width:20px;height:15px;line-height:1;font-size:8px;color:var(--srp-verde);cursor:pointer;padding:0} .srp-aniv-info-postbl .zbt button:hover{border-color:var(--srp-verde);background:#eef4ea} .srp-aniv-info-postbl tr.is-sel{background:#eef4ea;box-shadow:inset 3px 0 0 var(--srp-verde)} .srp-aniv-info-postbl tr.srp-aniv-drop td{border-top:2px solid var(--srp-verde)} .srp-aniv-info-postbl td.nm{cursor:pointer} /* Biblioteca do usuário (ícones/logos/fundos salvos). */ .srp-aniv-info-libbtn{border:1px dashed var(--srp-ouro);background:none;color:var(--srp-ouro-esc,#8c781e);font-weight:600;font-size:11.5px;border-radius:8px;padding:7px 10px;cursor:pointer;margin-top:6px} .srp-aniv-info-libbtn:hover{background:#faf5e7} .srp-aniv-info-libgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px} .srp-aniv-info-libitem{position:relative;padding:0;border:1px solid var(--srp-creme-2);border-radius:9px;background:var(--srp-verde);cursor:pointer;aspect-ratio:1;overflow:hidden} .srp-aniv-info-libitem.bg{background:#fff;aspect-ratio:9/16} .srp-aniv-info-libitem img{width:100%;height:100%;object-fit:contain;display:block} .srp-aniv-info-libitem.bg img{object-fit:cover} .srp-aniv-info-libitem .x{position:absolute;top:1px;right:1px;width:15px;height:15px;border:none;border-radius:4px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;line-height:1;cursor:pointer;padding:0;display:grid;place-items:center} .srp-aniv-info-libempty{font-size:11.5px;color:var(--srp-mut,#6b6f63);margin-top:4px} @media (max-width:560px){ .srp-aniv-info-postbl .zbt button{width:26px;height:18px;font-size:10px} .srp-aniv-info-drag{font-size:20px;padding:4px 8px} .srp-aniv-info-libgrid{grid-template-columns:repeat(5,1fr)} } /* ========================================================================= * v5.6.0 — Estúdio "Datas Importantes" (aba que substitui o Informativo) * Namespace .srp-aniv-di-* · chrome verde-mata do preview aprovado. * ====================================================================== */ .srp-aniv-di{--di-verde:#1e5c30;--di-mata:#0f3a1e;--di-ouro:#c8a84b;--di-creme:#f5efe3; --di-chrome:#12261a;--di-chrome2:#16311f;--di-chrome3:#1c3d27; --di-linha:rgba(200,168,75,.22);--di-linhaf:rgba(200,168,75,.45);--di-txt:#eadfca;--di-mute:#9db09a; display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start} .srp-aniv-di *{box-sizing:border-box} .srp-aniv-di-side,.srp-aniv-di-stage{background:linear-gradient(180deg,#173222,#0f2417); border:1px solid var(--di-linhaf);border-radius:16px;overflow:hidden} .srp-aniv-di-side{max-height:78vh;overflow-y:auto} .srp-aniv-di-block{padding:15px 15px 17px;border-bottom:1px solid var(--di-linha)} .srp-aniv-di-h3{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:12px; color:var(--di-ouro);margin:0 0 11px;display:flex;align-items:center;gap:8px} .srp-aniv-di-num{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--di-mute);border:1px solid var(--di-linha);border-radius:5px;padding:1px 5px} .srp-aniv-di-lbl{display:block;font-size:11px;color:var(--di-mute);text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px} .srp-aniv-di select,.srp-aniv-di input[type=text],.srp-aniv-di textarea{width:100%;background:var(--di-chrome);color:var(--di-creme); border:1px solid var(--di-linha);border-radius:8px;padding:9px 10px;font-family:'DM Sans',sans-serif;font-size:13px} .srp-aniv-di textarea{min-height:56px;resize:vertical} .srp-aniv-di select:focus,.srp-aniv-di input:focus,.srp-aniv-di textarea:focus{outline:2px solid var(--di-ouro);outline-offset:1px;border-color:var(--di-ouro)} .srp-aniv-di-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .srp-aniv-di-mb{margin-bottom:11px} .srp-aniv-di-hint{font-size:11px;color:var(--di-mute);line-height:1.5;margin:8px 0 0} .srp-aniv-di-actions{display:flex;gap:8px;margin-top:11px} .srp-aniv-di-btn{appearance:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;border-radius:9px; padding:9px 13px;border:1px solid var(--di-linhaf);color:var(--di-creme);background:linear-gradient(180deg,#1c3d27,#16311f);transition:.15s} .srp-aniv-di-btn:hover{border-color:var(--di-ouro)} .srp-aniv-di-btn:focus-visible{outline:2px solid var(--di-ouro);outline-offset:2px} .srp-aniv-di-btn.gold{background:linear-gradient(180deg,#d8bb5e,#b7963c);color:#2a1f06;border-color:#e6cf86;flex:1} .srp-aniv-di-btn.ghost{background:transparent} .srp-aniv-di-btn.mini{padding:9px 11px;font-size:14px;flex:none} .srp-aniv-di-seg{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--di-chrome);border:1px solid var(--di-linha);border-radius:10px;padding:3px} .srp-aniv-di-seg.triple{grid-template-columns:1fr 1fr 1fr} .srp-aniv-di-fmt,.srp-aniv-di-bg{appearance:none;background:transparent;border:0;color:var(--di-mute);cursor:pointer; font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;padding:8px 6px;border-radius:7px;transition:.15s} .srp-aniv-di-fmt.is-on,.srp-aniv-di-bg.is-on{background:linear-gradient(180deg,#2a7a44,var(--di-verde));color:var(--di-creme)} .srp-aniv-di-fmt:focus-visible,.srp-aniv-di-bg:focus-visible{outline:2px solid var(--di-ouro);outline-offset:2px} .srp-aniv-di-tom{display:inline-flex;align-items:center;gap:8px;margin-top:11px;font-size:11px;color:var(--di-mute); background:var(--di-chrome);border:1px solid var(--di-linha);border-radius:999px;padding:6px 12px;text-transform:uppercase;letter-spacing:.07em} .srp-aniv-di-tomdot{width:9px;height:9px;border-radius:50%;background:var(--di-ouro)} #srp-aniv-di-layers .di-layer{display:flex;align-items:center;gap:10px;padding:8px 9px;border:1px solid transparent;border-radius:9px;cursor:pointer} #srp-aniv-di-layers .di-layer:hover{background:rgba(200,168,75,.06)} #srp-aniv-di-layers .di-layer.sel{background:rgba(30,92,48,.35);border-color:var(--di-linhaf)} #srp-aniv-di-layers .di-layer.off .di-lname{opacity:.4;text-decoration:line-through} #srp-aniv-di-layers .di-eye{width:26px;height:26px;flex:none;border-radius:7px;border:1px solid var(--di-linha);background:var(--di-chrome); display:grid;place-items:center;cursor:pointer;color:var(--di-ouro);font-size:13px;padding:0} #srp-aniv-di-layers .di-layer.off .di-eye{color:var(--di-mute);opacity:.5} #srp-aniv-di-layers .di-lico{width:20px;text-align:center} #srp-aniv-di-layers .di-lname{flex:1;font-size:13px;color:var(--di-creme)} .srp-aniv-di-sw{display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .srp-aniv-di-sw .di-swi{aspect-ratio:1;border-radius:10px;border:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden;cursor:pointer} .srp-aniv-di-sw .di-swi input{position:absolute;inset:0;opacity:0;cursor:pointer;border:0;padding:0} .srp-aniv-di-sw .di-swi span{position:absolute;left:0;right:0;bottom:0;font-family:'JetBrains Mono',monospace;font-size:8px;text-align:center;padding:2px 0;background:rgba(0,0,0,.45);color:#fff} .srp-aniv-di-foot{border-bottom:0} .srp-aniv-di-foot .srp-aniv-btn{width:100%} .srp-aniv-di-footrow{display:flex;gap:8px;margin-top:9px} .srp-aniv-di-footrow .srp-aniv-di-btn{flex:1} /* Palco */ .srp-aniv-di-stage{display:flex;flex-direction:column;min-height:60vh} .srp-aniv-di-stagebar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--di-linha);flex-wrap:wrap} .srp-aniv-di-dim{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--di-mute)} .srp-aniv-di-dim b{color:var(--di-ouro)} .srp-aniv-di-evt{font-family:'Playfair Display',serif;font-style:italic;color:var(--di-creme);font-size:15px;margin-left:auto} .srp-aniv-di-stageinner{flex:1;display:grid;place-items:center;overflow:auto;padding:24px; background:radial-gradient(700px 420px at 50% 0%, rgba(30,92,48,.14), transparent 70%)} .srp-aniv-di-art{position:relative;overflow:hidden;border-radius:6px;display:flex;flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4);transition:width .28s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1)} .srp-aniv-di-art .di-bg{position:absolute;inset:0} .srp-aniv-di-art .di-foto{position:absolute;inset:0;display:grid;place-items:center;text-align:center; background:repeating-linear-gradient(135deg, rgba(0,0,0,.10) 0 14px, rgba(0,0,0,0) 14px 28px);border:2px dashed rgba(255,255,255,.28)} .srp-aniv-di-art .di-foto .di-fb{display:flex;flex-direction:column;align-items:center;gap:.5em;max-width:78%} .srp-aniv-di-art .di-veil{position:absolute;inset:0;pointer-events:none} .srp-aniv-di-art .di-content{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:8% 9%} .srp-aniv-di-art .di-logo{display:flex;align-items:center;gap:.55em} .srp-aniv-di-art .di-logo .di-lm{border-radius:.35em;display:grid;place-items:center;font-family:'Playfair Display',serif;font-weight:700;border:1px solid rgba(255,255,255,.35)} .srp-aniv-di-art .di-logo .di-lt b{font-family:'Playfair Display',serif;display:block;line-height:1.05} .srp-aniv-di-art .di-logo .di-lt small{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em} .srp-aniv-di-art .di-headline{margin-top:auto;display:flex;flex-direction:column;gap:.12em} .srp-aniv-di-art .di-l-destaque{line-height:.98} .srp-aniv-di-art .di-l-apoio{font-family:'Oswald',sans-serif;text-transform:uppercase;font-weight:500} .srp-aniv-di-art .di-ornament{height:2px;border-radius:2px;margin:.6em 0 .5em;width:26%} .srp-aniv-di-art .di-selo{align-self:flex-start;display:inline-flex;align-items:center;gap:.5em;border-radius:999px; font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-weight:500} .srp-aniv-di-art .di-selo .di-sdot{width:.5em;height:.5em;border-radius:50%} /* Modal */ .srp-aniv-di-modal{position:fixed;inset:0;background:rgba(6,14,9,.72);display:grid;place-items:center;z-index:100000;padding:24px} .srp-aniv-di-modal[hidden]{display:none} .srp-aniv-di-modalcard{width:min(680px,100%);max-height:88vh;overflow-y:auto;border-radius:16px; background:linear-gradient(180deg,#16311f,#12261a);border:1px solid var(--di-linhaf,rgba(200,168,75,.45));box-shadow:0 30px 80px rgba(0,0,0,.6)} .srp-aniv-di-modalhead{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(200,168,75,.22);position:sticky;top:0;background:#16311f;z-index:2} .srp-aniv-di-modalhead h2{font-family:'Playfair Display',serif;font-size:18px;color:#f5efe3;margin:0;flex:1} .srp-aniv-di-mtag{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:#2a1f06;background:#c8a84b;padding:4px 9px;border-radius:6px} .srp-aniv-di-modalx{appearance:none;background:transparent;border:0;color:#9db09a;font-size:22px;cursor:pointer;line-height:1} .srp-aniv-di-modalx:hover{color:#c8a84b} .srp-aniv-di-modalbody{padding:18px 20px 6px} .srp-aniv-di-modalfoot{padding:13px 20px 18px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid rgba(200,168,75,.22);position:sticky;bottom:0;background:#12261a} .srp-aniv-di-fs{border:1px solid rgba(200,168,75,.22);border-radius:12px;padding:13px 13px 3px;margin-bottom:15px} .srp-aniv-di-fslegend{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:#c8a84b;margin-bottom:11px} .srp-aniv-di-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .srp-aniv-di-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .srp-aniv-di-cf{display:flex;flex-direction:column;gap:5px} .srp-aniv-di-cf input[type=color]{width:100%;height:38px;border:1px solid rgba(200,168,75,.22);border-radius:8px;background:#12261a;cursor:pointer;padding:3px} .srp-aniv-di-hlrow{display:grid;grid-template-columns:1fr 120px;gap:10px;align-items:end;margin-bottom:10px} @media (max-width:900px){ .srp-aniv-di{grid-template-columns:1fr} .srp-aniv-di-side{max-height:none} .srp-aniv-di-grid3,.srp-aniv-di-grid4{grid-template-columns:1fr 1fr} } @media (prefers-reduced-motion:reduce){.srp-aniv-di-art{transition:none}} /* v5.6.1 — logo oficial fixo + edição inline na arte */ .srp-aniv-di-art .di-logofix{display:flex;align-items:flex-start} .srp-aniv-di-art .di-logofix img{display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));-webkit-user-select:none;user-select:none;pointer-events:none} .srp-aniv-di-art .di-edit{cursor:text;border-radius:6px;outline:none;transition:box-shadow .12s,background .12s} .srp-aniv-di-art .di-edit:hover{box-shadow:0 0 0 1px rgba(255,255,255,.25), inset 0 0 0 100vmax rgba(255,255,255,.04)} .srp-aniv-di-art .di-edit:focus{box-shadow:0 0 0 2px var(--di-ouro,#c8a84b)} .srp-aniv-di-art [data-cidx]:not(.di-edit){cursor:pointer} .srp-aniv-di-stage{position:relative} .srp-aniv-di-ink{position:absolute;z-index:20;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px; background:#12261a;border:1px solid var(--di-linhaf,rgba(200,168,75,.45));box-shadow:0 10px 30px rgba(0,0,0,.5)} .srp-aniv-di-ink[hidden]{display:none} .srp-aniv-di-ink .di-inklbl{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--di-ouro,#c8a84b)} .srp-aniv-di-ink .di-inkinput{width:34px;height:26px;border:1px solid rgba(200,168,75,.35);border-radius:6px;background:#0f2417;cursor:pointer;padding:2px} .srp-aniv-di-ink .di-inkx{appearance:none;background:transparent;border:0;color:#9db09a;font-size:16px;line-height:1;cursor:pointer;padding:0 2px} .srp-aniv-di-ink .di-inkx:hover{color:var(--di-ouro,#c8a84b)} /* v5.6.2 — foto confiável, biblioteca, ranges do logo, alertas, trilho, palco cheio */ .srp-aniv-di-art .di-foto.di-hasimg{border:0;background:transparent} .srp-aniv-di-art .di-fotoimg{width:100%;height:100%;object-fit:cover;display:block} .srp-aniv-di-rng{margin-bottom:12px} .srp-aniv-di-rng label{display:flex;justify-content:space-between;align-items:baseline} .srp-aniv-di-rng label b{color:var(--di-ouro,#c8a84b);font-family:'JetBrains Mono',monospace;font-size:11px} .srp-aniv-di input[type=range]{width:100%;accent-color:#2a7a44;cursor:pointer} .srp-aniv-di-catlbl{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--di-mute,#9db09a);margin:12px 0 8px} .srp-aniv-di-empty{font-size:11px;color:var(--di-mute,#9db09a);margin:2px 0} .srp-aniv-di-imglib{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .srp-aniv-di-imglib .di-imgitem{position:relative;aspect-ratio:9/16;border-radius:8px;overflow:hidden;border:1px solid rgba(200,168,75,.25);cursor:pointer;background:#0f2417} .srp-aniv-di-imglib .di-imgitem img{width:100%;height:100%;object-fit:cover;display:block} .srp-aniv-di-imglib .di-imgitem:hover{border-color:var(--di-ouro,#c8a84b)} .srp-aniv-di-imglib .di-imgx{position:absolute;top:3px;right:3px;width:20px;height:20px;border:0;border-radius:6px;background:rgba(12,20,14,.8);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0} .srp-aniv-di-imglib .di-imgx:hover{background:#a5342a} /* palco maior */ .srp-aniv-di-stage{min-height:74vh} /* trilho de próximas datas (ocupa o espaço à direita da arte) */ .srp-aniv-di-rail{position:absolute;top:58px;right:16px;width:236px;max-height:calc(100% - 84px);overflow-y:auto;z-index:8; background:rgba(12,26,18,.82);backdrop-filter:blur(3px);border:1px solid var(--di-linha,rgba(200,168,75,.22));border-radius:14px;padding:12px} /* v5.19.0 — legenda das duas categorias (dourado x verde) */ .srp-aniv-di-rail .di-raillegend{display:flex;gap:14px;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(200,168,75,.16)} .srp-aniv-di-rail .di-raillegend span{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--di-mute,#9db09a)} .srp-aniv-di-rail .di-raillegend i{width:9px;height:9px;border-radius:3px;display:inline-block} .srp-aniv-di-rail .di-legdata i{background:var(--di-ouro-claro,#e6c675)} .srp-aniv-di-rail .di-legcurso i{background:var(--di-verde-agenda,#83cf91)} /* títulos de seção coloridos por categoria */ .srp-aniv-di-rail .di-railh{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:11px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center} .srp-aniv-di-rail .di-railh--data{color:var(--di-ouro-claro,#e6c675)} /* itens: só o nome + selo de proximidade, barra de cor à esquerda */ .srp-aniv-di-rail .di-railitem{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left; background:transparent;border:0;border-left:3px solid transparent;border-radius:8px;padding:8px 8px;cursor:pointer;color:var(--di-txt,#eadfca);margin-bottom:4px} .srp-aniv-di-rail .di-rn{font-size:13px;line-height:1.25;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .srp-aniv-di-rail .di-rw{font-size:9px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--di-mute,#9db09a);flex:none} /* categoria: datas comemorativas (dourado) */ .srp-aniv-di-rail .di-raildata{border-left-color:rgba(230,198,117,.45)} .srp-aniv-di-rail .di-raildata:hover{background:rgba(230,198,117,.08)} .srp-aniv-di-rail .di-raildata.hoje{background:rgba(230,198,117,.14);border-left-color:var(--di-ouro-claro,#e6c675)} .srp-aniv-di-rail .di-raildata.hoje .di-rw{color:var(--di-ouro,#c8a84b)} /* alertas */ .srp-aniv-di-alertcard{width:min(560px,100%)} .srp-aniv-di-alert-intro{color:#d7e5d3;font-size:14px;line-height:1.5;margin:0 0 14px} .srp-aniv-di-alertlist{display:flex;flex-direction:column;gap:8px} .srp-aniv-di-alertlist .di-alertitem{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;text-align:left; background:#12261a;border:1px solid var(--di-linha,rgba(200,168,75,.22));border-radius:10px;padding:11px 13px;cursor:pointer;color:#eadfca} .srp-aniv-di-alertlist .di-alertitem:hover{border-color:var(--di-ouro,#c8a84b)} .srp-aniv-di-alertlist .di-alertitem.hoje{border-color:var(--di-ouro,#c8a84b);background:rgba(200,168,75,.1)} .srp-aniv-di-alertlist .di-aldata{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--di-ouro,#c8a84b)} .srp-aniv-di-alertlist .di-alnome{font-family:'Playfair Display',serif;font-size:15px} .srp-aniv-di-alertlist .di-alwhen{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:#9db09a} .srp-aniv-di-alertlist .di-alertitem.hoje .di-alwhen{color:var(--di-ouro,#c8a84b)} .srp-aniv-di-alert-dismiss{display:flex;align-items:center;gap:8px;font-size:12px;color:#9db09a;margin-right:auto} @media (max-width:1200px){ .srp-aniv-di-rail{display:none} } @media (max-width:900px){ .srp-aniv-di-imglib{grid-template-columns:repeat(4,1fr)} .srp-aniv-di-stage{min-height:60vh} } /* v5.6.3 — área de trabalho full-bleed, elementos livres (texto + imagem) */ @media (min-width:901px){ .srp-aniv:not(.srp-aniv--fs) .srp-aniv-panel-tab[data-srp-panel="aviso"] .srp-aniv-di{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:0 clamp(16px,2vw,40px); grid-template-columns:clamp(300px,22vw,360px) 1fr; } .srp-aniv-di-side{max-height:86vh} .srp-aniv-di-stage{min-height:86vh} } /* elementos livres na arte */ .srp-aniv-di-art .di-userlayers{position:absolute;inset:0;z-index:5;pointer-events:none} .srp-aniv-di-art .di-el{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;max-width:92%} .srp-aniv-di-art .di-el-txt{line-height:1.12;text-align:center;padding:2px 6px;border-radius:6px;white-space:pre-wrap;outline:none;cursor:text;text-shadow:0 1px 6px rgba(0,0,0,.28)} .srp-aniv-di-art .di-el-txt .di-eltext{outline:none} .srp-aniv-di-art .di-el-img img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))} .srp-aniv-di-art .di-el.sel{box-shadow:0 0 0 2px var(--di-ouro,#c8a84b);border-radius:8px} .srp-aniv-di-art .di-elgrip{position:absolute;top:-11px;left:-11px;width:22px;height:22px;border-radius:6px;background:var(--di-ouro,#c8a84b);color:#2a1f06; font-size:12px;line-height:22px;text-align:center;cursor:grab;opacity:0;transition:.12s;user-select:none;touch-action:none;z-index:2} .srp-aniv-di-art .di-el:hover .di-elgrip,.srp-aniv-di-art .di-el.sel .di-elgrip{opacity:1} .srp-aniv-di-art .di-elgrip:active{cursor:grabbing} /* toolbar flutuante do elemento */ .srp-aniv-di-eltb{position:absolute;z-index:22;display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:10px; background:#12261a;border:1px solid var(--di-linhaf,rgba(200,168,75,.45));box-shadow:0 10px 30px rgba(0,0,0,.5)} .srp-aniv-di-eltb[hidden]{display:none} .srp-aniv-di-eltb .di-tbb{appearance:none;min-width:28px;height:26px;padding:0 7px;border:1px solid var(--di-linha,rgba(200,168,75,.22));border-radius:7px; background:#0f2417;color:var(--di-creme,#f5efe3);font-family:'DM Sans',sans-serif;font-size:12px;cursor:pointer} .srp-aniv-di-eltb .di-tbb:hover{border-color:var(--di-ouro,#c8a84b)} .srp-aniv-di-eltb .di-tbb.del:hover{border-color:#a5342a;color:#f0b8b1} .srp-aniv-di-eltb .di-tbcol{display:grid;place-items:center;width:30px;height:26px;border:1px solid var(--di-linha,rgba(200,168,75,.22));border-radius:7px;background:#0f2417;overflow:hidden} .srp-aniv-di-eltb .di-tbcol input{width:34px;height:34px;border:0;background:transparent;cursor:pointer;padding:0} /* botões e lista de elementos no painel */ .srp-aniv-di-elbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px} .srp-aniv-di-elbtns .srp-aniv-di-btn{width:100%;font-size:12px;padding:9px 8px} .srp-aniv-di-ellist{margin-top:10px;display:flex;flex-direction:column;gap:5px} .srp-aniv-di-ellist .di-elrow{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:7px 9px;border:1px solid transparent;border-radius:8px;cursor:default} .srp-aniv-di-ellist .di-elrow:hover{background:rgba(200,168,75,.06)} .srp-aniv-di-ellist .di-elrow.sel{background:rgba(30,92,48,.35);border-color:var(--di-linhaf,rgba(200,168,75,.45))} .srp-aniv-di-ellist .di-elico{width:18px;text-align:center;cursor:pointer} .srp-aniv-di-ellist .di-ellbl{font-size:12px;color:var(--di-creme,#f5efe3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer} .srp-aniv-di-ellist .di-elx{width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:var(--di-mute,#9db09a);font-size:15px;cursor:pointer;padding:0} .srp-aniv-di-ellist .di-elx:hover{background:#a5342a;color:#fff} /* v5.6.4 — controles laterais de elemento, versão/placa do logo, z-order */ .srp-aniv-di-art .di-userlayers-back{z-index:1} .srp-aniv-di-art .di-userlayers-front{z-index:5} .srp-aniv-di-check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--di-mute,#9db09a);margin-top:10px} .srp-aniv-di-logovar{appearance:none;background:transparent;border:0;color:var(--di-mute,#9db09a);cursor:pointer;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:11px;padding:8px 4px;border-radius:7px} .srp-aniv-di-logovar.is-on{background:linear-gradient(180deg,#2a7a44,var(--di-verde,#1e5c30));color:var(--di-creme,#f5efe3)} .srp-aniv-di-art .di-logofix.di-logoplate{padding:2.2%;border-radius:12px} .srp-aniv-di-art .di-logofix.di-logoplate.dark{background:rgba(12,26,18,.82)} .srp-aniv-di-art .di-logofix.di-logoplate.light{background:rgba(245,239,227,.92)} .srp-aniv-di-art .di-logofix{filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))} /* painel de controles do elemento selecionado */ .srp-aniv-di-elctrl{margin-top:12px;padding:12px;border:1px solid var(--di-linhaf,rgba(200,168,75,.45));border-radius:12px;background:rgba(12,26,18,.55)} .srp-aniv-di-elctrl[hidden]{display:none} .srp-aniv-di-elctrl .di-elctrl-h{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--di-ouro,#c8a84b);margin-bottom:10px} .srp-aniv-di-elctrl .di-ct{width:100%;margin-bottom:10px} .srp-aniv-di-elctrl .di-cc{float:right;width:44px;height:22px;border:1px solid var(--di-linha,rgba(200,168,75,.22));border-radius:6px;background:#0f2417;cursor:pointer;padding:1px} .srp-aniv-di-elctrl .srp-aniv-di-seg{grid-template-columns:1fr 1fr} .srp-aniv-di-elctrl .di-zseg{appearance:none;background:transparent;border:0;color:var(--di-mute,#9db09a);cursor:pointer;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;padding:8px 4px;border-radius:7px} .srp-aniv-di-elctrl .di-zseg.is-on{background:linear-gradient(180deg,#2a7a44,var(--di-verde,#1e5c30));color:var(--di-creme,#f5efe3)} .srp-aniv-di-elctrl .di-elrem:hover{border-color:#a5342a;color:#f0b8b1} /* v5.6.5 — tela cheia sobrepondo o tema, escala de imagem até 500% */ .srp-aniv-di-fullbtn{appearance:none;cursor:pointer;background:transparent;border:1px solid var(--di-linha,rgba(200,168,75,.22));border-radius:8px; color:var(--di-mute,#9db09a);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:11px;padding:6px 10px} .srp-aniv-di-fullbtn:hover{border-color:var(--di-ouro,#c8a84b);color:var(--di-ouro,#c8a84b)} .srp-aniv-di-fullbtn.is-on{background:linear-gradient(180deg,#2a7a44,var(--di-verde,#1e5c30));color:var(--di-creme,#f5efe3);border-color:var(--di-linhaf,rgba(200,168,75,.45))} .srp-aniv-panel-tab[data-srp-panel="aviso"] .srp-aniv-di.srp-aniv-di--full{ position:fixed;inset:0;z-index:100000;margin:0;width:100vw;height:100vh;padding:14px; background:radial-gradient(1200px 700px at 50% -12%, #16311f, #0b1710 62%); overflow:auto;grid-template-columns:clamp(300px,20vw,360px) 1fr;gap:14px;align-items:start} .srp-aniv-di.srp-aniv-di--full .srp-aniv-di-side{max-height:calc(100vh - 28px)} .srp-aniv-di.srp-aniv-di--full .srp-aniv-di-stage{min-height:calc(100vh - 28px)} /* camada de imagem pode ultrapassar a arte (escala até 500%) */ .srp-aniv-di-art .di-el-img{max-width:none} /* v5.6.6 — caixa de texto com autonomia (fonte, itálico, alinhamento, quebra) */ .srp-aniv-di-art .di-el-txt{white-space:normal;line-height:1.14;padding:2px 4px} .srp-aniv-di-art .di-el-txt .di-eltext{display:block;outline:none} .srp-aniv-di-elctrl .di-ct{width:100%;min-height:46px;resize:vertical;margin-bottom:10px} .srp-aniv-di-elctrl .di-cf{width:100%;margin-bottom:10px} .srp-aniv-di-elstyle{display:flex;align-items:center;gap:6px;margin:2px 0 12px;flex-wrap:wrap} .srp-aniv-di-elstyle .di-sb{appearance:none;min-width:30px;height:30px;padding:0 8px;border:1px solid var(--di-linha,rgba(200,168,75,.22));border-radius:7px; background:#0f2417;color:var(--di-creme,#f5efe3);font-size:13px;cursor:pointer;display:inline-grid;place-items:center} .srp-aniv-di-elstyle .di-sb:hover{border-color:var(--di-ouro,#c8a84b)} .srp-aniv-di-elstyle .di-sb.is-on{background:linear-gradient(180deg,#2a7a44,var(--di-verde,#1e5c30));color:var(--di-creme,#f5efe3);border-color:var(--di-linhaf,rgba(200,168,75,.45))} .srp-aniv-di-elstyle .di-elstyle-sep{width:1px;height:22px;background:var(--di-linha,rgba(200,168,75,.22));margin:0 2px} /* v5.6.6 — tela cheia do app (padrão de todas as abas) + histórico */ html.srp-aniv-fs-lock, body.srp-aniv-fs-lock{overflow:hidden !important} .srp-aniv.srp-aniv--fs{position:fixed;inset:0;z-index:99990;max-width:none;width:100vw;height:100vh;margin:0;border-radius:0;overflow:auto; padding:20px clamp(16px,2.4vw,44px) 28px} .srp-aniv.srp-aniv--fs .srp-aniv-header{margin-bottom:16px} .srp-aniv-di-histbtns{display:flex;gap:6px} .srp-aniv-di-iconbtn{appearance:none;cursor:pointer;width:30px;height:28px;border:1px solid var(--di-linha,rgba(200,168,75,.22));border-radius:8px; background:transparent;color:var(--di-creme,#f5efe3);font-size:15px;line-height:1;display:grid;place-items:center;padding:0} .srp-aniv-di-iconbtn:hover:not(:disabled){border-color:var(--di-ouro,#c8a84b);color:var(--di-ouro,#c8a84b)} .srp-aniv-di-iconbtn:disabled{opacity:.35;cursor:default} /* ═══════════════════════════════════════════════════════════════════════ * v5.7.0 — SHELL TRAVADO do editor de Datas Comemorativas. * A tela cheia é permanente (sem botão de entrar/sair). Neste painel o * container NÃO rola: só a coluna de controles rola, por barra dedicada, * e a arte fica 100% contida (já dimensionada por altura no JS). A trava * é escopada em .srp-aniv--datas (ligada só quando este painel está ativo), * então as outras abas ficam intocadas. min-height:0 nas trilhas do grid * é a correção de raiz do clipping (antes a raiz inteira rolava). * ═════════════════════════════════════════════════════════════════════ */ .srp-aniv.srp-aniv--fs.srp-aniv--datas{ overflow:hidden; display:flex; flex-direction:column; } .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-header{ flex:0 0 auto; } /* v5.13.0 — a barra de abas fica FIXA e visível dentro do editor de Datas: * no shell flex-coluna ela estava sendo comprimida a ~0 de altura (o menu * "sumia" no Estúdio de Datas). flex:0 0 auto garante a navegação completa. */ .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-tabs{ flex:0 0 auto; margin-bottom:14px; } .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-panel-tab[data-srp-panel="aviso"]{ flex:1 1 auto; min-height:0; display:flex; } .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-di{ flex:1 1 auto; min-height:0; margin:0; display:grid; grid-template-columns:clamp(300px,22vw,360px) 1fr; gap:14px; align-items:stretch; } .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-di-side{ min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#c8a84b #14261a; } .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-di-side::-webkit-scrollbar{ width:11px; } .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-di-side::-webkit-scrollbar-track{ background:#14261a; } .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-di-side::-webkit-scrollbar-thumb{ background:#c8a84b; border-radius:8px; border:2px solid #14261a; } .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-di-stage{ min-height:0; min-width:0; overflow:hidden; } /* ============================================================ * v5.8.0 — Estrutura selecionável, decorativos, vinheta e guias * ============================================================ */ /* Vinheta (camada acima da foto, abaixo dos textos) */ .srp-aniv-di-art .di-vinheta{position:absolute;inset:0;pointer-events:none;z-index:1} /* Peças de ESTRUTURA na arte */ .srp-aniv-di-art .di-structel{position:relative} .srp-aniv-di-art .di-logofix.di-structel,.srp-aniv-di-art .di-logo.di-structel{position:absolute;z-index:3} .srp-aniv-di-art .di-structel.is-selstruct{box-shadow:0 0 0 2px var(--di-ouro,#c8a84b);border-radius:8px} .srp-aniv-di-art .di-structel .di-structgrip{position:absolute;top:-11px;left:-11px;width:22px;height:22px;border-radius:6px;background:var(--di-ouro,#c8a84b);color:#2a1f06;display:grid;place-items:center;font-size:12px;cursor:grab;opacity:0;transition:opacity .12s;z-index:6} .srp-aniv-di-art .di-structel:hover .di-structgrip,.srp-aniv-di-art .di-structel.is-selstruct .di-structgrip{opacity:1} .srp-aniv-di-art .di-structel .di-structgrip:active{cursor:grabbing} /* Guias inteligentes */ .srp-aniv-di-art .srp-aniv-di-guide{position:absolute;pointer-events:none;z-index:20;background:var(--di-ouro,#c8a84b);box-shadow:0 0 0 1px rgba(0,0,0,.25)} .srp-aniv-di-art .srp-aniv-di-guide.gx{top:0;bottom:0;width:1px;margin-left:-.5px} .srp-aniv-di-art .srp-aniv-di-guide.gy{left:0;right:0;height:1px;margin-top:-.5px} /* Lista: linhas de estrutura, badges, travas, separador */ .srp-aniv-di-ellist .di-elrow-struct{background:rgba(30,92,48,.14)} .srp-aniv-di-ellist .di-elrow.is-off{opacity:.5} .srp-aniv-di-ellist .di-elbadge{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--di-mata,#0f3a1e);background:var(--di-ouro,#c8a84b);border-radius:4px;padding:1px 5px;font-family:'Oswald',sans-serif;vertical-align:middle} .srp-aniv-di-ellist .di-elbadge.deco{background:#5b8c56;color:#0f2413} .srp-aniv-di-ellist .di-ellock{font-size:10px;opacity:.75} .srp-aniv-di-ellist .di-eleye{width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--di-mute,#9db09a);font-size:13px;cursor:pointer;padding:0} .srp-aniv-di-ellist .di-eleye:hover{background:rgba(200,168,75,.14);color:var(--di-creme)} .srp-aniv-di-ellist .di-elsep{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--di-mute,#9db09a);margin:9px 2px 4px;font-family:'Oswald',sans-serif} /* Painel: botões travar/duplicar */ .srp-aniv-di-elbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px} .srp-aniv-di-elctrl .di-ellock.is-on,.srp-aniv-di-elctrl .di-stlock.is-on{border-color:var(--di-ouro);color:var(--di-ouro)} .srp-aniv-di-elctrl .di-stog{appearance:none;cursor:pointer;background:transparent;color:var(--di-mute);border:0;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;padding:7px;border-radius:8px} .srp-aniv-di-elctrl .di-stog.is-on{background:var(--di-verde,#1e5c30);color:#fff} /* Bloco 09 — Decorativos */ .srp-aniv-di-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .srp-aniv-di-cat{appearance:none;cursor:pointer;background:var(--di-chrome);color:var(--di-mute);border:1px solid var(--di-linha);border-radius:999px;padding:5px 11px;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.05em;text-transform:uppercase} .srp-aniv-di-cat.is-on{background:var(--di-verde,#1e5c30);color:#fff;border-color:var(--di-linhaf)} .srp-aniv-di-decogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .srp-aniv-di-deco{position:relative;aspect-ratio:1;background:var(--di-chrome2,#16311f);border:1px solid var(--di-linha);border-radius:10px;cursor:pointer;display:grid;place-items:center;padding:8px;overflow:hidden} .srp-aniv-di-deco:hover{border-color:var(--di-ouro)} .srp-aniv-di-deco.is-on{border-color:var(--di-ouro);box-shadow:0 0 0 1px var(--di-ouro)} .srp-aniv-di-deco img{max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))} .srp-aniv-di-deco .di-decox{position:absolute;top:3px;right:3px;width:17px;height:17px;border-radius:5px;background:rgba(20,30,22,.7);color:#e7c7c0;font-size:12px;display:grid;place-items:center} .srp-aniv-di-deco .di-decox:hover{background:#a5342a;color:#fff} .srp-aniv-di-massbox{margin-top:10px;background:var(--di-chrome);border:1px solid var(--di-linha);border-radius:10px;padding:10px} .srp-aniv-di-masslbl{font-size:11px;color:var(--di-mute);margin:0 0 8px} .srp-aniv-di-massbtn{appearance:none;cursor:pointer;background:transparent;color:var(--di-creme);border:0;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;padding:8px 6px;border-radius:8px} .srp-aniv-di-massbtn:hover{background:var(--di-verde,#1e5c30);color:#fff} .srp-aniv-di-massbtn.ghost{color:var(--di-mute)} /* Bloco 10 — Vinheta */ .srp-aniv-di-vpre{display:grid;grid-template-columns:repeat(4,1fr);gap:7px} .srp-aniv-di-vp{appearance:none;cursor:pointer;background:var(--di-chrome2,#16311f);border:1px solid var(--di-linha);border-radius:9px;padding:5px;display:flex;flex-direction:column;align-items:center;gap:4px} .srp-aniv-di-vp.is-on{border-color:var(--di-ouro);box-shadow:0 0 0 1px var(--di-ouro)} .srp-aniv-di-vp .di-vpsw{width:100%;height:30px;border-radius:5px;border:1px solid rgba(0,0,0,.3)} .srp-aniv-di-vp .di-vplbl{font-size:9.5px;color:var(--di-mute);font-family:'Oswald',sans-serif;letter-spacing:.03em;text-align:center;line-height:1.1} .srp-aniv-di-vp.is-on .di-vplbl{color:var(--di-creme)} .srp-aniv-di-vcol{appearance:none;cursor:pointer;background:transparent;color:var(--di-mute);border:0;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;padding:7px;border-radius:8px} .srp-aniv-di-vcol.is-on{background:var(--di-verde,#1e5c30);color:#fff} .srp-aniv-di-vcolwrap{display:flex;align-items:center;gap:8px} .srp-aniv-di-vcolwrap input[type=color]{width:44px;height:30px;padding:2px;border-radius:8px;background:var(--di-chrome);border:1px solid var(--di-linha);cursor:pointer} /* ============================================================ * v5.9.0 — Paletas comemorativas + reset de cor do decorativo * ============================================================ */ .srp-aniv-di-palgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px} .srp-aniv-di-pal{position:relative;background:var(--di-chrome2,#16311f);border:1px solid var(--di-linha);border-radius:11px; padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left} .srp-aniv-di-pal:hover{border-color:var(--di-ouro)} .srp-aniv-di-pal.is-on{border-color:var(--di-ouro);box-shadow:0 0 0 1px var(--di-ouro)} .srp-aniv-di-pal .di-palsw{display:flex;height:28px;border-radius:6px;overflow:hidden;border:1px solid rgba(0,0,0,.3)} .srp-aniv-di-pal .di-palsw i{flex:1} .srp-aniv-di-pal .di-pallbl{font-family:'Oswald',sans-serif;font-size:10.5px;letter-spacing:.02em;color:var(--di-txt); line-height:1.15;overflow:hidden;text-overflow:ellipsis} .srp-aniv-di-pal.is-on .di-pallbl{color:var(--di-creme)} .srp-aniv-di-pal .di-palx{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:5px; background:rgba(20,30,22,.75);color:#e7c7c0;font-size:11px;display:grid;place-items:center;line-height:1} .srp-aniv-di-pal .di-palx:hover{background:#a5342a;color:#fff} .srp-aniv-di-elctrl .di-tint{width:44px;height:28px;padding:2px;border-radius:8px;background:var(--di-chrome); border:1px solid var(--di-linha);cursor:pointer;vertical-align:middle;margin-left:8px} .srp-aniv-di-elctrl .di-tintreset{appearance:none;cursor:pointer;background:transparent;border:1px solid var(--di-linha); color:var(--di-mute);border-radius:7px;width:28px;height:28px;font-size:14px;margin-left:6px;vertical-align:middle} .srp-aniv-di-elctrl .di-tintreset:hover{border-color:var(--di-ouro);color:var(--di-ouro)} /* ============================================================ * v5.10.0 — Painel "Curso de hoje / próximos 7 dias" * ============================================================ */ .srp-aniv-di-cursos{display:flex;flex-direction:column;gap:8px} .srp-aniv-di-curso{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;text-align:left; background:var(--di-chrome2,#16311f);border:1px solid var(--di-linha);border-radius:10px;padding:9px 11px;cursor:pointer; appearance:none;font-family:'DM Sans',sans-serif;color:var(--di-txt)} .srp-aniv-di-curso:hover{border-color:var(--di-ouro)} .srp-aniv-di-curso.is-on{border-color:var(--di-ouro);box-shadow:0 0 0 1px var(--di-ouro)} .srp-aniv-di-curso .di-curso-info{min-width:0} .srp-aniv-di-curso .di-curso-info b{display:block;color:var(--di-creme,#f5efe3);font-size:13px;line-height:1.2; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .srp-aniv-di-curso .di-curso-info small{display:block;color:var(--di-mute,#9db09a);font-size:11px;margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .srp-aniv-di-curso .di-curso-when{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:.05em;text-transform:uppercase; padding:3px 9px;border-radius:999px;white-space:nowrap;flex:none} .srp-aniv-di-curso .di-curso-when.hoje{background:var(--di-ouro,#c8a84b);color:var(--di-mata,#0f3a1e)} .srp-aniv-di-curso .di-curso-when.dias{background:rgba(200,168,75,.16);color:var(--di-ouro-claro,#e6c675);border:1px solid var(--di-linha)} .srp-aniv-di-btn.gold:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3)} /* ============================================================ * v5.11.0 — Responsividade total, quebra de palavra e Artes prontas * ============================================================ */ /* (1) TEXTOS LIVRES: nunca vazam na horizontal — quebra de palavra + hífen. * Corrige o card do modelo "Curso de hoje" com títulos longos. */ .srp-aniv-di-art .di-el-txt, .srp-aniv-di-art .di-el-txt .di-eltext{ overflow-wrap:anywhere; word-break:break-word; -webkit-hyphens:auto; hyphens:auto; max-width:100%; } /* (2) RESPONSIVO: o shell travado do Estúdio de Datas e o modo tela cheia * empilham controles + palco e liberam rolagem em telas estreitas. * Sem isto, o grid de 2 colunas fixas estourava a largura no celular. */ @media (max-width:820px){ /* shell travado (aba Datas ativa em tela cheia) — destrava a rolagem */ .srp-aniv.srp-aniv--fs.srp-aniv--datas{ overflow:auto; } .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-panel-tab[data-srp-panel="aviso"]{ display:block; } .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-di, .srp-aniv-di.srp-aniv-di--full, .srp-aniv:not(.srp-aniv--fs) .srp-aniv-panel-tab[data-srp-panel="aviso"] .srp-aniv-di{ grid-template-columns:1fr; align-items:start; } .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-di-side, .srp-aniv-di.srp-aniv-di--full .srp-aniv-di-side{ max-height:none; overflow:visible; } .srp-aniv.srp-aniv--fs.srp-aniv--datas .srp-aniv-di-stage, .srp-aniv-di.srp-aniv-di--full .srp-aniv-di-stage{ min-height:56vh; overflow:visible; } /* o trilho lateral de "próximas datas" vira faixa acima do palco */ .srp-aniv-di-rail{ position:static; width:auto; max-height:none; } } /* (3) SEGURANÇA: qualquer canvas/arte respeita a largura do container */ .srp-aniv canvas, .srp-aniv img{ max-width:100%; } .srp-aniv-canvas-wrap canvas, .srp-aniv-preview canvas{ max-width:100%; height:auto; } /* (4) ARTES PRONTAS — reaproveitamento de artes existentes (Stories + Feed) */ .srp-aniv-prontas{ display:flex; flex-direction:column; gap:18px; } .srp-aniv-prontas-intro{ box-shadow:0 8px 26px rgba(20,40,25,.06); } .srp-aniv-prontas-fmt{ display:inline-flex; gap:4px; margin-top:14px; background:var(--srp-creme); border:1px solid var(--srp-creme-2); border-radius:11px; padding:4px; } .srp-aniv-prontas-fbtn{ appearance:none; border:0; background:transparent; cursor:pointer; font:600 13px 'DM Sans',system-ui,sans-serif; color:#5a6a5c; padding:8px 14px; border-radius:8px; } .srp-aniv-prontas-fbtn.is-on{ background:var(--srp-verde); color:#fff; } .srp-aniv-prontas-fbtn:focus-visible{ outline:2px solid var(--srp-ouro); outline-offset:2px; } .srp-aniv-prontas-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; align-items:start; } .srp-aniv-prontas-card{ background:#fff; border:1px solid var(--srp-creme-2); border-radius:16px; padding:14px; box-shadow:0 8px 26px rgba(20,40,25,.06); display:flex; flex-direction:column; gap:12px; } .srp-aniv-prontas-card[hidden]{ display:none; } .srp-aniv-prontas-drop{ border:2px dashed #c9d3c4; border-radius:14px; padding:12px; cursor:pointer; transition:.16s; display:flex; align-items:center; justify-content:center; background:#fbfdfa; } .srp-aniv-prontas-drop:hover, .srp-aniv-prontas-drop.is-hot{ border-color:var(--srp-verde); background:#f2f7f0; } .srp-aniv-prontas-drop:focus-visible{ outline:2px solid var(--srp-ouro); outline-offset:2px; } .srp-aniv-prontas-frame{ width:100%; max-width:220px; margin:0 auto; border-radius:12px; overflow:hidden; position:relative; background:linear-gradient(160deg,#eef2ec,#e2eae0); border:1px solid #dbe4d8; display:flex; align-items:center; justify-content:center; } .srp-aniv-prontas-frame--stories{ aspect-ratio:1080/1920; } .srp-aniv-prontas-frame--feed{ aspect-ratio:1080/1350; } .srp-aniv-prontas-frame--feedq{ aspect-ratio:1/1; } .srp-aniv-prontas-ph{ color:#9fb09f; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; font:500 12px 'DM Sans',system-ui,sans-serif; padding:12px; } .srp-aniv-prontas-img{ width:100%; height:100%; object-fit:cover; display:block; } .srp-aniv-prontas-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .srp-aniv-prontas-fmtlbl{ font:600 12px 'Oswald',sans-serif; letter-spacing:.08em; color:var(--srp-verde); text-transform:uppercase; } .srp-aniv-prontas-fmtlbl small{ display:block; font:400 11px 'DM Sans',system-ui,sans-serif; letter-spacing:.02em; color:#8b9a8b; text-transform:none; } .srp-aniv-prontas-actions{ display:flex; gap:8px; } .srp-aniv-prontas .srp-aniv-prontas-actions .srp-aniv-di-btn{ padding:9px 13px; font-size:12.5px; } .srp-aniv-prontas-note{ margin-top:2px; } @media (max-width:560px){ .srp-aniv-prontas-grid{ grid-template-columns:1fr; } .srp-aniv-prontas-frame{ max-width:200px; } } /* ============================================================ * v5.12.0 — Cursos (90 dias): busca + grupos por prazo, * catálogo de logos e wrapper da aba "Agenda SENAR". * ============================================================ */ .srp-aniv-di-cursobusca{width:100%;margin:0 0 10px;background:var(--di-chrome2,#16311f);color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;caret-color:#FFFFFF; border:1px solid var(--di-linha);border-radius:8px;padding:9px 10px;font-family:'DM Sans',sans-serif;font-size:13px} .srp-aniv-di-cursobusca::placeholder{color:#cfe0c9 !important;-webkit-text-fill-color:#cfe0c9 !important;opacity:1} .srp-aniv-di-cursobusca:focus{outline:2px solid var(--di-ouro);outline-offset:1px;border-color:var(--di-ouro)} .srp-aniv-di-cursogrp{font-family:'Oswald',sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--di-ouro);margin:12px 0 3px;padding-bottom:4px;border-bottom:1px solid var(--di-linha)} .srp-aniv-di-cursogrp:first-child{margin-top:2px} /* v5.13.0 — curso com card salvo: selo "✓ salvo" e realce da linha */ .srp-aniv-di-curso.tem-card{border-color:rgba(200,168,75,.5)} .srp-aniv-di-curso .di-curso-salvo{display:inline-block;margin-left:7px;font-family:'Oswald',sans-serif;font-size:9.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--di-mata,#0f3a1e);background:var(--di-ouro,#c8a84b); border-radius:999px;padding:1px 7px;vertical-align:middle;font-weight:600} .srp-aniv-di-btn.gold.is-open{background:linear-gradient(180deg,#2e7d43,#1e5c30);color:#f5efe3;border-color:#1e5c30} /* Catálogo de logos (bloco 07) */ .srp-aniv-di-logocat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px} .srp-aniv-di-logoitem{position:relative;padding:0;border:2px solid var(--di-linha);border-radius:10px;background:#fff; cursor:pointer;overflow:hidden;aspect-ratio:16/10;display:grid;place-items:center;transition:.12s;appearance:none} .srp-aniv-di-logoitem.dark{background:var(--di-mata,#0f3a1e)} .srp-aniv-di-logoitem:hover{border-color:var(--di-ouro)} .srp-aniv-di-logoitem.sel{border-color:var(--di-ouro);box-shadow:0 0 0 2px rgba(200,168,75,.4)} .srp-aniv-di-logoitem img{max-width:82%;max-height:64%;object-fit:contain;display:block} .srp-aniv-di-logoitem-lbl{position:absolute;left:0;right:0;bottom:0;padding:2px 3px;text-align:center; font-family:'Oswald',sans-serif;font-size:8px;letter-spacing:.04em;text-transform:uppercase; color:#123;background:rgba(255,255,255,.74);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .srp-aniv-di-logoitem.dark .srp-aniv-di-logoitem-lbl{color:#eafaf0;background:rgba(0,0,0,.38)} @media (max-width:560px){ .srp-aniv-di-logocat{grid-template-columns:repeat(2,1fr)} } /* Aba Agenda SENAR — a agenda pública do srp-cursos herda o próprio CSS; * aqui só damos respiro ao contêiner. */ .srp-aniv-agenda-wrap{padding:4px 2px} .srp-aniv-agenda-wrap .srp-agenda{margin:0} /* ============================================================ * v5.16.0 — Artes prontas → agenda no catálogo de Datas. * Uploader único clicável, toggle Stories/Feed na prévia e * agendamento (mês + data/evento, com cursos SENAR na lista). * ============================================================ */ .srp-aniv-pr2{display:flex;flex-direction:column;gap:16px} .srp-aniv-pr2-work{display:grid;grid-template-columns:minmax(0,480px) 1fr;gap:16px;align-items:start} @media (max-width:900px){.srp-aniv-pr2-work{grid-template-columns:1fr}} .srp-aniv-pr2-up,.srp-aniv-pr2-sched{background:var(--srp-verde-2,#0f3a1e);border:1px solid var(--di-linha,rgba(200,168,75,.22));border-radius:14px;padding:16px} /* v5.20.0 — dois slots lado a lado (Stories 9:16 / Feed 4:5) */ .srp-aniv-pr2-slots{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} .srp-aniv-pr2-slot{display:flex;flex-direction:column;gap:8px;min-width:0} .srp-aniv-pr2-slotcab{display:flex;align-items:baseline;justify-content:space-between;gap:6px} .srp-aniv-pr2-slotnome{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#fff;font-weight:600;font-size:13px} .srp-aniv-pr2-slotspec{font-family:'Oswald',sans-serif;letter-spacing:.02em;color:var(--di-ouro-claro,#e6c675);font-size:10.5px;white-space:nowrap} .srp-aniv-pr2-drop{border:2px dashed var(--di-ouro,#c8a84b);border-radius:14px;background:var(--di-chrome2,#16311f);cursor:pointer;overflow:hidden; display:grid;place-items:center;text-align:center;transition:.15s;width:100%;max-height:58vh;position:relative} .srp-aniv-pr2-drop.is-stories{aspect-ratio:9/16} .srp-aniv-pr2-drop.is-feed{aspect-ratio:4/5} .srp-aniv-pr2-drop:hover{background:#194127;border-color:var(--di-ouro-claro,#e6c675)} .srp-aniv-pr2-drop.is-hot{background:#1d4a2c;border-color:var(--di-ouro-claro,#e6c675);box-shadow:0 0 0 4px rgba(200,168,75,.18)} .srp-aniv-pr2-drop.has-art{border-style:solid;cursor:default} .srp-aniv-pr2-drop:focus-visible{outline:2px solid var(--di-ouro,#c8a84b);outline-offset:2px} .srp-aniv-pr2-ph{padding:18px 12px;color:#cfe0c9;display:flex;flex-direction:column;align-items:center;gap:6px} .srp-aniv-pr2-ph svg{color:var(--di-ouro,#c8a84b)} .srp-aniv-pr2-ph span{font-family:'Oswald',sans-serif;letter-spacing:.03em;font-size:12.5px} .srp-aniv-pr2-ph small{display:block;color:#9db09a;font-size:10.5px;letter-spacing:.02em;margin-top:3px} .srp-aniv-pr2-img{width:100%;height:100%;object-fit:cover;display:block} .srp-aniv-pr2-rem{position:absolute;top:7px;right:7px;width:28px;height:28px;border:none;border-radius:50%; background:rgba(11,22,16,.72);color:#fff;font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center; transition:.12s;z-index:2} .srp-aniv-pr2-rem:hover{background:rgba(11,22,16,.92)} .srp-aniv-pr2-rem:focus-visible{outline:2px solid var(--di-ouro,#c8a84b);outline-offset:2px} .srp-aniv-pr2-dl{width:100%} .srp-aniv-pr2-h4{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--di-ouro,#c8a84b);font-size:12px;margin:0 0 12px;font-weight:600} .srp-aniv-pr2-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px} .srp-aniv-pr2-field{flex:1 1 150px;min-width:0} .srp-aniv-pr2-field label{display:block;font-size:11.5px;color:#bcd6c1;margin-bottom:4px} .srp-aniv-pr2-field select,.srp-aniv-pr2-field input{width:100%;background:var(--di-chrome2,#16311f);color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important; border:1px solid #3a5a40;border-radius:9px;padding:9px 10px;font-family:'DM Sans',sans-serif;font-size:13px} .srp-aniv-pr2-field select:focus,.srp-aniv-pr2-field input:focus{outline:2px solid var(--di-ouro,#c8a84b);outline-offset:1px;border-color:var(--di-ouro,#c8a84b)} .srp-aniv-pr2-field input::placeholder{color:#8aa091} .srp-aniv-pr2-fmtsched{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 12px} .srp-aniv-pr2-fmtlbl{font-size:12px;color:#bcd6c1} /* v5.20.0 — chips que acendem conforme o slot tem arte */ .srp-aniv-pr2-chip{display:inline-flex;align-items:center;gap:7px;background:var(--di-chrome2,#16311f);border:1px solid #3a5a40;border-radius:999px; padding:6px 12px;font-family:'Oswald',sans-serif;letter-spacing:.04em;font-size:12px;color:#9db09a;opacity:.62;transition:.14s} .srp-aniv-pr2-chip i{width:9px;height:9px;border-radius:50%;background:#6a7d69;transition:.14s} .srp-aniv-pr2-chip small{font-size:9.5px;letter-spacing:.02em;color:#8aa091} .srp-aniv-pr2-chip.is-on{opacity:1;border-color:var(--di-ouro,#c8a84b);color:#fff} .srp-aniv-pr2-chip.is-on i{background:var(--di-ouro,#c8a84b)} .srp-aniv-pr2-chip.is-on small{color:var(--di-ouro-claro,#e6c675)} .srp-aniv-pr2-note{color:#6a7a63} /* nos slots o dois-colunas se mantém (pedido do usuário); só reduz folga em telas muito estreitas */ @media (max-width:420px){.srp-aniv-pr2-slots{gap:8px}.srp-aniv-pr2-ph span{font-size:11px}.srp-aniv-pr2-ph small{display:none}.srp-aniv-pr2-dl{font-size:11px;padding:8px 4px}} /* cursos no rail "Próximas datas" — categoria verde (v5.19.0) */ .di-railh--curso{margin-top:12px;color:var(--di-verde-agenda,#83cf91)} .srp-aniv-di-rail .di-railcurso{border-left-color:rgba(131,207,145,.45)} .srp-aniv-di-rail .di-railcurso:hover{background:rgba(131,207,145,.10)} .srp-aniv-di-rail .di-railcurso.hoje{background:rgba(131,207,145,.16);border-left-color:var(--di-verde-agenda,#83cf91)} .srp-aniv-di-rail .di-railcurso.hoje .di-rw{color:var(--di-verde-agenda,#83cf91)} /* v5.17.0 — aviso discreto de sincronização (dados atualizados do srp-cursos) */ .srp-aniv-synctoast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);z-index:100000; background:#0f3a1e;color:#f5efe3;border:1px solid #c8a84b;border-radius:999px;padding:9px 18px;font-family:'Oswald',sans-serif; font-size:13px;letter-spacing:.03em;box-shadow:0 10px 30px rgba(15,58,30,.35);opacity:0;pointer-events:none;transition:.28s} .srp-aniv-synctoast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}