@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════ */
:root {
    --bg-base:        #EEF6F0;
    --bg-surface:     #ffffff;
    --bg-elevated:    #ffffff;
    --bg-overlay:     rgba(255,255,255,0.92);
    --bg-hover:       rgba(15,77,55,0.05);
    --bg-glass:       rgba(255,255,255,0.78);

    --border-faint:   rgba(15,77,55,0.05);
    --border-subtle:  rgba(15,77,55,0.09);
    --border-default: rgba(15,77,55,0.14);
    --border-strong:  rgba(15,77,55,0.26);

    --text-primary:   #122A22;
    --text-secondary: #5C7A6C;
    --text-tertiary:  #5F7568; /* escurecido de #8CA396 (~2.7:1) p/ ~4.96:1 contra --bg-surface — WCAG AA */
    --text-muted:     #5F7568; /* idem — era #A9BCB1 (~1.9:1); alinhado ao tertiary p/ permanecer legível */

    --accent:         #1E9E5C;
    --accent-light:   #26B96B;
    --accent-muted:   rgba(30,158,92,0.10);
    --accent-glow:    rgba(30,158,92,0.28);
    --on-accent:      #FFFFFF;

    --sidebar-bg:          #FFFFFF;
    --sidebar-text:        #5C7A6C;
    --sidebar-text-dim:    #9CB3A6;
    --sidebar-text-strong: #122A22;
    --sidebar-border:      rgba(15,77,55,0.08);
    --sidebar-hover-bg:    rgba(15,77,55,0.05);
    --sidebar-active-bg:   #1E9E5C;
    --sidebar-active-text: #FFFFFF;
    --sidebar-accent:      #FFC94A;

    --lime:        #FFC94A;
    --lime-soft:   #FFE9B3;
    --lime-ink:    #4A3200;
    --lime-border: rgba(255,201,74,0.4);

    --rail-bg:          linear-gradient(180deg, #1B4D3A 0%, #0E3323 100%);
    --rail-text-dim:    #9FC3B0;
    --rail-hover-bg:    rgba(255,255,255,0.10);
    --rail-active-bg:   #FFFFFF;
    --rail-active-text: #12492F;
    --rail-border:      rgba(255,255,255,0.08);

    --emerald:        #1E9E5C;
    --emerald-muted:  rgba(30,158,92,0.10);
    --emerald-border: rgba(30,158,92,0.24);
    --amber:          #d97706;
    --amber-muted:    rgba(217,119,6,0.10);
    --amber-border:   rgba(217,119,6,0.24);
    --rose:           #e11d48;
    --rose-muted:     rgba(225,29,72,0.10);
    --rose-border:    rgba(225,29,72,0.24);
    --violet:         #7c3aed;
    --violet-muted:   rgba(124,58,237,0.10);
    --violet-border:  rgba(124,58,237,0.24);
    --sky:            #0d9488;
    --sky-muted:      rgba(13,148,136,0.10);
    --sky-border:     rgba(13,148,136,0.24);
    --neutral-muted:  rgba(15,77,55,0.05);

    /* Acentos do dashboard — verde + dourado */
    --mint-bg:         #FFC94A;
    --mint-bg-soft:    #FFE9B3;
    --mint-text:       #4A3200;
    --mint-accent:     #1E9E5C;
    --charcoal-bg:     #12492F;
    --charcoal-bg-alt: #1B5B3B;
    --charcoal-text:        #FFFFFF;
    --charcoal-text-dim:    #B7D8C6;

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    --shadow-sm:  0 2px 10px rgba(18,74,52,0.05);
    --shadow-md:  0 12px 28px rgba(18,74,52,0.08);
    --shadow-lg:  0 20px 46px rgba(18,74,52,0.12);
    --shadow-glow: 0 0 32px rgba(30,158,92,0.22);

    --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    --drawer-w: 280px;
    --rail-w: 216px;
    --topbar-h: 64px;
    --bottombar-h: 46px;
}

/* ══════════════════════════════════════════
   DARK THEME TOKENS
══════════════════════════════════════════ */
:root[data-theme="dark"] {
    --bg-base:        #0F1813;
    --bg-surface:     #16211B;
    --bg-elevated:    #1C2921;
    --bg-overlay:     rgba(22,33,27,0.92);
    --bg-hover:       rgba(255,255,255,0.06);
    --bg-glass:       rgba(15,24,19,0.76);

    --border-faint:   rgba(255,255,255,0.06);
    --border-subtle:  rgba(255,255,255,0.10);
    --border-default: rgba(255,255,255,0.16);
    --border-strong:  rgba(255,255,255,0.30);

    --text-primary:   #EAF3EC;
    --text-secondary: #A3BBAB;
    --text-tertiary:  #7B9484;
    --text-muted:     #7B9484; /* era #526158 (~2.5:1 contra --bg-surface) — alinhado ao tertiary p/ ~5:1, WCAG AA */

    --mint-bg:         #FFC94A;
    --mint-bg-soft:    #4A3200;
    --mint-text:       #FFE9B3;
    --mint-accent:     #33C574;
    --charcoal-bg:     #0E3323;
    --charcoal-bg-alt: #144230;
    --charcoal-text:        #FFFFFF;
    --charcoal-text-dim:    #9CA3AF;

    --accent:         #33C574;
    --accent-light:   #4FE092;
    --accent-muted:   rgba(51,197,116,0.14);
    --accent-glow:    rgba(51,197,116,0.24);
    --on-accent:      #08150F;

    --sidebar-bg:          #142019;
    --sidebar-text:        #90A899;
    --sidebar-text-dim:    #55685D;
    --sidebar-text-strong: #F1F7F2;
    --sidebar-border:      rgba(255,255,255,0.08);
    --sidebar-hover-bg:    rgba(255,255,255,0.06);
    --sidebar-active-bg:   #33C574;
    --sidebar-active-text: #08150F;

    --emerald:        #33C574;
    --emerald-muted:  rgba(51,197,116,0.14);
    --emerald-border: rgba(51,197,116,0.30);
    --amber:          #f59e0b;
    --amber-muted:    rgba(245,158,11,0.14);
    --amber-border:   rgba(245,158,11,0.30);
    --rose:           #fb7185;
    --rose-muted:     rgba(251,113,133,0.14);
    --rose-border:    rgba(251,113,133,0.30);
    --violet:         #a78bfa;
    --violet-muted:   rgba(167,139,250,0.16);
    --violet-border:  rgba(167,139,250,0.30);
    --sky:            #2dd4bf;
    --sky-muted:      rgba(45,212,191,0.14);
    --sky-border:     rgba(45,212,191,0.30);
    --neutral-muted:  rgba(255,255,255,0.055);

    --shadow-sm:  0 2px 8px rgba(0,0,0,0.20);
    --shadow-md:  0 10px 30px rgba(0,0,0,0.24);
    --shadow-lg:  0 20px 50px rgba(0,0,0,0.34);
    --shadow-glow: 0 0 32px rgba(51,197,116,0.24);
}
:root[data-theme="dark"] .app-shell {
    background: linear-gradient(180deg, #101914 0%, #0A100C 100%);
}
:root[data-theme="dark"] {
    --rail-bg:          linear-gradient(180deg, #0E2A1D 0%, #081A11 100%);
    --rail-text-dim:    #6E9280;
    --rail-hover-bg:    rgba(255,255,255,0.08);
    --rail-active-bg:   #33C574;
    --rail-active-text: #08150F;
    --rail-border:      rgba(255,255,255,0.06);
}

*, *::before, *::after {
    margin: 0; padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════
   APP SHELL — LAYOUT GRID
══════════════════════════════════════════ */
.app-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr var(--bottombar-h);
    height: 100vh;
    background: var(--bg-base);
}

/* ══════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════ */
.topbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px 0 26px;
    margin-left: var(--rail-w);
    background: var(--bg-glass);
    border-bottom: 1px solid var(--border-faint);
    backdrop-filter: blur(12px);
    z-index: 100;
    position: relative;
}
.topbar-left .logo-mark-topbar,
.topbar-left .topbar-title { display: none; }
.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.topbar-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.topbar-profile-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 6px 5px 6px;
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    margin-left: 2px;
}
.topbar-profile-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent-muted);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.topbar-profile-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    padding-right: 2px;
}
.topbar-profile-text b { font-size: 12px; font-weight: 700; color: var(--text-primary); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-profile-text small { font-size: 10.5px; color: var(--text-tertiary); font-weight: 500; }
.topbar-profile-logout {
    width: 28px; height: 28px;
    border: none;
}
@media (max-width: 900px) {
    .topbar-profile-text { display: none; }
}

.logo-mark {
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}
.logo-mark-topbar { width: 30px; height: 30px; }
.logo-mark-bottombar { width: 18px; height: 18px; }

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.topbar-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
}
.topbar-new-btn:hover {
    background: var(--accent-light);
    box-shadow: 0 0 16px var(--accent-glow);
    transform: translateY(-1px);
}

.hamburger-btn {
    width: 34px; height: 34px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
}
.hamburger-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.theme-toggle-btn {
    width: 34px; height: 34px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
}
.theme-toggle-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: block; }

/* ══════════════════════════════════════════
   BADGE
══════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.badge-purple {
    background: var(--violet-muted);
    color: var(--violet);
    border: 1px solid var(--violet-border);
}
.badge-green  { background: var(--emerald-muted); color: var(--emerald); border: 1px solid var(--emerald-border); }
.badge-yellow { background: var(--amber-muted);   color: var(--amber);   border: 1px solid var(--amber-border); }
.badge-gray   { background: var(--neutral-muted); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.badge-blue   { background: var(--sky-muted);     color: var(--sky);     border: 1px solid var(--sky-border); }
.badge-red    { background: var(--rose-muted);    color: var(--rose);    border: 1px solid var(--rose-border); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
}
.btn-ghost:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.export-dropdown { position: relative; }
.export-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 270px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 500;
}
.export-menu.open { display: block; }
.export-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.export-menu-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.export-menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.export-menu-item:disabled:hover { background: transparent; color: var(--text-secondary); }

/* ══════════════════════════════════════════
   WORKSPACE
══════════════════════════════════════════ */
.workspace {
    overflow: hidden;
    background: transparent;
    display: flex;
    flex-direction: column;
    margin-left: var(--rail-w);
}

/* ══════════════════════════════════════════
   RAIL (navegação fixa)
══════════════════════════════════════════ */
.rail {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: var(--rail-w);
    background: var(--rail-bg);
    border-right: 1px solid var(--rail-border);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 22px 16px 20px;
    gap: 10px;
    z-index: 300;
    border-radius: 0 28px 28px 0;
}
.rail-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 20px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--rail-border);
}
.rail-logo {
    width: 30px; height: 30px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}
.rail-brand-text {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--rail-active-text, #fff);
}
.rail-icons { display: flex; flex-direction: column; gap: 4px; }
.rail-icon {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    color: var(--rail-text-dim);
    display: flex; align-items: center; justify-content: flex-start;
    gap: 12px;
    padding: 0 16px;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}
.rail-icon svg {
    flex-shrink: 0;
    box-sizing: content-box;
    padding: 5px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.09);
    transition: background var(--transition);
}
.rail-icon[aria-expanded="true"] svg,
.rail-icon.active svg { background: rgba(18,73,47,0.10); }
.rail-label {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rail-icon:hover { background: var(--rail-hover-bg); color: #FFFFFF; }
.rail-icon[aria-expanded="true"] {
    background: var(--rail-active-bg);
    color: var(--rail-active-text);
    box-shadow: var(--shadow-sm);
}
.rail-spacer { flex: 1; }

/* ══════════════════════════════════════════
   UPLOAD ZONE / INÍCIO
══════════════════════════════════════════ */
.upload-zone {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    height: 100%;
    padding: 28px 36px 36px;
    overflow-y: auto;
}
.upload-zone input[type="file"] { display: none; }

.home-body-grid { display: grid; grid-template-columns: 1fr; align-items: start; }

.home-upload-card { display: flex; flex-direction: column; gap: 16px; padding: 22px; margin-bottom: 0; }
.home-upload-step h3 { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.home-upload-step p { font-size: 12px; color: var(--text-tertiary); margin-bottom: 10px; line-height: 1.6; }
.home-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-faint);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    transition: border-color var(--transition);
    outline: none;
}
.home-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); }

.profile-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) { .profile-selector { grid-template-columns: 1fr; } }
.profile-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-faint);
    background: var(--bg-surface);
    cursor: pointer;
    transition: all var(--transition);
}
.profile-card:hover { border-color: var(--border-default); }
.profile-card.active { border-color: var(--accent); background: var(--accent-muted); }
.profile-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.profile-card-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.profile-card-desc { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; }
.profile-card-tag {
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.profile-card-tag-cheap    { background: var(--accent-muted); color: var(--accent); }
.profile-card-tag-balanced { background: var(--amber-muted);  color: var(--amber); }
.profile-card-tag-premium  { background: var(--bg-hover);     color: var(--text-secondary); }
.home-analyze-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    transition: all var(--transition);
}
.home-analyze-btn:hover { background: var(--accent-light); box-shadow: 0 0 16px var(--accent-glow); }

