/*!
 * ═══════════════════════════════════════════════════════════════════
 *  PLAY DISPLAY — Design System
 *  v3 · admin + área do cliente (editor com envio em lote)
 * ═══════════════════════════════════════════════════════════════════
 *
 * ARQUITETURA — cascade layers
 *   @layer reset      → normalizações do navegador
 *   @layer tokens     → design tokens (variáveis CSS)
 *   @layer base       → elementos HTML
 *   @layer components → componentes da aplicação
 *   @layer utilities  → utilitários pontuais
 *
 * A ordem declarada na linha @layer é a prioridade FINAL, independente
 * da ordem física dos seletores. Isso elimina briga de especificidade
 * sem !important (o único no arquivo é o [hidden], documentado).
 *
 * REGRAS DA CASA
 *   • Nenhum valor mágico: cor, espaço, raio, sombra e transição saem
 *     sempre de token. Exceção documentada: cores de status.
 *   • Uma layer components apenas — sublayers aninhadas perdem
 *     prioridade para regras diretas da layer pai (armadilha da v2).
 *   • Correções de layout moram na definição do componente, nunca
 *     como patch no fim do arquivo.
 *   • Media queries agrupadas no final, em 4 breakpoints fixos.
 *
 * CORRIGIDO NESTA VERSÃO
 *   1. Comentário quebrado no fim do arquivo (um fence markdown vazou
 *      para dentro do CSS) que anulava o @media de 1200px inteiro —
 *      o parser consumia o bloco tentando se recuperar do lixo.
 *   2. @layer components aninhado dentro de @layer components: a
 *      normalização de form controls virava sublayer e era vencida
 *      por qualquer regra direta escrita depois.
 *   3. Oito seletores duplicados (.editor, .editor__corpo,
 *      .editor__paginas, .editor__palco, .editor__props, .editor__prop,
 *      .editor__prop-linha, .quadro__dias) — consolidados.
 *   4. Patches de overflow movidos para dentro dos componentes.
 *
 * NOVO NESTA VERSÃO
 *   • Estados do editor do cliente: slot alterado, miniatura em
 *     pré-visualização, dia travado por contrato.
 *   • Barra de ação do editor (envio em lote) alinhada ao Publicar
 *     do admin.
 */

@layer reset, tokens, base, components, utilities;


/* ══════════════════════════════════════════════════════════════════
   RESET
   ══════════════════════════════════════════════════════════════════ */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }

    * { margin: 0; }

    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

    body { min-height: 100vh; line-height: 1.5; }

    img, picture, video, canvas, svg { display: block; max-width: 100%; }

    input, button, textarea, select { font: inherit; color: inherit; }

    button { background: none; border: none; padding: 0; cursor: pointer; }

    ul, ol { list-style: none; padding: 0; }

    a { color: inherit; text-decoration: none; }

    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

    /* [hidden] deve vencer qualquer display de componente.
       Salvou o lightbox e o editor__prop. */
    [hidden] { display: none !important; }

    /* Reduz movimento para quem prefere */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ══════════════════════════════════════════════════════════════════
   TOKENS — design system
   ══════════════════════════════════════════════════════════════════ */
@layer tokens {
    :root {
        /* — Cores base — */
        --pd-navy-900: #000122;    /* fundo principal */
        --pd-navy-800: #050727;
        --pd-navy-700: #0a0c2e;    /* superfícies */
        --pd-navy-600: #12143a;    /* superfícies hover */
        --pd-line:     #23254a;    /* bordas / molduras */
        --pd-line-strong: #2d305a;

        --pd-rose-500: #ff3377;    /* marca */
        --pd-rose-400: #ff5590;    /* marca hover */
        --pd-rose-300: #ff8fb3;    /* alerta suave */

        --pd-text:     #f4f5fb;
        --pd-text-dim: #9a9db8;    /* texto secundário — contraste AA */
        --pd-text-faint: #6b6e88;

        /* — Cores semânticas de status — */
        --pd-warn: #ffc83c;
        --pd-info: #78aaff;
        --pd-ok:   #50dc82;
        --pd-err:  #ff5d5d;

        /* Superfícies translúcidas (glass) */
        --pd-surface-1: rgba(255, 255, 255, 0.02);
        --pd-surface-2: rgba(255, 255, 255, 0.04);
        --pd-surface-3: rgba(255, 255, 255, 0.06);
        --pd-surface-input: rgba(255, 255, 255, 0.05);
        --pd-surface-input-border: rgba(255, 255, 255, 0.22);

        /* — Aliases semânticos (usados na aplicação) — */
        --pd-bg:            var(--pd-navy-900);
        --pd-surface:       var(--pd-navy-700);
        --pd-surface-hover: var(--pd-navy-600);
        --pd-border:        var(--pd-line);
        --pd-primary:       var(--pd-rose-500);
        --pd-primary-hover: var(--pd-rose-400);
        --pd-danger:        var(--pd-rose-300);

        /* — Espaçamento (escala 4pt) — */
        --pd-space-1: 0.25rem;   /*  4 */
        --pd-space-2: 0.5rem;    /*  8 */
        --pd-space-3: 0.75rem;   /* 12 */
        --pd-space-4: 1rem;      /* 16 */
        --pd-space-5: 1.25rem;   /* 20 */
        --pd-space-6: 1.5rem;    /* 24 */
        --pd-space-8: 2rem;      /* 32 */
        --pd-space-10: 2.5rem;   /* 40 */
        --pd-space-12: 3rem;     /* 48 */

        /* — Tipografia — */
        --pd-font:      'Poppins', system-ui, -apple-system, sans-serif;
        --pd-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

        --pd-fs-xs:   0.72rem;
        --pd-fs-sm:   0.82rem;
        --pd-fs-base: 0.9rem;
        --pd-fs-md:   1rem;
        --pd-fs-lg:   1.15rem;
        --pd-fs-xl:   1.5rem;
        --pd-fs-2xl:  2rem;

        --pd-fw-normal:   400;
        --pd-fw-medium:   500;
        --pd-fw-semibold: 600;
        --pd-fw-bold:     700;

        --pd-leading-tight: 1.25;
        --pd-leading-normal: 1.5;
        --pd-leading-relaxed: 1.6;

        /* — Raios — */
        --pd-radius-sm:   6px;
        --pd-radius:     10px;   /* default */
        --pd-radius-md:  12px;
        --pd-radius-lg:  14px;
        --pd-radius-pill: 99px;

        /* — Sombras — */
        --pd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
        --pd-shadow:    0 10px 30px rgba(0, 0, 0, 0.5);
        --pd-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.45);
        --pd-shadow-focus: 0 0 0 3px rgba(255, 51, 119, 0.25);

        /* — Transições — */
        --pd-ease:        150ms cubic-bezier(0.2, 0, 0.2, 1);
        --pd-ease-slow:   250ms cubic-bezier(0.2, 0, 0.2, 1);

        /* — Camadas (z-index) — */
        --pd-z-sticky:   10;
        --pd-z-dropdown: 20;
        --pd-z-modal:    50;
        --pd-z-toast:    60;

        /* — Densidade — */
        --pd-control-h:    38px;
        --pd-control-h-sm: 30px;

        /* — Layout — */
        --pd-container:      1200px;
        --pd-container-form: 1080px;
        --pd-sidebar:        250px;
        --pd-sidebar-collapsed: 64px;

        /* — Auth screen — */
        --pd-painel-auth: var(--pd-navy-900);

        /* — Aliases legados (manter compat com CSS herdado) — */
        --navy: var(--pd-navy-900);
        --navy-claro: var(--pd-navy-700);
        --moldura: var(--pd-border);
        --rosa: var(--pd-primary);
        --rosa-hover: var(--pd-primary-hover);
        --alerta: var(--pd-danger);
        --texto: var(--pd-text);
        --texto-fraco: var(--pd-text-dim);
        --fonte: var(--pd-font);
        --raio: var(--pd-radius);
        --painel-auth: var(--pd-painel-auth);
    }
}

/* ══════════════════════════════════════════════════════════════════
   BASE — elementos HTML
   ══════════════════════════════════════════════════════════════════ */
