/* ============================================================
   NuvBox — Base mínima. Depois da repaginação (set/2026) o que
   sobrou aqui é só o que nenhum outro arquivo define: reset de
   margem, shell do layout e o overlay do antivírus no envio.
   Tudo o mais vive em tokens.css, components.css, explorador.css,
   formularios.css, admin.css, listas.css, visualizadores.css,
   login.css e preferencias.css. Não voltar a colocar componente aqui.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; }
a { color: inherit; }

/* ---------- Shell do layout (_Layout.vbhtml) ---------- */
.app-shell { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; }
.content { padding: 30px 36px; max-width: 1100px; }

/* ---------- Aviso de "verificando arquivo" durante o envio (antivírus) ----------
   Como o envio é um POST comum (não AJAX), o navegador já fica "esperando" a resposta
   sozinho - isso só cobre essa espera com uma mensagem, pra não parecer que travou enquanto
   o servidor salva e escaneia o arquivo. O miolo (etapas, barra) está em explorador.css. */
.np-overlay-verificando {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--np-overlay);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.np-overlay-verificando.np-overlay-verificando--ativo { display: flex; }
.np-overlay-verificando__caixa {
    background: var(--np-surface);
    border-radius: var(--np-radius-lg);
    box-shadow: var(--np-shadow-pop);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 340px;
}

/* ---------- Spinner (overlay do envio e botão "Entrando…" do login) ---------- */
.np-spinner {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 3px solid var(--np-border);
    border-top-color: var(--np-accent);
    flex-shrink: 0;
    animation: np-girar 0.8s linear infinite;
}
@keyframes np-girar {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .np-spinner { animation-duration: 2s; }
}

/* ---------- Responsivo (o layout em si; cada arquivo cuida das suas classes) ---------- */
@media (max-width: 960px) {
    .content { padding: 18px 16px; max-width: 100%; }
}

/* ============================================================
   NuvBox — Design tokens (direção 1c / enterprise)
   Fonte única de verdade: nunca hard-code cor, raio ou tamanho
   de fonte fora daqui. Ver components.css pros componentes que
   consomem essas variáveis.
   ============================================================ */
:root {
    /* ---- Cor de marca configurável ----
       --accent é injetada pelo _Layout a partir de CorPrincipal (Web.config) e pode ser
       sobrescrita no navegador pela preferência do usuário (ver preferencias.css / _Layout).
       Tudo que é "cor de ação" deriva dela - nunca use um azul fixo em componente. */
    --accent: #2563eb;

    /* ---- Superfícies ---- */
    --np-canvas: #f4f6f9;
    --np-surface: #ffffff;
    --np-surface-muted: #f8f9fb;
    --np-surface-sunk: #eef0f3;
    --np-ink-canvas: #0f172a;
    --np-ink-surface: #182238;

    /* ---- Texto ---- */
    --np-text: #101828;
    --np-text-muted: #475467;
    --np-text-subtle: #667085;
    --np-text-faint: #98a2b3;          /* só decorativo (separador, placeholder) - nunca em ícone clicável */
    --np-icon: #667085;                /* cor padrão de ícone interativo (4.8:1 sobre branco) */
    --np-text-on-dark: #ffffff;
    --np-text-on-dark-mute: rgba(255, 255, 255, .62);

    /* ---- Marca / ação ---- */
    --np-accent: var(--accent);
    --np-accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
    --np-accent-weak: color-mix(in srgb, var(--accent) 10%, #fff);   /* fundo de hover/seleção */
    --np-accent-light: #60a5fa;                                      /* barra de métrica em fundo escuro */
    --np-accent-text: var(--accent);                                 /* cor de destaque usada como TEXTO/ícone (no escuro é clareada) */

    /* ---- Peças que precisam de valor por tema e não cabiam nos grupos acima ---- */
    --np-overlay: rgba(15, 23, 42, .55);                             /* fundo do modal e do overlay de envio */
    --np-avatar-2-bg: #fef6ee; --np-avatar-2-fg: #b93815;
    --np-avatar-4-bg: #fbeaf0; --np-avatar-4-fg: #993556;
    --np-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: light;

    /* ---- Bordas ---- */
    --np-border: #e6e9ef;
    --np-border-strong: #d0d5dd;       /* campo de formulário, tracejado de vazio */
    --np-border-soft: #eef0f3;
    --np-border-on-dark: rgba(255, 255, 255, .14);

    /* ---- Semântica (só pra estado de permissão/risco - nunca decoração) ---- */
    --np-success: #067647;
    --np-success-weak: #ecfdf3;
    --np-success-border: #abefc6;
    --np-warning: #b54708;
    --np-warning-weak: #fffaeb;
    --np-warning-bg: #fffaeb;
    --np-warning-border: #fedf89;
    --np-danger: #d92d20;
    --np-danger-weak: #fef3f2;
    --np-danger-border: #fecdca;
    --np-info: #175cd3;
    --np-info-weak: #eff8ff;
    --np-info-border: #b2ddff;

    /* ---- Cor de "espaço" (faixa superior do card de pasta) ---- */
    --np-space-1: #2563eb;
    --np-space-2: #12866f;
    --np-space-3: #b93815;

    /* ---- Tipografia ---- */
    --np-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --np-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --np-weight-regular: 400;
    --np-text-body: 13.5px;
    --np-lh-body: 1.5;
    --np-text-ui: 13.5px;
    --np-text-title: 20px;
    --np-text-label: 11px;
    --np-text-metric: 24px;
    --np-text-card: 14px;
    --np-text-sm: 12.5px;
    --np-text-xs: 12px;

    /* ---- Espaçamento ---- */
    --np-space-1x: 4px;
    --np-space-2x: 8px;
    --np-space-3x: 12px;
    --np-space-4x: 16px;
    --np-space-5x: 20px;
    --np-space-6x: 24px;
    --np-space-7x: 32px;

    /* ---- Raio ---- */
    --np-radius-sm: 6px;
    --np-radius-md: 10px;
    --np-radius-lg: 14px;
    --np-radius-xl: 16px;

    /* ---- Sombra ---- */
    --np-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --np-shadow-md: 0 4px 16px rgba(16, 24, 40, .10);
    --np-shadow-pop: 0 12px 32px rgba(16, 24, 40, .16);

    /* ---- Controles ---- */
    --np-control-h: 40px;
    --np-control-h-sm: 32px;
    --np-touch: 36px;                  /* alvo mínimo de ação de linha (ícone) */
    --np-row-h: 52px;                  /* altura mínima de linha de arquivo */

    /* ---- Layout ---- */
    --np-sidebar-w: 238px;
    --np-header-pad: 24px 32px;
    --np-detail-w: 340px;

    /* ---- Foco / transição ---- */
    --np-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
    --np-transition: 140ms;
}

@media (prefers-reduced-motion: reduce) {
    :root { --np-transition: 0ms; }
}

/* ============================================================
   Tema escuro. O <html> recebe data-np-tema="escuro" pelo script do
   _Layout (preferência do usuário guardada no navegador; "sistema" é
   resolvido pelo script a partir de prefers-color-scheme). Sem JS,
   fica sempre claro. Só os tokens mudam - nenhum componente sabe que
   existe tema; quem precisou de ajuste pontual usa html[data-np-tema].
   Contraste: todo texto sobre superfície >= 4,5:1.
   ============================================================ */
html[data-np-tema="escuro"] {
    color-scheme: dark;

    --np-canvas: #0b1220;
    --np-surface: #131c2e;
    --np-surface-muted: #172238;
    --np-surface-sunk: #1f2b42;
    --np-ink-canvas: #1a2540;          /* header escuro fica um tom ACIMA do fundo (e ganha borda, ver components) */
    --np-ink-surface: #223052;

    --np-text: #e8ecf4;
    --np-text-muted: #b6bfd0;
    --np-text-subtle: #8d98ad;
    --np-text-faint: #5f6b82;
    --np-icon: #9aa6bb;

    --np-accent-hover: color-mix(in srgb, var(--accent) 80%, #fff);
    --np-accent-weak: color-mix(in srgb, var(--accent) 18%, var(--np-surface));
    --np-accent-text: color-mix(in srgb, var(--accent) 55%, #fff);
    --np-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);

    --np-border: #26334b;
    --np-border-strong: #36466a;
    --np-border-soft: #1f2b42;
    --np-border-on-dark: rgba(255, 255, 255, .12);

    --np-success: #4ade80;  --np-success-weak: color-mix(in srgb, #4ade80 14%, var(--np-surface));  --np-success-border: color-mix(in srgb, #4ade80 35%, var(--np-surface));
    --np-warning: #fbbf24;  --np-warning-weak: color-mix(in srgb, #fbbf24 14%, var(--np-surface));  --np-warning-border: color-mix(in srgb, #fbbf24 35%, var(--np-surface));
    --np-warning-bg: var(--np-warning-weak);
    --np-danger:  #f87171;  --np-danger-weak:  color-mix(in srgb, #f87171 14%, var(--np-surface));  --np-danger-border:  color-mix(in srgb, #f87171 35%, var(--np-surface));
    --np-info:    #7ab4ff;  --np-info-weak:    color-mix(in srgb, #7ab4ff 14%, var(--np-surface));  --np-info-border:    color-mix(in srgb, #7ab4ff 35%, var(--np-surface));

    --np-space-1: #60a5fa;
    --np-space-2: #34d399;
    --np-space-3: #fb923c;

    --np-overlay: rgba(2, 6, 23, .7);
    --np-avatar-2-bg: color-mix(in srgb, #fb923c 16%, var(--np-surface)); --np-avatar-2-fg: #fdba74;
    --np-avatar-4-bg: color-mix(in srgb, #f472b6 16%, var(--np-surface)); --np-avatar-4-fg: #f9a8d4;
    --np-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239aa6bb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --np-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --np-shadow-md: 0 4px 16px rgba(0, 0, 0, .5);
    --np-shadow-pop: 0 12px 32px rgba(0, 0, 0, .6);
}

/* ============================================================
   NuvBox — Componentes (direção 1c / enterprise)
   Depende de tokens.css (carregar antes deste arquivo).
   Usado hoje nas telas de "Arquivos" (visão geral + explorador).
   Admin e Login continuam no site.css - ver nota no fim do arquivo.
   ============================================================ */

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

body {
    background: var(--np-canvas);
    color: var(--np-text);
    font: var(--np-weight-regular) var(--np-text-body) / var(--np-lh-body) var(--np-font-sans);
    -webkit-font-smoothing: antialiased;
}

:focus-visible {
    outline: none;
    box-shadow: var(--np-focus-ring);
    border-radius: var(--np-radius-sm);
}

/* ---------- Grid da tela ---------- */
.np-content { padding: var(--np-space-6x) var(--np-space-7x); }

.np-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--np-space-4x);
}

.np-split {
    display: grid;
    grid-template-columns: 1fr var(--np-detail-w);
    gap: var(--np-space-4x);
    align-items: start;
}

/* ---------- Botão ---------- */
.np-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--np-space-2x);
    height: var(--np-control-h);
    padding: 0 16px;
    border-radius: var(--np-radius-sm);
    font-family: var(--np-font-sans);
    font-size: var(--np-text-ui);
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--np-transition), opacity var(--np-transition), transform var(--np-transition);
}
.np-btn svg { width: 15px; height: 15px; stroke-width: 2; color: currentColor; flex-shrink: 0; }
.np-btn--sm { height: var(--np-control-h-sm); padding: 0 12px; }
.np-btn:active { transform: translateY(1px); }
.np-btn[disabled], .np-btn.is-disabled { opacity: .45; pointer-events: none; }

.np-btn--primary { background: var(--np-accent); color: #fff; }
.np-btn--primary:hover { background: var(--np-accent-hover); color: #fff; text-decoration: none; }

/* Fundo branco fixo, então o texto também é fixo (escuro): com var(--np-text) o tema escuro
   pintava texto claro sobre branco e o botão do cabeçalho da empresa sumia. */
.np-btn--onDark { background: #fff; color: #101828; }
.np-btn--onDark:hover { opacity: .92; color: #101828; text-decoration: none; }
.np-btn--onDark svg { color: #101828; }

.np-btn--ghostDark { background: transparent; color: #fff; border: 1px solid var(--np-border-on-dark); }
.np-btn--ghostDark:hover { opacity: .92; color: #fff; text-decoration: none; }

.np-btn--secondary { background: var(--np-surface); color: var(--np-text); border: 1px solid var(--np-border); font-weight: 600; }
.np-btn--secondary:hover { background: var(--np-surface-muted); color: var(--np-text); text-decoration: none; }

/* ---------- Header escuro + card de métrica ---------- */
.np-header {
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.06), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,.05), transparent 45%),
        var(--np-ink-canvas);
    padding: var(--np-header-pad);
    border-radius: var(--np-radius-lg);
    margin-bottom: var(--np-space-6x);
    border: 1px solid transparent;
}
/* No escuro o header fica um tom acima do fundo (ver tokens) e precisa da borda pra ter contorno. */
html[data-np-tema="escuro"] .np-header { border-color: var(--np-border-strong); }
.np-header__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--np-space-4x); flex-wrap: wrap;
    margin-bottom: var(--np-space-5x);
}
.np-header__title { color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
.np-header__sub { color: var(--np-text-on-dark-mute); font-size: var(--np-text-ui); margin: 0; }

.np-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid var(--np-border-on-dark);
    border-radius: var(--np-radius-lg);
    overflow: hidden;
}
.np-metric-cell { background: var(--np-ink-surface); padding: 14px 16px; }
.np-metric-label {
    font-family: var(--np-font-mono);
    font-size: var(--np-text-label);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--np-text-on-dark-mute);
    margin-bottom: 6px;
}
.np-metric-value { font-family: var(--np-font-sans); font-size: var(--np-text-metric); font-weight: 800; color: #fff; letter-spacing: -.01em; }
.np-metric-note { font-size: var(--np-text-xs); color: var(--np-text-on-dark-mute); margin-top: 4px; }
.np-metric-note--warning { color: var(--np-warning-weak); }

.np-metric-bar-track { height: 4px; border-radius: 100px; background: rgba(255,255,255,.12); margin-top: 8px; overflow: hidden; }
.np-metric-bar-fill { height: 100%; border-radius: 100px; background: var(--np-accent-light); }

/* ---------- Rótulo eyebrow (mono, maiúsculo) ---------- */
.np-eyebrow {
    font-family: var(--np-font-mono);
    font-size: var(--np-text-label);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--np-text-subtle);
    margin: 0 0 var(--np-space-3x);
}
.np-eyebrow b { color: var(--np-text-faint); font-weight: 500; }

/* ---------- Card de espaço/pasta ---------- */
.np-space-card {
    display: block;
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--np-transition), box-shadow var(--np-transition);
}
.np-space-card:hover { border-color: var(--np-border-strong); box-shadow: var(--np-shadow-sm); text-decoration: none; color: inherit; }
.np-space-card__stripe { height: 5px; }
.np-space-card__stripe--1 { background: var(--np-space-1); }
.np-space-card__stripe--2 { background: var(--np-space-2); }
.np-space-card__stripe--3 { background: var(--np-space-3); }
.np-space-card__body { padding: var(--np-space-4x); }
.np-space-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--np-space-3x); }
.np-space-card__icon {
    width: 22px; height: 22px; color: var(--np-accent-text);
    display: flex; align-items: center; justify-content: center;
}
.np-space-card__icon svg { width: 20px; height: 20px; }
.np-space-card__name { font-size: var(--np-text-card); font-weight: 700; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-space-card__meta { font-size: var(--np-text-sm); color: var(--np-text-subtle); }
.np-space-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: var(--np-space-4x); padding-top: var(--np-space-3x);
    border-top: 1px solid var(--np-border-soft);
}
.np-space-card__open { font-size: var(--np-text-sm); font-weight: 700; color: var(--np-accent-text); }

