/* Draffa — componentes. Tudo lê as variáveis de tokens.css; nenhuma cor literal. */
.df-canvas{background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.5;padding:var(--space-4);-webkit-font-smoothing:antialiased}
.df-canvas *{box-sizing:border-box}
.df-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.df-stack{display:grid;gap:var(--space-3)}
.df-ic{width:20px;height:20px;flex:none;display:block}
.df-ic--16{width:16px;height:16px}.df-ic--24{width:24px;height:24px}.df-ic--28{width:28px;height:28px}
:where(.df-canvas) :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Botão */
.df-btn{appearance:none;border:0;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:48px;padding:0 22px;border-radius:var(--radius-full);font:500 16px/1 var(--font-sans);cursor:pointer;text-decoration:none;transition:background-color .16s ease,transform .16s ease,box-shadow .16s ease;white-space:nowrap}
.df-btn:active{transform:scale(.98)}
.df-btn--primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-1)}
.df-btn--primary:hover{background:var(--primary-hover)}
.df-btn--secondary{background:var(--surface-raised);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-1)}
.df-btn--secondary:hover{background:var(--surface-sunken)}
.df-btn--ghost{background:transparent;color:var(--link);padding:0 14px}
.df-btn--ghost:hover{background:var(--primary-soft)}
.df-btn--danger{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.df-btn--sm{height:40px;padding:0 16px;font-size:14px}
.df-btn--block{display:flex;width:100%}
.df-btn[disabled],.df-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}

/* Botão de ícone */
.df-iconbtn{appearance:none;border:0;width:44px;height:44px;border-radius:var(--radius-full);display:inline-grid;place-items:center;background:var(--surface-sunken);color:var(--ink);cursor:pointer;position:relative;transition:background-color .16s ease}
.df-iconbtn:hover{background:var(--line)}
.df-iconbtn--plain{background:transparent}
.df-iconbtn--primary{background:var(--primary);color:var(--on-primary)}
.df-iconbtn--primary:hover{background:var(--primary-hover)}
.df-iconbtn .df-dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:var(--radius-full);background:var(--brand-pink);box-shadow:0 0 0 2px var(--surface)}

/* Ações do post */
.df-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);background:var(--surface-raised);border-radius:var(--radius-xl);padding:var(--space-3) var(--space-2);box-shadow:var(--shadow-2)}
.df-action{appearance:none;border:0;background:transparent;color:var(--ink);display:grid;justify-items:center;gap:6px;font:500 12px/1.2 var(--font-sans);cursor:pointer;padding:4px 0;border-radius:var(--radius-md)}
.df-action .df-action__ic{width:52px;height:52px;border-radius:var(--radius-full);display:grid;place-items:center;background:var(--surface-sunken);transition:background-color .16s ease,transform .16s ease}
.df-action:hover .df-action__ic{background:var(--line)}
.df-action:active .df-action__ic{transform:scale(.94)}
.df-action--main .df-action__ic{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-1)}
.df-action--main:hover .df-action__ic{background:var(--primary-hover)}
.df-action--main{color:var(--link)}

/* Campo */
.df-field{display:grid;gap:6px}
.df-field__label{font:500 14px/1.3 var(--font-sans);color:var(--ink)}
.df-field__hint{font:400 13px/1.4 var(--font-sans);color:var(--ink-muted)}
.df-input{width:100%;height:52px;padding:0 16px;border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--surface-raised);color:var(--ink);font:400 16px/1.4 var(--font-sans);transition:border-color .16s ease,box-shadow .16s ease}
textarea.df-input{height:auto;min-height:120px;padding:14px 16px;resize:vertical}
.df-input::placeholder{color:var(--ink-faint)}
.df-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.df-input--icon{padding-left:46px}
.df-inputwrap{position:relative}
.df-inputwrap .df-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-muted)}
.df-field--erro .df-input{border-color:var(--danger)}
.df-field--erro .df-field__hint{color:var(--danger);display:flex;gap:6px;align-items:center}

/* Seletor de cliente */
.df-clientswitch{appearance:none;border:0;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 14px 0 6px;border-radius:var(--radius-full);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-1);color:var(--ink);font:500 15px/1 var(--font-sans);cursor:pointer}
.df-avatar{width:36px;height:36px;border-radius:var(--radius-full);display:grid;place-items:center;font:600 14px/1 var(--font-sans);color:#fff;flex:none;overflow:hidden;background-size:cover;background-position:center}
.df-avatar--lg{width:44px;height:44px;font-size:16px}
.df-menu{background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);padding:6px;display:grid;min-width:240px}
.df-menu__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-md);font:500 15px/1.2 var(--font-sans);color:var(--ink);cursor:pointer}
.df-menu__item:hover{background:var(--surface-sunken)}
.df-menu__item[aria-selected="true"]{background:var(--primary-soft)}
.df-menu__item .df-ic:last-child{margin-left:auto;color:var(--link)}

