/* ==========================================================================
   IO Planejamento com IA — Design System
   Quiet, rounded, precise and warm.

   1.  Tokens
   2.  Reset e base
   3.  Tipografia
   4.  Layout e navegacao
   5.  Primitivos (botao, campo, badge, superficie, tabela, feedback)
   6.  Fluxo editorial (trilha, proxima acao, entrega)
   7.  Componentes de tela
   8.  Onboarding e guia
   9.  Responsivo
   10. Preferencias de movimento
   11. Tarefas em segundo plano
   12. Apresentacao online
   13. Calendario editorial multicanal
   14. Portal do cliente
   15. Encaixes de agenda
   16. Auditoria interna do portal
   17. Identidade dos canais
   18. Achados do QA editorial
   19. Usuarios e permissoes
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    /* Controles nativos (scrollbar, select, date picker) seguem o tema claro. */
    color-scheme: light;

    /* Escala da marca IO — ancorada no roxo oficial da apresentacao (#6c00e3). */
    --purple-50: #f8f4ff;
    --purple-100: #f0e7ff;
    --purple-200: #e1ceff;
    --purple-300: #c8a4ff;
    --purple-400: #a86bff;
    --purple-500: #6c00e3;
    --purple-600: #5f00c8;
    --purple-700: #5000a7;
    --purple-800: #400484;
    --purple-900: #2c0759;

    /* Neutros quentes */
    --canvas: #f7f7f5;
    --surface: #ffffff;
    --surface-soft: #f1f1ef;
    --surface-raised: #fbfbfa;
    --ink: #191918;
    --ink-soft: #454542;
    --muted: #6f6f6b;
    --muted-light: #a0a09b;
    --line: #e6e6e2;
    --line-strong: #d8d8d3;
    --on-brand: #ffffff;

    /* Marca — fonte unica de verdade para os componentes */
    --color-brand: var(--purple-500);
    --color-brand-hover: var(--purple-600);
    --color-brand-active: var(--purple-700);
    --color-brand-subtle: var(--purple-50);
    --color-brand-muted: var(--purple-100);
    --color-brand-border: var(--purple-200);
    --color-brand-text: var(--purple-700);
    --color-brand-ring: rgba(108, 0, 227, .16);
    --color-brand-contrast: var(--on-brand);
    --surface-tint: var(--color-brand-subtle);

    /* Semanticas — mantem significado proprio, nunca sao substituidas pelo roxo */
    --ok: #247556;
    --ok-soft: #e8f4ed;
    --ok-border: #cbe4d7;
    --warn: #8a5a10;
    --warn-soft: #fbf2de;
    --warn-border: #ecdcae;
    --danger: #b0443c;
    --danger-soft: #fbefed;
    --danger-border: #eecfcb;
    --info: #3f6699;
    --info-soft: #edf2f8;
    --info-border: #d3e0ee;

    /* Espacamento — multiplos de 4 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Raios */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 999px;
    --radius: var(--radius-lg);

    /* Sombras — quase imperceptiveis */
    --shadow-xs: 0 1px 2px rgba(25, 25, 24, .04);
    --shadow-sm: 0 6px 20px rgba(25, 25, 24, .05);
    --shadow-md: 0 18px 48px rgba(25, 25, 24, .09);

    /* Tipografia */
    --font-sans: "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
    --text-display: 32px;
    --text-h1: 24px;
    --text-h2: 20px;
    --text-h3: 17px;
    --text-body: 15px;
    --text-small: 13px;
    --text-caption: 12px;

    /* Movimento */
    --ease: cubic-bezier(.2, .8, .2, 1);
    --dur-fast: 150ms;
    --dur: 190ms;
    --dur-slow: 220ms;
    --transition-fast: var(--dur-fast) var(--ease);
    --transition: var(--dur) var(--ease);

    /* Camadas */
    --z-base: 1;
    --z-sticky: 30;
    --z-nav: 40;
    --z-overlay: 60;
    --z-modal: 70;

    /* Funil: rampa da propria escala da marca, do topo (descoberta) ao fundo (decisao). */
    --funnel-topo: var(--purple-300);
    --funnel-meio: var(--purple-400);
    --funnel-fundo: var(--purple-600);

    --content: 1240px;
    --sidebar: 252px;
}

/* Tema escuro — opt-in explicito com <html data-theme="dark">.
   O sistema e claro por padrao, independente da preferencia do sistema operacional. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --canvas: #131312;
    --surface: #1a1a19;
    --surface-soft: #212120;
    --surface-raised: #232322;
    --ink: #f3f3f0;
    --ink-soft: #dcdcd7;
    --muted: #a3a39d;
    --muted-light: #7b7b76;
    --line: #2e2e2c;
    --line-strong: #3d3d3a;

    --color-brand: #8a2bff;
    --color-brand-hover: #9a4dff;
    --color-brand-active: #7a17e6;
    --color-brand-subtle: #23153a;
    --color-brand-muted: #2c1a48;
    --color-brand-border: #3d2160;
    --color-brand-text: var(--purple-300);
    --color-brand-ring: rgba(168, 107, 255, .24);

    --ok: #6cc39a;
    --ok-soft: #16281f;
    --ok-border: #234434;
    --warn: #dcae62;
    --warn-soft: #2a2113;
    --warn-border: #453722;
    --danger: #e08a80;
    --danger-soft: #2b1917;
    --danger-border: #4a2b27;
    --info: #86aada;
    --info-soft: #16202b;
    --info-border: #26364a;

    --funnel-topo: #d9bcff;
    --funnel-meio: #a86bff;
    --funnel-fundo: #7a34e8;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 6px 20px rgba(0, 0, 0, .32);
    --shadow-md: 0 18px 48px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   2. Reset e base
   ========================================================================== */

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--space-6);
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
svg { display: block; }

::selection { background: var(--color-brand-muted); color: var(--color-brand-text); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ==========================================================================
   3. Tipografia
   ========================================================================== */

h1, h2, h3, p { overflow-wrap: anywhere; }

h1 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-h1);
    line-height: 30px;
    letter-spacing: -.022em;
    font-weight: 600;
}

h2 {
    margin: 0 0 var(--space-3);
    color: var(--ink);
    font-size: var(--text-h2);
    line-height: 26px;
    letter-spacing: -.015em;
    font-weight: 600;
}

h3 {
    margin: 0 0 var(--space-2);
    color: var(--ink);
    font-size: var(--text-h3);
    line-height: 23px;
    letter-spacing: -.01em;
    font-weight: 600;
}

p { margin: var(--space-2) 0; color: var(--muted); line-height: 1.6; }
small { color: var(--muted); font-size: var(--text-caption); }
strong { font-weight: 600; }

pre {
    margin: 0;
    white-space: pre-wrap;
    color: var(--muted);
    font: var(--text-caption)/1.65 var(--font-mono);
}

.eyebrow {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.hint {
    color: var(--muted);
    font-size: var(--text-small);
    line-height: 1.55;
}

.hint.danger { color: var(--danger); background: none; border: 0; }

.lead {
    color: var(--muted);
    font-size: var(--text-body);
    line-height: 1.6;
}

/* ==========================================================================
   4. Layout e navegacao
   ========================================================================== */

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--canvas);
}

.sidebar {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100vh;
    padding: var(--space-6) var(--space-4);
    border-right: 1px solid var(--line);
    background: var(--surface);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: -.01em;
}

.sidebar .brand {
    padding: var(--space-1) var(--space-2) var(--space-5);
    border-bottom: 1px solid var(--line);
}

.brand-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: var(--color-brand);
    color: var(--color-brand-contrast);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.03em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.brand-name { font-size: var(--text-small); }

.main-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    padding-top: var(--space-4);
}

.main-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: var(--text-small);
    font-weight: 500;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .85;
}

.main-nav a:hover { background: var(--surface-soft); color: var(--ink); }

.main-nav a.active {
    background: var(--surface-soft);
    color: var(--ink);
    font-weight: 600;
}

.main-nav a.active .nav-icon { color: var(--color-brand); opacity: 1; }

.main-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 18px;
    border-radius: var(--radius-pill);
    background: var(--color-brand);
    transform: translateY(-50%);
}

.user-menu {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.user-avatar {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-brand-border);
    border-radius: 50%;
    background: var(--color-brand-subtle);
    color: var(--color-brand-text);
    font-size: var(--text-caption);
    font-weight: 600;
}

.user-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.user-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-caption); }
.user-copy small { font-size: 11px; text-transform: capitalize; }

.logout-link {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.logout-link:hover { color: var(--danger); }

.mobile-topbar, .topbar { display: none; }
.nav-toggle { display: none; }

.container {
    width: min(var(--content), calc(100% - var(--space-12)));
    margin: var(--space-10) auto var(--space-16);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 500;
}

.breadcrumb a { transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--color-brand-text); }
.breadcrumb span[aria-hidden] { color: var(--muted-light); }
.breadcrumb strong { color: var(--ink-soft); font-weight: 500; }

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
    margin: 0 0 var(--space-8);
}

.page-head > div:first-child { max-width: 760px; }
.page-head p { max-width: 700px; margin-top: var(--space-2); font-size: var(--text-body); }
.page-head .eyebrow { margin-bottom: var(--space-2); }

.client-title { display: flex; align-items: center; gap: var(--space-4); }

.client-title img, .client-cell img {
    width: 46px;
    height: 46px;
    padding: 5px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

/* Sempre num filho do <td>, nunca no proprio: um table-cell virado flex perde
   o vertical-align da linha e desalinha o nome do resto das colunas. */
.client-cell { display: flex; align-items: center; gap: var(--space-3); }
.client-cell img { width: 36px; height: 36px; border-radius: var(--radius-xs); }
.client-copy { display: grid; gap: 1px; min-width: 0; }
.client-copy strong { color: var(--ink); font-size: var(--text-small); line-height: 1.35; }
.client-copy small { color: var(--muted); font-size: 11px; line-height: 1.4; }

/* As colunas de selo encolhem ao conteudo (width:1% + nowrap) e devolvem a
   largura para nome, nicho e contrato, que sao os campos que precisam dela. */
.client-table .col-client { width: 22%; min-width: 170px; }
.client-table .col-niche { width: 30%; }
.client-table .col-deal { width: 16%; min-width: 150px; }
.client-table .col-dna,
.client-table .col-cycle,
.client-table .col-action { width: 1%; white-space: nowrap; }
.client-table .col-action { text-align: right; }
.client-table .col-action .actions { flex-wrap: nowrap; justify-content: flex-end; }
.client-table .col-action .btn { white-space: nowrap; }

/* Nicho e contrato sao texto livre e variam muito ("Alternado semanalmente"
   contra "4 artes"): cortados em duas linhas, a altura para de oscilar de
   cliente para cliente. O texto inteiro fica no title. */
.client-table .col-niche span,
.client-table .col-deal span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.section {
    margin: var(--space-10) 0;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
}

.section-head h2 { margin-bottom: var(--space-1); }
.section-head p { margin: 0; font-size: var(--text-small); }

.grid { display: grid; gap: var(--space-5); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-stack { display: flex; flex-direction: column; gap: var(--space-5); }

/* ==========================================================================
   5. Primitivos
   ========================================================================== */

/* --- Superficies --- */

.panel {
    margin-bottom: var(--space-5);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.panel-flush { padding: 0; overflow: hidden; }

/* --- Botoes --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-5);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--dur-fast) var(--ease);
}

.btn:hover { border-color: var(--muted-light); background: var(--surface-raised); }
.btn:active { transform: scale(.98); }

.btn.primary {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: var(--color-brand-contrast);
    font-weight: 600;
}

.btn.primary:hover { border-color: var(--color-brand-hover); background: var(--color-brand-hover); }
.btn.primary:active { border-color: var(--color-brand-active); background: var(--color-brand-active); }

.btn.ghost {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
}

.btn.ghost:hover { border-color: transparent; background: var(--surface-soft); color: var(--ink); }

.btn.danger {
    border-color: var(--danger-border);
    background: var(--danger-soft);
    color: var(--danger);
}

.btn.danger:hover { border-color: var(--danger); background: var(--danger-soft); }

.btn.small {
    min-height: 34px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-xs);
    font-size: var(--text-caption);
}

.btn svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.btn.is-loading { position: relative; padding-left: var(--space-10); }

.btn.is-loading::before {
    content: "";
    position: absolute;
    left: var(--space-5);
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .6;
    animation: spin 640ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .55;
    animation: spin 640ms linear infinite;
}

.actions, .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.toolbar { margin-bottom: var(--space-5); }

/* --- Campos --- */

label {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--ink-soft);
    font-size: var(--text-small);
    font-weight: 500;
}

input, textarea, select {
    width: 100%;
    min-height: 44px;
    padding: 11px var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-body);
    font-weight: 400;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

input::placeholder, textarea::placeholder { color: var(--muted-light); }

input:hover, textarea:hover, select:hover { border-color: var(--muted-light); }

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-ring);
}