@layer base {
    body {
        background: var(--pd-bg);
        color: var(--pd-text);
        font-family: var(--pd-font);
        font-size: 16px;
        line-height: var(--pd-leading-relaxed);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Focus visível único para tudo (acessibilidade) —
       usa focus-visible para não acender no clique de mouse. */
    :focus-visible {
        outline: 2px solid var(--pd-primary);
        outline-offset: 2px;
    }

    /* Placeholder consistente em todos os inputs/textareas */
    ::placeholder { color: rgba(255, 255, 255, 0.35); }

    /* Autofill do Chrome — mantém o fundo escuro em todos os estados.
       Sem !important e sem :hover/:focus, ao ESCOLHER um e-mail da lista
       do navegador o campo voltava a branco (o Chrome reaplica o estilo
       nativo no hover/focus do item escolhido). */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px var(--pd-painel-auth) inset !important;
        -webkit-text-fill-color: var(--pd-text) !important;
        caret-color: var(--pd-text);
        transition: background-color 9999s ease-out 0s;
    }

    /* Selection */
    ::selection { background: rgba(255, 51, 119, 0.35); color: var(--pd-text); }

    /* Scrollbars finas (Firefox / WebKit) */
    * { scrollbar-width: thin; scrollbar-color: var(--pd-border) transparent; }
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
        background: var(--pd-border);
        border-radius: var(--pd-radius-pill);
    }
    *::-webkit-scrollbar-thumb:hover { background: var(--pd-line-strong); }

    @keyframes pulsar {
        0%, 100% { box-shadow: 0 0 0 0 rgba(255, 51, 119, 0.5); }
        50%      { box-shadow: 0 0 0 5px rgba(255, 51, 119, 0); }
    }
}


/* ══════════════════════════════════════════════════════════════════
   COMPONENTS
   ══════════════════════════════════════════════════════════════════ */
@layer components {


/* ═══ Layout base — container e flash ═══ */

.container {
    max-width: var(--pd-container-form);
    margin: 0 auto;
    padding: var(--pd-space-8) var(--pd-space-5);
}

.flash {
    max-width: var(--pd-container-form);
    margin: var(--pd-space-4) auto 0;
    padding: var(--pd-space-3) var(--pd-space-5);
    border: 1px solid var(--pd-primary);
    border-radius: var(--pd-radius);
    background: rgba(255, 51, 119, 0.08);
    color: var(--pd-primary-hover);
    font-size: var(--pd-fs-base);
}
.flash--shell { margin: var(--pd-space-4) var(--pd-space-8) 0; max-width: none; }


/* ═══ Auth (split-screen) ═══ */

.auth-split {
    display: grid;
    grid-template-columns: minmax(400px, 38%) 1fr;
    min-height: 100vh;
}

.auth-split__form {
    background: var(--pd-painel-auth);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--pd-space-12) clamp(1.75rem, 5vw, 4.5rem);
    position: relative;
}
.auth-split__form::after {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: 3px;
    background: linear-gradient(to bottom, transparent, var(--pd-primary), transparent);
}

.auth-marca {
    display: flex;
    align-items: center;
    gap: var(--pd-space-2);
    font-weight: var(--pd-fw-bold);
    font-size: var(--pd-fs-lg);
    margin-bottom: var(--pd-space-10);
}
.auth-marca b { color: var(--pd-primary); }

.auth__titulo    { font-size: 1.7rem; font-weight: var(--pd-fw-semibold); line-height: var(--pd-leading-tight); }
.auth__subtitulo { color: var(--pd-text-dim); font-size: var(--pd-fs-base); margin: var(--pd-space-1) 0 var(--pd-space-8); }

.auth__troca { margin-top: var(--pd-space-6); font-size: var(--pd-fs-base); color: var(--pd-text-dim); }
.auth__troca a { color: var(--pd-primary); font-weight: var(--pd-fw-medium); }
.auth__troca a:hover { text-decoration: underline; }

.auth-split__arte { background: var(--pd-navy-900); overflow: hidden; }
.auth-split__arte img { width: 100%; height: 100%; object-fit: cover; }


/* ═══ Formulários — todos os campos herdam do mesmo lugar ═══ */

.form { display: grid; gap: var(--pd-space-5); }

/* ─── Normalização de form controls fora de .form ──────────────────
   Menus do editor, modais e dropdowns ficam fora de .form e voltavam
   ao desenho nativo do sistema operacional (o select branco no tema
   escuro). Na v2 este bloco vivia numa @layer aninhada — o que o
   rebaixava a sublayer e o fazia perder para qualquer regra direta
   escrita depois. Agora é regra direta, na mesma layer. */

    /* Selects e inputs em qualquer lugar do admin (fora de .form) */
    .editor :is(select, input[type="text"], input[type="email"],
                input[type="password"], input[type="number"],
                input[type="time"], input[type="date"], textarea),
    .modal  :is(select, input[type="text"], input[type="email"],
                input[type="password"], input[type="number"],
                input[type="time"], input[type="date"], textarea),
    .quadro :is(select, input[type="text"], input[type="number"],
                input[type="time"], textarea) {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: var(--pd-surface-input);
        border: 1px solid var(--pd-surface-input-border);
        border-radius: var(--pd-radius);
        padding: 0 var(--pd-space-3);
        height: var(--pd-control-h);          /* altura idêntica em todos */
        color: var(--pd-text);
        font-family: var(--pd-font);
        font-size: var(--pd-fs-sm);
        line-height: 1;
        transition: border-color var(--pd-ease), box-shadow var(--pd-ease);
        min-width: 0;
    }

    .editor select, .modal select, .quadro select {
        /* Chevron desenhado à mão (currentColor = herda a cor do texto) */
        background-image:
            linear-gradient(45deg, transparent 50%, currentColor 50%),
            linear-gradient(-45deg, transparent 50%, currentColor 50%);
        background-position:
            calc(100% - 15px) 55%,
            calc(100% - 10px) 55%;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        padding-right: var(--pd-space-8);      /* espaço para o chevron */
        color: var(--pd-text);
        cursor: pointer;
    }

    /* Textareas voltam a ter altura livre */
    .editor textarea, .modal textarea, .quadro textarea {
        height: auto;
        min-height: 80px;
        padding: var(--pd-space-3);
        line-height: 1.5;
    }

    /* Foco padronizado */
    .editor :is(select, input, textarea):focus,
    .modal  :is(select, input, textarea):focus,
    .quadro :is(select, input, textarea):focus {
        outline: none;
        border-color: var(--pd-primary);
        box-shadow: var(--pd-shadow-focus);
    }

    /* Opções do dropdown (quando o browser deixa customizar) */
    .editor select option,
    .modal  select option,
    .quadro select option {
        background: var(--pd-surface);
        color: var(--pd-text);
    }

    /* Todas as <option> de qualquer <select> herdam o tema escuro.
       Sem isto, o dropdown nativo do SO abre com fundo branco e o texto
       claro fica ilegível (visto no select de solicitar slots). */
    select option {
        background: var(--pd-surface);
        color: var(--pd-text);
    }

    /* Ajuste: botões inline (OK/Salvar) na MESMA altura dos campos */
    .editor__prop-linha .btn,
    .quadro__form-linha .btn {
        height: var(--pd-control-h);
        padding: 0 var(--pd-space-4);
    }

    /* input[type="time"] no Chrome: normaliza o ícone e o padding
       interno para não empurrar o texto para cima */
    input[type="time"]::-webkit-calendar-picker-indicator {
        filter: invert(0.7);
        cursor: pointer;
        opacity: 0.7;
    }
    input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.campo { display: grid; gap: var(--pd-space-1); }

/* ─── Olhinho de senha (mostrar/ocultar) ─────────────────────────
   O JS envolve cada input[type=password] em .senha-campo e injeta o
   botão. O wrapper é position:relative para ancorar o botão à direita. */
.senha-campo { position: relative; display: block; }
.senha-campo input { width: 100%; padding-right: 42px; }
.senha-olho {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--pd-text-faint);
    cursor: pointer;
    border-radius: var(--pd-radius-sm);
    transition: color var(--pd-ease);
}
.senha-olho:hover { color: var(--pd-text); }
.senha-olho svg { width: 18px; height: 18px; }
.senha-olho .olho-fechado { display: none; }
.senha-olho.is-visivel .olho-aberto { display: none; }
.senha-olho.is-visivel .olho-fechado { display: inline; }
.campo label { font-size: var(--pd-fs-sm); font-weight: var(--pd-fw-medium); }
.campo__erro { color: var(--pd-danger); font-size: var(--pd-fs-sm); }
.campo__dica { color: var(--pd-text-dim); font-size: var(--pd-fs-sm); }

.campo__rotulo-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* Controle de formulário CANÔNICO — inputs, selects, textareas
   compartilham este visual em todo o app. */
:where(
    .campo input, .campo select, .campo textarea,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="time"], input[type="date"],
    select, textarea
).pd-control,
.campo :is(input, select, textarea),
.form :is(input[type="text"], input[type="email"], input[type="password"],
          input[type="number"], input[type="time"], select, textarea) {
    background: var(--pd-surface-input);
    border: 1px solid var(--pd-surface-input-border);
    border-radius: var(--pd-radius);
    padding: var(--pd-space-3) var(--pd-space-4);
    color: var(--pd-text);
    font-size: 0.95rem;
    transition: border-color var(--pd-ease), background var(--pd-ease), box-shadow var(--pd-ease);
}

