/* ============================================================
   Plataforma Comercial Unimed Leste Fluminense
   Sistema de design 1.10.1 - "Cuidado clinico premium"
   Superficies claras, profundidade sutil, verde institucional
   como acento contido e navegacao verde-escura com marcador citrico.
   ============================================================ */

/* ---------- Fonte institucional ---------- */
@font-face { font-family: "Unimed Sans"; src: url("../fonts/unimed-sans/UnimedSans2020-Rg.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Unimed Sans"; src: url("../fonts/unimed-sans/UnimedSans2020-Sb.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Unimed Sans"; src: url("../fonts/unimed-sans/UnimedSans2020-Bd.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
    /* Marca */
    --green: #007a4a;
    --green-hover: #006f43;
    --green-press: #00623c;
    --green-soft: #e3f2eb;
    --green-softer: #f0f9f4;
    --green-deep: #012e2c;
    --green-deep-2: #011f1e;
    --lime: #b1d34b;
    --orange: #f47920;
    --orange-soft: #fff0e5;
    --orange-ink: #a85910;
    --red: #c93b32;
    --red-soft: #fcecea;
    --blue: #2563eb;
    --violet: #6d42c9;
    --amber: #b07209;
    --cyan: #0b7a8f;

    /* Tinta */
    --ink-900: #071c1a;
    --ink-700: #1a3330;
    --ink-600: #3a5450;
    --ink-400: #55716c;
    --ink-300: #5f7c76;

    /* Superficies */
    --canvas: #f2f5f3;
    --canvas-2: #e8eeeb;
    --surface: #ffffff;
    --surface-2: #f7faf8;
    --line: #dde6e2;
    --line-2: #ccd8d3;

    /* Profundidade — mais presença */
    --sh-xs: 0 1px 3px rgba(2,30,28,.07), 0 1px 2px rgba(2,30,28,.04);
    --sh-sm: 0 2px 4px rgba(2,30,28,.06), 0 8px 24px rgba(2,30,28,.07);
    --sh-md: 0 4px 8px rgba(2,30,28,.07), 0 20px 48px rgba(2,30,28,.12);
    --sh-lg: 0 40px 80px rgba(2,30,28,.28);
    --ring: 0 0 0 3px rgba(0,153,93,.18);

    /* Geometria — raios maiores = mais premium */
    --r-lg: 16px;
    --r: 12px;
    --r-sm: 9px;
    --r-xs: 6px;
    --sidebar-w: 252px;
    --topbar-h: 62px;
    --ease: 160ms cubic-bezier(.16,.84,.44,1);
    color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: "Unimed Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--canvas);
    color: var(--ink-600);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5 { color: var(--ink-900); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 27px; letter-spacing: -.025em; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h4 { font-size: 14px; }
small { font-size: 12px; }
svg[data-lucide] { width: 18px; height: 18px; stroke-width: 1.9; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }

.eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.muted { color: var(--ink-400); }
.text-danger, .danger-text { color: var(--red) !important; font-weight: 600; }

/* ============================================================
   SHELL
   ============================================================ */
.app-body { min-height: 100vh; }
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.main-content { min-width: 0; display: flex; flex-direction: column; background: var(--canvas); }

/* Topbar */
.app-topbar {
    position: sticky; top: 0; z-index: 40;
    height: var(--topbar-h); display: flex; align-items: center; gap: 14px;
    padding: 0 28px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(2,30,28,.04);
}
.mobile-menu-btn { display: none; width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--ink-700); }
.mobile-menu-btn:hover { background: var(--canvas-2); }
.topbar-context { display: flex; flex-direction: column; line-height: 1.25; }
.topbar-context strong { font-size: 14px; color: var(--ink-900); font-weight: 600; }
.topbar-context span { font-size: 11.5px; color: var(--ink-400); letter-spacing: .04em; text-transform: uppercase; }
.topbar-spacer { flex: 1; }
.topbar-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--green-soft); color: var(--green-press); font-size: 12px; font-weight: 600; }
.topbar-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(0,153,93,.18); }
.topbar-profile { display: inline-flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); transition: border-color var(--ease), box-shadow var(--ease); }
.topbar-profile:hover { border-color: var(--line-2); box-shadow: var(--sh-xs); }
.topbar-profile span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-weight: 700; font-size: 13px; }
.topbar-profile em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink-700); }
.topbar-profile i[data-lucide] { color: var(--ink-300); width: 16px; height: 16px; }

/* Conteudo com respiro */
.main-content > *:not(.app-topbar) { padding-left: 26px; padding-right: 26px; }
.main-content > *:not(.app-topbar):first-of-type { padding-top: 24px; }
.main-content > *:last-child { padding-bottom: 40px; }
.main-content > section, .main-content > article, .main-content > header, .main-content > .alert, .main-content > div { margin-top: 18px; }
.main-content > header:first-of-type, .main-content > .page-hero:first-of-type, .main-content > .crm-page-head:first-of-type { margin-top: 0; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    position: sticky; top: 0; align-self: start; height: 100vh;
    display: flex; flex-direction: column;
    background: linear-gradient(200deg, #012e2c 0%, #011a19 60%, #010f0f 100%);
    color: rgba(255,255,255,.88);
    padding: 20px 14px 16px; z-index: 60;
    border-right: 1px solid rgba(255,255,255,.04);
}
.sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; }
.brand-lockup { display: block; }
.brand-lockup img { height: auto; width: 184px; }
.sidebar-close { display: none; width: 34px; height: 34px; border-radius: var(--r-sm); color: rgba(255,255,255,.8); }
.sidebar-close:hover { background: rgba(255,255,255,.12); }