input:disabled, textarea:disabled, select:disabled {
    background: var(--surface-soft);
    color: var(--muted);
    cursor: not-allowed;
}

input[aria-invalid="true"], .field-error input, .field-error textarea {
    border-color: var(--danger);
}

textarea { min-height: 104px; resize: vertical; line-height: 1.6; }
select { cursor: pointer; }

.inline-check {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-small);
    font-weight: 400;
}

.inline-check input,
.date-item input {
    width: 17px;
    min-height: 17px;
    margin: 3px 0 0;
    padding: 0;
    accent-color: var(--color-brand);
}

.filters { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.filters input { max-width: 420px; }

.optional-label {
    display: inline;
    margin-left: var(--space-1);
    color: var(--muted-light);
    font-size: 11px;
    font-weight: 500;
}

/* --- Badges --- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    opacity: .8;
}

.badge.ok,
.badge.aprovada,
.badge.aprovado_social,
.badge.aprovado_qualidade,
.badge.aprovado_interno,
.badge.pdf_gerado,
.badge.temas_aprovados { background: var(--ok-soft); color: var(--ok); }

.badge.warn,
.badge.sugerida,
.badge.ajuste_qualidade,
.badge.ajustes_qualidade { background: var(--warn-soft); color: var(--warn); }

.badge.danger,
.badge.rejeitada { background: var(--danger-soft); color: var(--danger); }

.badge.arquivada { background: var(--surface-soft); color: var(--muted); }

.badge.gerado,
.badge.revisao_social,
.badge.revisao_qualidade,
.badge.temas_gerados,
.badge.conteudos_gerando,
.badge.temas_gerando { background: var(--color-brand-subtle); color: var(--color-brand-text); }

/* --- Feedback --- */

.flash {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--ok-border);
    border-radius: var(--radius-md);
    background: var(--ok-soft);
    color: var(--ok);
    font-size: var(--text-small);
    font-weight: 500;
}

.flash-icon { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.flash.error { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.flash.warn { border-color: var(--warn-border); background: var(--warn-soft); color: var(--warn); }

.callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.callout strong { display: block; color: var(--ink); font-size: var(--text-small); }
.callout p { margin: 3px 0 0; font-size: var(--text-caption); }
.callout .btn { flex: 0 0 auto; }
.callout.tone-warn { border-color: var(--warn-border); background: var(--warn-soft); }
.callout.tone-warn strong { color: var(--warn); }
.callout.tone-danger { border-color: var(--danger-border); background: var(--danger-soft); }
.callout.tone-danger strong { color: var(--danger); }
.callout.tone-info { border-color: var(--info-border); background: var(--info-soft); }
.callout.tone-brand { border-color: var(--color-brand-border); background: var(--color-brand-subtle); }
.callout.tone-brand strong { color: var(--color-brand-text); }

.progress {
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
}

.progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-brand);
    transition: width var(--dur-slow) var(--ease);
}

.skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--surface-soft), var(--surface-raised), var(--surface-soft));
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

[aria-busy="true"] { cursor: progress; }

.empty-state-inline {
    padding: var(--space-8) var(--space-5);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--muted);
    font-size: var(--text-small);
    text-align: center;
}

.empty-state-inline strong { display: block; margin-bottom: var(--space-1); color: var(--ink); }
.empty-state-inline p { max-width: 58ch; margin: 0 auto; }
.empty-state-inline .actions { justify-content: center; margin-top: var(--space-4); }

/* --- Tabelas --- */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

table { width: 100%; min-width: 860px; border-collapse: collapse; }

th, td {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    vertical-align: middle;
}

thead th { border-bottom: 1px solid var(--line); }

tbody td { border-top: 1px solid var(--line); }
tbody tr:first-child td { border-top: 0; }

th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

td { color: var(--ink-soft); font-size: var(--text-small); }
td strong { color: var(--ink); }
td strong + small { display: block; margin-top: 2px; }
td.numeric, th.numeric { text-align: right; font-variant-numeric: tabular-nums; }

tbody tr { transition: background-color var(--transition-fast); }
tbody tr:hover { background: var(--surface-raised); }

tbody tr .row-actions { opacity: .55; transition: opacity var(--transition-fast); }
tbody tr:hover .row-actions,
tbody tr:focus-within .row-actions { opacity: 1; }

.empty-cell { height: 148px; color: var(--muted); text-align: center; }
.empty-cell strong { display: block; margin-bottom: var(--space-1); color: var(--ink); }

/* --- Disclosure --- */

.disclosure {
    margin-bottom: var(--space-5);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.disclosure > summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--transition-fast);
}

.disclosure > summary:hover { background: var(--surface-raised); }
.disclosure > summary::-webkit-details-marker { display: none; }

.disclosure > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    margin-left: auto;
    border-right: 1.6px solid var(--muted);
    border-bottom: 1.6px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--transition-fast);
}

.disclosure[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.disclosure-title { flex: 1; display: grid; gap: 3px; }
.disclosure-title strong { color: var(--ink); font-size: var(--text-h3); letter-spacing: -.01em; }
.disclosure-title small { font-size: var(--text-caption); }
.disclosure-body { padding: var(--space-5) var(--space-6) var(--space-6); border-top: 1px solid var(--line); }
.disclosure-body > :first-child { margin-top: 0; }
/* Secao recolhida dentro de uma gaveta nao repete o respiro de secao solta. */
.disclosure-body > .section { margin: 0; }

/* Numa pilha de formulario o espacamento ja vem do container. */
.form-stack > .disclosure { margin-bottom: 0; }

/* --- Listas de definicao --- */

dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3) var(--space-4); margin: 0; }
dt { color: var(--muted); font-size: var(--text-caption); font-weight: 600; }
dd { margin: 0; color: var(--ink-soft); font-size: var(--text-small); }

/* ==========================================================================
   6. Fluxo editorial — do briefing ao PPTX
   ========================================================================== */

/* --- Trilha de etapas --- */

.journey {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

/* Marca em cima, rotulo embaixo: a linha conectora liga uma marca a outra
   sem nunca cruzar o texto. */
.journey-step {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: 0 var(--space-3) 0 0;
}

.journey-step::before {
    content: "";
    position: absolute;
    left: 34px;
    right: calc(var(--space-2) * -1);
    top: 13px;
    height: 1.5px;
    border-radius: var(--radius-pill);
    background: var(--line);
}

.journey-step:last-child::before { display: none; }
.journey-step.is-done::before { background: var(--color-brand-border); }

.journey-mark {
    position: relative;
    z-index: var(--z-base);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    justify-self: start;
    flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.journey-mark svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.journey-copy { display: grid; gap: 2px; min-width: 0; }
.journey-copy strong { color: var(--muted); font-size: var(--text-small); font-weight: 500; }
.journey-copy small { color: var(--muted-light); font-size: 11px; line-height: 1.4; }

.journey-step.is-done .journey-mark {
    border-color: var(--color-brand-border);
    background: var(--color-brand-subtle);
    color: var(--color-brand-text);
}

.journey-step.is-done .journey-copy strong { color: var(--ink-soft); }

.journey-step.is-current .journey-mark {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: var(--color-brand-contrast);
}

.journey-step.is-current .journey-copy strong { color: var(--ink); font-weight: 600; }
.journey-step.is-current .journey-copy small { color: var(--muted); }

/* Compacto: so as marcas, como um indicador silencioso de progresso.
   O rotulo continua acessivel a leitores de tela. */
.journey-compact { display: flex; align-items: center; gap: 0; margin: 0; }
.journey-compact .journey-step { flex: 1; padding: 0; }
.journey-compact .journey-step:last-child { flex: 0 0 auto; }
.journey-compact .journey-step::before { top: 10px; left: 26px; right: 0; }
.journey-compact .journey-mark { width: 22px; height: 22px; font-size: 10px; }

.journey-compact .journey-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

/* --- Sub-etapas --- */

/* A trilha de cima continua com as 5 etapas do ciclo. Esta e a divisao interna
   de uma delas, para a tela pedir uma decisao por vez. O mesmo componente serve
   para as sub-etapas navegadas por link (servidor) e por botao (wizard no JS). */

.substep-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.substep {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
}

.substep:hover { background: var(--surface-raised); }

.substep-mark {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.substep-copy { display: grid; gap: 1px; min-width: 0; }
.substep-copy strong { color: var(--ink-soft); font-size: var(--text-small); font-weight: 500; }
.substep-copy small { color: var(--muted-light); font-size: 11px; line-height: 1.35; }

.substep.is-done { border-color: var(--ok-border); }
.substep.is-done .substep-mark { border-color: var(--ok-border); background: var(--ok-soft); color: var(--ok); }

.substep.is-active { border-color: var(--color-brand-border); background: var(--color-brand-subtle); }
.substep.is-active .substep-mark { border-color: var(--color-brand); background: var(--color-brand); color: var(--color-brand-contrast); }
.substep.is-active .substep-copy strong { color: var(--ink); font-weight: 600; }
.substep.is-active .substep-copy small { color: var(--muted); }

/* Cabecalho do painel da sub-etapa: qual passo e, o que decidir aqui. */
.substep-head { display: grid; gap: var(--space-1); margin-bottom: var(--space-5); }
.substep-head span { color: var(--color-brand-text); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.substep-head h2 { margin: 0; font-size: var(--text-h3); }
.substep-head p { margin: 0; color: var(--muted); font-size: var(--text-caption); }

/* --- Proxima acao --- */

.next-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-5);
    padding: var(--space-8);
    border: 1px solid var(--color-brand-border);
    border-radius: var(--radius-2xl);
    background: var(--color-brand-subtle);
}

.next-action.tone-ok { border-color: var(--ok-border); background: var(--ok-soft); }
.next-action.tone-warn { border-color: var(--warn-border); background: var(--warn-soft); }
.next-action-body { min-width: 0; }

.next-action-eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--color-brand-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.next-action.tone-ok .next-action-eyebrow { color: var(--ok); }
.next-action.tone-warn .next-action-eyebrow { color: var(--warn); }
.next-action h2 { margin: 0 0 var(--space-2); font-size: var(--text-h2); letter-spacing: -.018em; }
.next-action-text { max-width: 62ch; margin: 0; color: var(--ink-soft); font-size: var(--text-small); line-height: 1.6; }

.next-action-waiting {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    color: var(--color-brand-text);
    font-size: var(--text-caption);
    font-weight: 500;
}

.next-action-progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 440px;
    margin-top: var(--space-5);
}

.next-action-progress .progress { flex: 1; }
.next-action .next-action-progress .progress { background: var(--surface); }
.next-action-progress > span { flex: 0 0 auto; color: var(--muted); font-size: var(--text-caption); }
.next-action-progress strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.next-action-meta { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-5); }
.next-action-meta div { display: grid; gap: 2px; }
.next-action-meta dt { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.next-action-meta dd { color: var(--ink); font-size: var(--text-small); font-weight: 600; font-variant-numeric: tabular-nums; }

.next-action-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    min-width: 224px;
}

.next-action-slot { display: grid; gap: var(--space-1); }
.next-action-slot .btn { width: 100%; }
.next-action-slot small { color: var(--muted); font-size: 11px; text-align: center; }
.next-action-slot .btn:not(.primary):not(.ghost) { background: var(--surface); }
.next-action-slot .btn.ghost:hover { background: var(--surface); }

/* --- Entrega final --- */

.delivery { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }

.delivery-file {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color var(--transition-fast);
}

.delivery-file:hover { border-color: var(--color-brand-border); }

.delivery-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background: var(--color-brand-subtle);
    color: var(--color-brand-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

.delivery-icon.muted { background: var(--surface-soft); color: var(--muted); }
.delivery-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.delivery-copy strong { color: var(--ink); font-size: var(--text-small); }
.delivery-copy small { color: var(--muted); font-size: 11px; }
.delivery-file .actions { flex: 0 0 auto; }

/* --- Metricas em linha --- */

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-10);
    margin: 0 0 var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--line);
}

.stat { display: grid; gap: var(--space-1); }
.stat-label { color: var(--muted); font-size: var(--text-caption); font-weight: 500; }