.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 30px;
    border: 2px dashed var(--border-default);
    border-radius: var(--radius-xl);
    width: 100%;
    cursor: pointer;
    transition: all var(--transition-slow);
    text-align: center;
    background: var(--bg-surface);
    position: relative;
    overflow: hidden;
}
.upload-dropzone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--accent-muted) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-slow);
}
.upload-dropzone:hover { border-color: var(--accent); }
.upload-dropzone:hover::before { opacity: 1; }
.upload-icon {
    width: 64px; height: 64px;
    border-radius: var(--radius-lg);
    background: var(--accent-muted);
    border: 1px solid var(--border-default);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    position: relative; z-index: 1;
}
.upload-dropzone h3 { font-size: 17px; font-weight: 700; position: relative; z-index: 1; }
.upload-dropzone p { font-size: 13px; color: var(--text-secondary); position: relative; z-index: 1; }
.upload-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    position: relative; z-index: 1;
    max-width: 340px;
    line-height: 1.5;
}

.api-key-notice {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid;
    font-size: 13px;
}
.api-key-notice.notice-info    { background: var(--accent-muted);  border-color: var(--border-default); color: var(--accent); }
.api-key-notice.notice-success { background: var(--emerald-muted); border-color: var(--emerald-border); color: var(--emerald); }
.notice-link { cursor: pointer; text-decoration: underline; }

.transcribe-status { font-size: 12px; margin-left: 10px; color: var(--text-tertiary); }
.transcribe-status.status-info    { color: var(--accent); }
.transcribe-status.status-success { color: var(--emerald); }
.transcribe-status.status-error   { color: var(--rose); }

/* ══════════════════════════════════════════
   PROCESSING
══════════════════════════════════════════ */
.processing-container {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;
}
.processing-glow {
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(42,93,151,0.10) 0%, transparent 70%);
    pointer-events: none;
    animation: glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse { 0%,100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }
.processing-elapsed { font-size: 12px; font-family: var(--font-mono, monospace); color: var(--text-tertiary); position: relative; z-index: 1; margin-top: -4px; }

/* ── FLUXO journey (visualização de progresso do processamento) ── */
.fluxo-journey {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 640px;
    position: relative;
    z-index: 1;
}
.processing-logo {
    display: block;
    width: 130px;
    height: auto;
    object-fit: contain;
    margin-bottom: 4px;
}
.fluxo-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-transform: uppercase;
}
.fluxo-desc {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    max-width: 380px;
    margin-top: -6px;
}
.fluxo-cancel-btn {
    margin-top: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.fluxo-cancel-btn:hover { color: var(--rose); border-color: var(--rose-border); background: var(--rose-muted); }

/* ══════════════════════════════════════════
   DOCUMENT CONTAINER
══════════════════════════════════════════ */
.document-container {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.project-header {
    padding: 14px 36px 0;
    flex-shrink: 0;
}
.project-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.project-type-badge {
    display: flex;
    align-items: center;
}
.project-header-info h1 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    color: var(--text-primary);
}
.project-header-info p {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 400;
}

/* ══════════════════════════════════════════
   HEADER TOOLBAR — breadcrumbs, status, avatares
══════════════════════════════════════════ */
.header-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.header-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    min-width: 0;
}
.breadcrumb-root { color: var(--text-tertiary); white-space: nowrap; }
.breadcrumb-sep { color: var(--text-muted); }
.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.header-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
}

.avatar-group {
    display: flex;
    align-items: center;
}
.avatar-group-item {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--bg-base);
    background: linear-gradient(135deg, var(--accent) 0%, var(--sky) 100%);
    box-shadow: var(--shadow-sm);
    margin-left: -8px;
    flex-shrink: 0;
}
.avatar-group-item:first-child { margin-left: 0; }
.avatar-group-item:nth-child(2) { background: linear-gradient(135deg, var(--sky) 0%, var(--emerald) 100%); }
.avatar-group-item:nth-child(3) { background: linear-gradient(135deg, var(--emerald) 0%, var(--amber) 100%); }
.avatar-group-count {
    background: var(--mint-bg);
    color: var(--mint-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}
@media (max-width: 680px) {
    .header-toolbar { padding-left: 0; }
    .breadcrumb-root { display: none; }
    .breadcrumb-sep { display: none; }
}

/* ══════════════════════════════════════════
   DOC BODY — STEPS SIDEBAR + MAIN COLUMN
══════════════════════════════════════════ */
.doc-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.doc-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.steps-nav {
    display: flex;
    flex-direction: column;
    width: 232px;
    flex-shrink: 0;
    gap: 2px;
    padding: 14px 14px 24px 36px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}
.steps-nav::-webkit-scrollbar { display: block; width: 6px; }
.steps-nav::-webkit-scrollbar-track { background: transparent; }
.steps-nav::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-full); }

.tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border-radius: var(--radius-full);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    opacity: 0.6;
    transition: all var(--transition);
}
.tab-btn:hover { opacity: 1; background: var(--bg-hover); }
.tab-btn.step-done { opacity: 0.8; }
.tab-btn.active {
    opacity: 1;
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    position: relative;
}
.tab-btn.active::before {
    content: '';
    position: absolute;
    left: -8px; top: 50%;
    width: 3px; height: 60%;
    transform: translateY(-50%);
    border-radius: var(--radius-full);
    background: var(--mint-accent);
}

.tab-btn-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-default);
    transition: all var(--transition);
}
.tab-btn.active .tab-btn-circle {
    color: var(--sidebar-active-text);
    background: var(--accent);
    border-color: var(--accent);
}
.tab-btn-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}
.tab-btn.active .tab-btn-label {
    color: var(--text-primary);
    font-weight: 700;
}

.content-header-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    column-gap: 14px;
    row-gap: 2px;
    padding: 14px 40px 12px;
    flex-shrink: 0;
}
.content-header-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.content-header-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    max-width: 480px;
    flex-basis: 100%;
    order: 3;
}
.content-header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.tab-nav-arrow {
    width: 24px; height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
}
.tab-nav-arrow:hover { background: var(--accent-muted); color: var(--accent); border-color: var(--accent); }

/* ══════════════════════════════════════════
   DOC SCROLL & TAB CONTENT
══════════════════════════════════════════ */
.doc-scroll {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--border-subtle) transparent;
}
.doc-scroll::-webkit-scrollbar { width: 5px; }
.doc-scroll::-webkit-scrollbar-track { background: transparent; }
.doc-scroll::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 4px; }

.tab-content {
    padding: 6px 40px 24px;
    animation: tab-fade 200ms ease;
}
@keyframes tab-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.doc-footer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 40px 32px;
    margin-top: 12px;
    border-top: 1px solid var(--border-faint);
}
.step-nav-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
}
.step-nav-btn-primary:hover {
    background: var(--accent-light);
    box-shadow: 0 0 16px var(--accent-glow);
}

/* ══════════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════════ */
.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}
.section-header + .section-header { margin-top: 32px; }
.section-icon {
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.section-icon-accent  { background: var(--accent-muted);  border: 1px solid var(--border-default); }
.section-icon-emerald { background: var(--emerald-muted); border: 1px solid var(--emerald-border); }
.section-icon-amber   { background: var(--amber-muted);   border: 1px solid var(--amber-border); }
.section-icon-violet  { background: var(--violet-muted);  border: 1px solid var(--violet-border); }
.section-icon-sky     { background: var(--sky-muted);     border: 1px solid var(--sky-border); }
.section-icon-rose    { background: var(--rose-muted);    border: 1px solid var(--rose-border); }

.section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.section-subtitle {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-top: 1px;
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, var(--border-faint), transparent);
    margin: 32px 0;
}
/* Floating cards already read as separate blocks — a hairline between two of them is noise */
.doc-block + .section-divider { display: none; }

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card {
    background: var(--bg-surface);
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-bottom: 20px;
    transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-lg); }
.card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.75;
}
.card p strong { color: var(--text-primary); font-weight: 600; }

.card-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.card-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.card-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* ══════════════════════════════════════════
   VISÃO GERAL — HERO METRIC + FLAT BLOCKS
══════════════════════════════════════════ */
.visao-hero {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 20px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-faint);
}
.visao-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}
.visao-hero-compare { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.visao-hero-old {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: var(--neutral-muted);
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
    text-decoration-thickness: 2px;
}
.visao-hero-arrow { font-size: 18px; color: var(--text-tertiary); }
.visao-hero-new,
.visao-hero-single {
    display: inline-flex;
    align-items: center;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--mint-text);
    background: var(--mint-bg);
    padding: 6px 20px;
    border-radius: var(--radius-full);
}
.visao-hero-desc { font-size: 12px; color: var(--text-tertiary); }
.visao-meta-row { display: flex; flex-wrap: wrap; gap: 24px; }
.visao-meta-item { display: flex; flex-direction: column; gap: 2px; }
.visao-meta-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.visao-meta-value { font-size: 15px; font-weight: 700; color: var(--text-primary); }

/* Visão Geral — capa executiva (hero com anel de progresso + stats + donut + texto + atores) */
.visao-overview-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 34px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    color: var(--mint-text);
    background: var(--mint-bg);
    box-shadow: var(--shadow-lg);
}
.visao-overview-hero--warning {
    color: var(--amber);
    background: var(--amber-muted);
}
.visao-overview-hero::after {
    content: "";
    position: absolute;
    top: -50%; right: -10%;
    width: 55%; height: 160%;
    background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 70%);
    pointer-events: none;
}
.visao-overview-hero-main { position: relative; z-index: 1; min-width: 0; }
.visao-overview-hero-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: currentColor;
    opacity: 0.72;
    margin-bottom: 10px;
}
.visao-overview-hero-value {
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 8px;
    color: currentColor;
}
.visao-overview-hero-caption { font-size: 13px; color: currentColor; opacity: 0.68; }

.visao-hero-gauge {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.visao-gauge-svg { display: block; }
.visao-hero-gauge-ring-label {
    position: absolute;
    top: 0; left: 0;
    width: 108px; height: 108px;
    display: flex; align-items: center; justify-content: center;
}
.visao-hero-gauge-ring-label strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: currentColor; }
.visao-hero-gauge--pending .visao-hero-gauge-ring-label strong { font-size: 26px; color: currentColor; opacity: 0.5; }
.visao-hero-gauge-caption {
    font-size: 11px;
    text-align: center;
    line-height: 1.4;
    color: currentColor;
    opacity: 0.7;
}

.visao-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
.visao-stat-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg-surface);
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.visao-stat-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.visao-stat-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.visao-stat-icon--amber  { background: var(--amber-muted);  border: 1px solid var(--amber-border); }
.visao-stat-icon--violet { background: var(--violet-muted); border: 1px solid var(--violet-border); }
.visao-stat-icon--sky    { background: var(--sky-muted);    border: 1px solid var(--sky-border); }
.visao-stat-value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2; }
.visao-stat-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); margin-top: 1px; }

.visao-objetivo-card { margin-bottom: 20px; }

/* ══════════════════════════════════════════
   BENTO GRID — Visão Geral
══════════════════════════════════════════ */
.bento-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
    align-items: start;
}
.bento-row--feature { grid-template-columns: 1fr 0.85fr 1.35fr; align-items: stretch; }
.bento-row--secondary { grid-template-columns: repeat(3, 1fr); }
.bento-row--priority { grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.bento-row--priority-3 { grid-template-columns: repeat(3, 1fr); }
.bento-row--full { display: block; }

.visao-sipoc-block { margin-bottom: 20px; }

.bento-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--bg-surface);
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-xl);
    padding: 20px 22px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.bento-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.bento-head { display: flex; align-items: flex-start; gap: 10px; }
.bento-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.bento-icon--amber  { background: var(--amber-muted);  color: var(--amber); }
.bento-icon--violet { background: var(--violet-muted); color: var(--violet); }
.bento-icon--sky    { background: var(--sky-muted);    color: var(--sky); }
.bento-icon--rose   { background: var(--rose-muted);   color: var(--rose); }
.bento-icon--lime   { background: var(--mint-bg-soft); color: var(--mint-accent); }
.bento-head-titles { flex: 1; min-width: 0; }
.bento-head-title { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.bento-head-subtitle { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.bento-head-actions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; padding-top: 8px; }
.bento-action-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
.bento-head-actions--floating {
    position: absolute;
    top: 22px; right: 24px;
    z-index: 1;
}
.bento-head-actions--floating .bento-action-dot { background: currentColor; opacity: 0.4; }

.bento-stat-value { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; color: var(--text-primary); }

.bento-mini-stats { display: flex; gap: 24px; margin-top: 2px; }
.bento-mini-stat { flex: 1; min-width: 0; }
.bento-mini-stat-value { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; color: var(--text-primary); }
.bento-mini-stat-label { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); margin-top: 2px; }

/* Cards de prioridade — Resumo Operacional, Objetivo de Negócio, SIPOC, Riscos de Compliance */
.bento-card--priority { box-shadow: var(--shadow-lg); }

.bento-card-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Cards financeiros (economia, payback, custo por transação) — menos evidentes */
.visao-overview-hero--muted {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    padding: 18px 22px;
}
.visao-overview-hero--muted::after { display: none; }
.visao-overview-hero--muted .visao-overview-hero-eyebrow { font-size: 10.5px; opacity: 0.55; margin-bottom: 6px; }
.visao-overview-hero--muted .visao-overview-hero-value { font-size: 24px; margin-bottom: 4px; }
.visao-overview-hero--muted .visao-overview-hero-caption { font-size: 11px; opacity: 0.7; }