.campo input:focus, .campo select:focus, .campo textarea:focus,
.form :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--pd-primary);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: var(--pd-shadow-focus);
}

.campo input:disabled { opacity: 0.55; cursor: not-allowed; }

.link-esqueci { color: var(--pd-text-dim); font-size: var(--pd-fs-sm); }
.link-esqueci:hover { color: var(--pd-primary); text-decoration: underline; }

.checkbox {
    display: flex;
    align-items: center;
    gap: var(--pd-space-2);
    font-size: var(--pd-fs-base);
    cursor: pointer;
    user-select: none;
}
.checkbox input { accent-color: var(--pd-primary); width: 16px; height: 16px; }


/* ═══ Botões — sistema único com modificadores ═══ */

.btn {
    font-family: var(--pd-font);
    font-weight: var(--pd-fw-semibold);
    font-size: var(--pd-fs-base);
    padding: var(--pd-space-3) var(--pd-space-6);
    border: 1px solid transparent;
    border-radius: var(--pd-radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pd-space-2);
    transition: background var(--pd-ease), border-color var(--pd-ease), color var(--pd-ease), filter var(--pd-ease);
    text-decoration: none;
    white-space: nowrap;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primario { background: var(--pd-primary); color: #fff; }
.btn--primario:hover:not(:disabled) { background: var(--pd-primary-hover); }

.btn--perigo {
    background: transparent;
    color: var(--pd-danger);
    border-color: var(--pd-danger);
}
.btn--perigo:hover { background: rgba(255, 143, 179, 0.1); }

.btn--ghost {
    background: transparent;
    color: var(--pd-text-dim);
    border-color: var(--pd-border);
}
.btn--ghost:hover { color: var(--pd-text); border-color: var(--pd-text-dim); }

.btn--bloco    { width: 100%; }
.btn--compacto { padding: var(--pd-space-2) var(--pd-space-4); font-size: var(--pd-fs-sm); }


/* ═══ Páginas ═══ */

.pagina__titulo    { font-size: 1.6rem; font-weight: var(--pd-fw-semibold); }
.pagina__subtitulo { color: var(--pd-text-dim); margin-bottom: var(--pd-space-8); }

.pagina-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--pd-space-6);
}
.pagina-topo__titulo { font-size: var(--pd-fs-xl); font-weight: var(--pd-fw-semibold); }
.pagina-topo__data   { color: var(--pd-text-dim); font-size: var(--pd-fs-sm); text-transform: capitalize; }

.secao         { margin-bottom: var(--pd-space-10); }
.secao__titulo {
    font-size: var(--pd-fs-lg);
    font-weight: var(--pd-fw-semibold);
    margin-bottom: var(--pd-space-4);
    display: flex;
    align-items: center;
    gap: var(--pd-space-2);
}

.badge {
    background: var(--pd-primary);
    color: #fff;
    font-size: var(--pd-fs-xs);
    font-weight: var(--pd-fw-semibold);
    padding: 2px var(--pd-space-2);
    border-radius: var(--pd-radius-pill);
}

.vazio {
    border: 1px dashed var(--pd-border);
    border-radius: var(--pd-radius);
    padding: var(--pd-space-10);
    text-align: center;
}
.vazio__detalhe { color: var(--pd-text-dim); font-size: var(--pd-fs-base); }

.aviso-specs {
    border: 1px solid var(--pd-border);
    border-left: 3px solid var(--pd-primary);
    border-radius: var(--pd-radius);
    background: var(--pd-surface);
    padding: var(--pd-space-3) var(--pd-space-5);
    font-size: var(--pd-fs-base);
    margin-bottom: var(--pd-space-6);
}


/* ═══ Painéis (cliente e admin) ═══ */

.grade-paineis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--pd-space-5);
}

.painel-card {
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    padding: var(--pd-space-5);
    display: grid;
    gap: var(--pd-space-3);
}
.painel-card__topo   { display: flex; align-items: center; gap: var(--pd-space-2); }
.painel-card__topo h2 { font-size: var(--pd-fs-md); font-weight: var(--pd-fw-semibold); }

.painel-card__info    { display: grid; gap: var(--pd-space-1); font-size: var(--pd-fs-base); }
.painel-card__info div { display: flex; justify-content: space-between; }
.painel-card__info dt  { color: var(--pd-text-dim); }

.led {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.led--on  { background: var(--pd-primary); animation: pulsar 2.2s ease-in-out infinite; }
.led--off { background: var(--pd-border); border: 1px solid var(--pd-text-dim); }


/* ═══ Tabelas ═══ */

.tabela {
    width: 100%;
    /* separate + spacing 0 permite border-radius arredondar em todos os browsers */
    border-collapse: separate;
    border-spacing: 0;
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    overflow: hidden;
    font-size: var(--pd-fs-base);
}
.tabela th, .tabela td { padding: var(--pd-space-3) var(--pd-space-4); text-align: left; }
.tabela thead { background: var(--pd-navy-900); }
.tabela th { color: var(--pd-text-dim); font-weight: var(--pd-fw-medium); font-size: var(--pd-fs-sm); }
.tabela tbody td { border-top: 1px solid var(--pd-border); }
.tabela__acoes { display: flex; gap: var(--pd-space-2); }


/* ═══ Cliente expansível (admin) + vínculo com slots ═══ */

.cliente {
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    margin-bottom: var(--pd-space-3);
}
.cliente__resumo {
    padding: var(--pd-space-4) var(--pd-space-5);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}
.cliente__resumo::-webkit-details-marker { display: none; }
.cliente__meta { color: var(--pd-text-dim); font-size: var(--pd-fs-sm); }

/* Lado direito do resumo: contador de painéis + lixeira */
.cliente__resumo-dir {
    display: flex;
    align-items: center;
    gap: var(--pd-space-3);
}
.cliente__excluir { display: inline-flex; }
.cliente__excluir .icon-btn svg { width: 15px; height: 15px; }

/* Dica sobre onde se define ordem/quantidade de slots */
.cliente__dica {
    color: var(--pd-text-dim);
    font-size: var(--pd-fs-sm);
    margin: var(--pd-space-2) 0 var(--pd-space-4);
}

.cliente__paineis {
    padding: var(--pd-space-1) var(--pd-space-5) var(--pd-space-5);
    border-top: 1px solid var(--pd-border);
    display: grid;
    gap: var(--pd-space-4);
}

.grade-checkbox {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--pd-space-3);
    padding-top: var(--pd-space-4);
}

.checkbox--card {
    display: flex;
    align-items: center;
    gap: var(--pd-space-3);
    cursor: pointer;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    padding: var(--pd-space-3) var(--pd-space-4);
    background: var(--pd-navy-900);
    transition: border-color var(--pd-ease), background var(--pd-ease);
}
.checkbox--card:hover { border-color: var(--pd-primary); }

/* Checkbox visually-hidden (mantém focável) */
.checkbox--card > input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}
.checkbox--card:has(input[type="checkbox"]:checked) {
    border-color: var(--pd-primary);
    background: rgba(255, 51, 119, 0.08);
}
.checkbox--card:has(input[type="checkbox"]:focus-visible) {
    box-shadow: var(--pd-shadow-focus);
}
.checkbox--card > span:first-of-type { display: grid; flex: 1; min-width: 0; }
.checkbox--card small { color: var(--pd-text-dim); font-size: var(--pd-fs-sm); line-height: 1.4; }

.slots-contrato {
    display: flex; align-items: center; gap: var(--pd-space-1);
    flex-shrink: 0;
}
.slots-contrato input {
    width: 54px;
    padding: var(--pd-space-2) var(--pd-space-2);
    text-align: center;
    font-size: var(--pd-fs-sm);
}
.slots-contrato small { color: var(--pd-text-dim); font-size: var(--pd-fs-xs); }


/* ═══ Upload por slots (cliente) ═══ */

.form--slots { gap: var(--pd-space-6); }

.grade-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--pd-space-3);
}

.slot-upload__input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    overflow: hidden;
}
.slot-upload__area {
    display: grid;
    gap: var(--pd-space-1);
    padding: var(--pd-space-6) var(--pd-space-4);
    border: 1.5px dashed var(--pd-border);
    border-radius: var(--pd-radius);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--pd-ease), background var(--pd-ease);
}
.slot-upload__area:hover {
    border-color: var(--pd-primary);
    background: rgba(255, 51, 119, 0.05);
}
.slot-upload:has(.slot-upload__input:focus-visible) .slot-upload__area {
    border-color: var(--pd-primary);
    box-shadow: var(--pd-shadow-focus);
}
.slot-upload--preenchido .slot-upload__area {
    border-style: solid;
    border-color: var(--pd-primary);
}
.slot-upload__numero    { font-weight: var(--pd-fw-semibold); font-size: var(--pd-fs-base); }
.slot-upload__instrucao { color: var(--pd-text-dim); font-size: var(--pd-fs-sm); }
.slot-upload__nome      { color: var(--pd-primary); font-size: var(--pd-fs-sm); word-break: break-all; }