.stat-value {
    color: var(--ink);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.stat-delta { font-size: 11px; font-weight: 500; }
.stat-delta.up { color: var(--ok); }
.stat-delta.down { color: var(--danger); }
.stat-delta.flat { color: var(--muted); }

/* --- Retomada: uma linha por ciclo ---
   Cinco ciclos abertos sao rotina, entao o item precisa caber numa linha: quem,
   onde parou e o que fazer. A trilha larga fica na tela do planejamento. */

.resume-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.resume-item {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.resume-item:hover { border-color: var(--color-brand-border); background: var(--color-brand-subtle); }

.resume-who { display: grid; gap: 1px; min-width: 0; }
.resume-who strong { overflow: hidden; color: var(--ink); font-size: var(--text-small); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.resume-who small { color: var(--muted); font-size: 11px; }

/* Cinco tracinhos no lugar da trilha: mesma informacao, um oitavo da altura. */
.resume-step { display: grid; gap: 5px; justify-items: start; }
.resume-bars { display: flex; gap: 3px; }
.resume-bars i { width: 16px; height: 4px; border-radius: var(--radius-pill); background: var(--line-strong); }
.resume-bars i.is-done { background: var(--color-brand); }
.resume-step small { color: var(--muted); font-size: 10px; font-weight: 500; }

.resume-next {
    min-width: 0;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: var(--text-small);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resume-go { display: flex; color: var(--muted-light); transition: color var(--transition-fast); }
.resume-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.resume-item:hover .resume-go { color: var(--color-brand); }

/* ==========================================================================
   7. Componentes de tela
   ========================================================================== */

/* --- Faixa de acao --- */

.approval-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.approval-bar h2 { margin: var(--space-1) 0; font-size: var(--text-h3); }
.approval-bar p { margin: 0; font-size: var(--text-small); }
.approval-bar .actions { flex: 0 0 auto; justify-content: flex-end; }

/* --- Lista compacta --- */

.compact-list { display: grid; }

.compact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--line);
}

.compact-item:first-child { border-top: 0; }
.compact-item > div { min-width: 0; }
.compact-item strong { display: block; color: var(--ink); font-size: var(--text-small); font-weight: 500; }
.compact-item p { margin: 2px 0 0; font-size: var(--text-caption); }

a.compact-item {
    margin: 0 calc(var(--space-3) * -1);
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

a.compact-item:hover { background: var(--surface-raised); }

/* --- Metricas em card --- */

.queue-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }

.queue-summary > div,
.metric {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.queue-summary span, .metric span { color: var(--muted); font-size: var(--text-caption); font-weight: 500; }

.queue-summary strong, .metric strong {
    color: var(--ink);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.consumption-metrics { margin-bottom: var(--space-5); }

/* --- Memoria --- */

.memory-list, .date-list { display: grid; gap: var(--space-2); }

.memory-card, .date-item, .planning-balance span {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
}

.memory-card { padding: var(--space-4); }
.memory-section-head { margin-bottom: var(--space-4); }
.memory-section-head h2 { margin-bottom: 2px; }
.memory-section-head p { margin: 0; font-size: var(--text-caption); }
.memory-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.memory-state-note {
    display: inline-block;
    margin: var(--space-2) 0 0;
    padding: 5px 10px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    font-weight: 500;
}

.memory-state-note.status-aprovada { background: var(--ok-soft); color: var(--ok); }
.memory-state-note.status-sugerida { background: var(--warn-soft); color: var(--warn); }
.memory-state-note.status-arquivada { background: var(--surface-soft); color: var(--muted); }
.memory-state-note.status-rejeitada { background: var(--danger-soft); color: var(--danger); }

/* --- Datas e selecao --- */

.date-item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-weight: 400;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

/* Linha de data comemorativa: conteudo + escolha de modalidade. */
.date-item[data-date-row] {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
    align-items: center;
    cursor: default;
}

.date-item:hover { border-color: var(--muted-light); background: var(--surface); }
.date-item:has(.date-choice input:checked) { border-color: var(--color-brand-border); background: var(--color-brand-subtle); }
.date-choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: flex-start; gap: var(--space-3); margin: 0; cursor: pointer; }
.date-item > span,
.date-choice > span { display: grid; gap: 3px; min-width: 0; }
.date-item strong { color: var(--ink); font-size: var(--text-small); font-weight: 500; }
.date-item small { color: var(--muted); font-size: 11px; }
.date-item em { color: var(--ink-soft); font-size: var(--text-caption); font-style: normal; line-height: 1.55; }

.planning-balance { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.planning-balance span { padding: 7px var(--space-3); color: var(--muted); font-size: var(--text-caption); font-weight: 500; }
.planning-balance strong { color: var(--color-brand-text); font-variant-numeric: tabular-nums; }

/* --- Feedback e pilares --- */

.feedback { padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.feedback:first-of-type { border-top: 0; }
.feedback strong { color: var(--ink); font-size: var(--text-small); }
.feedback p { margin: var(--space-2) 0 var(--space-1); font-size: var(--text-small); }

.pillar-list { display: grid; gap: var(--space-2); }
.pillar-row { display: grid; grid-template-columns: 1.2fr 120px 2fr auto; align-items: end; gap: var(--space-2); margin-bottom: var(--space-2); }

/* --- Conteudos --- */

.content-card {
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-top: 2px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.content-card.video, .content-card.arte { border-top-color: var(--color-brand); }
.content-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.content-head > strong { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .07em; }

.mini-script-table, .script-table, .art-table { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mini-script-table { margin: var(--space-3) 0; font-size: var(--text-caption); }
.mini-script-row { display: grid; grid-template-columns: 72px 1fr 1fr 1.5fr; border-bottom: 1px solid var(--line); }
.mini-script-row > div { min-width: 0; padding: var(--space-2); border-right: 1px solid var(--line); overflow-wrap: anywhere; }
.mini-script-row > div:last-child { border-right: 0; }
/* A coluna do take precisa caber "Desenvolvimento" inteiro: mais estreita que
   isso, o textarea parte a palavra no meio. */
.script-row { display: grid; grid-template-columns: 152px 1fr 1fr 2.2fr; border-bottom: 1px solid var(--line); }
.art-row { display: grid; grid-template-columns: 160px 1fr; border-bottom: 1px solid var(--line); }
.script-row > div, .art-row > div { padding: var(--space-3); color: var(--ink-soft); font-size: var(--text-small); }
.mini-script-row:last-child, .script-row:last-child, .art-row:last-child { border-bottom: 0; }

.mini-script-row.header, .script-row.header, .art-row.header {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mini-script-row.header > div, .script-row.header > div, .art-row.header > div { color: inherit; font-size: inherit; }

.script-row textarea, .art-row textarea, .art-row > input {
    min-height: 84px;
    padding: 11px var(--space-3);
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
}

.script-row textarea:focus, .art-row textarea:focus, .art-row > input:focus { box-shadow: inset 0 0 0 2px var(--color-brand-ring); }

/* Plano de camera e modo de captacao empilhados na mesma celula do roteiro. */
.script-capture { display: grid; border-left: 1px solid var(--line); }
.script-capture textarea { min-height: 60px; border-left: 0; }
.script-capture select {
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
    font-size: var(--text-caption);
}

/* Linhas opcionais da arte: campo mais baixo, porque H3 e CTA sao textos curtos. */
.art-row.is-short textarea, .art-row.is-short > input { min-height: 56px; }
.art-row > div small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }

/* Carrossel: dois campos empilhados na mesma celula, titulo grande e apoio. */
.carousel-slide-fields { display: grid; border-left: 1px solid var(--line); }
.carousel-slide-fields textarea { border-left: 0; }
.carousel-slide-fields textarea:first-child { min-height: 56px; font-weight: 600; }
.carousel-slide-fields textarea + textarea { min-height: 72px; border-top: 1px solid var(--line); }
.carousel-table .art-row > div:first-child { align-self: start; }
.carousel-edge-table .art-row:nth-child(2) textarea{font-size:1.05rem;font-weight:700}.carousel-edge-table+.hint{margin-bottom:var(--space-5)}

/* Leitura do carrossel na revisao: mesma tabela Estrutura | Conteudo. */
.mini-art-table { overflow: hidden; margin: var(--space-3) 0; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--text-caption); }
.mini-art-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.mini-art-row:last-child { border-bottom: 0; }
.mini-art-row > div { min-width: 0; padding: var(--space-2) var(--space-3); border-right: 1px solid var(--line); overflow-wrap: anywhere; }
.mini-art-row > div:last-child { border-right: 0; }
.mini-art-row > div strong { display: block; color: var(--ink); }
.mini-art-row > div span { display: block; margin-top: 2px; color: var(--ink-soft); }

.mini-art-row.header {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mini-art-row.header > div { color: inherit; font-size: inherit; }

.legend-footer-preview { padding: var(--space-4); border: 1px solid var(--color-brand-border); border-radius: var(--radius-sm); background: var(--color-brand-subtle); }
.legend-footer-preview strong { color: var(--ink); font-size: var(--text-small); }
.legend-footer-preview p { margin: var(--space-2) 0; color: var(--ink-soft); font-size: var(--text-small); }

/* --- Revisao lado a lado --- */

.review-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: var(--space-6); }

.review-list {
    position: sticky;
    top: var(--space-6);
    display: grid;
    gap: 2px;
    max-height: calc(100vh - var(--space-12));
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.review-list a {
    display: grid;
    gap: 2px;
    padding: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.review-list a:hover { background: var(--surface-raised); }
.review-list a.active { border-color: var(--color-brand-border); background: var(--color-brand-subtle); }
.review-list strong { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; }
.review-list a.active strong { color: var(--color-brand-text); }
.review-list span { color: var(--ink-soft); font-size: var(--text-small); line-height: 1.35; }
.review-list small { font-size: 11px; }
.review-main { min-width: 0; }

.review-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

/* --- Repeticoes --- */

.repetition-panel { border-color: var(--warn-border); }
.repetition-section-head { margin-bottom: var(--space-4); }
.repetition-section-head h2 { margin: var(--space-1) 0 2px; }
.repetition-section-head p { margin: 0; font-size: var(--text-caption); }

.repetition-card {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}

.repetition-card.level-repeticao_forte { border-color: var(--danger-border); }
.repetition-card.level-semelhante, .repetition-card.level-atencao { border-color: var(--warn-border); }
.repetition-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.repetition-card-head > strong { color: var(--muted); font-size: var(--text-caption); font-weight: 500; font-variant-numeric: tabular-nums; }

.repetition-level { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 600; }
.level-repeticao_forte .repetition-level { background: var(--danger-soft); color: var(--danger); }
.level-semelhante .repetition-level, .level-atencao .repetition-level { background: var(--warn-soft); color: var(--warn); }

.repetition-comparison { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-4); }

.repetition-content {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.repetition-content.current { border-color: var(--color-brand-border); background: var(--color-brand-subtle); }
.repetition-content.previous { background: var(--surface-soft); }
.repetition-content h3 { margin: 0; font-size: var(--text-small); }
.repetition-content > a { color: var(--color-brand-text); font-size: var(--text-caption); font-weight: 500; }

.repetition-side-label { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.repetition-content.current .repetition-side-label { color: var(--color-brand-text); }
.repetition-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.repetition-meta span { color: var(--muted); font-size: 11px; }
.repetition-versus { color: var(--muted-light); font-size: 11px; text-align: center; }

.repetition-analysis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.repetition-analysis p { margin: var(--space-1) 0 0; font-size: var(--text-caption); }
.repetition-scores { display: flex; gap: var(--space-2); }

.repetition-scores > span {
    display: grid;
    gap: 2px;
    min-width: 62px;
    padding: var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--surface-soft);
    text-align: center;
}

.repetition-scores small { font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.repetition-scores strong { color: var(--ink); font-size: var(--text-body); font-variant-numeric: tabular-nums; }

.repetition-decision {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.repetition-decision label { font-size: var(--text-caption); }
.repetition-decision .actions { flex-wrap: nowrap; }

/* --- Central do cliente --- */

.client-setup-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    padding: var(--space-8);
    border: 1px solid var(--color-brand-border);
    border-radius: var(--radius-2xl);
    background: var(--color-brand-subtle);
}

.client-setup-main h2 { margin: var(--space-2) 0; font-size: var(--text-h1); letter-spacing: -.02em; }
.client-setup-main > p { max-width: 56ch; margin: 0; color: var(--ink-soft); font-size: var(--text-small); }

.setup-progress { height: 6px; margin: var(--space-5) 0 var(--space-4); overflow: hidden; border-radius: var(--radius-pill); background: var(--surface); }
.setup-progress span { display: block; height: 100%; border-radius: inherit; background: var(--color-brand); transition: width var(--dur-slow) var(--ease); }
.setup-summary { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.setup-summary span { color: var(--muted); font-size: var(--text-caption); }
.setup-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.client-setup-facts { display: grid; gap: var(--space-4); align-content: start; padding-left: var(--space-8); border-left: 1px solid var(--color-brand-border); }
.client-setup-facts > div { display: grid; gap: 3px; }
.client-setup-facts span { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.client-setup-facts strong, .client-setup-facts p { margin: 0; color: var(--ink); font-size: var(--text-small); font-weight: 500; }

.setup-alerts { display: grid; gap: var(--space-4); border-color: var(--warn-border); }
.setup-alerts h2 { margin: var(--space-1) 0 0; font-size: var(--text-h3); }
.setup-alert-list { display: grid; gap: var(--space-2); }

.setup-alert-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-sm);
    background: var(--warn-soft);
    color: var(--ink-soft);
    font-size: var(--text-small);
    transition: border-color var(--transition-fast);
}

.setup-alert-list a:hover { border-color: var(--warn); }
.setup-alert-list span { flex: 0 0 auto; color: var(--warn); font-weight: 600; font-size: var(--text-caption); }

.client-config-section { margin: var(--space-8) 0; }
.config-section-head { margin-bottom: var(--space-4); }
.config-section-head h2 { margin-bottom: 3px; font-size: var(--text-h3); }
.config-section-head p { margin: 0; font-size: var(--text-caption); }

.client-config-grid { display: grid; gap: var(--space-3); }
.client-config-grid.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.client-config-grid.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client-config-grid.columns-1 { grid-template-columns: minmax(0, 1fr); }

.client-config-card {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.client-config-card:hover { border-color: var(--color-brand-border); transform: translateY(-1px); }
.client-config-card h3 { margin: var(--space-2) 0 0; font-size: var(--text-small); }
.client-config-card > p { margin: 0; font-size: var(--text-caption); }
.config-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.config-priority, .config-status {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.priority-required { background: var(--danger-soft); color: var(--danger); }
.priority-recommended { background: var(--info-soft); color: var(--info); }
.priority-optional { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.priority-automatic { background: var(--surface-soft); color: var(--muted); }
.config-status.status-ready { background: var(--ok-soft); color: var(--ok); }
.config-status.status-partial { background: var(--warn-soft); color: var(--warn); }
.config-status.status-pending { background: var(--danger-soft); color: var(--danger); }
.config-status.status-passive { background: var(--surface-soft); color: var(--muted); }

.config-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

.config-card-footer small { max-width: 58%; font-size: 11px; line-height: 1.4; }
.config-card-footer strong { color: var(--color-brand-text); font-size: var(--text-caption); font-weight: 600; }

.client-operation-section { margin: var(--space-10) 0 var(--space-4); }
.client-operation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.client-operation-grid > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.client-operation-grid > a:hover { border-color: var(--color-brand-border); transform: translateY(-1px); }

.operation-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-brand);
    color: var(--color-brand-contrast);
    font-size: var(--text-h3);
}

.operation-icon.muted { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.client-operation-grid strong, .client-operation-grid small { display: block; }
.client-operation-grid strong { color: var(--ink); font-size: var(--text-small); }
.client-operation-grid small { margin-top: 2px; font-size: 11px; }
.client-operation-grid b { color: var(--color-brand-text); font-size: var(--text-caption); font-weight: 600; }

/* --- Novo planejamento --- */

/* Resumo do ultimo passo: as decisoes anteriores ficam escondidas na hora de
   enviar, entao elas voltam a ser lidas aqui antes do botao final. */
.plan-review-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.plan-review-list > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }

.contract-summary {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: var(--text-caption);
}

.contract-summary strong { color: var(--color-brand-text); }

/* O carrossel e um recorte da cota de imagens, por isso o campo fica recuado
   sob a linha de quantidades e nao ao lado dela, como se fosse um quarto item. */
.carousel-share {
    display: grid;
    gap: var(--space-2);
    max-width: 420px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}

.carousel-share input { max-width: 120px; }
.carousel-share small { color: var(--muted); font-size: var(--text-caption); }
.carousel-share small:empty { display: none; }

/* --- Login --- */

.login-page { display: grid; place-items: center; min-height: 100vh; padding: var(--space-6); background: var(--canvas); }

.login-box {
    width: min(400px, 100%);
    padding: var(--space-10);
    border: 1px solid var(--line);
    border-radius: var(--radius-2xl);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.login-box .brand { margin-bottom: var(--space-6); }
.login-box h1 { margin-bottom: var(--space-2); font-size: var(--text-h1); }
.login-box > p { margin: 0 0 var(--space-6); font-size: var(--text-small); }
.login-box form { display: flex; flex-direction: column; gap: var(--space-4); }
.login-box .btn { margin-top: var(--space-2); }

/* ==========================================================================
   8. Guia e onboarding
   ========================================================================== */

/* O guia e uma tela interna, nao uma landing page: mesma superficie clara das
   outras telas, com a marca aparecendo so no destaque lateral. */
.guide-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    padding: var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-2xl);
    background: var(--surface);
}

.guide-hero h1 { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-display); line-height: 38px; letter-spacing: -.025em; }
.guide-hero-copy > p { max-width: 56ch; margin: 0 0 var(--space-6); color: var(--muted); font-size: var(--text-body); line-height: 1.6; }

.guide-hero-summary {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-6);
    border: 1px solid var(--color-brand-border);
    border-radius: var(--radius-xl);
    background: var(--color-brand-subtle);
}

.guide-hero-summary > span { color: var(--color-brand-text); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.guide-hero-summary strong { display: block; color: var(--ink); font-size: var(--text-h3); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; }
.guide-hero-summary p { margin: 0; color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.55; }

.guide-jump {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-8);
    padding: var(--space-2);
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    scrollbar-width: none;
}

.guide-jump::-webkit-scrollbar { display: none; }

.guide-jump a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.guide-jump a:hover { background: var(--color-brand-subtle); color: var(--color-brand-text); }

.guide-section { margin: var(--space-12) 0; scroll-margin-top: var(--space-16); }
.guide-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-5); }
.guide-section-head h2 { margin: 0; font-size: var(--text-h2); }
.guide-section-head > p { max-width: 46ch; margin: 0; text-align: right; font-size: var(--text-small); }

.guide-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }

.guide-flow article {
    position: relative;
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.guide-flow b {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-brand-subtle);
    color: var(--color-brand-text);
    font-size: 11px;
}

.guide-flow strong, .guide-flow span { display: block; }
.guide-flow strong { color: var(--ink); font-size: var(--text-small); }
.guide-flow span { color: var(--muted); font-size: 11px; line-height: 1.45; }

.guide-context-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); }
.guide-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.guide-source-grid article {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.guide-source-grid article > span {
    justify-self: start;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
}

.guide-source-grid article.required > span { background: var(--danger-soft); color: var(--danger); }
.guide-source-grid article.recommended > span { background: var(--info-soft); color: var(--info); }
.guide-source-grid article.automatic > span { background: var(--ok-soft); color: var(--ok); }
.guide-source-grid h3 { margin: var(--space-2) 0 0; font-size: var(--text-small); }
.guide-source-grid p { margin: 0; font-size: var(--text-caption); line-height: 1.55; }

.guide-callout {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-5);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-lg);
    background: var(--warn-soft);
}

.guide-callout-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--warn);
    color: var(--warn-soft);
    font-size: var(--text-small);
    font-weight: 700;
}