/* ---------- Pilha de avatares ---------- */
.np-avatar-stack { display: flex; align-items: center; }
.np-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--np-font-mono); font-size: 9.5px; font-weight: 700;
    border: 2px solid var(--np-surface);
    margin-left: -8px;
    background: var(--np-info-weak); color: var(--np-info);
}
.np-avatar:first-child { margin-left: 0; }
.np-avatar--more { background: var(--np-surface-sunk); color: var(--np-text-muted); }

/* ---------- Badge de acesso ---------- */
.np-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--np-text-label);
    font-weight: 700; line-height: 1.2;
    border-radius: 100px;
    padding: 3px 8px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.np-badge svg { width: 11px; height: 11px; stroke-width: 2.4; flex-shrink: 0; }
.np-badge--public { color: var(--np-success); background: var(--np-success-weak); }
/* Âmbar = "nem todo mundo vê" (pasta restrita, arquivo confidencial). Mesma família de cor pros
   dois de propósito: é o estado que precisa saltar aos olhos, não o "aberta a todos". */
.np-badge--restricted, .np-badge--confidential { color: var(--np-warning); background: var(--np-warning-weak); border-color: var(--np-warning-border); }
.np-badge--warning { color: var(--np-warning); background: var(--np-warning-weak); }
.np-badge--info { color: var(--np-info); background: var(--np-info-weak); border-color: var(--np-info-border); }
.np-badge--blocked { color: var(--np-text-muted); background: var(--np-surface-sunk); }

/* ---------- Chip de tipo de arquivo ---------- */
.np-file-chip {
    width: 30px; height: 30px;
    border-radius: var(--np-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--np-font-mono); font-size: 9px; font-weight: 700;
    flex-shrink: 0;
}
.np-file-chip--sm { width: 26px; height: 26px; }
.np-file-chip--pdf { color: var(--np-danger); background: var(--np-danger-weak); }
.np-file-chip--xls { color: var(--np-success); background: var(--np-success-weak); }
.np-file-chip--doc { color: var(--np-info); background: var(--np-info-weak); }
.np-file-chip--outro { color: var(--np-text-muted); background: var(--np-surface-sunk); }
/* zip/xml reaproveitam as cores de "espaço" (--np-space-2/3, já usadas na faixa do card de
   pasta) só pela variedade visual - não são tokens semânticos de risco/permissão, por isso não
   usa --np-warning/--np-danger aqui (esses são reservados pra estado de permissão, ver tokens.css). */
.np-file-chip--zip { color: var(--np-space-3); background: rgba(185, 56, 21, 0.10); }
.np-file-chip--xml { color: var(--np-space-2); background: rgba(18, 134, 111, 0.10); }

/* ---------- Lista de arquivos ---------- */
.np-file-list { display: flex; flex-direction: column; }
.np-file-row {
    display: flex; align-items: center; gap: var(--np-space-3x);
    padding: 10px 0;
    border-bottom: 1px solid var(--np-border-soft);
    text-decoration: none; color: inherit;
    transition: background var(--np-transition);
}
.np-file-row:last-child { border-bottom: none; }
.np-file-row:hover { background: var(--np-surface-muted); margin: 0 -12px; padding: 10px 12px; text-decoration: none; color: inherit; }
.np-file-row__info { min-width: 0; flex: 1; }
.np-file-row__name {
    font-size: var(--np-text-ui); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.np-file-row__meta { font-size: var(--np-text-xs); color: var(--np-text-faint); margin-top: 2px; }
.np-file-row__time { font-size: var(--np-text-xs); color: var(--np-text-faint); white-space: nowrap; flex-shrink: 0; }
.np-file-row__action { font-size: var(--np-text-sm); font-weight: 700; color: var(--np-accent-text); flex-shrink: 0; }

/* ---------- Item de navegação (sidebar) ---------- */
.np-sidebar {
    width: var(--np-sidebar-w);
    background: var(--np-surface);
    border-right: 1px solid var(--np-border);
    padding: var(--np-space-4x) var(--np-space-3x);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.np-sidebar__brand {
    display: flex; align-items: center; gap: 10px;
    padding: 4px var(--np-space-2x) var(--np-space-5x);
    margin-bottom: var(--np-space-2x);
    border-bottom: 1px solid var(--np-border);
}
.np-sidebar__brand span { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--np-text); }
.np-sidebar__brand-mark {
    width: 34px; height: 34px;
    flex-shrink: 0;
    object-fit: contain;
}

.np-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: var(--np-radius-sm);
    font-size: var(--np-text-ui);
    font-weight: 500;
    color: var(--np-text-muted);
    text-decoration: none;
    margin-bottom: 2px;
    transition: background var(--np-transition), color var(--np-transition);
}
.np-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--np-icon); }
.np-nav-item:hover { background: var(--np-surface-sunk); color: var(--np-text); text-decoration: none; }
.np-nav-item:hover svg { color: var(--np-text-muted); }
.np-nav-item.is-active { background: var(--np-ink-canvas); color: #fff; font-weight: 600; }
.np-nav-item.is-active svg { color: #fff; }
/* No escuro o bloco azul-marinho sumiria no fundo: o item ativo usa o fundo fraco da cor de destaque. */
html[data-np-tema="escuro"] .np-nav-item.is-active { background: var(--np-accent-weak); color: var(--np-text); }
html[data-np-tema="escuro"] .np-nav-item.is-active svg { color: var(--np-accent-text); }
.np-nav-item--space { position: relative; }
.np-nav-item--space.is-current { background: var(--np-accent-weak); color: var(--np-text); font-weight: 600; }
.np-nav-item__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin: 0 3px; }
.np-nav-item__dot--1 { background: var(--np-space-1); }
.np-nav-item__dot--2 { background: var(--np-space-2); }
.np-nav-item__dot--3 { background: var(--np-space-3); }

.np-sidebar__search {
    display: flex; align-items: center; gap: 8px;
    height: var(--np-control-h-sm); padding: 0 10px;
    border-radius: var(--np-radius-sm); border: 1px solid var(--np-border);
    background: var(--np-surface-muted);
    margin: 0 4px var(--np-space-3x);
}
.np-sidebar__search svg { width: 14px; height: 14px; color: var(--np-icon); flex-shrink: 0; }
.np-sidebar__search input {
    border: none; outline: none; width: 100%; background: transparent;
    font-family: var(--np-font-sans); font-size: 12.5px;
}

.np-sidebar__profile {
    margin-top: auto; padding-top: var(--np-space-3x);
    border-top: 1px solid var(--np-border);
    display: flex; align-items: center; gap: 10px; padding: var(--np-space-3x) 4px 4px;
}
.np-sidebar__profile-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--np-info-weak); color: var(--np-info);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--np-font-mono); font-size: 11px; font-weight: 700;
}
.np-sidebar__profile-avatar--foto { object-fit: cover; background: var(--np-surface-sunk); }
.np-sidebar__profile-info { min-width: 0; flex: 1; }
.np-sidebar__profile-name {
    font-size: 12.5px; font-weight: 700; color: var(--np-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.np-sidebar__profile-role { font-size: 11.5px; color: var(--np-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-sidebar__profile-logout {
    flex-shrink: 0; color: var(--np-icon);
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--np-radius-sm);
}
.np-sidebar__profile-logout:hover { background: var(--np-surface-sunk); color: var(--np-text); }
.np-sidebar__profile-logout svg { width: 15px; height: 15px; }

/* ---------- Alerta de governança ---------- */
.np-alert {
    display: flex; gap: var(--np-space-3x);
    padding: 11px;
    border-radius: var(--np-radius-md);
    border: 1px solid var(--np-border);
    background: var(--np-surface);
}
.np-alert svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--np-accent-text); }
.np-alert--warning { background: var(--np-warning-bg); border-color: var(--np-warning-border); }
.np-alert--warning svg { color: var(--np-warning); }
.np-alert--positive svg { color: var(--np-success); }
.np-alert__title { font-size: var(--np-text-ui); font-weight: 600; color: var(--np-text); margin: 0 0 2px; }
.np-alert__desc { font-size: var(--np-text-xs); color: var(--np-text-subtle); margin: 0; }

/* ---------- Breadcrumb ---------- */
.np-breadcrumb {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: var(--np-text-ui); color: var(--np-text-muted);
    margin-bottom: var(--np-space-5x);
}
.np-breadcrumb a { color: var(--np-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.np-breadcrumb a:hover { color: var(--np-accent-text); text-decoration: none; }
.np-breadcrumb a:last-child { color: var(--np-text); font-weight: 600; }
.np-breadcrumb__sep { color: var(--np-text-faint); }
.np-breadcrumb svg { width: 14px; height: 14px; }

/* ---------- Barra de ações (busca + toolbar) ---------- */
.np-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--np-space-3x); margin-bottom: var(--np-space-4x); flex-wrap: wrap;
}
.np-search {
    display: flex; align-items: center; gap: 8px;
    height: var(--np-control-h); padding: 0 12px;
    border-radius: var(--np-radius-sm); border: 1px solid var(--np-border);
    background: var(--np-surface); flex: 1; min-width: 200px; max-width: 320px;
}
.np-search svg { width: 15px; height: 15px; color: var(--np-text-faint); flex-shrink: 0; }
.np-search input {
    border: none; outline: none; width: 100%; background: transparent;
    font-family: var(--np-font-sans); font-size: var(--np-text-ui);
}
.np-toolbar-actions { display: flex; align-items: center; gap: 10px; }

.np-popover { position: relative; }
.np-popover > summary { list-style: none; cursor: pointer; }
.np-popover > summary::-webkit-details-marker { display: none; }
.np-popover__panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 10;
    background: var(--np-surface); border: 1px solid var(--np-border);
    border-radius: var(--np-radius-md); box-shadow: var(--np-shadow-pop);
    padding: 14px; display: flex; align-items: center; gap: 10px; min-width: 250px;
}
.np-popover__panel input[type=text], .np-popover__panel input[type=file] {
    font-size: var(--np-text-ui); padding: 8px 10px; border-radius: var(--np-radius-sm);
    border: 1px solid var(--np-border); outline: none; font-family: var(--np-font-sans);
    flex: 1; min-width: 0;
}
.np-popover__panel input[type=text]:focus { border-color: var(--np-accent); }

/* ---------- Painel (agrupa uma seção de conteúdo numa superfície com borda) ---------- */
.np-panel {
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-lg);
    padding: var(--np-space-5x);
    margin-bottom: var(--np-space-5x);
}
.np-panel > .np-eyebrow:first-child { margin-top: 0; }
.np-panel--narrow { max-width: 460px; }

/* ---------- Badge extra (estado de risco/desativado) ---------- */
.np-badge--danger { color: var(--np-danger); background: var(--np-danger-weak); }

/* ---------- Avatar grande (iniciais de empresa/pessoa, ou ícone de pasta) ---------- */
.np-avatar-lg {
    width: 38px; height: 38px; border-radius: var(--np-radius-md);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--np-font-mono); font-size: 13px; font-weight: 700;
    flex-shrink: 0;
}
.np-avatar-lg svg { width: 18px; height: 18px; }
.np-avatar-lg--1 { background: var(--np-info-weak); color: var(--np-info); }
.np-avatar-lg--2 { background: var(--np-avatar-2-bg); color: var(--np-avatar-2-fg); }
.np-avatar-lg--3 { background: var(--np-success-weak); color: var(--np-success); }
.np-avatar-lg--4 { background: var(--np-avatar-4-bg); color: var(--np-avatar-4-fg); }
.np-avatar-lg--foto { object-fit: cover; background: var(--np-surface-sunk); }

/* ---------- Avatar com indicador de status (funcionário ativo/desativado) ---------- */
.np-avatar-wrap { position: relative; flex-shrink: 0; }
.np-avatar-dot {
    position: absolute; bottom: -2px; right: -2px;
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--np-surface);
}
.np-avatar-dot--on { background: var(--np-success); }
.np-avatar-dot--off { background: var(--np-text-faint); }

/* ---------- Chip de filtro (ex: filtrar funcionários por grupo) ---------- */
.np-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 100px;
    border: 1px solid var(--np-border); background: var(--np-surface);
    color: var(--np-text-muted); font-size: var(--np-text-sm); font-weight: 600;
    cursor: pointer; transition: var(--np-transition);
}
.np-chip:hover { border-color: var(--np-accent-light); }
.np-chip--ativo { border-color: var(--np-accent); background: var(--np-info-weak); color: var(--np-info); }