/* ═══ Status de publicação — canônico ═══ */

.status-pub {
    border-radius: var(--pd-radius);
    padding: var(--pd-space-2) var(--pd-space-3);
    font-size: var(--pd-fs-sm);
    font-weight: var(--pd-fw-medium);
    display: grid;
    gap: 2px;
}
.status-pub small { font-weight: var(--pd-fw-normal); color: var(--pd-text-dim); }
.status-pub--em_analise { background: rgba(255, 200, 60, 0.12);  color: var(--pd-warn); }
.status-pub--aprovada   { background: rgba(120, 170, 255, 0.12); color: var(--pd-info); }
.status-pub--publicada  { background: rgba(80, 220, 130, 0.12);  color: var(--pd-ok); }
.status-pub--arquivada  { background: rgba(154, 157, 184, 0.12); color: var(--pd-text-dim); }
.status-pub--recusada   { background: rgba(255, 143, 179, 0.12); color: var(--pd-danger); }
.status-pub--erro       { background: rgba(255, 93, 93, 0.15);   color: var(--pd-err); }

.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-dot--em_analise { background: var(--pd-warn); }
.status-dot--aprovada   { background: var(--pd-info); }
.status-dot--publicada  { background: var(--pd-ok); }
.status-dot--arquivada  { background: var(--pd-text-dim); }
.status-dot--recusada   { background: var(--pd-danger); }
.status-dot--erro       { background: var(--pd-err); }


/* ═══ Moderação (admin) ═══ */

.moderacao {
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    padding: var(--pd-space-4) var(--pd-space-5);
    margin-bottom: var(--pd-space-3);
    display: grid;
    gap: var(--pd-space-4);
}
.moderacao__previews { display: flex; gap: var(--pd-space-3); flex-wrap: wrap; }
.moderacao__acoes {
    display: flex; gap: var(--pd-space-3); flex-wrap: wrap; align-items: stretch;
}
.moderacao__recusa {
    display: flex; gap: var(--pd-space-2); flex: 1; min-width: 280px;
}
.moderacao__recusa input {
    flex: 1;
    /* Sem estilo próprio, o input herdava o branco nativo do navegador
       (texto branco em fundo branco). Alinha ao tema escuro do sistema. */
    background: var(--pd-surface-input);
    color: var(--pd-text);
    border: 1px solid var(--pd-surface-input-border);
    border-radius: var(--pd-radius-sm);
    padding: var(--pd-space-2) var(--pd-space-3);
    font: inherit;
}
.moderacao__recusa input::placeholder { color: var(--pd-text-faint); }
.moderacao__recusa input:focus {
    border-color: var(--pd-danger);
    outline: none;
}


/* ═══ Media preview — componente único ═══
   Substitui .preview / .mini-preview / .quadro__thumb / .vnx-thumb.
   As classes específicas viraram MODIFICADORES de tamanho. */

.media {
    margin: 0;
    display: block;
    background: none;
    border: 0;
    padding: 0;
    cursor: zoom-in;
    position: relative;
}
.media img, .media video {
    aspect-ratio: 3 / 2;    /* proporção dos painéis 576×384 */
    object-fit: cover;
    border-radius: var(--pd-radius-sm);
    border: 1px solid var(--pd-border);
    background: #000;
    display: block;
    width: 100%;
}
.media--mini img, .media--mini video   { width: 56px; }
.media--sm   img, .media--sm   video   { width: 64px; }
.media--md   img, .media--md   video   { width: 72px; }
.media--lg   img, .media--lg   video   { width: 180px; }

.media__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.4rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}
.media__vazio {
    aspect-ratio: 3 / 2;
    display: grid; place-items: center;
    border: 1px dashed var(--pd-border);
    border-radius: var(--pd-radius-sm);
    color: var(--pd-text-dim);
    width: 100%;
}
.media__legenda {
    font-size: var(--pd-fs-xs);
    color: var(--pd-text-dim);
    margin-top: var(--pd-space-1);
    text-align: center;
}
.media:hover img, .media:hover video { border-color: var(--pd-primary); }

/* Compat: as classes antigas ainda usadas em views continuam vivas
   e apontam para o novo sistema. Remover quando migrar as views. */
.preview { margin: 0; }
.preview img, .preview video {
    width: 180px; aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--pd-border);
    display: block; background: #000;
}
.preview figcaption {
    font-size: var(--pd-fs-sm); color: var(--pd-text-dim);
    margin-top: var(--pd-space-1); text-align: center;
}
.preview--clicavel { cursor: zoom-in; position: relative; }
.preview__play {
    position: absolute;
    top: calc(50% - 12px); left: 0; right: 0;
    text-align: center;
    font-size: 1.4rem;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}
.mini-previews { display: flex; gap: var(--pd-space-1); flex-wrap: wrap; }
.mini-preview  { cursor: zoom-in; display: block; }
.mini-preview img, .mini-preview video {
    width: 56px; aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: var(--pd-radius-sm); border: 1px solid var(--pd-border);
    display: block; background: #000;
}
.mini-preview:hover img, .mini-preview:hover video { border-color: var(--pd-primary); }


/* ═══ Shell + Sidebar ═══ */

.shell {
    display: grid;
    grid-template-columns: var(--pd-sidebar) 1fr;
    min-height: 100vh;
}
.shell__main { display: flex; flex-direction: column; min-width: 0; }
.shell__conteudo {
    padding: var(--pd-space-8) var(--pd-space-8) var(--pd-space-10);
    width: 100%;
    max-width: var(--pd-container);
}

.sidebar {
    background: var(--pd-surface);
    border-right: 1px solid var(--pd-border);
    display: flex;
    flex-direction: column;
    padding: var(--pd-space-6) var(--pd-space-3);
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar__logo    { display: flex; align-items: center; padding: 2px var(--pd-space-3) var(--pd-space-6); }
.sidebar__logo img { height: 26px; width: auto; }

.sidebar__nav {
    display: grid;
    gap: var(--pd-space-1);
    flex: 1;
    align-content: start;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--pd-space-3);
    padding: var(--pd-space-3) var(--pd-space-3);
    border-radius: var(--pd-radius);
    color: var(--pd-text-dim);
    font-size: var(--pd-fs-base);
    font-weight: var(--pd-fw-medium);
    transition: background var(--pd-ease), color var(--pd-ease);
}
.sidebar__link svg { width: 19px; height: 19px; flex-shrink: 0; }
.sidebar__link:hover { background: var(--pd-surface-2); color: var(--pd-text); }

.sidebar__link--ativo {
    background: rgba(255, 51, 119, 0.12);
    color: var(--pd-primary);
    position: relative;
}
.sidebar__link--ativo::before {
    content: '';
    position: absolute;
    left: 0; top: 20%;
    width: 3px; height: 60%;
    background: var(--pd-primary);
    border-radius: 0 3px 3px 0;
}

.sidebar__badge {
    margin-left: auto;
    background: var(--pd-primary);
    color: #fff;
    font-size: var(--pd-fs-xs);
    font-weight: var(--pd-fw-semibold);
    min-width: 20px;
    height: 20px;
    padding: 0 var(--pd-space-2);
    border-radius: var(--pd-radius-pill);
    display: grid;
    place-items: center;
}

.sidebar__separador { height: 1px; background: var(--pd-border); margin: var(--pd-space-2) var(--pd-space-3); }