.bento-card--muted { box-shadow: var(--shadow-sm); padding: 16px 20px; justify-content: center; }
.bento-card--muted .bento-stat-value { font-size: 20px; }
.bento-card--muted .bento-head-title { font-size: 12px; }
.bento-card--muted .bento-head-subtitle { font-size: 10px; }

/* Cabeçalho de contexto da linha "Sugestão de Automação" — explica que os 3 cards
   financeiros abaixo são uma projeção condicional (só se o processo for automatizado). */
.visao-automacao-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.visao-automacao-header-text { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.visao-automacao-header-icon {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    background: var(--mint-bg-soft);
}
.visao-automacao-header-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.visao-automacao-header-subtitle { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; line-height: 1.4; }
.visao-automacao-badge {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mint-accent, var(--emerald));
    background: var(--mint-bg-soft);
    border: 1px solid var(--mint-border, currentColor);
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Rótulo percentual no centro do donut de custo por transação */
.visao-donut-wrap { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.visao-donut-center-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: none;
}
.visao-donut-center-label strong { font-size: 16px; font-weight: 800; color: var(--emerald); letter-spacing: -0.02em; line-height: 1; }
.visao-donut-center-label span { font-size: 8px; color: var(--text-tertiary); margin-top: 3px; line-height: 1.2; max-width: 54px; }
.visao-legend-pct { color: var(--text-tertiary); font-weight: 600; font-size: 11.5px; margin-left: 4px; }

@media (max-width: 1100px) {
    .bento-row--priority, .bento-row--priority-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .bento-row--feature { grid-template-columns: 1fr 1fr; }
    .bento-row--feature .bento-card--wide,
    .bento-row--feature .visao-overview-hero { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
    .bento-row--feature, .bento-row--secondary, .bento-row--priority, .bento-row--priority-3 { grid-template-columns: 1fr; }
}

.visao-text-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 4px;
}
.visao-info-card {
    padding: 20px 22px;
    background: var(--bg-surface);
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
}

.visao-donut-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.visao-donut-svg { flex-shrink: 0; }
.visao-donut-legend { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 140px; }
.visao-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.visao-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.visao-legend-label { color: var(--text-secondary); flex: 1; }
.visao-legend-value { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.visao-gargalo-list { display: flex; flex-direction: column; gap: 12px; }
.visao-gargalo-item { display: flex; align-items: flex-start; gap: 10px; }
.visao-gargalo-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    margin-top: 1px;
    border-radius: var(--radius-sm);
    background: var(--rose-muted);
    color: var(--rose);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
}
.visao-gargalo-item strong { display: block; font-size: 13px; color: var(--text-primary); font-weight: 600; }
.visao-gargalo-item p { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-top: 1px; }

/* Versão compacta — cabe no card de 1/3 de largura (antigo lugar do Resumo Operacional) */
.visao-gargalo-list--compact { gap: 10px; }
.visao-gargalo-item--compact .visao-gargalo-icon { width: 20px; height: 20px; font-size: 10px; }
.visao-gargalo-item--compact strong { font-size: 12px; }
.visao-gargalo-item--compact p {
    font-size: 11px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.visao-atores-footer { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-faint); }
.visao-atores-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.visao-ator-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border-radius: var(--radius-full);
    background: var(--charcoal-bg);
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform var(--transition), box-shadow var(--transition);
}
.visao-ator-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.visao-ator-avatar {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.visao-ator-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.visao-ator-info strong { color: var(--charcoal-text); font-weight: 600; font-size: 12.5px; }
.visao-ator-info span { color: var(--charcoal-text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.doc-block {
    padding: 24px 28px;
    margin-bottom: 24px;
    background: var(--bg-surface);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition), transform var(--transition);
}
.doc-block:hover { box-shadow: var(--shadow-lg); }
.doc-block:last-child { margin-bottom: 0; }
.block-text { font-size: 14px; color: var(--text-secondary); line-height: 1.75; }
.block-text strong { color: var(--text-primary); font-weight: 600; }

.simple-list { display: flex; flex-direction: column; }
.simple-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-faint);
}
.simple-list-row:last-child { border-bottom: none; }
.simple-list-primary { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.simple-list-secondary { font-size: 13px; color: var(--text-secondary); text-align: right; }

/* Info card */
.info-card {
    background: var(--bg-surface);
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}
.info-card-row {
    display: flex;
    align-items: flex-start;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-faint);
    gap: 16px;
}
.info-card-row:last-child { border-bottom: none; }
.info-card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 140px;
    padding-top: 1px;
}
.info-card-value {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.6;
    flex: 1;
}

/* Alert card */
.alert-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: var(--shadow-sm);
}
.alert-card-accent  { background: var(--accent-muted);  border: 1px solid var(--border-subtle); color: var(--accent); }
.alert-card-emerald { background: var(--emerald-muted); border: 1px solid var(--emerald-border); color: var(--emerald); }
.alert-card-amber   { background: var(--amber-muted);   border: 1px solid var(--amber-border);   color: var(--amber); }
.alert-card-rose    { background: var(--rose-muted);    border: 1px solid var(--rose-border);    color: var(--rose); }
.alert-card-violet  { background: var(--violet-muted);  border: 1px solid var(--violet-border);  color: var(--violet); }
.alert-card-icon { font-size: 16px; flex-shrink: 0; }
.alert-card strong { font-weight: 700; display: block; margin-bottom: 2px; }

/* ══════════════════════════════════════════
   TABLES
══════════════════════════════════════════ */
.table-wrapper {
    background: var(--bg-surface);
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
thead { background: var(--neutral-muted); }
th {
    text-align: left;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-faint);
    white-space: nowrap;
}
td {
    padding: 11px 16px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-faint);
    line-height: 1.5;
    vertical-align: top;
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--transition); }
tbody tr:hover td { background: rgba(42,93,151,0.035); }
td strong { color: var(--text-primary); font-weight: 600; }
td code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    background: var(--neutral-muted);
    border: 1px solid var(--border-faint);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    color: var(--accent);
}

/* Priority badges inline */
.pri-alta   { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--rose-muted); color: var(--rose); border: 1px solid var(--rose-border); }
.pri-media  { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--amber-muted); color: var(--amber); border: 1px solid var(--amber-border); }
.pri-baixa  { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--emerald-muted); color: var(--emerald); border: 1px solid var(--emerald-border); }
.cat-seg    { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--violet-muted); color: var(--violet); border: 1px solid var(--violet-border); }
.cat-perf   { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--sky-muted); color: var(--sky); border: 1px solid var(--sky-border); }
.cat-gov    { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--amber-muted); color: var(--amber); border: 1px solid var(--amber-border); }

/* ══════════════════════════════════════════
   ATA COMPONENTS
══════════════════════════════════════════ */
.ata-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
.ata-meta-item {
    background: var(--bg-surface);
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.ata-meta-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ata-meta-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.ata-meta-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.decisao-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    background: var(--bg-surface);
    border: none;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    transition: box-shadow var(--transition), transform var(--transition);
}
.decisao-item:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.decisao-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent-muted);
    border: 1px solid var(--border-default);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}
.decisao-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.decisao-text strong { color: var(--text-primary); }

.pauta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-faint);
    font-size: 13px;
    color: var(--text-secondary);
}
.pauta-item:last-child { border-bottom: none; }
.pauta-bullet {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 5px;
}

/* ══════════════════════════════════════════
   FLOWCHART
══════════════════════════════════════════ */
.flowchart-wrapper {
    background: var(--bg-surface);
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    margin-bottom: 20px;
    overflow-x: auto;
}
.flowchart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 300px;
}
.flow-node {
    padding: 11px 28px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    min-width: 240px;
    max-width: 360px;
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-primary);
    transition: all var(--transition);
    position: relative;
}
.flow-node:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}
.flow-node.start {
    background: var(--accent-muted);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
    border-radius: var(--radius-full);
    box-shadow: 0 0 20px var(--accent-glow);
}
.flow-node.process {
    border-color: var(--border-default);
}
.flow-node.decision {
    background: var(--violet-muted);
    border-color: var(--violet);
    color: var(--violet);
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    padding: 24px 48px;
    font-weight: 700;
}
.flow-node.end {
    background: var(--emerald-muted);
    border-color: var(--emerald);
    color: var(--emerald);
    font-weight: 700;
    border-radius: var(--radius-full);
    box-shadow: 0 0 20px rgba(5,150,105,0.16);
}
.flow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 2px 0;
    color: var(--text-muted);
    font-size: 11px;
}
.flow-arrow-line {
    width: 1px;
    height: 16px;
    background: linear-gradient(to bottom, var(--border-subtle), var(--border-default));
}
.flow-arrow-head {
    font-size: 10px;
    color: var(--text-tertiary);
}
.flow-branch-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.flow-branch {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}
.flow-branch-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.flow-branch-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    padding: 2px 0;
}

/* ══════════════════════════════════════════
   TAP FORM
══════════════════════════════════════════ */
.tap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.tap-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tap-field.full { grid-column: 1 / -1; }
.tap-field label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.tap-field input,
.tap-field textarea {
    background: var(--bg-surface);
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    transition: border-color var(--transition);
    outline: none;
}
.tap-field input:focus,
.tap-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-muted);
}
.tap-field textarea { min-height: 100px; }
.tap-field input { height: 42px; }
.tap-field textarea[data-field] { cursor: text; }
[data-field].field-save-error { border-color: var(--rose) !important; box-shadow: 0 0 0 3px rgba(225,29,72,0.12) !important; }

/* Toast de status de salvamento de campos editáveis (TAP etc.) */
.field-save-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-full);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.field-save-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.field-save-toast.is-error { border-color: var(--rose); color: var(--rose); }
.field-save-toast.is-ok { border-color: var(--accent); color: var(--accent); }

/* ══════════════════════════════════════════
   BDD / CODE
══════════════════════════════════════════ */
.bdd-scenario {
    background: var(--bg-surface);
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}
.bdd-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--neutral-muted);
    border-bottom: 1px solid var(--border-faint);
}
.bdd-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--violet-muted);
    color: var(--violet);
    border: 1px solid var(--violet-border);
}
.bdd-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.bdd-body {
    padding: 16px 20px;
}
.bdd-body pre {
    margin: 0;
    background: transparent;
    border: none;
    padding: 0;
}
.bdd-body code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-secondary);
    white-space: pre-wrap;
}
.bdd-body .kw-dado  { color: var(--accent); font-weight: 600; }
.bdd-body .kw-quando { color: var(--amber); font-weight: 600; }
.bdd-body .kw-entao { color: var(--emerald); font-weight: 600; }
.bdd-body .kw-e    { color: var(--violet); font-weight: 500; }

/* ══════════════════════════════════════════
   ISHIKAWA (Causa e Efeito)
   ══════════════════════════════════════════ */
.ishikawa-color-accent  { --ishikawa-c: var(--accent); }
.ishikawa-color-sky     { --ishikawa-c: var(--sky); }
.ishikawa-color-violet  { --ishikawa-c: var(--violet); }
.ishikawa-color-emerald { --ishikawa-c: var(--emerald); }
.ishikawa-color-amber   { --ishikawa-c: var(--amber); }
.ishikawa-color-rose    { --ishikawa-c: var(--rose); }

.ishikawa-diagram-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-lg);
    padding: 8px;
    overflow-x: auto;
}
.ishikawa-svg { width: 100%; height: auto; min-width: 720px; display: block; }

.ishikawa-spine       { stroke: var(--text-tertiary); stroke-width: 2.5; }
.ishikawa-spine-head  { fill: var(--text-tertiary); }
.ishikawa-head-box    { fill: var(--bg-elevated); stroke: var(--accent); stroke-width: 2; }
.ishikawa-head-label  { fill: var(--text-primary); font-size: 13px; font-weight: 700; }

.ishikawa-bone-line { stroke: var(--ishikawa-c); stroke-width: 2; opacity: 0.65; }
.ishikawa-bone-box  { fill: var(--bg-elevated); stroke: var(--ishikawa-c); stroke-width: 1.5; opacity: 0.95; }
.ishikawa-bone-label { fill: var(--text-primary); font-size: 11px; font-weight: 600; }
.ishikawa-bone-count {
    fill: var(--ishikawa-c);
    font-size: 12px;
    font-weight: 800;
}

.ishikawa-dot { cursor: pointer; }
.ishikawa-dot circle {
    fill: var(--ishikawa-c);
    stroke: var(--bg-surface);
    stroke-width: 2;
    transition: r 0.15s ease, opacity 0.15s ease;
}
.ishikawa-dot text {
    fill: var(--text-primary);
    font-size: 10.5px;
    font-weight: 600;
    transition: fill 0.15s ease, font-weight 0.15s ease;
}
.ishikawa-dot:hover circle { opacity: 0.75; }
.ishikawa-dot:hover text { fill: var(--ishikawa-c); }
.ishikawa-dot.active circle { r: 8; stroke: var(--text-primary); }
.ishikawa-dot.active text { fill: var(--ishikawa-c); font-weight: 800; }
.ishikawa-dot-overflow { fill: var(--text-tertiary); font-size: 10px; font-weight: 700; }