/* ---------- Barra de progresso (superfície clara - cota de empresa/cliente) ---------- */
.np-progress-track { height: 5px; border-radius: 100px; background: var(--np-surface-sunk); overflow: hidden; }
.np-progress-fill { height: 100%; border-radius: 100px; background: var(--np-accent); }

/* ---------- Card de entidade genérico (empresa, cliente, funcionário, pasta em listas de admin) ---------- */
.np-entity-card {
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-lg);
    padding: var(--np-space-4x);
    text-decoration: none; color: inherit; display: block;
    transition: border-color var(--np-transition), box-shadow var(--np-transition);
}
a.np-entity-card:hover { border-color: var(--np-border-strong); box-shadow: var(--np-shadow-sm); text-decoration: none; color: inherit; }
.np-entity-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--np-space-3x); }
.np-entity-card__name { font-size: var(--np-text-card); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-entity-card__meta { font-size: var(--np-text-sm); color: var(--np-text-subtle); margin-top: 2px; }
.np-entity-card__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--np-space-2x); }
.np-entity-card__actions {
    display: flex; align-items: center; gap: var(--np-space-4x); flex-wrap: wrap;
    margin-top: var(--np-space-3x); padding-top: var(--np-space-3x);
    border-top: 1px solid var(--np-border-soft);
}
.np-entity-card__actions form { display: inline; margin: 0; }
.np-entity-card__actions button.np-text-link { background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }
.np-text-link--danger { color: var(--np-danger); }
.np-text-link--danger:hover { color: var(--np-danger); opacity: .8; }

/* ---------- Card de entidade compacto (ex: funcionário, quando a lista pode ter muitos) ---------- */
.np-entity-card--compact { padding: var(--np-space-3x); }
.np-entity-card--compact .np-entity-card__head { margin-bottom: 6px; gap: 10px; }
.np-entity-card--compact .np-avatar-lg { width: 30px; height: 30px; font-size: 11px; }
.np-entity-card--compact .np-entity-card__meta { margin-top: 0; }
.np-entity-card--compact .np-entity-card__badges { margin-top: 6px; }
.np-entity-card--compact .np-entity-card__actions { margin-top: 8px; padding-top: 8px; gap: var(--np-space-3x); font-size: var(--np-text-sm); }

/* ---------- Menu "⋯" (ações secundárias) - <details>/<summary> nativo, sem JS -----------
   O <summary> é só o ícone de três pontos (sem seta nativa do navegador, escondida abaixo
   em várias formas pra cobrir Chrome/Edge/Safari e Firefox); a lista abre FLUTUANDO por cima
   do card (position:absolute), não empurra o resto do conteúdo pra baixo. */
.np-menu { position: relative; display: inline-block; margin-left: auto; }
.np-menu > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--np-radius-sm, 6px);
    color: var(--np-text-subtle);
}
.np-menu > summary::marker { content: ""; display: none; }
.np-menu > summary::-webkit-details-marker { display: none; }
.np-menu > summary:hover { background: var(--np-surface-sunk); color: var(--np-text-muted); }
.np-menu[open] > summary { background: var(--np-surface-sunk); color: var(--np-accent-text); }
.np-menu__list {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
    background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-radius-md);
    box-shadow: var(--np-shadow-md, var(--np-shadow-sm)); padding: 6px 6px 10px; min-width: 190px;
    display: flex; flex-direction: column; gap: 2px;
}
.np-menu__list a.np-text-link, .np-menu__list form { display: block; }
.np-menu__list a.np-text-link, .np-menu__list button.np-text-link {
    display: block; width: 100%; text-align: left; padding: 7px 8px; border-radius: var(--np-radius-sm, 4px);
    background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--np-text-sm); font-weight: 600;
}
.np-menu__list a.np-text-link:hover, .np-menu__list button.np-text-link:hover { background: var(--np-surface-sunk); text-decoration: none; }
.np-menu__list form { margin: 0; }
.np-menu__list form:last-child { margin-bottom: 0; }
.np-menu__upload { cursor: pointer; }
.np-menu__upload input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ---------- Card compacto de funcionário (só o nome aparece; clicar no card expande e mostra
   e-mail/pasta/cota/badges/editar; o "⋮" no canto abre as ações menos comuns direto, sem
   precisar expandir) - mantém o layout em grid de cards, só que compacto, pra empresas com
   muitos funcionários não deixarem a página enorme. ---------- */
.np-func-card { position: relative; }
.np-func-card__details { width: 100%; }
.np-func-card__details > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 10px;
    padding-right: 30px;
}
.np-func-card__details > summary::marker { content: ""; display: none; }
.np-func-card__details > summary::-webkit-details-marker { display: none; }
.np-func-card__details > summary:hover .np-func-card__name { color: var(--np-accent-text); }
.np-func-card__name { font-size: var(--np-text-card); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.np-func-card__body { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--np-border-soft); display: flex; flex-direction: column; gap: 8px; }
.np-func-card__kebab.np-menu { position: absolute; top: var(--np-space-3x); right: var(--np-space-3x); margin: 0; z-index: 5; }

/* ---------- Link de ação secundária (texto simples, sem borda) ---------- */
.np-text-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--np-text-sm); font-weight: 600;
    color: var(--np-text-muted);
    text-decoration: none;
}
.np-text-link:hover { color: var(--np-accent-text); text-decoration: none; }
.np-text-link svg { width: 14px; height: 14px; }

/* ---------- Utilitário ---------- */
.np-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 40px 30px;
    border: 1px dashed var(--np-border);
    border-radius: var(--np-radius-lg);
    color: var(--np-text-subtle);
}

/* ============================================================
   Responsivo - fica por ÚLTIMO no arquivo de propósito: regra de
   media query só vence uma regra normal (fora de @media) pra
   mesma classe se vier DEPOIS dela no arquivo (mesma especificidade,
   quem for declarado por último no CSS vence). Bloco em cima dessas
   classes (ex: .np-sidebar lá em cima) fazia a versão mobile ser
   ignorada mesmo com a media query batendo. Não mover pra cima de novo.
   ============================================================ */