.guide-callout h3 { margin: 0 0 var(--space-2); font-size: var(--text-small); }
.guide-callout p { margin: 0; color: var(--warn); font-size: var(--text-caption); line-height: 1.6; }

.guide-timeline { display: grid; gap: var(--space-3); }

.guide-timeline > article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.guide-step-number {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-brand-subtle);
    color: var(--color-brand-text);
    font-size: var(--text-small);
    font-weight: 600;
}

.guide-step-copy h3 { margin: 0 0 var(--space-1); font-size: var(--text-h3); }
.guide-step-copy p { margin: 0; font-size: var(--text-small); }
.guide-step-copy ul { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.guide-step-copy li { position: relative; padding-left: var(--space-4); color: var(--muted); font-size: var(--text-caption); line-height: 1.55; }
.guide-step-copy li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-brand-border); }

.guide-owner {
    align-self: start;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.guide-approval-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }

.guide-approval-grid article {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.approval-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-brand); }
.approval-dot.social { background: var(--info); }
.approval-dot.quality { background: var(--ok); }
.approval-dot.content { background: var(--color-brand); }
.approval-dot.memory { background: var(--warn); }
.approval-dot.themes { background: var(--color-brand-border); }

.guide-checklist-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-8);
    padding: var(--space-8);
    border-radius: var(--radius-2xl);
    background: var(--purple-900);
    color: #fff;
}

.guide-checklist-layout .eyebrow { color: var(--purple-300); }
.guide-checklist-layout h2 { color: #fff; }
.guide-checklist-layout p { color: rgba(255, 255, 255, .7); }
.guide-checklist { display: grid; gap: var(--space-2); }

.guide-checklist label {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--purple-700);
    border-radius: var(--radius-sm);
    background: var(--purple-800);
    color: rgba(255, 255, 255, .86);
    font-size: var(--text-small);
    font-weight: 400;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.guide-checklist input { width: 17px; min-height: 17px; margin: 2px 0 0; accent-color: var(--purple-400); }
.guide-checklist label:has(input:checked) { border-color: var(--purple-400); background: var(--purple-700); }

.guide-faq { display: grid; gap: var(--space-2); }

.guide-faq details {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.guide-faq summary { color: var(--ink); font-size: var(--text-small); font-weight: 500; cursor: pointer; list-style: none; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq details[open] { border-color: var(--color-brand-border); }
.guide-faq p { margin: var(--space-3) 0 0; font-size: var(--text-small); }

.guide-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--color-brand-border);
    border-radius: var(--radius-xl);
    background: var(--color-brand-subtle);
}

.guide-final-cta h2 { margin: 0 0 var(--space-1); }
.guide-final-cta p { margin: 0; font-size: var(--text-small); }

/* --- Onboarding do cliente --- */

.client-onboarding { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: var(--space-6); }

.onboarding-rail {
    position: sticky;
    top: var(--space-6);
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.onboarding-rail-head { display: grid; gap: 2px; padding: 0 var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-2); }
.onboarding-rail-head strong { color: var(--ink); font-size: var(--text-small); }
.onboarding-rail-head small { color: var(--muted); font-size: 11px; }

.onboarding-rail button {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.onboarding-rail button > span {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
}

.onboarding-rail button strong { display: block; color: var(--ink-soft); font-size: var(--text-small); font-weight: 500; }
.onboarding-rail button small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.onboarding-rail button:hover { background: var(--surface-raised); }
.onboarding-rail button.is-active { border-color: var(--color-brand-border); background: var(--color-brand-subtle); }
.onboarding-rail button.is-active > span { border-color: var(--color-brand); background: var(--color-brand); color: var(--color-brand-contrast); }
.onboarding-rail button.is-active strong { color: var(--ink); font-weight: 600; }
.onboarding-rail button.is-done > span { border-color: var(--ok-border); background: var(--ok-soft); color: var(--ok); }

.onboarding-panels { display: grid; gap: var(--space-5); min-width: 0; }
.wizard-step { display: none; }
.wizard-step.is-active { display: flex; flex-direction: column; gap: var(--space-5); }
.onboarding-step-head { display: flex; align-items: flex-start; gap: var(--space-3); }

.onboarding-step-head > span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-brand-subtle);
    color: var(--color-brand-text);
    font-size: 11px;
    font-weight: 600;
}

.onboarding-step-head h2 { margin: 0 0 3px; font-size: var(--text-h3); }
.onboarding-step-head p { margin: 0; font-size: var(--text-caption); }

.field-label { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-soft); font-size: var(--text-small); font-weight: 500; }
.field-label em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 400; }

.field-tip {
    position: relative;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    cursor: help;
}

.field-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: var(--z-overlay);
    width: max-content;
    max-width: 240px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    background: var(--ink);
    color: var(--canvas);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.field-tip:hover::after, .field-tip:focus::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.wizard-actions > span { color: var(--muted); font-size: var(--text-caption); }
.onboarding-subsection,
.form-subsection { display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.onboarding-subsection h3,
.form-subsection h3 { margin: 0; font-size: var(--text-small); }
/* --- Rotina semanal de postagens --- */

.weekly-schedule {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: var(--space-2);
}

.weekly-day {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--transition-fast);
}

.weekly-day.has-posts { border-color: var(--color-brand-border); background: var(--color-brand-subtle); }
.weekly-day:focus-within { border-color: var(--color-brand); }

.weekly-day-name {
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: -.01em;
}

.weekly-day-fields { display: grid; gap: var(--space-2); }

.weekly-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 500;
}

.weekly-field input {
    min-height: 36px;
    padding: 5px 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* --- Distribuicao por funil --- */

.funnel-distribution { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }

.funnel-stage {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-top: 2px solid var(--stage-color, var(--line-strong));
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--transition-fast), opacity var(--transition);
}

.funnel-stage:focus-within { border-color: var(--color-brand); }
.funnel-stage.stage-topo { --stage-color: var(--funnel-topo); }
.funnel-stage.stage-meio { --stage-color: var(--funnel-meio); }
.funnel-stage.stage-fundo { --stage-color: var(--funnel-fundo); }

.funnel-stage-top { display: flex; align-items: center; gap: var(--space-2); }
.funnel-stage-top .field-label { margin: 0; }