/* Cabeçalho do cliente */
.df-clienthead{display:flex;align-items:center;gap:12px;padding:var(--space-2) 0}
.df-clienthead__txt{display:grid;gap:2px;min-width:0}
.df-clienthead__name{font:500 17px/1.2 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.df-clienthead__meta{font:400 13px/1.2 var(--font-sans);color:var(--ink-muted)}
.df-clienthead__end{margin-left:auto;display:flex;gap:8px}
.df-pagetitle{font:500 32px/1.1 var(--font-display);letter-spacing:-.02em;margin:0;color:var(--ink)}

/* Etiqueta de estado */
.df-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 9px;border-radius:var(--radius-full);font:500 13px/1 var(--font-sans);white-space:nowrap}
.df-chip--pendente{background:var(--primary-soft);color:var(--link)}
.df-chip--aprovado{background:var(--success-soft);color:var(--success)}
.df-chip--revisao{background:var(--warning-soft);color:var(--warning)}
.df-chip--erro{background:var(--danger-soft);color:var(--danger)}
.df-chip--neutro{background:var(--surface-sunken);color:var(--ink-muted)}

/* Card de post */
.df-post{background:var(--surface-raised);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-1);display:grid;transition:box-shadow .16s ease,transform .16s ease}
.df-post:hover{box-shadow:var(--shadow-2)}
.df-post__media{aspect-ratio:4/5;background:var(--surface-sunken) center/cover no-repeat;position:relative}
.df-post__type{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:var(--radius-full);display:grid;place-items:center;background:var(--scrim);color:#fff;backdrop-filter:blur(6px)}
.df-post__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px}
.df-post__date{font:500 13px/1 var(--font-sans);color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* Grade do mês */
.df-postgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.df-progress{display:grid;gap:8px}
.df-progress__top{display:flex;justify-content:space-between;font:500 14px/1 var(--font-sans);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.df-bar{height:8px;border-radius:var(--radius-full);background:var(--surface-sunken);overflow:hidden}
.df-bar>span{display:block;height:100%;border-radius:inherit;background:var(--primary);transition:width .24s ease}

/* Carrossel */
.df-carousel{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-sunken);position:relative}
.df-carousel__media{aspect-ratio:4/5;background:center/cover no-repeat}
.df-carousel__count{position:absolute;top:12px;right:12px;height:28px;padding:0 10px;border-radius:var(--radius-full);background:var(--scrim);color:#fff;font:500 13px/28px var(--font-sans);font-variant-numeric:tabular-nums;backdrop-filter:blur(6px)}
.df-dots{display:flex;justify-content:center;gap:6px;padding:12px 0 4px}
.df-dots span{width:6px;height:6px;border-radius:var(--radius-full);background:var(--line-strong);transition:width .2s ease}
.df-dots span[aria-current="true"]{width:18px;background:var(--primary)}

/* Player de Reels */
.df-reels{aspect-ratio:9/16;border-radius:var(--radius-lg);overflow:hidden;position:relative;background:#0B0B20 center/cover no-repeat;max-width:260px}
.df-reels__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:var(--radius-full);display:grid;place-items:center;background:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(10px);border:0;cursor:pointer}
.df-reels__time{position:absolute;left:12px;bottom:12px;height:26px;padding:0 10px;border-radius:var(--radius-full);background:var(--scrim);color:#fff;font:500 12px/26px var(--font-sans);font-variant-numeric:tabular-nums}
.df-reels__type{position:absolute;top:12px;left:12px;display:flex;gap:6px;align-items:center;color:#fff;font:500 13px/1 var(--font-sans);text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* Editor de legenda */
.df-caption{background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:var(--space-4);display:grid;gap:var(--space-3)}
.df-caption__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.df-caption__count{font:500 13px/1 var(--font-sans);color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* Envio de mídia */
.df-drop{border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--surface-raised);padding:var(--space-6) var(--space-4);display:grid;justify-items:center;gap:8px;text-align:center;color:var(--ink-muted);font:400 14px/1.4 var(--font-sans)}
.df-drop__ic{width:56px;height:56px;border-radius:var(--radius-full);display:grid;place-items:center;background:var(--primary-soft);color:var(--link)}
.df-drop strong{color:var(--ink);font-weight:500;font-size:16px}
.df-file{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--surface-raised);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--line)}
.df-file__thumb{width:44px;height:44px;border-radius:10px;background:var(--surface-sunken) center/cover;flex:none}
.df-file__txt{flex:1;min-width:0;display:grid;gap:6px}
.df-file__name{font:500 14px/1.2 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.df-file__meta{font:400 12px/1 var(--font-sans);color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* Lista */
.df-list{background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);overflow:hidden}
.df-item{display:flex;align-items:center;gap:12px;min-height:68px;padding:10px 16px;color:var(--ink);text-decoration:none}
.df-item+.df-item{box-shadow:inset 0 1px 0 var(--line)}
.df-item:hover{background:var(--surface-sunken)}
.df-item__txt{flex:1;min-width:0;display:grid;gap:3px}
.df-item__title{font:500 15px/1.25 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.df-item__meta{font:400 13px/1.3 var(--font-sans);color:var(--ink-muted)}
.df-item>.df-ic:last-child{color:var(--ink-muted)}
.df-item__ic{width:40px;height:40px;border-radius:var(--radius-full);display:grid;place-items:center;background:var(--surface-sunken);color:var(--ink);flex:none}

/* Tabela (painel administrativo, computador) */
.df-tablewrap{background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);overflow-x:auto}
.df-table{width:100%;border-collapse:collapse;font:400 14px/1.4 var(--font-sans);color:var(--ink);min-width:560px}
.df-table th{text-align:left;font:500 12px/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);background:var(--surface-sunken);padding:12px 16px}
.df-table td{padding:14px 16px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;vertical-align:middle}
.df-table tr:hover td{background:var(--surface-sunken)}
.df-table .num{text-align:right}

/* Aviso rápido */
.df-toast{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px 10px 14px;border-radius:var(--radius-full);background:var(--ink);color:var(--surface-raised);font:500 15px/1.3 var(--font-sans);box-shadow:var(--shadow-3)}
.df-toast .df-toast__ic{width:28px;height:28px;border-radius:var(--radius-full);display:grid;place-items:center;background:var(--success-soft);color:var(--success)}
.df-toast--erro .df-toast__ic{background:var(--danger-soft);color:var(--danger)}
.df-toast button{appearance:none;border:0;background:transparent;color:inherit;font:600 14px/1 var(--font-sans);padding:6px 4px 6px 12px;cursor:pointer;opacity:.85}

/* Confirmação (painel que sobe do rodapé) */
.df-sheet{background:var(--surface-raised);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-3);padding:10px var(--space-5) var(--space-6);display:grid;gap:var(--space-3);max-width:420px}
.df-sheet__handle{width:40px;height:5px;border-radius:var(--radius-full);background:var(--line);justify-self:center;margin-bottom:6px}
.df-sheet__ic{width:52px;height:52px;border-radius:var(--radius-full);display:grid;place-items:center;background:var(--warning-soft);color:var(--warning)}
.df-sheet h3{margin:0;font:500 22px/1.2 var(--font-display);letter-spacing:-.01em}
.df-sheet p{margin:0;color:var(--ink-muted);font:400 15px/1.5 var(--font-sans)}
.df-sheet__btns{display:grid;gap:10px;margin-top:6px}

/* Navegação inferior */
.df-tabbar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface-raised);border-radius:var(--radius-xl);box-shadow:var(--shadow-2);padding:8px;max-width:420px}
.df-tab{display:grid;justify-items:center;gap:4px;padding:6px 0;color:var(--ink-muted);font:500 12px/1 var(--font-sans);text-decoration:none;border-radius:var(--radius-lg)}
.df-tab .df-tab__ic{width:56px;height:32px;border-radius:var(--radius-full);display:grid;place-items:center;transition:background-color .16s ease}
.df-tab[aria-current="page"]{color:var(--link)}
.df-tab[aria-current="page"] .df-tab__ic{background:var(--primary-soft)}