.sidebar-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 2px 6px; margin-top: 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 999px; }
.nav-label { display: block; margin: 16px 12px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.46); }
.nav-label:first-child { margin-top: 4px; }
.sidebar-nav a {
    position: relative; display: flex; align-items: center; gap: 11px;
    min-height: 40px; padding: 9px 13px; margin: 1px 0; border-radius: 10px;
    color: rgba(255,255,255,.72); font-size: 13.5px; font-weight: 500; line-height: 1.15;
    transition: background var(--ease), color var(--ease);
}
.sidebar-nav a:hover { background: rgba(255,255,255,.09); color: rgba(255,255,255,.95); }
.sidebar-nav a.active { background: rgba(0,153,93,.22); color: #fff; font-weight: 600; border: 1px solid rgba(0,153,93,.28); }
.sidebar-nav a.active::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 4px 4px 0; background: var(--lime); box-shadow: 0 0 8px rgba(177,211,75,.6); }
.sidebar-nav a svg { width: 18px; height: 18px; opacity: .9; flex: none; }
.sidebar-nav a.active svg { opacity: 1; }
.sidebar-nav a.nav-logout { margin-top: 6px; color: rgba(255,255,255,.6); }
.sidebar-nav a.nav-logout:hover { color: #ffd9c2; background: rgba(244,121,32,.16); }

.sidebar-footer { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r); transition: background var(--ease); }
.sidebar-user:hover { background: rgba(255,255,255,.09); }
.sidebar-user .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, rgba(0,153,93,.5), rgba(0,80,46,.6)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; border: 1.5px solid rgba(0,153,93,.35); }
.sidebar-user > div { min-width: 0; flex: 1; }
.sidebar-user strong { display: block; font-size: 13px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user small { color: rgba(255,255,255,.6); font-size: 11.5px; }
.sidebar-user i[data-lucide] { color: rgba(255,255,255,.5); width: 16px; height: 16px; }

.sidebar-backdrop { display: none; }

/* ============================================================
   HERO / CABECALHOS DE PAGINA
   ============================================================ */
.page-hero, .crm-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-hero h1, .crm-page-head h1 { margin-top: 4px; }
.page-hero p.muted, .crm-page-head p.muted, .crm-page-head .muted { margin-top: 5px; font-size: 13.5px; max-width: 62ch; }
.compact-hero h1 { font-size: 23px; }
.crm-breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-400); }
.crm-breadcrumb span { color: var(--green); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.crm-breadcrumb i { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }
.hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   BOTOES
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: var(--r-sm);
    font-size: 13.5px; font-weight: 600; white-space: nowrap; letter-spacing: .01em;
    border: 1px solid transparent; transition: background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease), color var(--ease);
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(160deg, #00b068 0%, #00955a 100%); color: #fff; box-shadow: 0 1px 2px rgba(0,80,46,.3), 0 6px 20px rgba(0,153,93,.32); border-color: transparent; }
.btn.primary:hover { background: linear-gradient(160deg, #00a560 0%, #008850 100%); box-shadow: 0 2px 4px rgba(0,80,46,.3), 0 10px 28px rgba(0,153,93,.38); }
.btn.secondary { background: var(--surface); color: var(--ink-700); border-color: var(--line-2); box-shadow: var(--sh-xs); }
.btn.secondary:hover { border-color: var(--line-2); background: var(--surface); box-shadow: var(--sh-sm); }
.btn.subtle { background: var(--canvas-2); color: var(--ink-700); }
.btn.subtle:hover { background: var(--green-soft); color: var(--green-press); }
.btn.danger { background: var(--surface); color: var(--red); border-color: #f0cfcc; }
.btn.danger:hover { background: var(--red-soft); border-color: #e6b6b2; }
.btn.mini { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: var(--r-xs); gap: 6px; }
.btn.mini svg { width: 15px; height: 15px; }
.btn.full-button, .btn.full { width: 100%; }

.icon-btn { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-400); transition: background var(--ease), color var(--ease); }
.icon-btn:hover { background: var(--canvas-2); color: var(--ink-900); }
.text-action { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; font-size: 13px; transition: gap var(--ease), color var(--ease); }
.text-action:hover { color: var(--green-press); gap: 9px; }
.text-action svg { width: 15px; height: 15px; }

/* ============================================================
   PAINEIS / CARTOES
   ============================================================ */
.panel, .elevated-panel, .executive-panel, .automation-panel, .fivix-panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-sm); padding: 24px;
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-head h3 { font-size: 16px; }
.panel-head p { margin-top: 3px; font-size: 12.5px; color: var(--ink-400); }
.section-heading { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 12px; }

.enterprise-grid { display: grid; gap: 18px; }
.enterprise-grid.two-columns, .two-columns { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.hub-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-xs); transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.hub-card:hover { border-color: var(--line-2); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.hub-card > i[data-lucide]:first-child { width: 42px; height: 42px; flex: none; border-radius: var(--r-sm); background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; }
.hub-card > i[data-lucide]:first-child svg, .hub-card > i:first-child svg { width: 20px; height: 20px; }
.hub-card div { flex: 1; min-width: 0; }
.hub-card strong { display: block; font-size: 14px; color: var(--ink-900); }
.hub-card span { font-size: 12.5px; color: var(--ink-400); }
.hub-card > i[data-lucide]:last-child { color: var(--ink-300); width: 18px; }

/* ============================================================
   ALERTAS
   ============================================================ */
.alert { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 18px 14px 20px; border-radius: var(--r); font-size: 13.5px; font-weight: 500; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-sm); overflow: hidden; }
.alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.alert.success { background: var(--green-softer); border-color: #cfe9dc; color: var(--green-press); }
.alert.success::before { background: var(--green); }
.alert.error { background: var(--red-soft); border-color: #f2ccc9; color: #a5352d; }
.alert.error::before { background: var(--red); }

/* ============================================================
   BADGES / STATUS / CHIPS
   ============================================================ */
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--canvas-2); color: var(--ink-600); border: 1px solid var(--line); }
.tag.ok-tag { background: var(--green-soft); color: var(--green-press); border-color: #cfe9dc; }
.tag.danger-tag { background: var(--red-soft); color: #a5352d; border-color: #f2ccc9; }
.soft-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--green-soft); color: var(--green-press); }
.status-soft { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-700); }
.status-soft i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.version-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--green-deep); color: #fff; }
.meta-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-400); font-size: 11.5px; }
.meta-pill strong { color: var(--ink-900); font-weight: 600; }

.temperature { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.temperature b { font-size: 9px; letter-spacing: -1px; }
.temperature.quente { background: var(--orange-soft); color: var(--orange-ink); }
.temperature.morno { background: #fbf3dc; color: var(--amber); }
.temperature.frio { background: #e5f3f6; color: var(--cyan); }

.owner-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-700); font-size: 11.5px; font-weight: 600; }
.owner-chip i { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 10px; font-style: normal; font-weight: 700; }
.owner-chip.unassigned { color: var(--ink-400); font-weight: 500; }
.owner-chip.unassigned i { background: var(--canvas-2); color: var(--ink-400); }
.idle-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-400); font-size: 11.5px; }
.idle-chip svg { width: 12px; height: 12px; }
.idle-chip.stale { background: var(--orange-soft); border-color: #f6d6b8; color: var(--orange-ink); font-weight: 600; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-700); }
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea {
    width: 100%; margin-top: 6px; padding: 0 13px; height: 42px;
    background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
    color: var(--ink-900); font-size: 13.5px; transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-300); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3.5px rgba(0,153,93,.15); background: #fff; }
input[type="color"] { width: 44px; height: 40px; margin-top: 6px; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2347635f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; }
.form-grid .full, .full-field { grid-column: 1 / -1; }
.field-grid, .edit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; }
.edit-grid .full-field { grid-column: 1 / -1; }
.section-grid { display: grid; gap: 14px 16px; }
.section-grid.two { grid-template-columns: repeat(2, 1fr); }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.form-actions.full { grid-column: 1 / -1; }

.form-section { padding-top: 20px; margin-top: 6px; border-top: 1px solid var(--line); }
.form-section:first-of-type { border-top: 0; padding-top: 0; }
.section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-title > span { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.section-title strong { display: block; font-size: 14px; color: var(--ink-900); }
.section-title small { font-size: 12px; color: var(--ink-400); }

.inline-action { display: flex; gap: 8px; align-items: center; }
.inline-action input { margin-top: 0; }
.check-line { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-700); }
.check-line.compact { font-size: 12.5px; }
.check-line input, input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--green); cursor: pointer; }
.required-hint, .premium-required { font-size: 12px; color: var(--ink-400); margin: 10px 0 8px; }
.premium-required { color: var(--orange-ink); font-weight: 600; }
.city-confirm { grid-column: 1/-1; font-size: 12px; color: var(--orange-ink); background: var(--orange-soft); border: 1px solid #f6d6b8; padding: 8px 12px; border-radius: var(--r-sm); }
.conditional-panel { display: grid; gap: 14px; padding: 16px; margin-top: 4px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface-2); }
.copy-field { display: flex; gap: 8px; align-items: center; }

.sticky-form-actions { position: sticky; bottom: 0; background: linear-gradient(to top, var(--surface) 72%, transparent); padding: 14px 0 2px; margin-top: 8px; }

/* ============================================================
   METRICAS / KPIs
   ============================================================ */
.crm-metrics, .enterprise-kpis, .executive-kpis, .dashboard-kpis, .duty-metrics {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px;
}
.crm-metrics article, .enterprise-kpis article, .duty-metrics article {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-xs); padding: 16px 18px;
}
.crm-metrics span, .enterprise-kpis span, .duty-metrics span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); }
.crm-metrics strong, .enterprise-kpis strong, .duty-metrics strong { display: block; margin: 6px 0 3px; font-size: 30px; font-weight: 700; color: var(--ink-900); letter-spacing: -.03em; }
.crm-metrics small, .enterprise-kpis small, .duty-metrics small { font-size: 12px; color: var(--ink-400); }

.kpi-link { display: block; }
.executive-kpis article, .dashboard-kpis .kpi-link article, .kpi-link article {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-xs); padding: 18px; height: 100%;
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.kpi-link:hover article { border-color: rgba(0,153,93,.2); box-shadow: 0 4px 16px rgba(2,30,28,.1); transform: translateY(-3px); }
.executive-kpis article > i[data-lucide], .kpi-link article > i[data-lucide] { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; }
.executive-kpis article > i[data-lucide] svg, .kpi-link article > i[data-lucide] svg { width: 20px; height: 20px; }
.executive-kpis article > div, .kpi-link article > div { min-width: 0; }
.executive-kpis span, .kpi-link span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); }
.executive-kpis strong, .kpi-link strong { display: block; margin: 6px 0 3px; font-size: 28px; font-weight: 700; color: var(--ink-900); letter-spacing: -.03em; }
.executive-kpis small, .kpi-link small { font-size: 12px; color: var(--ink-400); }
.kpi-note { display: block; margin-top: 2px; color: var(--ink-300); font-size: 11px; }