.ishikawa-list { display: flex; flex-direction: column; gap: 18px; }
.ishikawa-cat-block { display: flex; flex-direction: column; gap: 6px; }
.ishikawa-cat-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ishikawa-c);
}
.ishikawa-cat-icon { font-size: 14px; }
.ishikawa-cat-count {
    margin-left: 2px;
    background: var(--ishikawa-c);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 7px;
}

.ishikawa-cause-item {
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.ishikawa-cause-item.open { border-color: var(--ishikawa-c); }
.ishikawa-cause-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--text-primary);
}
.ishikawa-cause-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ishikawa-c);
    flex-shrink: 0;
}
.ishikawa-cause-title { flex: 1; font-size: 13px; font-weight: 500; }
.ishikawa-cause-peso { font-size: 9px; letter-spacing: 1px; color: var(--ishikawa-c); }
.ishikawa-cause-chevron {
    color: var(--text-tertiary);
    transition: transform 0.15s ease;
}
.ishikawa-cause-item.open .ishikawa-cause-chevron { transform: rotate(90deg); }
.ishikawa-cause-desc {
    display: none;
    padding: 0 12px 12px 30px;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.65;
}
.ishikawa-cause-item.open .ishikawa-cause-desc { display: block; }

.ishikawa-summary { display: flex; flex-direction: column; gap: 10px; }

/* ══════════════════════════════════════════
   MINDMAP
   ══════════════════════════════════════════ */
.mm-color-accent  { --mm-c: var(--accent);  --mm-c-muted: var(--accent-muted); }
.mm-color-sky     { --mm-c: var(--sky);     --mm-c-muted: var(--sky-muted); }
.mm-color-violet  { --mm-c: var(--violet);  --mm-c-muted: var(--violet-muted); }
.mm-color-emerald { --mm-c: var(--emerald); --mm-c-muted: var(--emerald-muted); }
.mm-color-amber   { --mm-c: var(--amber);   --mm-c-muted: var(--amber-muted); }
.mm-color-rose    { --mm-c: var(--rose);    --mm-c-muted: var(--rose-muted); }

.mm-wrap { display: flex; flex-direction: column; align-items: center; }

.mm-central {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    margin-bottom: 32px;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 18px var(--accent-glow);
}
.mm-central-icon { font-size: 17px; }
.mm-central::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -32px;
    width: 2px;
    height: 32px;
    background: var(--border-default);
    transform: translateX(-50%);
}

.mm-branches {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px 18px;
    padding-top: 20px;
}
.mm-branches::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: var(--border-default);
}

.mm-branch {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-faint);
    border-top: 3px solid var(--mm-c);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
}
.mm-branch::before {
    content: '';
    position: absolute;
    top: -21px;
    left: 50%;
    width: 2px;
    height: 20px;
    background: var(--mm-c);
    transform: translateX(-50%);
}

.mm-branch-head { display: flex; align-items: center; gap: 8px; }
.mm-branch-order {
    flex-shrink: 0;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--mm-c);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
}
.mm-branch-icon { font-size: 16px; }
.mm-branch-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.mm-branch-owner {
    font-size: 11.5px;
    color: var(--mm-c);
    font-weight: 600;
    margin-top: -4px;
}

.mm-branch-body { display: flex; flex-direction: column; gap: 8px; }
.mm-subitem {
    background: var(--mm-c-muted);
    border-radius: var(--radius-md);
    padding: 8px 10px;
}
.mm-subitem-critico { outline: 1.5px solid var(--mm-c); }
.mm-subitem-row { display: flex; align-items: center; gap: 8px; }
.mm-subitem-dot {
    flex-shrink: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--mm-c);
}
.mm-subitem-text { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.mm-subitem-flag { font-size: 12px; flex-shrink: 0; }

.mm-subitem-details { margin-top: 6px; }
.mm-subitem-details summary {
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: var(--mm-c);
    list-style: none;
}
.mm-subitem-details summary::-webkit-details-marker { display: none; }
.mm-subitem-details summary::before { content: '▸ '; }
.mm-subitem-details[open] summary::before { content: '▾ '; }
.mm-subitem-details ul {
    margin: 6px 0 0;
    padding-left: 16px;
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ══════════════════════════════════════════
   CLIQUES TIMELINE
══════════════════════════════════════════ */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 24px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 7px; top: 12px; bottom: 12px;
    width: 1px;
    background: linear-gradient(to bottom, var(--border-default), transparent);
}
.timeline-item {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 16px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
    position: absolute;
    left: -24px;
    top: 12px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-base);
    flex-shrink: 0;
    z-index: 1;
    box-shadow: 0 0 8px var(--accent-glow);
}
.timeline-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-muted);
    border: 1px solid var(--border-subtle);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    height: fit-content;
    margin-top: 8px;
    min-width: 72px;
    text-align: center;
}
.timeline-content {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    transition: border-color var(--transition);
}
.timeline-content:hover { border-color: var(--border-subtle); }
.timeline-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.timeline-behavior {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}
.timeline-rule {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--amber);
    background: var(--amber-muted);
    border: 1px solid var(--amber-border);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
}
.timeline-frame {
    display: block;
    max-width: 220px;
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    margin-bottom: 8px;
    cursor: zoom-in;
    transition: border-color var(--transition), transform var(--transition);
}
.timeline-frame:hover {
    border-color: var(--accent);
    transform: scale(1.02);
}
.frame-progress-banner {
    display: none;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    margin: 0 0 16px 0;
}
.frame-progress-bar {
    flex: 1;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border-default);
    overflow: hidden;
}
.frame-progress-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-full);
    transition: width 0.25s ease;
    width: 0%;
}

/* ══════════════════════════════════════════
   FLOWCHART IMAGE
══════════════════════════════════════════ */
.flowchart-img {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    display: block;
}

/* ══════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    text-align: center;
    border: 2px dashed var(--border-faint);
    border-radius: var(--radius-lg);
    color: var(--text-tertiary);
}
.empty-state-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* ══════════════════════════════════════════
   LISTS
══════════════════════════════════════════ */
.styled-ol {
    list-style: none;
    counter-reset: list-counter;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.styled-ol li {
    counter-increment: list-counter;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.styled-ol li::before {
    content: counter(list-counter);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--neutral-muted);
    border: 1px solid var(--border-subtle);
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ══════════════════════════════════════════
   BOTTOM BAR
══════════════════════════════════════════ */
.bottombar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-left: var(--rail-w);
    background: var(--sidebar-bg);
    border-top: 1px solid var(--sidebar-border);
    z-index: 100;
}
.bottombar-left { display: flex; align-items: center; gap: 4px; }
.bottombar-right { display: flex; align-items: center; gap: 10px; }
.bottombar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--sidebar-text);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition);
}
.bottombar-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-strong); }
.bottombar-icon {
    width: 26px; height: 26px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--sidebar-text-dim);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
}
.bottombar-icon:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-strong); }
.bottombar-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sidebar-text);
    padding-left: 8px;
    border-left: 1px solid var(--sidebar-border);
}

/* ══════════════════════════════════════════
   PRINT
══════════════════════════════════════════ */
@media print {
    body { background: #fff !important; color: #000 !important; overflow: visible !important; height: auto !important; }
    .topbar, .bottombar, .steps-nav, .content-header-strip, .doc-footer-nav, .btn-ghost, .header-toolbar { display: none !important; }
    .app-shell { display: block !important; height: auto !important; }
    .workspace { display: block !important; overflow: visible !important; height: auto !important; }
    .document-container { display: block !important; height: auto !important; overflow: visible !important; }
    .doc-body { display: block !important; overflow: visible !important; }
    .doc-main { display: block !important; overflow: visible !important; }
    .doc-scroll { display: block !important; overflow: visible !important; height: auto !important; }
    .tab-content { display: block !important; padding: 24px !important; }
    * { border-color: #e5e7eb !important; background: #fff !important; color: #000 !important; }
    h1,h2,h3,h4 { color: #111 !important; }
    table { border: 1px solid #d1d5db !important; }
    th { background: #f9fafb !important; color: #374151 !important; }
    td { color: #6b7280 !important; }
    .badge, .pri-alta, .pri-media, .pri-baixa { background: #f3f4f6 !important; color: #374151 !important; border: 1px solid #d1d5db !important; }
}

/* ══════════════════════════════════════════
   RESPONSIVE (basic)
══════════════════════════════════════════ */
@media (max-width: 900px) {
    .card-grid-4 { grid-template-columns: 1fr 1fr; }
    .ata-meta-grid { grid-template-columns: 1fr 1fr; }
    .card-grid-3 { grid-template-columns: 1fr 1fr; }
    :root { --rail-w: 72px; }
    .rail { padding: 18px 12px; border-radius: 0; align-items: center; }
    .rail-brand { justify-content: center; padding: 0 0 16px; }
    .rail-brand-text, .rail-label { display: none; }
    .rail-icon { width: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 680px) {
    .tap-grid { grid-template-columns: 1fr; }
    .card-grid-2 { grid-template-columns: 1fr; }
    .visao-text-grid, .visao-atores-grid, .visao-stat-row { grid-template-columns: 1fr; }
    .visao-overview-hero { flex-direction: column; align-items: flex-start; text-align: left; }
    .content-header-strip, .project-header { padding-left: 18px; padding-right: 18px; }
    .tab-content, .doc-footer-nav { padding-left: 18px; padding-right: 18px; }
    .doc-body { flex-direction: column; }
    .steps-nav {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        padding: 12px 18px;
        gap: 8px;
        border-right: none;
        border-bottom: 1px solid var(--border-faint);
    }
    .tab-btn { flex-shrink: 0; }
    .visao-hero-top { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════
   AUTENTICAÇÃO — splash, login, admin
══════════════════════════════════════════ */
body:not(.auth-signed-in) .app-shell { display: none !important; }
body:not(.auth-signed-out) .login-screen { display: none !important; }
body:not(.auth-checking) .auth-splash { display: none !important; }

.auth-splash {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-base);
}
.auth-splash-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--border-default);
    border-top-color: var(--emerald);
    animation: auth-spin 0.8s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

.login-screen {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-base);
    padding: 24px;
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 36px 32px 28px;
    text-align: center;
}
.login-logo {
    width: 128px;
    margin: 0 auto 22px;
    display: block;
}
.login-label {
    display: block;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 16px 0 6px;
}
.login-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--emerald-border);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    background: var(--bg-surface);
    transition: border-color var(--transition);
}
.login-input-wrap:focus-within { border-color: var(--emerald); }
.login-input-wrap svg { color: var(--emerald); flex-shrink: 0; }
.login-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-primary);
    font-family: inherit;
    min-width: 0;
}
.login-toggle-password {
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}
.login-toggle-password:hover { color: var(--text-secondary); }

.login-error {
    color: var(--rose);
    font-size: 12.5px;
    text-align: left;
    margin: 10px 0 0;
}

.login-submit-btn {
    width: 100%;
    margin-top: 22px;
    padding: 13px;
    border: none;
    border-radius: var(--radius-full);
    background: linear-gradient(120deg, #1E9E5C 0%, #FFC94A 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter var(--transition), transform var(--transition);
}
.login-submit-btn:hover { filter: brightness(1.06); }
.login-submit-btn:active { transform: scale(0.99); }
.login-submit-btn:disabled { opacity: 0.7; cursor: default; }

.login-forgot-link {
    display: block;
    margin-top: 16px;
    font-size: 12.5px;
    color: var(--emerald);
    text-decoration: none;
    font-weight: 600;
}
.login-forgot-link:hover { text-decoration: underline; }

.login-invite-note {
    margin: 18px 0 0;
    font-size: 11.5px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* Admin: gestão de usuários */
.admin-modal {
    background: var(--bg-base);
    border: none;
    border-radius: 24px;
    padding: 28px;
    max-width: 980px;
    width: 94%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.admin-modal::-webkit-scrollbar { width: 8px; }
.admin-modal::-webkit-scrollbar-track { background: transparent; }
.admin-modal::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-full); }
.admin-modal::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
.admin-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}
.admin-modal-header-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.admin-modal-header-text { flex: 1; min-width: 0; }
.admin-modal-header-text h2 { margin: 0 0 2px; font-size: 20px; font-weight: 800; color: var(--text-primary); }
.admin-modal-header-text p { margin: 0; font-size: 13px; color: var(--text-tertiary); }
.admin-modal-close {
    border: none;
    background: var(--bg-hover);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 13px;
}
.admin-modal-close:hover { color: var(--text-primary); }

.admin-section-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
}
.admin-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
}
.admin-section-title svg { color: var(--accent); flex-shrink: 0; }

.admin-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.admin-form-field label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.admin-form-field input,
.admin-form-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
}
.admin-form-field input:focus,
.admin-form-field select:focus { border-color: var(--accent); }
.admin-form-checkbox-field { display: flex; align-items: flex-end; }
.admin-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 10px 0;
}
.admin-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--emerald); cursor: pointer; }
.admin-existing-account-toggle {
    background: var(--bg-hover);
    border: 1px solid var(--border-faint);
    border-radius: 10px;
    padding: 10px 14px !important;
    margin-bottom: 4px;
}
.admin-form-field-full { grid-column: 1 / -1; }
.admin-form-submit-row { display: flex; justify-content: flex-end; margin-top: 4px; }
.admin-create-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.admin-create-submit-btn:disabled { opacity: 0.6; cursor: default; }
.admin-form-error { color: var(--rose); font-size: 12px; margin: 4px 0 0; }