/* Segmentado */
.df-segment{display:inline-grid;grid-auto-flow:column;gap:4px;padding:4px;border-radius:var(--radius-full);background:var(--surface-sunken)}
.df-segment button{appearance:none;border:0;height:36px;padding:0 16px;border-radius:var(--radius-full);background:transparent;color:var(--ink-muted);font:500 14px/1 var(--font-sans);cursor:pointer}
.df-segment button[aria-pressed="true"]{background:var(--surface-raised);color:var(--ink);box-shadow:var(--shadow-1)}

/* Momentos de marca (pixel) */
.df-moment{display:grid;justify-items:center;text-align:center;gap:var(--space-3);padding:var(--space-8) var(--space-5);background:var(--surface-raised);border-radius:var(--radius-xl);box-shadow:var(--shadow-1)}
.df-moment__art{width:96px;height:96px;image-rendering:pixelated}
.df-moment__tile{width:128px;height:128px;border-radius:var(--radius-xl);background:var(--primary);display:grid;place-items:center;box-shadow:var(--shadow-2)}
.df-moment__tile .df-moment__art{width:88px;height:88px}
.df-moment h3{margin:0;font:500 24px/1.15 var(--font-display);letter-spacing:-.01em}
.df-moment p{margin:0;max-width:34ch;color:var(--ink-muted);font:400 15px/1.5 var(--font-sans)}
.df-moment--brand{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-3);position:relative;overflow:hidden}
.df-moment--brand p{color:var(--on-primary);opacity:.9}
.df-confetti{position:absolute;width:10px;height:10px}
.df-loading{width:100%;max-width:220px;height:10px;border-radius:var(--radius-full);background:var(--surface-sunken);overflow:hidden}
.df-loading span{display:block;height:100%;width:40%;border-radius:inherit;background:var(--primary);animation:df-load 1.2s ease-in-out infinite}
@keyframes df-load{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){.df-loading span{animation:none;width:60%}.df-btn,.df-post,.df-action__ic{transition:none}}