.duty-metrics article { display: block; }
.duty-auto-form { margin: 0; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.executive-dashboard-grid, .dashboard-primary-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }
.pipeline-bars { display: grid; gap: 12px; }
.pipeline-bar-row { display: grid; gap: 7px; padding: 4px 4px; border-radius: var(--r-sm); transition: background var(--ease); }
.pipeline-bar-row:hover { background: var(--surface-2); }
.pipeline-bar-label { display: flex; align-items: center; gap: 9px; }
.pipeline-bar-label > span { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pipeline-bar-label strong { font-size: 13px; color: var(--ink-700); font-weight: 600; }
.pipeline-bar-label em { font-style: normal; margin-left: auto; font-size: 14px; font-weight: 700; color: var(--ink-900); }
.pipeline-bar-label small { color: var(--ink-400); font-size: 12px; min-width: 84px; text-align: right; }
.pipeline-bar-track { height: 8px; border-radius: 999px; background: var(--canvas-2); overflow: hidden; }
.pipeline-bar-track i { display: block; height: 100%; border-radius: 999px; }

.attention-list { display: grid; gap: 8px; }
.attention-list a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease); }
.attention-list a:hover { border-color: var(--line-2); transform: translateX(2px); box-shadow: var(--sh-xs); }
.attention-list a span { flex: 1; font-size: 13px; color: var(--ink-700); font-weight: 500; }
.attention-list a strong { font-size: 18px; font-weight: 700; color: var(--ink-900); }
.attention-list a i[data-lucide] { color: var(--ink-300); width: 16px; }
.attention-list a.danger strong { color: var(--red); }
.attention-list a.warning strong { color: var(--orange-ink); }
.attention-list a::after { content: ""; position: absolute; }
.attention-list a { position: relative; }
.attention-list a::before { content: ""; width: 3px; align-self: stretch; border-radius: 999px; background: var(--line-2); margin: 2px 0; }
.attention-list a.danger::before { background: var(--red); }
.attention-list a.warning::before { background: var(--orange); }
.attention-list a.info::before { background: var(--green); }
.attention-list a.neutral::before { background: var(--ink-300); }

.distribution-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.distribution-list { display: grid; gap: 10px; }
.distribution-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px; padding: 5px 4px; border-radius: var(--r-sm); color: inherit; transition: background var(--ease); }
a.distribution-row:hover { background: var(--surface-2); }
.distribution-row > span { font-size: 12.5px; color: var(--ink-700); font-weight: 600; }
.distribution-track { height: 8px; border-radius: 999px; background: var(--canvas-2); overflow: hidden; }
.distribution-track i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.distribution-row > strong { font-size: 14px; color: var(--ink-900); min-width: 24px; text-align: right; }
.distribution-row.temp-quente .distribution-track i { background: var(--orange); }
.distribution-row.temp-morno .distribution-track i { background: var(--amber); }
.distribution-row.temp-frio .distribution-track i { background: var(--cyan); }

.dashboard-opportunity-table { display: grid; }
.dashboard-opportunity-head, .dashboard-opportunity-table > a { display: grid; grid-template-columns: 2.2fr 1.3fr 1.2fr .9fr 24px; align-items: center; gap: 14px; }
.dashboard-opportunity-head { padding: 0 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); border-bottom: 1px solid var(--line); }
.dashboard-opportunity-table > a { padding: 12px 8px; border-bottom: 1px solid var(--line); transition: background var(--ease); }
.dashboard-opportunity-table > a:last-child { border-bottom: 0; }
.dashboard-opportunity-table > a:hover { background: var(--surface-2); }
.dashboard-opportunity-table > a strong { font-size: 13.5px; color: var(--ink-900); }
.dashboard-opportunity-table > a > span { font-size: 13px; color: var(--ink-600); }
.dashboard-opportunity-table > a > i[data-lucide] { color: var(--ink-300); width: 16px; }
.dashboard-lead-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dashboard-lead-cell > b { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.dashboard-lead-cell > span { min-width: 0; }
.dashboard-lead-cell small { display: block; font-size: 11.5px; color: var(--ink-400); }

/* ============================================================
   CRM - BARRA DE COMANDO / FILTROS
   ============================================================ */
.crm-command-bar, .filters-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.crm-command-bar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-xs); padding: 12px 14px; }
.crm-search { flex: 1 1 260px; min-width: 200px; margin-top: 0 !important; height: 40px; }
.filters-bar select { width: auto; min-width: 150px; margin-top: 0; height: 40px; }
.filter-toggle { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-600); font-size: 13px; font-weight: 500; transition: border-color var(--ease), color var(--ease), background var(--ease); }
.filter-toggle svg { width: 15px; height: 15px; }
.filter-toggle.active { border-color: var(--orange); color: var(--orange-ink); background: var(--orange-soft); font-weight: 600; }
.filter-count { margin-left: auto; color: var(--ink-400); font-size: 12.5px; white-space: nowrap; }
.filter-clear { border: 1px solid transparent; background: none; color: var(--green); font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: var(--r-sm); }
.filter-clear:hover { background: var(--green-soft); }

/* ============================================================
   CRM - BOARD
   ============================================================ */
.crm-board-shell { overflow: visible; }
.crm-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(288px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.crm-board::-webkit-scrollbar { height: 8px; }
.crm-board::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.crm-column { display: flex; flex-direction: column; background: #edf1ee; border: 1px solid var(--line); border-radius: var(--r); min-height: 180px; }
.crm-column > header { display: flex; align-items: center; gap: 9px; padding: 12px 12px 10px; border-bottom: 1px solid var(--line); }
.crm-column .status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--status-color, var(--green)); }
.column-heading { flex: 1; min-width: 0; }
.column-heading strong { display: block; font-size: 13.5px; color: var(--ink-900); font-weight: 600; }
.column-heading small { font-size: 11.5px; color: var(--ink-400); }
.column-add { width: 28px; height: 28px; border-radius: var(--r-xs); color: var(--ink-400); display: grid; place-items: center; transition: background var(--ease), color var(--ease); }
.column-add:hover { background: var(--surface); color: var(--green-press); }
.column-add svg { width: 16px; height: 16px; }
.column-menu-wrap { position: relative; }
.column-menu-btn { width: 28px; height: 28px; border-radius: var(--r-xs); color: var(--ink-400); display: grid; place-items: center; }
.column-menu-btn:hover { background: var(--surface); color: var(--ink-900); }
.column-menu-btn svg { width: 16px; height: 16px; }
.column-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 210px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-md); }
.column-menu button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink-700); font-size: 13px; text-align: left; }
.column-menu button:hover { background: var(--surface-2); }
.column-menu svg { width: 15px; height: 15px; color: var(--ink-400); }

.crm-card-stack { display: flex; flex-direction: column; gap: 10px; padding: 10px; flex: 1; min-height: 60px; }
.crm-card-stack.is-drop-target { background: var(--green-softer); outline: 2px dashed var(--green); outline-offset: -6px; border-radius: var(--r); }
.column-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); color: var(--ink-400); font-size: 12.5px; width: 100%; transition: border-color var(--ease), color var(--ease), background var(--ease); }
.column-empty:hover { border-color: var(--green); color: var(--green-press); background: var(--green-softer); }
.column-empty svg { width: 15px; height: 15px; }