.admin-users-card { padding: 0; overflow: hidden; flex-shrink: 0; }
.admin-users-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 16px;
}
.admin-users-card-header .admin-section-title { margin: 0; }
.admin-users-count { font-size: 12.5px; color: var(--text-tertiary); font-weight: 600; }

.admin-table-wrap { overflow-x: auto; max-height: 360px; overflow-y: auto; }
.admin-table-wrap::-webkit-scrollbar { width: 6px; }
.admin-table-wrap::-webkit-scrollbar-track { background: transparent; }
.admin-table-wrap::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-full); }
.admin-users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-users-table th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    padding: 10px 22px;
    border-top: 1px solid var(--border-faint);
    border-bottom: 1px solid var(--border-faint);
    background: var(--bg-hover);
    white-space: nowrap;
}
.admin-users-table td {
    padding: 12px 22px;
    border-bottom: 1px solid var(--border-faint);
    color: var(--text-primary);
    vertical-align: middle;
}
.admin-users-table tr:last-child td { border-bottom: none; }
.admin-table-name { display: block; font-weight: 600; }
.admin-table-username { display: block; font-size: 11.5px; color: var(--text-tertiary); }
.admin-table-email { color: var(--text-secondary); }
.admin-table-date { color: var(--text-tertiary); white-space: nowrap; }
.admin-table-self { font-size: 11.5px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.admin-users-empty { text-align: center; font-size: 13px; color: var(--text-tertiary); padding: 24px !important; }

.admin-table-actions { display: flex; align-items: center; gap: 6px; }
.admin-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.admin-icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-hover); }
.admin-icon-btn-danger:hover { color: var(--rose); border-color: var(--rose-border); background: var(--rose-muted); }

.admin-user-role {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.admin-user-role-admin { background: var(--amber-muted); color: var(--amber); }
.admin-user-role-user { background: var(--emerald-muted); color: var(--emerald); }
.admin-user-role-inactive { background: var(--rose-muted); color: var(--rose); }
.admin-user-role-pacote { background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary); }

@media (max-width: 680px) {
    .admin-form-row { grid-template-columns: 1fr; margin-bottom: 10px; }
    .admin-modal { padding: 18px; }
    .admin-section-card { padding: 16px; }
}

/* ══════════════════════════════════════════════════════════
   HOME (landing) — paleta laranja/pêssego isolada desta página.
   Não usa os design tokens verdes do resto do app de propósito:
   a Home é a "vitrine" e mantém sempre o visual claro/laranja,
   mesmo com o tema escuro ativo no restante do produto.
══════════════════════════════════════════════════════════ */
.home-landing {
    --hl-orange:      #FF6B35;
    --hl-orange-dark: #E8541F;
    --hl-orange-soft: rgba(255,107,53,0.12);
    --hl-yellow:      #FFB020;
    --hl-yellow-soft: rgba(255,176,32,0.14);
    --hl-green:       #22B573;
    --hl-green-soft:  rgba(34,181,115,0.14);
    --hl-purple:      #8B5CF6;
    --hl-purple-soft: rgba(139,92,246,0.14);
    --hl-bg:          #FFFCFA;
    --hl-peach:       #FFDCC4;
    --hl-peach-soft:  #FFF1E6;
    --hl-band:        #FFF3EC;
    --hl-card:        #FFFFFF;
    --hl-ink:         #211A16;
    --hl-gray:        #6B6058;
    --hl-gray-soft:   #948A82;
    --hl-border:      rgba(33,26,22,0.08);
    --hl-shadow:      0 14px 34px rgba(76,44,20,0.09);
    --hl-shadow-sm:   0 4px 14px rgba(76,44,20,0.07);
    --hl-radius-lg:   26px;
    --hl-radius-md:   18px;

    display: none;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background: var(--hl-bg);
    color: var(--hl-ink);
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    scrollbar-width: thin;
    scrollbar-color: var(--hl-peach) transparent;
}
.home-landing::-webkit-scrollbar { width: 6px; }
.home-landing::-webkit-scrollbar-thumb { background: var(--hl-peach); border-radius: 4px; }

.hl-accent { color: var(--hl-orange); }

/* decorative blobs + dot grids */
.hl-decor {
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    background: linear-gradient(135deg, var(--hl-peach) 0%, var(--hl-peach-soft) 100%);
    opacity: 0.65;
    pointer-events: none;
    z-index: 0;
}
.hl-decor-tl { top: -160px; left: -160px; }
.hl-decor-br { bottom: -180px; right: -180px; border-radius: 58% 42% 37% 63% / 59% 56% 44% 41%; }
.hl-dots {
    position: absolute;
    width: 120px; height: 90px;
    background-image: radial-gradient(var(--hl-peach) 1.6px, transparent 1.6px);
    background-size: 14px 14px;
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
}
.hl-dots-1 { top: 18px; left: 24px; }
.hl-dots-2 { top: 420px; right: 6%; opacity: 0.6; }

.hl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
    white-space: nowrap;
}
.hl-btn-primary { background: var(--hl-orange); color: #fff; box-shadow: 0 10px 24px rgba(255,107,53,0.32); }
.hl-btn-primary:hover { background: var(--hl-orange-dark); transform: translateY(-1px); }
.hl-btn-outline { background: transparent; color: var(--hl-orange); border: 1.5px solid var(--hl-orange); }
.hl-btn-outline:hover { background: var(--hl-orange-soft); }
.hl-btn-white { background: #fff; color: var(--hl-orange-dark); }
.hl-btn-white:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.14); }

.hl-link-play {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hl-ink);
    cursor: pointer;
    padding: 6px 2px;
}
.hl-play-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--hl-orange-soft);
    color: var(--hl-orange);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hl-link-play:hover .hl-play-icon { background: var(--hl-orange); color: #fff; }

/* ── Hero ── */
.hl-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 56px 48px 40px;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}
.hl-hero-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--hl-ink);
    margin-bottom: 16px;
}
.hl-hero-sub {
    font-size: 15px;
    color: var(--hl-gray);
    line-height: 1.7;
    max-width: 440px;
    margin-bottom: 26px;
}
.hl-hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.hl-hero-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 280px; }
.hl-hero-logo { width: 100%; max-width: 300px; height: auto; }

/* ── Section shell ── */
.hl-section { position: relative; z-index: 1; padding: 40px 48px; max-width: 1180px; margin: 0 auto; width: 100%; }
.hl-section-head { text-align: center; margin-bottom: 34px; }
.hl-section-head h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--hl-ink); margin-bottom: 8px; }
.hl-section-head p  { font-size: 14px; color: var(--hl-gray); }

/* ── Módulos ── */
.hl-modules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hl-module-card {
    background: var(--hl-card);
    border-radius: var(--hl-radius-md);
    box-shadow: var(--hl-shadow-sm);
    padding: 22px 20px 20px;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.hl-module-card:hover { transform: translateY(-3px); box-shadow: var(--hl-shadow); }
.hl-module-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.hl-icon-yellow { background: var(--hl-yellow-soft); color: var(--hl-yellow); }
.hl-icon-green  { background: var(--hl-green-soft);  color: var(--hl-green); }
.hl-icon-purple { background: var(--hl-purple-soft); color: var(--hl-purple); }
.hl-icon-orange { background: var(--hl-orange-soft); color: var(--hl-orange); }
.hl-module-card h3 { font-size: 15px; font-weight: 700; color: var(--hl-ink); margin-bottom: 6px; }
.hl-module-card p  { font-size: 12.5px; color: var(--hl-gray); line-height: 1.6; margin-bottom: 16px; }
.hl-module-line { display: block; width: 34px; height: 3px; border-radius: 2px; }
.hl-line-yellow { background: var(--hl-yellow); }
.hl-line-green  { background: var(--hl-green); }
.hl-line-purple { background: var(--hl-purple); }
.hl-line-orange { background: var(--hl-orange); }

/* ── Como funciona (faixa pêssego) ── */
.hl-how-band { background: var(--hl-band); max-width: none; border-radius: 0; }
.hl-how-band > .hl-how-grid { max-width: 1180px; margin: 0 auto; }
.hl-how-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 46px; align-items: center; }
.hl-how-copy h2 { font-size: 26px; font-weight: 800; color: var(--hl-ink); margin-bottom: 10px; letter-spacing: -0.01em; }
.hl-how-sub { font-size: 13.5px; color: var(--hl-gray); margin-bottom: 22px; max-width: 460px; line-height: 1.6; }
.hl-steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.hl-steps li { display: flex; align-items: flex-start; gap: 14px; }
.hl-step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--hl-orange);
    color: #fff;
    font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hl-steps h4 { font-size: 14px; font-weight: 700; color: var(--hl-ink); margin-bottom: 2px; }
.hl-steps p  { font-size: 12.5px; color: var(--hl-gray); line-height: 1.55; }
.hl-how-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.hl-how-art { display: flex; align-items: center; justify-content: center; }
.hl-art-card-alt { max-width: 300px; position: relative; align-items: center; padding: 30px 24px; gap: 16px; }
.hl-art-avatar {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hl-orange) 0%, var(--hl-yellow) 100%);
    align-self: flex-start;
}
.hl-art-bubble {
    align-self: flex-start;
    display: flex; align-items: center; gap: 5px;
    background: var(--hl-peach-soft);
    border-radius: 9999px;
    padding: 10px 14px;
}
.hl-art-bubble span { width: 6px; height: 6px; border-radius: 50%; background: var(--hl-orange); opacity: 0.75; }
.hl-art-bubble span:nth-child(2) { opacity: 0.5; }
.hl-art-bubble span:nth-child(3) { opacity: 0.3; }
.hl-art-pie {
    width: 96px; height: 96px;
    border-radius: 50%;
    align-self: center;
    background: conic-gradient(var(--hl-orange) 0deg 140deg, var(--hl-yellow) 140deg 230deg, var(--hl-green) 230deg 300deg, var(--hl-purple) 300deg 360deg);
    box-shadow: var(--hl-shadow-sm);
}

/* ── Por que escolher ── */
.hl-why-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 46px; align-items: center; }
.hl-why-copy h2 { font-size: 26px; font-weight: 800; color: var(--hl-ink); margin-bottom: 22px; letter-spacing: -0.01em; }
.hl-why-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.hl-why-list li { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; color: var(--hl-ink); }
.hl-why-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hl-why-art { display: flex; align-items: center; justify-content: center; }
.hl-art-screen { width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hl-art-donut {
    width: 110px; height: 110px;
    border-radius: 50%;
    background: conic-gradient(var(--hl-orange) 0deg 160deg, var(--hl-purple) 160deg 250deg, var(--hl-green) 250deg 320deg, var(--hl-yellow) 320deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 40%, black 41%);
            mask: radial-gradient(circle, transparent 40%, black 41%);
}
.hl-art-mini-bars { display: flex; align-items: flex-end; gap: 10px; height: 40px; width: 100%; max-width: 220px; }
.hl-art-mini-bars span { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--hl-peach); }
.hl-art-mini-bars span:nth-child(1) { height: 55%; background: var(--hl-yellow); }
.hl-art-mini-bars span:nth-child(2) { height: 85%; background: var(--hl-orange); }
.hl-art-mini-bars span:nth-child(3) { height: 40%; background: var(--hl-green); }
.hl-art-mini-bars span:nth-child(4) { height: 70%; background: var(--hl-purple); }