@media (max-width: 1200px) {
    .np-card-grid { grid-template-columns: repeat(2, 1fr); }
    .np-split { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
    .np-card-grid { grid-template-columns: repeat(2, 1fr); }
    .np-metric-grid { grid-template-columns: repeat(2, 1fr); }
    .np-content { padding: var(--np-space-4x); }

    .app-shell { flex-direction: column; }
    .np-sidebar {
        width: 100%;
        flex-direction: row;
        align-items: center;
        padding: var(--np-space-2x) var(--np-space-3x);
        overflow-x: auto;
    }
    .np-sidebar__brand {
        border-bottom: none;
        border-right: 1px solid var(--np-border);
        padding: 0 var(--np-space-3x) 0 0;
        margin: 0 var(--np-space-2x) 0 0;
        flex-shrink: 0;
    }
    .np-nav-item { white-space: nowrap; margin-bottom: 0; }

    /* Espaços/busca só cabem numa barra lateral vertical - some no modo horizontal;
       a tela de visão geral (link "Arquivos") continua dando acesso a todas as pastas. */
    .np-sidebar > .np-eyebrow, .np-sidebar__search, #listaEspacos { display: none; }
    .np-sidebar__profile {
        margin: 0 0 0 auto; padding: 0 0 0 var(--np-space-2x);
        border-top: none; flex-shrink: 0;
    }
    .np-sidebar__profile-info { display: none; }

    .np-header__top { flex-direction: column; align-items: flex-start; }
    .np-toolbar { flex-direction: column; align-items: stretch; }
    .np-search { max-width: none; }

    /* Antes disso o painel do popover herdava width:100% da própria <details>, que
       encolhe pro tamanho do botão que abre ela (bem estreita) - o painel ficava
       espremido do tamanho do botão em vez do tamanho da tela. Agora a <details>
       vira largura cheia primeiro, aí então o painel (100% dela) fica largo de verdade. */
    .np-toolbar-actions { width: 100%; flex-direction: column; align-items: stretch; gap: var(--np-space-2x); }
    .np-toolbar-actions .np-popover { width: 100%; }
    .np-toolbar-actions .np-popover > summary { width: 100%; justify-content: center; }
    .np-popover__panel { left: 0; right: 0; min-width: 0; width: auto; flex-wrap: wrap; }
    .np-popover__panel input[type=text], .np-popover__panel input[type=file] { min-width: 120px; }

    .np-file-row { flex-wrap: wrap; }
}

@media (max-width: 560px) {
    .np-card-grid { grid-template-columns: 1fr; }
    .np-metric-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   NuvBox — Explorador de pasta (Views/Arquivos/Index.vbhtml) e as
   peças reaproveitáveis que nasceram nele: botão de ícone, ação de
   linha, alerta com fechar, campos de popover, modal de confirmação.
   Depende de tokens.css e components.css (carregar DEPOIS dos dois).
   Regra do arquivo: só classe nova ou modificador. Nenhuma classe de
   components.css/site.css é redefinida aqui; onde precisa ajustar um
   componente base dentro do explorador, o seletor é descendente
   (ex: ".np-row-actions .np-menu > summary"), nunca a classe solta.

   Modo de exibição: o <html> carrega data-np-modo="cards" (padrão)
   ou "lista" (escolha do usuário, gravada em localStorage - ver
   _Layout.vbhtml). O markup é um só; este CSS decide se pasta vira
   card ou linha e se as ações ficam à vista ou no menu "⋯".
   ============================================================ */

/* ---------- Botão de ícone (antes era style inline em 5 views) ---------- */
.np-icon-btn {
    width: var(--np-touch); height: var(--np-touch); border-radius: var(--np-radius-sm);
    border: none; background: none; color: var(--np-icon); cursor: pointer; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    text-decoration: none; font-family: inherit;
    transition: background var(--np-transition), color var(--np-transition);
}
.np-icon-btn svg { width: 17px; height: 17px; }
.np-icon-btn:hover { background: var(--np-surface-sunk); color: var(--np-text); text-decoration: none; }
.np-icon-btn.is-on { color: var(--np-warning); }
.np-icon-btn--danger:hover { background: var(--np-danger-weak); color: var(--np-danger); }
.np-vsep { width: 1px; height: 20px; background: var(--np-border); margin: 0 4px; flex-shrink: 0; }

/* ---------- Ação principal de linha (texto + ícone) ---------- */
.np-action {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
    border-radius: var(--np-radius-sm); font-size: var(--np-text-sm); font-weight: 700;
    color: var(--np-accent-text); text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.np-action svg { width: 15px; height: 15px; }
.np-action:hover { background: var(--np-accent-weak); color: var(--np-accent-text); text-decoration: none; }
.np-action--blocked { color: var(--np-text-subtle); font-weight: 600; cursor: help; }
.np-action--blocked:hover { background: var(--np-surface-sunk); color: var(--np-text-subtle); }

/* ---------- Cabeçalho de página (claro - o header escuro fica pra dashboards) ---------- */
.np-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.np-topline .np-breadcrumb { margin-bottom: 0; }
.np-topline__links { display: flex; align-items: center; gap: 16px; }
.np-page { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--np-space-4x); flex-wrap: wrap; margin-bottom: var(--np-space-5x); }
.np-page__title { font-size: var(--np-text-title); font-weight: 700; letter-spacing: -.01em; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.np-page__sub { margin: 5px 0 0; color: var(--np-text-subtle); font-size: var(--np-text-sm); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-page__sub .np-text-link { font-size: var(--np-text-sm); }

/* ---------- Cartão de cota da empresa (canto do cabeçalho) ---------- */
.np-quota { min-width: 240px; padding: 10px 14px; background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-radius-md); }
.np-quota__row { display: flex; justify-content: space-between; gap: 10px; font-size: var(--np-text-xs); color: var(--np-text-muted); }
.np-quota__row b { color: var(--np-text); font-weight: 700; white-space: nowrap; }
.np-quota__track { height: 6px; border-radius: 100px; background: var(--np-surface-sunk); overflow: hidden; margin-top: 7px; }
.np-quota__fill { height: 100%; border-radius: 100px; background: var(--np-accent); }
.np-quota--warn .np-quota__fill { background: var(--np-warning); }
.np-quota--over { border-color: var(--np-danger-border); background: var(--np-danger-weak); }
.np-quota--over .np-quota__fill { background: var(--np-danger); }
.np-quota--over .np-quota__row b { color: var(--np-danger); }

/* ---------- Linha do arquivo recém-enviado ---------- */
.np-list__row--novo { box-shadow: inset 3px 0 0 var(--np-success); background: var(--np-success-weak); }
.np-badge--new { color: var(--np-success); background: var(--np-success-weak); border-color: var(--np-success-border); }

/* ---------- Toolbar: busca com "limpar" e alternador de modo ---------- */
.np-search:focus-within { border-color: var(--np-accent); box-shadow: var(--np-focus-ring); }
.np-search__clear { display: none; width: 26px; height: 26px; margin-right: -6px; }
.np-search__clear svg { width: 13px; height: 13px; }
.np-search.has-value .np-search__clear { display: inline-flex; }
.np-search input[type=search]::-webkit-search-cancel-button { display: none; }

.np-modo { display: inline-flex; gap: 2px; padding: 2px; height: var(--np-control-h-sm); border: 1px solid var(--np-border); border-radius: var(--np-radius-sm); background: var(--np-surface); }
.np-modo__btn { width: 30px; border: none; background: none; border-radius: 4px; color: var(--np-icon); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.np-modo__btn svg { width: 15px; height: 15px; }
.np-modo__btn:hover { background: var(--np-surface-sunk); color: var(--np-text); }
.np-modo__btn[data-modo="cards"] { background: var(--np-ink-canvas); color: #fff; }
html[data-np-modo="lista"] .np-modo__btn[data-modo="cards"] { background: none; color: var(--np-icon); }
html[data-np-modo="lista"] .np-modo__btn[data-modo="lista"] { background: var(--np-ink-canvas); color: #fff; }
/* No escuro o botão ativo do modo usa o fundo fraco da cor de destaque (o azul-marinho sumiria). */
html[data-np-tema="escuro"]:not([data-np-modo="lista"]) .np-modo__btn[data-modo="cards"],
html[data-np-tema="escuro"][data-np-modo="lista"] .np-modo__btn[data-modo="lista"] { background: var(--np-accent-weak); color: var(--np-accent-text); }

/* ---------- Popover em formato de formulário (modificador de .np-popover__panel) ---------- */
.np-popover__panel--form { width: 340px; min-width: 0; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
.np-popover__panel--form form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.np-popover__title { font-size: var(--np-text-card); font-weight: 700; margin: 0; }
/* .np-field, .np-input e .np-field__hint vêm do kit (formularios.css). */
.np-popover__actions { display: flex; justify-content: flex-end; gap: 8px; }

.np-dropzone {
    position: relative; display: block; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--np-border-strong); border-radius: var(--np-radius-md); padding: 20px 16px;
    background: var(--np-surface-muted); color: var(--np-text-muted); font-size: var(--np-text-sm);
}
.np-dropzone:hover, .np-dropzone.is-over { border-color: var(--np-accent); background: var(--np-accent-weak); }
.np-dropzone:focus-within { box-shadow: var(--np-focus-ring); }
.np-dropzone > svg { width: 26px; height: 26px; color: var(--np-accent-text); margin-bottom: 6px; }
.np-dropzone strong { display: block; color: var(--np-text); margin-bottom: 2px; }
.np-dropzone small { display: block; color: var(--np-text-subtle); font-size: var(--np-text-xs); margin-top: 6px; }
.np-dropzone__nome { display: block; margin-top: 8px; font-weight: 700; color: var(--np-accent-text); overflow-wrap: anywhere; }
.np-dropzone__nome:empty { display: none; }
/* Campo de arquivo fica fora da tela (não display:none, senão o "required" não consegue
   avisar e o envio trava calado). O <label> em volta é quem abre o seletor. */
.np-dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; left: 0; bottom: 0; }

/* ---------- Alerta: corpo, variantes novas e botão de fechar (complementa .np-alert) ---------- */
.np-alert__body { flex: 1; min-width: 0; }
.np-alert__close { margin: -8px -8px -8px 0; color: var(--np-icon); }
.np-alert__close svg { color: inherit; width: 15px; height: 15px; }
.np-alert--danger { background: var(--np-danger-weak); border-color: var(--np-danger-border); }
.np-alert--danger > svg { color: var(--np-danger); }
.np-alert--info { background: var(--np-info-weak); border-color: var(--np-info-border); }
.np-alert--info > svg { color: var(--np-info); }

/* ---------- Painel com cabeçalho (eyebrow + o que mais couber à direita) ---------- */
.np-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--np-space-3x); }
.np-panel__head .np-eyebrow { margin: 0; }

/* ---------- Pastas: card (modo cards) ou linha (modo lista) ---------- */
.np-folder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.np-folder-card {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0;
    background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-radius-md);
    text-decoration: none; color: inherit;
    transition: border-color var(--np-transition), box-shadow var(--np-transition), background var(--np-transition);
}
.np-folder-card:hover { border-color: var(--np-border-strong); box-shadow: var(--np-shadow-sm); text-decoration: none; color: inherit; }
.np-folder-card:hover .np-folder-card__name > span:first-child { color: var(--np-accent-text); }
.np-folder-ico { width: 32px; height: 32px; border-radius: var(--np-radius-sm); background: var(--np-accent-weak); color: var(--np-accent-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.np-folder-ico svg { width: 18px; height: 18px; }
.np-folder-ico--restricted { background: var(--np-warning-weak); color: var(--np-warning); }
/* Visão geral: o ícone leva a cor do espaço (no lugar da faixa colorida de antes). Pessoal usa a
   cor de destaque (padrão do .np-folder-ico); compartilhada aberta usa a cor de espaço 2. */
.np-folder-ico--lg { width: 34px; height: 34px; border-radius: var(--np-radius-md); }
.np-folder-ico--shared { background: rgba(18, 134, 111, .12); color: var(--np-space-2); }

/* ---------- Card de espaço (visão geral): cabeçalho com ícone + badge, rodapé "quem vê" ---------- */
.np-space-card--flat { padding: var(--np-space-4x); }
.np-space-card--flat .np-space-card__head { gap: 8px; }
.np-space-card--flat .np-space-card__footer { min-height: 38px; gap: 10px; }
.np-space-card--flat:hover .np-space-card__name { color: var(--np-accent-text); }
.np-space-card__who { font-size: var(--np-text-xs); color: var(--np-text-subtle); display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.np-space-card__open svg { width: 14px; height: 14px; }
.np-space-card__open { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.np-metric-bar-fill--over { background: #f97066; }

/* Lista "Enviados recentemente" da visão geral: cinco colunas (arquivo, pasta, quando, tamanho, ação).
   Seletor com duas classes de propósito, pra vencer a variante de modo "lista" do explorador. */
.np-list.np-list--recentes .np-list__head, .np-list.np-list--recentes .np-list__row { grid-template-columns: minmax(0, 1fr) 190px 120px 84px 120px; }
.np-folder-card__body { min-width: 0; flex: 1; }
.np-folder-card__name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--np-text-ui); font-weight: 600; }
.np-folder-card__name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-folder-card__open { display: none; }

html[data-np-modo="lista"] .np-folder-grid { display: flex; flex-direction: column; gap: 0; margin: 0 calc(-1 * var(--np-space-5x)) calc(-1 * var(--np-space-5x)); border-top: 1px solid var(--np-border); }
html[data-np-modo="lista"] .np-folder-card { border: none; border-radius: 0; border-bottom: 1px solid var(--np-border-soft); padding: 8px var(--np-space-5x); min-height: var(--np-row-h); }
html[data-np-modo="lista"] .np-folder-card:last-child { border-bottom: none; border-radius: 0 0 var(--np-radius-lg) var(--np-radius-lg); }
html[data-np-modo="lista"] .np-folder-card:hover { background: var(--np-surface-muted); box-shadow: none; }
html[data-np-modo="lista"] .np-folder-card__open { display: inline-flex; align-items: center; gap: 6px; font-size: var(--np-text-sm); font-weight: 700; color: var(--np-accent-text); flex-shrink: 0; }
html[data-np-modo="lista"] .np-folder-card__open svg { width: 15px; height: 15px; }

/* ---------- Arquivos: lista com colunas ---------- */
.np-list { margin: 0 calc(-1 * var(--np-space-5x)) calc(-1 * var(--np-space-5x)); border-top: 1px solid var(--np-border); }
.np-list__head, .np-list__row {
    display: grid; grid-template-columns: minmax(0, 1fr) 140px 84px 330px;
    gap: 12px; align-items: center; padding: 0 var(--np-space-5x);
}
html[data-np-modo="lista"] .np-list__head, html[data-np-modo="lista"] .np-list__row { grid-template-columns: minmax(0, 1fr) 140px 84px 200px; }
.np-list__head {
    height: 40px; background: var(--np-surface-muted); border-bottom: 1px solid var(--np-border);
    font-family: var(--np-font-mono); font-size: var(--np-text-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--np-text-subtle);
}
.np-list__row { min-height: var(--np-row-h); padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--np-border-soft); transition: background var(--np-transition); }
.np-list__row:last-child { border-bottom: none; border-radius: 0 0 var(--np-radius-lg) var(--np-radius-lg); }
.np-list__row:hover { background: var(--np-surface-muted); }
.np-list__row--blocked .np-item__name { color: var(--np-text-muted); }

.np-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np-item__info { min-width: 0; flex: 1; }
.np-item__name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--np-text-ui); font-weight: 600; }
.np-item__name > a, .np-item__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.np-item__name > a:hover { color: var(--np-accent-text); text-decoration: none; }
.np-item__badges { display: inline-flex; gap: 6px; flex-shrink: 0; }
.np-item__meta { font-size: var(--np-text-xs); color: var(--np-text-subtle); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-item__meta--mobile { display: none; }
.np-cell { font-size: var(--np-text-sm); color: var(--np-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-cell--num { font-variant-numeric: tabular-nums; }

.np-row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.np-row-actions form { display: inline-flex; margin: 0; }
.np-row-actions__inline { display: flex; align-items: center; gap: 2px; }
.np-row-actions .np-menu { display: none; margin: 0; }
html[data-np-modo="lista"] .np-row-actions__inline { display: none; }
html[data-np-modo="lista"] .np-row-actions .np-menu { display: inline-block; }
/* o gatilho do "⋯" aqui é um .np-icon-btn de 36px, não a versão de 26px do card de funcionário */
.np-row-actions .np-menu > summary { width: auto; height: auto; border-radius: 0; }
.np-row-actions .np-menu > summary:hover { background: none; }
.np-row-actions .np-menu[open] > summary .np-icon-btn { background: var(--np-surface-sunk); color: var(--np-text); }

/* Itens do menu "⋯" com rótulo e ícone (complementa .np-menu__list de components.css) */
.np-menu__list .np-menu__item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px;
    border-radius: var(--np-radius-sm); background: none; border: none; cursor: pointer;
    font-family: var(--np-font-sans); font-size: var(--np-text-sm); font-weight: 600; color: var(--np-text); text-decoration: none;
}
.np-menu__list .np-menu__item svg { width: 15px; height: 15px; color: var(--np-icon); flex-shrink: 0; }
.np-menu__list .np-menu__item:hover { background: var(--np-surface-sunk); text-decoration: none; }
.np-menu__list .np-menu__item--danger { color: var(--np-danger); }
.np-menu__list .np-menu__item--danger svg { color: var(--np-danger); }
.np-menu__list .np-menu__item--danger:hover { background: var(--np-danger-weak); }
.np-menu__sep { height: 1px; background: var(--np-border); margin: 5px 4px; }
.np-row-actions .np-menu__list { min-width: 240px; padding: 6px; }

/* ---------- Vazio (complementa .np-empty) ---------- */
.np-empty__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--np-accent-weak); color: var(--np-accent-text); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.np-empty__icon svg { width: 24px; height: 24px; }
.np-empty__title { font-size: 15px; font-weight: 700; color: var(--np-text); margin: 0 0 4px; }
.np-empty__text { margin: 0; max-width: 400px; }
.np-empty__actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.np-empty--compact { padding: 28px 20px; border-style: solid; }
.np-empty--compact .np-empty__icon { width: 36px; height: 36px; background: var(--np-surface-sunk); color: var(--np-icon); margin-bottom: 10px; }
.np-empty--compact .np-empty__icon svg { width: 18px; height: 18px; }

/* ---------- Overlay de envio com etapas (modificador da caixa de site.css) ---------- */
.np-overlay-verificando__caixa--etapas { display: block; max-width: 420px; width: 100%; padding: 24px 26px; }
.np-overlay__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.np-overlay__title { font-size: 15px; font-weight: 700; margin: 0; }
.np-overlay__sub { font-size: var(--np-text-xs); color: var(--np-text-subtle); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--np-text-sm); }
.np-steps li { display: flex; align-items: center; gap: 10px; color: var(--np-text-subtle); }
.np-steps li.is-now { color: var(--np-text); font-weight: 600; }
.np-steps__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--np-border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.is-now .np-steps__dot { border-color: var(--np-accent); background: var(--np-accent-weak); }
.is-now .np-steps__dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--np-accent); }
.np-progress { height: 6px; border-radius: 100px; background: var(--np-surface-sunk); overflow: hidden; position: relative; }
.np-progress__bar { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 100px; background: var(--np-accent); animation: np-indeterminado 1.4s ease-in-out infinite; }
@keyframes np-indeterminado { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .np-progress__bar { animation: none; width: 100%; opacity: .5; } }
.np-overlay__note { font-size: var(--np-text-xs); color: var(--np-text-subtle); margin: 12px 0 0; }