.crm-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-xs); padding: 14px; cursor: grab; transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.crm-card:hover { border-color: rgba(0,153,93,.25); box-shadow: 0 4px 12px rgba(2,30,28,.08), 0 1px 3px rgba(2,30,28,.06); transform: translateY(-3px); }
.crm-card.is-dragging { opacity: .5; box-shadow: var(--sh-md); }
.crm-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.crm-card-top strong { font-size: 13.5px; color: var(--ink-900); font-weight: 600; line-height: 1.3; }
.crm-card > p { margin-top: 4px; font-size: 12px; color: var(--ink-400); }
.crm-card-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.crm-card-fields > div { min-width: 0; }
.crm-card-fields span { display: block; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-300); }
.crm-card-fields strong { font-size: 12px; color: var(--ink-700); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.life-card { margin-top: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.life-card strong { display: block; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-300); }
.life-card span { font-size: 12px; color: var(--ink-700); font-weight: 500; }
.next-activity { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--green-softer); border: 1px solid #d5ebe0; color: var(--ink-700); font-size: 12px; }
.next-activity svg { width: 13px; height: 13px; color: var(--green-press); flex: none; }
.next-activity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-activity small { margin-left: auto; white-space: nowrap; color: var(--ink-400); }
.next-activity.overdue { background: var(--red-soft); border-color: #f2ccc9; color: #a5352d; }
.next-activity.overdue svg { color: var(--red); }
.crm-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.crm-card-footer { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.card-open-button { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--green); }
.card-open-button:hover { color: var(--green-press); }
.card-open-button svg { width: 13px; height: 13px; }
.crm-card-footer form { margin-left: auto; }
.crm-card-footer select { height: 32px; margin-top: 0; font-size: 12px; max-width: 148px; padding: 0 26px 0 10px; }
.crm-drop-form { display: none; }

/* ============================================================
   TABELAS
   ============================================================ */
.enterprise-table-wrap, .history-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.enterprise-table, .history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.enterprise-table thead th, .history-table thead th { text-align: left; padding: 11px 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400); background: var(--canvas-2); border-bottom: 1.5px solid var(--line-2); white-space: nowrap; }
.enterprise-table tbody td, .history-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink-600); vertical-align: middle; }
.enterprise-table tbody tr:last-child td, .history-table tbody tr:last-child td { border-bottom: 0; }
.enterprise-table tbody tr { transition: background var(--ease); }
.enterprise-table tbody tr:hover { background: var(--surface-2); }
.enterprise-table td strong { color: var(--ink-900); font-weight: 600; }
.enterprise-table td small { display: block; font-size: 11.5px; color: var(--ink-400); margin-top: 2px; }
.roomy-table tbody td { padding-top: 15px; padding-bottom: 15px; }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]::after { content: "↕"; margin-left: 6px; font-size: 10px; opacity: .5; }
th[data-sort].sort-asc::after { content: "↑"; color: var(--green); opacity: 1; }
th[data-sort].sort-desc::after { content: "↓"; color: var(--green); opacity: 1; }
.table-open-link { display: block; width: 100%; text-align: left; }
.table-open-link strong { display: block; }
.table-open-link:hover strong { color: var(--green-press); text-decoration: underline; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.row-actions form { margin: 0; }

.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pagination-bar span { color: var(--ink-400); font-size: 12.5px; }
.pagination-controls { display: flex; align-items: center; gap: 5px; }
.pagination-controls button, .pagination-controls span { min-width: 32px; height: 32px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-700); font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--ease), background var(--ease); }
.pagination-controls span { border: 0; background: none; color: var(--ink-300); }
.pagination-controls button:hover:not(:disabled) { border-color: var(--green); color: var(--green-press); }
.pagination-controls button.current { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.pagination-controls button:disabled { opacity: .4; cursor: default; }
.page-save-bar, .page-save-bar * { }

/* ============================================================
   EMPRESAS
   ============================================================ */
.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.company-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-xs); transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.company-card:hover { border-color: var(--line-2); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.company-card > div:first-child { display: flex; flex-direction: column; }
.company-mark { align-self: flex-start; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.company-card strong { font-size: 14px; color: var(--ink-900); }
.company-card > div:first-child small { font-size: 12px; color: var(--ink-400); }
.company-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.company-card dl > div { min-width: 0; }
.company-card dt { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-300); }
.company-card dd { font-size: 12.5px; color: var(--ink-700); font-weight: 600; }
.company-actions { display: flex; gap: 8px; margin-top: auto; }
.company-actions form { margin: 0; }

/* ============================================================
   PESSOAS / USUARIOS
   ============================================================ */
.people-list { display: grid; gap: 10px; }
.person-row { display: grid; grid-template-columns: 1.6fr auto auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.person-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person-main .avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; font-weight: 700; }
.person-main strong { display: block; font-size: 13.5px; color: var(--ink-900); }
.person-main strong small { color: var(--ink-400); font-weight: 500; }
.person-main span { font-size: 12.5px; color: var(--ink-400); }
.person-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.person-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.person-actions form { margin: 0; }
.person-actions .btn.subtle { height: 32px; padding: 0 11px; font-size: 12.5px; }

/* ============================================================
   PLANTAO
   ============================================================ */
.duty-queue-table { display: grid; gap: 8px; }
.duty-queue-row { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.duty-queue-row strong { display: block; font-size: 13.5px; color: var(--ink-900); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duty-queue-row small { display: block; color: var(--ink-400); font-size: 12px; }
.duty-assign-form { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 0; }
.duty-assign-form select { height: 34px; margin-top: 0; max-width: 190px; font-size: 12.5px; }
.duty-agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.duty-agent-card { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-xs); margin: 0; }
.duty-agent-card.available { border-color: #cfe9dc; }
.duty-agent-head { display: flex; align-items: center; gap: 11px; }
.duty-agent-head .avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; font-weight: 700; }
.duty-agent-head > div { flex: 1; min-width: 0; }
.duty-agent-head strong { display: block; font-size: 13.5px; color: var(--ink-900); }
.duty-agent-head span { font-size: 12px; color: var(--ink-400); }
.duty-agent-head em { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.duty-agent-card.available .duty-agent-head em { background: var(--green-soft); color: var(--green-press); }
.duty-agent-card.offline .duty-agent-head em { background: var(--canvas-2); color: var(--ink-400); }
.duty-limit { font-size: 12px; color: var(--ink-600); }
.duty-limit input { margin-top: 5px; }

/* ============================================================
   INBOX
   ============================================================ */
.inbox-list { display: grid; gap: 8px; }
.inbox-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 13px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color var(--ease), box-shadow var(--ease); }
.inbox-row:hover { border-color: var(--line-2); box-shadow: var(--sh-xs); }
.inbox-row > .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; font-weight: 700; }
.inbox-row-main { min-width: 0; }
.inbox-row-main strong { display: block; font-size: 13.5px; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-row-main strong small { color: var(--ink-400); font-weight: 500; }
.inbox-row-main p { margin-top: 2px; font-size: 12.5px; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-row-side { display: grid; gap: 5px; justify-items: end; }
.inbox-row-side small { color: var(--ink-300); font-size: 11.5px; white-space: nowrap; }
.inbox-status { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--green-soft); color: var(--green-press); }
.inbox-status.handoff { background: var(--orange-soft); color: var(--orange-ink); }

/* ============================================================
   FICHA DA OPORTUNIDADE (PAINEL LATERAL)
   ============================================================ */
body.overlay-open { overflow: hidden; }
.side-panel { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; visibility: hidden; opacity: 0; background: rgba(9,43,40,.42); backdrop-filter: blur(3px); transition: opacity var(--ease), visibility var(--ease); }
.side-panel[aria-hidden="false"], .side-panel.open { visibility: visible; opacity: 1; }
.side-panel-content { width: min(560px, 100%); height: 100%; background: var(--surface); box-shadow: var(--sh-lg); overflow-y: auto; transform: translateX(24px); transition: transform var(--ease); padding: 24px; }
.side-panel[aria-hidden="false"] .side-panel-content, .side-panel.open .side-panel-content { transform: translateX(0); }
.side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.side-head .eyebrow { margin-bottom: 3px; }
.side-head h3 { font-size: 19px; }
.side-head small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-400); }

.opportunity-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.opportunity-actions .btn { height: 38px; }
.opportunity-actions form { margin: 0; }

.opportunity-tabs { display: flex; gap: 3px; margin-top: 16px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); overflow-x: auto; scrollbar-width: none; }
.opportunity-tabs::-webkit-scrollbar { display: none; }
.opportunity-tabs button { flex: 0 0 auto; padding: 7px 12px; border-radius: var(--r-sm); color: var(--ink-400); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background var(--ease), color var(--ease); }
.opportunity-tabs button:hover { color: var(--ink-900); }
.opportunity-tabs button.active { background: var(--surface); color: var(--green-press); box-shadow: var(--sh-xs); }
.opportunity-tab-panel { display: none; padding-top: 18px; }
.opportunity-tab-panel.active { display: block; animation: fade-up 200ms ease both; }

.qualification-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.qualification-grid > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.qualification-grid span { display: block; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-300); }
.qualification-grid strong { font-size: 13.5px; color: var(--ink-900); font-weight: 600; }
.qualification-stars { color: var(--orange); }

.opportunity-command-center { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(135deg, var(--green-softer), var(--surface)); }
.score-ring { position: relative; width: 66px; height: 66px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) var(--score, 0%), var(--canvas-2) 0); }
.score-ring::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.score-ring strong, .score-ring span { position: relative; z-index: 1; line-height: 1; }
.score-ring strong { font-size: 16px; color: var(--ink-900); font-weight: 700; }
.score-ring span { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); }
.command-copy { flex: 1; min-width: 0; }
.command-copy > span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--green-press); }
.command-copy strong { display: block; font-size: 14px; color: var(--ink-900); margin: 3px 0; }
.command-copy small { font-size: 12px; color: var(--ink-400); }
.command-meta { text-align: right; }
.command-meta span { display: block; font-size: 11.5px; color: var(--ink-400); }
.command-meta strong { font-size: 13px; color: var(--ink-900); }

.meta-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.ficha-owner-box { display: grid; gap: 11px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.ficha-owner-box header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ficha-owner-box header strong { font-size: 13px; color: var(--ink-900); }
.ficha-owner-box header span { font-size: 12px; color: var(--ink-400); }
.ficha-owner-form { display: flex; gap: 8px; margin: 0; }
.ficha-owner-form select { margin-top: 0; }

.side-section { margin-top: 18px; }
.side-section h4 { margin-bottom: 10px; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); }
.side-edit-title { margin-bottom: 12px; }
.side-edit-title strong { display: block; font-size: 15px; color: var(--ink-900); }
.side-edit-title span { font-size: 12.5px; color: var(--ink-400); }
.opportunity-summary-copy p { font-size: 13px; color: var(--ink-600); line-height: 1.6; }

