/* Camada visual compartilhada do N3 Leads. Mantem os contratos funcionais das telas. */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0a1426;
    --bg-base: #0a1426;
    --bg-deep: #0a1426;
    --surface: rgba(255, 255, 255, .065);
    --surface-strong: rgba(255, 255, 255, .10);
    --card: rgba(255, 255, 255, .065);
    --glass-bg: rgba(255, 255, 255, .065);
    --glass-bg-hover: rgba(255, 255, 255, .10);
    --border: rgba(255, 255, 255, .12);
    --line: rgba(255, 255, 255, .12);
    --glass-border: rgba(255, 255, 255, .12);
    --text: rgba(255, 255, 255, .92);
    --txt: rgba(255, 255, 255, .92);
    --text-primary: rgba(255, 255, 255, .92);
    --muted: rgba(255, 255, 255, .58);
    --text-secondary: rgba(255, 255, 255, .58);
    --text-muted: rgba(255, 255, 255, .58);
    --accent: #ee7b2c;
    --accent-strong: #f59850;
    --accent-hi: #f59850;
    --orange: #ee7b2c;
    --green: #34d399;
    --amber: #fbbf24;
    --red: #fb7185;
    --blue: #60a5fa;
    --radius: 16px;
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { min-height: 100%; background: var(--bg); }
body {
    min-height: 100vh;
    color: var(--text) !important;
    font-family: var(--font) !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(84, 149, 197, .18), transparent 34rem),
        radial-gradient(circle at 88% 5%, rgba(238, 123, 44, .12), transparent 30rem),
        var(--bg) !important;
}
button, input, select, textarea { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
    outline: 3px solid rgba(96, 165, 250, .45) !important;
    outline-offset: 2px;
}

/* Mantidos no DOM para preservar scripts; apenas deixam de aparecer. */
body > header:not(.n3-app-header),
body > .header,
body > .topbar,
.shell > .top-nav,
.theme-toggle,
#themeToggle,
#themeButton,
[data-theme-toggle] { display: none !important; }

/* O fundo do Multifonte substitui os efeitos decorativos das telas antigas. */
.grain,
.aurora { display: none !important; }

.n3-app-header {
    display: block !important;
    position: sticky;
    z-index: 1000;
    top: 0;
    width: 100%;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--border);
    background: rgba(10, 20, 38, .86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.n3-app-header,
.n3-app-header * { font-family: var(--font) !important; }
.n3-app-header__inner {
    width: min(1180px, calc(100% - 32px));
    min-height: 58px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
}
.n3-brand {
    flex: 0 0 auto;
    color: var(--text);
    text-decoration: none;
    font-size: 14.75px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.015em;
}
.n3-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.n3-nav::-webkit-scrollbar { display: none; }
.n3-nav a,
.n3-logout {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 650;
    cursor: pointer;
}
.n3-nav a:hover,
.n3-logout:hover { color: var(--text); background: var(--surface); }
.n3-nav a[aria-current="page"] {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface-strong);
}
.n3-logout { margin-left: auto; border-color: var(--border); }

/* Normalizacao apenas de aparencia; dimensoes e estrutura continuam locais. */
.card, .panel, .glass-card, .section-card, .content-card { border-color: var(--border) !important; }
input, select, textarea { color: var(--text); border-color: var(--border); }

@media (max-width: 760px) {
    .n3-app-header__inner { flex-wrap: wrap; gap: 6px 8px; padding: 8px 0 7px !important; }
    .n3-brand { font-size: .82rem; }
    .n3-nav { order: 3; flex: 1 0 100%; }
    .n3-nav a { padding-inline: 8px; }
    .n3-logout { padding-inline: 9px; }
}

/* --------------------------------------------------------------------------
   Sistema visual das telas operacionais
   Mantem a arquitetura e os estados locais, mas equaliza a HUD.
   -------------------------------------------------------------------------- */
body.n3-unified,
body.n3-unified button,
body.n3-unified input,
body.n3-unified select,
body.n3-unified textarea {
    font-family: var(--font) !important;
}

body.n3-unified :is(h1, h2, h3, h4, p) { text-wrap: pretty; }
body.n3-unified h1 {
    color: var(--text) !important;
    font-size: clamp(1.75rem, 3vw, 2.45rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
}
body.n3-unified h2,
body.n3-unified h3 { color: var(--text); letter-spacing: -.018em; }

body.n3-unified :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    color: var(--text) !important;
    background: rgba(5, 12, 24, .52) !important;
    box-shadow: none !important;
}
body.n3-unified :is(input, textarea)::placeholder { color: rgba(255,255,255,.38) !important; }

body.n3-unified :is(
    .card, .day-card, .ops-panel, .exec-card, .cal-card, .perf-card,
    .panel, .daily-panel, .agora-panel, .casa-panel, .sms-panel, .table-panel,
    .step, .day
) {
    color: var(--text);
    border-color: var(--border) !important;
    border-radius: var(--radius) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
}
body.n3-unified :is(.card, .day-card, .ops-panel, .exec-card, .cal-card, .perf-card)::after {
    display: none !important;
}
body.n3-unified :is(.card, .day-card, .ops-panel, .exec-card, .cal-card, .perf-card):hover {
    background: var(--surface-strong) !important;
    box-shadow: none !important;
    transform: none !important;
}