.funnel-stage-mark {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--stage-color, var(--muted-light));
}

.funnel-stage-value { display: flex; align-items: center; gap: var(--space-2); }
.funnel-stage-value input { max-width: 96px; font-size: var(--text-h3); font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel-stage-unit { color: var(--muted); font-size: var(--text-small); font-weight: 500; }
.funnel-stage small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.funnel-stage small strong { color: var(--ink-soft); font-weight: 600; }

/* Desabilitado precisa parecer intencional e continuar legivel. */
.funnel-distribution.is-disabled .funnel-stage { background: var(--surface-soft); border-top-color: var(--line-strong); }
.funnel-distribution.is-disabled .funnel-stage-mark { background: var(--muted-light); }
.funnel-distribution.is-disabled input { color: var(--muted); }
.funnel-distribution.is-disabled small { opacity: .7; }

/* --- Faixa de origem (padrao do cadastro / funil do ciclo) --- */

.source-strip {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}

.source-strip-label { color: var(--muted); font-size: var(--text-caption); font-weight: 500; }
.source-strip-value { color: var(--ink); font-size: var(--text-caption); font-weight: 600; font-variant-numeric: tabular-nums; }

.source-strip-bar {
    display: flex;
    height: 8px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface);
}

.source-strip-bar > span { display: block; height: 100%; }
.source-strip-bar .stage-topo { background: var(--funnel-topo); }
.source-strip-bar .stage-meio { background: var(--funnel-meio); }
.source-strip-bar .stage-fundo { background: var(--funnel-fundo); }

/* --- Cartao de chave liga/desliga --- */

.switch-card {
    display: flex;
    /* O seletor base de label empilha em coluna; aqui a marca fica ao lado do texto. */
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.switch-card:hover { border-color: var(--muted-light); }
.switch-card:has(input:checked) { border-color: var(--color-brand-border); background: var(--color-brand-subtle); }
.switch-card input { width: 17px; min-height: 17px; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--color-brand); }
.switch-card-copy { display: grid; gap: 3px; }
.switch-card-copy strong { color: var(--ink); font-size: var(--text-small); font-weight: 600; }
.switch-card-copy small { color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }

/* --- Linha de resultado: soma, saldo e avisos calculados no JS --- */

.result-line {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--ink-soft);
    font-size: var(--text-small);
    font-weight: 500;
}

.result-line:empty { display: none; }
.result-line.danger { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }

.selection-autosave-status {
    margin: calc(var(--space-2) * -1) 0 0;
    color: var(--muted);
    font-size: var(--text-caption);
}
.selection-autosave-status.is-saving { color: var(--color-brand-text); }
.selection-autosave-status.is-saved { color: var(--ok); }
.selection-autosave-status.is-error { color: var(--danger); }

/* --- Selo de modalidade: desconta x brinde --- */

.mode-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.mode-flag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.flag-substituicao { background: var(--surface-soft); color: var(--muted); }
.flag-brinde { background: var(--ok-soft); color: var(--ok); }

/* Substituicao e o padrao dos selects, entao e o estado visivel de partida.
   O :has() troca para brinde sem depender de JavaScript. */
.flag-brinde:not(.is-static) { display: none; }
[data-date-row]:has([data-date-mode] option[value="brinde"]:checked) .date-mode .flag-substituicao,
[data-traffic-row]:has([data-traffic-mode] option[value="brinde"]:checked) .flag-substituicao { display: none; }
[data-date-row]:has([data-date-mode] option[value="brinde"]:checked) .date-mode .flag-brinde,
[data-traffic-row]:has([data-traffic-mode] option[value="brinde"]:checked) .flag-brinde { display: inline-flex; }

/* --- Datas comemorativas: saldo e escolha por data --- */

.date-balance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.date-balance-item { display: grid; gap: 2px; }