.sidebar__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pd-space-2);
    padding: var(--pd-space-3) var(--pd-space-3) 0;
    border-top: 1px solid var(--pd-border);
}
.sidebar__usuario       { display: grid; min-width: 0; }
.sidebar__usuario-nome  {
    font-size: var(--pd-fs-base); font-weight: var(--pd-fw-semibold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__usuario-cargo {
    font-size: var(--pd-fs-xs); color: var(--pd-text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__sair {
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    color: var(--pd-text-dim);
    padding: var(--pd-space-2);
    flex-shrink: 0;
    transition: color var(--pd-ease), border-color var(--pd-ease);
}
.sidebar__sair svg { width: 17px; height: 17px; }
.sidebar__sair:hover { color: var(--pd-danger); border-color: var(--pd-danger); }


/* ═══ KPIs / cartões / atividade ═══ */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--pd-space-3);
    margin-bottom: var(--pd-space-6);
}
.kpi {
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    padding: var(--pd-space-5);
    display: grid;
    gap: var(--pd-space-1);
    color: var(--pd-text);
    transition: border-color var(--pd-ease), transform var(--pd-ease);
}
a.kpi:hover { border-color: var(--pd-primary); transform: translateY(-2px); }
.kpi__valor { font-size: var(--pd-fs-2xl); font-weight: var(--pd-fw-bold); line-height: 1; }
.kpi__valor small { font-size: var(--pd-fs-md); color: var(--pd-text-dim); font-weight: var(--pd-fw-medium); }
.kpi__rotulo { color: var(--pd-text-dim); font-size: var(--pd-fs-sm); }
.kpi--atencao { border-color: var(--pd-primary); }
.kpi--atencao .kpi__valor { color: var(--pd-primary); }

.cartao {
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    padding: var(--pd-space-6);
    display: grid;
    gap: var(--pd-space-4);
    margin-bottom: var(--pd-space-6);
}
.cartao__topo   { display: flex; justify-content: space-between; align-items: center; }
.cartao__topo h2 {
    font-size: var(--pd-fs-md); font-weight: var(--pd-fw-semibold);
    display: flex; align-items: center; gap: var(--pd-space-2);
}
.cartao__link { color: var(--pd-primary); font-size: var(--pd-fs-sm); }
.cartao__link:hover { text-decoration: underline; }

.atividade { display: grid; gap: var(--pd-space-1); }
.atividade__item {
    display: flex;
    align-items: center;
    gap: var(--pd-space-3);
    padding: var(--pd-space-3) var(--pd-space-2);
    border-radius: var(--pd-radius);
}
.atividade__item:hover { background: var(--pd-surface-1); }
.atividade__info    { display: grid; flex: 1; min-width: 0; }
.atividade__info strong { font-size: var(--pd-fs-base); }
.atividade__info span   { font-size: var(--pd-fs-sm); color: var(--pd-text-dim); }
.atividade__status  { font-size: var(--pd-fs-sm); color: var(--pd-text-dim); }
.atividade__tempo   { font-size: var(--pd-fs-xs); color: var(--pd-text-dim); white-space: nowrap; }


/* ═══ Configurações ═══ */

.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--pd-space-5);
    align-items: start;
}


/* ═══ Lightbox (dialog nativo) ═══ */

.lightbox {
    border: none;
    background: transparent;
    padding: 0;
    max-width: min(92vw, 1100px);
    max-height: 92vh;
    margin: auto;                  /* dialog: centraliza (vence o reset) */
    overflow: visible;
    color: var(--pd-text);
}
.lightbox::backdrop {
    background: rgba(0, 1, 34, 0.88);
    backdrop-filter: blur(4px);
}
.lightbox__conteudo { position: relative; }
.lightbox__conteudo img, .lightbox__conteudo video {
    max-width: min(92vw, 1100px);
    max-height: 86vh;
    display: block;
    border-radius: var(--pd-radius-md);
    background: #000;
}
.lightbox__fechar {
    position: absolute;
    top: var(--pd-space-3); right: var(--pd-space-3);
    z-index: 1;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--pd-primary);
    color: #fff;
    font-size: var(--pd-fs-lg);
    line-height: 1;
    opacity: 0.9;
    transition: opacity var(--pd-ease);
}
.lightbox__fechar:hover { opacity: 1; }


/* ═══ Modal genérico (dialog nativo) ═══ */

.modal {
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    background: var(--pd-surface);
    color: var(--pd-text);
    padding: 0;
    width: min(92vw, 440px);
    margin: auto;
}
.modal::backdrop {
    background: rgba(0, 1, 34, 0.85);
    backdrop-filter: blur(3px);
}
.modal__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pd-space-4) var(--pd-space-5);
    border-bottom: 1px solid var(--pd-border);
}
.modal__topo h3 { font-size: var(--pd-fs-md); }
.modal__fechar {
    width: 30px; height: 30px;
    border-radius: var(--pd-radius);
    border: 1px solid var(--pd-border);
    color: var(--pd-text-dim);
    font-size: var(--pd-fs-md);
    transition: color var(--pd-ease), border-color var(--pd-ease);
}
.modal__fechar:hover { color: var(--pd-danger); border-color: var(--pd-danger); }

.modal__abas-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pd-space-1);
    padding: var(--pd-space-4) var(--pd-space-5) 0;
}
.modal__abas-nav label {
    text-align: center;
    padding: var(--pd-space-2) var(--pd-space-1);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    font-size: var(--pd-fs-sm);
    color: var(--pd-text-dim);
    cursor: pointer;
    transition: color var(--pd-ease), border-color var(--pd-ease), background var(--pd-ease);
}
.modal__abas-nav label:hover { color: var(--pd-text); }
#aba-fixo:checked    ~ .modal__abas-nav label[for="aba-fixo"],
#aba-cliente:checked ~ .modal__abas-nav label[for="aba-cliente"],
#aba-vazio:checked   ~ .modal__abas-nav label[for="aba-vazio"] {
    background: rgba(255, 51, 119, 0.12);
    border-color: var(--pd-primary);
    color: var(--pd-primary);
    font-weight: var(--pd-fw-semibold);
}
.modal__painel { display: none; padding: var(--pd-space-4) var(--pd-space-5) var(--pd-space-5); }
.modal__painel .form { display: grid; gap: var(--pd-space-3); }
#aba-fixo:checked    ~ .modal__painel[data-aba="fixo"],
#aba-cliente:checked ~ .modal__painel[data-aba="cliente"],
#aba-vazio:checked   ~ .modal__painel[data-aba="vazio"] {
    display: block;
}


/* ═══ QUADRO — lista de slots (visão simples, sem palco) ═══ */

.quadro { display: grid; gap: var(--pd-space-2); }

.quadro__slot {
    display: flex;
    align-items: center;
    gap: var(--pd-space-3);
    padding: var(--pd-space-3) var(--pd-space-3);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    background: var(--pd-surface-1);
}
.quadro__slot--fixo    { border-left: 3px solid var(--pd-info); }
.quadro__slot--cliente { border-left: 3px solid var(--pd-primary); }
.quadro__slot--vazio   { border-left: 3px solid var(--pd-border); opacity: 0.75; }

.quadro__numero {
    width: 30px; height: 30px;
    border-radius: var(--pd-radius-sm);
    background: var(--pd-surface-3);
    display: grid; place-items: center;
    font-weight: var(--pd-fw-bold); font-size: var(--pd-fs-sm);
    flex-shrink: 0;
}

.quadro__thumb { cursor: zoom-in; flex-shrink: 0; }
.quadro__thumb img, .quadro__thumb video {
    width: 72px; aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--pd-radius-sm);
    border: 1px solid var(--pd-border);
    display: block; background: #000;
}
.quadro__thumb-vazio {
    width: 72px; aspect-ratio: 3 / 2;
    display: grid; place-items: center;
    border: 1px dashed var(--pd-border); border-radius: var(--pd-radius-sm);
    color: var(--pd-text-dim);
}
.quadro__dono { display: grid; flex: 1; min-width: 0; }
.quadro__dono strong { font-size: var(--pd-fs-base); }
.quadro__dono small  { color: var(--pd-text-dim); font-size: var(--pd-fs-xs); }

.quadro__acoes { display: flex; align-items: center; gap: var(--pd-space-1); }

/* Botão-ícone quadrado — usado no quadro E no editor */
.icon-btn {
    width: var(--pd-control-h-sm); height: var(--pd-control-h-sm);
    border-radius: var(--pd-radius-sm);
    border: 1px solid var(--pd-border);
    background: transparent;
    color: var(--pd-text-dim);
    display: grid; place-items: center;
    font-size: var(--pd-fs-base);
    transition: color var(--pd-ease), border-color var(--pd-ease);
}
.icon-btn:hover:not(:disabled) { color: var(--pd-text); border-color: var(--pd-primary); }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.icon-btn--perigo:hover { color: var(--pd-danger); border-color: var(--pd-danger); }
.icon-btn::-webkit-details-marker { display: none; }
/* Alias legado (compat com views atuais que usam .quadro__btn) */
.quadro__btn {
    width: var(--pd-control-h-sm); height: var(--pd-control-h-sm);
    border-radius: var(--pd-radius-sm);
    border: 1px solid var(--pd-border);
    background: transparent;
    color: var(--pd-text-dim);
    display: grid; place-items: center;
    font-size: var(--pd-fs-base);
    list-style: none;
    transition: color var(--pd-ease), border-color var(--pd-ease);
}
.quadro__btn:hover:not(:disabled) { color: var(--pd-text); border-color: var(--pd-primary); }
.quadro__btn:disabled { opacity: 0.3; cursor: default; }
.quadro__btn--perigo:hover { color: var(--pd-danger); border-color: var(--pd-danger); }
.quadro__btn::-webkit-details-marker { display: none; }

