/* ═══════════════════════════════════════════════════════════════════════ janela_contexto_v2.css — O PADRÃO ÚNICO DAS JANELAS DE CONTEXTO · Jean · 06/10/2026 (terça) Parte do .rnj (janela_contexto_v1.css, 23/08). Mesmo esqueleto, quatro famílias: (1) diálogo .rnj-overlay--dialogo > .rnj substitui alert / confirm / prompt (2) folha/cartão .rnj-overlay > .rnj.rnj--p | --m | --cheia folha no celular · cartão centrado em ≥1024 (3) balão «?» .rnj-balao (Mac, ancorado ao rn-ajuda) · no celular é a família 2 em --m com .rnj--info (4) aviso rápido .rnj-toast some sozinho; «Desfazer» quando houver Alternativa B da família 2: .rnj-overlay--flutua — a folha vira cartão que sobe (4 cantos, 10px das bordas). Cor: chumbo A, acabamento «1 · Madrepérola fechada» (prancha_3_nacares.html, .n1). Nenhuma névoa dourada. Acento por contexto: OURO = a janela pede uma DECISÃO (padrão) · AZUL (.rnj--info) = a janela EXPLICA ou INFORMA. Troca folha→cartão SÓ em 1024px. O 900 morre. Carregar DEPOIS de css/montagem_v5.css. Prefixo rnj-, zero colisão. PORTE (fatia 1, 07/10): emendas da conversa_preporte marcadas «porte fatia 1». Fatia 8 (07/10): o v1 saiu do index e o apelido .rnj--g foi apagado. Esqueleto canônico: Fechar: tirar .open (como hoje). Saída animada: pôr .closing e tirar .open ~190ms depois. ═══════════════════════════════════════════════════════════════════════ */ /* ── 0 · OS TOKENS (uma vez só, pras quatro famílias) ────────────────────── */ :root{ --rnj-veu:rgba(8,6,4,.58); /* UM véu. Morrem os outros 13. */ --rnj-veu-blur:12px; --rnj-r:18px; /* raio da janela (diálogo, cartão, folha no topo) — 18 é dos cards; 20 é da IA */ --rnj-r-ctl:12px 12px 12px 6px; /* botão · toast · balão (o primário espelha: 12 12 6 12) */ --rnj-r-chip:9px 9px 9px 4px; /* fechar · ação do toast · chip */ --rnj-z-folha:10200; /* folha / cartão / balão-folha */ --rnj-z-dialogo:10300; /* diálogo — sempre por cima de uma folha */ --rnj-z-toast:10400; /* toast — por cima de tudo que é janela, nunca recebe foco */ --rnj-z-teclado:10500; /* o teclado próprio do app (#wkbKeypad) — é instrumento, não janela: acima de todas */ --rnj-w-p:400px;--rnj-w-m:480px;--rnj-w-g:640px; /* larguras do cartão (Mac) e do diálogo (P) */ --rnj-h-p:340px;--rnj-h-m:560px; /* alturas FIXAS da folha (celular) */ --rnj-h-cheia:calc(100dvh - var(--topo-seguro,32px)); /* cheia: até a linha do topo seguro */ --rnj-folga-teclado:32px; /* FOLGA_TECLADO — o campo pousa aqui */ --rnj-chumbo-1:#262421;--rnj-chumbo-0:#1c1b19; --rnj-tinta:238,231,218;--rnj-rose:232,170,150;--rnj-champ:236,214,170; --rnj-text:#eee7da;--rnj-text2:#c8bfb0;--rnj-text3:#b1a99a;--rnj-ouro-txt:#e2c25e; --rnj-ouro:#c9a227;--rnj-azul:#5b8def;--rnj-verm:#f0616b;--rnj-limao:#fde047;--rnj-verde:#3ddc97; --rnj-ease:cubic-bezier(.23,1,.32,1); --rnj-ui:'Jost','Avenir Next',system-ui,-apple-system,'Segoe UI',sans-serif;--rnj-serif:'Playfair Display',Georgia,serif; } /* ── 1 · O VÉU ──────────────────────────────────────────────────────────── */ .rnj-overlay{display:none;position:fixed;inset:0;z-index:var(--rnj-z-folha);align-items:flex-end;justify-content:center;padding:0;background:var(--rnj-veu);-webkit-backdrop-filter:blur(var(--rnj-veu-blur)) saturate(115%);backdrop-filter:blur(var(--rnj-veu-blur)) saturate(115%)} .rnj-overlay.open{display:flex;animation:rnjVeu .22s var(--rnj-ease) both} .rnj-overlay.closing{animation:rnjVeuSai .18s var(--rnj-ease) both} .rnj-overlay--dialogo{z-index:var(--rnj-z-dialogo);align-items:center;padding:16px} .rnj-overlay--flutua{padding:0 10px calc(env(safe-area-inset-bottom,0px) + 10px)} /* C-1167: padding:0 no véu e max-height:var(--rnj-h-cheia) na placa calam o v1 (padding 20/12px e max-height 86–88dvh vazavam em toda janela v2 abaixo de 1024: a cheia não encostava). --dialogo, --flutua e o Mac redeclaram depois. */ /* teclado aberto: o véu encosta no teclado, a janela encolhe, o pé some (nenhum botão entre o campo e o teclado), o campo pousa a 32px */ .rnj-overlay.com-teclado{bottom:var(--rnj-teclado,0px)} .rnj-overlay.com-teclado .rnj{height:auto;max-height:calc(100% - var(--topo-seguro,32px))} .rnj-overlay.com-teclado .rnj-foot{display:none} .rnj-overlay.com-teclado .rnj-body{padding-bottom:var(--rnj-folga-teclado)} /* ── 2 · A PLACA: chumbo + madrepérola fechada + aro champanhe ──────────── */ .rnj{--rnj-acc:var(--rnj-ouro);--rnj-glow:201,162,39;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:var(--rnj-h-cheia);color:var(--rnj-text);font:400 var(--fs-sm,14.5px)/1.5 var(--rnj-ui);-webkit-font-smoothing:antialiased; border:1px solid transparent;border-bottom:0;border-radius:var(--rnj-r) var(--rnj-r) 0 0; background:linear-gradient(160deg,var(--rnj-chumbo-1) 0%,var(--rnj-chumbo-0) 100%) padding-box, linear-gradient(150deg,rgba(var(--rnj-champ),.48) 0%,rgba(255,255,255,.28) 34%,rgba(255,255,255,.22) 100%) border-box; /* o aro: champanhe onde a luz bate, prata-fria no resto */ box-shadow:0 -22px 60px -26px rgba(0,0,0,.85),inset 0 1px 0 rgba(var(--rnj-tinta),.07)} /* o lábio: 1px de tinta no topo = relevo */ .rnj--info{--rnj-acc:var(--rnj-azul);--rnj-glow:91,141,239} /* a matéria (.n1): rosé no alto-esquerdo, champanhe no pé-direito, brilho a 118°, grão 2,5% — tudo pointer-events:none */ .rnj::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background:radial-gradient(70% 60% at 16% 10%,rgba(var(--rnj-rose),.04),transparent 62%), radial-gradient(70% 55% at 70% 104%,rgba(var(--rnj-champ),.03),transparent 62%), linear-gradient(118deg,rgba(var(--rnj-tinta),.06) 0%,rgba(var(--rnj-tinta),.021) 28%,transparent 48%)} .rnj::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:.025;background-size:180px 180px;background-image:url("data:image/svg+xml;utf8,")} .rnj>*{position:relative;z-index:1} .rnj-overlay.open .rnj{animation:rnjSobe .32s var(--rnj-ease) both} .rnj-overlay.closing .rnj{animation:rnjDesce .18s var(--rnj-ease) both} /* a chegada em três tempos: a placa pousa · o fio acende · o conteúdo assenta */ .rnj-overlay.open .rnj-head{animation:rnjAssenta .36s var(--rnj-ease) .06s both} .rnj-overlay.open .rnj-body{animation:rnjAssenta .36s var(--rnj-ease) .10s both} .rnj-overlay.open .rnj-foot{animation:rnjAssenta .36s var(--rnj-ease) .14s both} /* ── 3 · O FIO: a alça da folha, o traço do agora da janela ─────────────── */ .rnj-fio{position:absolute;top:8px;left:50%;z-index:2;width:44px;height:3px;transform:translateX(-50%);border-radius:2px;background:var(--rnj-acc); box-shadow:0 0 2px rgba(var(--rnj-glow),.9),0 0 10px rgba(var(--rnj-glow),.55),0 0 22px rgba(var(--rnj-glow),.25)} .rnj-fio::before{content:"";position:absolute;inset:-18px -40px} /* alça: toque 44 pra arrastar e fechar */ .rnj-overlay.open .rnj-fio{animation:rnjFio .5s var(--rnj-ease) .16s both} .rnj-overlay.closing .rnj-fio{animation:rnjFioSai .14s var(--rnj-ease) both} /* ── 4 · CABEÇA · CORPO · PÉ ───────────────────────────────────────────── */ .rnj-head{display:flex;align-items:center;gap:12px;padding:24px 20px 0;flex:none} .rnj-titles{flex:1;min-width:0;display:flex;flex-direction:column-reverse;gap:5px} .rnj-title{margin:0;font:500 var(--fs-xl,22px)/1.2 var(--rnj-serif);color:var(--rnj-text);text-wrap:balance} .rnj-eyebrow{display:flex;align-items:center;gap:8px;font:500 var(--fs-micro,11.5px)/1.2 var(--rnj-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--rnj-ouro-txt)} .rnj--info .rnj-eyebrow{color:var(--rnj-text2)} /* azul em texto não passa 4,5 no pior pixel: azul só no fio e no traço */ .rnj-eyebrow::before{content:"";width:14px;height:1.5px;border-radius:1px;flex:none;background:linear-gradient(90deg,var(--rnj-acc),rgba(var(--rnj-glow),0))} .rnj-close{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:var(--rnj-r-chip);background:rgba(255,255,255,.02);color:var(--rnj-text2);cursor:pointer;transition:all .18s var(--rnj-ease);align-self:flex-start;margin-top:-2px} .rnj-close::before{content:"";position:absolute;inset:-7px} /* toque 46 */ .rnj-close .i{width:16px;height:16px} .rnj-close:hover{color:var(--rnj-text);border-color:rgba(255,255,255,.28)} /* o Voltar padrão (#wkhVoltar): 40px, cantos 11 11 11 5, seta + «Voltar»; toque 44 pelo ::before */ .rnj-voltar{position:relative;flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 10px;border:1px solid rgba(255,255,255,.18);border-radius:11px 11px 11px 5px;background:rgba(255,255,255,.02);color:var(--rnj-text2);font:400 var(--fs-xs,13px)/1 var(--rnj-ui);letter-spacing:.04em;cursor:pointer;align-self:flex-start} .rnj-voltar::before{content:"";position:absolute;inset:-2px} .rnj-voltar .i{width:14px;height:14px} .rnj-body{padding:12px 20px 4px;color:var(--rnj-text2);font-size:var(--fs-sm,14.5px);line-height:1.5;text-wrap:pretty} .rnj-body p{margin:0 0 10px} .rnj-body>:last-child{margin-bottom:0} .rnj-body b{color:var(--rnj-text);font-weight:500} .rnj-lead{color:var(--rnj-text);font-size:var(--fs-md,16px)} /* a primeira frase, quando o título é curto */ .rnj-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:18px 20px calc(env(safe-area-inset-bottom,0px) + 18px);flex:none} .rnj-foot--par>.rnj-btn{flex:1} .rnj-foot--3>.rnj-btn{flex:1} .rnj-foot--3>.rnj-btn--primary{flex:1 0 100%;order:3} /* 3 saídas: os dois fantasmas numa linha, o primário inteiro embaixo — cancelar antes do primário, sempre */ /* ── 5 · BOTÕES: cancelar → primário; ouro decide · fantasma recusa · vermelho destrói ── */ .rnj-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border:1px solid transparent;border-radius:var(--rnj-r-ctl);background:none;color:var(--rnj-text);font:500 var(--fs-md,16px)/1.2 var(--rnj-ui);letter-spacing:.01em;cursor:pointer;white-space:nowrap;text-align:center;transition:all .18s var(--rnj-ease)} .rnj-btn--ghost{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.02)} .rnj-btn--ghost:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)} .rnj-btn--primary{background:var(--rnj-ouro);color:#0a0806;border-radius:12px 12px 6px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)} /* o par se encara: fantasma corta embaixo-esquerda, ouro embaixo-direita */ .rnj-btn--primary:hover{filter:brightness(1.06)} .rnj-btn--danger{background:var(--rnj-verm);color:#0a0806;border-radius:12px 12px 6px 12px} .rnj-btn--primary small,.rnj-btn--danger small{display:block;font:400 var(--fs-xs,13px)/1.1 var(--rnj-ui);opacity:.78;margin-top:2px} .rnj-btn:focus-visible{outline:2px solid rgba(226,194,94,.75);outline-offset:2px} .rnj-btn:active{transform:translateY(1px)} .rnj-btn[disabled]{opacity:.45;pointer-events:none} /* esperando (entre o toque e a resposta): o rótulo brilha, nada mais mexe, nada mais toca */ .rnj-btn.esperando{pointer-events:none} .rnj-btn.esperando .rnj-shimmer{background:linear-gradient(90deg,#0a0806 30%,rgba(10,8,6,.35) 50%,#0a0806 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rnjShimmer 1.9s linear infinite} .rnj.esperando .rnj-close,.rnj.esperando .rnj-voltar{visibility:hidden} /* ── 6 · VOCABULÁRIO DE CORPO ──────────────────────────────────────────── */ .rnj-field{margin-top:14px} .rnj-field:first-child{margin-top:2px} .rnj-field>label{display:block;font:500 var(--fs-micro,11.5px)/1.2 var(--rnj-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--rnj-text3);margin-bottom:7px} .rnj-field input,.rnj-field select,.rnj-field textarea{width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border:1px solid rgba(255,255,255,.18);border-radius:11px 11px 11px 5px;background:rgba(0,0,0,.26);color:var(--rnj-text);font:400 var(--fs-md,16px)/1.3 var(--rnj-ui);caret-color:var(--rnj-ouro-txt);transition:border-color .18s,box-shadow .18s} .rnj-field input:focus,.rnj-field .foco,.rnj-field select:focus,.rnj-field textarea:focus{outline:none;border-color:var(--rnj-ouro);background:rgba(201,162,39,.07);box-shadow:0 0 0 1px rgba(201,162,39,.3)} .rnj-field ::placeholder{color:var(--rnj-text3)} .rnj-hint{margin-top:6px;font:400 var(--fs-xs,13px)/1.45 var(--rnj-ui);color:var(--rnj-text3)} /* o poço: tudo que é lista, grade ou legenda dentro da placa fica num nível abaixo — é o que faz o chumbo funcionar na folha cheia */ .rnj-poco{padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:14px 14px 14px 7px;background:rgba(0,0,0,.22)} /* a linha de escolha da casa: texto + ›, 56px, toque inteiro */ .rnj-linha{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:11px 10px 11px 14px;border:1px solid rgba(255,255,255,.18);border-radius:11px 11px 11px 5px;background:rgba(0,0,0,.18);color:var(--rnj-text);font:400 var(--fs-md,16px)/1.3 var(--rnj-ui);text-align:left;cursor:pointer} .rnj-linha+.rnj-linha{margin-top:8px} .rnj-linha .l-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .rnj-linha .l-t small{font:400 var(--fs-xs,13px)/1.35 var(--rnj-ui);color:var(--rnj-text2)} .rnj-linha .l-t small em{font-style:normal;color:var(--rnj-text)} .rnj-linha .l-chev{color:var(--rnj-text3);width:16px;height:16px} .rnj-linha.sel{border-color:rgba(201,162,39,.5);background:rgba(201,162,39,.08)} .rnj-linha .pa{display:block;flex:none;width:7px;height:26px;border-radius:4px} /* a pastilha da cor do aluno — toda lista de aluno leva */ /* status no corpo: sempre ícone + rótulo; nunca cor sozinha; nunca vira fio */ .rnj-status{display:inline-flex;align-items:center;gap:7px;font:500 var(--fs-xs,13px)/1.3 var(--rnj-ui)} .rnj-status .i{width:15px;height:15px} .rnj-status--risco{color:var(--rnj-verm)} .rnj-status--atencao{color:var(--rnj-limao)} .rnj-status--ok{color:var(--rnj-verde)} /* mudou por baixo (a sync redesenhou a tela com a janela aberta): limão + rótulo, o primário trava até reabrir */ .rnj-mudou{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;border:1px solid rgba(253,224,71,.3);border-radius:11px 11px 11px 5px;background:rgba(253,224,71,.05);font:400 var(--fs-xs,13px)/1.4 var(--rnj-ui);color:var(--rnj-text)} .rnj-mudou .i{width:15px;height:15px;color:var(--rnj-limao);flex:none;margin-top:1px} .rnj-mudou b{font-weight:500} /* nota de rodapé: itálico + fio tracejado — «não é definitivo» */ .rnj-note{margin:14px 0 0;padding:10px 0 0;border-top:1px dashed rgba(238,231,218,.17);font:italic 400 var(--fs-xs,13px)/1.5 var(--rnj-ui);color:var(--rnj-text2)} .rnj-section{display:flex;align-items:center;gap:8px;margin:16px 0 6px;font:500 var(--fs-micro,11.5px)/1.2 var(--rnj-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--rnj-ouro-txt)} .rnj--info .rnj-section{color:var(--rnj-text2)} .rnj-section::before{content:"";width:14px;height:1.5px;border-radius:1px;background:linear-gradient(90deg,var(--rnj-acc),rgba(var(--rnj-glow),0))} .rnj-legenda{display:flex;flex-wrap:wrap;gap:6px 14px;font:400 var(--fs-xs,13px)/1.3 var(--rnj-ui);color:var(--rnj-text2)} .rnj-legenda span{display:inline-flex;align-items:center;gap:6px} .rnj-legenda i{display:inline-block;width:5px;height:14px;border-radius:2px;background:var(--rnj-text2)} .rnj-legenda i.vazio{background:none;border:1px solid var(--rnj-text3)} /* ── 7 · OS TRÊS TAMANHOS DA FOLHA (celular): P 340 · M 560 · cheia ─────── */ .rnj--p{height:var(--rnj-h-p)} .rnj--m{height:var(--rnj-h-m)} .rnj--cheia{height:var(--rnj-h-cheia)} .rnj--p .rnj-body,.rnj--m .rnj-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain} .rnj--cheia .rnj-head{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08)} .rnj--cheia .rnj-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 20px;scrollbar-width:thin;scrollbar-color:rgba(var(--rnj-glow),.28) transparent; -webkit-mask:linear-gradient(180deg,transparent,#000 14px,#000 calc(100% - 18px),transparent);mask:linear-gradient(180deg,transparent,#000 14px,#000 calc(100% - 18px),transparent)} /* o rolo esmaece nas bordas: diz «tem mais» sem seta */ .rnj--cheia .rnj-foot{border-top:1px solid rgba(255,255,255,.08);padding-top:14px} /* ── 8 · O DIÁLOGO (família 1): centrado nos dois lados, largura P ───────── */ .rnj-overlay--dialogo .rnj{width:min(100%,var(--rnj-w-p));height:auto;max-height:calc(100dvh - 32px);border-bottom:1px solid transparent;border-radius:var(--rnj-r);box-shadow:0 24px 60px rgba(0,0,0,.62),0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(var(--rnj-tinta),.07)} .rnj-overlay--dialogo .rnj-body{max-height:44dvh;overflow:auto;overscroll-behavior:contain} .rnj-overlay--dialogo .rnj-foot{padding-bottom:18px} .rnj-overlay--dialogo .rnj-foot--par>.rnj-btn{flex:1} /* alternativa B (família 2): a folha é um cartão que sobe — 4 cantos, aro inteiro */ .rnj-overlay--flutua .rnj{border-bottom:1px solid transparent;border-radius:var(--rnj-r);box-shadow:0 24px 60px rgba(0,0,0,.62),0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(var(--rnj-tinta),.07)} /* porte fatia 1: apagada a altura do --flutua --cheia (combinação proibida: a cheia é encostada) */ /* ── 9 · O BALÃO «?» (família 3, Mac ≥1024): a mesma placa, ancorada ao rn-ajuda ── */ .rnj-ancora{position:relative;display:inline-flex} .rnj-balao{--rnj-acc:var(--rnj-azul);--rnj-glow:91,141,239;display:none;position:absolute;top:calc(100% + 12px);left:0;z-index:30;width:min(var(--rnj-w-p),calc(100vw - 32px));isolation:isolate;color:var(--rnj-text);font:400 var(--fs-sm,14.5px)/1.5 var(--rnj-ui);text-align:left; border:1px solid transparent;border-radius:var(--rnj-r); background:linear-gradient(160deg,var(--rnj-chumbo-1),var(--rnj-chumbo-0)) padding-box,linear-gradient(150deg,rgba(var(--rnj-champ),.48),rgba(255,255,255,.28) 34%,rgba(255,255,255,.22)) border-box; box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(var(--rnj-tinta),.07)} .rnj-balao::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:radial-gradient(70% 60% at 16% 10%,rgba(var(--rnj-rose),.04),transparent 62%),radial-gradient(70% 55% at 70% 104%,rgba(var(--rnj-champ),.03),transparent 62%),linear-gradient(118deg,rgba(var(--rnj-tinta),.06) 0%,rgba(var(--rnj-tinta),.021) 28%,transparent 48%)} .rnj-balao::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:.025;background-size:180px 180px;background-image:url("data:image/svg+xml;utf8,")} .rnj-balao>*{position:relative;z-index:1} .rnj-balao.open{display:block;animation:rnjSobe .26s var(--rnj-ease) both} .rnj-balao .rnj-fio{left:26px;transform:none;width:28px} /* o fio aponta: fica do lado da âncora */ .rnj-balao.direita{left:auto;right:0} .rnj-balao.direita .rnj-fio{left:auto;right:26px} .rnj-balao .rnj-head{padding-top:22px} .rnj-balao .rnj-title{font-size:var(--fs-lg,18px)} .rnj-balao .rnj-foot{padding:14px 20px 16px} /* ── 10 · O TOAST (família 4): chumbo, aro, fio vertical; nunca foco, nunca bloqueia ── */ .rnj-toast{--rnj-acc:var(--rnj-ouro);--rnj-glow:201,162,39;position:fixed;left:0;right:0;margin:0 auto;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);z-index:var(--rnj-z-toast);transform:translateY(10px); display:flex;align-items:center;gap:12px;width:fit-content;max-width:min(86vw,var(--rnj-w-p));min-height:48px;padding:0 10px 0 14px;color:var(--rnj-text);font:400 var(--fs-sm,14.5px)/1.35 var(--rnj-ui); border:1px solid transparent;border-radius:var(--rnj-r-ctl); background:linear-gradient(160deg,var(--rnj-chumbo-1),var(--rnj-chumbo-0)) padding-box,linear-gradient(150deg,rgba(var(--rnj-champ),.48),rgba(255,255,255,.26) 40%,rgba(255,255,255,.2)) border-box; box-shadow:0 14px 34px -14px rgba(0,0,0,.85),inset 0 1px 0 rgba(var(--rnj-tinta),.07);opacity:0;pointer-events:none;transition:opacity .22s var(--rnj-ease),transform .22s var(--rnj-ease)} .rnj-toast.show{opacity:1;transform:none} .rnj-toast.saindo{opacity:0;transform:translateY(8px)} .rnj-toast--info{--rnj-acc:var(--rnj-azul);--rnj-glow:91,141,239} /* erro (Raphael 06/10: «vermelho»): fio vermelho + ícone de alerta (status sempre com ícone) */ .rnj-toast--erro{--rnj-acc:var(--rnj-verm);--rnj-glow:240,97,107} /* porte fatia 3: o diálogo de erro segue a mesma decisão — fio e traço vermelhos; o texto do eyebrow não fica vermelho (vermelho é status, sempre com rótulo) */ .rnj--erro{--rnj-acc:var(--rnj-verm);--rnj-glow:240,97,107} .rnj--erro .rnj-eyebrow{color:var(--rnj-text2)} .rnj-toast .rnj-toast-ico{flex:none;width:18px;height:18px;color:var(--rnj-verm)} .rnj-toast .rnj-fio{position:static;transform:none;width:3px;height:22px;flex:none;border-radius:2px} .rnj-toast .rnj-fio::before{display:none} .rnj-toast .rnj-toast-t{padding:12px 0;text-wrap:pretty} .rnj-toast .rnj-toast-t b{font-weight:500} .rnj-toast .rnj-toast-acao{pointer-events:auto;position:relative;min-height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.18);border-radius:var(--rnj-r-chip);background:rgba(255,255,255,.02);color:var(--rnj-ouro-txt);font:500 var(--fs-sm,14.5px)/1 var(--rnj-ui);cursor:pointer;white-space:nowrap} .rnj-toast .rnj-toast-acao::before{content:"";position:absolute;inset:-5px} /* toque 46 */ .rnj-toast .rnj-toast-x{pointer-events:auto;position:relative;width:32px;height:32px;display:grid;place-items:center;border:0;background:none;color:var(--rnj-text3);cursor:pointer} .rnj-toast .rnj-toast-x .i{width:14px;height:14px} /* com janela aberta, o toast sobe pro topo: nunca cobre o pé da janela */ /* porte fatia 1, conserto (i): Desfazer fantasma — toast escondido não recebe toque em nada */ .rnj-toast:not(.show) *{pointer-events:none} body.rnj-aberta .rnj-toast{bottom:auto;top:calc(var(--topo-seguro,32px) + 8px);transform:translateY(-10px)} body.rnj-aberta .rnj-toast.show{transform:none} /* ── 11 · MAC ≥1024 (o único ponto de corte): a folha vira cartão centrado; P/M/G são larguras ── */ @media (min-width:1024px) and (min-height:501px), (min-width:1024px) and (pointer:fine){ .rnj-overlay{align-items:center;padding:28px} .rnj-overlay--flutua{padding:28px} .rnj{height:auto;max-height:min(86dvh,780px);border-bottom:1px solid transparent;border-radius:var(--rnj-r);box-shadow:0 24px 60px rgba(0,0,0,.62),0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(var(--rnj-tinta),.07)} .rnj--p{width:var(--rnj-w-p);max-width:var(--rnj-w-p)} .rnj--m{width:var(--rnj-w-m);max-width:var(--rnj-w-m)} .rnj--cheia{width:var(--rnj-w-g);max-width:var(--rnj-w-g);height:auto} /* porte fatia 1: Mac sem altura fixa (Raphael) — fica só o max-height */ /* porte fatia 1: apagada a altura do --flutua --cheia (combinação proibida) */ .rnj-fio::before{display:none} /* no Mac não se arrasta: o fio é só o acento */ .rnj-foot{padding-bottom:20px} .rnj-toast{max-width:var(--rnj-w-p);bottom:36px} } /* ── 12 · MOVIMENTO ───────────────────────────────────────────────────── */ @keyframes rnjVeu{from{opacity:0}} @keyframes rnjVeuSai{to{opacity:0}} @keyframes rnjSobe{from{opacity:0;transform:translateY(14px)}} @keyframes rnjDesce{to{opacity:0;transform:translateY(8px)}} @keyframes rnjAssenta{from{opacity:0;transform:translateY(6px)}} @keyframes rnjFio{from{opacity:0;width:14px}} @keyframes rnjFioSai{to{opacity:0}} @keyframes rnjShimmer{from{background-position:120% 0}to{background-position:-80% 0}} @media (prefers-reduced-motion:reduce){ .rnj-overlay,.rnj-overlay .rnj,.rnj-overlay .rnj-head,.rnj-overlay .rnj-body,.rnj-overlay .rnj-foot,.rnj-fio,.rnj-balao,.rnj-shimmer{animation:none!important} .rnj-toast{transition:none} } /* celular estreito (320): o diálogo cabe em 288, os botões descem em coluna */ @media (max-width:359px){ .rnj-foot{flex-direction:column;align-items:stretch} .rnj-foot>.rnj-btn{width:100%} .rnj-foot--3>.rnj-btn--primary{order:3} } /* ═══ SELETOR v2 — [CÓPIA] fonte: docs/rodada_seletor_2026-10-09/DO_JEAN/seletor_v2.html (Jean, aprovado por Raphael 09/10/2026) ═══ */ .rnj-poco:has(>.rnj-opcoes){padding:4px 6px} .rnj-opcoes{list-style:none;margin:0;padding:0} .rnj-opcao{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:48px;box-sizing:border-box;padding:0 12px 0 14px;border:0;border-radius:10px 10px 10px 5px;background:none; color:var(--rnj-text2);font:400 var(--fs-md,16px)/1.3 var(--rnj-ui);text-align:left;cursor:pointer;transition:background .15s var(--rnj-ease),color .15s} .rnj-opcao+.rnj-opcao::before{content:"";position:absolute;top:0;left:14px;right:12px;height:1px;background:rgba(255,255,255,.06)} .rnj-opcao .o-t{flex:1;min-width:0} .rnj-opcao .o-ok{flex:none;width:18px;height:18px;color:var(--rnj-ouro);visibility:hidden} .rnj-opcao:hover{background:rgba(255,255,255,.035);color:var(--rnj-text)} .rnj-opcao:active{background:rgba(255,255,255,.06)} .rnj-opcao:focus-visible{outline:2px solid rgba(226,194,94,.75);outline-offset:-2px} .rnj-opcao.sel{color:var(--rnj-text);font-weight:500;background:rgba(201,162,39,.08)} .rnj-opcao.sel .o-ok{visibility:visible} .rnj-opcao.sel::before,.rnj-opcao.sel+.rnj-opcao::before{display:none} /* campo fechado */ .rnj-campo-sel{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;min-height:48px;padding:0 12px 0 14px;border:1px solid rgba(255,255,255,.18);border-radius:11px 11px 11px 5px; background:rgba(0,0,0,.26);color:var(--rnj-text);font:400 var(--fs-md,16px)/1.3 var(--rnj-ui);text-align:left;cursor:pointer;transition:border-color .18s,box-shadow .18s} .rnj-campo-sel .c-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rnj-campo-sel .c-seta{flex:none;width:16px;height:16px;color:var(--rnj-text3)} .rnj-campo-sel.vazio .c-v{color:var(--rnj-text3)} .rnj-campo-sel[aria-expanded="true"],.rnj-campo-sel:focus-visible{outline:none;border-color:var(--rnj-ouro);background:rgba(201,162,39,.07);box-shadow:0 0 0 1px rgba(201,162,39,.3)} .rnj-campo-rot{display:block;font:500 var(--fs-micro,11.5px)/1.2 var(--rnj-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--rnj-text3);margin-bottom:7px} /* [CONSTRUÇÃO] campo dentro de