.date-balance-value {
    color: var(--ink);
    font-size: var(--text-h2);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.date-balance-label { color: var(--muted); font-size: var(--text-caption); line-height: 1.4; }
.date-balance-item.is-substitution .date-balance-value { color: var(--color-brand-text); }
.date-balance-item.is-bonus .date-balance-value { color: var(--ok); }

.date-mode { display: grid; justify-items: end; gap: var(--space-2); }
.date-mode .mode-flag { display: inline-flex; }
.date-mode .flag-brinde { display: none; }
.date-mode-choice select { width: 100%; }
.date-mode-choice { display: grid; margin: 0; }
.date-mode-choice select { min-height: 38px; padding: 6px 30px 6px 10px; font-size: var(--text-caption); }
.date-item:not(:has(.date-choice input:checked)) .date-mode { opacity: .5; }
.date-replaces { color: var(--muted-light) !important; }

/* Marcada como brinde muda o tom da linha inteira: nao desconta nada. */
.date-item:has(.date-choice input:checked):has([data-date-mode] option[value="brinde"]:checked) {
    border-color: var(--ok-border);
    background: var(--ok-soft);
}

/* --- Script de stories --- */

.story-weeks { display: grid; gap: var(--space-5); }
.story-week > strong { display: block; margin-bottom: var(--space-2); color: var(--color-brand-text); font-size: var(--text-caption); letter-spacing: .04em; }
.story-table { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.story-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.story-row:last-child { border-bottom: 0; }
.story-row > div { min-width: 0; padding: var(--space-2) var(--space-3); border-right: 1px solid var(--line); color: var(--ink-soft); font-size: var(--text-small); }
.story-row > div:last-child { border-right: 0; }
.story-row > div small { color: var(--muted); font-size: 11px; }

.story-row.header {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.story-row.header > div { color: inherit; font-size: inherit; }
.story-row input { min-height: 34px; padding: 4px var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; font-size: var(--text-caption); }
.story-row input:focus { background: var(--surface); box-shadow: inset 0 0 0 2px var(--color-brand-ring); }

@media (max-width: 720px) {
    .story-row { grid-template-columns: 72px minmax(0, 1fr); }
    .story-row > div:nth-child(3) { grid-column: 2; border-top: 1px solid var(--line); }
    .story-row.header > div:nth-child(3) { display: none; }
}

/* --- Data manual --- */

.manual-date {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
}

.manual-date summary {
    color: var(--color-brand-text);
    font-size: var(--text-caption);
    font-weight: 600;
    cursor: pointer;
}

.manual-date-fields {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) minmax(190px, 240px);
    gap: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
}

.manual-date-fields label { gap: 4px; }
.manual-date-fields span { color: var(--muted); font-size: 11px; font-weight: 500; }
.manual-date-wide { grid-column: 1 / -1; }
.manual-date .actions { align-items: center; }
.manual-date .hint { margin: 0; }

@media (max-width: 760px) {
    .manual-date-fields { grid-template-columns: minmax(0, 1fr); }
}

/* --- Criativos de trafego pago --- */

.traffic-creatives,
.traffic-creative-list { display: grid; gap: var(--space-4); }
.traffic-creatives[hidden] { display: none; }

.traffic-creative-row {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-left: 3px solid var(--color-brand-border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.traffic-creative-row:has([data-traffic-mode] option[value="brinde"]:checked) { border-left-color: var(--ok); }

.traffic-creative-head { display: flex; align-items: center; gap: var(--space-3); }
.traffic-creative-name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.traffic-creative-name strong { color: var(--ink); font-size: var(--text-small); font-weight: 600; }
.traffic-creative-flags { margin-left: auto; }
.traffic-creative-head .btn { flex: 0 0 auto; }

.traffic-creative-badge {
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    background: var(--color-brand-subtle);
    color: var(--color-brand-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.traffic-creative-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.traffic-creative-foot { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.traffic-creative-foot .result-line { flex: 1; min-width: 220px; }

.briefing-example {
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
}

.briefing-example summary {
    color: var(--color-brand-text);
    font-size: var(--text-caption);
    font-weight: 600;
    cursor: pointer;
}

.briefing-example p { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--text-small); line-height: 1.6; }

/* --- CTAs dentro da celula de fala do roteiro --- */

.script-cta { display: block; }
.script-cta + .script-cta { margin-top: var(--space-3); }

.script-cta strong {
    display: block;
    margin-bottom: 2px;
    color: var(--color-brand-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.script-cta > span { display: block; color: var(--ink-soft); }

/* --- Criativos ja reservados na tela do planejamento --- */

.traffic-planning-list { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }

.traffic-planning-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-left: 3px solid var(--color-brand-border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.traffic-planning-card.is-bonus { border-left-color: var(--ok); }
.traffic-planning-head { display: flex; align-items: center; gap: var(--space-3); }
.traffic-planning-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.traffic-planning-title strong { color: var(--ink); font-size: var(--text-small); font-weight: 600; }
.traffic-planning-title small { color: var(--muted); font-size: var(--text-caption); }

/* --- Painel de distribuicao do ciclo --- */

.funnel-panel {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.funnel-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.funnel-panel-plan { margin: var(--space-1) 0 0; color: var(--ink); font-size: var(--text-h3); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.funnel-panel .source-strip-bar { height: 10px; background: var(--surface-soft); }

.funnel-panel-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-4); margin: 0; }
.funnel-panel-counts > div { display: grid; gap: 2px; padding-left: var(--space-3); border-left: 2px solid var(--stage-color, var(--line-strong)); }
.funnel-panel-counts > div.stage-topo { --stage-color: var(--funnel-topo); }
.funnel-panel-counts > div.stage-meio { --stage-color: var(--funnel-meio); }
.funnel-panel-counts > div.stage-fundo { --stage-color: var(--funnel-fundo); }
.funnel-panel-counts dt { color: var(--muted); font-size: var(--text-caption); font-weight: 500; }
.funnel-panel-counts dd { margin: 0; color: var(--ink); font-size: var(--text-h2); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* --- Previa das datas calculadas pela rotina --- */

.planning-dates-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }

.planning-dates-preview span {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--ink-soft);
    font-size: var(--text-caption);
    line-height: 1.5;
}

.planning-dates-preview strong { color: var(--muted); font-weight: 600; }

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.onboarding-pillars { display: grid; gap: var(--space-2); }
.onboarding-pillars .pillar-row { margin: 0; }
.memory-entry { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--space-3); }
.onboarding-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

.onboarding-context-note { display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); }
.onboarding-context-note strong { color: var(--ink); font-size: var(--text-small); }
.onboarding-context-note span { color: var(--muted); font-size: var(--text-caption); line-height: 1.55; }

.onboarding-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.onboarding-review-card {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}

.onboarding-review-card > strong { color: var(--ink); font-size: var(--text-small); }
.onboarding-review-card ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.onboarding-review-card li { display: grid; gap: 2px; }
.onboarding-review-card span { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.onboarding-review-card b { color: var(--ink-soft); font-size: var(--text-caption); font-weight: 500; }

.onboarding-final-note { padding: var(--space-4); border: 1px solid var(--color-brand-border); border-radius: var(--radius-sm); background: var(--color-brand-subtle); }
.onboarding-final-note p { margin: 0; color: var(--ink-soft); font-size: var(--text-caption); }

/* ==========================================================================
   9. Responsivo
   ========================================================================== */

@media (max-width: 1180px) {
    .journey-copy small { display: none; }
    .next-action { grid-template-columns: 1fr; gap: var(--space-6); }
    .next-action-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .next-action-slot { flex: 1 1 200px; }
    .guide-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1060px) {
    .app-shell { grid-template-columns: 224px minmax(0, 1fr); }
    .main-nav a.active::after { display: none; }
    .grid.four, .guide-approval-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-config-grid.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-shell { grid-template-columns: 240px minmax(0, 1fr); }
    .guide-context-layout { grid-template-columns: 1fr; }
    .client-setup-hero { grid-template-columns: 1fr; gap: var(--space-6); }
    .client-setup-facts { padding-left: 0; padding-top: var(--space-5); border-left: 0; border-top: 1px solid var(--color-brand-border); }
    .client-onboarding { grid-template-columns: 1fr; }
    .onboarding-rail { position: static; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .onboarding-rail-head { grid-column: 1 / -1; }
    .onboarding-pillars .pillar-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
    .app-shell { display: block; }
    .date-item { grid-template-columns: 1fr; }
    .date-mode { padding-left: 32px; }
    /* Empilhado: no celular a sub-etapa vira lista, nao trilha horizontal. */
    .substep-rail { grid-auto-flow: row; grid-auto-columns: auto; }
    .substep-copy small { display: none; }
    .weekly-schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .planning-dates-preview { grid-template-columns: 1fr; }
    .funnel-distribution { grid-template-columns: 1fr; }
    .traffic-creative-grid { grid-template-columns: 1fr; }
    .funnel-panel-head { flex-direction: column; gap: var(--space-3); }
    .source-strip { grid-template-columns: 1fr; gap: var(--space-2); }
    .traffic-creative-head { flex-wrap: wrap; }
    .traffic-creative-flags { margin-left: 0; order: 3; }

    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: var(--z-nav);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        height: 60px;
        padding: 0 var(--space-4);
        border-bottom: 1px solid var(--line);
        background: var(--surface);
    }

    .nav-toggle {
        display: grid;
        gap: 4px;
        place-content: center;
        width: 40px;
        height: 40px;
        margin-left: auto;
        padding: 0;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
        background: var(--surface);
        cursor: pointer;
    }

    .nav-toggle span { width: 16px; height: 1.5px; border-radius: 2px; background: var(--ink-soft); }

    .sidebar {
        position: fixed;
        inset: 60px 0 auto;
        z-index: var(--z-overlay);
        height: auto;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    }

    .sidebar.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .sidebar > .brand { display: none; }
    .main-nav { padding-top: 0; }
    .main-nav a { padding: 12px var(--space-3); }

    .container { width: min(100% - var(--space-8), var(--content)); margin: var(--space-6) auto var(--space-12); }
    .page-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
    .page-head .actions { width: 100%; }
    .page-head .actions .btn, .page-head .actions form { flex: 1 1 auto; }
    .page-head .actions form .btn { width: 100%; }

    h1 { font-size: var(--text-h2); line-height: 26px; }
    .panel { padding: var(--space-5); border-radius: var(--radius-lg); }

    .journey:not(.journey-compact) { grid-template-columns: 1fr; gap: 0; }

    .journey:not(.journey-compact) .journey-step {
        grid-template-columns: 26px minmax(0, 1fr);
        align-items: start;
        padding: 0 0 var(--space-5);
    }

    .journey:not(.journey-compact) .journey-step:last-child { padding-bottom: 0; }

    .journey:not(.journey-compact) .journey-step::before {
        left: 12px;
        right: auto;
        top: 30px;
        bottom: 4px;
        width: 1.5px;
        height: auto;
    }

    .journey-copy small { display: block; }

    .next-action { padding: var(--space-5); border-radius: var(--radius-xl); }
    .next-action-actions { flex-direction: column; }
    .next-action-slot { flex: none; }
    .next-action-meta { gap: var(--space-4); }
    .next-action-progress { max-width: none; }

    .callout { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .callout .btn { width: 100%; }

    /* A linha inteira ja e o link; a seta vira redundante quando empilha. */
    .resume-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .resume-next { white-space: normal; }
    .resume-go { display: none; }
    .client-table .col-niche { max-width: none; }

    .stat-row { gap: var(--space-6); }
    .grid.two, .grid.three, .grid.four,
    .queue-summary,
    .client-config-grid.columns-1, .client-config-grid.columns-2, .client-config-grid.columns-3,
    .client-operation-grid, .guide-source-grid, .guide-approval-grid,
    .onboarding-context-grid, .onboarding-review-grid, .memory-entry { grid-template-columns: 1fr; }

    .client-config-grid.columns-1 .client-config-card { grid-column: auto; }
    .config-card-footer, .setup-alert-list a { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .config-card-footer small { max-width: none; }
    .client-operation-grid > a { grid-template-columns: auto minmax(0, 1fr); }
    .client-operation-grid b { grid-column: 2; }

    .review-shell { grid-template-columns: 1fr; }
    .review-list { position: static; max-height: 300px; }
    .review-nav { flex-direction: column; align-items: stretch; }
    .review-nav .actions { width: 100%; }
    .review-nav .actions .btn { flex: 1 1 auto; }

    .approval-bar { flex-direction: column; align-items: stretch; padding: var(--space-5); }
    .approval-bar .actions { justify-content: flex-start; width: 100%; }
    .approval-bar .btn, .approval-bar form { width: 100%; }

    .filters, .toolbar { flex-direction: column; align-items: stretch; }
    .filters input { max-width: none; }
    .filters .btn, .toolbar .btn, .toolbar form { width: 100%; }

    .contract-summary { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .plan-review-list > div { grid-template-columns: 1fr; gap: var(--space-1); }
    .section-head { flex-direction: column; align-items: stretch; }

    .pillar-row, .onboarding-pillars .pillar-row { grid-template-columns: 1fr; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); }
    .script-row, .art-row, .mini-script-row { grid-template-columns: 1fr; }
    .script-row textarea, .art-row textarea, .art-row > input { border-left: 0; border-top: 1px solid var(--line); }
    .mini-script-row > div { border-right: 0; border-bottom: 1px solid var(--line); }
    .mini-script-row > div:last-child { border-bottom: 0; }

    .repetition-comparison, .repetition-analysis, .repetition-decision { grid-template-columns: 1fr; }
    .repetition-versus { padding: var(--space-1) 0; }
    .repetition-scores { flex-wrap: wrap; }
    .repetition-decision .actions { flex-wrap: wrap; }
    .repetition-decision .actions .btn { flex: 1 1 auto; }

    .delivery-file { flex-wrap: wrap; }
    .delivery-file .actions, .delivery-file .actions .btn { width: 100%; }

    .guide-hero, .guide-checklist-layout { grid-template-columns: 1fr; padding: var(--space-6); }
    .guide-hero h1 { font-size: 28px; line-height: 34px; }
    .guide-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guide-section-head { display: block; }
    .guide-section-head > p { margin-top: var(--space-2); text-align: left; }
    .guide-timeline > article { grid-template-columns: 44px minmax(0, 1fr); }
    .guide-owner { grid-column: 2; justify-self: start; }
    .guide-final-cta { flex-direction: column; align-items: stretch; }
    .guide-final-cta .btn { width: 100%; }

    .wizard-actions { flex-direction: column; align-items: stretch; }
    .wizard-actions .actions, .wizard-actions .btn { width: 100%; }
    .onboarding-rail { grid-template-columns: 1fr; }

    dl { grid-template-columns: 1fr; gap: var(--space-1); }
    dd { margin-bottom: var(--space-3); }

    .login-box { padding: var(--space-6); }
}

/* ==========================================================================
   10. Preferencias de movimento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .btn:active,
    .client-config-card:hover, .client-operation-grid > a:hover { transform: none; }

    .skeleton { animation: none; }
}

/* ==========================================================================
   11. Tarefas em segundo plano
   ========================================================================== */

.job-tray {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: var(--z-modal);
    display: grid;
    gap: var(--space-2);
    width: min(340px, calc(100vw - var(--space-8)));
    pointer-events: none;
}

.job-tray:empty { display: none; }

.job-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    animation: job-in var(--dur-slow) var(--ease);
}

@keyframes job-in {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.job-card.is-done { border-color: var(--ok-border); }
.job-card.is-error { border-color: var(--danger-border); }

.job-card-head { display: flex; align-items: flex-start; gap: var(--space-3); }

.job-card-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--color-brand-subtle);
    color: var(--color-brand-text);
    font-size: 11px;
    font-weight: 700;
}

.job-card.is-done .job-card-icon { background: var(--ok-soft); color: var(--ok); }
.job-card.is-error .job-card-icon { background: var(--danger-soft); color: var(--danger); }

.job-card-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.job-card-copy strong { color: var(--ink); font-size: var(--text-small); font-weight: 600; }
.job-card-copy small { color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }

.job-card-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--muted-light);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.job-card-close:hover { background: var(--surface-soft); color: var(--ink); }

.job-card-progress { display: flex; align-items: center; gap: var(--space-3); }
.job-card-progress .progress { flex: 1; height: 5px; }
.job-card-progress span { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.job-card-foot { display: flex; justify-content: flex-end; gap: var(--space-2); }
.job-card-foot .btn { min-height: 32px; padding: 0 var(--space-3); font-size: var(--text-caption); }
.job-card-note { align-self: center; color: var(--muted); font-size: var(--text-caption); }

.job-bar-indeterminate {
    height: 5px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
}

.job-bar-indeterminate::after {
    content: "";
    display: block;
    width: 38%;
    height: 100%;
    border-radius: inherit;
    background: var(--color-brand);
    animation: job-slide 1.4s var(--ease) infinite;
}

@keyframes job-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

@media (max-width: 780px) {
    .job-tray {
        right: var(--space-4);
        left: var(--space-4);
        bottom: var(--space-4);
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .job-card { animation: none; }
    .job-bar-indeterminate::after { animation: none; width: 100%; opacity: .5; }
}

/* ==========================================================================
   12. Apresentacao online
   ========================================================================== */

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

.slide {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 260px;
    padding: var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.slide-body { width: 100%; min-width: 0; }

.slide-number {
    position: absolute;
    right: var(--space-5);
    bottom: var(--space-4);
    color: var(--muted-light);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.slide-cover {
    align-items: center;
    border-color: var(--purple-700);
    background: var(--purple-900);
    color: #fff;
}

.slide-cover h2 { margin: 0; color: #fff; font-size: var(--text-display); line-height: 38px; }
.slide-cover .slide-number { color: rgba(255, 255, 255, .45); }

.slide-kicker {
    margin: 0 0 var(--space-3);
    color: var(--purple-300);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: .1em;
}

.slide-thanks { justify-content: center; text-align: center; }

.slide-section {
    align-items: center;
    min-height: 140px;
    border-color: var(--color-brand-border);
    background: var(--color-brand-subtle);
}

.slide-section h2 { margin: 0; color: var(--color-brand-text); font-size: var(--text-h1); }

.slide-title {
    margin: 0 0 var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
    color: var(--color-brand-text);
    font-size: var(--text-h2);
}

.slide-table { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.slide-row { display: grid; grid-template-columns: 120px 100px minmax(0, 1fr) 90px; border-bottom: 1px solid var(--line); }
.slide-row.script { grid-template-columns: 90px 1fr 1fr 1.6fr; }
.slide-row.carousel { grid-template-columns: 110px minmax(0, 1fr); }
.slide-row.carousel > div strong { display: block; color: var(--ink); }
.slide-row.carousel > div span { display: block; margin-top: 2px; }
.slide-row:last-child { border-bottom: 0; }
.slide-row > div { padding: var(--space-3); color: var(--ink-soft); font-size: var(--text-small); overflow-wrap: anywhere; }
.slide-row > div + div { border-left: 1px solid var(--line); }

.slide-row.header {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.slide-row.header > div { color: inherit; font-size: inherit; }
.slide-row.is-video > div:first-child { box-shadow: inset 3px 0 0 var(--color-brand); }

.slide-fields { grid-template-columns: 96px minmax(0, 1fr); margin-top: var(--space-5); gap: var(--space-3) var(--space-5); }
.slide-fields dt { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.slide-fields dd { color: var(--ink); font-size: var(--text-body); line-height: 1.6; }

.slide-weeks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.slide-weeks strong { display: block; margin-bottom: var(--space-2); color: var(--ink); font-size: var(--text-small); }
.slide-weeks ul { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); }
.slide-weeks li { color: var(--muted); font-size: var(--text-small); line-height: 1.55; }

@media (max-width: 780px) {
    .slide { padding: var(--space-5); }
    .slide-cover h2 { font-size: var(--text-h1); line-height: 30px; }
    .slide-row, .slide-row.script { grid-template-columns: 1fr; }
    .slide-row > div + div { border-left: 0; border-top: 1px solid var(--line); }
    .slide-fields { grid-template-columns: 1fr; }
    .slide-weeks { grid-template-columns: 1fr; }
}

@media print {
    .sidebar, .mobile-topbar, .breadcrumb, .page-head .actions, .job-tray, .flash { display: none !important; }
    .app-shell { display: block; }
    .app-shell > .container { width: 100%; margin: 0; }
    .deck { gap: 0; }

    .slide {
        page-break-after: always;
        break-after: page;
        border: 0;
        border-radius: 0;
        min-height: auto;
    }

    .slide-cover, .slide-section { background: none; color: var(--ink); }
    .slide-cover h2, .slide-section h2 { color: var(--ink); }
    .slide-number { color: var(--muted); }
}

/* ==========================================================================
   13. Calendario editorial multicanal
   ========================================================================== */

.editorial-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--line);
}

.calendar-weekday {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.calendar-day {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 128px;
    padding: var(--space-3);
    background: var(--surface);
}

.calendar-day.is-empty { background: var(--surface-raised); }

.calendar-number {
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.calendar-item {
    display: grid;
    gap: 3px;
    padding: var(--space-2) 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: var(--surface-raised);
    color: inherit;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.calendar-item:hover { border-color: var(--color-brand-border); background: var(--color-brand-subtle); }

/* Canal e formato ocupam uma linha so: quebrar "Instagram · Carrossel" no meio
   deixava o cartao com cara de texto solto. */
.calendar-item small {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

/* Na celula do dia so cabe uma informacao curta: o icone ja diz o canal, entao
   o nome sai da tela e sobra largura para o formato, que e o que diferencia. */
.calendar-item small .channel-mark { min-width: 0; }

.calendar-item small .channel-mark > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.calendar-format { flex: 0 0 auto; }
.calendar-item > span { color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.4; }

@media (max-width: 900px) {
    .editorial-calendar { grid-template-columns: 1fr; }
    .calendar-weekday, .calendar-day.is-empty { display: none; }
    .calendar-day { min-height: auto; }
}

/* ==========================================================================
   14. Portal do cliente
   Tela publica, sem barra lateral, mas com a mesma linguagem do sistema:
   os mesmos tokens, a mesma escala tipografica e os mesmos botoes.
   ========================================================================== */

.portal-body {
    min-height: 100vh;
    background: var(--canvas);
    color: var(--ink);
}

.portal-shell {
    width: min(1080px, calc(100% - var(--space-8)));
    margin: 0 auto;
    padding: var(--space-8) 0 var(--space-16);
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: -.01em;
}

.portal-brand-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: var(--color-brand);
    color: var(--color-brand-contrast);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.03em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.portal-kicker {
    margin: 0 0 var(--space-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* --- Entrada: uma pergunta so, no mesmo formato da tela de login --- */

.portal-welcome {
    width: min(440px, 100%);
    margin: var(--space-12) auto var(--space-16);
    padding: var(--space-10);
    border: 1px solid var(--line);
    border-radius: var(--radius-2xl);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.portal-welcome h1 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-h1);
    line-height: 30px;
    letter-spacing: -.022em;
}

.portal-welcome > p:not(.portal-kicker) {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: 1.6;
}

.portal-welcome > small { display: block; margin-top: var(--space-4); color: var(--muted); font-size: var(--text-caption); }
.portal-name-form { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-6) 0 0; }
.portal-name-form .btn { width: 100%; margin-top: var(--space-1); }

/* --- Revisao peca a peca --- */

.portal-review-head,
.portal-calendar-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
    margin: 0 0 var(--space-5);
}

.portal-review-head h1,
.portal-calendar-hero h1 {
    margin: 0;
    font-size: var(--text-h1);
    line-height: 30px;
    letter-spacing: -.022em;
}

.portal-review-head > div > p:last-child,
.portal-calendar-hero > div > p:last-child {
    max-width: 62ch;
    margin: var(--space-2) 0 0;
    color: var(--muted);
    font-size: var(--text-small);
    line-height: 1.6;
}

.portal-reviewer {
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-caption);
}

.portal-reviewer strong { color: var(--ink-soft); font-weight: 600; }

.portal-progress {
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.portal-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-3);
    font-size: var(--text-caption);
}

.portal-progress-meta strong { color: var(--ink); font-weight: 600; }
.portal-progress-meta span { color: var(--muted); }

.portal-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
}

.portal-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-brand);
    transition: width var(--dur-slow) var(--ease);
}

/* Barra da pre-visualizacao interna: informa em que peca a equipe esta e deixa
   percorrer todas. Nao aparece para o cliente. */
.portal-preview-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border: 1px solid var(--color-brand-border);
    border-radius: var(--radius-lg);
    background: var(--color-brand-subtle);
}

.portal-preview-nav > p { margin: 0; color: var(--color-brand-text); font-size: var(--text-caption); }
.portal-preview-nav strong { font-weight: 600; }
.portal-preview-nav .actions { flex: 0 0 auto; }
.portal-preview-nav .btn { background: var(--surface); }

/* A cor diz de longe o que o cliente fez com a peca. */
.portal-preview-nav.is-aprovada { border-color: var(--ok-border); background: var(--ok-soft); }
.portal-preview-nav.is-aprovada > p { color: var(--ok); }
.portal-preview-nav.is-ajuste { border-color: var(--warn-border); background: var(--warn-soft); }
.portal-preview-nav.is-ajuste > p { color: var(--warn); }

.portal-review-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.portal-piece-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
    background: var(--surface-raised);
}

.portal-piece-head > div { display: flex; align-items: center; gap: var(--space-3); }

.portal-channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-subtle);
    color: var(--color-brand-text);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.portal-format { color: var(--muted); font-size: var(--text-caption); font-weight: 500; }
.portal-piece-head time { color: var(--muted); font-size: var(--text-caption); font-variant-numeric: tabular-nums; }

.portal-piece-context {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 1px;
    border-bottom: 1px solid var(--line);
    background: var(--line);
}

.portal-piece-context > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
}

.portal-piece-context small,
.portal-detail-meta small,
.portal-adjustment-note small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.portal-piece-context strong { color: var(--ink); font-size: var(--text-small); font-weight: 600; line-height: 1.45; }
.portal-piece-context span { color: var(--ink-soft); font-size: var(--text-small); line-height: 1.45; }

.portal-content-preview {
    padding: var(--space-6);
    color: var(--ink-soft);
    font-size: var(--text-body);
    line-height: 1.7;
    overflow-wrap: break-word;
}

/* A peca de um lado, a legenda do outro: sao duas decisoes diferentes e o
   cliente precisa ver de imediato o que e titulo e o que e texto do post. */
.portal-piece-body {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 1px;
    background: var(--line);
}

.portal-piece-structure,
.portal-piece-legend { padding: var(--space-6); background: var(--surface); }

.portal-block-title {
    margin: 0 0 var(--space-4);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portal-blocks { display: grid; }

.portal-block {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--line);
}

.portal-block:first-child { padding-top: 0; border-top: 0; }
.portal-block:last-child { padding-bottom: 0; }

.portal-block-label { color: var(--muted); font-size: var(--text-caption); font-weight: 600; line-height: 1.45; }
.portal-block-label small { display: block; margin-top: 2px; color: var(--muted-light); font-size: 10px; font-weight: 500; }
.portal-block strong { display: block; color: var(--ink); font-size: var(--text-small); font-weight: 600; line-height: 1.45; }
.portal-block p { margin: 0; color: var(--ink-soft); font-size: var(--text-small); line-height: 1.6; }
.portal-block strong + p { margin-top: var(--space-1); }

.portal-block-extra {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--text-small);
    line-height: 1.6;
}

.portal-piece-legend { background: var(--surface-raised); }
.portal-legend-text { color: var(--ink-soft); font-size: var(--text-small); line-height: 1.7; overflow-wrap: break-word; }

/* A decisao acompanha a rolagem, no celular e no desktop. */
.portal-actions-bar {
    position: sticky;
    bottom: var(--space-3);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.portal-actions-bar > p { margin: 0; color: var(--muted); font-size: var(--text-caption); }
.portal-actions-bar form { margin: 0; }
.portal-actions-buttons { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); }

.portal-dialog {
    width: min(520px, calc(100% - var(--space-8)));
    padding: var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-2xl);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-md);
}

.portal-dialog::backdrop { background: rgba(25, 25, 24, .5); }
.portal-dialog h2 { margin: 0 0 var(--space-2); font-size: var(--text-h2); }
.portal-dialog p { margin: 0; font-size: var(--text-small); line-height: 1.6; }
.portal-dialog .actions { justify-content: flex-end; }

/* --- Fechamento: calendario do que foi decidido --- */

.portal-calendar-hero {
    align-items: center;
    padding: var(--space-8);
    border: 1px solid var(--ok-border);
    border-radius: var(--radius-2xl);
    background: var(--ok-soft);
}

.portal-calendar-hero.has-adjustments { border-color: var(--warn-border); background: var(--warn-soft); }

.portal-summary-count {
    display: grid;
    gap: 2px;
    justify-items: center;
    flex: 0 0 auto;
    min-width: 116px;
}

.portal-summary-count strong {
    color: var(--ok);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.portal-calendar-hero.has-adjustments .portal-summary-count strong { color: var(--warn); }
.portal-summary-count span { color: var(--muted); font-size: 11px; }

.portal-calendar-section {
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.portal-calendar-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
}

.portal-calendar-heading h2 { margin: 0; font-size: var(--text-h2); }
.portal-calendar-heading > p { margin: 0; color: var(--muted); font-size: var(--text-caption); }

.portal-calendar-legend {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    color: var(--muted);
    font-size: 11px;
}

.portal-calendar-legend span { display: flex; align-items: center; gap: 6px; }
.portal-calendar-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.portal-calendar-legend .has-adjustment::before { background: var(--warn); }

.portal-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--line);
}

.portal-weekday {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.portal-day {
    display: flex;
    min-width: 0;
    min-height: 118px;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--surface);
}

.portal-day.is-empty,
.portal-day.has-no-content { background: var(--surface-raised); }

.portal-day-number { color: var(--muted); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }

.portal-calendar-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2);
    border: 1px solid var(--ok-border);
    border-radius: var(--radius-xs);
    background: var(--ok-soft);
    color: var(--ink);
    transition: border-color var(--transition-fast);
}