.quadro__trocar { position: relative; }
.quadro__trocar-menu {
    position: absolute;
    right: 0; top: 36px;
    z-index: var(--pd-z-dropdown);
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    padding: var(--pd-space-3);
    display: grid;
    gap: var(--pd-space-2);
    min-width: 240px;
    box-shadow: var(--pd-shadow);
}
.quadro__form-linha { display: flex; gap: var(--pd-space-1); }
.quadro__form-linha select { flex: 1; padding: var(--pd-space-2); font-size: var(--pd-fs-sm); }

.quadro__adicionar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--pd-space-4);
}
.quadro__form-add {
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    padding: var(--pd-space-4);
    display: grid;
    gap: var(--pd-space-3);
    align-content: start;
}
.quadro__form-add h3 { font-size: var(--pd-fs-base); }
.quadro__form-add input[type="file"] { font-size: var(--pd-fs-xs); color: var(--pd-text-dim); }


/* ═══ VNNOX — tabela operacional de painéis ═══ */

.cartao--tabela { padding: var(--pd-space-6) 0 var(--pd-space-2); }
.cartao--tabela .cartao__topo { padding: 0 var(--pd-space-6) var(--pd-space-3); }

.vnx-legenda {
    font-size: var(--pd-fs-sm);
    color: var(--pd-text-dim);
    display: flex; align-items: center; gap: var(--pd-space-1);
}
.vnx-scroll { overflow-x: auto; }

.vnx-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pd-fs-sm);
}
.vnx-tabela th {
    text-align: left;
    padding: var(--pd-space-3) var(--pd-space-3);
    color: var(--pd-text-dim);
    font-weight: var(--pd-fw-medium);
    font-size: var(--pd-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--pd-border);
    white-space: nowrap;
}
.vnx-tabela td {
    padding: var(--pd-space-3) var(--pd-space-3);
    border-bottom: 1px solid var(--pd-surface-1);
    vertical-align: middle;
}
.vnx-tabela tbody tr { transition: background var(--pd-ease); }
.vnx-tabela tbody tr:hover { background: var(--pd-surface-1); }
.vnx-tabela tbody tr:last-child td { border-bottom: none; }

.vnx-thumb-cell { width: 76px; }
.vnx-thumb { cursor: zoom-in; display: block; }
.vnx-thumb img, .vnx-thumb video {
    width: 60px; aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--pd-radius-sm);
    border: 1px solid var(--pd-border);
    display: block; background: #000;
}
.vnx-thumb-vazio {
    width: 60px; aspect-ratio: 3 / 2;
    display: grid; place-items: center;
    border: 1px dashed var(--pd-border);
    border-radius: var(--pd-radius-sm);
    color: var(--pd-text-dim);
}

.vnx-nome { display: flex; align-items: center; gap: var(--pd-space-3); }
.vnx-nome strong { display: block; font-size: var(--pd-fs-base); }
.vnx-nome small  { color: var(--pd-text-dim); font-size: var(--pd-fs-xs); }

.vnx-mono {
    font-variant-numeric: tabular-nums;
    color: var(--pd-text-dim);
    white-space: nowrap;
}

.vnx-slots { font-weight: var(--pd-fw-semibold); }
.vnx-slots small { color: var(--pd-text-dim); font-weight: var(--pd-fw-normal); }
.vnx-livres { display: block; color: var(--pd-ok); font-size: var(--pd-fs-xs); }

.vnx-chip {
    display: inline-block;
    padding: 3px var(--pd-space-2);
    border-radius: var(--pd-radius-pill);
    border: 1px solid var(--pd-border);
    font-size: var(--pd-fs-xs);
    color: var(--pd-text-dim);
    white-space: nowrap;
}
.vnx-chip--ok     { border-color: rgba(80, 220, 130, 0.4); color: var(--pd-ok); }
.vnx-chip--alerta { border-color: rgba(255, 93, 93, 0.4);  color: var(--pd-err); }
.vnx-chip--agenda { border-color: rgba(255, 200, 60, 0.4); color: var(--pd-warn); }

