/* Para.AI BeeROOT — estilos da interface */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&family=JetBrains+Mono:wght@300;400;500&display=swap'); :root{ --bg:#0b0d14;--bg1:#10131c;--bg2:#161a26;--bg3:#1c2133;--bg4:#252840; --gold:#c9a84c;--gold-lt:#e8cf82;--gold-dim:#7a6030; --gold-glow:rgba(201,168,76,.11);--gold-bd:rgba(201,168,76,.2); --tx:#dde1ed;--tx2:#8890aa;--tx3:#424660; --bd:rgba(255,255,255,.06);--bd2:rgba(255,255,255,.1); --serif:'Cormorant Garamond',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif; --mono:'JetBrains Mono',monospace; --ok:#6ee89f;--ok-bg:rgba(51,181,104,.14);--ok-bd:rgba(51,181,104,.35); --err:#f27272;--err-bg:rgba(217,58,58,.14);--err-bd:rgba(217,58,58,.4); } html{-webkit-font-smoothing:antialiased} body { background: radial-gradient(120% 55% at 50% -8%, rgba(201,168,76,.07) 0%, transparent 60%), radial-gradient(90% 40% at 8% 100%, rgba(77,142,240,.035) 0%, transparent 55%), var(--bg) !important; } .para-topbar{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 4px 18px;margin-bottom:4px;border-bottom:1px solid var(--bd); } .para-brand-name{font-family:var(--serif);font-weight:400;letter-spacing:.03em;color:var(--gold-lt);line-height:1.1} .para-brand-name b{color:var(--gold);font-weight:500} .para-brand-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--tx3);text-transform:uppercase;margin-top:4px} .para-btn-reiniciar{ display:inline-flex;align-items:center;gap:6px;flex-shrink:0; padding:8px 16px;border-radius:10px;font-family:var(--mono); font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:400; background:var(--gold-glow);border:1px solid var(--gold-bd);color:var(--gold-lt); cursor:pointer;transition:all .18s; } .para-btn-reiniciar:hover{background:rgba(201,168,76,.2);border-color:var(--gold)} #btn-submit{ background:var(--gold-glow) !important;border:1px solid var(--gold-bd) !important; color:var(--gold-lt) !important; } #btn-submit:hover{background:rgba(201,168,76,.2) !important} .lx-hl { border-radius: 3px; padding: 1px 2px; color: #111; cursor: pointer; } .lx-hl.lx-pulse { outline: 2px solid #ff4444; animation: lxPulse 1.4s ease-in-out; } @keyframes lxPulse { 0% { outline-color: #ff4444; } 50% { outline-color: #ff0000; } 100% { outline-color: #ff4444; } } details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; } details > summary::marker { content: ""; display: none; } details > summary::before { content: '+'; display: inline-block; width: 1em; flex-shrink: 0; margin-right: 6px; font-family: var(--mono); font-weight: 700; text-align: center; color: var(--tx2); } details[open] > summary::before { content: '−'; color: var(--gold-lt); } html, body { height: 100%; margin: 0; overscroll-behavior: none; } body.app-shell { display: flex; flex-direction: column; padding: 0 !important; position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; overflow: hidden; } .app-topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--bd); flex-shrink: 0; position: relative; z-index: 210; } .app-topbar { padding: 16px 14px 14px; } .app-topbar .para-brand-name { font-size: 1.42rem; gap: 10px; } .app-topbar .brand-icon { width: 32px; height: 32px; } .app-topbar-left { display:flex; align-items:center; gap:10px; } .app-topbar-right { display:flex; align-items:center; gap:8px; } .app-icon-btn { width: 32px; height: 32px; border-radius: 9px; display:flex; align-items:center; justify-content:center; background: var(--bg2); border: 1px solid var(--bd); color: var(--tx2); cursor:pointer; font-size:.9rem; flex-shrink: 0; } .app-icon-btn:hover { color: var(--gold-lt); border-color: var(--gold-bd); } .hb-btn { width: 38px; height: 38px; border-radius: 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background: var(--bg2); border: 1px solid var(--bd); cursor:pointer; flex-shrink:0; transition: all .18s; } .hb-btn span { width: 18px; height: 2px; background: var(--tx2); border-radius: 1px; transition: all .25s; } .hb-btn:hover span, .hb-btn.open span { background: var(--gold-lt); } .hb-btn.open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); } .hb-btn.open span:nth-child(2) { opacity: 0; } .hb-btn.open span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); } .nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 190; } .nav-overlay.open { opacity: 1; pointer-events: auto; } .nav-dropdown { position: fixed; top: 0; left: 0; bottom: 0; width: 84%; max-width: 320px; background: var(--bg1); border-right: 1px solid var(--bd2); border-radius: 0 var(--r-lg, 14px) var(--r-lg, 14px) 0; box-shadow: 0 20px 50px rgba(0,0,0,.5); padding: 0 8px 8px; z-index: 220; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); pointer-events: none; transition: transform .28s cubic-bezier(.16,1,.3,1); } .nav-dropdown.dragging { transition: none; } .nav-dropdown.open { transform: translateX(0); pointer-events: auto; } .nav-dropdown .nav-item-sub { margin-top: auto; padding-top: 10px; } .nav-dropdown-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding: 14px 6px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--bd); flex-shrink:0; } .nav-dropdown-head .para-brand-name { display: flex; align-items: center; gap: 4px; white-space: nowrap; } .nav-close-btn { width: 30px; height: 30px; border-radius: 9px; display:flex; align-items:center; justify-content:center; background: var(--bg2); border: 1px solid var(--bd); color: var(--tx2); cursor:pointer; flex-shrink:0; } .nav-close-btn:hover { color: var(--gold-lt); border-color: var(--gold-bd); } .edge-swipe-zone { position: fixed; top: 0; left: 0; bottom: 0; width: 18px; z-index: 185; } .nav-item { display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 9px; color: var(--tx); font-size: .8rem; cursor:pointer; background:none; border:none; width: 100%; text-align:left; font-family: var(--sans); } .nav-item:hover { background: var(--gold-glow); color: var(--gold-lt); } .nav-item.active { color: var(--gold-lt); background: var(--gold-glow2); } .nav-item .nav-item-icon { width: 18px; text-align:center; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .nav-sep { height: 1px; background: var(--bd); margin: 6px 4px; } .nav-item-sub { font-size: .64rem; color: var(--tx3); padding: 2px 12px 6px; } .flow-map { display:flex; flex-direction:column; gap:1px; margin-bottom:6px; } .flow-item { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; background:none; border:none; color: var(--tx2); font-family: var(--sans); font-size:.8rem; cursor:pointer; width:100%; text-align:left; transition: all .16s; } .flow-item:not(:disabled):hover { color: var(--gold-lt); background: var(--gold-glow); } .flow-dot { width:9px; height:9px; border-radius:50%; background: var(--bg3); border:1.5px solid var(--tx3); flex-shrink:0; transition: all .2s; } .flow-item.done .flow-dot { background: var(--gold-dim); border-color: var(--gold-dim); } .flow-item.current { color: var(--gold-lt); background: var(--gold-glow); font-weight:600; } .flow-item.current .flow-dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); } .flow-item.pulse .flow-dot { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-glow); } .flow-item:disabled { opacity:.4; cursor:not-allowed; } .flow-label { flex:1; } .bg-green-700,.bg-green-600,.bg-indigo-700,.bg-indigo-600,.bg-purple-700,.bg-purple-600, .bg-blue-700,.bg-blue-600,.bg-blue-500 { background: var(--gold-glow) !important; border-color: var(--gold-bd) !important; color: var(--gold-lt) !important; } .hover\:bg-green-600:hover,.hover\:bg-indigo-600:hover,.hover\:bg-purple-600:hover, .hover\:bg-blue-700:hover,.hover\:bg-gray-600:hover { background: rgba(201,168,76,.2) !important; } .card-gold, .card-hero { background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%); border: 1px solid var(--gold-bd); border-radius: var(--r-md, 16px); padding: 16px; box-shadow: 0 10px 34px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.03) inset, 0 0 0 1px rgba(201,168,76,.05) inset; } .card-dim, #cards-resumo > details, details.bg-gray-900.rounded-lg, .bg-gray-800.rounded-lg { background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%); border: 1px solid var(--bd2); border-radius: var(--r-md, 14px); box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.02) inset; } .card-dim { padding: 12px; } .bg-gray-800.rounded-lg { border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.24); } .card-inset { background: var(--bg3); border: 1px solid var(--bd2); border-radius: 10px; padding: 10px; } .card-danger { background: var(--err-bg); border: 1px solid var(--err-bd); border-radius: var(--r-md, 14px); padding: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.3); } .card-danger-title { color: var(--err); font-size: .82rem; font-weight: 600; display:flex; align-items:center; gap:6px; } .card-danger-body { color: var(--err); font-size: .72rem; opacity: .88; } .badge-ok, .badge-err { display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-family: var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.02em; } .badge-ok { background: var(--ok-bg); border: 1px solid var(--ok-bd); color: var(--ok); } .badge-err { background: var(--err-bg); border: 1px solid var(--err-bd); color: var(--err); } .screen-title { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: var(--gold-lt); letter-spacing: .01em; margin-bottom: 4px; } .screen-subtitle{ font-size:.76rem; color:var(--tx3); margin-bottom:14px; } .card-light { background: #f4f1ea; color: #1c1c1c; border-radius: var(--r-md, 14px); padding: 12px; } .btn-gold, .btn-neutral { display:flex; align-items:center; justify-content:center; padding: 9px 14px; border-radius: 10px; font-size: .78rem; font-weight: 600; cursor:pointer; text-align:center; font-family: var(--sans); border: 1px solid transparent; transition: all .18s; } .btn-gold { background: var(--gold-glow); border-color: var(--gold-bd); color: var(--gold-lt); } .btn-gold:hover { background: rgba(201,168,76,.2); } .btn-neutral { background: var(--bg2); border-color: var(--bd2); color: var(--tx); } .btn-neutral:hover { border-color: var(--gold-bd); color: var(--gold-lt); } .app-screens { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; } .app-screen { display: none; padding: 14px 14px 28px; } .app-screen.active { display: block; animation: screenIn .22s cubic-bezier(.16,1,.3,1); } @keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 1; transform: none; } .reveal.revealed { opacity: 1; transform: none; } .lp-section { padding: 30px 2px; border-top: 1px solid var(--bd); } .lp-section:first-child { border-top: none; } .lp-kicker { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; display:flex; align-items:center; gap:6px; } .lp-kicker::before { content:""; width:14px; height:1px; background: var(--gold-dim); display:inline-block; } .lp-h2 { font-family: var(--serif); font-weight: 500; font-size: 1.24rem; color: var(--gold-lt); letter-spacing: .01em; margin-bottom: 6px; line-height: 1.25; } .lp-lead { font-size: .8rem; color: var(--tx2); line-height: 1.6; margin-bottom: 16px; } .lp-banner { background: linear-gradient(135deg, rgba(201,168,76,.16), rgba(201,168,76,.03) 70%), var(--bg1); border: 1px solid var(--gold-bd); border-radius: 14px; padding: 14px 16px; display:flex; align-items:center; gap:12px; margin-bottom: 6px; box-shadow: 0 10px 26px rgba(0,0,0,.32); } .lp-banner-num { font-family: var(--serif); font-size: 1.7rem; color: var(--gold-lt); font-weight: 500; flex-shrink:0; line-height:1; } .lp-banner-txt { font-size: .72rem; color: var(--tx2); line-height: 1.45; } .lp-banner-txt b { color: var(--gold-lt); } .lp-grid { display:flex; flex-direction:column; gap:10px; } .lp-card { background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%); border: 1px solid var(--bd2); border-radius: 14px; padding: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.3); } .lp-card-title { font-size: .82rem; font-weight: 600; color: var(--tx); margin-bottom: 4px; display:flex; align-items:center; gap:8px; } .lp-card-title .lp-num { color: var(--gold-lt); font-family: var(--serif); font-size: 1.05rem; } .lp-card-txt { font-size: .74rem; color: var(--tx2); line-height: 1.55; } .lp-stats { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lp-stat { background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%); border: 1px solid var(--gold-bd); border-radius: 14px; padding: 14px 10px; text-align:center; box-shadow: 0 8px 22px rgba(0,0,0,.3); } .lp-stat-num { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-lt); font-weight: 500; line-height:1.1; } .lp-stat-label { font-size: .64rem; color: var(--tx3); margin-top: 4px; line-height: 1.35; } .lp-table { width:100%; border-collapse: collapse; font-size: .68rem; } .lp-table th, .lp-table td { text-align:left; padding: 8px 6px; border-bottom: 1px solid var(--bd); vertical-align: top; } .lp-table th { color: var(--tx3); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: .58rem; } .lp-table td { color: var(--tx2); line-height: 1.4; } .lp-table tr.lp-row-win td { color: var(--gold-lt); } .lp-table tr.lp-row-fail td { color: #b5766e; } .lp-badge { display:inline-flex; align-items:center; font-family: var(--mono); font-size: .6rem; padding: 2px 8px; border-radius: 999px; background: var(--gold-glow); border: 1px solid var(--gold-bd); color: var(--gold-lt); font-weight: 500; } .lp-audience { display:flex; flex-direction:column; gap:12px; } .lp-aud-card { background: linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 100%); border: 1px solid var(--bd2); border-radius: 16px; padding: 16px; box-shadow: 0 8px 22px rgba(0,0,0,.3); } .lp-aud-title { font-size: .88rem; font-weight: 600; color: var(--gold-lt); margin-bottom: 4px; } .lp-aud-txt { font-size: .74rem; color: var(--tx2); line-height: 1.55; margin-bottom: 12px; } .lp-faq details { border-bottom: 1px solid var(--bd); padding: 10px 0; } .lp-faq summary { font-size: .8rem; font-weight: 500; color: var(--tx); } .lp-faq p { font-size: .74rem; color: var(--tx2); line-height: 1.55; margin-top: 8px; padding-left: 1.5em; } .lp-final { text-align:center; padding: 34px 4px 10px; } .lp-final-note { font-size: .66rem; color: var(--tx3); margin-top: 10px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .home-hero { padding: 10vh 4px 6px; text-align: center; overflow: hidden; } .home-logo { font-family: var(--serif); font-size: 2.1rem; color: var(--gold-lt); letter-spacing: .02em; } .home-logo b { color: var(--gold); font-weight: 500; } .home-slogan { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--tx2); margin-top: 6px; } .home-desc { font-size: .78rem; color: var(--tx3); line-height: 1.5; margin: 14px auto 0; max-width: 320px; } .home-actions { margin-top: 34px; display: flex; flex-direction: column; gap: 10px; } .home-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding: 13px 16px; border-radius: 12px; font-size: .82rem; font-weight: 500; cursor:pointer; transition: all .18s; font-family: var(--sans); } .home-btn-primary { background: var(--gold-glow); border: 1px solid var(--gold-bd); color: var(--gold-lt); } .home-btn-primary:hover { background: rgba(201,168,76,.2); } .home-btn-secondary { background: var(--bg2); border: 1px solid var(--bd2); color: var(--tx); } .home-btn-secondary:hover { border-color: var(--gold-bd); color: var(--gold-lt); } .para-brand-name { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 1.15rem; } .brand-logo-home { width: 190px; max-width: 62vw; height: auto; margin: 0 auto; display: block; filter: drop-shadow(0 6px 18px rgba(201,168,76,.18)); } .brand-icon { width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; object-fit: contain; } .section-glow { position: relative; } .section-glow::before { content: ""; position: absolute; top: -6%; right: -18%; width: 75%; height: 46%; pointer-events: none; z-index: 0; } .section-glow > * { position: relative; z-index: 1; } .about-banner { display: block; width: 100%; max-width: 300px; margin: 4px auto 18px; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.35); } .app-stepper { display:flex; align-items:center; gap:8px; border-top: 1px solid var(--bd); background: var(--bg1); flex-shrink: 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); } .stepper-arrow { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: var(--bg2); border: 1px solid var(--bd2); color: var(--tx); cursor:pointer; flex-shrink:0; transition: all .18s; } .stepper-arrow:hover:not(:disabled) { border-color: var(--gold-bd); color: var(--gold-lt); background: var(--gold-glow); } .stepper-arrow:disabled { opacity:.3; cursor:not-allowed; } .stepper-mid { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; } .stepper-label { font-family: var(--sans); font-size:.78rem; font-weight:600; color: var(--gold-lt); letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; text-transform:uppercase; } .stepper-dots { display:flex; align-items:center; gap:5px; } .stepper-dot { width:6px; height:6px; border-radius:50%; background: var(--bg3); border:1px solid var(--tx3); transition: all .2s; } .stepper-dot.done { background: var(--gold-dim); border-color: var(--gold-dim); } .stepper-dot.current { background: var(--gold); border-color: var(--gold); width:16px; border-radius:3px; } .ring-wrap { position:relative; width:132px; height:132px; margin:2px auto 0; } .ring-wrap svg { display:block; } .ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; } .ring-pct { font-family: var(--serif); font-size:1.7rem; color: var(--gold-lt); font-weight:500; line-height:1; } .ring-counter { font-family: var(--mono); font-size:.65rem; color: var(--tx2); margin-top:2px; } .page-subnav { display:flex; gap:18px; padding: 0 14px; border-bottom: 1px solid var(--bd); flex-shrink:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .page-subnav::-webkit-scrollbar { display:none; } .page-subnav.hidden { display:none; } .page-subnav-tab { position:relative; flex-shrink:0; padding: 11px 2px 10px; margin-bottom:-1px; background:none; border:none; cursor:pointer; white-space:nowrap; font-family: var(--sans); font-size:.8rem; font-weight:500; color: var(--tx2); border-bottom: 2px solid transparent; transition: color .18s, border-color .18s; } .page-subnav-tab:hover { color: var(--tx); } .page-subnav-tab.active { color: var(--gold-lt); border-bottom-color: var(--gold); } .submit-card { display:flex; flex-direction:column; } .submit-textarea { min-height:34vh; resize:vertical; } .doc-file-chip { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:9px; background:var(--gold-glow); border:1px solid var(--gold-bd); color:var(--gold-lt); font-size:.72rem; } .doc-file-chip-x { margin-left:auto; background:none; border:none; color:var(--tx2); cursor:pointer; font-size:.75rem; } .doc-file-chip-x:hover { color:var(--gold-lt); } .action-bar { display:flex; gap:8px; align-items:stretch; } .action-btn { flex: 1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:11px 6px; border-radius:12px; background:var(--bg3); border:1px solid var(--bd2); color:var(--tx2); cursor:pointer; transition:all .18s; text-align:center; font-family:var(--sans); } .action-btn:hover:not(:disabled) { border-color:var(--gold-bd); color:var(--gold-lt); background:var(--bg4); } .action-btn:disabled { opacity:.4; cursor:not-allowed; } .action-btn-icon { font-size:1.05rem; line-height:1; } .action-btn-icon svg { display:block; } .action-btn-label { font-size:.6rem; font-weight:600; line-height:1.15; } .action-btn-primary { flex: 1.7; background:var(--gold-glow); border-color:var(--gold-bd); color:var(--gold-lt); } .action-btn-primary:hover:not(:disabled) { background:rgba(201,168,76,.22); } .adv-overlay { z-index: 230; } .adv-modal { position:fixed; left:50%; top:50%; width:calc(100% - 32px); max-width:400px; max-height:82vh; transform:translate(-50%,-50%) scale(.96); background:var(--bg1); border:1px solid var(--bd2); border-radius:var(--r-lg,14px); box-shadow:0 20px 60px rgba(0,0,0,.55); padding:14px; z-index:231; opacity:0; pointer-events:none; overflow-y:auto; transition: opacity .18s, transform .18s; } .adv-modal.open { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); } .adv-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .adv-modal-close { width:26px; height:26px; border-radius:8px; background:var(--bg2); border:1px solid var(--bd); color:var(--tx2); cursor:pointer; flex-shrink:0; } .adv-modal-close:hover { color:var(--gold-lt); border-color:var(--gold-bd); } .prog-hero { position: relative; overflow: hidden; } .prog-done-flash { position: absolute; inset: 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 10px; background: var(--bg2); color: var(--gold-lt); font-family: var(--serif); font-size: 1.15rem; opacity: 0; pointer-events: none; transition: opacity .35s ease; z-index: 5; } .prog-done-flash.show { opacity: 1; animation: progDoneScale .5s cubic-bezier(.16,1,.3,1); } .prog-done-flash svg { color: var(--gold); animation: progDonePop .5s cubic-bezier(.16,1,.3,1); } @keyframes progDoneScale { from { transform: scale(.92); } to { transform: scale(1); } } @keyframes progDonePop { 0% { transform: scale(.4); opacity:0; } 60% { transform: scale(1.15); opacity:1; } 100% { transform: scale(1); } } .task-row-parallel { border-radius:6px; padding:1px 4px; margin:0 -4px; animation: taskParallelPulse 1s ease-in-out infinite; } @keyframes taskParallelPulse { 0%, 100% { background: rgba(77,142,240,.06); } 50% { background: rgba(77,142,240,.30); } } .task-row-current { position:relative; overflow:hidden; border-radius:6px; padding:1px 4px; margin:0 -4px; } .task-row-current::after { content:''; position:absolute; inset:0; pointer-events:none; animation: taskShimmer 1.3s linear infinite; } @keyframes taskShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .conf-texto-wrap { position: relative; } .legend-highlights { display:flex; flex-wrap:wrap; gap:6px; } .legend-chip { display:inline-flex; align-items:center; padding:3px 8px; border-radius:6px; cursor:pointer; color:#1c1c1c; font-size:.72rem; } #panel-submit.app-screen.active { display: flex; padding-bottom: 1rem; gap: 1.25rem; flex-direction: column; height: 100%; } #panel-submit .card-hero { flex: 1; display: flex; flex-direction: column; min-height: 0; } #panel-submit .submit-card { gap: 0.75rem; } #panel-submit .submit-textarea { flex: 1; min-height: 0; height: auto; resize: vertical; } #panel-submit .action-bar { margin-top: auto; } #panel-progress.app-screen.active { display: flex; flex-direction: column; height: 100%; padding-bottom: 1; } #panel-progress .card-hero { flex: 0 0 auto; } #panel-progress .card-dim { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 0.75rem; } #prog-tasks { flex: 1; overflow-y: auto; max-height: none; } #panel-result.app-screen.active { display: flex; flex-direction: column; height: 100%; padding-bottom: 1; } #panel-result .card-hero, #panel-result .card-dim, #panel-result > div:not(.flex):not(.card-hero) { flex: 1; display: flex; flex-direction: column; min-height: 0; } #panel-result .bg-gray-800.rounded-lg { flex: 1; display: flex; flex-direction: column; min-height: 0; } #texto-final-corpo { flex: 1; min-height: 0; max-height: none; overflow-y: auto; } #panel-result .flex.gap-2:last-of-type { margin-top: auto; padding-top: 0.75rem; } #panel-result .flex.gap-2:not(:last-of-type) { margin-top: auto; padding-top: 0.75rem; } #panel-conf-texto.app-screen.active, #panel-conf-blocos.app-screen.active { display: flex; flex-direction: column; height: 100%; padding-bottom: 1; } #panel-conf-texto .conf-texto-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; } #panel-conf-texto .action-bar { flex-shrink: 0; } #text-window { flex: 1; min-height: 0; max-height: none; overflow-y: auto; } #panel-conf-blocos #cards-resumo { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 0.75rem; padding-right: 2px; } #cards-resumo.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0 !important; } #cards-resumo > details[open], details.bg-gray-900.rounded-lg[open] { border-color: var(--gold-bd); box-shadow: 0 10px 28px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.02) inset, 0 0 0 1px rgba(201,168,76,.05) inset; } #cards-resumo details details, details.bg-gray-950.rounded { background: var(--bg3); border: none; border-radius: 10px; margin: 0 2px 6px 0; } #cards-resumo details details:nth-of-type(even), details.bg-gray-950.rounded:nth-of-type(even) { background: var(--bg4); } #cards-resumo .bg-gray-800.rounded-lg { background: var(--bg3); border: none; box-shadow: none; padding: 14px !important; } #cards-resumo .bg-gray-800.rounded-lg:nth-of-type(even) { background: var(--bg4); } /* Ritmo vertical único entre todos os blocos internos do card (rótulo, valor, síntese, legenda) — substitui margens avulsas (mt-1/mt-2/mb-1) por um único espaçamento consistente. */ #cards-resumo .bg-gray-800.rounded-lg > * { margin: 0 !important; } #cards-resumo .bg-gray-800.rounded-lg > * + * { margin-top: 10px !important; } #cards-resumo .bg-gray-800.rounded-lg > .mb-1 { padding-bottom: 8px; border-bottom: 1px solid var(--bd); } #cards-resumo .bg-gray-800.rounded-lg > .text-gray-200 { line-height: 1.5; } #selo-in42 > div:first-child { box-shadow: 0 8px 20px rgba(0,0,0,.3); } #cards-resumo > details > summary > span:first-child { font-family: var(--serif); font-size: .98rem; letter-spacing: .01em; color: var(--gold-lt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #cards-resumo > details > summary > span:last-child { flex-shrink: 0; max-width: 42%; padding: 2px 8px; border-radius: 999px; background: var(--bg3); color: var(--tx2) !important; font-family: var(--mono); font-size: .64rem !important; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #cards-resumo > details[open] > summary > span:last-child { background: var(--gold-glow); color: var(--gold-lt) !important; } #cards-resumo > details > div { border-top: 1px solid var(--bd); padding: 8px 8px 10px !important; } #cards-resumo > details > div > * + * { margin-top: 8px; } #cards-resumo details details > summary { font-family: var(--sans) !important; font-size: .72rem !important; color: var(--tx2) !important; text-transform: uppercase; letter-spacing: .05em; } #cards-resumo details details > summary > span:last-child { background: transparent !important; color: var(--tx3) !important; font-size: .64rem !important; max-width: none; padding: 0; } #cards-resumo details details > div { border-left: 2px solid var(--bd2); margin-left: 8px; } #cards-resumo details details .text-gray-300 { padding: 5px 0; font-size: .78rem; line-height: 1.45; } #cards-resumo > details > div > .text-xs:not(details) { display: grid; grid-template-columns: minmax(84px, 34%) 1fr; gap: 6px 14px; padding: 8px 10px; border-radius: 6px; font-size: .78rem !important; } #cards-resumo > details > div > .text-xs:not(details):nth-of-type(even) { background: var(--bg3); } #cards-resumo .text-xs .text-gray-500 { text-transform: uppercase; letter-spacing: .04em; font-size: .64rem; color: var(--tx3) !important; align-self: start; padding-top: 1px; } #cards-resumo .text-xs .text-gray-200 { word-break: break-word; } #selo-in42:not(:empty) { margin-bottom: 2px; } #bloco-inconsistencias:not(:empty) { margin-bottom: 2px; }