/* ---------- Modal de confirmação ---------- */
.np-modal { display: none; position: fixed; inset: 0; background: var(--np-overlay); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.np-modal.is-open { display: flex; }
.np-modal__box { background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-radius-lg); box-shadow: var(--np-shadow-pop); padding: 22px 24px; width: 100%; max-width: 440px; }
.np-modal__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--np-danger-weak); color: var(--np-danger); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.np-modal__icon svg { width: 20px; height: 20px; }
.np-modal__icon--normal { background: var(--np-accent-weak); color: var(--np-accent-text); }
.np-modal__title { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.np-modal__text { color: var(--np-text-muted); margin: 0; font-size: var(--np-text-ui); }
.np-modal__text b { color: var(--np-text); overflow-wrap: anywhere; }
.np-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.np-btn--danger { background: var(--np-danger); color: #fff; }
.np-btn--danger:hover { background: #b42318; color: #fff; text-decoration: none; }
/* No escuro o vermelho é claro; texto escuro por cima pra manter contraste. */
html[data-np-tema="escuro"] .np-btn--danger { color: #0b1220; }
html[data-np-tema="escuro"] .np-btn--danger:hover { background: color-mix(in srgb, var(--np-danger) 85%, #fff); color: #0b1220; }
.np-btn--ghost { background: transparent; color: var(--np-text-muted); font-weight: 600; }
.np-btn--ghost:hover { background: var(--np-surface-sunk); color: var(--np-text); text-decoration: none; }

/* ============================================================
   Responsivo - por último de propósito (mesma regra de components.css:
   a media query só vence a regra normal se vier depois no arquivo).
   ============================================================ */
@media (max-width: 1100px) {
    .np-folder-grid { grid-template-columns: repeat(3, 1fr); }
    .np-list__head, .np-list__row { grid-template-columns: minmax(0, 1fr) 120px 76px 300px; }
    .np-list.np-list--recentes .np-list__head, .np-list.np-list--recentes .np-list__row { grid-template-columns: minmax(0, 1fr) 110px 76px 110px; }
    .np-list--recentes .np-cell--pasta { display: none; }
}
@media (max-width: 960px) {
    .np-page { flex-direction: column; }
    .np-quota { width: 100%; min-width: 0; }
    .np-toolbar-actions { flex-wrap: wrap; }
    .np-toolbar-actions .np-modo { order: -1; align-self: flex-end; }
    .np-folder-grid { grid-template-columns: 1fr 1fr; }
    .np-list__head { display: none; }
    .np-list__row, html[data-np-modo="lista"] .np-list__row, .np-list.np-list--recentes .np-list__row { grid-template-columns: minmax(0, 1fr) auto; }
    .np-cell { display: none; }
    .np-item__meta--desktop { display: none; }
    .np-item__meta--mobile { display: block; }
    .np-item__badges .np-badge > span, .np-folder-card__name .np-badge > span { display: none; }
    .np-item__badges .np-badge, .np-folder-card__name .np-badge { padding: 4px; }
    .np-action > span { display: none; }
    .np-action { width: var(--np-touch); padding: 0; justify-content: center; }
    /* no celular as ações secundárias sempre recolhem no "⋯", em qualquer modo */
    .np-row-actions__inline, html[data-np-modo="cards"] .np-row-actions__inline { display: none; }
    .np-row-actions .np-menu { display: inline-block; }
    .np-modal__actions { flex-direction: column-reverse; }
    .np-modal__actions .np-btn { width: 100%; }
}
@media (max-width: 560px) {
    .np-folder-grid { grid-template-columns: 1fr; }
    .np-toolbar-actions { flex-direction: column; align-items: stretch; }
    .np-toolbar-actions .np-modo { align-self: flex-end; }
}

/* ============================================================
   NuvBox — Kit de formulário. Usado pelos formulários do Admin,
   pelas telas de confidencial/restringir/perfil, pelos popovers do
   explorador e pelo login. Depende de tokens.css e components.css;
   carregar depois de explorador.css e ANTES de login.css (o login
   ajusta duas coisas do kit pra caber no card dele).

   Classes que os helpers do MVC geram e que o kit trata:
     .input-validation-error       (campo inválido)
     .field-validation-valid       (mensagem de campo sem erro -> some)
     .validation-summary-valid     (resumo sem erro -> some)
     .validation-summary-errors    (resumo com erro -> ganha ícone)
   ============================================================ */

/* ---------- <button> com cara de link de texto (o .np-text-link base é pra <a>) ---------- */
button.np-text-link { background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; }

/* ---------- Título de página com selo de escopo ---------- */
.np-page__title .np-badge { vertical-align: middle; margin-left: 4px; }
/* Título e subtítulo direto dentro de .np-page (que é flex): o subtítulo quebra pra linha de baixo. */
.np-page > .np-page__sub { flex: 1 1 100%; }
.np-page__title > svg { width: 20px; height: 20px; vertical-align: -4px; color: var(--np-warning); }

/* ---------- Painel do formulário ---------- */
.np-form { background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-radius-lg); max-width: 560px; }
.np-form form { margin: 0; }
.np-form__body { padding: var(--np-space-5x) var(--np-space-6x) var(--np-space-2x); }
.np-form__context {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px var(--np-space-6x); border-bottom: 1px solid var(--np-border);
    background: var(--np-surface-muted); border-radius: var(--np-radius-lg) var(--np-radius-lg) 0 0;
    font-size: var(--np-text-sm); color: var(--np-text-muted);
}
.np-form__context > svg { width: 16px; height: 16px; color: var(--np-icon); flex-shrink: 0; }
.np-form__context b { color: var(--np-text); }
.np-form__context form { display: contents; }
.np-form__context .np-select { flex: 1; min-width: 180px; max-width: 320px; height: var(--np-control-h-sm); }
.np-form__section {
    font-family: var(--np-font-mono); font-size: var(--np-text-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--np-text-subtle); margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--np-border-soft);
}
.np-form__section--first { margin-top: 0; padding-top: 0; border-top: none; }
.np-form__footer {
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
    padding: 14px var(--np-space-6x); border-top: 1px solid var(--np-border);
    background: var(--np-surface-muted); border-radius: 0 0 var(--np-radius-lg) var(--np-radius-lg);
}
.np-form__footer .np-btn--ghost { margin-right: auto; }
.np-form__after { max-width: 560px; margin-top: var(--np-space-3x); display: flex; align-items: center; gap: 16px; }
.np-form__after form { margin: 0; }

/* ---------- Erro geral (ValidationSummary com class="np-form-error") ---------- */
.np-form-error {
    display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; margin-bottom: 16px;
    border-radius: var(--np-radius-md); border: 1px solid var(--np-danger-border); background: var(--np-danger-weak);
    color: var(--np-danger); font-size: var(--np-text-sm); font-weight: 600;
}
.np-form-error > svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.np-form-error ul { list-style: none; margin: 0; padding: 0; }
.np-form-error.validation-summary-valid { display: none; }
/* O helper não deixa injetar ícone dentro do div: entra por CSS. */
.np-form-error.validation-summary-errors { padding-left: 38px; position: relative; }
.np-form-error.validation-summary-errors::before {
    content: ""; position: absolute; left: 12px; top: 12px; width: 16px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d92d20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") no-repeat center / 16px;
}

/* ---------- Campo ---------- */
.np-field { margin-bottom: 16px; }
.np-field label { display: block; font-size: var(--np-text-sm); font-weight: 600; margin-bottom: 6px; color: var(--np-text-muted); }
.np-field__hint { color: var(--np-text-subtle); font-size: var(--np-text-xs); margin: 6px 0 0; line-height: 1.45; }
.np-field__hint .np-text-link { font-size: var(--np-text-xs); }
.np-field__error { color: var(--np-danger); font-size: var(--np-text-xs); margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.np-field__error.field-validation-valid { display: none; }
.np-input, .np-select, .np-textarea {
    width: 100%; height: var(--np-control-h); padding: 0 12px; border-radius: var(--np-radius-sm);
    border: 1px solid var(--np-border-strong); font: inherit; outline: none; background: var(--np-surface); color: var(--np-text);
    transition: border-color var(--np-transition), box-shadow var(--np-transition);
}
.np-textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
.np-input:focus, .np-select:focus, .np-textarea:focus { border-color: var(--np-accent); box-shadow: var(--np-focus-ring); }
.np-input.input-validation-error, .np-select.input-validation-error { border-color: var(--np-danger); }
.np-input.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(217, 45, 32, .2); }
.np-input[disabled], .np-input[readonly], .np-input--static { background: var(--np-surface-sunk); color: var(--np-text-muted); border-color: var(--np-border); }
.np-select {
    appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
    background-image: var(--np-select-arrow);   /* a seta muda de cor por tema (ver tokens.css) */
    background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.np-input-group { display: flex; }
.np-input-group .np-input { border-radius: var(--np-radius-sm) 0 0 var(--np-radius-sm); min-width: 0; }
.np-input-group__suffix {
    display: flex; align-items: center; padding: 0 12px; flex-shrink: 0;
    border: 1px solid var(--np-border-strong); border-left: none; border-radius: 0 var(--np-radius-sm) var(--np-radius-sm) 0;
    background: var(--np-surface-sunk); color: var(--np-text-muted); font-size: var(--np-text-sm); font-weight: 600;
}
.np-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Checkbox com dica ---------- */
/* ".np-field .np-check" também, senão a regra genérica ".np-field label" (bloco, negrito, cinza)
   vence e o checkbox fica empilhado em cima do texto quando está dentro de um campo/checklist. */
.np-check, .np-field .np-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: var(--np-text-body); font-weight: 400; color: var(--np-text); cursor: pointer; }
.np-check input[type=checkbox] { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--np-accent); cursor: pointer; flex-shrink: 0; }
.np-check__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-check__hint { color: var(--np-text-subtle); font-size: var(--np-text-xs); line-height: 1.45; }
.np-check__hint--inline { display: inline; margin-left: 6px; }

/* ---------- Checklist com busca (pessoas, grupos) ---------- */
.np-checklist-busca { margin-bottom: 8px; }
/* Altura cresce com a tela (empresa com 200 pessoas): até metade da janela, no máximo 460px. */
.np-checklist { max-height: min(50vh, 460px); overflow-y: auto; border: 1px solid var(--np-border); border-radius: var(--np-radius-sm); padding: 4px 12px; background: var(--np-surface); }
.np-checklist .np-check, .np-field .np-checklist .np-check { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--np-border-soft); align-items: center; }
.np-checklist .np-check:last-of-type { border-bottom: none; }
.np-checklist .np-check input[type=checkbox] { margin-top: 0; }
.np-checklist .np-check__text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.np-checklist-vazio { font-size: var(--np-text-sm); color: var(--np-text-subtle); text-align: center; padding: 14px 0; margin: 0; }
/* Resumo abaixo da lista: "12 de 200 pessoas · 3 marcadas" + botão "Só marcados" (ver script no _Layout). */
.np-checklist__resumo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--np-text-xs); color: var(--np-text-subtle); margin-top: 6px; }
.np-checklist__resumo .np-text-link { font-size: var(--np-text-xs); }
.np-checklist__resumo .np-text-link[aria-pressed="true"] { color: var(--np-accent-text); }

/* ---------- Bloco condicional (aparece quando um checkbox está desmarcado) ---------- */
.np-fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
.np-fieldset[hidden] { display: none; }
.np-form__conditional { padding: 14px 16px; border: 1px dashed var(--np-border-strong); border-radius: var(--np-radius-md); background: var(--np-surface-muted); margin-bottom: 16px; }
.np-form__conditional .np-field:last-child { margin-bottom: 0; }

/* ---------- Campo de senha com botão "mostrar" (Meu perfil, Editar cadastro) ----------
   Nome próprio de propósito: .np-senha já é a linha "Senha ••••" da lista de conexões (listas.css). */
.np-campo-senha { position: relative; }
.np-campo-senha .np-input { padding-right: 76px; }
.np-campo-senha__toggle {
    position: absolute; right: 6px; top: 6px; height: 28px; padding: 0 8px; border: none; border-radius: var(--np-radius-sm);
    background: none; color: var(--np-text-subtle); font: 600 var(--np-text-xs) var(--np-font-sans); cursor: pointer;
}
.np-campo-senha__toggle:hover { background: var(--np-surface-sunk); color: var(--np-text); }
.np-campo-senha__toggle:focus-visible { outline: none; box-shadow: var(--np-focus-ring); }

/* ---------- Perfil: avatar grande + nome ---------- */
.np-perfil { display: flex; align-items: center; gap: var(--np-space-4x); margin-bottom: var(--np-space-4x); }
.np-perfil__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--np-surface-sunk); flex-shrink: 0; }
.np-perfil .np-avatar-lg { width: 72px; height: 72px; border-radius: 50%; font-size: 22px; }
.np-perfil__nome { font-weight: 700; font-size: var(--np-text-card); }

/* ============================================================
   Responsivo - por último de propósito.
   ============================================================ */
@media (max-width: 960px) {
    .np-form { max-width: none; }
    .np-form__body, .np-form__context, .np-form__footer { padding-left: var(--np-space-4x); padding-right: var(--np-space-4x); }
    .np-row { grid-template-columns: 1fr; gap: 0; }
    .np-form__footer { position: sticky; bottom: 0; z-index: 5; }
    .np-form__footer .np-btn--primary { flex: 1; }
    .np-form__context .np-select { max-width: none; width: 100%; }
}

/* ============================================================
   NuvBox — Painel de administração (Views/Admin/Index.vbhtml e,
   nas próximas rodadas, Admin/Empresa). Depende de tokens.css,
   components.css e explorador.css (carregar depois dos três).
   Mesma regra do explorador.css: só classe nova ou modificador;
   ajuste em componente base só por seletor descendente.
   ============================================================ */

/* ---------- Header escuro: variante de cinco métricas ---------- */
.np-metric-grid--5 { grid-template-columns: repeat(5, 1fr); }
.np-metric-grid--5 .np-metric-cell { min-width: 0; }
.np-metric-grid--5 .np-metric-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-metric-grid--5 .np-metric-value { white-space: nowrap; }
.np-metric-value small { font-size: 13px; font-weight: 600; color: var(--np-text-on-dark-mute); }
.np-metric-value--na { font-size: 15px; font-weight: 600; color: var(--np-text-on-dark-mute); }

/* ---------- Barra de ações do painel (botões secundários + menu de manutenção) ---------- */
.np-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--np-space-5x); }
.np-actionbar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-actionbar .np-menu > summary { width: auto; height: auto; border-radius: 0; }
.np-actionbar .np-menu > summary:hover { background: none; }
.np-actionbar .np-menu[open] > summary .np-btn--secondary { background: var(--np-surface-sunk); }
.np-actionbar .np-menu__list { min-width: 260px; padding: 6px; }
.np-menu__hint { font-size: 11px; color: var(--np-text-subtle); padding: 2px 10px 6px; font-weight: 500; line-height: 1.4; }
.np-btn__chev { display: inline-flex; margin-left: -2px; color: var(--np-text-subtle); }
.np-btn__chev svg { width: 13px; height: 13px; }

/* ---------- Toolbar "em linha": busca e botão lado a lado, sem empurrar o botão pro canto ---------- */
.np-toolbar--inline { justify-content: flex-start; }
.np-toolbar--inline .np-search { flex: 0 1 340px; }

/* ---------- Seção (eyebrow + link à direita + descrição) ---------- */
.np-section { margin-bottom: var(--np-space-7x); }
.np-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--np-space-3x); }
.np-section__head .np-eyebrow { margin: 0; }
.np-section__desc { font-size: var(--np-text-sm); color: var(--np-text-subtle); margin: -6px 0 var(--np-space-3x); }