.vnx-operar   { white-space: nowrap; }
.vnx-operar a { color: var(--pd-primary); font-size: var(--pd-fs-sm); }
.vnx-operar a:hover { text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════════
   EDITOR — layout LITERAL do VNNOX
   ══════════════════════════════════════════════════════════════════
   Referência do teu print: coluna estreita à esquerda ~320px,
   lista compacta (número | thumb | rótulo | "Play N time(s)"),
   toolbar minimalista no topo. Palco à direita, propriedades num
   painel deslizante quando o slot é selecionado.
*/

.editor {
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    background: var(--pd-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 640px;
    overflow-x: hidden;      /* nenhuma coluna gera rolagem lateral */
}

.editor__topo {
    display: flex;
    align-items: center;
    gap: var(--pd-space-3);
    padding: var(--pd-space-3) var(--pd-space-5);
    border-bottom: 1px solid var(--pd-border);
}
.editor__voltar {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    color: var(--pd-text);
    font-size: 1.2rem;
    transition: color var(--pd-ease), border-color var(--pd-ease);
}
.editor__voltar:hover { border-color: var(--pd-primary); color: var(--pd-primary); }

.editor__identidade    { flex: 1; display: grid; min-width: 0; }
.editor__identidade strong { font-size: var(--pd-fs-base); }
.editor__identidade small  { color: var(--pd-text-dim); font-size: var(--pd-fs-sm); }

.editor__publicar {
    display: flex; align-items: center; gap: var(--pd-space-3);
}
.editor__pendente {
    color: var(--pd-warn);
    font-size: var(--pd-fs-sm);
    white-space: nowrap;
}

/* Corpo: 3 colunas em desktop */
.editor__corpo {
    display: grid;
    grid-template-columns: 320px 1fr 300px;
    flex: 1;
    min-height: 0;
}

/* ═════ Coluna 1: PÁGINAS (o painel esquerdo do VNNOX) ═════ */

.editor__paginas {
    min-width: 0;              /* grid: permite comprimir */
    border-right: 1px solid var(--pd-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--pd-surface-1);
}

.editor__toolbar {
    display: flex;
    align-items: center;
    gap: var(--pd-space-2);
    padding: var(--pd-space-2) var(--pd-space-3);
    border-bottom: 1px solid var(--pd-border);
    background: var(--pd-surface);
}
.editor__toolbar .btn { flex-shrink: 0; }
.editor__toolbar-dica {
    font-size: var(--pd-fs-xs);
    color: var(--pd-text-dim);
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor__lista {
    display: grid;
    gap: 0;
    padding: var(--pd-space-1);
    overflow-y: auto;
    min-height: 0;
}

/* A "página" — linha compacta estilo VNNOX:
   [nº] [thumb 3:2] [rótulo] [Play N time(s)]
   Densidade alta, sem margens grandes entre linhas. */
.editor__pagina {
    display: grid;
    grid-template-columns: 24px 96px 1fr auto;
    align-items: center;
    gap: var(--pd-space-3);
    padding: var(--pd-space-2) var(--pd-space-2);
    border-radius: var(--pd-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--pd-ease), border-color var(--pd-ease);
    min-height: 60px;
}
.editor__pagina + .editor__pagina { margin-top: 2px; }
.editor__pagina:hover { background: var(--pd-surface-2); }
.editor__pagina--ativa {
    background: rgba(255, 51, 119, 0.14);
    border-color: var(--pd-primary);
}
.editor__pagina--dormindo { opacity: 0.5; }

.editor__pagina-num {
    text-align: center;
    font-size: var(--pd-fs-sm);
    font-weight: var(--pd-fw-bold);
    color: var(--pd-text-dim);
}
.editor__pagina--ativa .editor__pagina-num { color: var(--pd-primary); }

.editor__pagina-thumb {
    width: 96px;
    aspect-ratio: 3 / 2;
    border-radius: var(--pd-radius-sm);
    border: 1px solid var(--pd-border);
    background: #000;
    overflow: hidden;
    display: block;
}
.editor__pagina-thumb img, .editor__pagina-thumb video {
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.editor__pagina-sem {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: var(--pd-text-dim);
    background: var(--pd-surface-1);
    font-size: var(--pd-fs-md);
}

.editor__pagina-info { display: grid; min-width: 0; }
.editor__pagina-info strong {
    font-size: var(--pd-fs-sm);
    font-weight: var(--pd-fw-semibold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor__pagina-info small {
    color: var(--pd-text-dim);
    font-size: var(--pd-fs-xs);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* "Play 1 time(s)" à direita — igual ao VNNOX */
.editor__pagina-repeat {
    color: var(--pd-text-dim);
    font-size: var(--pd-fs-xs);
    white-space: nowrap;
    padding-right: var(--pd-space-1);
}

/* ═════ Coluna 2: PALCO ═════ */

.editor__palco {
    min-width: 0;              /* grid: permite comprimir */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--pd-space-3);
    padding: var(--pd-space-6);
    background:
        repeating-conic-gradient(rgba(255, 255, 255, 0.025) 0% 25%, transparent 0% 50%)
        50% / 22px 22px;
    min-height: 0;
    overflow: hidden;
}
.editor__preview {
    display: grid;
    place-items: center;
    max-width: 100%;
    max-height: 100%;
}
.editor__preview img, .editor__preview video {
    max-width: 100%;
    max-height: 60vh;
    border-radius: var(--pd-radius-md);
    border: 1px solid var(--pd-border);
    background: #000;
    box-shadow: var(--pd-shadow-lg);
}
.editor__palco-vazio    { color: var(--pd-text-dim); font-size: var(--pd-fs-base); }
.editor__palco-legenda  { color: var(--pd-text-dim); font-size: var(--pd-fs-xs); }

/* ═════ Coluna 3: PROPRIEDADES ═════ */

.editor__props {
    min-width: 0;              /* grid: permite comprimir */
    border-left: 1px solid var(--pd-border);
    overflow-y: auto;
    min-height: 0;
    background: var(--pd-surface-1);
}
.editor__prop {
    min-width: 0;
    padding: var(--pd-space-4);
    display: grid;
    gap: var(--pd-space-5);
}
.editor__prop h3 {
    font-size: var(--pd-fs-base);
    font-weight: var(--pd-fw-semibold);
    padding-bottom: var(--pd-space-3);
    border-bottom: 1px solid var(--pd-border);
}

.editor__prop-secao {
    min-width: 0; display: grid; gap: var(--pd-space-2); }
.editor__prop-titulo {
    font-size: var(--pd-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pd-text-dim);
}
.editor__prop-linha { display: flex; gap: var(--pd-space-1); min-width: 0; }
.editor__prop-linha > * { flex: 1 1 0; min-width: 0; }
.editor__prop-linha select,
.editor__prop-linha input[type="time"] {
    flex: 1; min-width: 0;
    padding: var(--pd-space-2);
    font-size: var(--pd-fs-sm);
}
.editor__prop-agenda {
    min-width: 0; display: grid; gap: var(--pd-space-2); }
.editor__prop-secao--perigo {
    border-top: 1px solid var(--pd-border);
    padding-top: var(--pd-space-3);
}

/* Links de ação discretos — hierarquia visual clara */
.editor__link {
    background: none;
    border: none;
    padding: 0;
    color: var(--pd-text-dim);
    font-size: var(--pd-fs-sm);
    text-decoration: underline;
    text-align: left;
    transition: color var(--pd-ease);
}
.editor__link:hover { color: var(--pd-text); }
.editor__link--perigo         { color: var(--pd-err); }
.editor__link--perigo:hover   { color: #ff8080; }

/* Chips de dias da semana da agenda */
.quadro__dias { display: flex; gap: var(--pd-space-1); flex-wrap: wrap; }
.quadro__dia  { position: relative; cursor: pointer; }
.quadro__dia input { position: absolute; opacity: 0; pointer-events: none; }
.quadro__dia span {
    display: grid; place-items: center;
    width: 34px; height: 28px;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    font-size: var(--pd-fs-xs);
    color: var(--pd-text-dim);
    transition: color var(--pd-ease), border-color var(--pd-ease), background var(--pd-ease);
}
.quadro__dia input:checked + span {
    background: rgba(255, 51, 119, 0.15);
    border-color: var(--pd-primary);
    color: var(--pd-primary);
    font-weight: var(--pd-fw-semibold);
}
.quadro__dia:has(input:focus-visible) span {
    box-shadow: var(--pd-shadow-focus);
}


/* ═══ EDITOR — estados do fluxo do cliente ═══
   O cliente escolhe conteúdos e horários de vários slots e envia tudo
   num clique. Estes estados dão o retorno visual do que está
   selecionado mas ainda não foi enviado. */

/* Slot com conteúdo escolhido, aguardando envio */
.editor__pagina--alterada {
    border-color: var(--pd-warn);
    background: rgba(255, 200, 60, 0.06);
}

/* Miniatura exibindo pré-visualização local (URL.createObjectURL) */
.editor__pagina-thumb--previa {
    outline: 2px dashed var(--pd-warn);
    outline-offset: 2px;
    border-radius: var(--pd-radius-sm);
}

/* Contador de pendências ao lado do botão de envio.
   Reaproveita .editor__pendente do admin — mesma semântica: "há algo
   não publicado/não enviado". */
.editor__publicar .editor__pendente { color: var(--pd-warn); }

/* Dia fora da janela contratada: visível (o cliente entende o limite
   do contrato) porém inoperante. A trava real é no servidor —
   interface desabilitada nunca é segurança. */
.quadro__dia--travado { cursor: not-allowed; opacity: 0.35; }
.quadro__dia--travado span { border-style: dashed; }

/* Chips de dia somente leitura (quando o cliente não pode editar) */
.cliente-dia {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 28px;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    font-size: var(--pd-fs-xs);
    color: var(--pd-text-faint);
}
.cliente-dia--on {
    background: rgba(255, 51, 119, 0.15);
    border-color: var(--pd-primary);
    color: var(--pd-primary);
    font-weight: var(--pd-fw-semibold);
}

/* Input de arquivo dentro da coluna de propriedades.
   É o elemento mais perigoso do layout: o navegador dimensiona pelo
   NOME do arquivo escolhido, e um nome longo empurra a coluna inteira,
   criando rolagem horizontal no editor. */
.editor__props input[type="file"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: var(--pd-fs-xs);
    color: var(--pd-text-dim);
}

/* Textos longos quebram em vez de esticar a coluna */
.editor__prop :is(.status-pub, .vazio__detalhe, .campo__dica) {
    overflow-wrap: anywhere;
}

} /* ── fim de @layer components ── */


/* ══════════════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════════════ */
@layer utilities {
    /* Visível para leitores de tela, invisível na tela — mantém o
       elemento focável (ao contrário de display:none). */
    .u-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .u-mono { font-family: var(--pd-font-mono); }

    /* Só funciona com min-width:0 em algum ancestral flex/grid */
    .u-truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVO — 4 breakpoints, agrupados
   ══════════════════════════════════════════════════════════════════
     1200px → editor aperta as colunas laterais
     1024px → propriedades descem para baixo do palco
      900px → sidebar colapsa em ícones; tabelas rolam
      760px → editor empilha em coluna única
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .editor__corpo { grid-template-columns: 290px 1fr 280px; }
}

@media (max-width: 1024px) {
    .editor__corpo { grid-template-columns: 270px 1fr; }

    .editor__props {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--pd-border);
        max-height: none;
    }
}

@media (max-width: 900px) {
    /* Sidebar vira faixa de ícones */
    .shell { grid-template-columns: var(--pd-sidebar-collapsed) 1fr; }

    .sidebar { padding: var(--pd-space-4) var(--pd-space-2); }
    .sidebar__logo { justify-content: center; padding: 2px 0 var(--pd-space-5); }
    .sidebar__logo img { height: 20px; }
    .sidebar__link { justify-content: center; padding: var(--pd-space-3); }
    .sidebar__link span,
    .sidebar__badge,
    .sidebar__usuario { display: none; }
    .sidebar__separador { margin: var(--pd-space-2) var(--pd-space-1); }
    .sidebar__rodape { justify-content: center; }

    .shell__conteudo { padding: var(--pd-space-5) var(--pd-space-4) var(--pd-space-10); }
    .flash--shell { margin: var(--pd-space-3) var(--pd-space-4) 0; }

    /* Tabela operacional rola no eixo X em vez de espremer colunas */
    .vnx-tabela { min-width: 780px; }

    /* Topo do editor quebra em duas linhas quando não couber */
    .editor__topo { flex-wrap: wrap; }
    .editor__publicar { margin-left: auto; }
}

@media (max-width: 760px) {
    .editor__corpo { grid-template-columns: 1fr; }

    .editor__paginas {
        border-right: none;
        border-bottom: 1px solid var(--pd-border);
        max-height: 320px;
    }

    .editor__palco { padding: var(--pd-space-4); }
    .editor__preview img,
    .editor__preview video { max-height: 40vh; }

    /* Identidade do painel ganha a linha inteira; ação vai abaixo */
    .editor__identidade { flex-basis: 100%; }
    .editor__publicar { width: 100%; justify-content: flex-end; }
}

.editor__arrastar {
    cursor: grab;
    color: var(--pd-text-faint);
    font-size: var(--pd-fs-sm);
    line-height: 1;
    letter-spacing: -2px;
    user-select: none;
    padding: 0 2px;
}
.editor__arrastar:active { cursor: grabbing; }

/* A coluna extra do punho de arrastar (⋮⋮) só existe no editor do
   ADMIN. No editor do cliente não há punho, então a regra base de 4
   colunas vale. Sem isto, o cliente herdava 5 colunas e o texto caía
   sobre a miniatura. */
.editor__pagina:has(.editor__arrastar) {
    grid-template-columns: 14px 24px 96px 1fr auto;
}
.editor__pagina--arrastando { opacity: 0.4; }

/* Aviso "salvo" no topo */
.editor__salvo {
    color: var(--pd-ok);
    font-size: var(--pd-fs-xs);
    white-space: nowrap;
}

/* Cabeçalho das propriedades com a lixeira à direita */
.editor__prop-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pd-space-2);
    padding-bottom: var(--pd-space-3);
    border-bottom: 1px solid var(--pd-border);
}
.editor__prop-cabeca h3 { border: none; padding: 0; }

/* Excluir com confirmação inline: o aviso só aparece quando armado */
.editor__excluir { display: flex; align-items: center; gap: var(--pd-space-2); }
.editor__excluir .icon-btn svg { width: 15px; height: 15px; }
.editor__excluir-aviso {
    display: none;
    font-size: var(--pd-fs-xs);
    color: var(--pd-err);
    white-space: nowrap;
}
.editor__excluir--armado .editor__excluir-aviso { display: inline; }
.editor__excluir--armado .icon-btn {
    color: var(--pd-err);
    border-color: var(--pd-err);
    background: rgba(255, 93, 93, 0.1);
}
/* ─── Tela "slots não mapeados" (cliente vinculado, quadro não montado) ─── */
.aviso-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--pd-space-4);
    max-width: 460px;
    margin: 0 auto;
    padding: var(--pd-space-10) var(--pd-space-6);
}
.aviso-vazio__icone {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: var(--pd-radius);
    background: var(--pd-surface-2, rgba(255,255,255,0.04));
    color: var(--pd-text-dim);
}
.aviso-vazio__icone svg { width: 32px; height: 32px; }
.aviso-vazio h2 { font-size: var(--pd-fs-xl, 1.25rem); color: var(--pd-text); }
.aviso-vazio p { color: var(--pd-text-dim); line-height: 1.6; }
.aviso-vazio .btn { margin-top: var(--pd-space-2); }

/* Cliente sem slots mapeados ainda, no card do dashboard */
.painel-card__aguardando {
    color: var(--pd-text-faint, #7a8194);
    font-size: var(--pd-fs-sm);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   Páginas de conteúdo: Boas práticas, FAQ, Solicitar slots
   ═══════════════════════════════════════════════════════════════ */

.conteudo-doc {
    max-width: 780px;
    margin: 0 auto;
    padding: var(--pd-space-6) var(--pd-space-5) var(--pd-space-8);
}

.doc__cabecalho { margin-bottom: var(--pd-space-6); }
.doc__cabecalho h1 { font-size: var(--pd-fs-2xl, 1.75rem); color: var(--pd-text); }
.doc__subtitulo {
    color: var(--pd-text-dim);
    line-height: 1.6;
    margin-top: var(--pd-space-2);
}

.doc__secao { margin-bottom: var(--pd-space-7); }
.doc__secao h2 {
    display: flex;
    align-items: center;
    gap: var(--pd-space-3);
    font-size: var(--pd-fs-xl, 1.25rem);
    color: var(--pd-text);
    margin-bottom: var(--pd-space-3);
}
.doc__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pd-primary);
    color: #fff;
    font-size: var(--pd-fs-sm);
    font-weight: 700;
}
.doc__secao p { color: var(--pd-text-dim); line-height: 1.7; margin-bottom: var(--pd-space-3); }
.doc__secao--destaque {
    background: var(--pd-surface-2);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    padding: var(--pd-space-5);
}

.doc__cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--pd-space-3);
    margin: var(--pd-space-4) 0;
}
.doc__cartao {
    background: var(--pd-surface-2);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    padding: var(--pd-space-4);
}
.doc__cartao h3 { font-size: var(--pd-fs-sm); color: var(--pd-text); margin-bottom: var(--pd-space-1); }
.doc__cartao p { color: var(--pd-text-dim); font-size: var(--pd-fs-sm); margin: 0; }