.open-task-list { display: grid; gap: 8px; }
.open-task-list article { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.open-task-list strong { display: block; font-size: 13px; color: var(--ink-900); }
.open-task-list span { font-size: 12px; color: var(--ink-400); }
.open-task-list form { margin: 0; }
.stack-form { display: grid; gap: 10px; }
.stack-form .btn { justify-self: start; }

.timeline-list { display: grid; gap: 8px; }
.timeline-list article { position: relative; padding: 11px 12px 11px 15px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.timeline-list article::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 999px; background: var(--green); }
.timeline-list span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--green-press); }
.timeline-list strong { display: block; font-size: 13px; color: var(--ink-900); font-weight: 500; margin: 2px 0; }
.timeline-list small { font-size: 11.5px; color: var(--ink-400); }
.mini-empty { padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); text-align: center; font-size: 12.5px; color: var(--ink-400); }

.conversation-block { display: grid; gap: 12px; }
.conversation-bubble { padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-700); font-size: 13px; line-height: 1.55; }
.conversation-bubble small { display: block; margin-bottom: 5px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-300); }
.whatsapp-action.disabled { opacity: .5; pointer-events: none; }

/* Faixas etarias / temperatura (ficha e modal) */
.age-range-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.age-range-buttons button { height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-700); font-size: 12.5px; font-weight: 600; transition: border-color var(--ease), color var(--ease), background var(--ease); }
.age-range-buttons button:hover { border-color: var(--green); color: var(--green-press); }
.age-range-buttons button.active { background: var(--green); border-color: var(--green); color: #fff; }
.selected-age-ranges { margin-top: 10px; font-size: 12.5px; color: var(--ink-400); }
.temperature-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.temperature-picker button { display: grid; gap: 3px; justify-items: center; padding: 12px 8px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); transition: border-color var(--ease), background var(--ease), box-shadow var(--ease); }
.temperature-picker button span { font-size: 15px; color: var(--orange); letter-spacing: -1px; }
.temperature-picker button strong { font-size: 12.5px; color: var(--ink-700); }
.temperature-picker button small { font-size: 11px; color: var(--ink-400); }
.temperature-picker button:hover { border-color: var(--line); background: var(--surface-2); }
.temperature-picker button.active { border-color: var(--green); background: var(--green-softer); box-shadow: var(--ring); }
.temperature-picker button.active strong { color: var(--green-press); }
.compact-temperature button { padding: 9px 6px; }

/* ============================================================
   MODAIS
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; background: rgba(9,43,40,.5); backdrop-filter: blur(4px); transition: opacity var(--ease), visibility var(--ease); }
.modal[aria-hidden="false"], .modal.open { visibility: visible; opacity: 1; }
.modal-card { width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 24px; transform: translateY(10px) scale(.99); transition: transform var(--ease); }
.modal[aria-hidden="false"] .modal-card, .modal.open .modal-card { transform: translateY(0) scale(1); }
.modal-card.large-modal { max-width: 680px; }
.modal-card.small-modal { max-width: 440px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.modal-head .eyebrow { margin-bottom: 3px; }
.modal-head h3 { font-size: 19px; }
.modal-head small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-400); }
.modal-card > form { display: grid; gap: 14px; }

.status-create-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); margin-bottom: 16px; }
.status-create-form > div { flex: 1 1 100%; }
.status-create-form > div strong { font-size: 13.5px; color: var(--ink-900); }
.status-create-form > div small { font-size: 12px; color: var(--ink-400); }
.status-create-form input:not([type="color"]) { flex: 1; min-width: 120px; margin-top: 0; }
.status-config-form { display: grid; gap: 8px; }
.status-config-head { display: grid; grid-template-columns: 80px 1fr 60px 90px; gap: 10px; padding: 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); }
.status-config-row { display: grid; grid-template-columns: 80px 1fr 60px 90px; gap: 10px; align-items: center; }
.status-config-row input { margin-top: 0; }
.delete-status-option { display: flex; align-items: center; gap: 6px; }
.delete-status-option small { font-size: 11px; color: var(--ink-400); }

/* ============================================================
   ESTADOS VAZIOS
   ============================================================ */
.empty-state { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 24px; }
.empty-state > i[data-lucide] { width: 52px; height: 52px; border-radius: 50%; background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; margin-bottom: 4px; }
.empty-state > i[data-lucide] svg { width: 24px; height: 24px; }
.empty-state strong { font-size: 15px; color: var(--ink-900); }
.empty-state span { font-size: 13px; color: var(--ink-400); max-width: 44ch; }
.empty-state .btn { margin-top: 8px; }
.compact-empty { padding: 28px 20px; }

/* ============================================================
   AUTOMACAO / IA
   ============================================================ */
.automation-form { display: grid; gap: 14px; }
.automation-alert { padding: 13px 16px; border-radius: var(--r); font-size: 13px; background: var(--green-softer); border: 1px solid #cfe9dc; color: var(--green-press); }
.chat-agent { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.agent-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 700; }
.setup-step { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.setup-step:first-child { border-top: 0; }
.setup-number { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.setup-content strong { display: block; font-size: 14px; color: var(--ink-900); }
.setup-content span, .setup-content p { font-size: 12.5px; color: var(--ink-400); }
.connection-state { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.connection-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.connection-state.state-connected { background: var(--green-soft); color: var(--green-press); }
.connection-state.state-not_configured, .connection-state.state-disconnected { background: var(--canvas-2); color: var(--ink-400); }
.connection-state.state-error { background: var(--red-soft); color: #a5352d; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-body { min-height: 100vh; background: var(--canvas); display: grid; place-items: center; padding: 24px; }
.login-shell { width: 100%; max-width: 1020px; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--surface); border-radius: 22px; overflow: hidden; box-shadow: 0 8px 16px rgba(2,30,28,.08), 0 40px 80px rgba(2,30,28,.16); border: 1px solid var(--line); min-height: 600px; }
.login-brand-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 44px; color: #fff; background: radial-gradient(140% 130% at 10% -10%, #008050 0%, #012e2c 45%, #010f0f 100%); overflow: hidden; }
.login-brand-panel::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(177,211,75,.22), transparent 70%); }
.login-brand-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.login-brand-top img { width: 190px; }
.login-brand-top span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.login-brand-message { position: relative; z-index: 1; }
.login-kicker { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); margin-bottom: 12px; }
.login-brand-message h1 { color: #fff; font-size: 29px; line-height: 1.18; max-width: 15ch; }
.login-brand-message p { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.82); max-width: 34ch; line-height: 1.6; }
.login-brand-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: rgba(255,255,255,.72); }
.login-brand-footer i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }

.login-form-panel { display: grid; place-items: center; padding: 40px; }
.login-card { width: 100%; max-width: 340px; display: grid; gap: 14px; }
.login-form-heading { margin-bottom: 4px; }
.login-form-heading h2 { font-size: 23px; margin: 4px 0; }
.login-form-heading .muted { font-size: 13px; }
.login-card label span { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-700); }
.login-field { position: relative; display: flex; align-items: center; }
.login-field > i[data-lucide]:first-child { position: absolute; left: 12px; color: var(--ink-300); width: 17px; height: 17px; pointer-events: none; }
.login-field input { margin-top: 0; padding-left: 38px; height: 44px; }
.login-field input[type="password"], .login-field input[name="password"] { padding-right: 44px; }
.password-toggle { position: absolute; right: 6px; width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--ink-400); display: grid; place-items: center; }
.password-toggle:hover { color: var(--green-press); background: var(--surface-2); }
.login-links { display: flex; justify-content: flex-end; margin-top: -4px; }
.login-links button { color: var(--green); font-size: 12.5px; font-weight: 600; padding: 2px 4px; border-radius: 4px; }
.login-links button:hover { text-decoration: underline; }
.login-card .btn.primary { height: 46px; margin-top: 4px; }
.login-security { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--ink-400); }
.login-security svg { width: 15px; height: 15px; color: var(--green); }
.login-credit { text-align: center; font-size: 11px; letter-spacing: .02em; color: var(--ink-300); }
.recovery-note { display: grid; gap: 10px; font-size: 13.5px; color: var(--ink-600); line-height: 1.6; }

