/* painel.css do contrato visual (Dashboard.zip, revisões “Cores e modo escuro” e “Botões secundários”), copiado sem alterações
 * exceto pela troca dos três @import de CDN por arquivos locais (vendor/figtree, vendor/phosphor). */
@import url("../vendor/figtree/figtree.css");
@import url("../vendor/phosphor/regular/style.css");
@import url("../vendor/phosphor/fill/style.css");

:root{
--pn-font:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
--pn-bg:oklch(0.968 0.004 285);--pn-bg-2:oklch(0.94 0.006 285);--pn-surface:oklch(0.995 0.0015 285);--pn-surface-2:oklch(0.978 0.003 285);
--pn-glass:color-mix(in oklch,var(--pn-surface) 74%,transparent);
--pn-ink:oklch(0.22 0.012 285);--pn-ink-2:oklch(0.46 0.012 285);--pn-ink-3:oklch(0.58 0.01 285);
--pn-line:oklch(0.9 0.006 285);--pn-line-soft:oklch(0.935 0.005 285);
/* Verde Tamborine #9AD678 (borda #85BC6E). Preenchimentos usam --pn-accent com texto --pn-on-accent; textos e links usam --pn-accent-ink. */
--pn-accent:#9AD678;--pn-accent-press:#85BC6E;--pn-accent-ink:oklch(0.47 0.12 138);--pn-accent-soft:oklch(0.955 0.045 135);--pn-accent-ring:oklch(0.7 0.14 135/.35);
--pn-on-accent:#202B30;--pn-on-strong:#ffffff;
--pn-red:oklch(0.58 0.2 25);--pn-red-ink:oklch(0.49 0.18 25);--pn-red-soft:oklch(0.955 0.025 25);
--pn-amber:oklch(0.76 0.15 70);--pn-amber-ink:oklch(0.5 0.12 60);--pn-amber-soft:oklch(0.96 0.04 80);
/* Sucesso (No prazo, Concluído): verde azulado, separado do verde da marca. */
--pn-green:oklch(0.6 0.12 172);--pn-green-ink:oklch(0.45 0.09 172);--pn-green-soft:oklch(0.955 0.03 172);
/* Em andamento: azul-acinzentado. */
--pn-slate:oklch(0.56 0.045 240);--pn-slate-ink:oklch(0.42 0.045 240);--pn-slate-soft:oklch(0.94 0.015 240);
--pn-gray-soft:oklch(0.945 0.004 285);
--pn-gold:oklch(0.78 0.14 85);
--pn-blue:oklch(0.6 0.15 245);--pn-blue-soft:oklch(0.95 0.03 245);--pn-blue-ink:oklch(0.45 0.14 250);
--pn-r-xs:8px;--pn-r-sm:10px;--pn-r-md:14px;--pn-r-lg:20px;--pn-r-xl:28px;--pn-r-pill:999px;
--pn-s-1:4px;--pn-s-2:8px;--pn-s-3:12px;--pn-s-4:16px;--pn-s-5:20px;--pn-s-6:24px;--pn-s-8:32px;--pn-s-10:40px;--pn-s-14:56px;
--pn-shadow-1:0 1px 2px oklch(0.2 0.02 285/.05),0 2px 8px oklch(0.2 0.02 285/.04);
--pn-shadow-2:0 2px 6px oklch(0.2 0.02 285/.05),0 12px 32px oklch(0.2 0.02 285/.08);
--pn-shadow-3:0 4px 12px oklch(0.2 0.02 285/.06),0 24px 60px oklch(0.2 0.02 285/.14);
--pn-ease:cubic-bezier(.32,.72,0,1); /* @kind other */
--pn-sidebar:color-mix(in oklch,var(--pn-bg-2) 70%,transparent);--pn-hover:oklch(0.2 0.02 285/.05);--pn-control-off:oklch(0.89 0.006 285);--pn-check-ring:oklch(0.8 0.008 285);
--pn-gray-hover:oklch(0.915 0.006 285);--pn-tinted-bg:var(--pn-accent-soft);--pn-tinted-ink:var(--pn-accent-ink);--pn-tinted-hover:oklch(0.92 0.06 135);--pn-input-hover:oklch(0.82 0.008 285);--pn-skel-hi:oklch(0.965 0.004 285);
--pn-toast-bg:oklch(0.26 0.012 285);--pn-toast-ink:oklch(0.97 0.004 285);
--pn-chip-bg-l:0.94; /* @kind other */
--pn-chip-ink-l:0.42; /* @kind other */
--pn-av-bg-l:0.91; /* @kind other */
--pn-av-ink-l:0.4; /* @kind other */
}
/* Modo escuro: fundo #202B30, cartões/listas/janelas #394246, barra lateral #34423F. */
[data-theme="dark"]{
--pn-bg:#202B30;--pn-bg-2:#2A3639;--pn-surface:#394246;--pn-surface-2:#3B4A46;--pn-sidebar:#34423F;
--pn-ink:oklch(0.95 0.008 160);--pn-ink-2:oklch(0.8 0.015 170);--pn-ink-3:oklch(0.66 0.015 170);
--pn-line:oklch(0.48 0.015 170);--pn-line-soft:oklch(0.45 0.014 170);--pn-gray-soft:oklch(0.43 0.014 170);
--pn-accent-ink:#A8DF88;--pn-accent-soft:oklch(0.43 0.07 135);--pn-accent-press:#ADE18F;
--pn-red:oklch(0.66 0.17 25);--pn-red-ink:oklch(0.83 0.09 25);--pn-red-soft:oklch(0.38 0.07 25);
--pn-amber-ink:oklch(0.87 0.1 80);--pn-amber-soft:oklch(0.4 0.06 70);
--pn-green:oklch(0.68 0.11 172);--pn-green-ink:oklch(0.84 0.08 172);--pn-green-soft:oklch(0.39 0.05 172);
--pn-slate:oklch(0.68 0.04 240);--pn-slate-ink:oklch(0.86 0.03 240);--pn-slate-soft:oklch(0.42 0.025 240);
--pn-blue:oklch(0.68 0.13 245);--pn-blue-ink:oklch(0.85 0.07 245);--pn-blue-soft:oklch(0.39 0.05 245);
--pn-glass:color-mix(in oklch,var(--pn-bg) 80%,transparent);
--pn-shadow-1:0 1px 2px oklch(0 0 0/.25),0 2px 8px oklch(0 0 0/.18);
--pn-shadow-2:0 2px 6px oklch(0 0 0/.3),0 12px 32px oklch(0 0 0/.3);
--pn-shadow-3:0 4px 12px oklch(0 0 0/.35),0 24px 60px oklch(0 0 0/.45);
--pn-hover:oklch(1 0 0/.06);--pn-control-off:oklch(0.47 0.014 170);--pn-check-ring:oklch(0.6 0.015 170);
--pn-gray-hover:oklch(0.48 0.014 170);
/* Botões secundários verdes (design “Botões secundários”, opção 3): verde da marca a 14% com texto verde claro. */
--pn-tinted-bg:rgba(154,214,120,.14);--pn-tinted-ink:#B4E59A;--pn-tinted-hover:rgba(154,214,120,.22);--pn-input-hover:oklch(0.55 0.015 170);--pn-skel-hi:oklch(0.45 0.014 170);
--pn-toast-bg:oklch(0.95 0.008 160);--pn-toast-ink:#202B30;
--pn-chip-bg-l:0.38; /* @kind other */
--pn-chip-ink-l:0.88; /* @kind other */
--pn-av-bg-l:0.45; /* @kind other */
--pn-av-ink-l:0.92; /* @kind other */
color-scheme:dark}
.pn{font-family:var(--pn-font);color:var(--pn-ink);background:var(--pn-bg);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.pn *,.pn *::before,.pn *::after{box-sizing:border-box}
.pn a{color:var(--pn-accent-ink);text-decoration:none}.pn a:hover{text-decoration:underline;text-underline-offset:3px}
.pn h1,.pn h2,.pn h3,.pn h4,.pn p{margin:0;font-family:var(--pn-font);letter-spacing:normal}
.pn *{scrollbar-width:none}.pn ::-webkit-scrollbar{display:none}
:where(.pn) :where(i.ph,i.ph-fill){font-size:1.15em;line-height:1;display:inline-block}
.pn :focus-visible{outline:2px solid var(--pn-accent);outline-offset:2px}
/* type */
.pn-t-large{font-size:34px;font-weight:700;line-height:1.1;letter-spacing:-0.022em}
.pn-t-title1{font-size:28px;font-weight:700;line-height:1.15;letter-spacing:-0.02em}
.pn-t-title2{font-size:22px;font-weight:650;line-height:1.2;letter-spacing:-0.012em}
.pn-t-headline{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-0.005em}
.pn-t-body{font-size:15px;font-weight:400}
.pn-t-sub{font-size:13px;color:var(--pn-ink-2)}
.pn-t-cap{font-size:12px;color:var(--pn-ink-2)}
.pn-t-over{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pn-ink-3)}
.pn-clamp-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* buttons */
.pn-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:12px;border:0;font:inherit;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s var(--pn-ease),box-shadow .2s;text-decoration:none}
.pn-btn:active{transform:scale(.97)}
.pn-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.pn-btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:10px}
.pn-btn-lg{height:50px;padding:0 22px;font-size:17px;border-radius:14px}
.pn-btn-primary{background:var(--pn-accent);color:var(--pn-on-accent);box-shadow:inset 0 0 0 1px var(--pn-accent-press),0 1px 2px oklch(0.4 0.1 135/.25)}
.pn-btn-primary:hover{background:var(--pn-accent-press)}
.pn-btn-tinted{background:var(--pn-tinted-bg);color:var(--pn-tinted-ink)}
.pn-btn-tinted:hover{background:var(--pn-tinted-hover)}
.pn-btn-gray{background:var(--pn-gray-soft);color:var(--pn-ink)}
.pn-btn-gray:hover{background:var(--pn-gray-hover)}
.pn-btn-plain{background:transparent;color:var(--pn-accent-ink);padding:0 8px}
.pn-btn-plain:hover{background:var(--pn-accent-soft)}
.pn-btn-danger{background:var(--pn-red-soft);color:var(--pn-red-ink)}
.pn-btn-icon{width:40px;padding:0}.pn-btn-sm.pn-btn-icon{width:32px}
.pn .pn-btn:hover{text-decoration:none}
/* fields */
.pn-search{position:relative;display:flex;align-items:center;height:40px;border-radius:12px;background:var(--pn-bg-2);color:var(--pn-ink-2);transition:box-shadow .2s,background .2s}
.pn-search i{position:absolute;left:12px;font-size:17px;pointer-events:none}
.pn-search input{all:unset;box-sizing:border-box;width:100%;height:100%;padding:0 12px 0 38px;font-family:var(--pn-font);font-size:15px;color:var(--pn-ink)}
.pn-search input::placeholder{color:var(--pn-ink-3)}
.pn-search:focus-within{background:var(--pn-surface);box-shadow:0 0 0 2px var(--pn-accent)}
.pn-field{display:flex;flex-direction:column;gap:6px}
.pn-field>label{font-size:13px;font-weight:500;color:var(--pn-ink-2)}
.pn-input{height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--pn-line);background:var(--pn-surface);font:inherit;font-size:15px;color:var(--pn-ink);transition:border-color .2s,box-shadow .2s}
.pn-input:hover{border-color:var(--pn-input-hover)}
.pn-input:focus{outline:none;border-color:var(--pn-accent);box-shadow:0 0 0 3px var(--pn-accent-ring)}
.pn-hint{font-size:12px;color:var(--pn-ink-3)}
/* segmented */
.pn-seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:2px;border-radius:11px;background:var(--pn-bg-2);height:36px}
.pn-seg-thumb{position:absolute;top:2px;bottom:2px;left:calc(2px + var(--i) * (100% - 4px) / var(--n));width:calc((100% - 4px) / var(--n));border-radius:9px;background:var(--pn-surface);box-shadow:0 1px 3px oklch(0.2 0.02 285/.12),0 0 0 .5px oklch(0.2 0.02 285/.05);transition:left .35s var(--pn-ease)}
.pn-seg button{all:unset;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;font-family:var(--pn-font);font-size:13px;font-weight:500;color:var(--pn-ink-2);cursor:pointer;white-space:nowrap;transition:color .2s}
.pn-seg button[aria-pressed="true"]{color:var(--pn-ink);font-weight:600}
.pn-seg button:focus-visible{outline:2px solid var(--pn-accent);border-radius:9px}
/* cards & lists */
.pn-card{background:var(--pn-surface);border-radius:var(--pn-r-lg);box-shadow:var(--pn-shadow-1)}
.pn-card-pad{padding:var(--pn-s-5)}
.pn-card-link{display:block;color:inherit;cursor:pointer;transition:transform .35s var(--pn-ease),box-shadow .35s var(--pn-ease)}
.pn-card-link:hover{transform:translateY(-2px);box-shadow:var(--pn-shadow-2)}
.pn-card-link:active{transform:scale(.99)}
.pn-list{background:var(--pn-surface);border-radius:var(--pn-r-md);overflow:hidden}
.pn-row{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:48px;transition:background .15s}
.pn-row+.pn-row::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--pn-line-soft)}
.pn-row-tap{cursor:pointer}.pn-row-tap:hover{background:var(--pn-surface-2)}.pn-row-tap:active{background:var(--pn-bg-2)}
.pn-chev{color:var(--pn-ink-3);font-size:14px}
.pn-section-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--pn-s-3)}
.pn-section-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;font-size:15px}
.pn-count{font-size:13px;font-weight:600;color:var(--pn-ink-2);background:var(--pn-bg-2);padding:1px 8px;border-radius:999px}
/* badges */
.pn-badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;line-height:1}
.pn-badge i{font-size:13px}
.pn-badge-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pn-badge-lg{height:28px;padding:0 11px;font-size:13px}
.pn-tone-red{background:var(--pn-red-soft);color:var(--pn-red-ink)}
.pn-tone-amber{background:var(--pn-amber-soft);color:var(--pn-amber-ink)}
.pn-tone-green{background:var(--pn-green-soft);color:var(--pn-green-ink)}
.pn-tone-gray{background:var(--pn-gray-soft);color:var(--pn-ink-2)}
.pn-tone-blue{background:var(--pn-blue-soft);color:var(--pn-blue-ink)}
.pn-tone-slate{background:var(--pn-slate-soft);color:var(--pn-slate-ink)}
.pn-tone-accent{background:var(--pn-accent-soft);color:var(--pn-accent-ink)}
.pn-prio{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--pn-ink-2)}
.pn-prio-bars{display:inline-flex;align-items:flex-end;gap:1.5px;height:10px}
.pn-prio-bars span{width:3px;border-radius:1px;background:var(--pn-line)}
.pn-prio-bars span:nth-child(1){height:4px}.pn-prio-bars span:nth-child(2){height:7px}.pn-prio-bars span:nth-child(3){height:10px}
.pn-prio-bars span.on{background:var(--pn-ink-2)}
/* people */
.pn-avatar{display:inline-grid;place-items:center;flex:none;border-radius:50%;font-weight:600;letter-spacing:.01em;background:oklch(var(--pn-av-bg-l) 0.05 var(--h));color:oklch(var(--pn-av-ink-l) 0.1 var(--h));box-shadow:0 0 0 2px var(--pn-surface)}
.pn-avatar-leader{box-shadow:0 0 0 2px var(--pn-surface),0 0 0 4px var(--pn-gold)}
.pn-avatars{display:inline-flex}.pn-avatars>*+*{margin-left:-7px}
.pn-person{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.pn a.pn-person-name{font-weight:600;color:var(--pn-accent-ink)}
/* navigation */
.pn-sidebar{display:flex;flex-direction:column;gap:2px;width:248px;flex:none;padding:20px 12px;background:var(--pn-sidebar);backdrop-filter:blur(20px);border-right:1px solid var(--pn-line-soft)}
.pn-brand{display:flex;align-items:center;gap:10px;padding:4px 10px 20px}
.pn-brand-mark{width:30px;height:30px;border-radius:9px;background:var(--pn-accent);display:grid;place-items:center}
.pn-brand-mark span{width:12px;height:12px;border-radius:50%;background:var(--pn-surface)}
.pn-nav-item{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:10px;font-size:15px;font-weight:500;color:var(--pn-ink);cursor:pointer;transition:background .15s}
.pn-nav-item i{font-size:19px;color:var(--pn-ink-2)}
.pn-nav-item:hover{background:var(--pn-hover)}
.pn-nav-item.is-active{background:var(--pn-surface);box-shadow:var(--pn-shadow-1);font-weight:600}
.pn-nav-item.is-active i{color:var(--pn-accent)}
.pn-nav-label{padding:16px 10px 6px;font-size:12px;font-weight:600;color:var(--pn-ink-3)}
.pn-tabbar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:6px 6px 26px;background:var(--pn-glass);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border-top:.5px solid oklch(0.2 0.02 285/.1)}
.pn-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;font-size:10px;font-weight:600;color:var(--pn-ink-3);cursor:pointer}
.pn-tab i{font-size:25px}
.pn-tab.is-active{color:var(--pn-accent)}
.pn-navbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 8px;background:var(--pn-glass);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6)}
/* timeline */
.pn-track{position:relative;height:8px;border-radius:999px;background:var(--pn-bg-2);overflow:hidden}
.pn-track>span{position:absolute;inset:0 auto 0 0;border-radius:999px}
/* forms — etapa 2 */
.pn-group{background:var(--pn-surface);border-radius:var(--pn-r-lg);box-shadow:var(--pn-shadow-1)}
.pn-input.is-error{border-color:var(--pn-red);box-shadow:0 0 0 3px oklch(0.58 0.2 25/.12)}
.pn-input.pn-locked{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--pn-surface-2);border-color:var(--pn-line-soft);color:var(--pn-ink-2)}
.pn-err{display:flex;align-items:flex-start;gap:6px;font-size:13px;font-weight:500;color:var(--pn-red-ink)}
.pn-err i{margin-top:2px}
.pn-step{display:inline-grid;grid-template-columns:34px 1fr 34px;align-items:center;flex:none;height:36px;width:120px;border-radius:10px;background:var(--pn-bg-2);transition:box-shadow .2s,background .2s}
.pn-step button{all:unset;display:grid;place-items:center;height:100%;cursor:pointer;color:var(--pn-ink-2);font-size:15px;border-radius:10px}
.pn-step button:hover{background:var(--pn-hover)}
.pn-step output{text-align:center;font-weight:600;font-size:15px;white-space:nowrap}
.pn-step.is-empty output{color:var(--pn-ink-3);font-weight:500}
.pn-step.is-focus{background:var(--pn-surface);box-shadow:0 0 0 2px var(--pn-accent)}
.pn-step.is-error,.pn-step.is-over{background:var(--pn-surface);color:var(--pn-red-ink);box-shadow:0 0 0 1.5px var(--pn-red)}
.pn-step.is-error output,.pn-step.is-over output{color:var(--pn-red-ink)}
.pn-switch{position:relative;flex:none;width:51px;height:31px;border-radius:999px;background:var(--pn-control-off);cursor:pointer;transition:background .25s}
.pn-switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--pn-surface);box-shadow:0 2px 6px oklch(0.2 0.02 285/.2);transition:left .3s var(--pn-ease)}
.pn-switch.is-on{background:var(--pn-green)}.pn-switch.is-on::after{left:22px}
.pn-switch.is-on.is-red{background:var(--pn-red)}
.pn-check{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--pn-check-ring);color:transparent;font-size:13px;cursor:pointer;transition:background .2s}
.pn-check.is-on{background:var(--pn-accent);box-shadow:none;color:var(--pn-on-accent)}
.pn-check.is-disabled{background:var(--pn-bg-2);box-shadow:none;cursor:not-allowed}
.pn-choice{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--pn-line);cursor:pointer;transition:background .2s,box-shadow .2s}
.pn-choice:hover{background:var(--pn-surface-2)}
.pn-choice.is-on{background:var(--pn-accent-soft);box-shadow:inset 0 0 0 2px var(--pn-accent)}
.pn-callout{display:flex;gap:12px;padding:14px 16px;border-radius:14px;font-size:14px;line-height:1.45}
.pn-callout>i{font-size:20px;flex:none;margin-top:1px}
.pn-dim{position:absolute;inset:0;z-index:20;background:oklch(0.2 0.02 285/.3)}
.pn-sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;display:flex;flex-direction:column;background:var(--pn-bg);border-radius:28px 28px 0 0;box-shadow:var(--pn-shadow-3)}
.pn-grabber{width:36px;height:5px;border-radius:3px;background:var(--pn-check-ring);margin:8px auto 4px}
.pn-modal{position:absolute;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:540px;display:flex;flex-direction:column;gap:20px;padding:28px;background:var(--pn-surface);border-radius:24px;box-shadow:var(--pn-shadow-3)}
.pn-pop{position:absolute;z-index:15;display:flex;flex-direction:column;background:var(--pn-surface);border-radius:18px;box-shadow:var(--pn-shadow-3),0 0 0 1px oklch(0.2 0.02 285/.06);overflow:hidden}
.pn-rank{display:grid;place-items:center;flex:none;min-width:40px;height:40px;padding:0 8px;border-radius:12px;background:var(--pn-bg-2);font-size:17px;font-weight:700;color:var(--pn-ink)}
.pn-drag{position:absolute;left:0;right:0;display:flex;align-items:center;gap:14px;padding:0 16px;background:var(--pn-surface);border-radius:16px;box-shadow:var(--pn-shadow-1);transition:top .28s var(--pn-ease),box-shadow .2s,transform .2s var(--pn-ease)}
.pn-drag.is-lifted{z-index:5;transition:box-shadow .2s,transform .2s var(--pn-ease);transform:scale(1.02);box-shadow:var(--pn-shadow-3),0 0 0 2px var(--pn-accent)}
.pn-handle{display:grid;place-items:center;width:36px;height:44px;border-radius:10px;color:var(--pn-ink-3);font-size:22px;cursor:grab;touch-action:none}
.pn-handle:hover{background:var(--pn-bg-2);color:var(--pn-ink-2)}
.pn-drag.is-lifted .pn-handle{cursor:grabbing;color:var(--pn-accent)}
.pn-slot{position:absolute;left:0;right:0;border-radius:16px;box-shadow:inset 0 0 0 2px var(--pn-accent-ring);background:color-mix(in oklch,var(--pn-accent) 8%,transparent);border:0}
.pn-dash{border:1.5px dashed var(--pn-line);border-radius:14px}
/* estados — etapa 4 */
@keyframes pn-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.pn-skel{display:block;border-radius:8px;background:linear-gradient(90deg,var(--pn-bg-2) 0,var(--pn-skel-hi) 50%,var(--pn-bg-2) 100%);background-size:800px 100%;animation:pn-shimmer 1.4s linear infinite}
@keyframes pn-spin{to{transform:rotate(360deg)}}
.pn-spinner{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:pn-spin .8s linear infinite;flex:none}
.pn-toast{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:16px;background:var(--pn-toast-bg);color:var(--pn-toast-ink);box-shadow:var(--pn-shadow-3);font-size:14px;font-weight:500}
.pn-toast i{font-size:20px}
.pn-toast .pn-btn-plain{color:var(--pn-accent-ink)}[data-theme="dark"] .pn-toast .pn-btn-plain{color:oklch(0.47 0.12 138)}
/* motion */
@keyframes pn-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pn-rise{animation:pn-rise .5s var(--pn-ease) both}
@media (prefers-reduced-motion:reduce){.pn *{animation:none!important;transition:none!important}}