.portal-calendar-item:hover { border-color: var(--ok); }
.portal-calendar-item.has-adjustment { border-color: var(--warn-border); background: var(--warn-soft); }
.portal-calendar-item.has-adjustment:hover { border-color: var(--warn); }

.portal-calendar-item small {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.portal-calendar-item span {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
}

.portal-calendar-item b { color: var(--ok); font-size: 10px; font-weight: 600; }
.portal-calendar-item.has-adjustment b { color: var(--warn); }

.portal-undated {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    font-size: var(--text-caption);
}

.portal-undated strong { color: var(--ink-soft); font-weight: 600; }

.portal-undated a {
    padding: 5px 10px;
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--color-brand-text);
}

.portal-calendar-detail {
    scroll-margin-top: var(--space-5);
    margin-top: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.portal-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
}

.portal-detail-head h2 { margin: 0; font-size: var(--text-h2); }

.portal-decision-badge {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--ok-soft);
    color: var(--ok);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.portal-decision-badge.has-adjustment { background: var(--warn-soft); color: var(--warn); }

.portal-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.portal-detail-meta > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
}

.portal-detail-meta strong { color: var(--ink); font-size: var(--text-small); font-weight: 600; }
.portal-detail-meta span { color: var(--muted); font-size: 11px; }

.portal-adjustment-note {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-sm);
    background: var(--warn-soft);
}

.portal-adjustment-note p { margin: var(--space-2) 0 0; color: var(--ink-soft); font-size: var(--text-small); line-height: 1.6; }

.portal-content-details { margin-bottom: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.portal-content-details summary { padding: var(--space-3) var(--space-4); cursor: pointer; font-size: var(--text-small); font-weight: 500; }
.portal-content-details[open] summary { border-bottom: 1px solid var(--line); }
.portal-content-details .portal-content-preview { padding: var(--space-5); }

@media (max-width: 800px) {
    .portal-shell { width: min(100% - var(--space-5), 680px); padding-top: var(--space-4); }
    .portal-brand { margin-bottom: var(--space-5); }
    .portal-welcome { margin: var(--space-8) auto var(--space-12); padding: var(--space-6); }
    .portal-review-head,
    .portal-calendar-hero,
    .portal-calendar-heading { align-items: flex-start; flex-direction: column; }
    .portal-reviewer { align-self: flex-start; }
    .portal-preview-nav { align-items: stretch; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
    .portal-preview-nav .actions { justify-content: stretch; }
    .portal-preview-nav .actions .btn { flex: 1; }
    .portal-piece-context { grid-template-columns: 1fr 1fr; }
    .portal-piece-body { grid-template-columns: 1fr; }
    .portal-piece-structure, .portal-piece-legend { padding: var(--space-5); }
    .portal-block { grid-template-columns: 1fr; gap: var(--space-1); }
    /* No celular a barra e so decisao: os dois botoes lado a lado, na menor
       altura que ainda respeita o alvo de toque de 44px. A frase de apoio ja
       aparece no topo da tela e aqui so roubava altura. */
    .portal-actions-bar { bottom: 0; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-lg); }
    .portal-actions-bar > p { display: none; }
    .portal-actions-buttons { flex: 1; }
    .portal-actions-buttons > * { flex: 1 1 0; }
    .portal-actions-buttons .btn { width: 100%; padding: 0 var(--space-3); }
    .portal-dialog { padding: var(--space-6); }
    .portal-calendar-hero { gap: var(--space-5); padding: var(--space-6); }
    .portal-summary-count { justify-items: start; width: 100%; }
    .portal-calendar { grid-template-columns: 1fr; }
    .portal-weekday,
    .portal-day.is-empty,
    .portal-day.has-no-content { display: none; }
    .portal-day { min-height: auto; padding: var(--space-3); }
    .portal-day-number { font-size: var(--text-small); }
    .portal-calendar-item { padding: var(--space-3); }
    .portal-calendar-item span { font-size: var(--text-small); }
    .portal-detail-meta { grid-template-columns: 1fr; }
    .portal-detail-head { flex-direction: column; }
    .portal-calendar-section, .portal-calendar-detail { padding: var(--space-5); }
    .portal-calendar-heading > p { display: none; }
}

/* ==========================================================================
   15. Encaixes de agenda gerados por datas comemorativas
   ========================================================================== */

.schedule-adjustments {
    margin: var(--space-5) 0;
    padding: var(--space-6);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-xl);
    background: var(--info-soft);
}