/* ── CTA final ── */
.hl-cta-band {
    position: relative;
    z-index: 1;
    background: linear-gradient(120deg, var(--hl-orange) 0%, var(--hl-orange-dark) 100%);
    padding: 44px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
    text-align: center;
}
.hl-cta-band h2 { font-size: 22px; font-weight: 800; color: #fff; }

@media (max-width: 980px) {
    .hl-hero { grid-template-columns: 1fr; padding: 40px 28px; }
    .hl-modules-grid { grid-template-columns: repeat(2, 1fr); }
    .hl-how-grid, .hl-why-grid { grid-template-columns: 1fr; }
    .hl-how-art { order: -1; }
    .hl-section { padding: 34px 28px; }
    .hl-decor { width: 280px; height: 280px; }
}
@media (max-width: 600px) {
    .hl-modules-grid { grid-template-columns: 1fr; }
    .hl-hero-title { font-size: 28px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN 2026-09-20 — CASCA (v2, seguindo o print de referência)
   ---------------------------------------------------------------------------
   O que o print manda, e que a v1 errou:
     · NÃO existe painel lateral. A navegação é uma pilha de botões REDONDOS
       soltos sobre o fundo, sem caixa atrás, começando pelo meio da altura.
     · A marca fica sozinha no canto superior esquerdo, fora de tudo.
     · O topo é uma PÍLULA escura que começa depois da marca — não uma barra
       que atravessa a tela.
     · O conteúdo repousa DIRETO no canvas. Não há cartão branco gigante
       envolvendo tudo; os cards é que flutuam, um a um.

   Contrato DOM intacto — ver contrato-seletores.json.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --canvas:       #ECECE8;
    --pad:          22px;
    --nav-w:        56px;
    --chrome-ink:   #0C2E20;
    --float-r:      24px;
    --float-shadow: 0 1px 2px rgba(16,32,24,.04), 0 10px 30px -12px rgba(16,32,24,.20);
}
:root[data-theme="dark"] {
    --canvas:       #0D1411;
    --chrome-ink:   #16211C;
    --float-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.6);
}

.app-shell {
    background: var(--canvas);
    grid-template-rows: auto 1fr auto;
    padding: var(--pad);
    box-sizing: border-box;
    gap: 16px;
}

/* ── navegação: botões soltos, sem painel ────────────────────────────────── */
.rail {
    position: fixed;
    left: var(--pad);
    top: 34%;                /* começa pelo meio, como no print */
    bottom: auto;
    width: var(--nav-w);
    background: transparent; /* o painel morre aqui */
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    gap: 10px;
    align-items: center;
}
.rail-icons { gap: 10px; align-items: center; width: auto; }
.rail-icon {
    width: var(--nav-w); height: var(--nav-w);
    padding: 0; gap: 0;
    justify-content: center;
    border-radius: 50%;                 /* redondo, como no print */
    background: var(--chrome-ink);
    color: rgba(255,255,255,.62);
    box-shadow: var(--float-shadow);
}
.rail-icon svg { width: 19px; height: 19px; padding: 0; background: transparent; }
.rail-icon:hover { background: var(--chrome-ink); color: #fff; transform: translateY(-1px); }
.rail-icon[aria-expanded="true"], .rail-icon.active {
    background: var(--accent); color: var(--on-accent, #fff);
}
.rail-icon[aria-expanded="true"] svg, .rail-icon.active svg { background: transparent; }
.rail-spacer { display: none; }

/* a marca sai da pilha e vai sozinha para o canto */
.rail-brand {
    position: fixed;
    top: var(--pad); left: var(--pad);
    width: var(--nav-w); height: 52px;
    padding: 0; margin: 0;
    border: none;
    justify-content: center;
}
.rail-logo { width: 34px; height: 34px; }
.rail-brand-text, .rail-label {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── topo: pílula escura, começando depois da marca ──────────────────────── */
.topbar {
    margin-left: calc(var(--nav-w) + 18px);
    height: 58px;
    padding: 0 8px 0 26px;
    background: var(--chrome-ink);
    border: none; border-bottom: none;
    border-radius: 999px;
    box-shadow: var(--float-shadow);
    backdrop-filter: none;
}
.topbar-profile-chip {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.16);
    border-radius: 999px;
}
.topbar-profile-text b { color: #fff; }
.topbar-profile-text small { color: rgba(255,255,255,.6); }
.theme-toggle-btn {
    color: rgba(255,255,255,.8);
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.07);
}
.theme-toggle-btn:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ── conteúdo: direto no canvas, sem cartão envolvendo ───────────────────── */
.workspace {
    margin-left: calc(var(--nav-w) + 18px);
    background: transparent;   /* o cartão gigante morre aqui */
    border-radius: 0;
    box-shadow: none;
    overflow: auto;
    padding: 4px 2px;
}

/* ── rodapé: pílula discreta ─────────────────────────────────────────────── */
.bottombar {
    margin-left: calc(var(--nav-w) + 18px);
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(10px);
    border: none; border-top: none;
    border-radius: 999px;
    box-shadow: var(--float-shadow);
    padding: 0 20px;
}
:root[data-theme="dark"] .bottombar { background: rgba(22,33,28,.75); }

@media (max-width: 900px) {
    :root { --nav-w: 48px; --pad: 12px; }
    .rail { top: auto; bottom: var(--pad); flex-direction: row; }
    .rail-icons { flex-direction: row; }
    .topbar, .workspace, .bottombar { margin-left: calc(var(--nav-w) + 12px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN 2026-09-20 — TELA DE ANÁLISE
   ---------------------------------------------------------------------------
   Sai a linha ondulada com os nós 01–05 e o jogo de palavras. Entra um anel
   girando em volta da fruta, com as 12 entregas acendendo uma a uma.

   (Em 24/09 o jogo e os cards foram removidos de vez — ver a camada
   VERSÃO LIMPA mais abaixo.)
   ═══════════════════════════════════════════════════════════════════════════ */

#processing-container{
    background: var(--canvas);
    display: flex; align-items: center; justify-content: center;
    padding: 34px 22px;
}
.fluxo-journey{
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    max-width: 700px; width: 100%; position: relative;
}

/* ── o anel girando em volta da fruta ────────────────────────────────────── */
.processing-logo{
    width: 92px; height: 92px; object-fit: contain;
    padding: 20px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 30px -12px rgba(15,28,22,.35);
    position: relative; z-index: 1;
}
.fluxo-journey::before{
    content: ""; position: absolute; top: -12px;
    width: 156px; height: 156px; border-radius: 50%;
    background: conic-gradient(var(--lima,#7CB342), var(--amarelo,#F5C13D),
                               var(--laranja,#F0872E), var(--lima,#7CB342));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 0);
            mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 0);
    animation: anelGira 2.6s linear infinite;
}
@keyframes anelGira { to { transform: rotate(1turn); } }

/* o brilho de fundo respira em vez de ficar parado */
.processing-glow{ animation: glowRespira 7s ease-in-out infinite; }
@keyframes glowRespira{ 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }

/* ── textos ──────────────────────────────────────────────────────────────── */
.fluxo-title{
    font-size: 25px; font-weight: 800; letter-spacing: -.03em;
    text-transform: none; margin: 0;
}
.fluxo-desc{ font-size: 14px; color: var(--text-secondary); margin: 0; text-align: center; }

.processing-elapsed{
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 12px; color: var(--text-tertiary);
}
.fluxo-cancel-btn{ border-radius: 999px; }

@media (max-width: 720px){
    .fluxo-journey::before{ width: 132px; height: 132px; }
    .processing-logo{ width: 78px; height: 78px; padding: 16px; }
}
@media (prefers-reduced-motion: reduce){
    .fluxo-journey::before, .processing-glow { animation: none; }
}

/* ── o anel passa a refletir o progresso real ──────────────────────────────
   `--prog` (0–100) é escrito pelo _advanceTo() no app.js. Enquanto ele não
   chega — antes da primeira etapa — o anel gira, sinalizando "preparando".
   A partir daí ele preenche e a rotação para. */
.fluxo-journey{ --prog: 0; }
.fluxo-journey::before{
    background: conic-gradient(
        var(--lima,#7CB342)    0deg,
        var(--amarelo,#F5C13D) calc(var(--prog) * 1.8deg),
        var(--laranja,#F0872E) calc(var(--prog) * 3.6deg),
        rgba(15,28,22,.08)     calc(var(--prog) * 3.6deg));
    animation: none;
    transition: background .8s cubic-bezier(.4,0,.2,1);
}
/* só antes de começar é que ele roda sozinho */
.fluxo-journey:not([style*="--prog"])::before{
    background: conic-gradient(var(--lima,#7CB342), var(--amarelo,#F5C13D),
                               var(--laranja,#F0872E), var(--lima,#7CB342));
    animation: anelGira 2.6s linear infinite;
}
@media (prefers-reduced-motion: reduce){
    .fluxo-journey:not([style*="--prog"])::before{ animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN 2026-09-20 — HOME DO APP
   Curta e acionável. Quem entra aqui já é cliente: a página não vende, ela
   leva ao primeiro mapeamento. O `#home-landing` é mostrado com display:flex
   pelo _showLanding(), então a régua de layout parte daí.
   ═══════════════════════════════════════════════════════════════════════════ */

#home-landing{
    align-items: flex-start; justify-content: center;
    overflow: auto; padding: 40px 26px 48px;
    background: transparent;
}
.mgh{ width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 22px; }

.mgh-cab{
    background: var(--bg-surface);
    border: 1px solid var(--border-faint);
    border-radius: 28px;
    padding: 38px 34px 32px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 1px 2px rgba(16,32,24,.04), 0 14px 34px -16px rgba(16,32,24,.22);
}
.mgh-logo{ width: 56px; height: 56px; margin-bottom: 18px; }
.mgh-titulo{
    margin: 0; font-size: clamp(26px, 3.4vw, 36px); font-weight: 800;
    letter-spacing: -.035em; line-height: 1.12; color: var(--text-primary);
}
.mgh-sub{
    margin: 14px 0 0; max-width: 46ch;
    font-size: 15px; line-height: 1.6; color: var(--text-secondary);
}
.mgh-cta{
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 26px; padding: 15px 30px;
    background: var(--accent); color: var(--on-accent, #fff);
    border: 0; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
    box-shadow: 0 8px 22px -10px rgba(10,82,51,.6);
    transition: transform .16s, box-shadow .16s, filter .16s;
}
.mgh-cta:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.mgh-cta:active{ transform: translateY(0); }
.mgh-nota{ margin: 12px 0 0; font-size: 12.5px; color: var(--text-tertiary); }

.mgh-passos{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mgh-passo{
    background: var(--bg-surface);
    border: 1px solid var(--border-faint);
    border-radius: 20px; padding: 20px 18px;
    display: flex; flex-direction: column; gap: 6px;
}
.mgh-n{
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-muted, rgba(14,107,67,.1)); color: var(--accent);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 800; margin-bottom: 6px;
}
.mgh-passo b{ font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.mgh-passo span:last-child{ font-size: 13px; line-height: 1.5; color: var(--text-secondary); }

.mgh-entregas{
    background: var(--bg-surface);
    border: 1px solid var(--border-faint);
    border-radius: 20px; padding: 20px;
}
.mgh-entregas-tit{
    display: block; margin-bottom: 12px;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-tertiary);
}
.mgh-chips{ display: flex; flex-wrap: wrap; gap: 7px; }
.mgh-chips span{
    background: var(--bg-base); border: 1px solid var(--border-faint);
    border-radius: 999px; padding: 6px 13px;
    font-size: 12.5px; color: var(--text-secondary);
}

@media (max-width: 720px){
    .mgh-passos{ grid-template-columns: 1fr; }
    .mgh-cab{ padding: 30px 22px 26px; border-radius: 22px; }
    #home-landing{ padding: 24px 16px 36px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN 2026-09-20 — NAVEGAÇÃO DAS 12 ABAS
   ---------------------------------------------------------------------------
   Era uma coluna vertical de 232px com círculos numerados, ocupando um terço
   da largura útil. Vira uma linha horizontal de abas no topo do conteúdo,
   como no mockup aprovado — sobra a largura inteira para o documento.

   `.tab-btn` e `data-tab` são do contrato e continuam intactos: o JS segue
   ligando o clique e marcando `.active` do mesmo jeito.
   ═══════════════════════════════════════════════════════════════════════════ */

.doc-body{ flex-direction: column; }

.steps-nav{
    flex-direction: row;
    width: auto;
    gap: 2px;
    padding: 0 26px;
    margin-bottom: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--border-faint);
    scrollbar-width: none;
}
.steps-nav::-webkit-scrollbar{ display: none; }

.tab-btn{
    width: auto; flex: 0 0 auto;
    gap: 7px;
    padding: 11px 13px;
    border-radius: 10px 10px 0 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    color: var(--text-tertiary);
    transition: color .16s, border-color .16s, background .16s;
}
.tab-btn:hover{ background: var(--bg-hover); color: var(--text-primary); }
.tab-btn.active{
    background: transparent;
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 700;
}

/* o número vira uma marca discreta — na horizontal ele competia com o rótulo */
.tab-btn-circle{
    width: auto; height: auto;
    background: transparent; border: none;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 10px; opacity: .5;
}
.tab-btn.active .tab-btn-circle{ opacity: 1; color: var(--accent); }
.tab-btn-label{ font-size: 13px; }

@media (max-width: 820px){
    .steps-nav{ padding: 0 14px; }
    .tab-btn{ padding: 10px 10px; }
    .tab-btn-circle{ display: none; }
}

/* a marca vertical da aba ativa era do layout de coluna — na horizontal
   quem marca é o sublinhado, então ela sai */
.tab-btn.active::before{ display: none; }
.tab-btn.active{ box-shadow: none; }
.tab-btn.active .tab-btn-circle{
    background: transparent; border-color: transparent; color: var(--accent);
}
.tab-btn.active .tab-btn-label{ color: var(--accent); }
.steps-nav{ margin-top: 14px; }

/* Correção: `.home-landing` é flex-direction: column, e nessa direção o
   align-items controla o eixo HORIZONTAL. Com flex-start o conteúdo colava
   na esquerda e sobrava meia tela vazia à direita. */
#home-landing{
    flex-direction: column;
    align-items: center;      /* centraliza na horizontal */
    justify-content: flex-start;
}
.mgh{ margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN 2026-09-21 — RITMO DAS TELAS DE ENTRADA
   ---------------------------------------------------------------------------
   Home e upload estavam infladas: respiro grande demais, e o upload sem
   largura máxima esticando de ponta a ponta da tela. Aqui a composição fica
   compacta e com uma coluna de leitura definida.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Upload ───────────────────────────────────────────────────────────────── */
.upload-zone{
    max-width: 880px;
    margin-inline: auto;
    padding: 22px 24px 30px;
    gap: 13px;
}
.upload-dropzone{
    padding: 22px 24px;
    gap: 9px;
    border-radius: 18px;
}
.upload-dropzone svg{ width: 26px; height: 26px; }
.upload-dropzone h3, .upload-dropzone .upload-title{ font-size: 15px; }
.upload-dropzone p{ font-size: 13px; }

/* ── Home ─────────────────────────────────────────────────────────────────── */
#home-landing{ padding: 26px 22px 34px; }
.mgh{ max-width: 680px; gap: 13px; }

.mgh-cab{ padding: 28px 30px 24px; border-radius: 22px; }
.mgh-logo{ width: 44px; height: 44px; margin-bottom: 12px; }
.mgh-titulo{ font-size: clamp(22px, 2.5vw, 29px); }
.mgh-sub{ margin-top: 10px; font-size: 14px; max-width: 44ch; }
.mgh-cta{
    margin-top: 18px; padding: 12px 26px;
    font-size: 14.5px; gap: 8px;
}
.mgh-cta svg{ width: 15px; height: 15px; }
.mgh-nota{ margin-top: 9px; font-size: 12px; }

.mgh-passos{ gap: 10px; }
.mgh-passo{ padding: 15px 16px; border-radius: 16px; gap: 4px; }
.mgh-n{ width: 24px; height: 24px; font-size: 12px; margin-bottom: 4px; }
.mgh-passo b{ font-size: 13.5px; }
.mgh-passo span:last-child{ font-size: 12.5px; }

.mgh-entregas{ padding: 15px 16px; border-radius: 16px; }
.mgh-entregas-tit{ margin-bottom: 9px; }
.mgh-chips{ gap: 6px; }
.mgh-chips span{ padding: 5px 11px; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN 2026-09-21 — A CHAVE DE IA SAI DA VISTA DO CLIENTE
   ---------------------------------------------------------------------------
   Modelo comercial novo: a IA vem inclusa no plano (minutos), o cliente não
   traz chave nenhuma. Então tudo que pede ou mostra "API Key" some da tela.

   OCULTO, não apagado — de propósito. O backend AINDA exige uma chave por
   usuário (functions/index.js responde 412 sem ela). Enquanto o proxy não
   passar a usar a chave do próprio Mango, apagar esses elementos deixaria um
   usuário novo sem análise e sem saída. Escondendo, a máquina continua de pé
   e a volta é uma linha.
   ═══════════════════════════════════════════════════════════════════════════ */

#api-key-notice,
#api-settings-btn,
#rail-api-btn,
#api-modal-overlay { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGN 2026-09-21 — TELA DE ANÁLISE, VERSÃO SIMPLES
   ---------------------------------------------------------------------------
   Pedido: menos informação. A ordem visual é definida aqui por `order`.
   (Em 24/09 o jogo e os cards saíram de vez — ver VERSÃO LIMPA abaixo.)
   ═══════════════════════════════════════════════════════════════════════════ */

.fluxo-journey{ gap: 14px; }

.processing-logo   { order: 1; }
.fluxo-pct         { order: 2; }
.fluxo-title       { order: 3; }
.fluxo-desc        { order: 4; }
.fluxo-frases      { order: 5; }
.processing-elapsed{ order: 7; }
.fluxo-cancel-btn  { order: 8; }

.fluxo-pct{
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 17px; font-weight: 600; color: var(--accent);
    letter-spacing: -.01em;
}
.fluxo-title{ font-size: 21px; }
.fluxo-desc{ font-size: 13.5px; }

/* Correção do anel:
   · o anel era ::before de .fluxo-journey, preso no topo do container; agora
     pertence a .fluxo-anel, que envolve só o logo e anda junto com ele. */
.fluxo-journey::before{ display: none; }

.fluxo-anel{
    position: relative;
    display: grid; place-items: center;
    width: 116px; height: 116px;
    order: 1;
}
.fluxo-anel::before{
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(
        var(--lima,#7CB342)    0deg,
        var(--amarelo,#F5C13D) calc(var(--prog,0) * 1.8deg),
        var(--laranja,#F0872E) calc(var(--prog,0) * 3.6deg),
        rgba(15,28,22,.08)     calc(var(--prog,0) * 3.6deg));
    transition: background .8s cubic-bezier(.4,0,.2,1);
}
.fluxo-anel .processing-logo{ position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   TELA DE ANÁLISE — 24/09/2026, VERSÃO LIMPA
   Pedido: só o logo grande girando no anel, sem jogo e sem os 15 cards.
   O que a Mango faz aparece como frases curtas em cinza, trocando com fade.
   ═══════════════════════════════════════════════════════════════════════════ */
.fluxo-journey{ gap: 12px; }
/* o disco branco do logo cobre o centro; o que sobra do anel são 12px de aro */
.fluxo-anel{ width: 200px; height: 200px; margin-bottom: 6px; }
.fluxo-anel .processing-logo{ width: 176px; height: 176px; padding: 38px; }
/* antes do primeiro progresso o anel gira sozinho; depois, preenche */
.fluxo-journey:not([style*="--prog"]) .fluxo-anel::before,
.fluxo-journey[style*="--prog: 0"] .fluxo-anel::before,
.fluxo-journey[style*="--prog:0"] .fluxo-anel::before{
    background: conic-gradient(var(--lima,#7CB342), var(--amarelo,#F5C13D),
                               var(--laranja,#F0872E), var(--lima,#7CB342));
    animation: anelGira 2.6s linear infinite;
}
.fluxo-pct{ font-size: 18px; }
.fluxo-title{ font-size: 20px; }

.fluxo-frases{
    margin: 6px 0 0; min-height: 44px;
    max-width: 440px; text-align: center;
    font-size: 15px; line-height: 1.45; color: var(--text-tertiary);
    opacity: 0; transform: translateY(4px);
    transition: opacity .5s ease, transform .5s ease;
}
.fluxo-frases.visivel{ opacity: 1; transform: none; }

@media (max-width: 720px){
    .fluxo-anel{ width: 160px; height: 160px; }
    .fluxo-anel .processing-logo{ width: 140px; height: 140px; padding: 30px; }
    .fluxo-frases{ font-size: 14px; }
}
@media (prefers-reduced-motion: reduce){
    .fluxo-anel::before{ animation: none !important; }
    .fluxo-frases{ transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ENTREGAS DE GESTÃO DE PROCESSO — 21/09/2026
   POP, Indicadores, Handoffs, Pendências e RACI. Vocabulário visual igual ao
   das outras abas: cartão claro, cantos grandes, verde da marca no que importa.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── POP ──────────────────────────────────────────────────────────────────── */
.pop-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.pop-meta span{
    background:var(--bg-surface); border:1px solid var(--border-faint);
    border-radius:12px; padding:9px 14px; font-size:13px; color:var(--text-secondary);
}
.pop-meta b{ display:block; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--text-tertiary); margin-bottom:2px; }
.pop-objetivo{ font-size:14.5px; color:var(--text-secondary); margin:0 0 16px; max-width:70ch; }
.pop-pre{
    background:var(--bg-surface); border:1px solid var(--border-faint);
    border-radius:14px; padding:14px 18px; margin-bottom:18px;
}
.pop-pre-tit{ display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-tertiary); margin-bottom:8px; }
.pop-pre ul{ margin:0; padding-left:18px; }
.pop-pre li{ font-size:13.5px; color:var(--text-secondary); margin-bottom:4px; }

.pop-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pop-passo{ display:flex; gap:14px; background:var(--bg-surface);
    border:1px solid var(--border-faint); border-radius:16px; padding:16px 18px; }
.pop-n{
    flex:none; width:28px; height:28px; border-radius:50%;
    background:var(--accent); color:var(--on-accent,#fff);
    display:grid; place-items:center; font-size:13px; font-weight:800;
}
.pop-corpo b{ display:block; font-size:14.5px; margin-bottom:4px; color:var(--text-primary); }
.pop-corpo p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--text-secondary); }
.pop-atencao{
    margin-top:8px !important; padding:8px 12px;
    background:var(--amber-muted, rgba(240,135,46,.1));
    border-left:3px solid var(--laranja,#F0872E); border-radius:0 8px 8px 0;
    font-size:12.5px !important;
}
.pop-fim{
    margin-top:14px; padding:13px 18px;
    background:var(--emerald-muted, rgba(14,107,67,.08));
    border-radius:14px; font-size:13.5px; color:var(--text-secondary);
}

/* ── Indicadores ──────────────────────────────────────────────────────────── */
.ind-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; }
.ind-card{ background:var(--bg-surface); border:1px solid var(--border-faint);
    border-radius:16px; padding:16px 18px; border-top:3px solid var(--border-default); }
.ind-tempo{ border-top-color:#7CB342; } .ind-volume{ border-top-color:#F5C13D; }
.ind-qualidade{ border-top-color:#F0872E; } .ind-custo{ border-top-color:#0E6B43; }
.ind-nome{ display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-tertiary); }
.ind-valor{ display:block; font-size:24px; font-weight:800; letter-spacing:-.03em; margin:6px 0 8px; }
.ind-fonte{ display:block; font-size:12px; font-style:italic; color:var(--text-tertiary); line-height:1.45; }

/* ── Handoffs ─────────────────────────────────────────────────────────────── */
.ho-lista{ display:flex; flex-direction:column; gap:10px; }
.ho-item{ background:var(--bg-surface); border:1px solid var(--border-faint);
    border-radius:16px; padding:15px 18px; }
.ho-item.ho-risco{ border-color:rgba(240,135,46,.42); }
.ho-rota{ display:flex; align-items:center; gap:10px; font-size:14.5px; margin-bottom:6px; }
.ho-seta{ color:var(--accent); font-weight:700; }
.ho-oque{ margin:0; font-size:13.5px; color:var(--text-secondary); }
.ho-gatilho{ margin:6px 0 0; font-size:12.5px; color:var(--text-tertiary); }
.ho-alerta{
    margin:9px 0 0; padding:8px 12px; font-size:12.5px;
    background:var(--amber-muted, rgba(240,135,46,.1));
    border-left:3px solid var(--laranja,#F0872E); border-radius:0 8px 8px 0;
}

/* ── Pendências ───────────────────────────────────────────────────────────── */
.pend-lista{ display:flex; flex-direction:column; gap:10px; }
.pend-item{ background:var(--bg-surface); border:1px solid var(--border-faint);
    border-left:3px solid var(--laranja,#F0872E); border-radius:0 16px 16px 0; padding:15px 18px; }
.pend-q{ margin:0; font-size:14.5px; font-weight:600; color:var(--text-primary); }
.pend-pq{ margin:6px 0 0; font-size:13px; color:var(--text-secondary); line-height:1.5; }
.pend-quem{ display:inline-block; margin-top:9px; font-size:11.5px;
    background:var(--bg-base); border-radius:999px; padding:4px 11px; color:var(--text-tertiary); }

/* ── RACI ─────────────────────────────────────────────────────────────────── */
.raci-wrap{ overflow-x:auto; border:1px solid var(--border-faint); border-radius:16px;
    background:var(--bg-surface); }
.raci-tabela{ width:100%; border-collapse:collapse; font-size:13px; min-width:660px; }
.raci-tabela th{
    text-align:left; padding:12px 16px; font-size:10px; letter-spacing:.07em;
    text-transform:uppercase; color:var(--text-tertiary); background:var(--bg-base);
    border-bottom:1px solid var(--border-faint); white-space:nowrap;
}
.raci-tabela td{ padding:12px 16px; border-bottom:1px solid var(--border-faint); }
.raci-tabela tr:last-child td{ border-bottom:none; }
.raci-etapa{ font-weight:600; color:var(--text-primary); }
.raci-vazio{ color:var(--text-tertiary); }

/* ═══════════════════════════════════════════════════════════════════════════
   POP ROBUSTO + LGPD — 21/09/2026

   O POP virou o entregável central (o mais impresso e distribuído), então
   ganhou estrutura de documento: ficha, blocos de entrada/saída, passos com
   "onde/deu certo quando/decisão/erro comum", exceções e glossário.

   A aba LGPD é sinalização de risco, não parecer: a cor comunica gravidade
   (vermelho/âmbar/verde) e o aviso de rodapé é deliberadamente discreto mas
   sempre presente — quem lê precisa saber que aquilo pede validação humana.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── POP: blocos de contexto (antes/recebe/entrega/sistemas) ──────────────── */
.pop-blocos{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:12px; margin-bottom:20px;
}
.pop-bloco{
    background:var(--bg-surface); border:1px solid var(--border-faint);
    border-radius:14px; padding:14px 18px;
    border-left:3px solid var(--border-default,#d8ddd6);
}
.pop-b-pre{ border-left-color:var(--laranja,#F0872E); }
.pop-b-ent{ border-left-color:#5B8DEF; }
.pop-b-sai{ border-left-color:var(--accent,#0E6B43); }
.pop-b-sis{ border-left-color:#8B6FD1; }
.pop-bloco-tit{
    display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-tertiary); margin-bottom:8px; font-weight:700;
}
.pop-bloco ul{ margin:0; padding-left:18px; }
.pop-bloco li{ font-size:13.5px; line-height:1.5; color:var(--text-secondary); margin-bottom:5px; }
.pop-bloco li:last-child{ margin-bottom:0; }

/* ── POP: detalhes dentro de cada passo ───────────────────────────────────── */
.pop-onde{
    display:inline-block; margin-bottom:7px; padding:3px 9px;
    background:var(--bg-subtle,rgba(0,0,0,.04)); border-radius:7px;
    font-size:11.5px; font-family:ui-monospace,"SF Mono",Menlo,monospace;
    color:var(--text-tertiary);
}
.pop-ok, .pop-decisao, .pop-erro{
    margin-top:8px !important; padding:8px 12px;
    border-radius:0 8px 8px 0; font-size:12.5px !important; line-height:1.5;
}
.pop-ok{ background:var(--emerald-muted,rgba(14,107,67,.08)); border-left:3px solid var(--accent,#0E6B43); }
.pop-decisao{ background:rgba(91,141,239,.1); border-left:3px solid #5B8DEF; }
.pop-erro{ background:rgba(199,62,62,.09); border-left:3px solid #C73E3E; }
.pop-ok b, .pop-decisao b, .pop-erro b, .pop-atencao b{
    display:inline !important; font-size:inherit !important; margin:0 !important;
}

/* ── POP: exceções, escalonamento e glossário ─────────────────────────────── */
.pop-exc{
    margin-top:18px; padding:16px 18px; border-radius:14px;
    background:var(--bg-surface); border:1px solid var(--border-faint);
}
.pop-exc-item{ padding:10px 0; border-bottom:1px solid var(--border-faint); }
.pop-exc-item:last-child{ border-bottom:none; padding-bottom:0; }
.pop-exc-item b{ display:block; font-size:13.5px; color:var(--text-primary); margin-bottom:3px; }
.pop-exc-item p{ margin:0; font-size:13px; line-height:1.55; color:var(--text-secondary); }
.pop-esc{
    margin-top:10px; padding:12px 18px; border-radius:14px;
    background:var(--bg-surface); border:1px solid var(--border-faint);
    font-size:13.5px; color:var(--text-secondary);
}
.pop-gloss{
    margin-top:18px; padding:16px 18px; border-radius:14px;
    background:var(--bg-surface); border:1px solid var(--border-faint);
}
.pop-gloss dl{
    margin:0; display:grid; grid-template-columns:minmax(90px,auto) 1fr;
    gap:7px 16px; align-items:baseline;
}
.pop-gloss dt{ font-size:13px; font-weight:700; color:var(--text-primary); }
.pop-gloss dd{ margin:0; font-size:13px; line-height:1.5; color:var(--text-secondary); }

/* ── LGPD ─────────────────────────────────────────────────────────────────── */
.lgpd-resumo{ margin-bottom:16px; }
.lgpd-resumo p{ margin:0 0 10px; font-size:14.5px; line-height:1.6;
    color:var(--text-secondary); max-width:70ch; }
.lgpd-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.lgpd-tags span{
    padding:5px 12px; border-radius:20px; font-size:12px; font-weight:600;
    background:var(--bg-surface); border:1px solid var(--border-faint);
    color:var(--text-secondary);
}
.lgpd-tag-sens{ background:rgba(199,62,62,.1) !important; border-color:rgba(199,62,62,.3) !important; color:#A83232 !important; }
.lgpd-tag-alto{ background:rgba(240,135,46,.12) !important; border-color:rgba(240,135,46,.35) !important; color:#B4621A !important; }

.lgpd-lista{ display:flex; flex-direction:column; gap:12px; }
.lgpd-item{
    background:var(--bg-surface); border:1px solid var(--border-faint);
    border-radius:16px; padding:16px 18px; border-left:4px solid var(--border-default,#d8ddd6);
}
.lgpd-r-alto{ border-left-color:#C73E3E; }
.lgpd-r-medio{ border-left-color:var(--laranja,#F0872E); }
.lgpd-r-baixo{ border-left-color:var(--accent,#0E6B43); }
.lgpd-topo{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:8px; }
.lgpd-dado{ font-size:14.5px; color:var(--text-primary); }
.lgpd-sens, .lgpd-risco{
    padding:3px 10px; border-radius:20px; font-size:11px;
    font-weight:700; letter-spacing:.03em;
}
.lgpd-sens{ background:rgba(199,62,62,.12); color:#A83232; }
.lgpd-risco{ background:var(--bg-subtle,rgba(0,0,0,.05)); color:var(--text-tertiary); }
.lgpd-r-alto .lgpd-risco{ background:rgba(199,62,62,.12); color:#A83232; }
.lgpd-r-medio .lgpd-risco{ background:rgba(240,135,46,.14); color:#B4621A; }
.lgpd-r-baixo .lgpd-risco{ background:var(--emerald-muted,rgba(14,107,67,.1)); color:var(--accent,#0E6B43); }
.lgpd-onde{ margin:0 0 6px; font-size:12.5px; color:var(--text-tertiary); }
.lgpd-pa{ margin:0 0 8px; font-size:13.5px; line-height:1.55; color:var(--text-secondary); }
.lgpd-fonte{ display:block; font-size:12.5px; font-style:italic; color:var(--text-tertiary); }

.lgpd-limpo{
    padding:22px; border-radius:16px; text-align:center;
    background:var(--emerald-muted,rgba(14,107,67,.07));
    border:1px solid var(--border-faint);
}
.lgpd-limpo b{ display:block; font-size:15px; color:var(--text-primary); margin-bottom:6px; }
.lgpd-limpo p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--text-secondary); }

.lgpd-aviso{
    margin:18px 0 0; padding-top:14px; border-top:1px solid var(--border-faint);
    font-size:12px; line-height:1.55; color:var(--text-tertiary); max-width:75ch;
}

@media (max-width:600px){
    .pop-blocos{ grid-template-columns:1fr; }
    .pop-gloss dl{ grid-template-columns:1fr; gap:2px 0; }
    .pop-gloss dd{ margin-bottom:8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA DE CRÉDITO — MINUTOS DE ANÁLISE
   ---------------------------------------------------------------------------
   Mora no topbar, que nesta versão é uma pílula ESCURA (--chrome-ink). Por isso
   as cores aqui são camadas de branco translúcido, como em .topbar-profile-chip,
   e não os tokens de superfície clara — que sumiriam no fundo.

   Três estados, e a cor é só reforço: o número em texto diz a mesma coisa, para
   quem não distingue verde de âmbar não depender da cor para saber que o crédito
   está acabando.
   ═══════════════════════════════════════════════════════════════════════════ */

.credito-chip{
    display: inline-flex; align-items: center; gap: 9px;
    height: 34px; padding: 0 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.1);
    color: #fff;
    font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.credito-chip:hover{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); }
.credito-chip:focus-visible{ outline: 2px solid var(--lime); outline-offset: 2px; }
.credito-chip svg{ flex: none; opacity: .75; }
.credito-chip-valor{ white-space: nowrap; letter-spacing: -.01em; }

/* Comprida e fina, de propósito: a ESPESSURA continua em 5px (mais que isso
   engrossa a pílula e desequilibra o topbar), o que cresceu foi o percurso.
   Em 46px a proporção cheio/vazio mal se distinguia e a barra só confirmava o
   que o número já dizia; em 132px ela responde "ainda dá?" sozinha, sem a
   pessoa precisar ler nada. */
.credito-chip-trilho{
    flex: none; width: 132px; height: 5px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.2);
    overflow: hidden;
}
.credito-chip-nivel{
    display: block; height: 100%; width: 0;
    border-radius: inherit;
    background: var(--lime);
    transition: width var(--transition-slow), background var(--transition);
}

/* Atenção e esgotado. O âmbar do tema (--amber) é escuro demais para fundo
   escuro, então aqui vale o dourado da marca; o vermelho é clareado pelo mesmo
   motivo. */
.credito-chip[data-nivel="atencao"] .credito-chip-nivel{ background: #FFB020; }
.credito-chip[data-nivel="critico"] .credito-chip-nivel{ background: #FF6B6B; }
.credito-chip[data-nivel="critico"]{
    border-color: rgba(255,107,107,.55);
    background: rgba(255,107,107,.16);
}

/* ── O detalhe, em popover ─────────────────────────────────────────────────── */
.topbar-left{ position: relative; }

.credito-pop{
    position: absolute; top: calc(100% + 12px); left: 0; z-index: 900;
    width: 288px; padding: 18px;
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.credito-pop[hidden]{ display: none; }

.credito-pop-titulo{
    margin: 0; font-size: 10.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-tertiary);
}
.credito-pop-numero{
    margin: 8px 0 1px; font-size: 26px; font-weight: 800;
    letter-spacing: -.02em; color: var(--text-primary);
}
.credito-pop-legenda{
    margin: 0 0 14px; font-size: 12px; color: var(--text-secondary);
}

.credito-pop-trilho{
    height: 8px; border-radius: var(--radius-full);
    background: var(--neutral-muted); overflow: hidden;
}
.credito-pop-nivel{
    display: block; height: 100%; width: 0;
    border-radius: inherit; background: var(--emerald);
    transition: width var(--transition-slow), background var(--transition);
}
.credito-pop[data-nivel="atencao"] .credito-pop-nivel{ background: var(--amber); }
.credito-pop[data-nivel="critico"] .credito-pop-nivel{ background: var(--rose); }

.credito-pop-uso{
    margin: 8px 0 0; font-size: 12px; color: var(--text-secondary);
}

.credito-pop-detalhes{
    margin: 14px 0 0; padding: 14px 0 0; list-style: none;
    border-top: 1px solid var(--border-faint);
    display: grid; gap: 7px;
}
.credito-pop-detalhes li{
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-size: 12px; color: var(--text-secondary);
}
.credito-pop-detalhes b{
    font-weight: 600; color: var(--text-primary); white-space: nowrap;
}
/* A sobra do mês anterior é a informação que o usuário pediu para ficar
   explícita — ganha o dourado da marca para não se perder entre as outras. */
.credito-pop-detalhes li.credito-sobra b{ color: var(--accent); }

.credito-pop-aviso{
    margin: 14px 0 0; padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--amber-muted);
    border: 1px solid var(--amber-border);
    font-size: 12px; line-height: 1.5; color: var(--text-primary);
}
.credito-pop-aviso[hidden]{ display: none; }
.credito-pop[data-nivel="critico"] .credito-pop-aviso{
    background: var(--rose-muted); border-color: var(--rose-border);
}

/* ── O custo do arquivo escolhido, na tela de upload ──────────────────────── */
/* Dito ANTES do envio, que pode levar oito minutos: é o momento em que a pessoa
   ainda pode decidir não gastar. */
.credito-custo{
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0 0; padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--accent-muted);
    border: 1px solid var(--emerald-border);
    font-size: 12.5px; line-height: 1.5; color: var(--text-primary);
}
.credito-custo[hidden]{ display: none; }
.credito-custo svg{ flex: none; color: var(--accent); }
.credito-custo b{ font-weight: 700; }
.credito-custo[data-nivel="critico"]{
    background: var(--rose-muted); border-color: var(--rose-border);
}
.credito-custo[data-nivel="critico"] svg{ color: var(--rose); }

@media (max-width: 820px){
    /* Encurta, não some. No estreito o topbar esconde o texto do perfil, e a
       primeira versão daqui escondia a barra junto — mas o texto do perfil é
       enfeite e a barra não é. Perder o percurso inteiro no celular tiraria
       justamente a leitura de relance que faz ela existir. */
    .credito-chip-trilho{ width: 64px; }
    .credito-pop{ width: min(288px, calc(100vw - 32px)); }
}

/* abas visíveis (26/10/2026): as 17 abas não podem sumir à direita sem barra de rolagem */
.steps-nav{ flex-wrap: wrap; overflow: visible; row-gap: 2px; }
.steps-nav .tab-btn{ margin-bottom: 0; border-radius: 10px; border-bottom-width: 2px; }
@media (max-width: 760px){
    .steps-nav{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; }
    .steps-nav::-webkit-scrollbar{ display: block; height: 6px; }
    .steps-nav::-webkit-scrollbar-thumb{ background: var(--border-strong, #c9d3cc); border-radius: 999px; }
}

/* ── Identidade da empresa no envio (30/10/2026, processos/identidade.js) ── */
.identidade-empresa { margin-top: 14px; }
.ident-opcional { font-weight: 500; color: var(--text-tertiary); font-size: 12px; }
.ident-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ident-item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px dashed var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface); min-width: 0; }
.ident-item.ident-ok { border-style: solid; border-color: var(--accent); background: var(--accent-muted); }
.ident-previa { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-xs); background: #fff; border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden; }
.ident-previa img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ident-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ident-info b { font-size: 12.5px; color: var(--text-primary); }
.ident-info small { font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ident-acoes { display: flex; gap: 6px; margin-top: 4px; }
.ident-btn { font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; }
.ident-btn:hover { border-color: var(--accent); color: var(--accent); }
.ident-btn-tirar { color: var(--text-tertiary); }
.home-upload-step p.ident-nota { font-size: 11.5px; margin: 8px 0 0; }
.ident-nota code { font-size: 11px; padding: 1px 4px; border-radius: 4px; background: var(--accent-muted); }
.ident-erro { margin-top: 8px; font-size: 12px; color: #B42318; }