.doc__lista { list-style: none; display: grid; gap: var(--pd-space-3); margin: var(--pd-space-3) 0; }
.doc__lista li {
    color: var(--pd-text-dim);
    line-height: 1.6;
    padding-left: var(--pd-space-4);
    position: relative;
}
.doc__lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pd-primary);
}
.doc__lista strong { color: var(--pd-text); }

.doc__exemplo {
    background: var(--pd-surface-1, rgba(0,0,0,0.2));
    border-left: 3px solid var(--pd-primary);
    border-radius: var(--pd-radius-sm);
    padding: var(--pd-space-4);
    margin: var(--pd-space-4) 0;
}
.doc__exemplo h3 { color: var(--pd-text); margin-bottom: var(--pd-space-2); }
.doc__nota {
    color: var(--pd-text) !important;
    background: rgba(255, 51, 119, 0.08);
    border-radius: var(--pd-radius-sm);
    padding: var(--pd-space-3);
}
.doc__rodape {
    margin-top: var(--pd-space-6);
    padding-top: var(--pd-space-4);
    border-top: 1px solid var(--pd-border);
    color: var(--pd-text-dim);
}
.doc__rodape a, .doc__exemplo a, .faq__resposta a { color: var(--pd-primary); }

/* FAQ */
.faq { display: grid; gap: var(--pd-space-2); }
.faq__item {
    background: var(--pd-surface-2);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    overflow: hidden;
}
.faq__item summary {
    padding: var(--pd-space-4);
    cursor: pointer;
    color: var(--pd-text);
    font-weight: 500;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--pd-space-3);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: '+';
    color: var(--pd-primary);
    font-size: 1.4em;
    line-height: 1;
    flex-shrink: 0;
}
.faq__item[open] summary::after { content: '\2212'; }
.faq__resposta { padding: 0 var(--pd-space-4) var(--pd-space-4); }
.faq__resposta p { color: var(--pd-text-dim); line-height: 1.7; margin: 0; }

/* Solicitações — lado do cliente */
.solicitacoes { list-style: none; display: grid; gap: var(--pd-space-3); margin-top: var(--pd-space-3); }
.solicitacao {
    background: var(--pd-surface-2);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-sm);
    padding: var(--pd-space-4);
}
.solicitacao__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--pd-space-2); }
.solicitacao__meta { color: var(--pd-text-dim); font-size: var(--pd-fs-sm); margin: var(--pd-space-1) 0; }
.solicitacao__msg { color: var(--pd-text-dim); font-style: italic; }
.solicitacao__resposta { color: var(--pd-text); margin-top: var(--pd-space-2); }
.solicitacao__badge {
    font-size: var(--pd-fs-xs);
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.solicitacao__badge--pendente { background: rgba(255, 200, 0, 0.15); color: #f0c000; }
.solicitacao__badge--atendida { background: rgba(0, 200, 120, 0.15); color: #00c878; }
.solicitacao__badge--recusada { background: rgba(255, 143, 179, 0.12); color: var(--pd-danger); }

/* Solicitações — lado do admin */
.solicitacao-admin { padding: var(--pd-space-4); }
.solicitacao-admin__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pd-space-2); }
.solicitacao-admin__painel { display: block; color: var(--pd-text-dim); font-size: var(--pd-fs-sm); }
.solicitacao-admin__qtd { color: var(--pd-text-dim); font-size: var(--pd-fs-sm); margin: var(--pd-space-2) 0; }
.solicitacao-admin__msg { color: var(--pd-text); font-style: italic; margin-bottom: var(--pd-space-3); }
.solicitacao-admin__acoes { display: grid; gap: var(--pd-space-2); margin-top: var(--pd-space-3); }
.solicitacao-admin__acoes form { display: flex; gap: var(--pd-space-2); flex-wrap: wrap; }
.solicitacao-admin__acoes input[type="text"] {
    flex: 1;
    min-width: 200px;
    background: var(--pd-surface-input);
    color: var(--pd-text);
    border: 1px solid var(--pd-surface-input-border);
    border-radius: var(--pd-radius-sm);
    padding: var(--pd-space-2) var(--pd-space-3);
}
.solicitacao-admin__dica { color: var(--pd-text-faint); font-size: var(--pd-fs-sm); margin-top: var(--pd-space-2); }
.solicitacao-admin__dica a, .solicitacao-admin__resposta { color: var(--pd-primary); }
.lista-cards { display: grid; gap: var(--pd-space-3); }