/* ============================================================
   ANIMACOES
   ============================================================ */
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.is-ready .main-content { animation: fade-up 260ms ease both; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1180px) {
    .executive-dashboard-grid, .dashboard-primary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
    :root { --sidebar-w: 0px; }
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: fixed; left: 0; top: 0; width: 264px; transform: translateX(-100%); transition: transform var(--ease); box-shadow: var(--sh-lg); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: grid; }
    .mobile-menu-btn { display: grid; }
    .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(9,43,40,.4); opacity: 0; visibility: hidden; transition: opacity var(--ease), visibility var(--ease); }
    body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }
    .topbar-profile em, .topbar-context span { display: none; }
}
@media (max-width: 860px) {
    .duty-queue-row { grid-template-columns: 1fr; }
    .duty-assign-form { justify-content: flex-start; }
    .person-row { grid-template-columns: 1fr; }
    .person-tags, .person-actions { justify-content: flex-start; }
    .login-shell { grid-template-columns: 1fr; max-width: 420px; }
    .login-brand-panel { display: none; }
    .opportunity-command-center { flex-wrap: wrap; }
    .command-meta { text-align: left; }
}
@media (max-width: 620px) {
    .main-content > *:not(.app-topbar) { padding-left: 16px; padding-right: 16px; }
    .app-topbar { padding: 0 16px; }
    .page-hero, .crm-page-head { flex-direction: column; align-items: stretch; }
    .hero-actions { justify-content: flex-start; }
    .form-grid, .field-grid, .edit-grid, .section-grid.two, .qualification-grid, .company-card dl { grid-template-columns: 1fr; }
    .crm-card-fields { grid-template-columns: repeat(2, 1fr); }
    .side-panel-content, .modal-card { padding: 18px; }
    .filter-count { flex-basis: 100%; order: 9; }
    .pagination-bar { justify-content: center; }
    .inbox-row { grid-template-columns: 36px minmax(0,1fr); }
    .inbox-row-side { grid-column: 2; justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Ponte de tokens (compatibilidade com telas secundarias) ---------- */
:root {
    --green-900: #004e4c; --green-800: #00615c; --green-700: #007a4b; --green-600: #00995d;
    --green-500: #10a96b; --green-100: #e6f4ec; --green-050: #f2f9f5;
    --lime-500: #b1d34b; --orange-600: #f47920; --orange-700: #b8560f;
    --cyan-600: #0e8ba1; --blue-600: #2f6fed; --violet-600: #7a53d1; --amber-600: #c07d0a; --red-600: #d0433a;
    --ink-950: #0d2b28; --ink-800: #294a46; --ink-500: #7c918d;
    --line-strong: #d7e1dd; --surface-soft: #f7faf8;
    --shadow-sm: 0 1px 2px rgba(4,54,48,.05), 0 6px 16px rgba(4,54,48,.05);
    --shadow-md: 0 2px 6px rgba(4,54,48,.06), 0 18px 40px rgba(4,54,48,.10);
    --radius: 10px; --radius-sm: 8px;
    --sidebar-width: 244px; --topbar-height: 60px;
}

/* ---------- Estilos preservados das telas secundarias (automacao, config, diagnostico, atualizacoes) ---------- */
.cnpj-preview, .city-confirm { padding: 9px 10px; color: var(--green-800); border: 1px solid #bcded2; border-radius: var(--radius-sm); background: var(--green-050); font-size: 11px; }
.settings-hub { grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 12px; }
.server-info-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.server-info-grid > div, .diagnostic-list > div, .readiness-list > div, .check-list > div { padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.diagnostic-list, .readiness-list, .check-list, .toggle-list { display: grid; gap: 7px; }
.update-grid { grid-template-columns: minmax(0,1.5fr) minmax(280px,.7fr); }
.dropzone, .pdf-dropzone { display: grid; min-height: 150px; place-items: center; align-content: center; gap: 7px; cursor: pointer; color: var(--ink-600); border: 1px dashed #9fcbbb; border-radius: var(--radius); background: var(--green-050); transition: border-color var(--ease), background var(--ease); }
.dropzone:hover, .pdf-dropzone:hover { border-color: var(--green-600); background: #eaf8f1; }
.dropzone-icon, .pdf-icon { display: grid; width: 40px; height: 40px; place-items: center; color: #fff; border-radius: var(--radius-sm); background: var(--green-600); }
.backup-location { padding: 10px; color: #cde9e1; border-radius: var(--radius-sm); background: var(--ink-950); font-family: Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
.automation-hero { margin-bottom: 0; }
.automation-tabs { display: flex; gap: 5px; padding: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.automation-tabs a { flex: 0 0 auto; padding: 8px 11px; color: var(--ink-600); border-radius: var(--radius-sm); font-size: 11px; font-weight: 750; }
.automation-tabs a.active { color: #fff; background: var(--green-700); }
.automation-overview-grid { grid-template-columns: 1.1fr .9fr; }
.automation-flow { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.automation-flow-card { min-height: 108px; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.automation-flow-card strong, .automation-flow-card span { display: block; }
.automation-flow-card span { margin-top: 5px; color: var(--ink-600); font-size: 10px; }
.agent-presence, .connection-state, .reader-status, .integration-status { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.agent-avatar, .chat-agent, .chat-lead { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; }
.agent-avatar, .chat-agent { color: #fff; background: var(--green-600); }
.chat-lead { color: var(--ink-800); background: #e4ece9; }
.agent-preview, .chat-preview { display: grid; gap: 7px; }
.chat-preview > div { display: flex; gap: 8px; align-items: flex-start; }
.chat-preview p { max-width: 78%; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-size: 11px; }
.document-list, .learning-list { display: grid; gap: 7px; }
.document-list > article, .learning-list > article { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.doc-mark { display: grid; width: 32px; height: 32px; place-items: center; color: var(--red-600); border-radius: var(--radius-sm); background: #fff0f0; font-size: 9px; font-weight: 800; }
.integration-url, .redirect-example { overflow-wrap: anywhere; font-family: Consolas, monospace; font-size: 11px; }
.automation-flow { grid-template-columns: repeat(3,minmax(0,1fr)); }
.dashboard-primary-grid, .automation-overview-grid, .update-grid { grid-template-columns: 1fr; }
.server-info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.automation-flow { grid-template-columns: 1fr 1fr; }

/* ---------- Complemento telas admin (grids, status e blocos especificos) ---------- */
.eyebrow, .module-kicker, .crm-breadcrumb { margin: 0 0 7px; color: var(--green-700); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.tag, .status-tag, .status-soft, .soft-badge, .version-tag, .version-pill, .secure-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 25px; padding: 4px 8px; color: var(--ink-600); border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); font-size: 10px; font-weight: 750; }
.form-grid, .field-grid, .edit-grid, .section-grid.two, .two-columns, .agent-config-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* Dashboard */
.executive-kpis, .crm-metrics, .duty-metrics, .automation-metrics, .dashboard-health-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }
.executive-kpis article, .crm-metrics article, .duty-metrics article, .automation-metrics article, .dashboard-health-grid article { display: flex; min-width: 0; min-height: 88px; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
.executive-kpis span, .crm-metrics span, .duty-metrics span, .automation-metrics span, .dashboard-health-grid span { display: block; color: var(--ink-500); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.executive-kpis strong, .crm-metrics strong, .duty-metrics strong, .automation-metrics strong, .dashboard-health-grid strong { display: block; overflow: hidden; margin-top: 2px; color: var(--ink-950); font-size: 20px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.executive-kpis small, .crm-metrics small, .duty-metrics small, .automation-metrics small, .dashboard-health-grid small { display: block; overflow: hidden; margin-top: 4px; color: var(--green-700); font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
/* Tables, directories and settings */
.enterprise-grid, .settings-hub, .diagnostics-grid, .update-grid, .automation-overview-grid, .knowledge-grid, .principle-grid, .company-grid { display: grid; gap: 12px; }
.enterprise-grid, .two-columns, .update-grid, .diagnostics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.company-actions, .row-actions, .person-actions, .rollback-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rollback-grid, .backup-mini-list { display: grid; gap: 8px; }
.rollback-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
/* Automation */
.automation-page { display: grid; gap: 12px; }
.setup-content, .setup-panel, .rules-panel, .learning-panel, .document-list-panel, .readiness-panel { min-width: 0; }
.executive-kpis, .crm-metrics, .duty-metrics, .automation-metrics, .dashboard-health-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.enterprise-grid, .two-columns, .diagnostics-grid { grid-template-columns: 1fr; }
.dashboard-kpis, .executive-kpis, .crm-metrics, .duty-metrics, .automation-metrics, .dashboard-health-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.executive-kpis article, .crm-metrics article, .duty-metrics article, .automation-metrics article { min-height: 78px; padding: 10px; }
.qualification-grid, .edit-grid, .form-grid, .field-grid, .section-grid.two, .lead-form-clean, .conditional-panel, .agent-config-grid { grid-template-columns: 1fr; }

/* ---------- Fallbacks coerentes p/ blocos remanescentes de telas admin ---------- */
.automation-hero-copy { display: grid; gap: 6px; }
.automation-hero-copy h1, .automation-hero-copy h2 { margin: 0; }
.module-kicker { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.backup-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.backup-mini-list { display: grid; gap: 8px; }
.health-score { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; color: var(--ink-900); }
.status-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--green-soft); color: var(--green-press); }
.doc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-600); }
.empty-knowledge, .empty-learning { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 30px 20px; color: var(--ink-400); font-size: 13px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface-2); }
.empty-knowledge strong, .empty-learning strong { font-size: 14.5px; color: var(--ink-900); }
.qualification-table { display: grid; gap: 8px; }
.rule-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.patch-form, .upload-panel { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.pdf-dropzone, .dropzone { display: grid; justify-items: center; gap: 8px; padding: 30px 20px; border: 1.5px dashed var(--line-2); border-radius: var(--r); background: var(--surface); text-align: center; color: var(--ink-400); font-size: 13px; transition: border-color var(--ease), background var(--ease); }
.pdf-dropzone:hover, .dropzone:hover, .pdf-dropzone.is-dragover, .dropzone.is-dragover { border-color: var(--green); background: var(--green-softer); }
.selected-file, .selected-pdf { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--green-soft); color: var(--green-press); font-size: 12.5px; font-weight: 600; }
.update-submit { display: flex; justify-content: flex-end; gap: 10px; }
.update-warning, .safety-note { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border-radius: var(--r); background: var(--orange-soft); border: 1px solid #f6d6b8; color: var(--orange-ink); font-size: 12.5px; line-height: 1.5; }
.safety-note { background: var(--green-softer); border-color: #cfe9dc; color: var(--green-press); }
.warning-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.safe-error-card { max-width: 460px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 12px; padding: 32px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.safe-error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.step-copy { display: grid; gap: 3px; }
.step-copy strong, .step-question { font-size: 14px; color: var(--ink-900); font-weight: 600; }
.step-position { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; font-weight: 700; font-size: 12.5px; }
.update-history-panel { display: grid; gap: 10px; }
.setup-panel { display: grid; gap: 4px; }

/* ============================================================
   UPGRADE PREMIUM 1.10.2 — Mais personalidade e profundidade
   ============================================================ */

/* KPI cards com borda top colorida por posição e ícone mais intenso */
.executive-kpis article, .kpi-link article {
    box-shadow: inset 0 2px 0 var(--green), var(--sh-xs);
    padding-top: 20px;
}
.dashboard-kpis .kpi-link:nth-child(1) article { box-shadow: inset 0 2px 0 var(--green), var(--sh-xs); }
.dashboard-kpis .kpi-link:nth-child(2) article { box-shadow: inset 0 2px 0 var(--blue), var(--sh-xs); }
.dashboard-kpis .kpi-link:nth-child(3) article { box-shadow: inset 0 2px 0 var(--violet), var(--sh-xs); }
.dashboard-kpis .kpi-link:nth-child(4) article { box-shadow: inset 0 2px 0 var(--orange), var(--sh-xs); }
.dashboard-kpis article:nth-child(4) { box-shadow: inset 0 2px 0 var(--cyan), var(--sh-xs); }

.executive-kpis article > i[data-lucide], .kpi-link article > i[data-lucide] {
    width: 44px; height: 44px; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,153,93,.2);
}
.dashboard-kpis .kpi-link:nth-child(2) article > i[data-lucide] { background: #eff4ff; color: var(--blue); box-shadow: 0 2px 8px rgba(37,99,235,.18); }
.dashboard-kpis .kpi-link:nth-child(3) article > i[data-lucide] { background: #f2eeff; color: var(--violet); box-shadow: 0 2px 8px rgba(109,66,201,.18); }
.dashboard-kpis article:nth-child(4) > i[data-lucide] { background: #e6f6f9; color: var(--cyan); box-shadow: 0 2px 8px rgba(11,122,143,.18); }
.dashboard-kpis .kpi-link:nth-child(5) article > i[data-lucide] { background: #fff3ea; color: var(--orange); box-shadow: 0 2px 8px rgba(168,89,16,.18); }

/* Painel do funil com header mais forte */
.panel-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }

/* Breadcrumb do CRM mais visível */
.crm-breadcrumb span { color: var(--green); font-size: 10.5px; letter-spacing: .07em; }

/* Tags de temperatura com ícone emoji removido — só badge texto limpo */
.temperature { font-size: 12px; letter-spacing: .02em; }

/* Pipeline bars — valor em destaque */
.pipeline-bar-label em { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }

/* Attention list — borda esquerda mais grossa */
.attention-list a::before { width: 4px; }
.attention-list a { border-radius: var(--r-sm); }
.attention-list a strong { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

/* Distribution track maior */
.distribution-track { height: 10px; border-radius: 999px; }
.distribution-row > span { font-size: 13px; }

/* Cards do CRM — nome do lead maior */
.crm-card-top strong { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }

/* Column headers mais definidos */
.column-heading strong { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.crm-column > header { padding: 13px 13px 11px; background: rgba(255,255,255,.7); }

/* Status dot maior */
.crm-column .status-dot { width: 10px; height: 10px; }

/* Eyebrow mais presente */
.eyebrow { font-size: 10.5px; letter-spacing: .14em; font-weight: 800; }

/* Page hero mais impactante */
.page-hero h1, .crm-page-head h1 { font-size: 28px; letter-spacing: -.025em; font-weight: 800; }

/* Nav labels mais contrastados */
.nav-label { font-size: 9.5px; letter-spacing: .16em; color: rgba(255,255,255,.38); margin-top: 20px; }

/* Sidebar footer separator mais visível */
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }

/* Modal com entrada mais premium */
.modal-card { border-radius: 18px; }

/* Tags e chips com mais contraste */
.tag { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.soft-badge { font-weight: 700; font-size: 11.5px; }

/* Tabelas — linha ativa com borda esquerda */
.enterprise-table tbody tr:hover td:first-child { background: color-mix(in srgb, var(--green) 6%, transparent); }
.enterprise-table tbody td { padding: 14px 16px; }

/* Hub cards com sombra ao hover */
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(0,153,93,.18); }

/* Botão mini mais arredondado */
.btn.mini { border-radius: 8px; font-weight: 700; }

/* Paginação — botão current com sombra verde */
.pagination-controls button.current { box-shadow: 0 2px 8px rgba(0,153,93,.3); }

/* Side panel com fundo levemente esverdeado */
.side-panel-content { background: #fafcfb; }

/* Ficha tabs com fonte maior */
.opportunity-tabs button { font-size: 13px; }
.opportunity-tabs button.active { font-weight: 700; }

/* Versão na topbar */
.version-tag { font-size: 11px; letter-spacing: .04em; background: var(--green-deep); }

/* Animação de entrada suave nas páginas */
.is-ready .main-content { animation: fade-up 200ms cubic-bezier(.16,.84,.44,1) both; }

/* Scrollbar elegante no board */
.crm-board::-webkit-scrollbar { height: 6px; }
.crm-board::-webkit-scrollbar-track { background: var(--canvas-2); border-radius: 999px; }
.crm-board::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.crm-board::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* Topbar profile pill mais premium */
.topbar-profile { border-radius: 10px; padding: 6px 12px 6px 6px; }
.topbar-profile span { width: 32px; height: 32px; font-size: 13px; background: linear-gradient(135deg, #00b068, #007a4b); }

/* Status operação ativa */
.topbar-status { border: 1px solid rgba(0,153,93,.2); }

/* ============================================================
   MÓDULO AUTOMAÇÃO — upgrade 1.10.3
   ============================================================ */

/* Tabs de navegação do módulo */
.automation-tabs-nav { display: flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; scrollbar-width: none; margin-bottom: 4px; }
.automation-tabs-nav::-webkit-scrollbar { display: none; }
.automation-tabs-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-sm); color: var(--ink-400); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background var(--ease), color var(--ease); text-decoration: none; }
.automation-tabs-nav a:hover { color: var(--ink-900); background: var(--canvas-2); }
.automation-tabs-nav a.active { background: var(--green); color: #fff; }
.tab-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.automation-tabs-nav a.active .tab-badge { background: rgba(255,255,255,.3); }

.automation-body { display: grid; gap: 18px; }

/* Métricas do agente */
.agent-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; }
.agent-metric-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: inset 0 2px 0 var(--line-2), var(--sh-xs); }
.agent-metric-card.accent-green { box-shadow: inset 0 2px 0 var(--green), var(--sh-xs); }
.agent-metric-card.accent-blue { box-shadow: inset 0 2px 0 var(--blue), var(--sh-xs); }
.agent-metric-card.accent-violet { box-shadow: inset 0 2px 0 var(--violet), var(--sh-xs); }
.agent-metric-card.accent-orange { box-shadow: inset 0 2px 0 var(--orange), var(--sh-xs); }
.agent-metric-card.accent-lime { box-shadow: inset 0 2px 0 var(--lime), var(--sh-xs); }
.agent-metric-card.accent-ink { box-shadow: inset 0 2px 0 var(--ink-300), var(--sh-xs); }
.agent-metric-card.has-pending { box-shadow: inset 0 2px 0 var(--orange), var(--sh-xs); }
.agent-metric-card span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.agent-metric-card strong { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ink-900); margin: 6px 0 3px; }
.agent-metric-card small { font-size: 12px; color: var(--ink-400); }
.agent-metric-card small a { color: var(--green); font-weight: 600; text-decoration: none; }
.agent-metric-card small a:hover { text-decoration: underline; }

/* Monitor de conversas em tempo real */
.conv-monitor-table { display: grid; }
.conv-monitor-head { display: grid; grid-template-columns: 200px 1fr 130px 120px 90px; gap: 12px; padding: 10px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); background: var(--canvas-2); border-radius: var(--r-sm); margin-bottom: 4px; }
.conv-monitor-row { display: grid; grid-template-columns: 200px 1fr 130px 120px 90px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); transition: background var(--ease); }
.conv-monitor-row:last-child { border-bottom: 0; }
.conv-monitor-row:hover { background: var(--surface-2); }
.conv-contact { display: flex; align-items: center; gap: 10px; min-width: 0; }
.conv-contact b { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.conv-contact strong { display: block; font-size: 13px; color: var(--ink-900); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-contact small { font-size: 11.5px; color: var(--ink-400); }
.conv-last-msg { font-size: 12.5px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-step-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--canvas-2); color: var(--ink-600); border: 1px solid var(--line); }
.conv-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-600); }
.conv-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-300); flex: none; }
.conv-status.qualifying { color: var(--green-press); }
.conv-status.qualifying::before { background: var(--green); box-shadow: 0 0 0 3px rgba(0,153,93,.18); }
.conv-status.completed::before { background: var(--blue); }

/* Chat preview */
.chat-preview-block { display: grid; gap: 10px; padding: 14px; background: var(--canvas-2); border-radius: var(--r); }
.chat-bubble { display: flex; gap: 8px; align-items: flex-start; }
.chat-bubble.lead { justify-content: flex-end; }
.chat-avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.chat-bubble p { max-width: 80%; padding: 9px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.chat-bubble.agent p { background: var(--surface); border: 1px solid var(--line); color: var(--ink-700); border-radius: 4px 12px 12px 12px; }
.chat-bubble.lead p { background: var(--green); color: #fff; border-radius: 12px 4px 12px 12px; }

/* Checklist de preparação */
.readiness-checklist { display: grid; gap: 6px; }
.readiness-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-700); transition: border-color var(--ease), box-shadow var(--ease); text-decoration: none; }
.readiness-item:hover { border-color: var(--line-2); box-shadow: var(--sh-xs); }
.readiness-item.done { border-color: #cfe9dc; background: var(--green-softer); }
.readiness-icon { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink-300); background: var(--surface); }
.readiness-item.done .readiness-icon { background: var(--green); border-color: var(--green); color: #fff; }
.readiness-item strong { display: block; font-size: 13px; color: var(--ink-900); }
.readiness-item small { font-size: 12px; color: var(--ink-400); }
.readiness-item > div { flex: 1; min-width: 0; }
.readiness-item svg { color: var(--ink-300); flex: none; }
.readiness-item.done svg { color: var(--green-press); }

/* Fluxo operacional */
.flow-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 14px; }
.flow-step { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.flow-num { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.flow-step strong { display: block; font-size: 13.5px; color: var(--ink-900); font-weight: 700; }
.flow-step small { font-size: 12px; color: var(--ink-400); }

/* Toggle switches premium */
.toggle-list { display: grid; gap: 2px; }
.toggle-item { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--ease); }
.toggle-item:hover { background: var(--surface-2); }
.toggle-item.warning-toggle { border: 1px solid #f6d6b8; background: var(--orange-soft); border-radius: var(--r-sm); margin-top: 4px; }
.toggle-item.warning-toggle:hover { background: #fde9d4; }
.toggle-switch { position: relative; width: 42px; height: 24px; flex: none; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background var(--ease); cursor: pointer; }
.toggle-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--ease); }
.toggle-switch input:checked + span { background: var(--green); }
.toggle-switch input:checked + span::after { transform: translateX(18px); }
.toggle-item > div { flex: 1; }
.toggle-item strong { display: block; font-size: 13.5px; color: var(--ink-900); font-weight: 600; }
.toggle-item small { font-size: 12.5px; color: var(--ink-400); }

/* Regras / guardrails */
.rules-grid { display: grid; gap: 8px; }
.rule-item { display: flex; align-items: center; gap: 10px; }
.rule-bullet { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--green-soft); color: var(--green-press); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.rule-bullet.new { background: var(--canvas-2); color: var(--ink-400); }
.rule-item input { flex: 1; margin-top: 0; height: 38px; }

/* Agente avatar badge */
.agent-avatar-badge { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #00b068, #007a4b); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; flex: none; box-shadow: 0 4px 12px rgba(0,153,93,.3); }

/* Tabela de qualificação (flow) */
.flow-table { display: grid; gap: 6px; }
.flow-table-head { display: grid; grid-template-columns: 70px 1.2fr 2fr 70px 60px; gap: 10px; padding: 9px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); background: var(--canvas-2); border-radius: var(--r-sm); }
.flow-table-row { display: grid; grid-template-columns: 70px 1.2fr 2fr 70px 60px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); transition: border-color var(--ease); }
.flow-table-row:hover { border-color: var(--line-2); }
.flow-order-input { width: 100%; margin-top: 0; height: 36px; text-align: center; font-weight: 700; }
.flow-field-label strong { display: block; font-size: 13px; color: var(--ink-900); font-weight: 600; }
.flow-field-label small { font-size: 11.5px; color: var(--ink-400); }
.flow-question-input { width: 100%; margin-top: 0; height: 36px; font-size: 13px; }
.flow-check { display: flex; justify-content: center; }
.flow-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; margin: 0; }
.redirect-note { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; margin-top: 12px; border-radius: var(--r-sm); background: var(--canvas-2); color: var(--ink-600); font-size: 12.5px; line-height: 1.5; }
.redirect-note svg { flex: none; margin-top: 1px; color: var(--green-press); }
.redirect-note em { font-style: italic; color: var(--ink-900); }

/* Webhook copy rows */
.webhook-copy-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.webhook-copy-row:last-child { border-bottom: 0; }
.webhook-copy-row > span { min-width: 160px; font-size: 12.5px; font-weight: 600; color: var(--ink-700); }
.webhook-copy-row .copy-field { display: flex; align-items: center; gap: 10px; flex: 1; overflow: hidden; }
.webhook-copy-row code { flex: 1; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; color: var(--ink-700); background: var(--canvas-2); padding: 7px 10px; border-radius: var(--r-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aprendizado */
.learning-list { display: grid; gap: 10px; }
.learning-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.learning-item.approved { border-color: #cfe9dc; background: var(--green-softer); }
.learning-item.rejected { opacity: .55; }
.learning-content { flex: 1; min-width: 0; }
.learning-category { display: inline-block; margin-bottom: 6px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-press); background: var(--green-soft); padding: 2px 8px; border-radius: 999px; }
.learning-content p { font-size: 13.5px; color: var(--ink-700); line-height: 1.55; }
.learning-content small { font-size: 11.5px; color: var(--ink-400); margin-top: 5px; display: block; }
.learning-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }
.learning-badge { font-size: 12px; font-weight: 700; color: var(--green-press); white-space: nowrap; }
.learning-item.rejected .learning-badge { color: var(--ink-400); }

/* Documentos */
.doc-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; }
.doc-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--red-soft); color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .04em; flex: none; }
.doc-row > div { flex: 1; min-width: 0; }
.doc-row strong { display: block; font-size: 13px; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-row small { font-size: 12px; color: var(--ink-400); }
.doc-status-badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.doc-status-badge.ready { background: var(--green-soft); color: var(--green-press); }
.doc-status-badge.pending { background: var(--canvas-2); color: var(--ink-400); }

/* PDF dropzone */
.pdf-icon-block { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--red-soft); color: var(--red); display: grid; place-items: center; font-size: 11px; font-weight: 800; margin-bottom: 4px; }

/* Overview grid */
.automation-overview-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
@media (max-width: 900px) {
    .automation-overview-grid { grid-template-columns: 1fr; }
    .flow-table-head, .flow-table-row { grid-template-columns: 60px 1fr 1.5fr 60px 50px; }
    .conv-monitor-head, .conv-monitor-row { grid-template-columns: 160px 1fr 100px; }
    .conv-monitor-head span:nth-child(4), .conv-monitor-head span:nth-child(5),
    .conv-monitor-row .conv-status, .conv-monitor-row .btn { display: none; }
    .agent-metric-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
    .agent-metric-grid { grid-template-columns: repeat(2, 1fr); }
    .flow-table-head, .flow-table-row { grid-template-columns: 50px 1fr 1fr 45px; }
    .flow-table-row .flow-check:last-child { display: none; }
}