#ajustes-agenda { scroll-margin-top: var(--space-6); }
#ajustes-agenda:target { box-shadow: 0 0 0 3px var(--color-brand-border); }

.schedule-adjustments.has-conflict { border-color: var(--warn-border); background: var(--warn-soft); }
.schedule-adjustments.is-persistent { margin-bottom: var(--space-6); }

.schedule-adjustments-head,
.schedule-adjustment-row,
.schedule-adjustments-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.schedule-adjustments-head { align-items: flex-start; margin-bottom: var(--space-4); }
.schedule-adjustments-head h3 { margin: 3px 0 var(--space-1); }
.schedule-adjustments-head p,
.schedule-adjustment-copy p { margin: 0; color: var(--muted); font-size: var(--text-small); line-height: 1.5; }

.schedule-adjustments-list { display: flex; flex-direction: column; gap: var(--space-2); }

.schedule-adjustment-row {
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.schedule-adjustment-row.is-conflito { border-color: var(--warn-border); }
.schedule-adjustment-copy { flex: 1; min-width: 0; }
.schedule-adjustment-copy strong { display: block; margin-bottom: var(--space-1); color: var(--ink); font-size: var(--text-small); }
.schedule-adjustment-copy small { display: block; margin-top: var(--space-2); color: var(--muted); font-weight: 500; }

.schedule-adjustment-date { display: flex; min-width: 170px; flex-direction: column; gap: var(--space-1); }
.schedule-adjustment-date span { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.schedule-adjustment-status {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.schedule-adjustment-row.is-aceito .schedule-adjustment-status { background: var(--ok-soft); color: var(--ok); }
.schedule-adjustments-actions { padding-top: var(--space-2); }
.schedule-adjustments-actions > span { max-width: 62ch; color: var(--muted); font-size: var(--text-caption); }

@media (max-width: 760px) {
    .schedule-adjustments-head,
    .schedule-adjustment-row,
    .schedule-adjustments-actions { align-items: stretch; flex-direction: column; }
    .schedule-adjustment-date { width: 100%; }
}

/* ==========================================================================
   16. Auditoria interna do portal
   ========================================================================== */

.portal-admin-summary { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }

.portal-admin-state {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.portal-admin-state.is-opened { border-color: var(--ok-border); background: var(--ok-soft); }
.portal-admin-state.is-waiting { border-color: var(--warn-border); background: var(--warn-soft); }

.portal-admin-state-icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ok);
    font-size: 15px;
    font-weight: 600;
}

.portal-admin-state.is-waiting .portal-admin-state-icon { color: var(--warn); }
.portal-admin-state > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }

.portal-admin-state small,
.portal-admin-metrics small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.portal-admin-state strong { color: var(--ink); font-size: var(--text-h3); font-weight: 600; letter-spacing: -.01em; }
.portal-admin-state span { color: var(--muted); font-size: 11px; }

.portal-admin-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--line);
}

.portal-admin-metrics > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
}

.portal-admin-metrics strong { color: var(--ink); font-size: var(--text-small); font-weight: 600; overflow-wrap: break-word; }
.portal-admin-metrics span { color: var(--muted); font-size: 11px; line-height: 1.4; }

.portal-audit-panel { margin-top: var(--space-5); }

.portal-audit-timeline {
    position: relative;
    display: grid;
    margin-top: var(--space-4);
    padding-left: var(--space-2);
}

.portal-audit-timeline::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 14px;
    width: 1px;
    background: var(--line-strong);
}

.portal-audit-event {
    position: relative;
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr);
    gap: var(--space-4);
    padding-bottom: var(--space-4);
}

.portal-audit-event:last-child { padding-bottom: 0; }

.portal-audit-dot {
    position: relative;
    z-index: var(--z-base);
    width: 13px;
    height: 13px;
    margin-top: 5px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: var(--muted-light);
    box-shadow: 0 0 0 1px var(--line-strong);
}

.portal-audit-event.is-open .portal-audit-dot,
.portal-audit-event.is-identify .portal-audit-dot { background: var(--info); }
.portal-audit-event.is-approve .portal-audit-dot,
.portal-audit-event.is-complete .portal-audit-dot { background: var(--ok); }
.portal-audit-event.is-adjust .portal-audit-dot { background: var(--warn); }
.portal-audit-event.is-create .portal-audit-dot { background: var(--color-brand); }

.portal-audit-event-body { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.portal-audit-event:last-child .portal-audit-event-body { border-bottom: 0; }
.portal-audit-event-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.portal-audit-event-head strong { color: var(--ink); font-size: var(--text-small); font-weight: 500; }
.portal-audit-event-head time { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.portal-audit-event-body p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.portal-audit-event-body p span { color: var(--ink-soft); font-weight: 500; }

.portal-link-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.portal-link-copy-row input { font-family: var(--font-mono); font-size: var(--text-small); }
.portal-link-copy-row .btn { justify-content: center; min-width: 118px; }
.portal-active-link .helper { align-self: center; color: var(--muted); font-size: 11px; }

@media (max-width: 850px) {
    .portal-admin-metrics { grid-template-columns: 1fr 1fr; }
    .portal-audit-event-head { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
}

@media (max-width: 520px) {
    .portal-admin-metrics { grid-template-columns: 1fr; }
    .portal-admin-state { align-items: flex-start; }
    .portal-link-copy-row { grid-template-columns: 1fr; }
    .portal-link-copy-row .btn { width: 100%; }
}

/* ==========================================================================
   17. Identidade dos canais
   Os logos entram monocromaticos: nesta interface a cor significa estado
   (aprovado, alerta, marca), e logo colorido competiria com esse significado.
   ========================================================================== */

.channel-mark { display: inline-flex; align-items: center; gap: .42em; min-width: 0; vertical-align: middle; }
.channel-mark > span { min-width: 0; }

.channel-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    fill: currentColor;
    color: var(--muted-light);
}

.switch-card-copy strong .channel-icon,
.section-head h2 .channel-icon { font-size: .88em; color: var(--muted); }
.portal-channel .channel-icon { color: inherit; }
.portal-calendar-item small .channel-mark { max-width: 100%; }

.portal-calendar-item small .channel-mark > span {
    overflow: hidden;
    font-size: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-detail-meta .channel-mark { display: inline-flex; }
.portal-undated .channel-mark { font-weight: 500; }

/* ==========================================================================
   18. Achados do QA editorial
   ========================================================================== */

.qa-finding-item { border-left: 3px solid transparent; padding-left: var(--space-4); }
.qa-finding-item.is-alerta { border-left-color: var(--warn); }
.qa-finding-item.is-critico { border-left-color: var(--danger); }
.qa-finding-item p { max-width: 82ch; color: var(--muted); line-height: 1.5; }

.qa-finding-item small {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: 6px;
    color: var(--muted);
    font-size: var(--text-caption);
}

.qa-finding-item .badge { flex: 0 0 auto; }
.qa-finding-item.is-critico .badge { background: var(--danger-soft); color: var(--danger); }
.qa-finding-item.is-alerta .badge { background: var(--warn-soft); color: var(--warn); }

@media (max-width: 650px) {
    .qa-finding-item { align-items: flex-start; flex-direction: column; }
    .qa-finding-item .badge { order: -1; }
}

/* ==========================================================================
   19. Usuarios e permissoes
   O diretorio e feito para varrer com o olho: uma pessoa por linha, papel e
   acesso como selo. Editar e mexer em permissao acontece no painel da pessoa,
   nao dentro da celula da tabela.
   ========================================================================== */

/* --- Disco com a inicial: ancora visual da linha --- */

.person-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-brand-muted);
    color: var(--color-brand-text);
    font-size: var(--text-caption);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.person-avatar.large { width: 52px; height: 52px; font-size: var(--text-h2); }

/* --- Painel da pessoa --- */

.user-detail-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--line);
}

.user-detail-copy { flex: 1 1 auto; min-width: 0; }
.user-detail-copy h2 { margin: var(--space-1) 0 0; }
.user-detail-head > .actions { flex: 0 0 auto; }

/* Separacao por respiro, nao por ponto: qualquer separador desenhado no item
   reaparece sozinho no comeco da linha quando a lista quebra. */
.user-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: var(--text-small);
}

.user-detail-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.user-detail h3 { margin-bottom: var(--space-4); }
.user-detail .callout { margin-bottom: var(--space-6); }

/* Papel como selo: o roxo e do administrador, que enxerga tudo. */
.badge.papel-admin { background: var(--color-brand-subtle); color: var(--color-brand-text); }
.badge.papel-qualidade { background: var(--info-soft); color: var(--info); }
.badge.papel-social { background: var(--surface-soft); color: var(--muted); }

.switch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); }

/* --- Permissoes --- */

.perm-groups { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }

.perm-group {
    padding: var(--space-4) var(--space-5) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}

.perm-group-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.perm-group-head h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--text-small); }

.perm-count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.perm-group-head .btn { flex: 0 0 auto; }
.perm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--space-2); }

/* O seletor base de label empilha em coluna; a marca precisa ficar ao lado. */
.perm-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.perm-item:hover { border-color: var(--muted-light); }
.perm-item:has(input:checked) { border-color: var(--color-brand-border); background: var(--color-brand-subtle); }
.perm-item:has(input:disabled) { cursor: default; background: var(--surface-soft); }
.perm-item:has(input:focus-visible) { outline: 2px solid var(--color-brand); outline-offset: 2px; }

.perm-item input {
    width: 16px;
    min-height: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--color-brand);
}

.perm-item-copy { display: grid; gap: 2px; min-width: 0; }
.perm-item-copy strong { color: var(--ink); font-size: var(--text-small); font-weight: 600; line-height: 1.35; }
.perm-item-copy .eyebrow { margin-bottom: 2px; font-size: 10px; }

/* O nome interno e referencia, nao leitura: cortado, todo bloco fica da mesma
   altura e a grade para de serrilhar. O valor inteiro vai no title. */
.perm-item-copy code {
    display: block;
    overflow: hidden;
    color: var(--muted-light);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A permissao de tela abre o grupo: ela e a chave, o resto sao acoes dentro dela. */
.perm-item.is-page { grid-column: 1 / -1; border-style: dashed; }
.perm-item.is-page:has(input:checked) { border-style: solid; }
.perm-item.is-page .eyebrow { color: var(--muted); }

/* Barra de salvar que acompanha a rolagem: a lista de permissoes e longa. */
.perm-actions {
    position: sticky;
    bottom: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.perm-actions .hint { margin: 0; }
.perm-actions strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- Diretorio --- */

.people-toolbar { flex: 0 0 auto; }
.people-toolbar input { width: 300px; max-width: 100%; }

/* Faixa da equipe dentro da propria tabela: agrupa sem quebrar as colunas. */
.user-table .team-row th {
    padding: var(--space-3) var(--space-5);
    background: var(--surface-soft);
    color: var(--ink-soft);
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.user-table .team-row span { margin-left: var(--space-2); color: var(--muted); font-weight: 500; }
.user-table tbody + tbody .team-row th { border-top: 1px solid var(--line); }

/* Sem campo em celula, a tabela nao precisa dos 860px do primitivo. */
.user-table { min-width: 620px; }
.user-table td { vertical-align: middle; }
.user-table .col-action { width: 1%; text-align: right; white-space: nowrap; }
.user-table .col-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.muted-cell { color: var(--muted-light); }

/* A busca esconde por atributo; `tr` e `tbody` tem display proprio no UA. */
.user-table tr[hidden], .user-table tbody[hidden] { display: none; }

.user-table tbody tr.is-selected { background: var(--color-brand-subtle); }
.user-table tbody tr.is-selected .person-avatar { background: var(--color-brand); color: var(--color-brand-contrast); }

.person-cell { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.person-copy { display: grid; gap: 1px; min-width: 0; }
.person-copy strong { color: var(--ink); font-size: var(--text-small); line-height: 1.35; }
.person-copy small { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.4; }
.person-copy .person-flag { color: var(--warn); font-weight: 500; }

@media (max-width: 860px) {
    .user-detail-head { flex-wrap: wrap; }
    /* "Voltar para a lista" e link de saida: esticado no meio da tela parece
       botao principal, que ele nao e. Fica no canto, do tamanho do texto. */
    .user-detail-head > .actions { width: 100%; justify-content: flex-start; }
    .user-detail-head > .actions .btn { flex: 0 0 auto; padding-left: 0; }
    .user-detail-meta { gap: var(--space-1) var(--space-4); }

    .section-head .people-toolbar { width: 100%; }
    .people-toolbar input { width: 100%; }

    .perm-group { padding: var(--space-4); }
    .perm-items { grid-template-columns: 1fr; }
    .perm-actions { flex-direction: column; align-items: stretch; }
    .perm-actions .btn { width: 100%; }
    .perm-actions .hint { text-align: center; }
}