body.n3-unified :is(
    .btn-primary, .btn-up, .filter-submit, .primary, .export-primary,
    button[type="submit"]
) {
    min-height: 42px;
    border: 0 !important;
    border-radius: 11px !important;
    color: #1f1208 !important;
    background: var(--accent) !important;
    box-shadow: none !important;
    font-weight: 750 !important;
}
body.n3-unified :is(.btn-primary, .btn-up, .filter-submit, .primary, .export-primary, button[type="submit"]):hover {
    background: var(--accent-strong) !important;
    filter: none !important;
    transform: none !important;
}
body.n3-unified :is(
    .btn-ref, .btn-gen, .btn-c6, .day-download-btn, .day-upload-btn,
    .icon-button, .logout, .export-button, button.secondary
) {
    border: 1px solid var(--border) !important;
    border-radius: 9px !important;
    color: var(--text) !important;
    background: var(--surface-strong) !important;
    box-shadow: none !important;
}

/* Dashboard: preserva o arranjo funcional e remove os efeitos da HUD anterior. */
.n3-page-dashboard .wrap { width: min(1032px, calc(100% - 32px)); padding-top: 32px; }
.n3-page-dashboard .new-leads-cta {
    border-color: rgba(238, 123, 44, .35) !important;
    border-radius: 14px !important;
    background: linear-gradient(90deg, rgba(238,123,44,.08), var(--surface)) !important;
    box-shadow: none !important;
}
.n3-page-dashboard .tab-nav {
    border-color: var(--border) !important;
    border-radius: 11px !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}

/* Mailing C6: mesma densidade, superfície e tipografia do Multifonte. */
.n3-page-mailing .wrap { width: min(1180px, calc(100% - 32px)); padding-top: 28px; }
.n3-page-mailing :is(.card, .ops-panel) { padding: 20px !important; }
.n3-page-mailing .day-card { padding: 18px 16px !important; }
.n3-page-mailing :is(.section-title, .section-head) { margin-top: 34px; margin-bottom: 14px; }
.n3-page-mailing :is(.btn-primary, .btn-c6, .btn-ref, .btn-gen, .day-download-btn, .day-upload-btn) {
    min-height: 38px;
    border-radius: 9px !important;
}
.n3-page-mailing .btn-primary { min-height: 44px; }

/* Algar: deixa de ser uma terceira HUD e usa os mesmos blocos do Multifonte. */
.n3-page-algar main { width: min(1180px, calc(100% - 32px)); max-width: none; padding: 30px 0 60px; }
.n3-page-algar h1 { margin-bottom: 7px; }
.n3-page-algar .sub { font-size: .94rem; line-height: 1.5; }
.n3-page-algar .steps { gap: 12px; margin: 26px 0 30px; }
.n3-page-algar :is(.step, .card, .day) { padding: 18px; }
.n3-page-algar .step b { color: var(--accent); }
.n3-page-algar .section {
    margin: 30px 0 12px;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .075em;
}
.n3-page-algar select { min-height: 44px; }
.n3-page-algar button { min-height: 40px; border-radius: 9px; }
.n3-page-algar button:not(.secondary):not(.n3-logout) {
    color: #1f1208;
    background: var(--accent);
}
.n3-page-algar .status .metric { background: rgba(5, 12, 24, .36); }

/* Empresas novas: volta ao mesmo container e à mesma família de painéis. */
.n3-page-empresas-novas .container {
    width: min(1180px, calc(100% - 32px));
    padding: 30px 0 60px;
}
.n3-page-empresas-novas .page-head { margin-bottom: 22px; }
.n3-page-empresas-novas .page-head h1 { margin-bottom: 8px; }
.n3-page-empresas-novas :is(.daily-panel, .agora-panel, .casa-panel, .sms-panel, .table-panel) {
    margin-bottom: 18px;
}
.n3-page-empresas-novas :is(.panel-head, .agora-head, .casa-head, .sms-head) {
    border-bottom-color: var(--border) !important;
}
.n3-page-empresas-novas :is(.filters, .filter-bar) { gap: 14px; }
.n3-page-empresas-novas :is(.export-button, .webhook-button, .sms-lookup-button) {
    min-height: 42px;
    border-radius: 9px !important;
}

@media (max-width: 760px) {
    body.n3-unified h1 { font-size: 1.8rem !important; }
    .n3-page-dashboard .wrap,
    .n3-page-mailing .wrap,
    .n3-page-algar main,
    .n3-page-empresas-novas .container { width: min(100% - 24px, 1180px); }
    .n3-page-algar .steps,
    .n3-page-algar .status,
    .n3-page-algar .days { grid-template-columns: 1fr; }
}