/* ---------- Card de empresa: linhas chave/valor, barra de cota, rodapé "Abrir" ---------- */
.np-kv { display: flex; justify-content: space-between; gap: 10px; font-size: var(--np-text-xs); color: var(--np-text-muted); }
.np-kv b { color: var(--np-text); font-weight: 700; white-space: nowrap; }
.np-kv--muted { color: var(--np-text-subtle); margin-top: 6px; }
.np-kv--over b { color: var(--np-danger); }
.np-kv + .np-progress-track { margin-top: 6px; }
.np-progress-fill--warn { background: var(--np-warning); }
.np-progress-fill--over { background: var(--np-danger); }
.np-entity-card__badges--top { margin: 0 0 10px; }
.np-entity-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--np-border-soft); }
.np-entity-card__footer .np-entity-card__meta { margin: 0; }
.np-entity-card__open { font-size: var(--np-text-sm); font-weight: 700; color: var(--np-accent-text); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.np-entity-card__open svg { width: 14px; height: 14px; }
a.np-entity-card:hover .np-entity-card__name { color: var(--np-accent-text); }

/* ---------- Card compacto (cliente avulso): seta que gira ao expandir ---------- */
.np-func-card__chev { display: flex; color: var(--np-text-faint); flex-shrink: 0; transition: transform var(--np-transition); }
.np-func-card__chev svg { width: 14px; height: 14px; }
.np-func-card__details[open] > summary .np-func-card__chev { transform: rotate(90deg); }
.np-func-card__links { display: flex; gap: 16px; flex-wrap: wrap; }
.np-func-card .np-menu__list { min-width: 240px; }
.np-func-card .np-menu__list .np-menu__upload { cursor: pointer; }

/* ---------- Header da empresa: título com badge, ações e menu "⋯" sobre fundo escuro ---------- */
.np-header__title--badged { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.np-header__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-header .np-menu > summary { width: auto; height: auto; border-radius: 0; }
.np-header .np-menu > summary:hover { background: none; }
.np-icon-btn--onDark { color: rgba(255, 255, 255, .75); }
.np-icon-btn--onDark:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.np-header .np-menu[open] > summary .np-icon-btn--onDark { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- Card de pasta compartilhada (tela da empresa) ---------- */
.np-pasta-card .np-entity-card__head > .np-badge { margin-left: auto; flex-shrink: 0; }
.np-pasta-card .np-entity-card__footer { margin-top: 4px; }
.np-pasta-card .np-entity-card__footer .np-menu { margin-left: auto; }
.np-entity-card__footer .np-menu > summary { width: auto; height: auto; border-radius: 0; }
.np-entity-card__footer .np-menu > summary:hover { background: none; }
.np-entity-card__footer .np-menu[open] > summary .np-icon-btn { background: var(--np-surface-sunk); color: var(--np-text); }
.np-folder-ico--card { width: 38px; height: 38px; border-radius: var(--np-radius-md); }
.np-icon-btn--sm { width: 30px; height: 30px; }
.np-icon-btn--sm svg { width: 16px; height: 16px; }

/* ============================================================
   Responsivo - por último de propósito.
   ============================================================ */
@media (max-width: 1100px) {
    .np-metric-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
    .np-metric-grid--5 { grid-template-columns: 1fr 1fr; }
    .np-actionbar { flex-direction: column; align-items: stretch; }
    .np-actionbar__group { display: grid; grid-template-columns: 1fr 1fr; }
    .np-actionbar__group .np-btn { width: 100%; }
    .np-actionbar .np-menu { width: 100%; }
    .np-actionbar .np-menu > summary .np-btn { width: 100%; }
    .np-actionbar .np-menu__list { left: 0; right: 0; }
    .np-header__actions { width: 100%; }
    .np-header__actions .np-btn { flex: 1 1 140px; }
}

/* ============================================================
   NuvBox — Listas: log de auditoria, lixeira, versões, conteúdo do
   zip, grupos, modelos de VM, conexões remotas. Depende de tokens,
   components, explorador (lista com colunas) e formularios (kit de
   campo). Carregar depois deles. Só classe nova ou modificador.
   ============================================================ */

/* ---------- Barra de filtros (GET) ---------- */
.np-filtros {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-radius-md);
    margin-bottom: 12px;
}
.np-filtros form { display: contents; }
.np-filtros .np-field { margin: 0; flex: 1 1 160px; max-width: 240px; }
.np-filtros .np-field label { font-size: var(--np-text-xs); margin-bottom: 4px; }
.np-filtros .np-input, .np-filtros .np-select { height: var(--np-control-h-sm); font-size: var(--np-text-sm); padding-left: 10px; }
.np-filtros__acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.np-resultado { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--np-text-sm); color: var(--np-text-subtle); margin-bottom: 10px; }

/* ---------- Grades das listas (vencem a variante de modo do explorador de propósito) ---------- */
.np-list.np-list--auditoria .np-list__head, .np-list.np-list--auditoria .np-list__row { grid-template-columns: 180px minmax(0, 1fr) 160px 150px; }
.np-list.np-list--lixeira .np-list__head, .np-list.np-list--lixeira .np-list__row { grid-template-columns: minmax(0, 1fr) 150px 130px 84px 170px; }
.np-list.np-list--versoes .np-list__head, .np-list.np-list--versoes .np-list__row { grid-template-columns: minmax(0, 1fr) 160px 84px 150px; }
.np-list.np-list--zip .np-list__head, .np-list.np-list--zip .np-list__row { grid-template-columns: minmax(0, 1fr) 84px 200px; }
.np-list.np-list--grupos .np-list__head, .np-list.np-list--grupos .np-list__row { grid-template-columns: minmax(0, 1fr) 200px; }

.np-cell--pessoa b { display: block; color: var(--np-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-cell--pessoa span { display: block; font-size: var(--np-text-xs); color: var(--np-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-cell--data small { display: block; font-size: var(--np-text-xs); color: var(--np-text-subtle); }
.np-caminho { font-family: var(--np-font-mono); font-size: 11.5px; color: var(--np-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-caminho--vazio { color: var(--np-text-faint); }
button.np-action { border: none; background: none; cursor: pointer; font-family: var(--np-font-sans); }

/* ---------- Evento da auditoria: ícone colorido por gravidade ---------- */
.np-evento { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.np-evento__ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.np-evento__ico svg { width: 15px; height: 15px; }
.np-evento__nome { font-size: var(--np-text-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-evento--neutro .np-evento__ico { background: var(--np-surface-sunk); color: var(--np-text-muted); }
.np-evento--ok .np-evento__ico { background: var(--np-success-weak); color: var(--np-success); }
.np-evento--info .np-evento__ico { background: var(--np-info-weak); color: var(--np-info); }
.np-evento--atencao .np-evento__ico { background: var(--np-warning-weak); color: var(--np-warning); }
.np-evento--perigo .np-evento__ico { background: var(--np-danger-weak); color: var(--np-danger); }
.np-evento--perigo .np-evento__nome { color: var(--np-danger); }

/* ---------- Grupos: campo + botão na mesma linha ---------- */
.np-inline-form { display: flex; gap: 8px; align-items: center; }
.np-inline-form .np-input { flex: 1; min-width: 0; }

/* ---------- Painel recolhido "Novo…" (form de criação abaixo da lista) ---------- */
.np-disclosure > summary { list-style: none; cursor: pointer; display: inline-flex; }
.np-disclosure > summary::marker { content: ""; }
.np-disclosure > summary::-webkit-details-marker { display: none; }
.np-disclosure > summary .np-btn__chev { transition: transform var(--np-transition); }
.np-disclosure[open] > summary .np-btn__chev { transform: rotate(90deg); }
.np-disclosure > .np-form { margin-top: 12px; }

/* ---------- Conexões: senha em campo com mostrar/copiar ---------- */
.np-kv--mono b { font-family: var(--np-font-mono); font-weight: 600; }
/* Ação secundária numa linha que já tem a principal (ex: "Baixar" ao lado de "Ver" nas versões). */
.np-action--muted { color: var(--np-text-muted); font-weight: 600; }
.np-action--muted:hover { color: var(--np-text); background: var(--np-surface-sunk); }

.np-senha {
    display: flex; align-items: center; gap: 4px; margin-top: 10px;
    border: 1px solid var(--np-border); border-radius: var(--np-radius-sm); padding: 2px 4px 2px 10px; background: var(--np-surface-muted);
}
.np-senha__rotulo { font-size: var(--np-text-xs); color: var(--np-text-subtle); flex-shrink: 0; }
.np-senha .senha-valor { flex: 1; min-width: 0; font-family: var(--np-font-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--np-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-senha .np-text-link { height: 28px; padding: 0 8px; border-radius: var(--np-radius-sm); flex-shrink: 0; }
.np-senha .np-text-link:hover { background: var(--np-surface-sunk); }
.np-entity-card__aviso { margin: 10px 0 0; padding: 8px 10px; }
.np-entity-card__aviso .np-alert__desc { font-size: var(--np-text-xs); }
.np-entity-card .np-inline-form { margin-top: 10px; }
.np-entity-card .np-inline-form .np-input { height: var(--np-control-h-sm); font-size: var(--np-text-sm); }

/* ============================================================
   Responsivo - por último de propósito.
   ============================================================ */
@media (max-width: 1100px) {
    .np-list.np-list--auditoria .np-list__head, .np-list.np-list--auditoria .np-list__row { grid-template-columns: 160px minmax(0, 1fr) 150px; }
    .np-list--auditoria .np-cell--data { display: none; }
    .np-list--auditoria .np-item__meta--mobile { display: block; }
}
@media (max-width: 960px) {
    .np-filtros .np-field { max-width: none; flex-basis: 100%; }
    .np-filtros__acoes { margin-left: 0; width: 100%; }
    .np-filtros__acoes .np-btn { flex: 1; }
    .np-list.np-list--auditoria .np-list__row { grid-template-columns: 1fr; gap: 4px; }
    .np-list--auditoria .np-cell--pessoa { display: block; }
    .np-list--auditoria .np-cell--pessoa b, .np-list--auditoria .np-cell--pessoa span { display: inline; }
    .np-list--auditoria .np-cell--pessoa span::before { content: " · "; }
    .np-list.np-list--lixeira .np-list__row, .np-list.np-list--versoes .np-list__row, .np-list.np-list--zip .np-list__row, .np-list.np-list--grupos .np-list__row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ============================================================
   NuvBox — Visualizadores: mídia (imagem/vídeo/áudio), PDF em tela
   cheia, NF-e e XML bruto. Depende de tokens, components, explorador
   (cabeçalho de página) e admin (linhas chave/valor). Só classe nova.
   ============================================================ */

/* ---------- Cabeçalho com ações à direita ---------- */
.np-page__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-page__title .np-file-chip { vertical-align: middle; margin-right: 2px; }

/* ---------- Mídia ---------- */
.np-midia { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--np-surface-sunk); min-height: 280px; }
.np-midia img, .np-midia video { max-width: 100%; max-height: 72vh; border-radius: var(--np-radius-md); box-shadow: 0 4px 24px rgba(16, 24, 40, .18); }
.np-midia video { background: #000; }
.np-midia audio { width: 100%; max-width: 560px; }

/* ---------- PDF em tela cheia (view sem _Layout) ---------- */
.np-fullpage-body { margin: 0; background: var(--np-surface-sunk); }
.np-fullpage { display: flex; flex-direction: column; height: 100vh; }
.np-fullpage__bar { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px; background: var(--np-surface); border-bottom: 1px solid var(--np-border); flex-shrink: 0; }
.np-fullpage__brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding-right: 14px; border-right: 1px solid var(--np-border); flex-shrink: 0; }
.np-fullpage__brand-mark { width: 26px; height: 26px; object-fit: contain; }
.np-fullpage__file { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.np-fullpage__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-fullpage__meta { font-size: var(--np-text-xs); color: var(--np-text-subtle); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.np-fullpage__frame { flex: 1; min-height: 0; }
.np-fullpage__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- NF-e ---------- */
.np-nfe-topo { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.np-nfe-topo__direita { text-align: right; }
.np-metric-light__label { font-family: var(--np-font-mono); font-size: var(--np-text-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--np-text-subtle); margin-bottom: 4px; }
.np-metric-light__value { font-size: var(--np-text-metric); font-weight: 800; letter-spacing: -.01em; color: var(--np-text); }
.np-metric-light__value small { font-size: 14px; font-weight: 600; color: var(--np-text-subtle); }
.np-kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--np-border-soft); }
.np-kv-grid--one { grid-template-columns: 1fr; }
.np-kv-item__label { font-size: var(--np-text-xs); color: var(--np-text-subtle); margin-bottom: 2px; }
.np-kv-item__value { font-size: var(--np-text-ui); }
.np-kv-item__value--mono { font-family: var(--np-font-mono); font-size: 12.5px; word-break: break-all; }
.np-party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.np-party { background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-radius-lg); padding: 16px; display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.np-party__ico { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.np-party__ico svg { width: 17px; height: 17px; }
.np-party--de .np-party__ico { background: var(--np-info-weak); color: var(--np-info); }
.np-party--para .np-party__ico { background: var(--np-success-weak); color: var(--np-success); }
.np-party__label { font-family: var(--np-font-mono); font-size: var(--np-text-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--np-text-subtle); }
.np-party__name { font-weight: 700; margin: 2px 0; overflow-wrap: anywhere; }
.np-party__doc { font-family: var(--np-font-mono); font-size: 12.5px; color: var(--np-text-muted); }

/* ---------- Tabela de dados (itens da NF-e) ---------- */
.np-table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--np-space-5x)) calc(-1 * var(--np-space-5x)); }
.np-table { width: 100%; border-collapse: collapse; font-size: var(--np-text-sm); }
.np-table th { text-align: left; padding: 10px 16px; font-family: var(--np-font-mono); font-size: var(--np-text-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--np-text-subtle); background: var(--np-surface-muted); border-top: 1px solid var(--np-border); border-bottom: 1px solid var(--np-border); white-space: nowrap; }
.np-table td { padding: 10px 16px; border-bottom: 1px solid var(--np-border-soft); vertical-align: top; }
.np-table tbody tr:last-child td { border-bottom: none; }
.np-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.np-table .mono { font-family: var(--np-font-mono); font-size: 12px; color: var(--np-text-muted); white-space: nowrap; }
.np-table tfoot td { font-weight: 700; background: var(--np-surface-muted); border-top: 1px solid var(--np-border); border-bottom: none; }

/* ---------- XML bruto: bloco de código com número de linha ---------- */
.np-code { margin: calc(-1 * var(--np-space-5x)); padding: 16px 20px; overflow-x: auto; font-family: var(--np-font-mono); font-size: 12.5px; line-height: 1.6; white-space: pre; color: var(--np-text); counter-reset: linha; tab-size: 2; }
.np-code__line { display: block; }
.np-code__line::before { counter-increment: linha; content: counter(linha); display: inline-block; width: 4ch; margin-right: 16px; text-align: right; color: var(--np-text-faint); user-select: none; }
.np-code .tag { color: var(--np-info); }
.np-code .attr { color: var(--np-warning); }
.np-code .val { color: var(--np-success); }

/* ============================================================
   Responsivo - por último de propósito.
   ============================================================ */
@media (max-width: 960px) {
    .np-page__actions { width: 100%; }
    .np-page__actions .np-btn { flex: 1; }
    .np-nfe-topo { grid-template-columns: 1fr; }
    .np-nfe-topo__direita { text-align: left; }
    .np-party-grid { grid-template-columns: 1fr; }
    .np-fullpage__brand span, .np-fullpage__meta { display: none; }
    .np-fullpage__bar { gap: 10px; padding: 0 12px; }
}

/* ============================================================
   NuvBox — Tela de login (Views/Account/Login.vbhtml, layout
   _LayoutLogin.vbhtml). Depende de tokens.css e components.css.
   Classes próprias (np-login-*, np-field, np-input) de propósito:
   .login-*, .field e .field-error-summary do site.css continuam
   servindo os formulários do Admin e não são tocadas aqui.
   Cor: sempre a da instalação (CorPrincipal); a preferência do
   usuário não se aplica antes de entrar.
   ============================================================ */
.np-login-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
    font: 400 var(--np-text-body) / var(--np-lh-body) var(--np-font-sans);
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.06), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,.05), transparent 45%),
        linear-gradient(160deg, #0b1224 0%, #0f172a 45%, #16264a 100%);
}
.np-login-card { background: var(--np-surface); border-radius: var(--np-radius-lg); padding: 36px 36px 30px; width: 100%; max-width: 400px; box-shadow: 0 20px 50px rgba(2, 6, 23, .35); }
.np-login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.np-login-brand__mark { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.np-login-brand__name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--np-text); }
.np-login-tagline { color: var(--np-text-subtle); font-size: var(--np-text-body); margin: 0 0 24px; }

/* Erro geral, campo, input e mensagem de erro vêm do kit (formularios.css). Aqui só o que é do login. */

/* Campo de senha com botão de mostrar/ocultar */
.np-input-wrap { position: relative; }
.np-input-wrap .np-input { padding-right: 44px; }
.np-input-wrap__btn { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border-radius: var(--np-radius-sm); border: none; background: none; color: var(--np-icon); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.np-input-wrap__btn svg { width: 17px; height: 17px; }
.np-input-wrap__btn:hover { background: var(--np-surface-sunk); color: var(--np-text); }

/* Checkbox "manter conectado": ajuste do .np-check do kit pra caber no card */
.np-login-card .np-check { align-items: center; gap: 8px; margin: 2px 0 20px; color: var(--np-text-muted); }
.np-login-card .np-check input[type=checkbox] { margin: 0; }
.np-login-card .np-check label { cursor: pointer; margin: 0; }

/* Botão de entrar (largura cheia, um pouco mais alto que o padrão) */
.np-login-btn { height: 44px; width: 100%; font-size: 14px; }
.np-login-btn[disabled] { opacity: .7; cursor: progress; }
.np-login-btn .np-spinner { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255,255,255,.4); border-top-color: #fff; }

.np-login-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--np-border); font-size: var(--np-text-xs); color: var(--np-text-subtle); text-align: center; }

@media (max-width: 460px) {
    .np-login-card { padding: 28px 22px 24px; }
}

/* ============================================================
   NuvBox — Preferências visuais do usuário (popover "Aparência" no
   rodapé da sidebar, ver _Layout.vbhtml). A escolha fica só no
   navegador (localStorage): nada vai pro servidor nem pro cadastro.
   Depende de tokens.css e components.css.

   Cores oferecidas são uma paleta FECHADA, escolhida pra passar em
   contraste AA sobre branco e pra não colidir com a semântica
   (vermelho = excluir/ameaça, âmbar = restrito/confidencial,
   verde = sucesso). Não abrir pra cor livre.
   ============================================================ */
.np-pref { position: relative; flex-shrink: 0; }
.np-pref > summary { list-style: none; cursor: pointer; }
.np-pref > summary::marker { content: ""; }
.np-pref > summary::-webkit-details-marker { display: none; }
.np-pref[open] > summary .np-sidebar__profile-logout { background: var(--np-surface-sunk); color: var(--np-text); }

.np-pref__panel {
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 60; width: 236px;
    background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-radius-md);
    box-shadow: var(--np-shadow-pop); padding: 14px;
}
.np-pref__title { font-size: var(--np-text-sm); font-weight: 700; margin: 0 0 2px; }
.np-pref__desc { font-size: var(--np-text-xs); color: var(--np-text-subtle); margin: 0 0 12px; }
.np-pref__label { font-family: var(--np-font-mono); font-size: var(--np-text-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--np-text-subtle); margin: 0 0 6px; }
.np-pref__label + .np-cores { margin-top: 0; }
.np-cores + .np-pref__label, .np-tema + .np-pref__label { margin-top: 12px; }

/* Tema: três botões, o ativo ganha fundo de superfície e sombra leve */
.np-tema { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--np-border); border-radius: var(--np-radius-sm); background: var(--np-surface-muted); }
.np-tema__btn { flex: 1; height: 28px; border: none; background: none; border-radius: 4px; color: var(--np-text-muted); font: 600 12px var(--np-font-sans); cursor: pointer; }
.np-tema__btn:hover { color: var(--np-text); }
.np-tema__btn.is-on { background: var(--np-surface); color: var(--np-text); box-shadow: var(--np-shadow-sm); }
.np-cores { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.np-cor {
    width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .12);
    transition: transform var(--np-transition);
}
.np-cor:hover { transform: scale(1.08); }
.np-cor.is-on { border-color: var(--np-text); box-shadow: inset 0 0 0 2px var(--np-surface); }
.np-pref__reset { font-size: var(--np-text-xs); }

@media (max-width: 960px) {
    .np-pref__panel { left: auto; right: 0; }
}

/* ============================================================
   NuvBox — Responsável pela pasta (set/2026). Tudo que a função de
   "responsável" acrescenta na tela: faixa de contexto no explorador,
   badge, menu de gestão no card da pasta, linha "Responsável:" no card
   da empresa, prefixo fixo no campo de nome (Criar pasta) e o evento
   de nomear/remover no log. Só complementa - nada aqui sobrescreve
   classe de components/explorador/admin/listas. Depende de tokens.css.
   Cor própria (roxo) de propósito: não é alerta nem restrição, é papel.
   ============================================================ */

:root {
    --np-owner: #6d28d9;
    --np-owner-weak: #f3efff;
    --np-owner-border: #ddd0ff;
}
html[data-np-tema="escuro"] {
    --np-owner: color-mix(in srgb, #a78bfa 80%, #fff);
    --np-owner-weak: color-mix(in srgb, #7c3aed 22%, var(--np-surface));
    --np-owner-border: color-mix(in srgb, #7c3aed 45%, var(--np-surface));
}

/* ---------- Badge "Responsável" (selo de escopo, checklist de nomeação) ---------- */
.np-badge--owner { color: var(--np-owner); background: var(--np-owner-weak); border-color: var(--np-owner-border); }

/* ---------- Faixa "Você é responsável por esta pasta" (explorador) ---------- */
.np-alert--owner { background: var(--np-owner-weak); border-color: var(--np-owner-border); }
.np-alert--owner > svg { color: var(--np-owner); }
.np-alert--owner .np-alert__desc a { color: var(--np-text); font-weight: 600; }

/* ---------- Card da pasta com menu de gestão (explorador, só pro responsável) ----------
   O card normal é um <a>; quando tem menu, vira <div> com o link ocupando o miolo e o
   "⋯" fora dele (um <details> dentro de <a> não é HTML válido). */
.np-folder-card--gerida { padding: 0; align-items: stretch; }
.np-folder-card__main { display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.np-folder-card__main:hover { text-decoration: none; color: inherit; }
.np-folder-card--gerida:hover .np-folder-card__name > span:first-child { color: var(--np-accent-text); }
.np-folder-card__meta { font-size: var(--np-text-xs); color: var(--np-text-subtle); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-folder-card__menu { display: flex; align-items: center; padding-right: 8px; margin: 0; position: relative; }
.np-folder-card__menu > summary { list-style: none; cursor: pointer; width: auto; height: auto; border-radius: 0; }
.np-folder-card__menu > summary::-webkit-details-marker { display: none; }
.np-folder-card__menu[open] > summary .np-icon-btn { background: var(--np-surface-sunk); color: var(--np-text); }
.np-folder-card__menu .np-menu__list { min-width: 250px; padding: 6px; }
/* Item "Excluir" desligado (regra não permite): cinza, sem clique; o motivo vem logo abaixo. */
.np-menu__list .np-menu__item--off { color: var(--np-text-faint); cursor: not-allowed; }
.np-menu__list .np-menu__item--off svg { color: var(--np-text-faint); }
.np-menu__list .np-menu__item--off:hover { background: none; }
.np-menu__hint--motivo { color: var(--np-danger); white-space: normal; max-width: 260px; }
html[data-np-modo="lista"] .np-folder-card--gerida { padding: 0; }
html[data-np-modo="lista"] .np-folder-card__main { padding: 8px var(--np-space-5x); min-height: var(--np-row-h); }
html[data-np-modo="lista"] .np-folder-card__menu { padding-right: var(--np-space-4x); }

/* ---------- Rodapé do popover "Nova pasta": atalho pra pasta com acesso próprio ---------- */
.np-popover__foot { border-top: 1px solid var(--np-border-soft); margin: 0 -10px -10px; padding: 6px 4px 4px; }
.np-popover__foot .np-menu__item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--np-radius-sm); font-size: var(--np-text-sm); font-weight: 600; color: var(--np-text); text-decoration: none; }
.np-popover__foot .np-menu__item svg { width: 16px; height: 16px; color: var(--np-owner); flex-shrink: 0; margin-top: 1px; }
.np-popover__foot .np-menu__item small { display: block; font-weight: 500; color: var(--np-text-subtle); font-size: var(--np-text-xs); margin-top: 2px; line-height: 1.4; }
.np-popover__foot .np-menu__item:hover { background: var(--np-surface-sunk); text-decoration: none; }

/* ---------- Linha "Responsável: nome" no card da pasta (Admin/Empresa) ---------- */
.np-owner { display: flex; align-items: center; gap: 8px; font-size: var(--np-text-xs); color: var(--np-text-subtle); margin: 0 0 10px; min-width: 0; }
.np-owner > svg { width: 14px; height: 14px; color: var(--np-owner); flex-shrink: 0; }
.np-owner > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-owner b { color: var(--np-text); font-weight: 600; }
.np-owner__vazio { color: var(--np-text-faint); }

/* ---------- Opção "responsáveis veem que existem confidenciais" (Editar acesso, admin) ---------- */
.np-check.np-check--opcao, .np-field .np-check.np-check--opcao { align-items: flex-start; padding: 12px 14px; border-radius: var(--np-radius-md); background: var(--np-owner-weak); border: 1px solid var(--np-owner-border); margin: 4px 0 16px; }
.np-check--opcao input[type=checkbox] { margin-top: 3px; }
.np-check--opcao .np-check__text { flex-direction: column; gap: 2px; }
.np-check--opcao b { font-weight: 700; color: var(--np-text); }
.np-check--opcao.is-disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Explorador: confidencial que o responsável só sabe que existe ---------- */
.np-list__row--somente-existe .np-item__name { color: var(--np-text-muted); }
.np-list__row--somente-existe .np-file-chip { opacity: .55; }
.np-list__row--somente-existe .np-cell { color: var(--np-text-subtle); }

/* ---------- Aviso em linha na checklist (nomeado sem acesso à pasta) ---------- */
.np-check__hint--aviso { color: var(--np-warning); flex-basis: 100%; }

/* ---------- Prefixo fixo antes do campo (Criar pasta como responsável: "RH/") ---------- */
.np-input-group__prefix {
    display: flex; align-items: center; padding: 0 12px; flex-shrink: 0; max-width: 55%;
    border: 1px solid var(--np-border-strong); border-right: none; border-radius: var(--np-radius-sm) 0 0 var(--np-radius-sm);
    background: var(--np-surface-sunk); color: var(--np-text-muted); font-size: var(--np-text-sm); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--np-font-mono);
}
.np-input-group__prefix + .np-input { border-radius: 0 var(--np-radius-sm) var(--np-radius-sm) 0; }

/* ---------- Log: evento de nomear/remover responsável ---------- */
.np-evento--responsavel .np-evento__ico { background: var(--np-owner-weak); color: var(--np-owner); }

@media (max-width: 960px) {
    .np-folder-card__menu .np-menu__list { right: 0; left: auto; }
    .np-input-group__prefix { max-width: 45%; }
}

/* ============================================================
   NuvBox — "Enviar para o NuvBox" (Arquivos/Receber) e a faixa de
   instalar o app (set/2026). Tela pensada pro celular: uma coluna,
   botão de enviar preso embaixo. No desktop vira uma página normal
   de largura limitada. Depende de tokens.css e components.css.
   ============================================================ */

.np-receber { max-width: 560px; }

/* ---------- Arquivos recebidos ---------- */
.np-receber__lista { background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-radius-lg); overflow: hidden; }
.np-receber__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--np-border-soft); }
.np-receber__item:last-child { border-bottom: none; }
.np-receber__previa { width: 44px; height: 44px; border-radius: var(--np-radius-md); object-fit: cover; flex-shrink: 0; background: var(--np-surface-sunk); }
.np-receber__item .np-file-chip { width: 44px; height: 44px; font-size: 10px; }
.np-receber__info { min-width: 0; flex: 1; }
.np-receber__nome { font-weight: 600; font-size: var(--np-text-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-receber__meta { font-size: var(--np-text-xs); color: var(--np-text-subtle); }
.np-receber__estado { font-size: var(--np-text-xs); font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.np-receber__estado--ok { color: var(--np-success); }
.np-receber__estado--erro { color: var(--np-danger); }
.np-receber__estado--andando { color: var(--np-text-subtle); font-variant-numeric: tabular-nums; }
.np-receber__barra { height: 4px; background: var(--np-surface-sunk); border-radius: 100px; margin-top: 6px; overflow: hidden; }
.np-receber__barra-fill { height: 100%; background: var(--np-accent); width: 0; transition: width var(--np-transition); }
.np-receber__item.is-erro .np-receber__meta { color: var(--np-danger); white-space: normal; }
.np-receber__escolher { display: block; }
.np-receber__escolher input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ---------- Escolha da pasta ---------- */
.np-receber__pastas { background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-radius-lg); overflow: hidden; }
.np-receber__trilha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--np-text-xs); color: var(--np-text-subtle); padding: 8px 12px; background: var(--np-surface-muted); border-bottom: 1px solid var(--np-border-soft); }
.np-receber__trilha a { color: var(--np-text-muted); font-weight: 600; text-decoration: none; }
.np-receber__trilha a:hover { color: var(--np-accent-text); }
.np-receber__trilha b { color: var(--np-text); }
.np-receber__pasta { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--np-border-soft); text-decoration: none; color: inherit; min-height: var(--np-touch); }
.np-receber__pasta:last-child { border-bottom: none; }
.np-receber__pasta:hover { background: var(--np-surface-muted); text-decoration: none; color: inherit; }
.np-receber__pasta .np-folder-ico { width: 32px; height: 32px; }
.np-receber__pasta-info { flex: 1; min-width: 0; }
.np-receber__pasta-nome { font-weight: 600; font-size: var(--np-text-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-receber__pasta-meta { font-size: var(--np-text-xs); color: var(--np-text-subtle); }
.np-receber__pasta svg.np-receber__chev { width: 16px; height: 16px; color: var(--np-icon); flex-shrink: 0; }
.np-receber__aqui { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--np-accent-weak); border-bottom: 1px solid var(--np-border-soft); font-size: var(--np-text-ui); font-weight: 600; }
.np-receber__aqui svg { width: 16px; height: 16px; color: var(--np-accent-text); flex-shrink: 0; }
.np-receber__vazio { padding: 14px 12px; font-size: var(--np-text-sm); color: var(--np-text-subtle); text-align: center; }

/* ---------- Rodapé preso com o botão de enviar ---------- */
.np-receber__rodape { position: sticky; bottom: 0; background: var(--np-canvas); padding: 12px 0 4px; margin-top: var(--np-space-4x); }
.np-receber__rodape .np-btn { width: 100%; height: 46px; border-radius: var(--np-radius-md); }
.np-receber__rodape .np-btn + .np-btn { margin-top: 8px; }
.np-receber__sucesso { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 12px 8px; }
/* display:flex vence o [hidden] do navegador - sem isso o bloco "Enviado" aparecia antes de enviar. */
.np-receber__sucesso[hidden], .np-receber__rodape[hidden], .np-receber__vazio[hidden] { display: none; }
.np-receber__sucesso-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--np-success-weak); color: var(--np-success); display: flex; align-items: center; justify-content: center; }
.np-receber__sucesso-ico svg { width: 26px; height: 26px; }
.np-receber__sucesso h2 { margin: 0; font-size: 16px; }
.np-receber__sucesso p { margin: 0; font-size: var(--np-text-sm); color: var(--np-text-subtle); }

/* ---------- Faixa "Instalar o NuvBox" (só no celular, só até dispensar) ---------- */
.np-instalar { display: none; align-items: center; gap: 10px; padding: 10px 12px; background: var(--np-ink-canvas); color: #fff; font-size: var(--np-text-sm); }
.np-instalar.is-visivel { display: flex; }
.np-instalar__ico { width: 34px; height: 34px; border-radius: 9px; background: #fff; flex-shrink: 0; object-fit: contain; }
.np-instalar__texto { flex: 1; min-width: 0; }
.np-instalar__texto b { display: block; font-weight: 700; }
.np-instalar__texto span { color: rgba(255, 255, 255, .7); font-size: var(--np-text-xs); }
.np-instalar .np-btn { height: 34px; padding: 0 12px; background: #fff; color: #101828; flex-shrink: 0; }
.np-instalar__fechar { background: none; border: none; color: rgba(255, 255, 255, .75); width: 32px; height: 32px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.np-instalar__fechar svg { width: 16px; height: 16px; }

/* ============================================================
   NuvBox — Controle de máquinas (set/2026): tela Máquinas do Admin
   (com a configuração dobrável), célula no painel da empresa, contador no menu e a página "aguardando
   liberação" do funcionário (que usa o layout do login). Só
   complementa components/listas/admin. Depende de tokens.css.
   ============================================================ */

/* ---------- Ícone da máquina (computador / celular) ---------- */
.np-maquina__ico { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.np-maquina__ico svg { width: 17px; height: 17px; }
.np-maquina__ico--pc { background: var(--np-info-weak); color: var(--np-info); }
.np-maquina__ico--cel { background: var(--np-accent-weak); color: var(--np-accent-text); }
.np-maquina__vazio { margin: 0; padding: 8px 0 4px; font-size: var(--np-text-sm); color: var(--np-text-subtle); }
.np-mono { font-family: var(--np-font-mono); font-size: 11.5px; }

/* ---------- Lista de máquinas ---------- */
.np-list.np-list--maquinas .np-list__head, .np-list.np-list--maquinas .np-list__row { grid-template-columns: minmax(0, 1.3fr) 170px 150px 190px 230px; }
.np-list--maquinas .np-list__row--alerta { background: color-mix(in srgb, var(--np-warning-weak) 55%, var(--np-surface)); }
.np-list--maquinas .np-cell--pessoa b { display: block; color: var(--np-text); font-weight: 600; }
.np-list--maquinas .np-cell--pessoa span { font-size: var(--np-text-xs); color: var(--np-text-subtle); }
.np-list--maquinas .np-row-actions form { display: inline-flex; margin: 0; }
.np-list--maquinas .np-menu__list { min-width: 300px; padding: 8px; }
.np-list--maquinas .np-inline-form { display: flex; gap: 6px; }
.np-list--maquinas .np-inline-form .np-input { height: var(--np-control-h-sm); font-size: var(--np-text-sm); }

/* ---------- Contador no menu Administração ---------- */
.np-nav-item__conta { margin-left: auto; background: var(--np-danger); color: #fff; font-size: 11px; font-weight: 700; border-radius: 100px; padding: 1px 7px; line-height: 1.5; }
html[data-np-tema="escuro"] .np-nav-item__conta { color: #0b1220; }

/* ---------- Célula "Máquinas" no painel da empresa (é um link) ---------- */
a.np-metric-cell--link { display: block; color: inherit; text-decoration: none; transition: background .15s; }
a.np-metric-cell--link:hover, a.np-metric-cell--link:focus-visible { background: color-mix(in srgb, var(--np-ink-surface) 70%, #fff 30%); outline: none; }

/* ---------- Configuração (interruptor + redes), dobrável, na tela Máquinas ---------- */
.np-maquinas-config { padding: 0; }
.np-maquinas-config__resumo { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 20px; }
.np-maquinas-config__resumo::-webkit-details-marker { display: none; }
.np-maquinas-config__resumo .np-eyebrow { margin: 0; }
.np-maquinas-config__redes-resumo { font-size: var(--np-text-xs); color: var(--np-text-subtle); }
.np-maquinas-config__chev { margin-left: auto; color: var(--np-text-subtle); display: flex; transition: transform .15s; }
.np-maquinas-config__chev svg { width: 16px; height: 16px; }
.np-maquinas-config[open] .np-maquinas-config__chev { transform: rotate(180deg); }
.np-maquinas-config__resumo:focus-visible { outline: 2px solid var(--np-accent); outline-offset: -2px; border-radius: 12px; }
.np-maquinas-config__corpo { padding: 4px 20px 18px; border-top: 1px solid var(--np-border-soft); }
.np-maquinas-config__titulo { display: block; margin-top: 12px; font-size: var(--np-text-ui); }
.np-maquinas-config__corpo > form > .np-check__hint { display: block; margin-top: 2px; }

/* Os três níveis ("quem pode entrar"), cartões de rádio */
.np-niveis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.np-nivel { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--np-border); border-radius: 10px; cursor: pointer; background: var(--np-surface); transition: border-color .15s, background .15s; }
.np-nivel input { accent-color: var(--np-accent); margin: 3px 0 0; flex-shrink: 0; }
.np-nivel__corpo { min-width: 0; }
.np-nivel__corpo > b { display: block; font-size: var(--np-text-ui); }
.np-nivel__texto { display: block; font-size: var(--np-text-xs); color: var(--np-text-subtle); margin-top: 2px; }
.np-nivel__corpo .np-badge { margin-top: 8px; }
.np-nivel:hover { border-color: var(--np-border-strong, var(--np-border)); }
.np-nivel--atual, .np-nivel:has(input:checked) { border-color: var(--np-accent); background: var(--np-accent-weak); }
.np-nivel:has(input:focus-visible) { outline: 2px solid var(--np-accent); outline-offset: 2px; }
.np-maquinas-config__acao { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.np-maquinas-config__acao small { color: var(--np-text-subtle); font-size: var(--np-text-xs); }

/* Nota do WebDAV */
.np-maquinas-config__webdav { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--np-surface-muted); font-size: var(--np-text-xs); color: var(--np-text-muted); }
.np-maquinas-config__webdav > svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--np-info); }
.np-maquinas-config__linha { margin-top: 12px; }
.np-maquinas-config__linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.np-maquinas-config__linha > div { min-width: 0; }
.np-maquinas-config__linha b { display: block; font-size: var(--np-text-ui); }
.np-maquinas-config__linha .np-check__hint { display: block; margin-top: 2px; }
.np-maquinas-config form { margin: 0; }
.np-maquinas-config__redes { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--np-border-soft); }
.np-maquinas-config__redes > b { display: block; font-size: var(--np-text-sm); }
.np-maquinas-config__redes .np-check__hint { display: block; margin: 2px 0 10px; }
.np-maquinas-config__lista { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.np-maquinas-config__lista .np-badge { padding-right: 4px; }
.np-maquinas-config__remover { background: none; border: none; color: inherit; font-size: 14px; line-height: 1; padding: 0 4px; cursor: pointer; border-radius: 100px; }
.np-maquinas-config__remover:hover { background: rgba(0, 0, 0, .08); }
.np-maquinas-config__adicionar { display: flex; gap: 8px; flex-wrap: wrap; }
.np-maquinas-config__adicionar .np-input { height: var(--np-control-h-sm); font-size: var(--np-text-sm); flex: 1; min-width: 160px; max-width: 260px; }

/* ---------- Página "aguardando liberação" (layout do login, sem sidebar) ---------- */
.np-aguardando { max-width: 440px; margin: 8vh auto 0; background: var(--np-surface); border: 1px solid var(--np-border); border-radius: 16px; padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: var(--np-shadow-sm); }
.np-aguardando__ico { width: 52px; height: 52px; border-radius: 14px; background: var(--np-warning-weak); color: var(--np-warning); display: flex; align-items: center; justify-content: center; }
.np-aguardando__ico svg { width: 26px; height: 26px; }
.np-aguardando__ico--bloqueada { background: var(--np-danger-weak); color: var(--np-danger); }
.np-aguardando__titulo { font-size: 18px; margin: 0; }
.np-aguardando__texto { margin: 0; color: var(--np-text-muted); font-size: var(--np-text-ui); }
.np-aguardando__detalhe { font-family: var(--np-font-mono); font-size: var(--np-text-xs); color: var(--np-text-muted); background: var(--np-surface-sunk); padding: 8px 12px; border-radius: 8px; }
.np-aguardando__dica { margin: 0; font-size: var(--np-text-xs); color: var(--np-text-subtle); }

@media (max-width: 960px) {
    .np-list.np-list--maquinas .np-list__head { display: none; }
    .np-list.np-list--maquinas .np-list__row { grid-template-columns: 1fr; gap: 6px; }
    .np-list--maquinas .np-row-actions { justify-content: flex-start; }
    .np-maquinas-config__linha { flex-direction: column; align-items: flex-start; }
    .np-niveis { grid-template-columns: 1fr; }
}

/* ============================================================
   NuvBox — Logo da empresa (set/2026): marca da empresa no menu
   lateral dos funcionários, no cabeçalho da tela da empresa e na
   página "aguardando liberação". Só complementa components.css.
   No tema escuro a logo ganha uma pastilha clara, porque logo com
   letras escuras some no fundo escuro. Depende de tokens.css.
   ============================================================ */

/* ---------- Menu lateral ---------- */
.np-sidebar__brand--empresa { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: var(--np-space-4x); min-width: 0; }
.np-sidebar__logo { display: block; max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; border-radius: 6px; }
html[data-np-tema="escuro"] .np-sidebar__logo { background: #fff; padding: 5px 8px; }
.np-sidebar__brand--empresa .np-sidebar__brand-nome { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--np-text); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-sidebar__brand--empresa .np-sidebar__por { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; color: var(--np-text-faint); letter-spacing: 0; }
.np-sidebar__por img { width: 12px; height: 12px; }

/* ---------- Cabeçalho da empresa (fundo escuro nos dois temas: pastilha branca sempre) ---------- */
.np-header__ident { display: flex; align-items: center; gap: 14px; min-width: 0; }
.np-header__logo { width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; background: #fff; padding: 6px; object-fit: contain; }

/* ---------- Página "aguardando liberação" ---------- */
.np-aguardando__logo { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.np-aguardando__logo img { max-height: 48px; max-width: 200px; width: auto; height: auto; object-fit: contain; }
html[data-np-tema="escuro"] .np-aguardando__logo { background: #fff; padding: 6px 10px; border-radius: 8px; }

/* O item "Adicionar/Trocar logo" do menu "⋯" usa .np-menu__upload de components.css (mesmo padrão da foto). */

@media (max-width: 960px) {
    /* No layout estreito o menu vira barra horizontal: marca em linha, sem o "por NuvBox". */
    .np-sidebar__brand--empresa { flex-direction: row; align-items: center; gap: 8px; }
    .np-sidebar__logo { max-height: 28px; }
    .np-sidebar__brand--empresa .np-sidebar__por { display: none; }
}