:root { color-scheme: light; --bg:#eef2f5; --surface:#ffffff; --ink:#14213d; --muted:#5f6c7b; --line:#d8dee8; --brand:#0f766e; --brand-2:#134e4a; --err:#b42318; --warn:#a15c00; --shadow:0 10px 30px rgba(20,33,61,.07); } * { box-sizing: border-box; } body { margin:0; font-family: Arial, sans-serif; background:var(--bg); color:var(--ink); } header { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 28px; background:linear-gradient(90deg,#ffffff 0%,#f5f9ff 70%,#fffaf0 100%); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; box-shadow:0 2px 10px rgba(20,33,61,.04); } h1 { margin:0; font-size:20px; letter-spacing:0; line-height:1.15; } h2 { margin-top:0; font-size:18px; } a { color:var(--brand); text-decoration:none; } .brand { display:flex; align-items:center; gap:12px; min-width:0; } .brand-mark { width:40px; height:40px; border-radius:8px; display:grid; place-items:center; background:var(--brand); color:#fff; font-weight:800; letter-spacing:0; flex:0 0 auto; } .brand-logo { width:52px; height:52px; object-fit:contain; flex:0 0 auto; border-radius:12px; box-shadow:0 8px 18px rgba(7,24,63,.14); } .brand small { display:block; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .top-actions { display:flex; align-items:center; gap:10px; } .logout { border:1px solid var(--line); border-radius:6px; padding:9px 12px; color:var(--ink); background:#fff; } .logout-form { display:inline-flex; margin:0; } .logout-form .logout { font:inherit; cursor:pointer; } .portal-logout-form { margin:0; } .portal-logout-form button { appearance:none; border:0; padding:0; background:transparent; color:inherit; font:inherit; cursor:pointer; text-align:left; } .wrap { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:calc(100vh - 64px); min-width:0; } nav { background:linear-gradient(180deg,#ffffff 0%,#f8fbfc 100%); border-right:1px solid var(--line); padding:18px 16px; } nav hr { border:0; border-top:1px solid var(--line); margin:14px 0; } .side-menu { display:flex; flex-direction:column; gap:6px; } .side-label { margin:12px 10px 6px; color:#617286; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; } main { padding:24px; max-width:1240px; width:100%; min-width:0; } .client { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:8px; color:var(--ink); min-height:40px; font-weight:700; border:1px solid transparent; } .client::after { content:'>'; color:#9aa9b8; font-weight:800; font-size:12px; } .client.active, .client:hover { background:#dff1ee; color:var(--brand-2); border-color:#c2e7e1; } .client.active::after, .client:hover::after { color:var(--brand-2); } .client-group { margin-bottom:2px; border:1px solid var(--line); border-radius:10px; padding:6px; background:#fff; } .client-group > .client { margin:0; background:#f8fafc; } .client-sub { display:flex; flex-direction:column; gap:4px; margin:6px 0 0; padding-left:10px; border-left:3px solid #dff1ee; } .client-sub a { display:flex; align-items:center; min-height:32px; padding:7px 10px; border-radius:7px; color:var(--muted); font-size:13px; font-weight:700; } .client-sub a.active, .client-sub a:hover { background:#eef8f6; color:var(--brand-2); } .client-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } .client-card { border:1px solid var(--line); border-radius:8px; padding:14px; background:#fff; } .client-card h3 { margin:0 0 6px; font-size:16px; } .client-card p { margin:0 0 12px; color:var(--muted); font-size:13px; } .client-card .actions a { border:1px solid var(--line); border-radius:6px; padding:8px 10px; font-weight:700; } .panel { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:18px; margin-bottom:18px; box-shadow:var(--shadow); overflow-x:auto; } .grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; } label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; } input { width:100%; border:1px solid var(--line); border-radius:6px; padding:10px; font-size:14px; background:#fff; } select { width:100%; border:1px solid var(--line); border-radius:6px; padding:10px; font-size:14px; background:#fff; } textarea { width:100%; border:1px solid var(--line); border-radius:6px; padding:10px; font-size:14px; background:#fff; resize:vertical; min-height:130px; font-family:Arial, sans-serif; line-height:1.4; } input:focus, select:focus, textarea:focus { outline:2px solid rgba(15,118,110,.18); border-color:var(--brand); } button { border:0; border-radius:6px; background:var(--brand); color:#fff; padding:10px 14px; font-weight:700; cursor:pointer; min-height:40px; } button:hover { filter:brightness(.96); } button.danger { background:var(--err); } button.secondary { background:#31556b; } button.warning { background:#f59e0b; color:#3b2600; } a.button { display:inline-flex; align-items:center; justify-content:center; border-radius:6px; background:var(--brand); color:#fff; padding:10px 14px; font-weight:800; min-height:40px; border:0; } a.button.secondary { background:#31556b; } a.button:hover { color:#fff; filter:brightness(.96); } .button-link { display:inline-flex; align-items:center; justify-content:center; border-radius:6px; background:var(--brand); color:#fff; padding:10px 14px; font-weight:800; min-height:40px; border:0; } .button-link:hover { color:#fff; filter:brightness(.96); } table { width:100%; border-collapse:collapse; min-width:760px; } th, td { text-align:left; border-bottom:1px solid var(--line); padding:10px; font-size:14px; vertical-align:top; } th { color:#35465b; font-size:12px; text-transform:uppercase; letter-spacing:.02em; background:#f8fafc; position:sticky; top:0; } tbody tr:nth-child(even) td { background:#f4fbf8; } tbody tr:hover td { background:#eef8f5; } .table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:#fff; margin:10px 0; } .compact-table { min-width:980px; } .compact-table th, .compact-table td { padding:8px; } .compact-table input { padding:8px; } #cliente-acessos.client-access-workspace { padding:0; overflow:hidden; border-color:#dce5eb; background:#f5f7fa; } #cliente-acessos .client-access-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; padding:24px 26px; border-bottom:1px solid #dce5eb; background:#fff; } #cliente-acessos .client-access-eyebrow { display:block; margin-bottom:7px; color:#0a806c; font-size:10px; font-weight:900; text-transform:uppercase; } #cliente-acessos .client-access-hero h3 { margin:0; color:#001737; font-size:24px; line-height:1.15; } #cliente-acessos .client-access-hero p { max-width:620px; margin:7px 0 0; color:#65768a; font-size:13px; line-height:1.45; } #cliente-acessos .client-access-overview { display:grid; grid-template-columns:repeat(3,minmax(92px,1fr)); border:1px solid #dce5eb; border-radius:6px; background:#f8fafc; } #cliente-acessos .client-access-overview div { min-width:92px; padding:12px 16px; border-right:1px solid #dce5eb; text-align:center; } #cliente-acessos .client-access-overview div:last-child { border-right:0; } #cliente-acessos .client-access-overview strong { display:block; color:#001737; font-size:19px; line-height:1; } #cliente-acessos .client-access-overview span { display:block; margin-top:5px; color:#718096; font-size:10px; font-weight:800; text-transform:uppercase; } #cliente-acessos .client-access-section-head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 26px 12px; } #cliente-acessos .client-access-section-head > div { display:flex; align-items:center; gap:12px; min-width:0; } #cliente-acessos .client-access-section-number { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:#dff7f1; color:#087568; font-size:11px; font-weight:900; } #cliente-acessos .client-access-section-head h4 { margin:0; color:#102a43; font-size:15px; } #cliente-acessos .client-access-section-head p { margin:3px 0 0; color:#718096; font-size:12px; } #cliente-acessos .client-access-help { flex:0 0 auto; padding:6px 9px; border:1px solid #dce5eb; border-radius:999px; background:#fff; color:#607286; font-size:10px; font-weight:800; } #cliente-acessos .client-access-list { display:grid; gap:14px; padding:0 26px 10px; } #cliente-acessos .client-access-new-user { order:-1; border:0; background:transparent; overflow:visible; } #cliente-acessos .client-access-new-user summary { display:inline-flex; align-items:center; list-style:none; cursor:pointer; min-height:42px; padding:9px 15px; border:1px solid #0f9f82; border-radius:5px; background:#0f9f82; color:#fff; font-weight:900; box-shadow:0 3px 8px rgba(15,159,130,.2); } #cliente-acessos .client-access-new-user summary::-webkit-details-marker { display:none; } #cliente-acessos .client-access-new-user summary::before { content:'+'; display:inline-grid; place-items:center; width:22px; height:22px; margin-right:9px; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:#fff; font-weight:900; } #cliente-acessos .client-access-new-user[open] summary { border-color:#087568; background:#087568; } #cliente-acessos .client-access-new-user[open] summary::before { content:'-'; } #cliente-acessos .client-access-new-user .client-access-card { margin-top:12px; box-shadow:none; } #cliente-acessos .client-access-card { border:1px solid #d8e5ec; border-radius:6px; background:#fff; box-shadow:0 2px 4px rgba(84,101,120,.1); overflow:hidden; } #cliente-acessos .client-access-card-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border-bottom:1px solid #e7eef3; background:#fbfcfd; } #cliente-acessos .client-access-card-head strong { display:block; color:#001737; font-size:15px; line-height:1.25; } #cliente-acessos .client-access-card-head span { display:block; margin-top:3px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; } #cliente-acessos .client-access-status { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:7px 11px; border:1px solid #cbd9e2; border-radius:999px; background:#f8fafc; color:#475569; font-size:12px; font-weight:800; cursor:pointer; } #cliente-acessos .client-access-status.is-active { border-color:#93d8cf; background:#ecfdf5; color:#0f8177; } #cliente-acessos .client-access-status input { width:auto; min-width:0; } #cliente-acessos .client-access-fields { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; padding:18px; } #cliente-acessos .client-access-fields label { display:grid; gap:6px; margin:0; } #cliente-acessos .client-access-fields > label:nth-child(1) { grid-column:span 3; } #cliente-acessos .client-access-fields > label:nth-child(2) { grid-column:span 4; } #cliente-acessos .client-access-fields > label:nth-child(3) { grid-column:span 3; } #cliente-acessos .client-access-fields > label:nth-child(4) { grid-column:span 2; } #cliente-acessos .client-access-fields label > span, #cliente-acessos .client-access-avatar-field > span { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; } #cliente-acessos .client-access-fields input, #cliente-acessos .client-access-fields select { width:100%; min-width:0; min-height:42px; border-color:#cdd8e0; background:#fff; } #cliente-acessos .client-access-avatar-field { grid-column:span 7; } #cliente-acessos .client-access-extension-field { grid-column:span 5; align-self:end; min-width:0; border:1px solid #cfe0e6; border-left:4px solid #7b91a4; border-radius:6px; background:#f7fafc; padding:12px 14px; } #cliente-acessos .client-access-extension-field.is-linked { border-color:#8dd9c8; border-left-color:#0f9f82; background:#effbf7; } #cliente-acessos .client-access-extension-field.is-warning { border-color:#efc46c; border-left-color:#d88909; background:#fff9e8; } #cliente-acessos .client-extension-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; } #cliente-acessos .client-extension-heading > div > span { display:block; color:#607286; font-size:10px; font-weight:900; text-transform:uppercase; } #cliente-acessos .client-extension-heading strong { display:block; margin-top:3px; color:#102a43; font-size:14px; } #cliente-acessos .client-extension-badge { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:#e7eef3; color:#526578; font-size:10px; font-weight:900; } #cliente-acessos .is-linked .client-extension-badge { background:#d5f5eb; color:#087568; } #cliente-acessos .is-warning .client-extension-badge { background:#ffedbd; color:#925a00; } #cliente-acessos .client-extension-picker { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; } #cliente-acessos .client-extension-picker > label:first-child { display:grid; gap:5px; } #cliente-acessos .client-extension-picker > label:first-child > span { color:#607286; font-size:10px; font-weight:800; } #cliente-acessos .client-extension-unlink { display:flex !important; grid-auto-flow:column; align-items:center; justify-content:center; gap:7px !important; min-height:42px; padding:8px 10px; border:1px solid #d3dee5; border-radius:5px; background:#fff; color:#526578; font-size:11px; cursor:pointer; } #cliente-acessos .client-extension-unlink input { width:auto; min-height:0; } #cliente-acessos .client-access-extension-field p { margin:9px 0 0; color:#526578; font-size:11px; line-height:1.4; } #cliente-acessos .client-avatar-control { display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px; align-items:center; margin-top:6px; padding:12px; border:1px solid #dce6ec; border-radius:6px; background:#f8fafc; } #cliente-acessos .client-avatar-preview { display:grid; place-items:center; width:64px; height:64px; border-radius:999px; background:#eaf2f6; color:#64748b; font-size:11px; font-weight:800; text-align:center; overflow:hidden; } #cliente-acessos .client-avatar-preview img { width:100%; height:100%; object-fit:cover; } #cliente-acessos .client-avatar-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; } #cliente-acessos .client-avatar-actions .button { margin:0; min-height:34px; padding:8px 10px; font-size:12px; cursor:pointer; } #cliente-acessos .client-avatar-actions input[type="file"] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } #cliente-acessos .client-avatar-actions .checkline { margin:0; font-size:12px; } #cliente-acessos .client-avatar-actions small { flex-basis:100%; color:var(--muted); font-size:11px; line-height:1.35; } #cliente-acessos .client-access-permissions-title { padding:2px 18px 9px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; } #cliente-acessos .client-access-permissions-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; padding:0 18px 18px; } #cliente-acessos .client-access-permission { display:flex; align-items:center; gap:8px; min-height:42px; padding:8px 10px; border:1px solid #dce6ec; border-radius:5px; background:#f8fafc; font-size:11px; font-weight:750; color:#334155; cursor:pointer; } #cliente-acessos .client-access-permission.is-enabled { border-color:#8fd6cd; background:#f0fdfa; color:#0f766e; } #cliente-acessos .client-access-permission input { width:auto; min-width:0; } #cliente-acessos .client-access-permission span { flex:1; overflow-wrap:anywhere; } #cliente-acessos .client-access-permission small { flex:0 0 auto; padding:3px 6px; border-radius:999px; background:#e2e8f0; color:#475569; font-size:9px; font-weight:900; line-height:1; text-transform:uppercase; } #cliente-acessos .client-access-permission.is-enabled small { background:#ccfbf1; color:#0f766e; } #cliente-acessos .client-integrations-heading { padding-top:26px; } #cliente-acessos .client-integrations-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:0 26px 20px; } #cliente-acessos .client-integrations-grid > .diagnostic-card { min-width:0; margin:0; border-radius:6px; background:#fff; box-shadow:0 2px 4px rgba(84,101,120,.1); } #cliente-acessos .integration-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin:-14px -14px 14px; padding:18px; border-bottom:1px solid #e7eef3; background:#fbfcfd; } #cliente-acessos .integration-card-eyebrow { display:block; margin-bottom:6px; color:#0a806c; font-size:10px; font-weight:900; text-transform:uppercase; } #cliente-acessos .receitanet-menu-card .grid { grid-template-columns:1fr; } #cliente-acessos .receitanet-menu-card .copy-row { grid-template-columns:1fr auto; } #cliente-acessos .cdc-api-card::before { width:3px; } #cliente-acessos .cdc-api-card .cdc-api-header { padding:18px 18px 14px 21px; } #cliente-acessos .cdc-api-card .cdc-api-steps { grid-template-columns:1fr; } #cliente-acessos .cdc-api-card .cdc-api-step { padding:11px 16px 11px 20px; border-right:0; border-bottom:1px solid #e3e9ed; } #cliente-acessos .cdc-api-card .cdc-api-step:last-child { border-bottom:0; } #cliente-acessos .cdc-api-card .cdc-api-fields { grid-template-columns:1fr; padding:16px 18px 6px 21px; } #cliente-acessos .cdc-api-card .cdc-validate-button { width:100%; } #cliente-acessos .cdc-api-card .cdc-validation-result { margin:12px 18px 18px 21px; } #cliente-acessos > .ai-mode-savebar { margin:0; padding:16px 26px; border:0; border-top:1px solid #dce5eb; border-radius:0; background:#fff; } @media (max-width:760px) { #cliente-acessos .client-access-hero { grid-template-columns:1fr; padding:20px 16px; } #cliente-acessos .client-access-hero h3 { font-size:21px; } #cliente-acessos .client-access-overview { width:100%; } #cliente-acessos .client-access-overview div { min-width:0; padding:11px 7px; } #cliente-acessos .client-access-section-head { align-items:flex-start; padding:20px 16px 11px; } #cliente-acessos .client-access-help { display:none; } #cliente-acessos .client-access-list { padding:0 16px 8px; } #cliente-acessos .client-access-new-user summary { justify-content:center; width:100%; } #cliente-acessos .client-access-card-head { align-items:flex-start; padding:12px; } #cliente-acessos .client-access-fields { grid-template-columns:1fr; gap:10px; padding:12px; } #cliente-acessos .client-access-fields > label:nth-child(n) { grid-column:auto; } #cliente-acessos .client-access-avatar-field { grid-column:auto; } #cliente-acessos .client-access-extension-field { grid-column:auto; } #cliente-acessos .client-extension-picker { grid-template-columns:1fr; } #cliente-acessos .client-extension-unlink { justify-content:flex-start; } #cliente-acessos .client-avatar-control { grid-template-columns:56px minmax(0,1fr); } #cliente-acessos .client-avatar-preview { width:56px; height:56px; } #cliente-acessos .client-access-permissions-title { padding:0 12px 8px; } #cliente-acessos .client-access-permissions-grid { grid-template-columns:1fr 1fr; gap:8px; padding:0 12px 12px; } #cliente-acessos .client-access-permission { min-height:42px; padding:9px; font-size:12px; } #cliente-acessos .client-integrations-grid { grid-template-columns:1fr; padding:0 16px 16px; } #cliente-acessos > .ai-mode-savebar { padding:14px 16px; } } @media (max-width:420px) { #cliente-acessos .client-access-card-head { display:grid; grid-template-columns:1fr; } #cliente-acessos .client-access-status { justify-content:center; width:100%; } #cliente-acessos .client-access-permissions-grid { grid-template-columns:1fr; } } .access-groups-panel { overflow:visible; } .access-groups-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:16px; padding:16px; border:1px solid #b7e4dc; border-radius:14px; background:linear-gradient(135deg,#f0fdfa,#fff 58%,#eef8ff); } .access-groups-hero h2 { margin:8px 0 6px; font-size:24px; color:var(--brand-2); } .access-groups-hero p { margin:0; max-width:780px; line-height:1.5; } .access-groups-summary { flex:0 0 150px; border:1px solid #b7e4dc; border-radius:14px; padding:14px; background:#fff; text-align:center; box-shadow:0 10px 24px rgba(15,23,42,.05); } .access-groups-summary strong { display:block; font-size:34px; line-height:1; color:var(--brand-2); } .access-groups-summary span { display:block; margin-top:6px; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; } .access-group-list { display:grid; gap:16px; margin:14px 0; } .access-group-card { border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#fff,#fbfdfd); padding:16px; box-shadow:0 10px 26px rgba(15,23,42,.05); } .access-group-card:nth-child(even) { background:linear-gradient(180deg,#f8fffc,#fff); } .access-group-card-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:end; margin-bottom:14px; } .access-group-identity { display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,.8fr); gap:12px; } .access-group-count { min-width:94px; border:1px solid #dbeafe; border-radius:12px; padding:10px 12px; background:#f8fbff; text-align:center; } .access-group-count strong { display:block; font-size:24px; line-height:1; color:var(--ink); } .access-group-count span { display:block; margin-top:5px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; } .access-permission-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; } .access-permission-card { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:flex-start; min-height:78px; margin:0; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; } .access-permission-card:hover { border-color:#b7e4dc; box-shadow:0 8px 18px rgba(15,23,42,.06); } .access-permission-card.is-enabled { border-color:#93d8cf; background:linear-gradient(180deg,#f0fdfa,#fff); box-shadow:0 0 0 3px rgba(15,129,119,.07); } .access-permission-card input { margin-top:3px; transform:scale(1.12); } .access-permission-card strong { display:block; color:var(--ink); font-size:14px; line-height:1.25; } .access-permission-card small { display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.35; } .access-groups-savebar { position:sticky; bottom:0; z-index:8; display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.96); box-shadow:0 -8px 24px rgba(20,33,61,.08); } .access-groups-savebar span { color:var(--muted); font-size:13px; } audio { width:220px; max-width:100%; height:34px; } .actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0; } .inline-form { display:inline-flex; margin:4px 0 0 6px; vertical-align:top; } .inline input[type=file] { width:230px; max-width:100%; padding:7px; } .toolbar { display:flex; gap:10px; align-items:end; flex-wrap:wrap; } .toolbar > div { min-width:160px; flex:1; } .log-raw { max-width:420px; word-break:break-word; color:var(--muted); font-size:12px; } .did-diagnostic-shell { border-top:4px solid #0f8177; overflow:hidden; } .did-diagnostic-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; } .did-diagnostic-heading h2 { margin:4px 0 6px; font-size:26px; color:#102a43; } .did-diagnostic-heading p { margin:0; max-width:720px; color:#52677d; line-height:1.5; } .did-eyebrow { color:#0f8177; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; } .did-readonly-badge { flex:none; padding:7px 10px; border:1px solid #b8d8d4; border-radius:999px; background:#eaf7f5; color:#0d615a; font-size:12px; font-weight:800; } .did-view-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; } .did-view-tabs a { display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:10px; align-items:center; min-height:70px; padding:12px 14px; border:1px solid #cbd8e5; border-radius:8px; background:#fff; color:#29435c; text-decoration:none; } .did-view-tabs a > span { grid-row:1 / 3; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#e9eff5; color:#52677d; font-size:11px; font-weight:900; } .did-view-tabs a strong, .did-view-tabs a small { display:block; min-width:0; } .did-view-tabs a strong { font-size:14px; } .did-view-tabs a small { color:#64778b; font-size:11px; } .did-view-tabs a.active { border-color:#0f8177; background:#eaf7f5; box-shadow:inset 0 -3px #0f8177; } .did-view-tabs a.active > span { background:#0f8177; color:#fff; } .inbound-list-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px; border:1px solid #cbd8e5; border-radius:8px; background:#f5f8fb; } .inbound-list-heading h3 { margin:4px 0; color:#102a43; font-size:20px; } .inbound-list-heading p { margin:0; max-width:720px; color:#60758a; font-size:13px; line-height:1.45; } .inbound-coverage { display:grid; justify-items:end; gap:6px; color:#60758a; font-size:11px; font-weight:800; } .inbound-filter { display:flex; align-items:end; gap:10px; margin-top:12px; padding:12px 14px; border:1px solid #cbd8e5; border-radius:8px; background:#fff; } .inbound-filter div { flex:1; min-width:220px; } .inbound-filter label { display:block; margin-bottom:5px; color:#42566b; font-size:11px; font-weight:900; text-transform:uppercase; } .inbound-filter select { width:100%; min-height:40px; border:1px solid #bdccda; border-radius:7px; background:#f8fafc; color:#102a43; padding:8px 10px; } .inbound-filter button, .inbound-filter a { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 14px; border:0; border-radius:7px; font-weight:900; text-decoration:none; } .inbound-filter button { background:#087f78; color:#fff; } .inbound-filter a { border:1px solid #bdccda; color:#29445e; background:#fff; } .inbound-count { flex:none; padding:7px 10px; border-radius:999px; background:#dceef8; color:#155d7a; font-size:12px; font-weight:800; } .inbound-call-list { display:grid; gap:8px; margin-top:12px; } .inbound-call { display:grid; grid-template-columns:170px minmax(180px,1.2fr) minmax(150px,1fr) minmax(180px,1fr) auto; gap:14px; align-items:center; padding:13px 14px; border:1px solid #d4dee8; border-left:5px solid #9aaabd; border-radius:8px; background:#fff; } .inbound-call.tone-notice { border-left-color:#1b9c68; background:#f4fbf7; } .inbound-call.tone-warn { border-left-color:#d98400; background:#fffbf0; } .inbound-call.tone-danger { border-left-color:#c92a2a; background:#fff7f6; } .inbound-call div { min-width:0; } .inbound-call small, .inbound-call span { display:block; color:#64778b; font-size:10px; line-height:1.35; } .inbound-call small { margin-bottom:3px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; } .inbound-call strong { display:block; color:#102a43; font-size:13px; line-height:1.35; overflow-wrap:anywhere; } .inbound-call > .badge { justify-self:end; color:inherit; font-size:11px; } .inbound-empty { display:grid; gap:4px; padding:22px; border:1px dashed #aebfce; border-radius:8px; background:#fbfdff; text-align:center; } .inbound-empty strong { color:#29435c; } .inbound-empty span { color:#64778b; font-size:13px; } .did-test-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:12px; align-items:end; padding:16px; border:1px solid #cbd8e5; border-radius:8px; background:#f5f8fb; } .did-test-form > div { min-width:0; } .did-test-form label { display:block; margin-bottom:6px; color:#102a43; font-size:12px; font-weight:800; } .did-test-form input { width:100%; min-height:44px; font-family:Consolas,monospace; font-size:15px; background:#fff; } .did-test-form small { display:block; margin-top:5px; color:#64778b; font-size:11px; line-height:1.35; } .did-test-form button { min-height:44px; padding-inline:20px; background:#0f8177; } .did-verdict { display:grid; grid-template-columns:8px minmax(0,1fr); gap:16px; margin-top:16px; padding:18px; border:1px solid #bfd7e1; border-radius:8px; background:#eef7fb; } .did-verdict-mark { border-radius:8px; background:#168aad; } .did-verdict.tone-danger { border-color:#f1b8b4; background:#fff3f2; } .did-verdict.tone-danger .did-verdict-mark { background:#c92a2a; } .did-verdict.tone-warn { border-color:#e9cf91; background:#fff8e6; } .did-verdict.tone-warn .did-verdict-mark { background:#d98400; } .did-verdict.tone-notice { border-color:#9dd8bd; background:#effaf5; } .did-verdict.tone-notice .did-verdict-mark { background:#1b9c68; } .did-verdict small { color:#60758a; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; } .did-verdict strong { display:block; margin:4px 0 6px; color:#102a43; font-size:22px; line-height:1.2; } .did-verdict p { margin:0; color:#354f68; font-size:14px; line-height:1.5; } .did-verdict-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; } .did-verdict-meta span.current-route { border-color:#75c9aa; background:#e5f8ef; color:#116846; } .did-verdict-meta span { padding:6px 9px; border:1px solid rgba(16,42,67,.13); border-radius:6px; background:rgba(255,255,255,.72); color:#354f68; font-family:Consolas,monospace; font-size:11px; } .did-journey { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:16px; } .did-step { position:relative; min-width:0; min-height:154px; padding:15px 13px 13px; border:1px solid #cfdae5; border-top:4px solid #9aaabd; border-radius:8px; background:#fff; } .did-step-number { display:grid; place-items:center; width:28px; height:28px; margin-bottom:12px; border-radius:50%; background:#e7edf3; color:#42566a; font-size:12px; font-weight:900; } .did-step small { display:block; color:#60758a; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; } .did-step strong { display:block; margin:5px 0 7px; color:#102a43; font-size:14px; line-height:1.3; overflow-wrap:anywhere; } .did-step p { margin:0; color:#64778b; font-size:11px; line-height:1.4; } .did-step.state-done { border-top-color:#1b9c68; background:#f3fbf7; } .did-step.state-done .did-step-number { background:#d9f5e8; color:#106b48; } .did-step.state-warn { border-top-color:#d98400; background:#fffbf0; } .did-step.state-warn .did-step-number { background:#fff0c7; color:#8a5600; } .did-step.state-danger { border-top-color:#c92a2a; background:#fff6f5; } .did-step.state-danger .did-step-number { background:#ffe0de; color:#9f1f1f; } .did-empty-guide { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px; padding:14px; border:1px dashed #9fb7ca; border-radius:8px; background:#fbfdff; } .did-empty-guide strong { margin-right:6px; color:#102a43; } .did-empty-guide span { padding:6px 9px; border-radius:6px; background:#edf3f7; color:#52677d; font-size:12px; } .did-evidence { margin-top:14px; border:1px solid #cad6e2; border-radius:8px; background:#f8fafc; } .did-evidence summary { cursor:pointer; padding:12px 14px; color:#29435c; font-weight:800; } .did-evidence > div { display:grid; gap:6px; padding:0 14px 14px; } .did-evidence code { display:block; padding:8px 10px; border-radius:6px; background:#0f172a; color:#dbeafe; font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; } .asterisk-advanced { padding:0; overflow:hidden; } .asterisk-advanced > summary { display:flex; justify-content:space-between; align-items:center; gap:14px; cursor:pointer; padding:16px 18px; list-style:none; } .asterisk-advanced > summary::-webkit-details-marker { display:none; } .asterisk-advanced > summary strong, .asterisk-advanced > summary small { display:block; } .asterisk-advanced > summary small { margin-top:3px; color:#64778b; font-size:12px; } .asterisk-advanced-body { padding:0 18px 18px; border-top:1px solid #d8e1ea; } .asterisk-advanced-body .asterisk-hero { margin-top:16px; } .asterisk-check { flex:0 0 auto !important; align-self:center; } .asterisk-summary > div { min-width:0; } .asterisk-toolbar { align-items:flex-end; } .asterisk-toolbar > div { min-width:0; } .asterisk-toolbar .asterisk-toolbar-submit { flex:0 0 auto; min-width:130px; align-self:end; } .asterisk-toolbar .asterisk-toolbar-submit button { width:100%; } .asterisk-hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr); gap:16px; padding:18px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,#f8fffd 0%,#eef8ff 100%); margin:0 0 16px; } .asterisk-hero small { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-size:11px; font-weight:800; } .asterisk-hero strong { display:block; font-size:24px; color:var(--ink); margin:6px 0 8px; line-height:1.15; } .asterisk-hero p { margin:0; color:var(--muted); line-height:1.5; } .asterisk-hero.tone-danger { border-color:#f7c7c2; background:linear-gradient(135deg,#fff7f6 0%,#fff3f0 100%); } .asterisk-hero.tone-warn { border-color:#f3dfb4; background:linear-gradient(135deg,#fffaf0 0%,#fff7e6 100%); } .asterisk-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .asterisk-kpis article { border:1px solid rgba(15,23,42,.08); border-radius:14px; background:rgba(255,255,255,.82); padding:14px; min-width:0; box-shadow:0 10px 24px rgba(15,23,42,.05); } .asterisk-kpis article strong { font-size:28px; margin:6px 0 4px; } .asterisk-kpis article span { display:block; color:var(--muted); font-size:12px; line-height:1.4; } .asterisk-focus-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin:0 0 16px; } .asterisk-focus-card { border:1px solid var(--line); border-radius:16px; background:#fff; padding:16px; min-width:0; box-shadow:0 10px 24px rgba(15,23,42,.05); } .asterisk-focus-card.tone-danger { border-top:4px solid #dc2626; } .asterisk-focus-card.tone-warn { border-top:4px solid #f59e0b; } .asterisk-focus-card.tone-notice { border-top:4px solid #0ea5e9; } .asterisk-focus-card.tone-info { border-top:4px solid #94a3b8; } .asterisk-focus-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:10px; } .asterisk-focus-head small { color:var(--muted); font-size:12px; } .asterisk-focus-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:10px; } .asterisk-focus-meta span { display:block; border:1px solid var(--line); border-radius:10px; background:#f8fafc; padding:8px 10px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; } .asterisk-focus-meta strong { font-size:12px; margin:0; display:inline; color:var(--ink); } .asterisk-focus-card code { display:block; margin-top:10px; padding:10px 12px; border-radius:10px; background:#0f172a; color:#dbeafe; font-size:12px; line-height:1.45; white-space:pre-wrap; word-break:break-word; } .asterisk-table { min-width:1180px; table-layout:fixed; } .asterisk-table th, .asterisk-table td { white-space:normal; overflow-wrap:anywhere; word-break:break-word; vertical-align:top; line-height:1.4; } .asterisk-table th:nth-child(1), .asterisk-table td:nth-child(1) { width:225px; } .asterisk-table th:nth-child(2), .asterisk-table td:nth-child(2) { width:110px; } .asterisk-table th:nth-child(3), .asterisk-table td:nth-child(3) { width:160px; } .asterisk-table th:nth-child(4), .asterisk-table td:nth-child(4) { width:290px; } .asterisk-table th:nth-child(5), .asterisk-table td:nth-child(5) { width:260px; } .asterisk-table th:nth-child(6), .asterisk-table td:nth-child(6) { width:340px; } .asterisk-table .log-raw { max-width:none; } .mono { font-family: Consolas, monospace; } input[type=checkbox] { width:auto; } .flash { padding:12px 14px; border-radius:6px; margin-bottom:16px; background:#e7f3f1; } .flash.err { background:#fee4e2; color:var(--err); } .login-logo { display:block; width:108px; height:108px; object-fit:contain; margin:0 auto 14px; border-radius:22px; background:#fff; box-shadow:0 16px 36px rgba(16,39,68,.14); padding:8px; } .badge { display:inline-block; border-radius:999px; padding:4px 9px; font-size:12px; font-weight:700; white-space:nowrap; } .sev-danger { background:#fee4e2; color:#981b13; } .sev-warn { background:#fff3cd; color:#7a4d00; } .sev-notice { background:#e7f3f1; color:#0f5f58; } .sev-info { background:#edf2f7; color:#44546a; } .sev-ok { background:#dcfce7; color:#166534; } .summary { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; } .summary div { border:1px solid var(--line); border-radius:8px; padding:12px; background:#fff; } .summary strong { display:block; font-size:24px; } .admin-finance-head { overflow:visible; padding:0; } .admin-finance-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding:24px; border-bottom:1px solid var(--line); background:linear-gradient(135deg,#f0fdfa 0%,#ffffff 54%,#fff8e8 100%); } .admin-finance-eyebrow { display:block; margin-bottom:7px; color:#0a806c; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0; } .admin-finance-hero h2 { margin:0; color:#102a43; font-size:27px; } .admin-finance-hero p { max-width:760px; margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.5; } .admin-finance-period { min-width:230px; padding:14px 16px; border:1px solid #cde6e1; border-left:4px solid var(--brand); border-radius:8px; background:#fff; box-shadow:0 8px 22px rgba(20,33,61,.06); } .admin-finance-period span, .admin-finance-period small { display:block; color:var(--muted); font-size:11px; } .admin-finance-period span { font-weight:800; text-transform:uppercase; } .admin-finance-period strong { display:block; margin:5px 0; color:var(--ink); font-size:17px; } .admin-finance-head > .flash { margin:16px 20px 0; } .admin-finance-filters { display:grid; grid-template-columns:minmax(190px,1.3fr) minmax(150px,.7fr) minmax(150px,.7fr) minmax(150px,.7fr) auto; gap:12px; align-items:end; padding:18px 20px 20px; } .admin-finance-filters > div { min-width:0; } .admin-finance-filter-actions { display:flex; gap:8px; align-items:center; } .admin-finance-executive { display:grid; grid-template-columns:minmax(290px,1.45fr) repeat(3,minmax(180px,1fr)); gap:12px; margin-bottom:18px; } .admin-finance-executive article { min-width:0; min-height:154px; border-radius:8px; box-shadow:var(--shadow); } .admin-finance-result { padding:20px; border:1px solid #0d665e; background:#0f5f58; color:#fff; } .admin-finance-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; } .admin-finance-card-head > span:first-child, .admin-finance-focus > span { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:0; } .admin-finance-margin { padding:5px 8px; border:1px solid rgba(255,255,255,.34); border-radius:6px; background:rgba(255,255,255,.10); font-size:11px; font-weight:800; white-space:nowrap; } .admin-finance-result > strong { display:block; margin:17px 0 4px; font-size:31px; line-height:1; overflow-wrap:anywhere; } .admin-finance-result > p { margin:0; color:#d5f3ef; font-size:12px; } .admin-finance-result-bridge { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.22); } .admin-finance-result-bridge span, .admin-finance-result-bridge b { display:block; } .admin-finance-result-bridge span { color:#c9ebe6; font-size:10px; } .admin-finance-result-bridge b { margin-top:4px; font-size:13px; } .admin-finance-focus { padding:19px; border:1px solid var(--line); border-top:4px solid #94a3b8; background:#fff; } .admin-finance-focus > span { display:block; color:#53677d; line-height:1.35; } .admin-finance-focus > strong { display:block; margin:20px 0 7px; color:var(--ink); font-size:25px; line-height:1.05; overflow-wrap:anywhere; } .admin-finance-focus > small { display:block; color:var(--muted); font-size:11px; line-height:1.4; } .admin-finance-focus.tone-contract { border-top-color:#2563eb; } .admin-finance-focus.tone-receivable { border-top-color:#d97706; background:#fffdf8; } .admin-finance-focus.tone-cash { border-top-color:#16a34a; } .admin-finance-management-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:14px; margin-bottom:18px; } .admin-finance-management-grid > .panel, .admin-finance-secondary-grid > .panel { margin:0; min-width:0; } .admin-finance-statement-rows > div { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 0; border-bottom:1px solid #e8eef3; } .admin-finance-statement-rows span { color:#526579; font-size:12px; } .admin-finance-statement-rows strong { color:var(--ink); font-size:13px; text-align:right; } .admin-finance-statement-rows .is-total { margin-top:3px; border-top:2px solid #cbd8e4; } .admin-finance-statement-rows .is-total span, .admin-finance-statement-rows .is-total strong { color:#123a59; font-weight:900; } .admin-finance-statement-rows .is-cost strong { color:#b42318; } .admin-finance-statement-rows .is-result { border-bottom:0; background:#edf9f6; margin:0 -10px; padding:12px 10px; } .admin-finance-statement-rows .is-result span, .admin-finance-statement-rows .is-result strong { color:#087568; font-weight:900; } .admin-finance-note { margin:14px 0 0; padding:10px; border-left:3px solid #d7a224; background:#fff9e9; color:#725b28; font-size:11px; line-height:1.5; } .admin-finance-aging-list > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; padding:11px 0; border-bottom:1px solid #e8eef3; } .admin-finance-aging-list > div:last-child { border-bottom:0; } .admin-finance-aging-list span { color:#526579; font-size:12px; } .admin-finance-aging-list b { color:var(--ink); font-size:13px; text-align:right; } .admin-finance-aging-list small { grid-column:1 / -1; color:var(--muted); font-size:10px; } .admin-finance-aging-list .is-critical { margin:0 -9px; padding:11px 9px; border:1px solid #fecaca; background:#fff5f5; } .admin-finance-aging-list .is-critical span, .admin-finance-aging-list .is-critical b { color:#a61b1b; } .admin-finance-status-list, .admin-finance-alert-list { display:grid; gap:7px; } .admin-finance-status-list > div, .admin-finance-alert-list > div { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:30px; } .admin-finance-status-list span, .admin-finance-alert-list span { display:flex; align-items:center; gap:8px; color:#526579; font-size:12px; } .admin-finance-status-list strong, .admin-finance-alert-list b { color:var(--ink); font-size:13px; } .admin-finance-status-list i { width:8px; height:8px; border-radius:50%; background:#94a3b8; } .admin-finance-status-list .status-active { background:#16a34a; } .admin-finance-status-list .status-trial { background:#2563eb; } .admin-finance-status-list .status-suspended { background:#d97706; } .admin-finance-status-list .status-disabled { background:#94a3b8; } .admin-finance-alert-list { margin-top:13px; padding-top:12px; border-top:1px solid #dce6ed; } .admin-finance-alert-list > div { padding:7px 9px; border:1px solid #e4ebf0; background:#f8fafc; } .admin-finance-alert-list > div.has-alert { border-color:#f1d18a; background:#fff9ea; } .admin-finance-alert-list > div.has-alert span, .admin-finance-alert-list > div.has-alert b { color:#865b08; } .admin-finance-secondary-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:14px; margin-bottom:18px; } .admin-finance-ranking-list > div { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid #e8eef3; } .admin-finance-ranking-list > div:last-child { border-bottom:0; } .admin-finance-rank { display:flex; align-items:center; justify-content:center; width:25px; height:25px; border:1px solid #c9d9e4; border-radius:6px; color:#456176; font-size:11px; font-weight:900; } .admin-finance-rank-company { min-width:0; } .admin-finance-rank-company b { display:block; overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .admin-finance-rank-company i { display:block; width:var(--finance-bar); max-width:100%; height:4px; margin-top:6px; background:#17a88b; } .admin-finance-ranking-list strong { color:#123a59; font-size:12px; text-align:right; } .admin-finance-operation-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .admin-finance-operation-grid > div { min-width:0; padding:12px; border:1px solid #dce6ed; background:#f8fafc; } .admin-finance-operation-grid span, .admin-finance-operation-grid strong, .admin-finance-operation-grid small { display:block; } .admin-finance-operation-grid span { color:#526579; font-size:10px; font-weight:900; text-transform:uppercase; } .admin-finance-operation-grid strong { margin:9px 0 4px; color:var(--ink); font-size:20px; overflow-wrap:anywhere; } .admin-finance-operation-grid small { color:var(--muted); font-size:10px; } .admin-finance-table-panel { overflow:visible; } .admin-finance-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; } .admin-finance-section-head span:first-child { display:block; margin-bottom:4px; color:#0a806c; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0; } .admin-finance-section-head h3 { margin:0; color:var(--ink); font-size:19px; } .admin-finance-table { min-width:1240px; } .admin-finance-table td { line-height:1.4; } .admin-finance-table td > strong, .admin-finance-table td > small, .admin-finance-table td > em { display:block; } .admin-finance-table td > .badge { display:inline-block; margin:6px 0 4px; } .admin-finance-table td > small { margin-top:3px; color:var(--muted); font-size:11px; } .admin-finance-table td > em { margin-top:6px; color:#a15c00; font-size:11px; font-style:normal; } .admin-finance-table td.is-positive > strong { color:#087568; } .admin-finance-table td.is-negative > strong { color:#b42318; } .admin-finance-products { display:flex; gap:6px; flex-wrap:wrap; max-width:270px; } .admin-finance-products span { display:inline-flex; gap:5px; align-items:center; padding:5px 7px; border:1px solid #d7e4e8; border-radius:6px; background:#f7fafb; color:#405568; font-size:11px; } .admin-finance-products b { color:var(--ink); } .admin-finance-pending-table { min-width:820px; } .admin-finance-pending-table td > strong, .admin-finance-pending-table td > small { display:block; } .admin-finance-pending-table td > small { margin-top:3px; color:var(--muted); font-size:11px; } @media (max-width:1240px) { .admin-finance-executive { grid-template-columns:repeat(3,minmax(0,1fr)); } .admin-finance-result { grid-column:span 3; } .admin-finance-management-grid { grid-template-columns:1fr 1fr; } .admin-finance-portfolio { grid-column:span 2; } .admin-finance-status-list { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (max-width:1040px) { .admin-finance-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-finance-filter-actions { grid-column:span 2; } .admin-finance-executive { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-finance-result { grid-column:span 2; } .admin-finance-focus:last-child { grid-column:span 2; } .admin-finance-management-grid, .admin-finance-secondary-grid { grid-template-columns:1fr; } .admin-finance-portfolio { grid-column:auto; } .admin-finance-status-list { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:700px) { .admin-finance-hero { grid-template-columns:1fr; padding:18px; } .admin-finance-period { min-width:0; width:100%; } .admin-finance-filters { grid-template-columns:1fr; padding:14px; } .admin-finance-filter-actions { grid-column:auto; } .admin-finance-filter-actions button, .admin-finance-filter-actions .button { flex:1; } .admin-finance-executive { grid-template-columns:1fr; gap:9px; } .admin-finance-result { grid-column:auto; } .admin-finance-focus:last-child { grid-column:auto; } .admin-finance-executive article { min-height:0; } .admin-finance-focus { padding:15px; } .admin-finance-focus > strong { margin:12px 0 5px; font-size:22px; } .admin-finance-section-head { align-items:flex-start; } .admin-finance-status-list, .admin-finance-operation-grid { grid-template-columns:1fr 1fr; } } @media (max-width:430px) { .admin-finance-filter-actions { display:grid; grid-template-columns:1fr; } .admin-finance-card-head, .admin-finance-result-bridge { grid-template-columns:1fr; } .admin-finance-card-head { align-items:flex-start; flex-direction:column; } .admin-finance-status-list, .admin-finance-operation-grid { grid-template-columns:1fr; } .admin-finance-ranking-list > div { grid-template-columns:26px minmax(0,1fr); } .admin-finance-ranking-list > div > strong { grid-column:2; text-align:left; } } .relationship-section { margin-top:24px; padding-top:22px; border-top:1px solid #dce6ed; } .relationship-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:15px; } .relationship-heading > div > span, .notification-eyebrow { display:block; margin-bottom:5px; color:#087568; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0; } .relationship-heading h3 { margin:0; color:var(--ink); font-size:19px; } .relationship-heading p { max-width:780px; margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.5; } .relationship-contact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .relationship-contact { display:grid; grid-template-columns:1fr 1fr; gap:11px; min-width:0; padding:15px; border:1px solid #d7e3eb; border-top:4px solid #0f8b78; border-radius:8px; background:#fbfdfd; } .relationship-contact:nth-child(2) { border-top-color:#2563eb; background:#fbfcff; } .relationship-contact:nth-child(3) { border-top-color:#d79a16; background:#fffdf8; } .relationship-contact-title { grid-column:1 / -1; min-height:48px; padding-bottom:10px; border-bottom:1px solid #e3ebf0; } .relationship-contact-title span, .relationship-contact-title small { display:block; } .relationship-contact-title span { color:var(--ink); font-size:13px; font-weight:900; } .relationship-contact-title small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.4; } .relationship-contact label { min-width:0; margin:0; color:#526579; font-size:10px; font-weight:800; text-transform:uppercase; } .relationship-contact input { margin-top:5px; text-transform:none; } .relationship-routine-list { border:1px solid #d9e4eb; border-radius:8px; overflow:hidden; } .relationship-routine { display:grid; grid-template-columns:minmax(220px,1.3fr) repeat(3,minmax(180px,1fr)); gap:16px; align-items:center; padding:14px 16px; border-bottom:1px solid #e3ebf0; background:#fff; } .relationship-routine:last-child { border-bottom:0; } .relationship-routine-copy small { display:block; margin:5px 0 0 25px; color:var(--muted); font-size:10px; line-height:1.4; } .relationship-balance-threshold { margin:10px 0 0 25px !important; } .relationship-balance-threshold label { display:block; max-width:170px; margin:0; color:#526579; font-size:9px; font-weight:900; text-transform:uppercase; } .relationship-balance-threshold input { margin-top:5px; padding:8px 10px; font-size:11px; text-transform:none; } .relationship-balance-threshold small { margin:4px 0 0 !important; } .relationship-enable { margin:0; } .relationship-enable span { color:var(--ink); font-size:12px; font-weight:900; } .relationship-routine fieldset { min-width:0; margin:0; padding:0; border:0; } .relationship-routine legend { margin-bottom:6px; color:#526579; font-size:9px; font-weight:900; text-transform:uppercase; } .relationship-options { display:flex; flex-wrap:wrap; gap:5px; } .relationship-options label { display:flex; align-items:center; gap:5px; min-height:28px; margin:0; padding:5px 7px; border:1px solid #dce6ed; border-radius:6px; background:#f8fafc; color:#405568; font-size:10px; font-weight:700; text-transform:none; } .relationship-options input { width:auto; margin:0; } .relationship-schedule-fields { display:flex; align-items:flex-end; gap:7px; } .relationship-schedule-fields label { min-width:0; margin:0; color:#526579; font-size:9px; font-weight:800; text-transform:uppercase; } .relationship-schedule-fields input, .relationship-schedule-fields select { min-width:92px; margin-top:5px; padding:7px 8px; font-size:10px; text-transform:none; } .relationship-manual-note { display:block; padding:8px 10px; border:1px solid #dce6ed; border-radius:6px; background:#f8fafc; color:#607487; font-size:10px; line-height:1.4; } .marketing-menu-group { border-color:#b8ddd5; background:#f6fcfa; } .marketing-menu-group > .client.active { background:#0f8177; color:#fff; border-color:#0f8177; } .marketing-menu-group > .client.active::after { color:#fff; } .marketing-command { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; border-left:5px solid #0f8b78; background:#f7fcfb; } .marketing-command h2 { margin:0; color:var(--ink); font-size:28px; } .marketing-command p { max-width:780px; margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.55; } .marketing-eyebrow { display:block; margin-bottom:7px; color:#087568; font-size:10px; font-weight:900; text-transform:uppercase; } .marketing-primary-action { min-width:230px; } .marketing-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; } .marketing-kpis article { min-height:118px; padding:17px; border:1px solid #dce6ed; border-top:4px solid #0f9f82; border-radius:8px; background:#fff; box-shadow:0 8px 22px rgba(20,33,61,.055); } .marketing-kpis article:nth-child(2) { border-top-color:#2781c5; } .marketing-kpis article:nth-child(3) { border-top-color:#d28a12; } .marketing-kpis article:nth-child(4) { border-top-color:#d35368; } .marketing-kpis span, .marketing-kpis strong, .marketing-kpis small { display:block; } .marketing-kpis span { color:#607487; font-size:10px; font-weight:900; text-transform:uppercase; } .marketing-kpis strong { margin:10px 0 5px; color:var(--ink); font-size:29px; } .marketing-kpis small { color:var(--muted); font-size:10px; line-height:1.4; } .marketing-provider-strip { display:grid; grid-template-columns:minmax(260px,1.2fr) minmax(150px,.55fr) minmax(210px,.8fr) auto; gap:18px; align-items:center; border-left:5px solid #2781c5; background:#f8fbfe; } .marketing-provider-brand h3 { margin:0; color:var(--ink); font-size:20px; } .marketing-provider-brand p { margin:6px 0 0; color:var(--muted); font-size:10px; line-height:1.45; } .marketing-provider-metric span, .marketing-provider-metric strong, .marketing-provider-metric small, .marketing-provider-state strong, .marketing-provider-state small { display:block; } .marketing-provider-metric span { color:#607487; font-size:9px; font-weight:900; text-transform:uppercase; } .marketing-provider-metric strong { margin:5px 0 3px; color:#155a87; font-size:25px; } .marketing-provider-metric small, .marketing-provider-state small { color:var(--muted); font-size:9px; } .marketing-provider-state strong { margin:7px 0 3px; color:#9a5d00; font-size:11px; } .smsnet-security-note, .smsnet-send-lock { display:flex; align-items:flex-start; gap:12px; margin:12px 0; padding:11px 13px; border:1px solid #cfe2ee; border-left:4px solid #2781c5; border-radius:7px; background:#f4faff; } .smsnet-security-note strong, .smsnet-send-lock strong { flex:0 0 auto; color:#174f73; font-size:11px; } .smsnet-security-note span, .smsnet-send-lock span { color:#526579; font-size:10px; line-height:1.45; } .smsnet-send-lock { border-color:#eed49b; border-left-color:#d49314; background:#fff9e8; } .smsnet-send-lock strong { color:#825800; } .smsnet-balance-check { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:14px; border-top:4px solid #2781c5; } .smsnet-balance-check h3 { margin:8px 0 4px; } .smsnet-balance-check p { margin:0; } .smsnet-balance-value { display:block; margin-top:8px; color:#155a87; font-size:23px; } .smsnet-homologation { margin-top:14px; border-top:4px solid #0f9f87; } .smsnet-homologation-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; } .smsnet-homologation-head h3 { margin:8px 0 4px; } .smsnet-homologation-head p { margin:0; } .smsnet-test-state { padding:8px 11px; border-radius:6px; background:#e8f7f3; color:#087765; font-size:11px; white-space:nowrap; } .smsnet-test-form { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(180px,.7fr) minmax(280px,1.5fr); gap:12px; align-items:end; margin-top:16px; } .smsnet-test-form label { display:block; } .smsnet-test-form textarea { min-height:74px; resize:vertical; } .smsnet-test-message { grid-row:span 2; } .smsnet-test-confirm { align-self:center; color:#40576a; font-size:10px; line-height:1.45; } .smsnet-last-test { display:flex; gap:10px; align-items:center; margin-top:14px; padding:10px 12px; border:1px solid #d5e4e9; border-radius:6px; background:#f7fafb; font-size:10px; } .smsnet-last-test small { margin-left:auto; color:#718392; white-space:nowrap; } .marketing-workspace-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .marketing-workspace-grid > a { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:13px; align-items:center; min-height:102px; padding:15px; border:1px solid #d7e3ea; border-radius:8px; background:#f9fbfc; color:var(--ink); } .marketing-workspace-grid > a:hover { border-color:#88cfc1; background:#f3fbf9; box-shadow:0 8px 18px rgba(15,118,110,.09); } .marketing-workspace-grid > a > span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#dff5f0; color:#087568; font-size:11px; font-weight:900; } .marketing-workspace-grid strong, .marketing-workspace-grid small { display:block; } .marketing-workspace-grid strong { font-size:13px; } .marketing-workspace-grid small { margin-top:5px; color:var(--muted); font-size:10px; line-height:1.45; } .marketing-workspace-grid b { padding:6px 8px; border-radius:999px; background:#fff; color:#526579; font-size:9px; white-space:nowrap; } .marketing-lower-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:18px; align-items:start; } .marketing-agenda-list { overflow:hidden; border:1px solid #dce6ed; border-radius:8px; } .marketing-agenda-list article { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; align-items:center; min-height:68px; padding:10px 12px; border-bottom:1px solid #e2eaf0; } .marketing-agenda-list article:last-child { border-bottom:0; } .marketing-agenda-list article > div:first-child { text-align:center; } .marketing-agenda-list article > div:first-child strong, .marketing-agenda-list article > div:first-child small, .marketing-agenda-list article > div:nth-child(2) strong, .marketing-agenda-list article > div:nth-child(2) span { display:block; } .marketing-agenda-list article > div:first-child strong { color:#087568; font-size:13px; } .marketing-agenda-list article > div:first-child small { margin-top:3px; color:var(--muted); font-size:9px; } .marketing-agenda-list article > div:nth-child(2) strong { color:var(--ink); font-size:11px; } .marketing-agenda-list article > div:nth-child(2) span { margin-top:4px; color:var(--muted); font-size:10px; } .marketing-empty { padding:24px; text-align:center; } .marketing-empty strong, .marketing-empty span { display:block; } .marketing-empty span { margin-top:5px; color:var(--muted); font-size:10px; } .marketing-direction { border-top:4px solid #d28a12; } .marketing-direction h3 { margin:0 0 8px; color:var(--ink); font-size:20px; } .marketing-direction > p { margin:0 0 15px; color:var(--muted); font-size:11px; line-height:1.55; } .marketing-direction > div { padding:11px 0; border-top:1px solid #e2eaf0; } .marketing-direction > div strong, .marketing-direction > div small { display:block; } .marketing-direction > div strong { color:var(--ink); font-size:11px; } .marketing-direction > div small { margin-top:4px; color:var(--muted); font-size:10px; } .marketing-readiness-list { display:grid; gap:10px; } .marketing-readiness-list > article { display:grid; grid-template-columns:minmax(190px,.8fr) minmax(320px,1.25fr) minmax(220px,1fr) auto; gap:16px; align-items:center; padding:15px; border:1px solid #dce5eb; border-left:4px solid #d49a1a; border-radius:8px; background:#fffdfa; } .marketing-readiness-list > article.is-ready { border-left-color:#0f9f82; background:#f8fdfa; } .marketing-readiness-company strong, .marketing-readiness-company span, .marketing-readiness-next strong, .marketing-readiness-next small { display:block; } .marketing-readiness-company strong { overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .marketing-readiness-company span { margin-top:4px; color:var(--muted); font-size:9px; } .marketing-readiness-company i { display:block; height:5px; margin-top:9px; overflow:hidden; border-radius:999px; background:#e5ebef; } .marketing-readiness-company i b { display:block; height:100%; border-radius:inherit; background:#17a88b; } .marketing-readiness-stages { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; } .marketing-readiness-stages span { display:flex; align-items:center; gap:5px; min-width:0; padding:7px; border:1px solid #e0e7ec; border-radius:6px; background:#f6f8fa; color:#718093; font-size:9px; font-weight:800; } .marketing-readiness-stages span.is-complete { border-color:#a9dfd4; background:#eaf8f4; color:#087568; } .marketing-readiness-stages b { display:grid; place-items:center; width:16px; height:16px; flex:0 0 16px; border-radius:50%; background:#e5eaee; font-size:9px; } .marketing-readiness-stages .is-complete b { background:#0f9f82; color:#fff; } .marketing-readiness-next strong { color:var(--ink); font-size:11px; } .marketing-readiness-next small { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.4; } .marketing-readiness-list .button { min-width:110px; white-space:nowrap; } .marketing-calendar-head { align-items:center; } .marketing-calendar-actions { display:flex; gap:6px; } .marketing-calendar-actions .button { min-width:40px; padding:8px 11px; } .marketing-calendar-weekdays, .marketing-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); } .marketing-calendar-weekdays { overflow:hidden; border:1px solid #dce6ed; border-bottom:0; border-radius:8px 8px 0 0; background:#f2f6f8; } .marketing-calendar-weekdays span { padding:9px; color:#53687c; font-size:9px; font-weight:900; text-align:center; text-transform:uppercase; } .marketing-calendar-grid { overflow:hidden; border:1px solid #dce6ed; border-radius:0 0 8px 8px; } .marketing-calendar-grid > div, .marketing-calendar-grid > article { min-width:0; min-height:118px; padding:9px; border-right:1px solid #e3eaf0; border-bottom:1px solid #e3eaf0; background:#fff; } .marketing-calendar-grid > :nth-child(7n) { border-right:0; } .marketing-calendar-grid > :nth-last-child(-n+7) { border-bottom:0; } .marketing-calendar-grid .is-outside { background:#f7f9fa; } .marketing-calendar-grid article > strong { display:block; margin-bottom:6px; color:#526579; font-size:10px; } .marketing-calendar-grid article.has-events > strong { color:#087568; } .marketing-calendar-grid article > a { display:block; margin-top:5px; padding:6px; border-left:3px solid #0f9f82; border-radius:4px; background:#eaf8f4; } .marketing-calendar-grid article > a.is-blocked { border-left-color:#d49314; background:#fff7df; } .marketing-calendar-grid article > a b, .marketing-calendar-grid article > a span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .marketing-calendar-grid article > a b { color:#086d62; font-size:8px; } .marketing-calendar-grid article > a.is-blocked b { color:#8a5e08; } .marketing-calendar-grid article > a span { margin-top:3px; color:#607487; font-size:8px; } .marketing-calendar-grid article > small { display:block; margin-top:6px; color:#526579; font-size:8px; font-weight:800; } .marketing-calendar-mobile { display:none; } .marketing-calendar-note { margin:12px 0 0; padding:10px 12px; border-left:3px solid #d49a1a; background:#fff9e8; color:#715a27; font-size:10px; line-height:1.45; } .notification-command { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; border-left:5px solid #0f8b78; background:#f7fcfb; } .notification-command h2 { margin:0; color:var(--ink); font-size:27px; } .notification-command p { max-width:780px; margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.5; } .notification-command-status { min-width:220px; padding:14px 16px; border:1px solid #cae5df; border-radius:8px; background:#fff; } .notification-command-status span, .notification-command-status strong, .notification-command-status small { display:block; } .notification-command-status span { color:#087568; font-size:10px; font-weight:900; text-transform:uppercase; } .notification-command-status strong { margin:6px 0 4px; color:var(--ink); font-size:24px; } .notification-command-status small { color:var(--muted); font-size:10px; } .notification-command-side { display:grid; gap:8px; } .notification-command-side > .button { width:100%; } .notification-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; } .notification-kpis article { min-width:0; padding:16px; border:1px solid #d8e3eb; border-top:4px solid #0f8b78; border-radius:8px; background:#fff; box-shadow:var(--shadow); } .notification-kpis article:nth-child(2) { border-top-color:#d97706; } .notification-kpis article:nth-child(3) { border-top-color:#2563eb; } .notification-kpis article:nth-child(4) { border-top-color:#7c3aed; } .notification-kpis span, .notification-kpis strong, .notification-kpis small { display:block; } .notification-kpis span { color:#526579; font-size:10px; font-weight:900; text-transform:uppercase; } .notification-kpis strong { margin:10px 0 5px; color:var(--ink); font-size:25px; } .notification-kpis small { color:var(--muted); font-size:10px; line-height:1.4; } .notification-journey-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid #d9e4eb; border-radius:8px; overflow:hidden; } .notification-journey-list article { display:grid; grid-template-columns:30px minmax(0,1fr); gap:9px; align-content:start; min-width:0; padding:14px; border-right:1px solid #e2eaf0; background:#fff; } .notification-journey-list article:last-child { border-right:0; } .notification-journey-list article > span { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; background:#e5f6f2; color:#087568; font-size:10px; font-weight:900; } .notification-journey-list strong, .notification-journey-list small { display:block; } .notification-journey-list strong { color:var(--ink); font-size:11px; line-height:1.35; } .notification-journey-list small { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.45; } .notification-journey-list b { grid-column:2; margin-top:8px; color:#8a650d; font-size:9px; text-transform:uppercase; } .notification-provider-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; } .notification-provider-grid > .panel { min-width:0; margin:0; } .notification-provider-grid h3 { margin:0 0 14px; color:var(--ink); font-size:18px; } .notification-provider-list > div { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:39px; border-bottom:1px solid #e3ebf0; } .notification-provider-list > div:last-child { border-bottom:0; } .notification-provider-list span { color:#526579; font-size:12px; } .notification-provider-list b { font-size:10px; } .notification-provider-list b.is-ready { color:#087568; } .notification-provider-list b.is-pending { color:#9a6300; } .notification-principle { border-left:4px solid #d4a229; background:#fffdf7; } .notification-principle p { margin:8px 0 0; color:#5f6671; font-size:12px; line-height:1.5; } .notification-client-panel { overflow:visible; } .notification-client-table { min-width:1120px; } .notification-client-table td > strong, .notification-client-table td > small { display:block; } .notification-client-table td > small { margin-top:4px; color:var(--muted); font-size:10px; } .notification-channel-list { display:flex; flex-wrap:wrap; gap:4px; } .notification-channel-list span { padding:4px 6px; border:1px solid #dce5eb; border-radius:5px; background:#f4f7f9; color:#8795a5; font-size:9px; font-weight:800; } .notification-channel-list span.is-on { border-color:#9edbcf; background:#e8f8f4; color:#087568; } .notification-preview-panel { border-top:4px solid #0f9f82; } .notification-preview-summary { display:grid; grid-template-columns:.75fr 1fr 1.5fr 1fr 1fr; gap:10px; margin-bottom:14px; } .notification-preview-summary article { min-width:0; min-height:76px; padding:12px; border:1px solid #dce6ed; border-radius:8px; background:#f8fbfc; } .notification-preview-summary span, .notification-preview-summary strong, .notification-preview-summary small { display:block; } .notification-preview-summary span { color:#607487; font-size:9px; font-weight:900; text-transform:uppercase; } .notification-preview-summary strong { margin-top:7px; color:var(--ink); font-size:12px; line-height:1.4; overflow-wrap:anywhere; } .notification-preview-summary small { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.4; } .notification-blocked { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; padding:13px 15px; border:1px solid #efd39b; border-left:4px solid #d97706; border-radius:7px; background:#fff9eb; } .notification-blocked strong { flex:0 0 auto; color:#7d5200; font-size:11px; } .notification-blocked span { color:#755e31; font-size:11px; line-height:1.45; } .notification-send-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; padding:13px 15px; border:1px solid #a9ded4; border-radius:8px; background:#edf9f6; } .notification-send-bar strong, .notification-send-bar small { display:block; } .notification-send-bar strong { color:#096f62; font-size:12px; } .notification-send-bar small { margin-top:3px; color:#55766f; font-size:9px; } .notification-send-bar button { min-width:190px; margin:0; } .notification-email-preview { overflow:hidden; border:1px solid #dce6ed; border-radius:8px; background:#eaf0f3; } .notification-email-preview > div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 14px; border-bottom:1px solid #d4e0e7; background:#fff; } .notification-email-preview > div span { color:var(--ink); font-size:11px; font-weight:900; } .notification-email-preview > div small { color:var(--muted); font-size:9px; } .notification-email-preview iframe { display:block; width:100%; height:590px; border:0; background:#eef4f6; } .notification-promotion-editor { margin-bottom:14px; padding:16px; border:1px solid #d8c6ee; border-left:4px solid #7c3aed; border-radius:8px; background:#fbf9ff; } .notification-promotion-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; } .notification-promotion-head > div > span, .notification-promotion-head > div > strong, .notification-promotion-head > div > small { display:block; } .notification-promotion-head > div > span { color:#6d28d9; font-size:9px; font-weight:900; text-transform:uppercase; } .notification-promotion-head > div > strong { margin-top:4px; color:var(--ink); font-size:14px; } .notification-promotion-head > div > small { margin-top:4px; color:var(--muted); font-size:9px; } .notification-promotion-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; } .notification-promotion-grid label { min-width:0; margin:0; color:#526579; font-size:9px; font-weight:900; text-transform:uppercase; } .notification-promotion-grid label.is-wide { grid-column:1 / -1; } .notification-promotion-grid input, .notification-promotion-grid textarea { margin-top:5px; background:#fff; font-size:11px; text-transform:none; } .notification-promotion-grid textarea { resize:vertical; } .notification-promotion-save { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:13px; padding-top:12px; border-top:1px solid #e4d8f1; } .notification-promotion-save small { color:#6f6680; font-size:9px; } .notification-promotion-save button { margin:0; } .notification-approval-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; padding:14px 15px; border:1px solid #dce6ed; border-left:4px solid #d97706; border-radius:8px; background:#fffaf0; } .notification-approval-bar.is-approved { border-color:#a9ded4; border-left-color:#0f9f82; background:#edf9f6; } .notification-approval-bar > div > span, .notification-approval-bar > div > strong, .notification-approval-bar > div > small { display:block; } .notification-approval-bar > div > span { color:#7d630e; font-size:9px; font-weight:900; text-transform:uppercase; } .notification-approval-bar.is-approved > div > span { color:#087568; } .notification-approval-bar > div > strong { margin-top:4px; color:var(--ink); font-size:13px; } .notification-approval-bar > div > small { max-width:820px; margin-top:4px; color:#687888; font-size:9px; line-height:1.45; } .notification-approval-bar form, .notification-approval-bar button { flex:0 0 auto; margin:0; } .notification-row-actions { display:flex; flex-wrap:wrap; gap:5px; } .notification-row-actions .button { margin:0; white-space:nowrap; } .notification-routine-links { display:flex; flex-wrap:wrap; gap:5px; } .notification-routine-links a { padding:5px 7px; border:1px solid #b9ddd6; border-radius:6px; background:#edf9f6; color:#087568; font-size:9px; font-weight:800; text-decoration:none; } .notification-routine-links a:hover { border-color:#0f9f82; background:#dff4ef; } .notification-audit-panel { overflow:visible; } .notification-audit-table { min-width:1050px; } .notification-audit-table td > small { display:block; margin-top:4px; color:var(--muted); font-size:9px; } .notification-agenda-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:12px; } .notification-agenda-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; } .notification-agenda-summary article { padding:13px 14px; border:1px solid #dce6ed; border-radius:8px; background:#f8fbfc; } .notification-agenda-summary span, .notification-agenda-summary strong, .notification-agenda-summary small { display:block; } .notification-agenda-summary span { color:#607487; font-size:9px; font-weight:900; text-transform:uppercase; } .notification-agenda-summary strong { margin:7px 0 3px; color:var(--ink); font-size:22px; } .notification-agenda-summary small { color:var(--muted); font-size:9px; } .notification-agenda-list { overflow:hidden; border:1px solid #dce6ed; border-radius:8px; } .notification-agenda-list > article { display:grid; grid-template-columns:72px minmax(240px,1.3fr) minmax(230px,1fr) auto; gap:14px; align-items:center; min-height:75px; padding:11px 13px; border-bottom:1px solid #e3ebf0; background:#fff; } .notification-agenda-list > article:last-child { border-bottom:0; } .notification-agenda-list > article.is-blocked { background:#fffdf7; } .notification-agenda-date { text-align:center; } .notification-agenda-date strong, .notification-agenda-date small { display:block; } .notification-agenda-date strong { color:#087568; font-size:15px; } .notification-agenda-date small { margin-top:3px; color:#526579; font-size:10px; } .notification-agenda-list > article > div:nth-child(2) strong, .notification-agenda-list > article > div:nth-child(2) span, .notification-agenda-list > article > div:nth-child(2) small { display:block; } .notification-agenda-list > article > div:nth-child(2) strong { color:var(--ink); font-size:12px; } .notification-agenda-list > article > div:nth-child(2) span { margin-top:3px; color:#405568; font-size:10px; font-weight:700; } .notification-agenda-list > article > div:nth-child(2) small { margin-top:3px; color:var(--muted); font-size:9px; } .notification-agenda-state small { display:block; margin-top:5px; color:#7b6a45; font-size:9px; line-height:1.35; } .notification-agenda-empty { padding:24px; text-align:center; } .notification-agenda-empty strong, .notification-agenda-empty span { display:block; } .notification-agenda-empty strong { color:var(--ink); font-size:13px; } .notification-agenda-empty span { margin-top:5px; color:var(--muted); font-size:10px; } .notification-automation-gate { display:flex; gap:10px; margin-top:12px; padding:11px 13px; border-left:4px solid #2563eb; background:#f2f7ff; color:#405b78; font-size:10px; line-height:1.45; } .notification-automation-gate strong { flex:0 0 auto; color:#184d91; } .notification-runner-health { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:10px; } .notification-runner-health article { min-height:82px; padding:12px 13px; border:1px solid #dce6ed; border-top:3px solid #159b88; border-radius:8px; background:#fff; } .notification-runner-health span, .notification-runner-health strong, .notification-runner-health small { display:block; } .notification-runner-health span { color:#607487; font-size:9px; font-weight:900; text-transform:uppercase; } .notification-runner-health strong { margin-top:7px; color:var(--ink); font-size:15px; } .notification-runner-health small { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.35; } .notification-simulation { margin-top:12px; padding:14px; border:1px solid #cfe0e7; border-radius:8px; background:#f8fbfc; } .notification-simulation > article { display:grid; grid-template-columns:minmax(220px,1fr) 120px minmax(220px,auto); gap:12px; align-items:center; padding:10px 12px; border:1px solid #dce6ed; border-left:4px solid #d59a1b; background:#fff; } .notification-simulation > article + article { border-top:0; } .notification-simulation > article.is-ready { border-left-color:#0fa58c; } .notification-simulation > article > div strong, .notification-simulation > article > div span { display:block; } .notification-simulation > article > div strong { color:var(--ink); font-size:11px; } .notification-simulation > article > div span, .notification-simulation > article > small { margin-top:3px; color:var(--muted); font-size:9px; } .notification-simulation > article > .badge { justify-self:end; max-width:360px; white-space:normal; line-height:1.35; text-align:left; } .notification-simulation > p { margin:10px 0 0; color:#526579; font-size:9px; } @media (max-width:1100px) { .marketing-provider-strip { grid-template-columns:1fr 1fr; } .marketing-provider-strip > .button { justify-self:start; } .marketing-readiness-list > article { grid-template-columns:minmax(180px,.8fr) minmax(300px,1.2fr) minmax(190px,1fr); } .marketing-readiness-list .button { grid-column:3; justify-self:start; } .relationship-contact-grid { grid-template-columns:1fr; } .relationship-routine { grid-template-columns:1fr 1fr; } .relationship-routine-copy { grid-column:1 / -1; } .notification-kpis { grid-template-columns:1fr 1fr; } .notification-journey-list { grid-template-columns:1fr 1fr; } .notification-journey-list article { border-bottom:1px solid #e2eaf0; } .notification-preview-summary { grid-template-columns:1fr 1fr; } .notification-agenda-list > article { grid-template-columns:70px minmax(220px,1fr) minmax(180px,1fr); } .notification-agenda-list > article > .button { grid-column:2 / -1; width:max-content; } } @media (max-width:700px) { .relationship-heading, .notification-command, .marketing-command { grid-template-columns:1fr; flex-direction:column; } .marketing-readiness-list > article { grid-template-columns:1fr; gap:13px; padding:14px; } .marketing-provider-strip { grid-template-columns:1fr; } .marketing-provider-strip > .button { width:100%; } .smsnet-security-note, .smsnet-send-lock, .smsnet-balance-check, .smsnet-homologation-head, .smsnet-last-test { align-items:stretch; flex-direction:column; } .smsnet-balance-check form, .smsnet-balance-check button { width:100%; } .smsnet-test-form { grid-template-columns:1fr; } .smsnet-test-message { grid-row:auto; } .smsnet-test-state { white-space:normal; } .smsnet-last-test small { margin-left:0; } .marketing-readiness-stages { grid-template-columns:1fr 1fr; } .marketing-readiness-list .button { grid-column:auto; width:100%; } .marketing-calendar-head { align-items:stretch; flex-direction:column; } .marketing-calendar-actions { width:100%; } .marketing-calendar-actions .button { flex:1; } .marketing-calendar-weekdays, .marketing-calendar-grid { display:none; } .marketing-calendar-mobile { display:grid; overflow:hidden; border:1px solid #dce6ed; border-radius:8px; } .marketing-calendar-mobile > a { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:64px; padding:10px; border-bottom:1px solid #e3eaf0; background:#fff; } .marketing-calendar-mobile > a:last-child { border-bottom:0; } .marketing-calendar-mobile time, .marketing-calendar-mobile time small, .marketing-calendar-mobile span strong, .marketing-calendar-mobile span small { display:block; } .marketing-calendar-mobile time { color:#087568; font-size:12px; font-weight:900; text-align:center; } .marketing-calendar-mobile time small { margin-top:3px; color:var(--muted); font-size:9px; } .marketing-calendar-mobile span strong { color:var(--ink); font-size:10px; } .marketing-calendar-mobile span small { margin-top:4px; color:var(--muted); font-size:9px; } .marketing-calendar-mobile > a > b { white-space:nowrap; } .relationship-contact { grid-template-columns:1fr; } .relationship-contact-title { grid-column:auto; } .relationship-routine { grid-template-columns:1fr; } .relationship-routine-copy { grid-column:auto; } .notification-command-status { width:100%; min-width:0; } .marketing-kpis, .marketing-workspace-grid, .marketing-lower-grid { grid-template-columns:1fr; } .marketing-primary-action { width:100%; min-width:0; } .marketing-workspace-grid > a { grid-template-columns:38px minmax(0,1fr); } .marketing-workspace-grid b { grid-column:2; justify-self:start; } .marketing-agenda-list article { grid-template-columns:54px minmax(0,1fr); } .marketing-agenda-list article > .badge { grid-column:2; justify-self:start; } .notification-kpis, .notification-provider-grid, .notification-journey-list { grid-template-columns:1fr; } .notification-journey-list article { border-right:0; } .notification-preview-summary { grid-template-columns:1fr; } .notification-preview-summary article { min-height:0; } .notification-send-bar, .notification-email-preview > div { align-items:stretch; flex-direction:column; } .notification-send-bar button { width:100%; min-width:0; } .notification-email-preview iframe { height:680px; } .notification-agenda-summary { grid-template-columns:1fr; } .notification-agenda-actions { align-items:flex-end; flex-direction:column; } .notification-runner-health { grid-template-columns:1fr; } .notification-agenda-list > article { grid-template-columns:58px minmax(0,1fr); gap:10px; } .notification-agenda-state, .notification-agenda-list > article > .button { grid-column:2; } .notification-automation-gate { flex-direction:column; } .notification-simulation > article { grid-template-columns:1fr; } .notification-simulation > article > .badge { justify-self:start; } .notification-promotion-head, .notification-promotion-save { align-items:stretch; flex-direction:column; } .notification-promotion-grid { grid-template-columns:1fr; } .notification-promotion-grid label.is-wide { grid-column:auto; } .notification-promotion-save button { width:100%; } .notification-approval-bar { align-items:stretch; flex-direction:column; } .notification-approval-bar form, .notification-approval-bar button { width:100%; } } .diagnostic-card { border:1px solid var(--line); border-radius:8px; padding:14px; background:#fbfcfd; margin-bottom:12px; } .diagnostic-card h3 { margin:0 0 8px; font-size:16px; } .cdc-api-card { position:relative; overflow:hidden; margin-top:14px; padding:0; border-color:#dfe7eb; background:#fff; box-shadow:0 2px 4px rgba(84,101,120,.12); } .cdc-api-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#0f9f82; } .cdc-api-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px 22px 16px 26px; } .cdc-api-title { min-width:0; } .cdc-api-eyebrow { display:block; margin-bottom:6px; color:#0a806c; font-size:10px; font-weight:900; text-transform:uppercase; } .cdc-api-title h3 { margin:0; color:#001737; font-size:19px; line-height:1.25; } .cdc-api-title p { margin:6px 0 0; color:#65768a; font-size:13px; line-height:1.45; } .api-key-status { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:32px; padding:6px 11px; border:1px solid transparent; border-radius:999px; font-size:11px; font-weight:900; white-space:nowrap; } .api-key-status::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; } .api-key-status.is-configured { border-color:#a7e8d9; background:#e8faf5; color:#087568; } .api-key-status.is-missing { border-color:#f2d58a; background:#fff8dc; color:#8a5b00; } .cdc-api-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #edf1f4; border-bottom:1px solid #e3e9ed; background:#f5f7fa; } .cdc-api-step { display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; min-width:0; padding:14px 18px; border-right:1px solid #e3e9ed; } .cdc-api-step:last-child { border-right:0; } .cdc-api-step > span { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#e4e9ef; color:#516174; font-size:12px; font-weight:900; } .cdc-api-step.is-current > span { background:#0f9f82; color:#fff; box-shadow:0 3px 8px rgba(15,159,130,.25); } .cdc-api-step strong, .cdc-api-step small { display:block; } .cdc-api-step strong { color:#17324d; font-size:12px; line-height:1.35; } .cdc-api-step small { margin-top:2px; color:#76838f; font-size:11px; line-height:1.35; } .cdc-api-fields { display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:12px; align-items:end; padding:18px 22px 8px 26px; } .cdc-token-field > span, .cdc-token-field > small { display:block; } .cdc-token-field > span { margin-bottom:7px; color:#29435c; font-size:12px; font-weight:800; } .cdc-token-field > input { min-height:46px; border:1px solid #cdd8e0; border-radius:4px; background:#fff; color:#102a43; padding:12px 14px; font-size:14px; } .cdc-token-field > input:focus { border-color:#0f9f82; outline:3px solid rgba(15,159,130,.12); box-shadow:none; } .cdc-token-field > small { margin-top:6px; color:#76838f; } .cdc-validate-button { min-width:150px; min-height:46px; border-color:#0f9f82; border-radius:4px; background:#0f9f82; color:#fff; white-space:nowrap; box-shadow:0 2px 4px rgba(15,159,130,.22); } .cdc-validate-button:hover { border-color:#087568; background:#087568; } .cdc-validation-result { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:4px 12px; margin:12px 22px 18px 26px; padding:12px 14px 12px 42px; border:1px solid #dce5ea; border-radius:6px; background:#f7fafb; color:#607286; } .cdc-validation-result::before { content:""; grid-row:1 / span 2; align-self:center; width:12px; height:12px; margin-left:-26px; border:3px solid #fff; border-radius:50%; background:#d39b17; box-shadow:0 0 0 1px #d39b17; } .cdc-validation-result strong { color:#213b55; font-size:12px; } .cdc-validation-result span { font-size:12px; line-height:1.4; } .cdc-validation-result.is-pending { border-color:#eed89b; background:#fffbeb; color:#795b12; } .cdc-validation-result.is-loading { border-color:#93c5fd; background:#eff6ff; color:#1d4ed8; } .cdc-validation-result.is-loading::before { background:#2563eb; box-shadow:0 0 0 1px #2563eb; } .cdc-validation-result.is-success { border-color:#86efac; background:#f0fdf4; color:#166534; } .cdc-validation-result.is-success::before { background:#16a34a; box-shadow:0 0 0 1px #16a34a; } .cdc-validation-result.is-error { border-color:#fda4af; background:#fff1f2; color:#9f1239; } .cdc-validation-result.is-error::before { background:#e11d48; box-shadow:0 0 0 1px #e11d48; } .cdc-validation-result.is-error strong { color:#9f1239; } .cdc-remove-token { margin:0 22px 18px 26px; color:#7f1d1d; } .cdc-telephony-config { margin:16px 22px 18px 26px; border:1px solid #dbe5ea; border-radius:6px; background:#f8fafb; overflow:hidden; } .cdc-telephony-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; } .cdc-telephony-heading strong, .cdc-telephony-heading small { display:block; } .cdc-telephony-heading strong { color:#17324d; font-size:14px; } .cdc-telephony-heading small { margin-top:4px; color:#65768a; font-size:11px; line-height:1.45; } .cdc-list-sips { min-height:38px; white-space:nowrap; } .cdc-sip-picker { padding:16px; border-top:1px solid #dbe5ea; background:#fff; } .cdc-sip-picker[hidden] { display:none; } .cdc-sip-picker label > span { display:block; margin-bottom:7px; color:#29435c; font-size:12px; font-weight:800; } .cdc-sip-picker select { width:100%; min-height:44px; border:1px solid #cdd8e0; border-radius:4px; background:#fff; } .cdc-sip-inventory-note { margin-top:7px; color:#6d7d8b; font-size:11px; line-height:1.4; } .cdc-sip-state { display:grid; gap:3px; margin:0 16px 16px; padding:11px 13px; border:1px solid #eed89b; border-radius:5px; background:#fffbeb; color:#795b12; } .cdc-sip-state strong { font-size:12px; } .cdc-sip-state span { font-size:11px; line-height:1.4; } .cdc-sip-state.is-success { border-color:#86efac; background:#f0fdf4; color:#166534; } .cdc-sip-state.is-error { border-color:#fda4af; background:#fff1f2; color:#9f1239; } .cdc-master-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border-top:1px solid #dbe5ea; background:#fff; } .cdc-master-toggle > span:first-child strong, .cdc-master-toggle > span:first-child small { display:block; } .cdc-master-toggle > span:first-child strong { color:#17324d; font-size:13px; } .cdc-master-toggle > span:first-child small { margin-top:3px; color:#65768a; font-size:11px; line-height:1.4; } @media (max-width:680px) { .cdc-telephony-config { margin:14px 16px 16px 20px; } .cdc-telephony-heading { align-items:stretch; flex-direction:column; } .cdc-list-sips { width:100%; } .cdc-master-toggle { align-items:flex-start; } } .webhook-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0; } .webhook-summary-grid .metric-card { display:block; min-width:0; border:1px solid var(--line); border-radius:8px; padding:12px; background:#fff; } .webhook-summary-grid .metric-card small, .webhook-summary-grid .metric-card strong, .webhook-summary-grid .metric-card span { display:block; overflow-wrap:anywhere; } .webhook-summary-grid .metric-card small { color:var(--muted); font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:.02em; } .webhook-summary-grid .metric-card strong { font-size:18px; line-height:1.25; margin:6px 0 4px; } .webhook-summary-grid .metric-card span { color:var(--muted); font-size:13px; line-height:1.35; } .webhook-summary-grid .metric-card.ok { border-top:4px solid #16a34a; } .webhook-summary-grid .metric-card.warn { border-top:4px solid #f59e0b; } .webhook-summary-grid .metric-card.danger { border-top:4px solid #dc2626; } .webhook-summary-grid .metric-card.info { border-top:4px solid #0ea5e9; } .whatsapp-events-table { min-width:1180px; table-layout:fixed; } .whatsapp-events-table th, .whatsapp-events-table td { white-space:normal; overflow-wrap:anywhere; word-break:break-word; vertical-align:top; line-height:1.35; } .whatsapp-events-table th:nth-child(1), .whatsapp-events-table td:nth-child(1) { width:150px; } .whatsapp-events-table th:nth-child(2), .whatsapp-events-table td:nth-child(2) { width:105px; } .whatsapp-events-table th:nth-child(3), .whatsapp-events-table td:nth-child(3) { width:210px; } .whatsapp-events-table th:nth-child(4), .whatsapp-events-table td:nth-child(4) { width:150px; } .whatsapp-events-table th:nth-child(5), .whatsapp-events-table td:nth-child(5) { width:165px; } .whatsapp-events-table th:nth-child(6), .whatsapp-events-table td:nth-child(6) { width:210px; } .whatsapp-events-table th:nth-child(7), .whatsapp-events-table td:nth-child(7) { width:190px; } .whatsapp-events-table .status-stack { display:flex; flex-wrap:wrap; gap:5px; align-items:flex-start; } .whatsapp-events-table .status-stack .badge { white-space:normal; max-width:100%; } .whatsapp-events-table .event-help { display:block; max-width:100%; color:var(--muted); font-size:12px; } .whatsapp-events-table .event-detail { display:block; margin-top:4px; max-height:48px; overflow:auto; color:var(--muted); font-size:11px; } .whatsapp-alert { border:1px solid #f4c7c7; border-left:5px solid #dc2626; border-radius:8px; padding:12px; background:#fff5f5; color:#7f1d1d; margin:12px 0; line-height:1.4; } .whatsapp-alert.ok { border-color:#b7e4dc; border-left-color:#16a34a; background:#f0fdf4; color:#14532d; } @media (max-width:900px) { .did-diagnostic-heading { display:grid; grid-template-columns:1fr; } .did-readonly-badge { justify-self:start; } .did-view-tabs { grid-template-columns:1fr; } .did-test-form { grid-template-columns:1fr; } .inbound-list-heading { display:grid; grid-template-columns:1fr; } .inbound-coverage { justify-items:start; } .inbound-filter { display:grid; grid-template-columns:1fr; align-items:stretch; } .inbound-filter div { min-width:0; } .inbound-count { justify-self:start; } .inbound-call { grid-template-columns:1fr 1fr; gap:10px; } .inbound-call > .badge { justify-self:start; } .did-test-form button { width:100%; } .did-journey { grid-template-columns:1fr; } .did-step { min-height:0; padding-left:54px; } .did-step-number { position:absolute; left:13px; top:14px; } .did-verdict { grid-template-columns:6px minmax(0,1fr); padding:14px; } .did-verdict strong { font-size:19px; } .asterisk-advanced > summary { align-items:flex-start; } } @media (max-width:900px) { .webhook-summary-grid { grid-template-columns:1fr; } .whatsapp-events-table { min-width:960px; } .access-groups-hero, .access-group-card-head, .access-group-identity, .asterisk-hero, .asterisk-kpis, .asterisk-focus-meta { grid-template-columns:1fr; display:grid; } .access-groups-summary, .access-group-count { width:100%; min-width:0; } .wapanel-layout, .wapanel-summary-grid, .wapanel-summary-grid.compact, .wapanel-current-step, .wapanel-field-grid, .wapanel-diagnostic-notes { grid-template-columns:1fr; } .wapanel-tree-step { grid-template-columns:1fr; } .wapanel-tree::before { left:18px; } .wapanel-tree-rail { justify-content:flex-start; } } .diagnostic-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } .danger-zone { border-color:#f3b7b0; background:#fff8f7; } .client-config-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; } .client-config-head h2 { margin-bottom:5px; } .client-config-nav { position:sticky; top:84px; z-index:10; display:flex; gap:8px; flex-wrap:wrap; border:1px solid var(--line); border-radius:8px; padding:8px; background:rgba(255,255,255,.96); box-shadow:0 8px 22px rgba(20,33,61,.06); margin-bottom:16px; } .client-config-nav a { display:inline-flex; align-items:center; min-height:34px; border-radius:7px; padding:8px 10px; color:var(--ink); font-weight:800; border:1px solid transparent; background:#f8fafc; } .client-config-nav a:hover, .client-config-nav a.active { border-color:#b7e4dc; background:#0f8177; color:#fff; } .client-config-section { display:none; border:1px solid var(--line); border-radius:8px; padding:16px; background:#fff; margin-bottom:14px; scroll-margin-top:150px; } .client-config-section.is-active { display:block; } .client-extra-section { display:none; } .client-extra-section.is-active { display:block; } body:has(.client-config-section:target) .client-config-section, body:has(.client-extra-section:target) .client-config-section, body:has(.client-extra-section:target) .client-extra-section { display:none; } body:has(.client-config-section:target) .client-config-section:target, body:has(.client-extra-section:target) .client-extra-section:target { display:block; } .client-config-section h3 { margin:0 0 5px; font-size:17px; } .client-config-section > p.muted { margin-top:0; } .setup-checklist { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin-bottom:16px; } .setup-step { border:1px solid var(--line); border-radius:8px; padding:12px; background:#fbfcfd; min-height:92px; } .setup-step strong { display:block; margin:7px 0 3px; } .setup-step small { color:var(--muted); line-height:1.35; } .client-savebar { position:sticky; bottom:0; z-index:9; display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--line); border-radius:8px; padding:12px; background:rgba(255,255,255,.96); box-shadow:0 -8px 24px rgba(20,33,61,.08); margin-top:8px; } .finance-hero { display:grid; grid-template-columns:1.2fr repeat(3,minmax(130px,1fr)); gap:12px; margin-bottom:16px; } .finance-card { border:1px solid var(--line); border-radius:8px; padding:14px; background:linear-gradient(180deg,#fff,#f8fbfa); } .finance-card strong { display:block; font-size:24px; color:var(--ink); margin-top:5px; } .finance-card small { color:var(--muted); font-weight:700; text-transform:uppercase; } .finance-total-card { background:linear-gradient(135deg,#0f8177,#11557a); color:#fff; border-color:#0f8177; } .finance-total-card strong, .finance-total-card small { color:#fff; } .ai-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0 16px; } .ai-mode-card { position:relative; display:block; border:1px solid var(--line); border-radius:8px; background:linear-gradient(180deg,#fff,#f8fbfa); padding:14px 14px 14px 44px; min-height:160px; cursor:pointer; box-shadow:var(--shadow); } .ai-mode-card input { position:absolute; left:14px; top:17px; } .ai-mode-card strong { display:block; font-size:18px; margin:6px 0; color:var(--ink); } .ai-mode-card small { display:block; color:var(--muted); line-height:1.35; } .ai-mode-card .badge { margin-bottom:5px; } .ai-mode-card:has(input:checked) { border-color:#0f8177; box-shadow:0 0 0 3px rgba(15,129,119,.12), var(--shadow); } .ai-mode-card.off:has(input:checked) { border-color:#9aa6b2; box-shadow:0 0 0 3px rgba(100,116,139,.12), var(--shadow); } .ai-mode-card.conversational:has(input:checked) { border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.14), var(--shadow); } .ai-subpage-nav, .ura-subpage-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; } .ai-subpage-tab, .ura-subpage-tab { display:block; text-decoration:none; text-align:left; border:1px solid var(--line); border-radius:8px; background:#fff; padding:13px; cursor:pointer; box-shadow:var(--shadow); color:var(--ink); } .ai-subpage-tab strong, .ura-subpage-tab strong { display:block; font-size:17px; color:var(--brand-2); margin:6px 0 4px; } .ai-subpage-tab span:last-child, .ura-subpage-tab span:last-child { display:block; color:var(--muted); font-size:13px; line-height:1.35; } .ai-subpage-tab.active, .ura-subpage-tab.active { border-color:#0f8177; background:linear-gradient(180deg,#f0fdfa,#fff); box-shadow:0 0 0 3px rgba(15,129,119,.10), var(--shadow); } .ai-subpage-tab[data-ai-page-tab="conversational"].active { border-color:#0ea5e9; background:linear-gradient(180deg,#eef8ff,#fff); box-shadow:0 0 0 3px rgba(14,165,233,.12), var(--shadow); } .ai-subpage-nav--plans { grid-template-columns:repeat(4,minmax(0,1fr)); } .ai-subpage-tab--no-ura { width:100%; font:inherit; } .ai-subpage-tab--no-ura.active { border-color:#d97706; background:linear-gradient(180deg,#fffbeb,#fff); box-shadow:0 0 0 3px rgba(217,119,6,.12), var(--shadow); } .ai-subpage-nav--plans.is-ura-disabled .ai-subpage-tab:not(.ai-subpage-tab--no-ura) { opacity:.62; } .ai-no-ura-note { display:none; align-items:flex-start; gap:5px; flex-direction:column; margin:-2px 0 14px; padding:13px 15px; border:1px solid #f1cc83; border-left:4px solid #d97706; border-radius:8px; background:#fffbeb; color:#704407; } .ai-no-ura-note.is-visible { display:flex; } .ai-no-ura-note span { color:#7c5a22; font-size:13px; line-height:1.45; } .ai-saved-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0 14px; } .ai-saved-summary > div { border:1px solid var(--line); border-radius:8px; background:#f8fafc; padding:12px 14px; } .ai-saved-summary small { display:block; color:var(--muted); text-transform:uppercase; font-weight:800; font-size:11px; letter-spacing:.02em; } .ai-saved-summary strong { display:block; color:var(--brand-2); font-size:19px; margin-top:4px; } .ai-saved-summary span { display:block; color:var(--muted); font-size:13px; margin-top:2px; } .audio-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:12px 0 16px; } .audio-mode-card { border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px; box-shadow:var(--shadow); } .audio-mode-card.active { border-color:#0f8177; background:linear-gradient(180deg,#f0fdfa,#fff); box-shadow:0 0 0 3px rgba(15,129,119,.10), var(--shadow); } .audio-mode-card.warn { border-color:#f59e0b; background:#fffbeb; } .audio-mode-card small { display:block; color:var(--muted); text-transform:uppercase; font-weight:800; font-size:11px; } .audio-mode-card strong { display:block; color:var(--brand-2); font-size:20px; margin:5px 0; } .audio-mode-card span { color:var(--muted); font-size:13px; line-height:1.35; } .audio-actions-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0 16px; } .audio-actions-bar + h2 { display:none; } .ai-subpage, .ura-subpage { display:none; border:1px solid var(--line); border-radius:8px; background:#fff; padding:16px; box-shadow:0 10px 24px rgba(15,23,42,.05); } .ai-subpage.is-active, .ura-subpage.is-active { display:block; } .ai-subpage-head, .ura-subpage-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .ai-subpage-head h4, .ura-subpage-head h4 { margin:0 0 6px; font-size:20px; color:var(--brand-2); } .ai-subpage-head p { margin:0; color:var(--muted); line-height:1.4; max-width:760px; } .ai-subpage-select { border:1px solid #b7e4dc; border-radius:8px; background:#f0fdfa; padding:10px 12px; font-weight:800; color:var(--brand-2); display:inline-flex; align-items:center; gap:8px; } .ai-subpage-select input { transform:scale(1.15); } .ai-subpage-hero { display:grid; grid-template-columns:1.1fr repeat(3,minmax(130px,1fr)); gap:12px; margin-bottom:14px; } .ai-subpage-note, .ura-subpage-note { border-left:4px solid var(--brand); border-radius:8px; background:#f0fdfa; padding:12px; color:var(--muted); line-height:1.42; margin:12px 0; } .ai-subpage .ai-config-block:last-child { margin-bottom:0; } .ura-subpage .ura-flow-step { margin:0 0 10px; padding-left:18px; } .ura-subpage .ura-flow-step strong { color:var(--brand-2); } .ai-mode-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 16px; } .ai-mode-detail { border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px; box-shadow:0 10px 24px rgba(15,23,42,.05); } .ai-mode-detail.active { border-color:#0f8177; background:linear-gradient(180deg,#f0fdfa,#fff); box-shadow:0 0 0 3px rgba(15,129,119,.10), 0 12px 28px rgba(15,23,42,.07); } .ai-mode-detail.conversational.active { border-color:#0ea5e9; background:linear-gradient(180deg,#eef8ff,#fff); box-shadow:0 0 0 3px rgba(14,165,233,.12), 0 12px 28px rgba(15,23,42,.07); } .ai-mode-detail h4 { margin:8px 0 6px; font-size:17px; color:var(--brand-2); } .ai-mode-detail p { margin:0 0 10px; color:var(--muted); line-height:1.38; } .ai-mode-detail ul { margin:0; padding-left:18px; color:var(--ink); line-height:1.45; } .ai-mode-detail li + li { margin-top:5px; } .ai-config-block { border:1px solid var(--line); border-radius:8px; padding:14px; background:#fbfcfd; margin-bottom:14px; } .ai-config-block h4 { margin:0 0 8px; color:var(--brand-2); } .ai-flow-summary { margin-top:14px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px; } .ai-flow-summary h3 { margin:0 0 6px; } .ai-flow-summary-grid { display:grid; grid-template-columns:1.1fr repeat(3,minmax(160px,1fr)); gap:12px; margin:12px 0; } .ai-flow-summary-card { border:1px solid var(--line); border-radius:8px; background:linear-gradient(180deg,#fff,#f8fbfa); padding:13px; } .ai-flow-summary-card.hero { background:linear-gradient(135deg,#0f8177,#12355b); color:#fff; border-color:#0f8177; } .ai-flow-summary-card strong { display:block; font-size:22px; margin-top:5px; color:var(--ink); } .ai-flow-summary-card.hero strong, .ai-flow-summary-card.hero span, .ai-flow-summary-card.hero small { color:#fff; } .ai-flow-summary-card small { display:block; color:var(--muted); font-weight:800; text-transform:uppercase; } .ai-flow-summary-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .ai-flow-summary-list div { border:1px solid var(--line); border-radius:8px; padding:12px; background:#fbfcfd; } .ai-flow-summary-list strong { display:block; margin-bottom:5px; color:var(--brand-2); } .ai-flow-summary-list span { color:var(--muted); line-height:1.38; display:block; } .ai-mode-summary { display:grid; grid-template-columns:1.2fr repeat(3,minmax(130px,1fr)); gap:12px; margin-bottom:16px; } .ai-mode-summary .finance-card { min-height:108px; } .ai-lab-box { margin-top:16px; border:1px solid #b7e4dc; border-radius:8px; background:linear-gradient(180deg,#f0fdfa,#fff); padding:14px; } .ai-call-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; } .ai-call-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px; box-shadow:var(--shadow); } .ai-call-card.assistant { border-top:4px solid #0f8177; } .ai-call-card.conversational { border-top:4px solid #0ea5e9; } .ai-call-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .ai-call-phone { position:relative; width:54px; height:54px; border-radius:18px; display:grid; place-items:center; color:#fff; font-weight:900; letter-spacing:.02em; background:linear-gradient(135deg,#0f8177,#12355b); box-shadow:0 10px 20px rgba(15,129,119,.18); flex:0 0 auto; } .ai-call-card.conversational .ai-call-phone { background:linear-gradient(135deg,#0ea5e9,#12355b); box-shadow:0 10px 20px rgba(14,165,233,.18); } .ai-call-phone::after { content:""; position:absolute; inset:-8px; border:2px solid rgba(15,129,119,.22); border-radius:24px; animation:ringPulse 1.45s ease-out infinite; } .ai-call-card.conversational .ai-call-phone::after { border-color:rgba(14,165,233,.24); } .ai-call-head strong { display:block; font-size:18px; color:var(--brand-2); } .ai-call-head span { display:block; color:var(--muted); font-size:13px; margin-top:2px; } .ai-call-card textarea { min-height:124px; } .ai-call-card .muted { line-height:1.38; } .ai-call-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; } .ai-flow-note { border-left:4px solid var(--brand); background:#f0fdfa; border-radius:8px; padding:10px; margin-top:10px; color:var(--muted); } .ai-flow-note strong { display:inline; color:var(--brand-2); } .ai-live-call-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; } .ai-live-call { border:1px solid var(--line); border-radius:8px; background:linear-gradient(180deg,#fff,#f7fbfa); padding:14px; box-shadow:var(--shadow); } .ai-live-call.assistant { border-left:5px solid #0f8177; } .ai-live-call.conversational { border-left:5px solid #0ea5e9; } .ai-live-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; } .ai-live-title { display:flex; align-items:center; gap:10px; } .ai-live-title .ai-call-phone { width:46px; height:46px; border-radius:15px; } .ai-live-title strong { display:block; color:var(--brand-2); font-size:17px; } .ai-live-title span { display:block; color:var(--muted); font-size:13px; } .ai-live-status { white-space:nowrap; } .ai-live-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; } .ai-live-actions button[disabled] { opacity:.55; cursor:not-allowed; } .ai-call-screen { min-height:210px; max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:#f8fafc; padding:10px; display:flex; flex-direction:column; gap:8px; } .ai-bubble { max-width:88%; border-radius:12px; padding:9px 11px; line-height:1.36; box-shadow:0 1px 0 rgba(15,23,42,.04); } .ai-bubble.system { align-self:center; background:#e7f7f4; color:#0f615a; font-weight:800; font-size:12px; text-transform:uppercase; } .ai-bubble.ai { align-self:flex-start; background:#fff; border:1px solid var(--line); } .ai-bubble.user { align-self:flex-end; background:#0f8177; color:#fff; } .ai-bubble small { display:block; margin-top:5px; opacity:.75; font-size:11px; } .ai-live-note { color:var(--muted); font-size:12px; line-height:1.35; margin-top:9px; } @keyframes ringPulse { 0% { transform:scale(.86); opacity:.95; } 100% { transform:scale(1.18); opacity:0; } } .ai-lab-result { display:grid; grid-template-columns:minmax(240px,.75fr) 1.25fr; gap:12px; margin-top:14px; align-items:stretch; } .ai-lab-hero { position:relative; overflow:hidden; border-radius:8px; background:linear-gradient(135deg,#0f766e,#12355b); color:#fff; padding:18px; min-height:136px; } .ai-lab-hero::after { content:"IA"; position:absolute; right:14px; bottom:0; font-size:58px; line-height:1; font-weight:900; color:rgba(255,255,255,.13); } .ai-lab-hero span { display:inline-flex; border-radius:999px; background:rgba(255,255,255,.16); padding:5px 9px; font-size:12px; font-weight:900; text-transform:uppercase; margin-bottom:12px; } .ai-lab-hero strong { display:block; font-size:26px; line-height:1.08; margin-bottom:8px; overflow-wrap:anywhere; } .ai-lab-hero small { color:rgba(255,255,255,.82); } .ai-lab-detail { border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px; } .ai-lab-detail strong { display:block; margin-bottom:4px; color:var(--brand-2); } .ai-lab-detail p { margin:0 0 10px; color:var(--muted); line-height:1.42; } .ai-mic-lab { margin-top:12px; border:1px solid #c8e5ff; border-radius:8px; background:#f8fcff; padding:14px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; } .ai-mic-lab strong { display:block; margin-bottom:4px; } .ai-mic-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .ai-mic-actions button[disabled] { opacity:.55; cursor:not-allowed; } .ai-mic-result { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } .ai-mic-result .mic-transcript { grid-column:1 / -1; border-left:4px solid var(--brand); background:#fff; border-radius:8px; padding:12px; } .ai-mic-card { border:1px solid var(--line); border-radius:8px; background:#fff; padding:12px; } .ai-mic-card strong { font-size:16px; color:var(--brand-2); } .ai-mic-card p { margin:8px 0 0; color:var(--muted); line-height:1.4; } .ai-mic-card .big { display:block; font-size:22px; color:var(--ink); margin-top:6px; } .ai-mic-card .flow { border-top:1px solid var(--line); margin-top:10px; padding-top:10px; } .finance-products input, .finance-products select { min-width:110px; } .finance-products .product-name { min-width:180px; } .billing-day-box { display:grid; grid-template-columns:minmax(220px,320px) 1fr; gap:14px; align-items:center; border:1px solid #b7e4dc; border-left:5px solid var(--brand); border-radius:8px; background:#f0fdfa; padding:14px; margin:16px 0; } .billing-day-box input { font-size:22px; font-weight:900; text-align:center; } .billing-day-box strong { display:block; font-size:17px; margin-bottom:4px; } .logo-upload-box { display:grid; grid-template-columns:minmax(260px,1fr) 260px; gap:14px; align-items:stretch; margin-top:16px; border:1px solid var(--line); border-radius:8px; background:#fbfcfd; padding:14px; } .logo-preview-card { min-height:110px; border:1px dashed #b8c5d4; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; padding:12px; text-align:center; } .logo-preview-card img { max-width:220px; max-height:86px; object-fit:contain; display:block; } @media (max-width: 900px) { .ai-mode-grid, .ai-subpage-nav, .ura-subpage-nav, .ai-saved-summary, .audio-mode-grid, .ai-subpage-hero, .ai-mode-detail-grid, .ai-flow-summary-grid, .ai-flow-summary-list { grid-template-columns:1fr; } } @media (max-width: 700px) { .billing-day-box { grid-template-columns:1fr; } } @media (max-width: 900px) { .finance-hero, .ai-mode-grid, .ai-mode-summary, .ai-call-grid, .ai-live-call-grid { grid-template-columns:1fr; } } .portal-shell { min-height:calc(100vh - 68px); background:#eef2f5; } .portal-main { max-width:1220px; margin:0 auto; padding:24px; } .portal-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; border:1px solid var(--line); border-radius:8px; padding:20px; margin-bottom:18px; background:linear-gradient(135deg,#ffffff 0%,#eef8f6 100%); box-shadow:var(--shadow); } .portal-hero h2 { font-size:24px; margin:0 0 6px; } .portal-identity { display:flex; align-items:center; gap:16px; min-width:0; } .portal-logo { width:260px; max-width:42vw; max-height:104px; object-fit:contain; border-radius:8px; background:#fff; border:1px solid var(--line); padding:10px; box-shadow:0 8px 22px rgba(20,33,61,.08); flex:0 0 auto; } .portal-identity strong { display:block; font-size:18px; line-height:1.25; color:var(--brand-2); margin-bottom:4px; overflow-wrap:anywhere; } .portal-nav-box { margin-bottom:18px; padding:12px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(180deg,#fff,#f8fbfd); box-shadow:0 12px 28px rgba(20,33,61,.07); } .portal-nav-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 10px; color:var(--muted); font-size:12px; font-weight:900; text-transform:uppercase; } .portal-nav-head span:last-child { color:var(--brand); background:#e7f7f2; border-radius:999px; padding:5px 9px; text-transform:none; } .portal-tabs { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:0; } .portal-tabs a { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 14px; border-radius:9px; border:1px solid #cfdbea; background:#fff; color:var(--ink); font-weight:800; box-shadow:0 4px 12px rgba(20,33,61,.04); transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease; } .portal-tabs a:hover { transform:translateY(-1px); border-color:#b7c7da; box-shadow:0 10px 22px rgba(20,33,61,.09); } .portal-tabs a.active { background:linear-gradient(135deg,#0f8177,#0b6b62); color:#fff; border-color:#0b6b62; box-shadow:0 12px 26px rgba(15,129,119,.22); } .portal-tabs a.active::after { content:""; position:absolute; left:14px; right:14px; bottom:-6px; height:3px; border-radius:999px; background:#16a34a; opacity:.85; } .portal-tabs a.whatsapp-official-tab { color:#063d2f; border-color:#b8e6ce; background:#f2fff8; } .portal-tabs a.whatsapp-official-tab.active { background:linear-gradient(135deg,#16a34a,#0f8177); color:#fff; border-color:#16a34a; } .portal-theme-toggle { background:#0f172a; color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:9px; padding:9px 12px; min-height:38px; } .portal-theme-dark { --ink:#e8f0fb; --muted:#a9b8ca; --line:#243247; --surface:#0f172a; --surface-tint:#111c2f; --brand:#22c7b8; --brand-2:#7dd3c7; --shadow:0 18px 46px rgba(0,0,0,.28); background: radial-gradient(circle at 18% -10%,rgba(34,199,184,.14),transparent 320px), linear-gradient(180deg,#07111f 0%,#0a1220 58%,#070d16 100%); color:var(--ink); } .portal-theme-dark .portal-main { color:var(--ink); } .portal-theme-dark .portal-hero, .portal-theme-dark .portal-nav-box, .portal-theme-dark .panel, .portal-theme-dark .portal-kpi, .portal-theme-dark .usage-card, .portal-theme-dark .finance-card, .portal-theme-dark .detail-board, .portal-theme-dark .wa-health-card, .portal-theme-dark .audio-mode-card, .portal-theme-dark .monitor-panel, .portal-theme-dark .productivity-panel, .portal-theme-dark .ai-subpage, .portal-theme-dark .ai-config-block, .portal-theme-dark .flow-card, .portal-theme-dark .diagnostic-card, .portal-theme-dark .table-scroll { background:linear-gradient(180deg,#101b2d 0%,#0c1626 100%); border-color:#243247; box-shadow:0 18px 44px rgba(0,0,0,.26); } .portal-theme-dark .portal-hero { background:linear-gradient(135deg,#111f34 0%,#0b2c31 100%); } .portal-theme-dark .portal-logo { background:#fff; border-color:#34445c; } .portal-theme-dark .portal-identity strong, .portal-theme-dark h2, .portal-theme-dark h3, .portal-theme-dark h4, .portal-theme-dark strong { color:var(--ink); } .portal-theme-dark .muted, .portal-theme-dark small { color:var(--muted); } .portal-theme-dark .portal-nav-head span:last-child, .portal-theme-dark .badge.sev-notice, .portal-theme-dark .queue-pill, .portal-theme-dark .flow-dest { background:rgba(34,199,184,.14); color:#9ff3e8; border-color:rgba(34,199,184,.22); } .portal-theme-dark .table-scroll { background:#0c1626; } .portal-theme-dark tbody tr:nth-child(even) td { background:#0f2130; } .portal-theme-dark tbody tr:hover td { background:#143047; } .portal-theme-dark .portal-tabs a { background:#111d30; color:#e8f0fb; border-color:#2b3a52; box-shadow:0 10px 22px rgba(0,0,0,.20); } .portal-theme-dark .portal-tabs a:hover { border-color:#42607e; background:#15243b; } .portal-theme-dark .portal-tabs a.active, .portal-theme-dark .portal-tabs a.whatsapp-official-tab.active { background:linear-gradient(135deg,#13a89a,#0b6f66); color:#fff; border-color:#13a89a; } .portal-theme-dark .portal-tabs a.whatsapp-official-tab { background:#0d3329 !important; color:#b7ffe9 !important; border-color:#17694f !important; } .portal-theme-dark .portal-theme-toggle { background:#f8fafc; color:#0f172a; border-color:#f8fafc; } .portal-theme-dark .logout { background:#111d30; color:#e8f0fb; border-color:#2b3a52; } .portal-theme-dark table td, .portal-theme-dark tbody tr:not(.row-ok):not(.row-warn):not(.row-danger):nth-child(odd) td { background:#0f1a2c; color:#e8f0fb; } .portal-theme-dark tbody tr:not(.row-ok):not(.row-warn):not(.row-danger):nth-child(even) td { background:#0b231f; color:#e8f0fb; } .portal-theme-dark tbody tr:not(.row-ok):not(.row-warn):not(.row-danger):hover td { background:#12342f; } .portal-theme-dark th { background:linear-gradient(180deg,#18263b,#111d30); color:#d8e6f5; } .portal-theme-dark input, .portal-theme-dark select, .portal-theme-dark textarea { background:#0b1424; color:#e8f0fb; border-color:#2b3a52; } .portal-theme-dark .bar-track { background:#1e2b3d; } .usage-hero { display:grid; grid-template-columns:minmax(280px,.92fr) 1.08fr; gap:16px; align-items:stretch; margin-bottom:16px; } .usage-main { position:relative; overflow:hidden; border-radius:8px; background:linear-gradient(135deg,#0f766e 0%,#12355b 100%); color:#fff; padding:22px; min-height:176px; box-shadow:0 18px 42px rgba(18,53,91,.18); } .usage-main::after { content:"GUIA"; position:absolute; right:16px; bottom:0; font-size:60px; line-height:1; font-weight:900; color:rgba(255,255,255,.13); letter-spacing:0; } .usage-main span { display:inline-flex; border-radius:999px; background:rgba(255,255,255,.16); padding:6px 10px; font-size:12px; font-weight:900; text-transform:uppercase; margin-bottom:14px; } .usage-main strong { display:block; font-size:30px; line-height:1.08; margin-bottom:10px; } .usage-main p { margin:0; color:rgba(255,255,255,.88); line-height:1.45; max-width:88%; } .usage-card { border:1px solid var(--line); border-radius:8px; background:linear-gradient(180deg,#fff,#f8fbfa); padding:14px; box-shadow:var(--shadow); } .usage-card h3 { margin:0 0 10px; } .usage-card p { margin:0 0 10px; color:var(--muted); line-height:1.45; } .usage-card ul, .usage-card ol { margin:0; padding-left:20px; color:var(--ink); line-height:1.55; } .usage-card li + li { margin-top:6px; } .usage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; } .usage-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:12px 0 16px; } .usage-status { border:1px solid var(--line); border-radius:8px; background:#fff; padding:13px; min-height:112px; } .usage-status strong { display:block; font-size:18px; margin-bottom:6px; } .usage-status small { color:var(--muted); line-height:1.35; display:block; } .usage-status.online { border-top:4px solid #16a34a; } .usage-status.busy { border-top:4px solid #2563eb; } .usage-status.paused { border-top:4px solid #f59e0b; } .usage-status.offline { border-top:4px solid #dc2626; } .usage-mini { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .usage-mini div { border:1px solid var(--line); border-radius:8px; background:#fff; padding:12px; } .usage-mini span { color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; display:block; margin-bottom:6px; } .usage-mini strong { display:block; font-size:20px; } .usage-note { margin-top:14px; border-left:4px solid var(--brand); background:#f0fdfa; border-radius:8px; padding:12px 14px; color:var(--brand-2); line-height:1.45; } .portal-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:18px; } .portal-kpi { border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px; box-shadow:var(--shadow); min-height:104px; } a.portal-kpi { display:block; color:var(--ink); text-decoration:none; } a.portal-kpi:hover { transform:translateY(-1px); box-shadow:0 14px 34px rgba(20,33,61,.10); } .portal-kpi span { color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; } .portal-kpi strong { display:block; font-size:30px; line-height:1.1; margin-top:8px; } .portal-kpi.ok { border-top:4px solid #16a34a; } .portal-kpi.info { border-top:4px solid #0ea5e9; } .portal-kpi.warn { border-top:4px solid #f59e0b; } .portal-kpi.danger { border-top:4px solid #dc2626; } .finance-hero { display:grid; grid-template-columns:minmax(280px,.9fr) 1.1fr; gap:16px; align-items:stretch; margin-bottom:18px; } .finance-main { position:relative; overflow:hidden; border-radius:8px; background:linear-gradient(135deg,#0f766e 0%,#12355b 100%); color:#fff; padding:22px; min-height:178px; box-shadow:0 18px 42px rgba(18,53,91,.20); } .finance-main::after { content:"R$"; position:absolute; right:20px; bottom:4px; color:rgba(255,255,255,.14); font-size:64px; font-weight:900; letter-spacing:0; } .finance-main span { display:inline-flex; border-radius:999px; background:rgba(255,255,255,.16); padding:6px 10px; font-size:12px; font-weight:900; text-transform:uppercase; margin-bottom:16px; } .finance-main strong { display:block; font-size:34px; line-height:1.05; margin-bottom:10px; } .finance-main p { margin:0; color:rgba(255,255,255,.86); line-height:1.45; } .finance-main-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; z-index:1; margin-bottom:14px; } .finance-main-title strong { margin:0; } .finance-account-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); color:#fff; padding:7px 10px; font-size:12px; font-style:normal; font-weight:900; white-space:nowrap; } .finance-account-pill b { font-size:13px; } .finance-main-note { position:relative; z-index:1; max-width:92%; } .finance-recharge-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 14px; position:relative; z-index:1; } .finance-recharge-form label { display:block; color:rgba(255,255,255,.86); font-size:12px; font-weight:900; margin-bottom:5px; text-transform:uppercase; } .finance-recharge-form input, .finance-recharge-form select { width:100%; border:1px solid rgba(255,255,255,.38); border-radius:8px; background:rgba(255,255,255,.96); color:#061735; padding:10px; font-size:15px; font-weight:800; } .finance-secure-line { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; position:relative; z-index:1; } .finance-secure-line small { display:inline-flex; border-radius:999px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.88); padding:6px 9px; font-size:12px; font-weight:800; } .finance-main .button { position:relative; z-index:1; } .finance-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .finance-product-name { font-weight:900; } .finance-amount.negative { color:#b91c1c; font-weight:900; } .finance-amount.positive { color:#166534; font-weight:900; } .portal-kpi.compact strong { font-size:24px; line-height:1.08; overflow-wrap:normal; } .productivity-hero { display:grid; grid-template-columns:minmax(280px,.92fr) 1.08fr; gap:16px; align-items:stretch; margin-bottom:16px; } .productivity-main { position:relative; overflow:hidden; border-radius:8px; background:linear-gradient(135deg,#0f766e 0%,#12355b 100%); color:#fff; padding:22px; min-height:178px; box-shadow:0 18px 42px rgba(18,53,91,.18); } .productivity-main::after { content:"PRO"; position:absolute; right:16px; bottom:0; font-size:62px; line-height:1; font-weight:900; color:rgba(255,255,255,.13); letter-spacing:0; } .productivity-main span { display:inline-flex; border-radius:999px; background:rgba(255,255,255,.16); padding:6px 10px; font-size:12px; font-weight:900; text-transform:uppercase; margin-bottom:14px; } .productivity-main strong { display:block; font-size:32px; line-height:1.05; margin-bottom:10px; overflow-wrap:anywhere; } .productivity-main p { margin:0; color:rgba(255,255,255,.88); line-height:1.45; max-width:88%; } .productivity-scoreboard { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .productivity-awards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:14px 0 16px; } .productivity-awards div { border:1px solid var(--line); border-radius:8px; background:linear-gradient(180deg,#fff,#f8fbfa); padding:12px; min-height:102px; box-shadow:var(--shadow); } .productivity-awards strong { display:block; font-size:20px; margin:10px 0 4px; overflow-wrap:anywhere; } .productivity-awards small { color:var(--muted); } .productivity-charts { display:grid; grid-template-columns:minmax(280px,.85fr) 1.15fr; gap:12px; margin:14px 0 16px; } .productivity-chart-card { border:1px solid var(--line); border-radius:8px; background:linear-gradient(180deg,#fff,#f8fbfa); padding:14px; box-shadow:var(--shadow); min-height:170px; } .chart-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; } .chart-head strong { display:block; font-size:17px; color:var(--ink); margin-bottom:4px; } .chart-head small { display:block; color:var(--muted); line-height:1.35; } .stack-bar { display:flex; width:100%; height:34px; overflow:hidden; border-radius:999px; background:#edf2f7; border:1px solid var(--line); box-shadow:inset 0 1px 2px rgba(20,33,61,.08); } .stack-bar span { display:block; min-width:0; transition:width .18s ease; } .stack-ok { background:linear-gradient(90deg,#16a34a,#0f8177); } .stack-danger { background:linear-gradient(90deg,#ef4444,#b91c1c); } .chart-legend { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; color:var(--muted); font-size:13px; } .chart-legend span { display:inline-flex; align-items:center; gap:6px; } .chart-legend i { width:10px; height:10px; border-radius:50%; display:inline-block; } .legend-ok { background:#16a34a; } .legend-danger { background:#dc2626; } .agent-bars { display:grid; gap:10px; } .agent-bar { display:grid; gap:5px; } .bar-line { display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); } .bar-line span { font-weight:800; color:var(--ink); overflow-wrap:anywhere; } .bar-line strong { color:var(--brand-2); } .bar-track { height:12px; border-radius:999px; background:#edf2f7; overflow:hidden; } .bar-track i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#0f8177,#0ea5e9); min-width:4px; transition:width .18s ease; } .productivity-table td strong { font-size:16px; } .productivity-table tr.is-muted { opacity:.38; } .portal-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; } .portal-card { border:1px solid var(--line); border-radius:8px; background:#fff; padding:16px; box-shadow:var(--shadow); margin-bottom:18px; overflow-x:auto; } .portal-card h3 { margin:0 0 12px; } .call-center-hero { display:grid; grid-template-columns:minmax(260px,.9fr) 1.1fr; gap:16px; margin-bottom:18px; align-items:stretch; } .secretary-hero { position:relative; overflow:hidden; border-radius:8px; border:1px solid #0f766e; background:linear-gradient(135deg,#0f766e 0%,#0b3f3a 100%); color:#fff; padding:20px; min-height:170px; box-shadow:0 16px 40px rgba(15,118,110,.22); } .secretary-hero::after { content:"24h"; position:absolute; right:18px; bottom:8px; font-size:56px; font-weight:900; color:rgba(255,255,255,.14); letter-spacing:0; } .secretary-hero span { display:inline-flex; align-items:center; border-radius:999px; background:rgba(255,255,255,.16); padding:6px 10px; font-size:12px; font-weight:900; text-transform:uppercase; margin-bottom:14px; } .secretary-hero strong { display:block; font-size:30px; line-height:1.05; margin-bottom:10px; } .secretary-hero p { margin:0; color:rgba(255,255,255,.84); line-height:1.45; } .call-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .call-summary .portal-kpi { margin:0; min-height:100%; } .secretary-row-audio audio { width:260px; max-width:100%; } .secretary-workflow-table { min-width:1080px; } .secretary-workflow-table td { vertical-align:top; } .secretary-workflow-table td > .muted { display:block; margin-top:5px; } .secretary-time-cell strong, .secretary-time-cell span { display:block; white-space:nowrap; } .secretary-workflow-row.status-pending > td:first-child { box-shadow:inset 3px 0 #f59e0b; } .secretary-workflow-row.status-observation > td:first-child { box-shadow:inset 3px 0 #2563eb; } .secretary-workflow-row.status-finalized > td:first-child { box-shadow:inset 3px 0 #16a34a; } .secretary-treatment-cell { min-width:480px; } .secretary-treatment-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px 12px; margin-bottom:8px; } .secretary-treatment-head small { min-width:0; overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; line-height:1.35; } .secretary-status { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 9px; font-size:11px; font-weight:900; white-space:nowrap; } .secretary-status::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; } .secretary-status.pending { background:#fef3c7; color:#92400e; } .secretary-status.observation { background:#dbeafe; color:#1d4ed8; } .secretary-status.finalized { background:#dcfce7; color:#166534; } .secretary-treatment-form { display:grid; grid-template-columns:minmax(140px,.65fr) minmax(220px,1.35fr) auto; gap:8px; align-items:center; } .secretary-treatment-form select, .secretary-treatment-form input { width:100%; min-width:0; min-height:40px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); padding:9px 10px; } .secretary-treatment-form input:focus, .secretary-treatment-form select:focus { border-color:var(--brand-2); outline:3px solid rgba(15,118,110,.12); } .secretary-treatment-form button { min-height:40px; } .secretary-audit { min-width:0; margin:0; } .secretary-audit summary { cursor:pointer; color:var(--brand-2); font-size:12px; font-weight:900; } .secretary-audit[open] { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:8px; } .secretary-audit ol { margin:9px 0 0; padding-left:20px; display:grid; gap:8px; } .secretary-audit li { color:var(--muted); font-size:12px; line-height:1.4; } .secretary-audit li strong, .secretary-audit li span { display:block; } .secretary-audit li strong { color:var(--ink); } .secretary-audit li p { margin:4px 0 0; white-space:normal; color:var(--ink); } .portal-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; } .archive-policy { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:14px 0 16px; } .archive-policy div { border:1px solid var(--line); border-radius:8px; background:#fbfcfd; padding:12px; min-height:96px; } .archive-policy strong { display:block; font-size:18px; margin:10px 0 4px; } .archive-policy small { color:var(--muted); } .status-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; } .status-tile { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px 14px 14px 54px; min-height:86px; box-shadow:var(--shadow); } .status-tile::before { content:""; position:absolute; left:14px; top:18px; width:28px; height:28px; border-radius:8px; background:#edf2f7; } .status-tile::after { content:""; position:absolute; left:23px; top:27px; width:10px; height:10px; border-radius:50%; background:#6b7280; } .status-tile strong { display:block; font-size:26px; line-height:1; margin-bottom:5px; } .status-tile span { display:block; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; } .status-tile.online { border-top:4px solid #16a34a; } .status-tile.online::before { background:#dcfce7; } .status-tile.online::after { background:#16a34a; box-shadow:0 0 0 5px rgba(22,163,74,.14); } .status-tile.busy { border-top:4px solid #2563eb; } .status-tile.busy::before { background:#dbeafe; } .status-tile.busy::after { background:#2563eb; box-shadow:0 0 0 5px rgba(37,99,235,.14); } .status-tile.paused { border-top:4px solid #f59e0b; } .status-tile.paused::before { background:#fef3c7; } .status-tile.paused::after { background:#f59e0b; box-shadow:0 0 0 5px rgba(245,158,11,.16); } .status-tile.offline { border-top:4px solid #dc2626; } .status-tile.offline::before { background:#fee2e2; } .status-tile.offline::after { background:#dc2626; box-shadow:0 0 0 5px rgba(220,38,38,.13); } .agent-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .agent-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; padding:12px; box-shadow:var(--shadow); min-height:0; } .agent-card-toggle { cursor:pointer; } .agent-card-toggle:not(.is-expanded) { min-height:0; } .agent-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:#94a3b8; } .agent-card.online::before { background:#16a34a; } .agent-card.busy::before { background:#2563eb; } .agent-card.paused::before { background:#f59e0b; } .agent-card.offline::before { background:#dc2626; } .agent-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:10px; } .agent-card-toggle:not(.is-expanded) .agent-card-head { margin-bottom:0; } .agent-control-note { margin:12px 0 0; padding:9px 10px; border:1px solid var(--line); border-radius:6px; color:var(--muted); font-size:11px; line-height:1.4; } .agent-card .agent-current-pause { display:inline-flex; align-items:center; align-self:flex-start; margin-top:3px; padding:3px 7px; border:1px solid #f2c76d; border-radius:999px; background:#fff6d8; color:#825000; font-size:10px; font-weight:900; } .agent-activity-report { border-top:4px solid #0fa58c; } .agent-activity-head { align-items:center; } .agent-activity-eyebrow { display:block; margin-bottom:5px; color:#0b8f7a; font-size:10px; font-weight:900; text-transform:uppercase; } .agent-activity-filters { display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(150px,.7fr) minmax(150px,.7fr) auto; gap:12px; align-items:end; margin:16px 0; padding:14px; border:1px solid #dbe5ea; border-radius:7px; background:#f7fafb; } .agent-activity-filters label { display:grid; gap:6px; margin:0; } .agent-activity-filters label > span { color:#607286; font-size:10px; font-weight:900; text-transform:uppercase; } .agent-activity-filters input, .agent-activity-filters select { width:100%; min-height:42px; background:#fff; } .agent-activity-filter-actions { display:flex; gap:8px; } .agent-activity-filter-actions .button, .agent-activity-filter-actions button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; margin:0; white-space:nowrap; } .agent-activity-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:16px; } .agent-activity-summary > div { min-width:0; padding:13px; border:1px solid #dce5ea; border-radius:7px; background:#fff; box-shadow:0 3px 9px rgba(15,23,42,.04); } .agent-activity-summary span, .agent-activity-summary small { display:block; color:#6a7b87; font-size:10px; line-height:1.3; } .agent-activity-summary span { font-weight:900; text-transform:uppercase; } .agent-activity-summary strong { display:block; margin:6px 0 4px; color:#102a43; font-size:23px; line-height:1; } .agent-activity-table-wrap { overflow:auto; border:1px solid #dce5ea; border-radius:7px; } .agent-activity-table { min-width:840px; margin:0; } .agent-activity-table tbody tr:hover { background:#f3faf8; } .agent-activity-table td strong, .agent-activity-table td small { display:block; } .agent-activity-table td small { margin-top:3px; color:var(--muted); font-size:10px; } .agent-activity-event { display:inline-flex; align-items:center; min-height:26px; padding:5px 8px; border-radius:999px; background:#edf2f6; color:#506475; font-size:10px; font-weight:900; white-space:nowrap; } .agent-activity-event.online, .agent-activity-event.unpause { background:#dcf8ed; color:#087568; } .agent-activity-event.pause { background:#fff1c7; color:#855300; } .agent-activity-event.offline { background:#fee7e7; color:#a22c2c; } .agent-activity-event.call { background:#e4f1ff; color:#145ca8; } .agent-activity-note { margin:12px 0 0; color:#6b7c87; font-size:11px; } .portal-theme-dark .agent-activity-filters, .portal-theme-dark .agent-activity-summary > div, .portal-theme-dark .agent-activity-table tr { border-color:#315061; background:#102631; } .portal-theme-dark .agent-activity-filters input, .portal-theme-dark .agent-activity-filters select { border-color:#3c5968; background:#0d202a; color:#edf7f8; } .portal-theme-dark .agent-activity-summary strong { color:#f1f8f9; } .portal-theme-dark .agent-activity-table tbody tr:hover { background:#16313d; } @media (max-width:900px) { .did-diagnostic-heading { display:grid; grid-template-columns:1fr; } .did-readonly-badge { justify-self:start; } .did-view-tabs { grid-template-columns:1fr; } .did-test-form { grid-template-columns:1fr; } .inbound-list-heading { display:grid; grid-template-columns:1fr; } .inbound-coverage { justify-items:start; } .inbound-filter { display:grid; grid-template-columns:1fr; align-items:stretch; } .inbound-filter div { min-width:0; } .inbound-count { justify-self:start; } .inbound-call { grid-template-columns:1fr 1fr; gap:10px; } .inbound-call > .badge { justify-self:start; } .did-test-form button { width:100%; } .did-journey { grid-template-columns:1fr; } .did-step { min-height:0; padding-left:54px; } .did-step-number { position:absolute; left:13px; top:14px; } .did-verdict { grid-template-columns:6px minmax(0,1fr); padding:14px; } .did-verdict strong { font-size:19px; } .asterisk-advanced > summary { align-items:flex-start; } } @media (max-width:900px) { .agent-activity-filters { grid-template-columns:1fr 1fr; } .agent-activity-filters > label:first-of-type { grid-column:1 / -1; } .agent-activity-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px) { .agent-activity-filters { grid-template-columns:1fr; padding:11px; } .agent-activity-filters > label:first-of-type { grid-column:auto; } .agent-activity-filter-actions { display:grid; grid-template-columns:1fr 1fr; } .agent-activity-summary { grid-template-columns:1fr 1fr; } .agent-activity-summary > div:last-child { grid-column:1 / -1; } .agent-activity-table-wrap { overflow:visible; border:0; } .agent-activity-table { display:block; min-width:0; } .agent-activity-table thead { display:none; } .agent-activity-table tbody, .agent-activity-table tr, .agent-activity-table td { display:block; width:100%; } .agent-activity-table tr { margin-bottom:10px; padding:11px; border:1px solid #dce5ea; border-radius:7px; background:#fff; } .agent-activity-table td { display:grid; grid-template-columns:105px minmax(0,1fr); gap:8px; padding:5px 0; border:0; } .agent-activity-table td::before { content:attr(data-label); color:#71818d; font-size:10px; font-weight:900; text-transform:uppercase; } .agent-activity-table td[colspan] { display:block; } } .agent-card-details { display:none; } .agent-card.is-expanded .agent-card-details { display:block; } .agent-id { display:flex; align-items:center; gap:8px; min-width:0; } .agent-icon { width:36px; height:36px; border-radius:8px; display:grid; place-items:center; font-size:10px; font-weight:900; letter-spacing:0; color:#fff; background:#64748b; flex:0 0 auto; } .agent-card.online .agent-icon { background:#16a34a; } .agent-card.busy .agent-icon { background:#2563eb; } .agent-card.paused .agent-icon { background:#f59e0b; color:#3b2600; } .agent-card.offline .agent-icon { background:#dc2626; } .agent-id strong { display:block; font-size:18px; line-height:1.1; overflow-wrap:anywhere; } .agent-id small { display:block; color:var(--muted); margin-top:2px; font-size:11px; line-height:1.25; } .agent-speaking { color:#1d4ed8 !important; font-weight:800; overflow-wrap:anywhere; } .agent-status { display:inline-flex; align-items:center; justify-content:center; gap:5px; border-radius:999px; padding:6px 8px; font-size:11px; font-weight:900; white-space:normal; text-align:center; max-width:128px; } .agent-status::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; } .agent-status.online { background:#dcfce7; color:#166534; } .agent-status.busy { background:#dbeafe; color:#1d4ed8; } .agent-status.paused { background:#fef3c7; color:#92400e; } .agent-status.offline { background:#fee2e2; color:#991b1b; } .agent-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .agent-meta div { border:1px solid var(--line); border-radius:8px; background:#f8fafc; padding:8px; min-height:52px; } .agent-meta span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; font-weight:800; margin-bottom:4px; } .agent-meta strong { display:block; font-size:12px; overflow-wrap:anywhere; line-height:1.3; } .agent-pause-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; margin:10px 0 0; width:100%; } .agent-pause-form button { min-height:38px; padding:9px 13px; } .agent-pause-reason { display:block; min-width:0; } .agent-pause-reason span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; font-weight:900; margin-bottom:4px; } .agent-pause-reason select { min-height:38px; border-radius:8px; padding:8px 9px; font-size:12px; font-weight:800; } .monitor-live-head { display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid #cbd5e1; border-radius:8px; padding:14px 16px; margin-bottom:16px; background:linear-gradient(135deg,#f8fff8 0%,#eef7f1 100%); } .monitor-live-head strong { display:block; font-size:18px; } .monitor-live-head small { color:var(--muted); } .live-dot { width:13px; height:13px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 7px rgba(22,163,74,.12); display:inline-block; margin-right:9px; vertical-align:-1px; } .monitor-alerts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px; } .monitor-alerts.without-recordings { grid-template-columns:repeat(2,minmax(0,1fr)); } .monitor-alert { border:1px solid var(--line); border-radius:8px; padding:12px; background:#fff; min-height:82px; } .monitor-alert strong { display:block; font-size:15px; margin-bottom:4px; } .monitor-alert.ok { border-color:#bbf7d0; background:#f0fdf4; } .monitor-alert.warn { border-color:#fde68a; background:#fffbeb; } .monitor-alert.danger { border-color:#fecaca; background:#fff5f5; } .monitor-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:18px; align-items:start; } .agents-operations-grid { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(480px,1.2fr); gap:18px; align-items:start; margin-top:18px; } .agents-operations-grid.without-recordings { grid-template-columns:1fr; } .monitor-zone { border:1px solid #cbd5e1; border-radius:8px; background:linear-gradient(180deg,#f8fafc 0%,#eef3f7 100%); padding:14px; box-shadow:var(--shadow); overflow:hidden; } .monitor-title { display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:7px; background:linear-gradient(135deg,#22742b 0%,#3a8f40 100%); color:#fff; padding:13px 14px; margin-bottom:14px; font-weight:900; font-size:18px; box-shadow:inset 0 -1px 0 rgba(255,255,255,.18); } .monitor-title.dark { background:linear-gradient(135deg,#374151 0%,#667085 100%); } .monitor-board { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; } .monitor-extension { border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px; min-height:158px; box-shadow:0 8px 20px rgba(20,33,61,.07); position:relative; overflow:hidden; } .monitor-extension::after { content:"SIP"; position:absolute; right:16px; bottom:10px; color:rgba(20,33,61,.08); font-size:30px; font-weight:900; letter-spacing:0; } .monitor-extension::before { content:""; position:absolute; right:22px; top:20px; width:44px; height:44px; border-radius:50%; background:#dbeafe; box-shadow:0 9px 0 rgba(20,33,61,.10), inset 0 -8px 0 rgba(20,33,61,.08); } .monitor-extension.online { background:linear-gradient(135deg,#e7fbe7 0%,#f7fff7 100%); border-color:#7fd178; } .monitor-extension.busy { background:linear-gradient(135deg,#e8f2ff 0%,#ffffff 100%); border-color:#93c5fd; } .monitor-extension.paused { background:linear-gradient(135deg,#fff7d6 0%,#ffffff 100%); border-color:#fbbf24; } .monitor-extension.offline { background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%); border-color:#e5e7eb; } .monitor-extension.online::before { background:#bbf7d0; } .monitor-extension.busy::before { background:#bfdbfe; } .monitor-extension.paused::before { background:#fde68a; } .monitor-extension.offline::before { background:#e5e7eb; } .monitor-extension strong { display:block; font-size:22px; margin-bottom:4px; line-height:1.05; overflow-wrap:anywhere; padding-right:58px; } .monitor-extension small { color:var(--muted); display:block; margin-bottom:10px; line-height:1.3; max-width:100%; overflow-wrap:anywhere; padding-right:58px; } .monitor-extension-foot { display:grid; grid-template-columns:1fr; gap:8px; margin-top:10px; padding-right:64px; } .monitor-extension-foot div { border:1px solid rgba(100,116,139,.18); border-radius:8px; background:rgba(255,255,255,.78); padding:8px 9px; min-width:0; } .monitor-extension-foot span { display:block; color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; margin-bottom:3px; } .monitor-extension-foot strong { display:block; font-size:13px; line-height:1.2; margin:0; overflow-wrap:anywhere; } .monitor-extension .inline-form { margin-top:10px; padding-right:64px; } .monitor-extension .inline-form button { width:100%; min-height:36px; padding:8px 10px; } .health-hero { display:grid; grid-template-columns:minmax(280px,.9fr) 1.1fr; gap:16px; margin-bottom:16px; } .health-main { position:relative; overflow:hidden; border-radius:8px; background:linear-gradient(135deg,#0f766e,#12355b); color:#fff; padding:22px; min-height:178px; box-shadow:0 18px 42px rgba(18,53,91,.18); } .health-main.danger { background:linear-gradient(135deg,#b91c1c,#12355b); } .health-main.warn { background:linear-gradient(135deg,#d97706,#12355b); } .health-main::after { content:"URA"; position:absolute; right:16px; bottom:0; font-size:62px; line-height:1; font-weight:900; color:rgba(255,255,255,.13); letter-spacing:0; } .health-main span { display:inline-flex; border-radius:999px; background:rgba(255,255,255,.16); padding:6px 10px; font-size:12px; font-weight:900; text-transform:uppercase; margin-bottom:14px; } .health-main strong { display:block; font-size:32px; line-height:1.05; margin-bottom:10px; overflow-wrap:anywhere; } .health-main p { margin:0; color:rgba(255,255,255,.88); line-height:1.45; max-width:90%; } .health-machine { grid-template-columns:repeat(4,minmax(0,1fr)); } .health-scoreboard { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .health-status { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:7px 10px; font-size:12px; font-weight:900; white-space:nowrap; } .health-status::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; } .health-status.ok { background:#dcfce7; color:#166534; } .health-status.warn { background:#fef3c7; color:#92400e; } .health-status.danger { background:#fee2e2; color:#991b1b; } .health-table td { vertical-align:top; } .health-table small { display:block; color:var(--muted); margin-top:4px; line-height:1.35; } .health-fix { color:var(--brand-2); font-weight:700; } .monitor-queue { border:1px solid #a7d8a4; border-radius:8px; background:#f2fff1; padding:12px; margin-bottom:14px; box-shadow:0 8px 20px rgba(20,33,61,.07); } .monitor-queue.warn { border-color:#fde68a; background:#fffbeb; } .monitor-queue.danger { border-color:#fecaca; background:#fff5f5; } .monitor-queue-head { display:flex; align-items:center; justify-content:space-between; gap:10px; border-radius:7px; background:#50ad63; color:#fff; padding:12px 14px; margin-bottom:10px; font-weight:900; font-size:17px; } .monitor-queue.warn .monitor-queue-head { background:#d97706; } .monitor-queue.danger .monitor-queue-head { background:#b91c1c; } .monitor-queue-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:10px 0; } .monitor-queue-stats div { border-radius:8px; background:#fff; padding:10px; text-align:center; } .monitor-queue-stats span { display:block; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; } .monitor-queue-stats strong { font-size:24px; } .monitor-recent { overflow-x:auto; } .monitor-recent table { min-width:0; } .monitor-recent th, .monitor-recent td { white-space:normal; } .listen-pill { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:7px 10px; min-height:34px; background:#31556b; color:#fff; font-size:12px; font-weight:900; } .listen-pill.disabled { background:#e5e7eb; color:#64748b; } .whatsapp-official-tab { background:#16a34a !important; color:#fff !important; border-color:#16a34a !important; box-shadow:0 8px 20px rgba(22,163,74,.16); } .wa-hero { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-bottom:18px; } .wa-main { position:relative; overflow:hidden; border-radius:8px; background:linear-gradient(135deg,#16a34a 0%,#075e54 100%); color:#fff; padding:22px; min-height:190px; box-shadow:0 18px 44px rgba(22,163,74,.22); } .wa-main::after { content:"WA"; position:absolute; right:18px; bottom:0; font-size:72px; line-height:.85; font-weight:900; color:rgba(255,255,255,.13); } .wa-main span { display:inline-flex; border-radius:999px; background:rgba(255,255,255,.18); padding:6px 10px; font-size:12px; font-weight:900; text-transform:uppercase; margin-bottom:14px; } .wa-main strong { display:block; font-size:34px; line-height:1.05; margin-bottom:8px; } .wa-main p { margin:0; color:rgba(255,255,255,.88); line-height:1.45; max-width:650px; } .wa-health { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .wa-health-card { border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px; box-shadow:var(--shadow); min-height:92px; } .wa-health-card span { display:block; color:var(--muted); font-size:12px; font-weight:900; text-transform:uppercase; margin-bottom:8px; } .wa-health-card strong { display:block; font-size:26px; line-height:1.05; } .wa-health-card.ok { border-top:4px solid #16a34a; } .wa-health-card.info { border-top:4px solid #0ea5e9; } .wa-health-card.warn { border-top:4px solid #f59e0b; } .wa-health-card.danger { border-top:4px solid #dc2626; } .wa-health-card.off { border-top:4px solid #64748b; } .wa-section { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; } .wa-timeline { display:grid; gap:10px; } .wa-event { border:1px solid var(--line); border-radius:8px; background:#fff; padding:12px; display:grid; grid-template-columns:150px 1fr auto; gap:12px; align-items:start; } .wa-event strong { display:block; margin-bottom:4px; } .wa-event small { color:var(--muted); } .wa-number-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .wa-number-card { border:1px solid var(--line); border-radius:8px; background:#fbfcfd; padding:12px; } .wa-number-card strong { display:block; font-size:16px; overflow-wrap:anywhere; } .queue-pill { display:inline-flex; gap:6px; align-items:center; border-radius:999px; padding:6px 9px; margin:3px; background:#eef8f6; color:var(--brand-2); font-size:12px; font-weight:800; } .bar-row { display:grid; grid-template-columns:140px 1fr 42px; gap:10px; align-items:center; margin:10px 0; } a.bar-row { color:var(--ink); text-decoration:none; border-radius:8px; padding:3px 4px; } a.bar-row:hover { background:#f8fafc; } .bar-track { height:12px; border-radius:999px; background:#edf2f7; overflow:hidden; } .bar-fill { height:100%; background:var(--brand); border-radius:999px; } .detail-board { border:1px solid var(--line); border-radius:8px; background:#fff; padding:16px; margin-bottom:18px; box-shadow:var(--shadow); } .detail-board-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; } .detail-board h3 { margin:0 0 6px; } .detail-mini { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; } .detail-mini div { border:1px solid var(--line); border-radius:8px; padding:12px; background:#fbfcfd; } .detail-mini span { display:block; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; } .detail-mini strong { display:block; font-size:24px; margin-top:5px; } .insight-hero { display:grid; grid-template-columns:1fr 1.2fr; gap:14px; margin-bottom:16px; } .insight-main { border-radius:8px; padding:18px; background:linear-gradient(135deg,#0f766e 0%,#123c69 100%); color:#fff; min-height:150px; position:relative; overflow:hidden; } .insight-main::after { content:"CALL"; position:absolute; right:14px; bottom:4px; font-size:54px; font-weight:900; color:rgba(255,255,255,.11); } .insight-main span { display:inline-flex; border-radius:999px; background:rgba(255,255,255,.16); padding:5px 9px; font-size:12px; font-weight:900; text-transform:uppercase; margin-bottom:12px; } .insight-main strong { display:block; font-size:32px; line-height:1.05; margin-bottom:8px; } .insight-main p { margin:0; color:rgba(255,255,255,.86); } .insight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .duration-badge { display:inline-flex; align-items:center; border-radius:999px; padding:6px 10px; font-weight:900; font-size:12px; white-space:nowrap; } .duration-badge.ok { background:#dcfce7; color:#166534; } .duration-badge.warn { background:#fef3c7; color:#92400e; } .duration-badge.danger { background:#fee2e2; color:#991b1b; } .duration-badge.info { background:#edf2f7; color:#44546a; } .sortable-table th { white-space:nowrap; } .sort-button { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:inherit; padding:0; min-height:0; font:inherit; font-weight:900; text-transform:uppercase; cursor:pointer; } .sort-button::after { content:"<>"; font-size:10px; color:#94a3b8; } .sort-button.active { color:var(--brand-2); } .sort-button.active::after { content:"v"; color:var(--brand); } .sort-button.active.asc::after { content:"^"; } .sorted-cell { background:#eef8f6 !important; box-shadow:inset 3px 0 0 rgba(15,118,110,.35); } tr.row-ok td { background:#f0fdf4; } tr.row-warn td { background:#fff7ed; } tr.row-danger td { background:#fff1f2; } tr.row-ok:hover td { background:#dcfce7; } tr.row-warn:hover td { background:#ffedd5; } tr.row-danger:hover td { background:#ffe4e6; } .status-chip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 9px; font-size:12px; font-weight:900; white-space:nowrap; } .status-chip::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; } .status-chip.ok { background:#dcfce7; color:#166534; } .status-chip.warn { background:#ffedd5; color:#9a3412; } .status-chip.danger { background:#ffe4e6; color:#9f1239; } .status-explain { display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.35; } .portal-login { max-width:420px; margin:70px auto; } .portal-login .panel { box-shadow:var(--shadow); } .flow-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } .flow-card { border:1px solid var(--line); border-radius:8px; padding:14px; background:#fff; } .flow-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .flow-key { width:34px; height:34px; border-radius:8px; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:800; flex:0 0 auto; } .flow-card h3 { margin:0; font-size:15px; line-height:1.2; } .flow-card p { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.4; } .flow-dest { margin-top:10px; display:inline-block; border:1px solid var(--line); border-radius:999px; padding:5px 9px; font-size:12px; font-weight:700; color:var(--brand-2); background:#eef8f6; } .flow-note { border-left:3px solid var(--brand); padding:10px 12px; background:#f7fbfa; color:var(--muted); font-size:13px; margin-top:12px; line-height:1.45; } .schedule-box { margin-top:18px; border:1px solid var(--line); border-radius:8px; padding:14px; background:#fbfcfd; } .schedule-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; } .schedule-head h3 { margin:0; font-size:16px; } .schedule-toggle { display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:700; } .checkline { display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:700; margin:12px 0; } .whatsapp-config { border-color:#b7e4dc; background:linear-gradient(180deg,#f7fffd 0%,#fbfcfd 100%); } .whatsapp-config h3::before { content:""; display:inline-block; width:10px; height:10px; border-radius:50%; background:#22c55e; margin-right:8px; vertical-align:1px; box-shadow:0 0 0 4px rgba(34,197,94,.12); } .whatsapp-status { display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:8px; padding:12px; margin:12px 0; background:#fff; } .whatsapp-status-dot { width:14px; height:14px; border-radius:50%; flex:0 0 auto; margin-top:3px; background:#94a3b8; box-shadow:0 0 0 5px rgba(148,163,184,.16); } .whatsapp-status strong { display:block; margin-bottom:3px; } .whatsapp-status p { margin:0; color:var(--muted); line-height:1.35; } .whatsapp-status.ok { border-color:#bbf7d0; background:#f0fdf4; } .whatsapp-status.ok .whatsapp-status-dot { background:#16a34a; box-shadow:0 0 0 5px rgba(22,163,74,.16); } .whatsapp-status.bad { border-color:#fecaca; background:#fff5f5; } .whatsapp-status.bad .whatsapp-status-dot { background:#dc2626; box-shadow:0 0 0 5px rgba(220,38,38,.14); } .whatsapp-status.off { border-color:#e2e8f0; background:#f8fafc; } .wapanel-hero { border:1px solid #b7e4dc; border-radius:12px; padding:16px; background:linear-gradient(135deg,#f3fffa,#ffffff 56%,#f3fbff); margin-bottom:16px; } .wapanel-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; } .wapanel-main { display:grid; gap:16px; } .wapanel-section { border:1px solid #cfe6df; border-radius:16px; padding:18px; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.05); } .wapanel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .wapanel-head h4 { margin:0 0 6px; font-size:20px; color:var(--brand-2); } .wapanel-head p { margin:0; color:var(--muted); line-height:1.45; max-width:760px; } .wapanel-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; } .wapanel-summary-grid.compact { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:14px; } .wapanel-summary-tile { border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff; min-width:0; } .wapanel-summary-tile small { display:block; color:var(--muted); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.03em; } .wapanel-summary-tile strong { display:block; margin:6px 0 4px; font-size:18px; line-height:1.25; color:var(--ink); } .wapanel-summary-tile span { display:block; color:var(--muted); font-size:13px; line-height:1.4; } .wapanel-summary-tile.ok { border-top:4px solid #16a34a; } .wapanel-summary-tile.warn { border-top:4px solid #f59e0b; } .wapanel-summary-tile.bad { border-top:4px solid #dc2626; } .wapanel-summary-tile.info, .wapanel-summary-tile.off { border-top:4px solid #0ea5e9; } .wapanel-current-step { display:grid; grid-template-columns:auto minmax(0,1.2fr) minmax(260px,.95fr); gap:14px; align-items:start; border:1px solid #b7e4dc; border-radius:16px; padding:16px; background:linear-gradient(135deg,#f6fffb,#ffffff); margin-bottom:14px; } .wapanel-current-step.is-pending { border-color:#f9d38d; background:linear-gradient(135deg,#fffaf0,#ffffff); } .wapanel-current-badge { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,#16a34a,#0f8177); color:#fff; font-size:22px; font-weight:900; box-shadow:0 12px 24px rgba(15,129,119,.18); } .wapanel-current-badge.is-pending { background:linear-gradient(135deg,#f59e0b,#b45309); box-shadow:0 12px 24px rgba(180,83,9,.20); } .wapanel-current-copy small, .wapanel-current-next small { display:block; color:var(--muted); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.03em; } .wapanel-current-copy strong, .wapanel-current-next strong { display:block; margin:5px 0 6px; font-size:18px; color:var(--ink); } .wapanel-current-copy p, .wapanel-current-next span { margin:0; color:var(--muted); line-height:1.45; font-size:13px; display:block; } .wapanel-current-next { display:grid; gap:8px; padding:12px; border-radius:12px; background:#f8fbff; border:1px solid #dbeafe; } .wapanel-actions-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-bottom:16px; } .wapanel-actions-grid button, .wapanel-actions-grid .template-action { width:100%; min-height:48px; border-radius:12px; font-size:15px; } .wapanel-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; } .wapanel-tree { position:relative; display:grid; gap:14px; margin-bottom:18px; } .wapanel-tree::before { content:""; position:absolute; left:20px; top:12px; bottom:12px; width:2px; background:linear-gradient(180deg,#b7e4dc,#dbeafe); } .wapanel-tree-step { position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; align-items:start; } .wapanel-tree-rail { position:relative; display:flex; justify-content:center; } .wapanel-tree-dot { position:relative; z-index:1; width:40px; height:40px; border-radius:14px; display:grid; place-items:center; font-weight:900; background:#e2e8f0; color:#475569; box-shadow:0 0 0 6px #fff; } .wapanel-tree-body { border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:#fbfcfd; box-shadow:0 8px 18px rgba(15,23,42,.04); } .wapanel-tree-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; } .wapanel-tree-head small { display:block; color:var(--muted); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.03em; } .wapanel-tree-head strong { display:block; margin-top:4px; font-size:22px; line-height:1.2; } .wapanel-tree-body p { margin:0; color:var(--muted); line-height:1.5; } .wapanel-tree-next { display:grid; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid #d9ebe6; } .wapanel-tree-next span { color:var(--ink); line-height:1.45; } .wapanel-tree-step.ok .wapanel-tree-dot { background:linear-gradient(135deg,#16a34a,#0f8177); color:#fff; } .wapanel-tree-step.ok .wapanel-tree-body { border-color:#bbf7d0; background:#f0fdf4; } .wapanel-tree-step.current .wapanel-tree-dot { background:linear-gradient(135deg,#0f8177,#0ea5e9); color:#fff; } .wapanel-tree-step.current .wapanel-tree-body { border-color:#8bd6ca; background:linear-gradient(135deg,#f3fffb,#f8fbff); box-shadow:0 0 0 3px rgba(15,129,119,.08); } .wapanel-tree-step.pending .wapanel-tree-dot { background:#fff3cd; color:#7a4d00; } .wapanel-tree-step.pending .wapanel-tree-body { border-color:#f9d38d; background:#fffaf0; } .wapanel-link-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:12px; } .wapanel-link-card { display:block; border:1px solid var(--line); border-radius:10px; padding:12px; background:#fbfcfd; color:var(--ink); } .wapanel-link-card strong { display:block; margin-bottom:5px; color:var(--brand-2); } .wapanel-link-card span { display:block; color:var(--muted); font-size:13px; line-height:1.4; } .wapanel-link-card:hover { border-color:#b7e4dc; background:#f3fffb; color:var(--ink); } .wapanel-check-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; margin-top:12px; } .wapanel-check-card { border:1px solid var(--line); border-radius:10px; padding:12px; background:#fbfcfd; } .wapanel-check-card strong { display:block; margin:8px 0 4px; } .wapanel-check-card small { display:block; color:var(--muted); line-height:1.4; } .wapanel-details { border:1px solid var(--line); border-radius:10px; padding:0 12px 12px; background:#fbfcfd; margin-top:12px; } .wapanel-details summary { cursor:pointer; padding:12px 0; font-weight:800; color:var(--ink); } .wapanel-filter-row { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px; } .wapanel-filter-row .template-action.active { background:#134e4a; border-color:#134e4a; } .wapanel-checkline-grid { display:grid; gap:8px; margin-top:4px; } .wapanel-note-list { display:grid; gap:8px; } .wapanel-note-list p { margin:0; } .wapanel-diagnostic-notes { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-bottom:14px; } .wapanel-diagnostic-notes div { border:1px solid var(--line); border-radius:12px; padding:12px; background:#fbfcfd; } .wapanel-diagnostic-notes strong { display:block; margin-bottom:5px; color:var(--ink); } .wapanel-diagnostic-notes span { display:block; color:var(--muted); line-height:1.4; font-size:13px; } .template-box { border:1px solid #b7e4dc; border-radius:8px; padding:14px; margin-top:12px; background:#ffffff; } .template-box h3 { margin:0 0 4px; } .template-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; border-radius:7px; padding:9px 13px; background:#0f766e; color:#fff; font-weight:800; border:1px solid #0f766e; box-shadow:0 8px 18px rgba(15,118,110,.16); } .template-action:hover { color:#fff; background:#0b5f59; } .template-choose { background:#e7f3f1; color:#0f5f58; border:1px solid #b7e4dc; border-radius:7px; padding:8px 10px; font-weight:800; cursor:pointer; } .template-choose:hover { background:#d8eeeb; } .schedule-grid { display:grid; grid-template-columns:repeat(7, minmax(140px, 1fr)); gap:10px; } .day-card { border:1px solid var(--line); border-radius:8px; padding:10px; background:#fff; } .day-title { display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:700; margin-bottom:8px; } .time-row { display:grid; grid-template-columns:1fr; gap:7px; } .time-row input { padding:8px; } .lunch-box { margin-top:9px; padding-top:9px; border-top:1px solid var(--line); } .lunch-toggle { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink); margin-bottom:7px; font-weight:700; } .diagram-wrap { min-width:900px; } .diagram-section { border:1px solid var(--line); border-radius:8px; padding:14px; margin-bottom:14px; background:#fbfcfd; } .diagram-title { margin:0 0 10px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.02em; font-weight:800; } .diagram-row { display:grid; grid-template-columns:repeat(4, minmax(180px, 1fr)); gap:14px; align-items:stretch; } .diagram-row.three { grid-template-columns:repeat(3, minmax(210px, 1fr)); } .diagram-node { position:relative; border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px; min-height:116px; } .diagram-node strong { display:block; font-size:15px; margin-bottom:7px; } .diagram-node span { display:block; color:var(--muted); font-size:13px; line-height:1.4; } .diagram-node.start { border-color:rgba(15,118,110,.35); background:#f2fbf9; } .diagram-node.warn { border-color:#ffd28a; background:#fffaf0; } .diagram-node.end { border-color:#bdd7ff; background:#f3f8ff; } .diagram-badge { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; border-radius:8px; background:var(--brand); color:#fff; font-weight:800; margin-bottom:8px; } .diagram-node .diagram-badge { display:inline-flex; color:#fff; } .diagram-split { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; } .diagram-options { display:grid; grid-template-columns:repeat(4, minmax(180px,1fr)); gap:14px; } .diagram-mini { display:inline-block; margin-top:8px; border-radius:999px; border:1px solid var(--line); padding:5px 9px; background:#eef8f6; color:var(--brand-2); font-weight:700; font-size:12px; } .diagram-node .diagram-mini { display:inline-block; color:var(--brand-2); } .queue-map { display:grid; grid-template-columns:repeat(5, minmax(150px,1fr)); gap:10px; margin:12px 0 16px; } .queue-map div { border:1px solid var(--line); border-radius:8px; padding:10px; background:#fff; } .queue-map strong { display:block; font-size:12px; color:var(--muted); text-transform:uppercase; margin-bottom:6px; } .queue-map span { display:block; font-weight:700; overflow-wrap:anywhere; } .queue-status { margin-top:7px; display:inline-block; border-radius:999px; padding:4px 8px; font-size:11px; font-weight:800; } .queue-ok { background:#e7f3f1; color:#0f5f58; } .queue-missing { background:#fee4e2; color:#981b13; } .queue-warning { background:#fff3cd; color:#7a4d00; border-radius:8px; padding:10px 12px; margin-bottom:14px; font-size:13px; } .log-tree { border:1px solid var(--line); border-radius:8px; background:#fff; padding:14px; } .log-tree ul { list-style:none; margin:0; padding-left:18px; border-left:1px solid var(--line); } .log-tree > ul { border-left:0; padding-left:0; } .log-tree li { margin:8px 0; } .tree-row { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#fbfcfd; } .tree-row strong { overflow-wrap:anywhere; } .tree-size { font-weight:800; color:var(--brand-2); white-space:nowrap; } .tree-note { display:block; margin-top:4px; color:var(--muted); font-size:12px; } .login { max-width:380px; margin:80px auto; } .muted { color:var(--muted); font-size:13px; } /* Camada visual premium: melhora a percepcao sem carregar bibliotecas externas. */ :root { --premium-shadow:0 18px 46px rgba(15,23,42,.08); --premium-soft-shadow:0 10px 26px rgba(15,23,42,.055); --premium-ring:0 0 0 3px rgba(15,118,110,.12); --surface-tint:#fbfdff; } body { background: linear-gradient(180deg,#f8fbfd 0,#eef4f7 260px,#eef2f5 100%), radial-gradient(circle at 12% 0%,rgba(15,118,110,.07),transparent 280px); font-size:15px; line-height:1.38; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } header { min-height:76px; background:rgba(255,255,255,.94); backdrop-filter:saturate(140%) blur(10px); box-shadow:0 1px 0 rgba(215,225,239,.8),0 12px 32px rgba(15,23,42,.06); } .brand-mark { border-radius:11px; background:linear-gradient(135deg,#0f8177,#0b5f59); box-shadow:0 10px 24px rgba(15,118,110,.20); } .logout, a.button, .button-link, button { border-radius:8px; transition:transform .14s ease, box-shadow .14s ease, filter .14s ease, border-color .14s ease, background .14s ease; } .logout:hover, a.button:hover, .button-link:hover, button:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(15,23,42,.10); } button:active, a.button:active, .button-link:active { transform:translateY(0); box-shadow:none; } nav { background:linear-gradient(180deg,#ffffff 0%,#f7fbfc 68%,#eef6f7 100%); box-shadow:inset -1px 0 0 rgba(215,225,239,.7); } .client { border-radius:10px; font-size:15px; transition:background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease; } .client:hover { transform:translateX(2px); box-shadow:0 8px 20px rgba(15,23,42,.06); } .client.active { background:linear-gradient(135deg,#ddf7f2,#eefbf8); box-shadow:inset 4px 0 0 #0f8177; } .client-group { border-radius:12px; box-shadow:0 10px 24px rgba(15,23,42,.04); } .client-sub a { border-radius:9px; transition:background .14s ease,color .14s ease,transform .14s ease; } .client-sub a:hover { transform:translateX(2px); } main { max-width:1280px; } .panel, .client-config-section, .detail-board, .ai-subpage, .ai-config-block, .flow-card, .diagnostic-card, .audio-mode-card, .finance-card, .wa-health-card, .monitor-panel, .productivity-panel, .usage-panel, .login .panel, .portal-login .panel { border-radius:12px; border-color:#d4e0ed; background:linear-gradient(180deg,#ffffff 0%,var(--surface-tint) 100%); box-shadow:var(--premium-soft-shadow); } .panel { box-shadow:var(--premium-shadow); } .panel > h2:first-child, .client-config-section > h3:first-child, .detail-board h3, .ai-subpage-head h4 { letter-spacing:0; } .panel > h2:first-child::after, .client-config-section > h3:first-child::after { content:""; display:block; width:46px; height:3px; border-radius:999px; background:linear-gradient(90deg,#0f8177,#0ea5e9); margin-top:8px; } input, select, textarea { border-radius:9px; border-color:#cfdbea; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); transition:border-color .14s ease, box-shadow .14s ease, background .14s ease; } input:focus, select:focus, textarea:focus { box-shadow:var(--premium-ring), inset 0 1px 0 rgba(255,255,255,.8); } .client-config-nav { border-radius:13px; top:92px; box-shadow:0 14px 32px rgba(15,23,42,.075); } .client-config-nav a, .portal-tabs a { border-radius:10px; } .client-config-nav a.active, .client-config-nav a:hover, .portal-tabs a.active { background:linear-gradient(135deg,#0f8177,#0a6c64); box-shadow:0 12px 24px rgba(15,118,110,.18); } .client-list { gap:14px; } .client-card { position:relative; overflow:hidden; border-radius:12px; background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:var(--premium-soft-shadow); transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .client-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#0f8177,#0ea5e9); } .client-card:hover { transform:translateY(-2px); border-color:#b7cde4; box-shadow:0 18px 40px rgba(15,23,42,.10); } .summary div, .detail-mini div, .setup-step, .finance-card, .ai-saved-summary > div, .ai-flow-summary-card, .audio-mode-card, .wa-health-card, .tree-row { border-radius:12px; box-shadow:0 8px 20px rgba(15,23,42,.045); } .summary div, .finance-card, .wa-health-card { border-top:4px solid #0f8177; } .summary div:nth-child(2n), .finance-card:nth-child(2n), .wa-health-card.info { border-top-color:#0ea5e9; } .summary div:nth-child(3n), .finance-card:nth-child(3n), .wa-health-card.warn { border-top-color:#f59e0b; } .summary strong, .finance-card strong, .wa-health-card strong, .detail-mini strong { letter-spacing:0; } .asterisk-watch-note { margin-top:10px; padding:10px 12px; border:1px solid rgba(15,118,110,.14); border-radius:10px; background:rgba(255,255,255,.72); color:#164e63; } .asterisk-watch-note strong { margin-right:6px; } table { border-collapse:separate; border-spacing:0; } th { background:linear-gradient(180deg,#f8fafc,#eef3f8); color:#34465d; } th:first-child { border-top-left-radius:10px; } th:last-child { border-top-right-radius:10px; } td { background:#fff; } tbody tr:not(.row-ok):not(.row-warn):not(.row-danger):nth-child(odd) td { background:#ffffff; } tbody tr:not(.row-ok):not(.row-warn):not(.row-danger):nth-child(even) td { background:#f2fbf8; } tr:hover td { background:#f6fafc; } tbody tr:not(.row-ok):not(.row-warn):not(.row-danger):hover td { background:#e9f7f3; } .table-scroll { border-radius:12px; box-shadow:0 8px 20px rgba(15,23,42,.04); } .badge, .status-chip, .duration-badge, .queue-pill, .flow-dest { box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); } .flash { border-radius:10px; border:1px solid #cfe9e4; box-shadow:0 10px 24px rgba(15,23,42,.05); } .flash.err { border-color:#fecaca; } .portal-hero, .call-center-hero, .finance-total-card, .insight-main, .wa-main, .ai-flow-summary-card.hero { border-radius:14px; box-shadow:0 20px 46px rgba(15,23,42,.13); } .finance-total-card, .insight-main, .ai-flow-summary-card.hero { background:linear-gradient(135deg,#0f8177 0%,#15547d 100%); } .whatsapp-official-tab { background:linear-gradient(135deg,#16a34a,#0f8177) !important; box-shadow:0 12px 28px rgba(22,163,74,.20) !important; } .audio-mode-card.active, .ai-subpage-tab.active, .ai-mode-card:has(input:checked), .ai-mode-detail.active { box-shadow:var(--premium-ring),0 18px 40px rgba(15,23,42,.08); } /* Ajuste final do modo noturno do portal: precisa vir depois da camada premium. */ .portal-theme-dark { --ink:#edf5ff; --muted:#b4c3d6; --line:#2b3b52; --brand:#24c7b7; --brand-2:#9debe3; background: radial-gradient(circle at 16% -8%,rgba(36,199,183,.18),transparent 330px), radial-gradient(circle at 86% 10%,rgba(14,165,233,.10),transparent 280px), linear-gradient(180deg,#08111f 0%,#0b1220 45%,#08101c 100%); } .portal-theme-dark nav, .portal-theme-dark nav.portal-tabs { background:transparent; box-shadow:none; } .portal-theme-dark .portal-main { color:var(--ink); } .portal-theme-dark .portal-hero, .portal-theme-dark .portal-nav-box, .portal-theme-dark .portal-card, .portal-theme-dark .panel, .portal-theme-dark .portal-kpi, .portal-theme-dark .usage-card, .portal-theme-dark .usage-status, .portal-theme-dark .usage-mini div, .portal-theme-dark .finance-card, .portal-theme-dark .detail-board, .portal-theme-dark .wa-health-card, .portal-theme-dark .audio-mode-card, .portal-theme-dark .monitor-panel, .portal-theme-dark .productivity-panel, .portal-theme-dark .ai-subpage, .portal-theme-dark .ai-config-block, .portal-theme-dark .flow-card, .portal-theme-dark .diagnostic-card, .portal-theme-dark .table-scroll { background:linear-gradient(180deg,#101b2e 0%,#0c1728 100%) !important; border-color:#2b3b52 !important; color:var(--ink); box-shadow:0 18px 44px rgba(0,0,0,.28); } .portal-theme-dark .portal-hero { background: linear-gradient(135deg,rgba(18,32,52,.98) 0%,rgba(8,54,58,.96) 100%) !important; } .portal-theme-dark .portal-nav-box { background:linear-gradient(180deg,#0f1b2d 0%,#0a1424 100%) !important; } .portal-theme-dark .portal-logo { background:#ffffff !important; border-color:#34465f !important; } .portal-theme-dark h1, .portal-theme-dark h2, .portal-theme-dark h3, .portal-theme-dark h4, .portal-theme-dark strong, .portal-theme-dark .portal-identity strong, .portal-theme-dark .portal-kpi strong, .portal-theme-dark .bar-row strong { color:var(--ink) !important; } .portal-theme-dark .muted, .portal-theme-dark small, .portal-theme-dark .portal-kpi span, .portal-theme-dark .portal-nav-head, .portal-theme-dark .bar-row span { color:var(--muted) !important; } .portal-theme-dark .portal-nav-head span:last-child, .portal-theme-dark .badge.sev-notice, .portal-theme-dark .queue-pill, .portal-theme-dark .flow-dest { background:rgba(36,199,183,.14) !important; color:#b9fff5 !important; border-color:rgba(36,199,183,.28) !important; } .portal-theme-dark .portal-tabs a { background:linear-gradient(180deg,#111d31,#0d1728) !important; color:#edf5ff !important; border-color:#30425d !important; box-shadow:0 10px 24px rgba(0,0,0,.24); } .portal-theme-dark .portal-tabs a:hover { background:linear-gradient(180deg,#17263d,#101d31) !important; border-color:#4b6587 !important; } .portal-theme-dark .portal-tabs a.active, .portal-theme-dark .portal-tabs a.whatsapp-official-tab.active { background:linear-gradient(135deg,#14b8a6,#08746c) !important; color:#ffffff !important; border-color:#18c7b7 !important; } .portal-theme-dark .portal-tabs a.whatsapp-official-tab { background:linear-gradient(180deg,#0d3b31,#092a24) !important; color:#c8fff0 !important; border-color:#19775e !important; } .portal-theme-dark .portal-theme-toggle, .portal-theme-dark .logout { background:#f8fafc !important; color:#0f172a !important; border-color:#f8fafc !important; } .portal-theme-dark table, .portal-theme-dark tbody, .portal-theme-dark tr { background:#0c1728; color:var(--ink); } .portal-theme-dark th { background:linear-gradient(180deg,#1b2a40,#142136) !important; color:#dfeaff !important; border-color:#2b3b52 !important; } .portal-theme-dark table td, .portal-theme-dark tbody tr:not(.row-ok):not(.row-warn):not(.row-danger):nth-child(odd) td { background:#101b2e !important; color:#edf5ff !important; border-color:#2b3b52 !important; } .portal-theme-dark tbody tr:not(.row-ok):not(.row-warn):not(.row-danger):nth-child(even) td { background:#0d2825 !important; color:#edf5ff !important; border-color:#2b3b52 !important; } .portal-theme-dark tbody tr:not(.row-ok):not(.row-warn):not(.row-danger):hover td { background:#163b36 !important; } .portal-theme-dark .bar-track { background:#26354b !important; } .portal-theme-dark .bar-fill, .portal-theme-dark .bar-track i { background:linear-gradient(90deg,#24c7b7,#38bdf8) !important; } .portal-theme-dark .status-chip, .portal-theme-dark .duration-badge, .portal-theme-dark .badge { box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } .portal-theme-dark input, .portal-theme-dark select, .portal-theme-dark textarea { background:#0b1424 !important; color:#edf5ff !important; border-color:#30425d !important; } .portal-theme-dark .monitor-live-head, .portal-theme-dark .monitor-zone, .portal-theme-dark .monitor-alert, .portal-theme-dark .monitor-extension, .portal-theme-dark .monitor-extension-foot div, .portal-theme-dark .monitor-queue, .portal-theme-dark .monitor-queue-stats div, .portal-theme-dark .status-tile, .portal-theme-dark .agent-card, .portal-theme-dark .agent-meta div, .portal-theme-dark .archive-policy div, .portal-theme-dark .productivity-awards div, .portal-theme-dark .productivity-chart-card, .portal-theme-dark .detail-mini div, .portal-theme-dark .wa-event, .portal-theme-dark .wa-number-card, .portal-theme-dark .flow-note, .portal-theme-dark .usage-note, .portal-theme-dark .diagram-section, .portal-theme-dark .diagram-node, .portal-theme-dark .queue-map div, .portal-theme-dark .schedule-box, .portal-theme-dark .day-card, .portal-theme-dark .template-box, .portal-theme-dark .whatsapp-status, .portal-theme-dark .tree-row, .portal-theme-dark .log-tree { background:linear-gradient(180deg,#111d31 0%,#0d1728 100%) !important; border-color:#2e4059 !important; color:#edf5ff !important; box-shadow:0 14px 34px rgba(0,0,0,.22); } .portal-theme-dark .monitor-live-head, .portal-theme-dark .usage-note, .portal-theme-dark .flow-note { border-left:4px solid #24c7b7 !important; } .portal-theme-dark .monitor-alert.ok, .portal-theme-dark .monitor-queue { background:linear-gradient(180deg,#0e2d28 0%,#0b211e 100%) !important; border-color:#1f8f7f !important; } .portal-theme-dark .monitor-alert.warn, .portal-theme-dark .monitor-queue.warn { background:linear-gradient(180deg,#2e2411 0%,#20190d 100%) !important; border-color:#b7791f !important; } .portal-theme-dark .monitor-alert.danger, .portal-theme-dark .monitor-queue.danger, .portal-theme-dark tr.row-danger td { background:linear-gradient(180deg,#35151d 0%,#251016 100%) !important; border-color:#9f273b !important; } .portal-theme-dark tr.row-ok td { background:#0e2d28 !important; color:#edf5ff !important; } .portal-theme-dark tr.row-warn td { background:#2e2411 !important; color:#fff7df !important; } .portal-theme-dark .monitor-extension.online, .portal-theme-dark .agent-card.online { background:linear-gradient(135deg,#0e3029 0%,#101b2e 100%) !important; border-color:#218f7e !important; } .portal-theme-dark .monitor-extension.busy, .portal-theme-dark .agent-card.busy { background:linear-gradient(135deg,#102846 0%,#101b2e 100%) !important; border-color:#3579c8 !important; } .portal-theme-dark .monitor-extension.paused, .portal-theme-dark .agent-card.paused { background:linear-gradient(135deg,#33270f 0%,#101b2e 100%) !important; border-color:#d18b12 !important; } .portal-theme-dark .monitor-extension.offline, .portal-theme-dark .agent-card.offline { background:linear-gradient(135deg,#251722 0%,#101b2e 100%) !important; border-color:#7f3244 !important; } .portal-theme-dark .monitor-extension::after { color:rgba(237,245,255,.08) !important; } .portal-theme-dark .monitor-extension-foot div, .portal-theme-dark .agent-meta div { background:rgba(11,20,36,.82) !important; } .portal-theme-dark .monitor-title { background:linear-gradient(135deg,#0f8d57,#146b5e) !important; color:#fff !important; } .portal-theme-dark .monitor-title.dark, .portal-theme-dark .monitor-queue-head { background:linear-gradient(135deg,#334155,#475569) !important; color:#fff !important; } .portal-theme-dark .monitor-queue.warn .monitor-queue-head { background:linear-gradient(135deg,#b45309,#92400e) !important; } .portal-theme-dark .monitor-queue.danger .monitor-queue-head { background:linear-gradient(135deg,#b91c1c,#7f1d1d) !important; } .portal-theme-dark .status-tile::before, .portal-theme-dark .monitor-extension::before { filter:saturate(1.15) brightness(.85); } .portal-theme-dark .status-tile.online::before { background:#123f32 !important; } .portal-theme-dark .status-tile.busy::before { background:#14345e !important; } .portal-theme-dark .status-tile.paused::before { background:#433112 !important; } .portal-theme-dark .status-tile.offline::before { background:#3f1721 !important; } .portal-theme-dark .agent-status.online, .portal-theme-dark .status-chip.ok, .portal-theme-dark .duration-badge.ok, .portal-theme-dark .health-status.ok { background:#0e3b30 !important; color:#9ff3c7 !important; } .portal-theme-dark .agent-status.busy { background:#102f5f !important; color:#bfdbfe !important; } .portal-theme-dark .agent-status.paused, .portal-theme-dark .status-chip.warn, .portal-theme-dark .duration-badge.warn, .portal-theme-dark .health-status.warn { background:#3b2b0e !important; color:#fde68a !important; } .portal-theme-dark .agent-status.offline, .portal-theme-dark .status-chip.danger, .portal-theme-dark .duration-badge.danger, .portal-theme-dark .health-status.danger { background:#3f1721 !important; color:#fecaca !important; } .portal-theme-dark .duration-badge.info, .portal-theme-dark .badge.sev-info, .portal-theme-dark .listen-pill.disabled { background:#26354b !important; color:#d8e6f5 !important; } .portal-theme-dark .finance-main, .portal-theme-dark .productivity-main, .portal-theme-dark .secretary-hero, .portal-theme-dark .insight-main, .portal-theme-dark .usage-main, .portal-theme-dark .wa-main { background:linear-gradient(135deg,#08746c 0%,#123c69 100%) !important; color:#fff !important; box-shadow:0 22px 48px rgba(0,0,0,.30); } .portal-theme-dark .finance-main p, .portal-theme-dark .productivity-main p, .portal-theme-dark .secretary-hero p, .portal-theme-dark .insight-main p, .portal-theme-dark .usage-main p, .portal-theme-dark .wa-main p { color:rgba(255,255,255,.86) !important; } .portal-theme-dark .stack-bar { background:#26354b !important; border-color:#30425d !important; } .portal-theme-dark .chart-head strong, .portal-theme-dark .bar-line span, .portal-theme-dark .finance-product-name, .portal-theme-dark .productivity-table td strong, .portal-theme-dark .agent-id strong, .portal-theme-dark .monitor-extension strong, .portal-theme-dark .monitor-extension-foot strong, .portal-theme-dark .monitor-alert strong, .portal-theme-dark .usage-status strong, .portal-theme-dark .usage-mini strong, .portal-theme-dark .detail-mini strong, .portal-theme-dark .wa-health-card strong, .portal-theme-dark .wa-event strong, .portal-theme-dark .wa-number-card strong, .portal-theme-dark .diagram-node strong, .portal-theme-dark .queue-map span { color:#edf5ff !important; } .portal-theme-dark .monitor-extension small, .portal-theme-dark .monitor-extension-foot span, .portal-theme-dark .agent-id small, .portal-theme-dark .agent-meta span, .portal-theme-dark .chart-head small, .portal-theme-dark .chart-legend, .portal-theme-dark .bar-line, .portal-theme-dark .archive-policy small, .portal-theme-dark .usage-status small, .portal-theme-dark .usage-mini span, .portal-theme-dark .detail-mini span, .portal-theme-dark .wa-health-card span, .portal-theme-dark .wa-event small, .portal-theme-dark .diagram-node span, .portal-theme-dark .queue-map strong, .portal-theme-dark .status-explain { color:#b4c3d6 !important; } .portal-theme-dark .sorted-cell { background:#143b36 !important; box-shadow:inset 3px 0 0 rgba(36,199,183,.55) !important; } .portal-theme-dark a.bar-row:hover { background:#15243b !important; } .portal-theme-dark .template-choose { background:#123b36 !important; color:#b9fff5 !important; border-color:#1f8f7f !important; } .portal-theme-dark .flash { background:#10263c !important; color:#d8e6f5 !important; border-color:#30425d !important; } .portal-theme-dark .flash.err { background:#3f1721 !important; color:#fecaca !important; border-color:#9f273b !important; } /* Requinte do modo noturno do portal: contraste melhor sem mudar a estrutura. */ .portal-theme-dark { --ink:#f4f8ff; --muted:#c3cee0; --line:#35465e; --brand:#2dd4bf; --brand-2:#b8fff6; background: radial-gradient(circle at 18% -12%,rgba(45,212,191,.16),transparent 340px), radial-gradient(circle at 92% 14%,rgba(56,189,248,.10),transparent 300px), linear-gradient(180deg,#07111f 0%,#0a1322 52%,#07101c 100%) !important; } .portal-theme-dark .portal-main { max-width:1220px; } .portal-theme-dark .portal-nav-box { background:linear-gradient(180deg,rgba(18,31,52,.98),rgba(10,20,36,.98)) !important; border-color:#31435d !important; box-shadow:0 18px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04); } .portal-theme-dark .portal-nav-head { color:#d3ddec !important; } .portal-theme-dark .portal-tabs a { background:linear-gradient(180deg,#18263d,#111c30) !important; color:#f4f8ff !important; border-color:#40536f !important; box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04); } .portal-theme-dark .portal-tabs a:hover { background:linear-gradient(180deg,#22344f,#162640) !important; border-color:#5c7599 !important; } .portal-theme-dark .portal-tabs a.active, .portal-theme-dark .portal-tabs a.whatsapp-official-tab.active { background:linear-gradient(135deg,#0f9f91,#08746c) !important; border-color:#38e0d0 !important; box-shadow:0 14px 30px rgba(45,212,191,.20), inset 0 1px 0 rgba(255,255,255,.14); } .portal-theme-dark .portal-tabs a.active::after { background:#7ff7e9 !important; opacity:.95; } .portal-theme-dark .portal-card, .portal-theme-dark .access-group-card { background:linear-gradient(180deg,#132138 0%,#0f1b2f 100%) !important; border-color:#35465e !important; box-shadow:0 18px 44px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.035); } .portal-theme-dark .access-group-card:nth-child(even) { background:linear-gradient(180deg,#122438 0%,#0d1b2f 100%) !important; } .portal-theme-dark .access-group-identity label, .portal-theme-dark label { color:#d7e2f1 !important; } .portal-theme-dark input, .portal-theme-dark select, .portal-theme-dark textarea { background:#f8fbff !important; color:#0f172a !important; border-color:#7e8ea5 !important; box-shadow:0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(15,23,42,.04) !important; } .portal-theme-dark input::placeholder, .portal-theme-dark textarea::placeholder { color:#607089 !important; opacity:1; } .portal-theme-dark input:focus, .portal-theme-dark select:focus, .portal-theme-dark textarea:focus { border-color:#2dd4bf !important; box-shadow:0 0 0 3px rgba(45,212,191,.22), 0 1px 0 rgba(255,255,255,.8) !important; } .portal-theme-dark input[readonly], .portal-theme-dark textarea[readonly] { background:#eaf0f8 !important; color:#334155 !important; } .portal-theme-dark input[type=checkbox] { accent-color:#14b8a6; box-shadow:none !important; } .portal-theme-dark .access-group-count { background:linear-gradient(180deg,#172a43,#102039) !important; border-color:#40536f !important; } .portal-theme-dark .access-group-count strong { color:#e9fefb !important; } .portal-theme-dark .access-permission-card { background:linear-gradient(180deg,#182842,#122039) !important; border-color:#40536f !important; color:#f4f8ff !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035); } .portal-theme-dark .access-permission-card:hover { background:linear-gradient(180deg,#203452,#152843) !important; border-color:#6b83a5 !important; box-shadow:0 10px 22px rgba(0,0,0,.22); } .portal-theme-dark .access-permission-card.is-enabled { background:linear-gradient(180deg,#103c38,#10263d) !important; border-color:#36d6c7 !important; box-shadow:0 0 0 1px rgba(45,212,191,.22), 0 12px 24px rgba(0,0,0,.20); } .portal-theme-dark .access-permission-card strong { color:#f5fbff !important; } .portal-theme-dark .access-permission-card small { color:#cfdae8 !important; } .portal-theme-dark .checkline { color:#e3edf9 !important; } .portal-theme-dark .access-groups-savebar { background:rgba(13,27,47,.94) !important; border-color:#40536f !important; box-shadow:0 -12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter:blur(10px); } .portal-theme-dark .access-groups-savebar span { color:#c3cee0 !important; } .portal-theme-dark button, .portal-theme-dark .button, .portal-theme-dark a.button { background:linear-gradient(135deg,#0f9f91,#0a746b) !important; color:#fff !important; box-shadow:0 12px 26px rgba(45,212,191,.16); } .portal-theme-dark .portal-theme-toggle, .portal-theme-dark .logout { background:#f8fbff !important; color:#132033 !important; border-color:#d8e2ef !important; box-shadow:0 10px 22px rgba(0,0,0,.18); } .portal-theme-dark .muted, .portal-theme-dark small, .portal-theme-dark .portal-kpi span, .portal-theme-dark .bar-row span { color:#c3cee0 !important; } .portal-theme-dark .portal-kpi, .portal-theme-dark .diagnostic-card, .portal-theme-dark .productivity-awards div { background:linear-gradient(180deg,#14233a,#0f1b2f) !important; border-color:#35465e !important; } /* Portal cliente premium: elegancia executiva, contraste limpo e leitura forte. */ .portal-shell { background: radial-gradient(circle at 0% 0%,rgba(15,118,110,.08),transparent 26rem), radial-gradient(circle at 100% 0%,rgba(150,118,63,.09),transparent 24rem), linear-gradient(180deg,#e8eef1 0%,#f5f7f8 22%,#edf2f4 100%); } .portal-main { max-width:1280px; padding-top:24px; padding-bottom:36px; } .portal-shell { font-family:Inter, Manrope, "Segoe UI", Arial, sans-serif; background: radial-gradient(circle at 12% 0%,rgba(16,185,129,.10),transparent 25rem), radial-gradient(circle at 96% 8%,rgba(59,130,246,.10),transparent 24rem), linear-gradient(180deg,#f3f7fb 0%,#eef4f8 100%); } .portal-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:stretch; gap:24px; border:1px solid #e1e9ef; border-radius:18px; padding:24px 26px; background: radial-gradient(circle at 78% 18%,rgba(124,58,237,.10),transparent 17rem), radial-gradient(circle at 26% 10%,rgba(16,185,129,.11),transparent 20rem), linear-gradient(135deg,#ffffff 0%,#fbfdff 52%,#f2f7fb 100%); box-shadow:0 18px 40px rgba(30,41,59,.07), 0 1px 0 rgba(255,255,255,.92) inset; } .portal-hero::before { content:""; position:absolute; inset:0 auto 0 0; width:7px; background:linear-gradient(180deg,#122b35 0%,#0f766e 54%,#b99754 100%); } .portal-hero::after { content:"AI"; position:absolute; inset:auto 360px 22px auto; display:grid; place-items:center; width:118px; height:88px; border:1px solid rgba(15,118,110,.12); border-radius:28px; background: linear-gradient(135deg,rgba(255,255,255,.68),rgba(255,255,255,.22)), radial-gradient(circle at 32% 38%,rgba(16,185,129,.22),transparent 2rem); color:rgba(15,118,110,.18); font-size:42px; font-weight:950; letter-spacing:0; pointer-events:none; } .portal-identity { gap:22px; align-items:flex-start; } .portal-hero-body { position:relative; z-index:1; display:flex; flex-direction:column; min-width:0; gap:18px; } .portal-copy { display:flex; flex-direction:column; gap:8px; min-width:0; } .portal-eyebrow { display:inline-flex; align-items:center; width:max-content; min-height:30px; padding:0 12px; border-radius:999px; background:linear-gradient(180deg,#faf8f2 0%,#f0ece0 100%); border:1px solid #e2d8bf; color:#786646; font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; } .portal-logo { width:190px; max-width:34vw; max-height:96px; border-radius:16px; padding:12px; border:1px solid #e0e8ee; background:linear-gradient(180deg,#ffffff,#f8fafb); box-shadow:0 14px 28px rgba(15,23,42,.06); } .portal-identity h2, .portal-identity strong { letter-spacing:-.03em; } .portal-identity strong { font-size:30px; line-height:1.02; color:#112a35; margin-bottom:10px; max-width:20ch; } .portal-identity .muted { max-width:58ch; font-size:14px; line-height:1.6; color:#5f727b; } .portal-plan-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; max-width:760px; padding-top:2px; } .portal-plan-head span { color:#687b83; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } .portal-plan-head strong { color:#0f766e; font-size:15px; font-weight:900; line-height:1.2; text-align:right; } .portal-premium-mark { display:inline-flex; align-items:center; min-height:24px; margin-right:8px; padding:4px 9px; border-radius:999px; background:linear-gradient(135deg,#7c3aed,#13b981); color:#fff; font-size:11px; font-weight:900; letter-spacing:0; text-transform:none; vertical-align:middle; box-shadow:0 10px 22px rgba(124,58,237,.18); } .portal-user-greeting { position:relative; z-index:1; display:flex; align-items:center; gap:14px; width:100%; padding:16px; border:1px solid #e0e9ee; border-radius:16px; background:rgba(255,255,255,.82); box-shadow:0 12px 28px rgba(15,23,42,.05); } .portal-user-avatar { display:grid; place-items:center; width:62px; height:62px; flex:0 0 62px; overflow:hidden; border:3px solid #fff; border-radius:16px; background:linear-gradient(135deg,#0f766e,#123442); color:#fff; font-size:24px; font-weight:900; box-shadow:0 12px 22px rgba(15,23,42,.12); } .portal-user-avatar img { width:100%; height:100%; object-fit:cover; } .portal-user-greeting > div:last-child { display:flex; min-width:0; flex-direction:column; gap:3px; } .portal-user-greeting span { color:#0f766e; font-size:12px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; } .portal-user-greeting strong { color:#102b35; font-size:16px; line-height:1.15; letter-spacing:0; margin:0; max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .portal-user-greeting small { color:#657880; font-size:12px; line-height:1.35; } .portal-user-greeting .portal-user-extension { display:inline-flex; align-items:center; align-self:flex-start; gap:6px; margin-top:3px; padding:4px 7px; border:1px solid #d8e2e7; border-radius:999px; background:#f5f8fa; color:#637580; font-size:10px; font-weight:800; } .portal-user-greeting .portal-user-extension::before { content:""; width:6px; height:6px; border-radius:50%; background:#94a3b8; } .portal-user-greeting .portal-user-extension.is-linked { border-color:#9edfcf; background:#eafaf5; color:#087568; } .portal-user-greeting .portal-user-extension.is-linked::before { background:#10a37f; } .portal-ura-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:760px; } .portal-ura-pill { position:relative; min-height:96px; padding:17px 16px; border:1px solid #d9e3e8; border-radius:16px; background:rgba(255,255,255,.76); box-shadow:0 12px 26px rgba(15,23,42,.045), inset 0 1px 0 rgba(255,255,255,.82); } .portal-ura-pill small { display:block; margin-bottom:8px; color:#75868c; font-size:10px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; } .portal-ura-pill span { display:block; color:#16313b; font-size:16px; font-weight:900; line-height:1.12; } .portal-ura-pill.is-active { border-color:#0f766e; background:linear-gradient(135deg,#0f766e 0%,#123442 100%); transform:translateY(-2px); box-shadow:0 20px 38px rgba(15,118,110,.24), inset 0 1px 0 rgba(255,255,255,.12); } .portal-ura-pill.is-active::after { content:""; position:absolute; inset:12px 12px auto auto; width:10px; height:10px; border-radius:999px; background:#34d399; box-shadow:0 0 0 5px rgba(52,211,153,.18); } .portal-ura-pill.is-active small, .portal-ura-pill.is-active span { color:#f6fffd; } .portal-did-strip { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; max-width:760px; min-height:66px; padding:11px 13px; border:1px solid #cfe1e5; border-radius:8px; background:rgba(255,255,255,.84); box-shadow:0 8px 20px rgba(15,23,42,.045); } .portal-did-copy { display:flex; flex:0 0 auto; flex-direction:column; gap:3px; } .portal-did-copy span { color:#16313b; font-size:12px; font-weight:900; } .portal-did-copy small { color:#687d87; font-size:10px; line-height:1.3; } .portal-did-list { display:flex; align-items:stretch; justify-content:flex-end; flex-wrap:wrap; gap:7px; min-width:0; } .portal-did-list a { display:flex; align-items:center; gap:8px; min-height:40px; padding:7px 10px; border:1px solid #a8dcd2; border-radius:7px; background:#eaf9f5; color:#075f58; text-decoration:none; } .portal-did-list a:hover { border-color:#0fa58c; background:#ddf6ef; } .portal-did-list a small { color:#258377; font-size:9px; font-weight:900; text-transform:uppercase; } .portal-did-list a strong { color:#123e43; font-size:13px; font-weight:900; letter-spacing:0; white-space:nowrap; } .portal-did-empty { display:flex; align-items:center; min-height:40px; padding:7px 11px; border:1px dashed #c6d5dc; border-radius:7px; color:#6c7f89; font-size:11px; font-weight:800; } .portal-did-strip-classic { display:none; } .portal-forwarding-trigger { min-height:38px; padding:8px 13px; border:1px solid #9bd7cc; border-radius:999px; background:#eaf9f5; color:#075f58; cursor:pointer; font-size:11px; font-weight:900; } .portal-forwarding-trigger:hover { border-color:#0fa58c; background:#ddf6ef; } .portal-forwarding-trigger:focus-visible { outline:3px solid rgba(15,165,140,.28); outline-offset:2px; } .portal-forwarding-trigger-classic { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .portal-forwarding-dialog { width:min(680px,calc(100vw - 28px)); max-height:calc(100vh - 28px); padding:0 28px 24px; border:0; border-radius:18px; background:#fff; color:#16313b; box-shadow:0 28px 80px rgba(8,24,33,.3); } .portal-forwarding-dialog::backdrop { background:rgba(8,24,33,.66); backdrop-filter:blur(4px); } .portal-forwarding-dialog > form { position:absolute; z-index:2; top:14px; right:14px; margin:0; } .portal-forwarding-dialog > form button { min-width:36px; height:36px; padding:0 10px; border:1px solid #d8e3e7; border-radius:999px; background:#f5f8f9; color:#38515f; cursor:pointer; font-weight:800; } .portal-forwarding-card { position:relative; overflow:auto; max-height:calc(100vh - 144px); padding-top:28px; background:#fff; } .portal-forwarding-card h2 { margin:6px 72px 8px 0; color:#123442; font-size:26px; } .portal-forwarding-card > p { margin:0 0 14px; color:#5f7580; line-height:1.55; } .portal-forwarding-card > p strong { display:block; padding:11px 13px; border-left:4px solid #0fa58c; background:#eefaf7; color:#124b49; font-size:12px; } .portal-forwarding-step { margin-top:18px; } .portal-forwarding-step p { margin:0 0 8px; color:#526b77; font-size:11px; } .portal-forwarding-step > span, .portal-forwarding-step > select { width:100%; padding:11px 13px; border:1px solid #b9ddd6; border-radius:9px; background:#f0faf7; color:#123e43; } .portal-forwarding-step > span { display:block; font-size:16px; font-weight:900; } .portal-forwarding-operators { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:18px; } .portal-forwarding-operators button { min-height:44px; border:1px solid #cbd9de; border-radius:9px; background:#fff; color:#39525f; cursor:pointer; font-weight:900; } .portal-forwarding-operators button[aria-pressed="true"] { border-color:#0f8f7b; background:#0f766e; color:#fff; } .portal-forwarding-code-box { display:flex; gap:8px; margin-top:14px; } .portal-forwarding-code-box input { min-width:0; flex:1; padding:11px 12px; border:1px solid #b9cbd2; border-radius:8px; background:#f8fafb; color:#0f3650; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:18px; font-weight:900; } .portal-forwarding-code-box button { padding:9px 12px; border:0; border-radius:8px; background:#0f766e; color:#fff; cursor:pointer; font-weight:900; } .portal-forwarding-code-box button:disabled { opacity:.45; cursor:not-allowed; } .portal-forwarding-card > ol { margin:10px 0 0; padding-left:20px; color:#607681; font-size:11px; line-height:1.7; } .portal-forwarding-card > ol li { padding-left:3px; } .portal-forwarding-stop { margin-top:20px; padding:14px; border:1px solid #f0c9a6; border-radius:10px; background:#fff7ed; } .portal-forwarding-stop h3 { margin:0; color:#b45309; font-size:10px; text-transform:uppercase; } .portal-forwarding-stop p { margin:3px 0 0; color:#7c2d12; font-size:12px; } .portal-forwarding-unavailable { margin-top:18px; padding:14px; border:1px dashed #c7d6dc; border-radius:10px; background:#f6f8f9; color:#526b77; } .portal-forwarding-copy-status { display:block; min-height:17px; margin-top:9px; color:#526b77; font-size:11px; } .portal-forwarding-video { display:inline-flex; gap:5px; margin-top:4px; color:#087568; font-size:12px; font-weight:900; } .portal-forwarding-note { margin:9px 0 0; color:#758892; line-height:1.45; } .portal-theme-dark .portal-forwarding-dialog, .portal-theme-dark .portal-forwarding-card { background:#142832; color:#edf6f8; } .portal-theme-dark .portal-forwarding-card h2 { color:#f4fbfc; } .portal-theme-dark .portal-forwarding-card > p, .portal-theme-dark .portal-forwarding-step p, .portal-theme-dark .portal-forwarding-note { color:#afc2c9; } .portal-theme-dark .portal-forwarding-card > p strong { background:#123b35; color:#c9f7ef; } .portal-theme-dark .portal-forwarding-step > span, .portal-theme-dark .portal-forwarding-step > select, .portal-theme-dark .portal-forwarding-code-box input, .portal-theme-dark .portal-forwarding-unavailable { border-color:#3b5662; background:#0d1d25; color:#e4eff2; } .portal-theme-dark .portal-forwarding-operators button { border-color:#3b5662; background:#0d1d25; color:#d6e3e7; } .portal-theme-dark .portal-forwarding-operators button[aria-pressed="true"] { border-color:#5eead4; background:#0f766e; color:#fff; } .portal-theme-dark .portal-forwarding-stop { border-color:#80562f; background:#342719; } .portal-theme-dark .portal-forwarding-stop h3, .portal-theme-dark .portal-forwarding-stop p { color:#f3c786; } .portal-theme-dark .portal-forwarding-video, .portal-theme-dark .portal-forwarding-copy-status { color:#79d9ca; } @media (max-width:700px) { .portal-forwarding-dialog { width:calc(100vw - 20px); max-height:calc(100vh - 20px); padding:0 16px 18px; } .portal-forwarding-card { max-height:calc(100vh - 132px); padding-top:22px; } .portal-forwarding-card h2 { font-size:22px; } .portal-forwarding-code-box { flex-direction:column; align-items:stretch; } .portal-forwarding-code-box input { width:100%; font-size:15px; } .portal-forwarding-code-box button { width:100%; min-height:42px; } .portal-forwarding-stop { display:block; } } .portal-hero-side { position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; align-self:stretch; } .portal-status-board { position:relative; overflow:hidden; flex:1; padding:20px 20px 18px; border:1px solid #d9e0d7; border-radius:16px; background: linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(247,248,246,.98) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.94); } .portal-status-board::before { content:""; position:absolute; inset:auto 0 0 0; height:4px; background:linear-gradient(90deg,#0f766e 0%,#b99754 100%); } .portal-status-board::after { content:""; position:absolute; inset:14px 14px auto auto; width:10px; height:10px; border-radius:999px; background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.10); } .portal-status-label { display:block; margin-bottom:10px; color:#8b7244; font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; } .portal-status-board strong { display:block; color:#132c36; font-size:22px; line-height:1.1; letter-spacing:-.03em; } .portal-status-board small { display:block; margin-top:8px; color:#637780; font-size:13px; line-height:1.55; } .portal-hero .actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:none; margin-left:0; } .portal-hero .badge, .portal-theme-toggle, .logout { justify-content:center; min-height:40px; border-radius:999px; padding:10px 14px; font-weight:800; box-shadow:0 10px 22px rgba(15,23,42,.05); backdrop-filter:blur(8px); } .portal-hero .badge.sev-info { background:linear-gradient(180deg,#ffffff,#f6f8fa); border:1px solid #d6dde3; color:#17313a; } .portal-hero .badge.sev-notice { background:linear-gradient(180deg,#faf7ee,#f5ecd4); border:1px solid #e5d4a6; color:#755d2a; } .portal-theme-toggle { background:linear-gradient(135deg,#112b35,#1d4652); border:1px solid #112b35; color:#f8fcfd; } .logout { background:linear-gradient(180deg,#ffffff,#f5f7f9); border:1px solid #d5dde3; } .portal-nav-box { position:sticky; top:84px; z-index:9; border:1px solid #e2eaf0; border-radius:16px; padding:12px; background:rgba(255,255,255,.96); backdrop-filter:blur(16px) saturate(140%); box-shadow:0 14px 32px rgba(30,41,59,.055); } .portal-nav-head { padding:2px 2px 12px; font-size:11px; letter-spacing:.14em; color:#58707b; } .portal-nav-head span:last-child { padding:7px 12px; border-radius:999px; background:linear-gradient(180deg,#f8f5ee,#f0e9db); border:1px solid #e1d7c0; color:#78633b; box-shadow:none; } .portal-tabs { gap:8px; } .portal-tabs a { position:relative; gap:8px; min-height:42px; padding:9px 13px 9px 10px; border-radius:12px; border:1px solid transparent; background:transparent; color:#17303a; box-shadow:none; letter-spacing:-.01em; } .portal-tab-icon { display:inline-grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border-radius:8px; background:#eef6f4; color:#0f766e; font-size:10px; font-weight:950; letter-spacing:0; } .portal-tabs a::before { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.86); pointer-events:none; } .portal-tabs a.whatsapp-official-tab { background:linear-gradient(180deg,#f5fbf8,#eef6f1); border-color:#d2e1d8; color:#14553e; } .portal-tabs a:hover { transform:translateY(-1px); border-color:#dce7ee; background:#f8fbfd; box-shadow:0 10px 20px rgba(15,23,42,.05); } .portal-tabs a.active { background:linear-gradient(135deg,#10b981 0%,#0f766e 100%); border-color:#10b981; color:#ffffff; box-shadow:0 12px 24px rgba(16,185,129,.22); } .portal-tabs a.active .portal-tab-icon { background:rgba(255,255,255,.18); color:#fff; } .portal-tabs a.active::after { left:50%; right:auto; bottom:-7px; width:26px; height:3px; transform:translateX(-50%); border-radius:999px; background:#10b981; } .portal-card, .portal-kpi, .diagnostic-card, .detail-board, .productivity-awards div, .access-group-card { position:relative; overflow:hidden; border:1px solid #d9e0e5; border-radius:24px; background:linear-gradient(180deg,#ffffff 0%,#f9fbfb 100%); box-shadow:0 18px 38px rgba(15,23,42,.055); } .portal-card::before, .portal-kpi::before, .diagnostic-card::before, .detail-board::before, .productivity-awards div::before, .access-group-card::before { content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.88),rgba(185,151,84,.32),rgba(255,255,255,.88)); pointer-events:none; } .portal-card { padding:24px; overflow-x:auto; } .portal-grid, .portal-kpis { gap:22px; } .portal-section-head { margin-bottom:18px; padding-bottom:0; } .portal-period-picker { display:flex; align-items:center; gap:10px; padding:7px 9px 7px 12px; border:1px solid #d4e0e6; border-radius:8px; background:#f7fafb; } .portal-period-picker label { margin:0; color:#647985; font-size:10px; font-weight:900; text-transform:uppercase; white-space:nowrap; } .portal-period-picker select { min-width:112px; min-height:36px; padding:6px 30px 6px 10px; border-color:#c8d7df; border-radius:6px; background:#fff; color:#173247; font-size:12px; font-weight:800; } .portal-call-period-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:-2px 0 16px; padding:12px; border:1px solid #d7e3e8; border-radius:8px; background:#f7fafb; } .portal-custom-period-form { display:flex; align-items:flex-end; justify-content:flex-end; flex-wrap:wrap; gap:8px; } .portal-custom-period-form label { min-width:142px; margin:0; } .portal-custom-period-form label span { display:block; margin-bottom:5px; color:#647985; font-size:10px; font-weight:900; text-transform:uppercase; } .portal-custom-period-form input { min-height:38px; padding:7px 9px; border-color:#c8d7df; border-radius:6px; background:#fff; } .portal-custom-period-form button, .portal-custom-period-form .button { min-height:38px; padding:8px 13px; border-radius:6px; white-space:nowrap; } .portal-active-period { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-6px 0 14px; padding:9px 12px; border-left:3px solid #0fa58c; background:#eaf9f5; color:#35645f; } .portal-active-period span { font-size:10px; font-weight:900; text-transform:uppercase; } .portal-active-period strong { color:#0b6f62; font-size:13px; } .portal-metric-explanation { margin:-2px 0 14px; padding:10px 12px; border-left:3px solid #0fa58c; background:#effaf7; color:#536c77; font-size:11px; line-height:1.5; } .portal-section-head h3, .portal-card h3 { font-size:20px; letter-spacing:-.03em; color:#112d38; } .portal-kpi { min-height:116px; padding:20px 20px 18px; border-top-width:1px; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .portal-dashboard-kpis { grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:22px; } .portal-dashboard-kpis .portal-kpi, .status-tile { isolation:isolate; } .portal-dashboard-kpis .portal-kpi::after, .status-tile::after { content:attr(data-icon); position:absolute; right:18px; top:18px; z-index:-1; color:rgba(15,23,42,.075); font-size:34px; font-weight:950; letter-spacing:0; } .portal-dashboard-kpis .portal-kpi { border:0; border-radius:16px; color:#fff; min-height:126px; box-shadow:0 18px 34px rgba(15,23,42,.10); } .portal-dashboard-kpis .portal-kpi span, .portal-dashboard-kpis .portal-kpi small, .portal-dashboard-kpis .portal-kpi strong { color:#fff; } .portal-dashboard-kpis .portal-kpi span { opacity:.88; letter-spacing:0; text-transform:none; font-size:13px; } .portal-dashboard-kpis .portal-kpi small { opacity:.84; } .portal-dashboard-kpis .portal-kpi strong { font-size:32px; margin-top:12px; } .portal-dashboard-kpis .portal-kpi.ok { background:linear-gradient(135deg,#10b981,#059669); } .portal-dashboard-kpis .portal-kpi.info { background:linear-gradient(135deg,#0ea5e9,#2563eb); } .portal-dashboard-kpis .portal-kpi.warn { background:linear-gradient(135deg,#f59e0b,#d97706); } .portal-dashboard-kpis .portal-kpi.danger { background:linear-gradient(135deg,#f43f5e,#be123c); } .portal-dashboard-kpis .portal-kpi.violet { background:linear-gradient(135deg,#8b5cf6,#6d28d9); } .portal-kpi span, .portal-section-head .badge { letter-spacing:.10em; color:#7a6a4b; } .portal-kpi strong { margin-top:10px; letter-spacing:-.04em; color:#0f2530; } a.portal-kpi:hover, .portal-kpi:hover { transform:translateY(-2px); border-color:#c9d7df; box-shadow:0 24px 48px rgba(15,23,42,.09); } .portal-kpi.ok { border-top:4px solid #16a34a; } .portal-kpi.info { border-top:4px solid #0891b2; } .portal-kpi.warn { border-top:4px solid #d97706; } .portal-kpi.danger { border-top:4px solid #dc2626; } .portal-kpi.violet { border-top:4px solid #7c3aed; } .portal-card table, .portal-card .table-scroll table { font-size:13px; } .portal-card th { color:#73654a; letter-spacing:.08em; font-size:11px; } .portal-card td { color:#16313d; } .portal-card tbody tr:hover td { background:#f4f9fb; } .portal-timeline-card tbody tr td:first-child { position:relative; padding-left:22px; } .portal-timeline-card tbody tr td:first-child::before { content:""; position:absolute; left:8px; top:50%; width:8px; height:8px; border-radius:999px; background:#10b981; box-shadow:0 0 0 4px rgba(16,185,129,.12); transform:translateY(-50%); } .access-group-card { padding:22px; } .status-strip { gap:16px; } a.status-tile { display:block; color:#fff; text-decoration:none; } .status-tile { min-height:126px; padding:20px; border:0; border-radius:16px; color:#fff; box-shadow:0 18px 34px rgba(15,23,42,.10); transition:transform .16s ease, box-shadow .16s ease; } .status-tile:hover { transform:translateY(-2px); box-shadow:0 22px 42px rgba(15,23,42,.14); } .status-tile::before { display:none; } .status-tile::after { left:auto; bottom:auto; width:auto; height:auto; border-radius:0; background:transparent; box-shadow:none; line-height:1; } .status-tile strong { color:#fff; font-size:34px; margin:12px 0 8px; } .status-tile span { color:rgba(255,255,255,.92); font-size:13px; font-weight:900; letter-spacing:0; text-transform:none; } .status-tile small { display:block; color:rgba(255,255,255,.78); font-size:12px; line-height:1.35; } .status-tile.online { background:linear-gradient(135deg,#10b981,#059669); } .status-tile.busy { background:linear-gradient(135deg,#0ea5e9,#2563eb); } .status-tile.paused { background:linear-gradient(135deg,#f59e0b,#d97706); } .status-tile.offline { background:linear-gradient(135deg,#f43f5e,#be123c); } .agent-board { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; } .agent-card { border-radius:16px; border-color:#e2eaf0; padding:16px; box-shadow:0 14px 28px rgba(15,23,42,.055); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .agent-card:hover { transform:translateY(-2px); border-color:#d4e1e8; box-shadow:0 20px 38px rgba(15,23,42,.09); } .agent-card::before { width:4px; } .agent-icon { border-radius:14px; width:42px; height:42px; } .access-group-card-head { margin-bottom:18px; } .access-group-identity { grid-template-columns:repeat(2,minmax(220px,1fr)); gap:14px; align-items:end; } .access-group-identity label:nth-child(5) { grid-column:1 / -1; } .access-group-identity label, .access-group-card label { color:#37515d; font-weight:700; } .access-group-count { border:1px solid #dddccb; border-radius:20px; background:linear-gradient(180deg,#faf8f2 0%,#f2efe4 100%); box-shadow:none; } .access-permission-grid { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; } .access-permission-card { min-height:88px; border:1px solid #d9e0e5; border-radius:18px; background:linear-gradient(180deg,#ffffff 0%,#fafbfb 100%); box-shadow:none; } .access-permission-card:hover { transform:translateY(-1px); border-color:#c2c9b5; box-shadow:0 14px 28px rgba(15,23,42,.06); } .access-permission-card.is-enabled { border-color:#c0a96d; background:linear-gradient(180deg,#fdf9ef 0%,#ffffff 100%); box-shadow:0 0 0 1px rgba(185,151,84,.10),0 14px 28px rgba(15,23,42,.05); } .access-permission-card strong { color:#11303a; letter-spacing:-.015em; } .access-permission-card small { color:#66808b; } input, select, textarea { border-radius:14px; border-color:#d4dee5; background:#fbfdfe; box-shadow:inset 0 1px 2px rgba(15,23,42,.03); } input[readonly], textarea[readonly] { background:#f3f7f9; } input:focus, select:focus, textarea:focus { border-color:#7bbab3; box-shadow:0 0 0 4px rgba(15,118,110,.10); } .access-groups-savebar { border:1px solid #d7dee3; border-radius:24px; background:rgba(255,255,255,.95); backdrop-filter:blur(16px) saturate(140%); box-shadow:0 16px 32px rgba(15,23,42,.06); } .portal-public-gate { padding:22px 24px; border-style:dashed; } .portal-public-gate-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .portal-public-gate-actions .button { min-height:44px; padding:11px 18px; border-radius:14px; } .portal-inline-login { margin-bottom:18px; } .flash { border-radius:18px; border:1px solid #cfe2df; background:linear-gradient(180deg,#f1fbf8,#ebf8f5); color:#14433e; } .flash.err { border-color:#f3c7c2; background:linear-gradient(180deg,#fff4f3,#ffebea); } .portal-theme-dark .portal-shell, .portal-theme-dark { background: radial-gradient(circle at 0% 0%,rgba(45,212,191,.11),transparent 26rem), radial-gradient(circle at 100% 0%,rgba(185,151,84,.12),transparent 25rem), linear-gradient(180deg,#07131d 0%,#0a1723 28%,#08111a 100%) !important; } .portal-theme-dark .portal-hero { border-color:#314552 !important; background: radial-gradient(circle at 28% 12%,rgba(45,212,191,.13),transparent 22rem), linear-gradient(135deg,rgba(12,27,40,.98) 0%,rgba(12,36,43,.97) 54%,rgba(25,28,34,.98) 100%) !important; box-shadow:0 24px 54px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.03); } .portal-theme-dark .portal-hero::before { background:linear-gradient(180deg,#67e8f9 0%,#2dd4bf 56%,#b99754 100%); } .portal-theme-dark .portal-hero::after { background:linear-gradient(180deg,transparent,#2f4a5a,transparent); } .portal-theme-dark .portal-logo { background:linear-gradient(180deg,#102130,#0f1a28); border-color:#335062; box-shadow:0 18px 34px rgba(0,0,0,.28); } .portal-theme-dark .portal-eyebrow { background:linear-gradient(180deg,#2b2618 0%,#1d2128 100%); border-color:#665739; color:#d7c08b; } .portal-theme-dark .portal-identity strong, .portal-theme-dark .portal-card h3, .portal-theme-dark .portal-section-head h3, .portal-theme-dark .portal-kpi strong, .portal-theme-dark .access-permission-card strong, .portal-theme-dark .portal-status-board strong { color:#eef7fb !important; } .portal-theme-dark .portal-identity .muted, .portal-theme-dark .portal-kpi span, .portal-theme-dark .portal-card th, .portal-theme-dark .access-permission-card small, .portal-theme-dark .portal-nav-head, .portal-theme-dark .portal-status-label, .portal-theme-dark .portal-status-board small { color:#9cb2c0 !important; } .portal-theme-dark .portal-status-board { border-color:#4b5146; background:linear-gradient(180deg,#16222d 0%,#151c24 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); } .portal-theme-dark .portal-status-board::before { background:linear-gradient(90deg,#2dd4bf 0%,#b99754 100%); } .portal-theme-dark .portal-status-board::after { background:#34d399; box-shadow:0 0 0 6px rgba(52,211,153,.10); } .portal-theme-dark .portal-user-greeting { border-color:#2e4f5b; background:rgba(15,30,42,.74); box-shadow:0 12px 24px rgba(0,0,0,.20); } .portal-theme-dark .portal-plan-head span, .portal-theme-dark .portal-user-greeting span { color:#9fb7c4; } .portal-theme-dark .portal-plan-head strong { color:#5eead4; } .portal-theme-dark .portal-user-greeting strong { color:#edf7fb !important; } .portal-theme-dark .portal-user-greeting small { color:#93aaba; } .portal-theme-dark .portal-user-avatar { background:linear-gradient(135deg,#2dd4bf,#0f3750); color:#06131b; } .portal-theme-dark .portal-ura-pill { border-color:#294252; background:rgba(12,26,38,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } .portal-theme-dark .portal-ura-pill small { color:#91a8b5; } .portal-theme-dark .portal-ura-pill span { color:#e7f2f7; } .portal-theme-dark .portal-ura-pill.is-active { border-color:#2dd4bf; background:linear-gradient(135deg,#0f766e 0%,#0d344b 100%); box-shadow:0 16px 34px rgba(45,212,191,.16), inset 0 1px 0 rgba(255,255,255,.08); } .portal-theme-dark .portal-did-strip { border-color:#2e4b59; background:rgba(12,29,39,.82); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } .portal-theme-dark .portal-did-copy span, .portal-theme-dark .portal-did-list a strong { color:#edf7f8; } .portal-theme-dark .portal-did-copy small { color:#9bb0ba; } .portal-theme-dark .portal-did-list a { border-color:#237f75; background:#123b39; color:#b8f1e7; } .portal-theme-dark .portal-did-list a:hover { border-color:#43d6c1; background:#164942; } .portal-theme-dark .portal-did-list a small { color:#82d9cd; } .portal-theme-dark .portal-did-empty { border-color:#3a5360; color:#a8bbc3; } .portal-theme-dark .portal-period-picker { border-color:#38505c; background:#13242d; } .portal-theme-dark .portal-period-picker label { color:#aabdc5; } .portal-theme-dark .portal-period-picker select { border-color:#45606c; background:#172b35; color:#f4f8fa; } .portal-theme-dark .portal-call-period-toolbar { border-color:#38505c; background:#10222b; } .portal-theme-dark .portal-custom-period-form label span { color:#aabdc5; } .portal-theme-dark .portal-custom-period-form input { border-color:#45606c; background:#172b35; color:#f4f8fa; } .portal-theme-dark .portal-active-period { background:#123b35; color:#b8d6d1; } .portal-theme-dark .portal-active-period strong { color:#7ce8d5; } .portal-theme-dark .portal-metric-explanation { background:#12332f; color:#b7cbc9; } .portal-theme-dark .portal-hero .badge.sev-info { background:#122435; border-color:#2b4658; color:#dcebf2; } .portal-theme-dark .portal-hero .badge.sev-notice { background:#2e2a1d; border-color:#665739; color:#e9d5a2; } .portal-theme-dark .portal-theme-toggle { background:linear-gradient(180deg,#f6f0df,#e5d4a6); border-color:#e5d4a6; color:#2d2516; } .portal-theme-dark .logout { background:#122334; border-color:#355062; color:#edf6fa; } .portal-theme-dark .portal-nav-box { border-color:#344957 !important; background:rgba(10,22,33,.90) !important; box-shadow:0 20px 40px rgba(0,0,0,.22); } .portal-theme-dark .portal-nav-head span:last-child { background:#2b261b; border-color:#655739; color:#e1c98e; } .portal-theme-dark .portal-tabs a { border-color:#345063; background:linear-gradient(180deg,#132536,#0f1e2d); color:#dceaf1; box-shadow:none; } .portal-theme-dark .portal-tabs a.whatsapp-official-tab { background:linear-gradient(180deg,#102b29,#0f2225); border-color:#295650; color:#bdf6dc; } .portal-theme-dark .portal-tabs a:hover { border-color:#4e6a7c; background:#15293b; box-shadow:0 14px 24px rgba(0,0,0,.18); } .portal-theme-dark .portal-tabs a.active, .portal-theme-dark .portal-tabs a.whatsapp-official-tab.active { background:linear-gradient(135deg,#10313a 0%,#0f766e 58%,#735d2d 100%); border-color:#b99754; color:#f4fbfc; box-shadow:0 16px 28px rgba(0,0,0,.22); } .portal-theme-dark .portal-card, .portal-theme-dark .portal-kpi, .portal-theme-dark .diagnostic-card, .portal-theme-dark .detail-board, .portal-theme-dark .productivity-awards div, .portal-theme-dark .access-group-card, .portal-theme-dark .access-groups-savebar { border-color:#2d4758 !important; background:linear-gradient(180deg,#102030 0%,#0d1a29 100%) !important; box-shadow:0 18px 38px rgba(0,0,0,.24); } .portal-theme-dark .portal-public-gate { border-style:dashed; border-color:#5d6a54 !important; } .portal-theme-dark .portal-card td, .portal-theme-dark .access-group-card label { color:#dce8ef; } .portal-theme-dark .portal-card th, .portal-theme-dark .portal-kpi span, .portal-theme-dark .portal-status-label { color:#d1b87d !important; } .portal-theme-dark .portal-card tbody tr:hover td { background:#132536; } .portal-theme-dark .access-group-count { border-color:#5e593f; background:linear-gradient(180deg,#252317 0%,#1a2028 100%); } .portal-theme-dark .access-permission-card { border-color:#315061; background:linear-gradient(180deg,#122334 0%,#0f1f2f 100%); } .portal-theme-dark .access-permission-card.is-enabled { border-color:#b99754; background:linear-gradient(180deg,#2b2619 0%,#112434 100%); box-shadow:0 0 0 1px rgba(185,151,84,.12),0 14px 24px rgba(0,0,0,.18); } .portal-theme-dark input, .portal-theme-dark select, .portal-theme-dark textarea { border-color:#355062; background:#0b1826; color:#eef7fb; box-shadow:none; } .portal-theme-dark input:focus, .portal-theme-dark select:focus, .portal-theme-dark textarea:focus { border-color:#41bdae; box-shadow:0 0 0 4px rgba(45,212,191,.14); } .portal-theme-dark .flash { border-color:#27544f; background:linear-gradient(180deg,#0e2b2a,#103131); color:#d5faf1; } .portal-theme-dark .flash.err { border-color:#6d3232; background:linear-gradient(180deg,#331516,#2c1214); color:#ffd6d6; } @media (max-width: 820px) { .portal-main { padding:14px 12px; } .portal-hero { grid-template-columns:1fr; border-radius:22px; padding:22px 18px; } .portal-hero::after { display:none; } .portal-hero, .portal-hero-side { gap:12px; } .portal-hero-side { width:100%; flex-basis:auto; } .portal-identity { width:100%; flex-direction:column; } .portal-hero-body, .portal-copy { width:100%; } .portal-status-board { padding:16px; } .portal-hero .actions { max-width:none; margin-left:0; grid-template-columns:1fr; } .portal-logo { width:176px; max-width:100%; } .portal-identity strong { font-size:24px; max-width:none; } .portal-plan-head { display:block; } .portal-plan-head strong { display:block; margin-top:6px; text-align:left; } .portal-user-greeting { width:100%; border-radius:18px; order:-1; } .portal-user-avatar { width:54px; height:54px; flex-basis:54px; border-radius:16px; } .portal-ura-modes { grid-template-columns:1fr; width:100%; margin-top:14px; } .portal-ura-pill { min-height:70px; padding:14px; } .portal-did-strip { align-items:flex-start; flex-direction:column; gap:10px; } .portal-did-list { width:100%; justify-content:flex-start; } .portal-did-list a { flex:1 1 180px; justify-content:center; } .portal-nav-box { top:76px; border-radius:20px; } .portal-tabs { padding-bottom:10px; gap:8px; } .portal-tabs a { border-radius:12px; } .portal-card, .access-group-card, .portal-kpi { border-radius:20px; } .portal-period-picker { width:100%; justify-content:space-between; } .portal-call-period-toolbar { align-items:stretch; flex-direction:column; } .portal-custom-period-form { display:grid; grid-template-columns:1fr 1fr; width:100%; } .portal-custom-period-form label { min-width:0; } .portal-custom-period-form button, .portal-custom-period-form .button { width:100%; } .portal-active-period { align-items:flex-start; flex-direction:column; gap:4px; } .portal-public-gate-actions { align-items:flex-start; } .access-group-identity { grid-template-columns:1fr; } .access-group-identity label:nth-child(5) { grid-column:auto; } .access-permission-grid { grid-template-columns:1fr; } .access-groups-savebar { border-radius:20px; } } @media (max-width: 1180px) { .monitor-layout, .agents-operations-grid { grid-template-columns:1fr; } .monitor-board { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } } @media (max-width: 820px) { header { padding:10px 14px; align-items:flex-start; } .brand-mark { width:36px; height:36px; } .brand-logo { width:42px; height:42px; } .brand small { display:none; } h1 { font-size:18px; } .brand small { white-space:normal; } .logout { padding:8px 10px; } .wrap { grid-template-columns:1fr; } nav { border-right:0; border-bottom:1px solid var(--line); padding:10px; overflow-x:auto; position:sticky; top:68px; z-index:15; } .admin-sidebar .sidebar-hero, .admin-sidebar .sidebar-footer-note { display:none; } nav hr { display:none; } .side-menu { flex-direction:row; gap:8px; align-items:flex-start; min-width:max-content; } .side-menu > .client.active, .side-menu > .client-group:has(> .client.active) { order:-1; } .side-label { display:none; } .client { flex:0 0 auto; white-space:nowrap; margin-bottom:0; min-height:38px; border:1px solid var(--line); background:#fff; } .client:hover { transform:none; } .client-group { display:flex; gap:6px; flex:0 0 auto; margin-bottom:0; border:0; padding:0; background:transparent; } .client-group .client-sub { display:none; } .client-group:has(> .client.active) .client-sub { display:flex; } .client-sub { margin:0; padding-left:0; border-left:0; flex-direction:row; } .client-sub a { border:1px solid var(--line); background:#fff; min-height:38px; white-space:nowrap; } .client-sub a:hover { transform:none; } main { padding:14px; } .grid, .summary, .flow-grid, .schedule-grid, .client-list, .diagnostic-list, .portal-kpis, .portal-grid, .call-center-hero, .call-summary, .archive-policy, .detail-mini, .insight-hero, .insight-grid, .monitor-board, .monitor-queue-stats, .monitor-alerts, .wa-hero, .wa-health, .wa-number-grid, .finance-hero, .finance-summary, .productivity-hero, .productivity-scoreboard, .productivity-awards, .logo-upload-box, .usage-hero, .usage-grid, .usage-status-grid, .usage-mini { grid-template-columns:1fr; } .portal-hero { align-items:flex-start; } .portal-identity { align-items:flex-start; } .portal-logo { width:180px; max-width:100%; max-height:86px; } .portal-nav-box { padding:10px; margin-left:-4px; margin-right:-4px; } .portal-nav-head { padding:0 2px 8px; } .portal-tabs { flex-wrap:nowrap; overflow-x:auto; gap:8px; padding:2px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } .portal-tabs a { flex:0 0 auto; min-height:44px; padding:10px 13px; scroll-snap-align:start; white-space:nowrap; } .portal-tabs a.active::after { bottom:3px; left:18px; right:18px; background:rgba(255,255,255,.85); } .wa-event { grid-template-columns:1fr; } .monitor-layout, .agents-operations-grid { grid-template-columns:1fr; min-width:0; } .status-strip, .agent-board { grid-template-columns:1fr; } .agents-operations-grid .monitor-zone { min-width:0; padding:12px; } .agents-operations-grid .monitor-recent { overflow-x:auto; -webkit-overflow-scrolling:touch; } .panel { padding:14px; border-radius:8px; } .toolbar > div { min-width:100%; } table { min-width:680px; } audio { width:180px; } .secretary-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .secretary-filters > div { min-width:0; } .secretary-filters > div:first-child, .secretary-filters > div:last-child { grid-column:1 / -1; } .secretary-filters button { width:100%; } .secretary-workflow-table { display:block; min-width:0; } .secretary-workflow-table thead { display:none; } .secretary-workflow-table tbody { display:grid; gap:10px; } .secretary-workflow-table tr { display:block; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; } .secretary-workflow-table td { display:grid; grid-template-columns:82px minmax(0,1fr); gap:10px; align-items:start; padding:8px 10px; border-bottom:1px solid var(--line); background:#fff !important; } .secretary-workflow-table td::before { content:attr(data-label); color:var(--muted); font-size:10px; font-weight:900; line-height:1.4; text-transform:uppercase; } .secretary-workflow-table td:last-child { border-bottom:0; } .secretary-time-cell strong, .secretary-time-cell span { display:inline; } .secretary-time-cell span { margin-left:6px; } .secretary-row-audio audio { width:100%; } .secretary-treatment-cell { display:block !important; min-width:0; padding:10px !important; } .secretary-treatment-cell::before { display:none; } .secretary-treatment-head { grid-template-columns:auto minmax(0,1fr) auto; gap:6px 8px; } .secretary-treatment-head small { font-size:11px; } .secretary-treatment-form { grid-template-columns:minmax(92px,.7fr) minmax(0,1.3fr) auto; gap:6px; } .secretary-treatment-form select, .secretary-treatment-form input { min-height:38px; padding:8px; font-size:13px; } .secretary-treatment-form button { min-height:38px; padding:8px 10px; } .secretary-audit[open] { grid-column:1 / -1; } #secretaryEmpty td { display:block; } #secretaryEmpty td::before { display:none; } .diagram-wrap { min-width:0; } .diagram-row, .diagram-row.three, .diagram-split, .diagram-options, .queue-map { grid-template-columns:1fr; } } /* Chat Premium URA */ .premium-chat-box { margin-top: 20px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 4px 12px rgba(20,33,61,.05); } .premium-chat-header { background: #0f766e; color: white; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 13px; } .premium-chat-body { padding: 14px; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: #ffffff; border-bottom: 1px solid var(--line); } .premium-chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; word-break: break-word; } .premium-chat-msg.user { align-self: flex-end; background: #0f766e; color: white; border-bottom-right-radius: 2px; } .premium-chat-msg.assistant { align-self: flex-start; background: #f1f5f9; color: var(--ink); border-bottom-left-radius: 2px; border: 1px solid #e2e8f0; } .premium-chat-tech-details { padding: 10px 14px; background: #fefce8; border-top: 1px solid #fef08a; font-size: 12px; color: #713f12; line-height: 1.5; } .premium-chat-footer { padding: 10px 14px; background: #f8fafc; display: flex; gap: 8px; align-items: center; } /* Auth experience V2: visual continuity with the public landing. */ .login, .portal-login { display: grid; align-items: center; width: 100%; max-width: 1240px; min-height: calc(100svh - 76px); margin: 0 auto; padding: clamp(24px, 4vw, 56px) 24px; } .login > .flash, .portal-login > .flash { width: min(100%, 720px); margin: 0 auto 18px; } .auth-shell { position: relative; width: 100%; } .auth-stage { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); min-height: 670px; overflow: hidden; border: 1px solid #cbdadf; border-radius: 18px; background: #ffffff; box-shadow: 0 30px 70px rgba(11, 42, 55, .14); } .auth-copy { position: relative; isolation: isolate; display: flex; min-width: 0; overflow: hidden; border: 0; border-radius: 0; color: #ffffff; background-color: #082d32; background-image: url('landing-hero-mktip.webp'); background-position: center; background-size: cover; } .auth-copy::before { content: ""; position: absolute; z-index: -1; inset: 0; width: auto; background: rgba(4, 30, 34, .78); } .auth-copy-content { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; min-width: 0; padding: clamp(34px, 5vw, 68px); } .auth-brandline { display: flex; align-items: center; gap: 10px; margin-bottom: auto; color: #ffffff; font-size: 15px; font-weight: 800; letter-spacing: -.012em; text-shadow: 0 2px 12px rgba(2, 17, 20, .42); } .auth-brand-mark { display: block; width: 46px; height: 46px; border-radius: 11px; object-fit: cover; box-shadow: 0 10px 24px rgba(2, 17, 20, .34); } .auth-context-logo { display: block; width: auto; max-width: 210px; max-height: 90px; margin: 48px 0 20px; padding: 10px; object-fit: contain; border-radius: 12px; background: rgba(255, 255, 255, .96); } .auth-copy h2 { max-width: 620px; margin: 52px 0 18px; color: #ffffff; font-size: clamp(38px, 4.4vw, 62px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; } .auth-lead { max-width: 610px; margin: 0; color: #d9eeeb; font-size: 16px; line-height: 1.62; } .auth-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .22); } .auth-feature-card { min-width: 0; padding: 0 22px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .auth-feature-card + .auth-feature-card { padding: 0 0 0 22px; border-left: 1px solid rgba(255, 255, 255, .22); } .auth-feature-card strong { display: block; margin-bottom: 7px; color: #ffffff; font-size: 14px; } .auth-feature-card span { display: block; color: #c8dfdc; font-size: 12px; line-height: 1.5; } .auth-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; } .auth-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #8ee3d7; font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; } .auth-security-status { display: flex; align-items: center; gap: 9px; margin: 26px 0 0; color: #d7ebe8; font-size: 12px; font-weight: 700; } .auth-security-status > span, .auth-secure-chip > span { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #46ddb6; box-shadow: 0 0 0 4px rgba(70, 221, 182, .14); } .auth-card { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; margin: 0; padding: clamp(38px, 5vw, 66px); overflow: visible; border: 0; border-radius: 0; background: #ffffff; box-shadow: none; } .auth-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 52px; } .auth-back-home { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #315461; font-size: 13px; font-weight: 800; text-decoration: none; } .auth-back-home span { color: #08796f; font-size: 18px; } .auth-secure-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 11px; border-radius: 999px; background: #e9f8f4; color: #08675f; font-size: 11px; font-weight: 800; white-space: nowrap; } .auth-card .login-logo { width: 82px; height: auto; max-width: none; max-height: none; margin: 0 0 24px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; object-fit: contain; object-position: left center; } .auth-card-head { margin-bottom: 24px; } .auth-card-head h3 { margin: 0 0 10px; color: #102c3a; font-size: clamp(28px, 3vw, 38px); line-height: 1.08; letter-spacing: -.025em; } .auth-card-head p { max-width: 48ch; margin: 0; color: #58707d; font-size: 14px; line-height: 1.6; } .auth-form-grid { display: grid; gap: 18px; margin: 0; } .auth-form-grid label { display: grid; gap: 8px; margin: 0; color: #263f4c; font-size: 13px; font-weight: 800; } .auth-form-grid input { width: 100%; min-height: 54px; padding: 13px 15px; border: 1px solid #c6d5dc; border-radius: 10px; background: #ffffff; color: #102c3a; font-size: 15px; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } .auth-form-grid input::placeholder { color: #758892; opacity: 1; } .auth-form-grid input:hover { border-color: #95adb6; } .auth-form-grid input:focus { border-color: #0b8177; outline: none; background: #ffffff; box-shadow: 0 0 0 4px rgba(11, 129, 119, .13); } .auth-form-options { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 14px 0 20px; } .auth-checkline { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: 0; color: #4e6875; font-size: 13px; font-weight: 700; cursor: pointer; } .auth-checkline input[type=checkbox] { width: 17px; height: 17px; margin: 0; accent-color: #0b8177; cursor: pointer; } .auth-forgot-link { display: inline-flex; align-items: center; min-height: 44px; color: #08796f; font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; } .auth-card button { width: 100%; min-height: 54px; border-radius: 10px; background: #08796f; color: #ffffff; box-shadow: 0 12px 24px rgba(8, 121, 111, .2); font-size: 15px; font-weight: 850; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; } .auth-card button:hover { background: #066a62; box-shadow: 0 15px 28px rgba(8, 121, 111, .25); transform: translateY(-1px); } .auth-card button:active { transform: translateY(0); } .auth-inline-note { position: relative; margin: 18px 0 0; padding: 13px 14px 13px 38px; border-radius: 10px; background: #f0f7f6; color: #506a76; font-size: 12px; line-height: 1.5; } .auth-inline-note::before { content: ""; position: absolute; top: 18px; left: 17px; width: 8px; height: 8px; border-radius: 50%; background: #0b8177; box-shadow: 0 0 0 4px rgba(11, 129, 119, .11); } .auth-card :focus-visible, .auth-copy a:focus-visible { outline: 3px solid #e3a928; outline-offset: 3px; } @media (max-width: 900px) { .login, .portal-login { align-items: start; min-height: 0; padding: 20px 16px 32px; } .auth-stage { grid-template-columns: minmax(0, 1fr); min-height: 0; } .auth-card { order: 1; padding: 38px clamp(22px, 7vw, 48px) 44px; } .auth-copy { order: 2; min-height: 390px; } .auth-copy-content { padding: 34px; } .auth-copy h2 { max-width: 580px; margin-top: 52px; font-size: clamp(34px, 8vw, 48px); } .auth-card-top { margin-bottom: 36px; } } @media (max-width: 560px) { .login, .portal-login { padding: 12px; } .auth-stage { border-radius: 14px; } .auth-card { padding: 24px 20px 30px; } .auth-card-top { margin-bottom: 26px; } .auth-secure-chip { padding: 0 9px; } .auth-card-head { margin-bottom: 20px; } .auth-form-options { align-items: flex-start; margin-top: 10px; } .auth-copy { min-height: 360px; } .auth-copy-content { padding: 26px 22px; } .auth-copy h2 { margin-top: 42px; font-size: 34px; } .auth-lead { font-size: 14px; } .auth-feature-list { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; padding-top: 18px; } .auth-feature-card { padding: 0; } .auth-feature-card + .auth-feature-card { padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .22); border-left: 0; } } @media (prefers-reduced-motion: reduce) { .auth-form-grid input, .auth-card button { transition: none; } .auth-card button:hover { transform: none; } } /* Human-readable portal polish: clarity over decorative density. */ .portal-hero::after { display:none !important; } .portal-plan-head { align-items:flex-start !important; justify-content:flex-start !important; flex-direction:column; gap:8px; max-width:100%; } .portal-plan-head strong { display:inline-flex; align-items:center; width:max-content; max-width:100%; min-height:34px; padding:8px 12px; border:1px solid #b8eadc; border-radius:999px; background:#ecfdf5; color:#047857 !important; font-size:14px; text-align:left; box-shadow:none; } .portal-premium-mark { display:none !important; } .portal-ura-pill { min-height:78px; padding:14px 15px; background:#fff; box-shadow:none; } .portal-ura-pill.is-active { border-color:#10b981; background:#ecfdf5; transform:none; box-shadow:inset 0 0 0 1px rgba(16,185,129,.12); } .portal-ura-pill.is-active::after { background:#10b981; box-shadow:0 0 0 4px rgba(16,185,129,.16); } .portal-ura-pill.is-active small { color:#047857 !important; } .portal-ura-pill.is-active span { color:#0f2f2a !important; } .portal-nav-box { padding:10px 12px 12px; } .portal-nav-head { padding-bottom:8px; } .portal-tabs { flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; gap:8px; padding:2px 2px 10px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } .portal-tabs a { flex:0 0 auto; min-height:42px; white-space:nowrap; scroll-snap-align:start; } .portal-tab-icon { width:8px; height:8px; flex-basis:8px; border-radius:999px; font-size:0; background:#9bd8cb; } .portal-tabs a.active .portal-tab-icon { background:#fff; } .portal-tabs a.active::after { bottom:1px; background:rgba(255,255,255,.82); } @media (max-width: 820px) { .portal-plan-head strong { width:100%; justify-content:center; } .portal-ura-modes { grid-template-columns:1fr; } .portal-tabs a { min-height:44px; } } /* Portal navigation distribution: Atendentes first, then alphabetical in two desktop rows. */ .portal-tabs { display:grid !important; grid-template-columns:repeat(7,minmax(128px,1fr)); gap:10px !important; overflow:visible !important; padding:2px 2px 4px !important; scroll-snap-type:none !important; } .portal-tabs a { display:flex; justify-content:flex-start; flex:initial !important; width:100%; min-width:0; min-height:44px; padding:10px 12px !important; border:1px solid #dce8ee; border-radius:12px; background:#f8fbfd; color:#17303a; white-space:normal !important; line-height:1.15; box-shadow:0 8px 18px rgba(15,23,42,.035); } .portal-tabs a:hover { border-color:#9bd8cb; background:#f0fdfa; color:#0f5f58; } .portal-tabs a.active { border-color:#10b981 !important; background:linear-gradient(135deg,#10b981,#0f766e) !important; color:#fff !important; box-shadow:0 14px 28px rgba(16,185,129,.22) !important; } .portal-tab-icon { width:9px; height:9px; flex:0 0 9px; margin-right:2px; border-radius:999px; background:#9bd8cb; } .portal-tabs a.active .portal-tab-icon { background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.16); } .portal-tabs a.active::after { left:14px !important; right:14px !important; bottom:4px !important; width:auto !important; height:3px !important; transform:none !important; background:rgba(255,255,255,.72) !important; } @media (max-width: 1180px) { .portal-tabs { grid-template-columns:repeat(4,minmax(150px,1fr)); } } @media (max-width: 720px) { .portal-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } .portal-tabs a { min-height:46px; } } @media (max-width: 420px) { .portal-tabs { grid-template-columns:1fr; } } /* Center the compact action buttons in the portal hero. */ .portal-hero .actions > a, .portal-hero .actions > span, .portal-hero .actions > button { display:flex !important; align-items:center !important; justify-content:center !important; min-height:38px; height:100%; text-align:center !important; line-height:1.18; white-space:normal; } .portal-hero .actions .logout { min-height:54px; padding-left:16px; padding-right:16px; } /* Remove large background labels from operational cards for better readability. */ .portal-dashboard-kpis .portal-kpi::after, .status-tile::after { display:none !important; content:none !important; } /* Calls tab: cleaner presentation, no decorative symbols. */ .calls-panel .insight-main::after { display:none !important; content:none !important; } .calls-panel .insight-main { border:1px solid #dbe7ee; background:linear-gradient(180deg,#ffffff,#f7fbfd) !important; color:#102b35 !important; box-shadow:none; } .calls-panel .insight-main span { background:#ecfdf5; color:#047857; letter-spacing:0; text-transform:none; } .calls-panel .insight-main strong, .calls-panel .insight-main p { color:#102b35 !important; } .calls-panel .insight-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } .calls-panel .portal-kpi { min-height:98px; border-radius:14px; box-shadow:none; } .calls-panel .call-filters { display:grid; grid-template-columns:1.2fr 1fr .9fr .75fr .75fr .8fr .8fr auto; gap:10px; align-items:end; margin:18px 0; } .calls-panel .call-filters > div { min-width:0; } .calls-panel .call-filters button { width:100%; min-height:42px; } .calls-panel .sort-button::after, .calls-panel .sort-button.active::after, .calls-panel .sort-button.active.asc::after { content:none !important; } .calls-panel .sort-button { justify-content:center; min-width:82px; min-height:30px; padding:7px 14px; border:1px solid #5eead4; border-radius:999px; background:#ccfbf1; color:#115e59; text-transform:none; letter-spacing:0; font-size:12px; line-height:1; text-align:center; } .calls-panel .sort-button.active { border-color:#0f766e; background:#0f766e; color:#fff; box-shadow:0 3px 8px rgba(15,118,110,.22); } .calls-panel table { min-width:920px; } .calls-panel th, .calls-panel td { vertical-align:middle; } .calls-panel td[data-rank-cell] { color:#64748b; font-weight:800; text-align:center; } @media (max-width: 1180px) { .calls-panel .call-filters, .calls-panel .insight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 720px) { .calls-panel .call-filters, .calls-panel .insight-grid { grid-template-columns:1fr; } } /* Digital collection: operation, audit and configurable rule workspace. */ .collection-view-nav { margin:14px 0; overflow:hidden; border:1px solid #d4dfe5; border-radius:8px; background:#fff; box-shadow:0 5px 14px rgba(84,101,120,.12); } .collection-view-nav-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px; border-bottom:1px solid #dce5ea; background:#f7f9fb; } .collection-view-nav-head > div > span, .collection-view-nav-head small { display:block; } .collection-view-nav-head > div > span { color:#102a43; font-size:12px; font-weight:900; } .collection-view-nav-head small { margin-top:3px; color:#71808c; font-size:10px; } .collection-view-nav-state { flex:0 0 auto; padding:6px 9px; border:1px solid #cbd9e0; border-radius:999px; background:#fff; color:#607286; font-size:10px; font-weight:900; } .collection-view-nav-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:14px; } .collection-view-nav a { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:11px; min-width:0; min-height:68px; padding:12px 14px; border:1px solid #d6e1e6; border-radius:6px; background:#f4f8fb; color:#526777; text-decoration:none; box-shadow:0 2px 4px rgba(84,101,120,.08); } .collection-view-nav-options a:nth-child(1) { border-color:#b9d8e8; background:#edf7fc; } .collection-view-nav-options a:nth-child(2) { border-color:#b8dfd5; background:#eef9f6; } .collection-view-nav-options a:nth-child(3) { border-color:#e4d3a8; background:#fff8e8; } .collection-view-nav-options a:nth-child(1) .collection-tab-index { background:#d7edf7; color:#176485; } .collection-view-nav-options a:nth-child(2) .collection-tab-index { background:#d8f2eb; color:#087568; } .collection-view-nav-options a:nth-child(3) .collection-tab-index { background:#f5e7c3; color:#7a5a0b; } .collection-view-nav a::after { content:""; position:absolute; inset:auto 12px 0; height:3px; border-radius:3px 3px 0 0; background:transparent; } .collection-view-nav a:hover { border-color:#9fc8be; background:#f8fcfb; transform:translateY(-1px); } .collection-view-nav a.is-active { transform:translateY(-2px); border-width:2px; color:#fff; box-shadow:0 8px 18px rgba(15,42,51,.2); } .collection-view-nav-options a:nth-child(1).is-active { border-color:#167da5; background:#167da5; } .collection-view-nav-options a:nth-child(2).is-active { border-color:#0f9f82; background:#0f9f82; } .collection-view-nav-options a:nth-child(3).is-active { border-color:#a87812; background:#a87812; } .collection-view-nav a.is-active::after { right:10px; left:10px; height:4px; background:#fff; } .collection-tab-index { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#e9eef2; color:#526777; font-size:10px; font-weight:900; } .collection-view-nav a.is-active .collection-tab-index { background:#fff; color:#17384a; box-shadow:0 2px 6px rgba(0,0,0,.16); } .collection-tab-copy, .collection-tab-copy strong, .collection-tab-copy small { display:block; min-width:0; } .collection-tab-copy strong { color:#102a43; font-size:13px; } .collection-view-nav a.is-active strong, .collection-view-nav a.is-active small { color:#fff; } .collection-tab-copy small { margin-top:4px; color:#71808c; font-size:10px; line-height:1.3; } .collection-view-panel { display:none; scroll-margin-top:145px; } .collection-view-panel.is-active { display:block; } .collection-monitor { overflow:hidden; border:1px solid #d7e3e6; border-radius:8px; background:#fff; box-shadow:0 4px 12px rgba(36,55,70,.08); } .collection-monitor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; padding:22px 24px 17px; } .collection-monitor-eyebrow { display:block; margin-bottom:6px; color:#0a806c; font-size:10px; font-weight:900; text-transform:uppercase; } .collection-monitor-head h3 { margin:0; color:#001737; font-size:21px; } .collection-monitor-head p { max-width:700px; margin:6px 0 0; color:#647789; font-size:13px; line-height:1.45; } .collection-refresh-form { flex:0 0 auto; } .collection-refresh-form button { min-height:42px; background:#0f9f82; border-color:#0f9f82; } .collection-monitor-meta { display:flex; align-items:center; gap:18px; padding:10px 24px; border-top:1px solid #edf1f4; border-bottom:1px solid #dce5ea; background:#f6f8fa; color:#6c7d8b; font-size:11px; } .collection-monitor-live { display:inline-flex; align-items:center; gap:7px; color:#087568; font-weight:900; } .collection-monitor-live i { width:8px; height:8px; border-radius:50%; background:#18a989; box-shadow:0 0 0 4px rgba(24,169,137,.12); } .collection-operation-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; padding:18px 24px; border-bottom:1px solid #dce5ea; background:#f5f7fa; } .collection-operation-kpis > div { position:relative; min-width:0; min-height:112px; padding:17px 18px 16px; border:0; border-radius:6px; background:#127f9b; color:#fff; box-shadow:0 4px 10px rgba(18,127,155,.16); } .collection-operation-kpis .is-pending { background:#ad760c; box-shadow:0 4px 10px rgba(173,118,12,.16); } .collection-operation-kpis .is-running { background:#1b74ad; box-shadow:0 4px 10px rgba(27,116,173,.16); } .collection-operation-kpis .is-completed { background:#168456; box-shadow:0 4px 10px rgba(22,132,86,.16); } .collection-operation-kpis .is-failed { background:#b9404a; box-shadow:0 4px 10px rgba(185,64,74,.16); } .collection-operation-kpis span, .collection-operation-kpis strong, .collection-operation-kpis small { display:block; } .collection-operation-kpis span { color:rgba(255,255,255,.84); font-size:10px; font-weight:900; text-transform:uppercase; } .collection-operation-kpis strong { margin-top:9px; color:#fff; font-size:27px; line-height:1; } .collection-operation-kpis small { margin-top:7px; color:rgba(255,255,255,.76); font-size:10px; } .collection-now-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:18px 24px 0; } .collection-next-card, .collection-integrity-card { min-width:0; padding:16px 18px; border:1px solid #dce5ea; border-radius:6px; background:#f8fafc; } .collection-next-card { border-left:4px solid #1687c9; } .collection-integrity-card { border-left:4px solid #18a05e; } .collection-next-card > span, .collection-integrity-card > span { display:block; color:#647789; font-size:10px; font-weight:900; text-transform:uppercase; } .collection-next-card strong, .collection-integrity-card strong { display:block; margin-top:7px; color:#102a43; font-size:15px; } .collection-next-card p, .collection-integrity-card p { margin:5px 0 0; color:#526777; font-size:12px; line-height:1.4; } .collection-next-card small { display:block; margin-top:5px; color:#7b8994; } .collection-operation-filters { display:grid; grid-template-columns:minmax(250px,1.4fr) minmax(150px,.7fr) minmax(190px,.9fr) auto auto; gap:10px; align-items:end; margin:18px 24px 14px; padding:14px; border:1px solid #dce5ea; border-radius:6px; background:#f8fafc; } .collection-operation-filters label { display:grid; gap:6px; margin:0; min-width:0; } .collection-operation-filters label > span { color:#526777; font-size:10px; font-weight:900; text-transform:uppercase; } .collection-operation-filters input, .collection-operation-filters select { min-width:0; min-height:40px; background:#fff; } .collection-operation-filters button, .collection-operation-filters a { display:inline-flex; align-items:center; justify-content:center; min-height:40px; white-space:nowrap; } .collection-batch-bar { display:grid; grid-template-columns:auto minmax(120px,1fr) auto; align-items:center; gap:12px; margin:0 24px 12px; padding:11px 12px; border:1px solid #b9d8d1; border-radius:6px; background:#eef9f6; } .collection-batch-bar > label { display:inline-flex; align-items:center; gap:8px; margin:0; color:#29435c; font-size:12px; font-weight:800; cursor:pointer; } .collection-batch-bar input[type="checkbox"] { width:17px; min-width:17px; height:17px; } .collection-batch-count { color:#607286; font-size:11px; } .collection-batch-bar button { min-height:38px; border-color:#0f9f82; background:#0f9f82; color:#fff; } .collection-batch-feedback { grid-column:1 / -1; padding:9px 11px; border-radius:5px; font-size:11px; font-weight:800; } .collection-batch-feedback.is-success { background:#daf5e7; color:#126f43; } .collection-batch-feedback.is-warning { background:#fff1c7; color:#7b5607; } .collection-batch-feedback.is-error { background:#fde5e7; color:#9f2732; } .collection-operation-table-wrap { margin:0 24px; overflow:auto; border:1px solid #dce5ea; border-radius:6px; } .collection-operation-table { width:100%; min-width:1050px; margin:0; } .collection-operation-table th { padding:11px 12px; background:#edf3f6; color:#526777; font-size:10px; text-transform:uppercase; } .collection-operation-table td { padding:11px 12px; vertical-align:top; } .collection-operation-table td strong, .collection-operation-table td small { display:block; } .collection-operation-table td strong { color:#213b55; font-size:12px; } .collection-operation-table td small { margin-top:4px; color:#778895; font-size:10px; line-height:1.35; } .collection-operation-table .collection-select-column { width:42px; min-width:42px; padding-left:12px; padding-right:6px; text-align:center; } .collection-operation-table .collection-select-column input { width:17px; min-width:17px; height:17px; } .collection-work-status { display:inline-flex; align-items:center; justify-content:center; min-height:27px; padding:5px 9px; border-radius:999px; background:#edf1f4; color:#526777; font-size:10px; font-weight:900; white-space:nowrap; } .collection-work-status.is-pending { background:#fff3cd; color:#805b09; } .collection-work-status.is-running { background:#e5f4fc; color:#116a9d; } .collection-work-status.is-completed { background:#dcf7e8; color:#127342; } .collection-work-status.is-partial { background:#fff0d6; color:#8a5700; } .collection-work-status.is-failed { background:#fde6e6; color:#a52a2a; } .collection-work-status.is-skipped { background:#eceff2; color:#5d6973; } .collection-operation-empty { padding:30px !important; color:#71808c; text-align:center; } .collection-report-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 24px 18px; color:#71808c; font-size:11px; } .collection-report-foot strong { color:#29435c; } .collection-audit-timeline { margin:0 24px 22px; border:1px solid #dce5ea; border-radius:6px; background:#f8fafc; } .collection-audit-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border-bottom:1px solid #dce5ea; } .collection-audit-head strong, .collection-audit-head span { display:block; } .collection-audit-head strong { color:#213b55; font-size:13px; } .collection-audit-head span { margin-top:3px; color:#71808c; font-size:10px; } .collection-audit-list { padding:0 16px; } .collection-audit-list article { display:grid; grid-template-columns:12px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #e2e9ed; } .collection-audit-list article:last-child { border-bottom:0; } .collection-audit-list article strong, .collection-audit-list article small { display:block; } .collection-audit-list article strong { color:#29435c; font-size:12px; } .collection-audit-list article small { margin-top:4px; color:#7b8994; font-size:10px; } .collection-audit-list > p { margin:0; padding:18px 0; color:#71808c; font-size:12px; } .collection-audit-dot { width:10px; height:10px; border-radius:50%; background:#94a3b8; } .collection-audit-dot.is-completed { background:#18a05e; } .collection-audit-dot.is-running { background:#1687c9; } .collection-audit-dot.is-partial { background:#d58a17; } .collection-audit-dot.is-failed { background:#d64545; } .collection-audit-dot.is-pending { background:#d49a13; } .collection-hero { display:grid; grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr); gap:24px; align-items:center; margin-bottom:18px; padding:24px; border:1px solid #234653; border-radius:8px; background:#102c35; color:#fff; box-shadow:0 18px 40px rgba(15,42,51,.16); } .collection-hero.is-enabled { border-color:#18a989; } .collection-eyebrow { display:block; margin-bottom:8px; color:#8ee7d2; font-size:11px; font-weight:900; text-transform:uppercase; } .collection-hero h3 { margin:0 0 8px; color:#fff; font-size:28px; } .collection-hero p { max-width:620px; margin:0; color:#d6e6e9; line-height:1.55; } .collection-hero-status { display:flex; align-items:center; gap:9px; margin-top:18px; color:#d6e6e9; } .collection-hero-status strong { color:#fff; } .collection-hero-status small { margin-left:auto; color:#a8c4ca; } .collection-live-dot { width:10px; height:10px; border-radius:50%; background:#94a3b8; box-shadow:0 0 0 5px rgba(148,163,184,.14); } .collection-hero.is-enabled .collection-live-dot { background:#2dd4bf; box-shadow:0 0 0 5px rgba(45,212,191,.16); } .collection-how { margin:-4px 0 18px; padding:20px 22px; border:1px solid #d4e2e5; border-left:4px solid #0f9f82; border-radius:8px; background:#fff; box-shadow:0 5px 16px rgba(36,55,70,.08); } .collection-how-heading { display:flex; align-items:center; gap:12px; } .collection-how-icon { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:#e3f7f2; color:#087568; font-size:16px; font-weight:900; } .collection-how h3 { margin:0; color:#102a43; font-size:17px; } .collection-how-heading p { margin:4px 0 0; color:#657b88; font-size:12px; } .collection-how-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; } .collection-how-steps > div { position:relative; min-width:0; padding:14px 14px 14px 48px; border:1px solid #dce6ea; border-radius:6px; background:#f8fafb; } .collection-how-steps span { position:absolute; top:13px; left:13px; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#0f9f82; color:#fff; font-size:11px; font-weight:900; } .collection-how-steps strong, .collection-how-steps small { display:block; } .collection-how-steps strong { color:#19364a; font-size:12px; } .collection-how-steps small { margin-top:4px; color:#667c89; font-size:10px; line-height:1.45; } .collection-how-note { margin:14px 0 0; padding:10px 12px; border-radius:5px; background:#fff5d9; color:#6f5208; font-size:11px; line-height:1.45; } .collection-plain-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; padding-top:14px; border-top:1px solid #e0e8ec; } .collection-plain-guide > div { padding-left:12px; border-left:3px solid #9bcfc3; } .collection-plain-guide strong,.collection-plain-guide p { display:block; } .collection-plain-guide strong { color:#19364a; font-size:11px; } .collection-plain-guide p { margin:4px 0 0; color:#667c89; font-size:10px; line-height:1.5; } .collection-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .collection-flow-step, .collection-flow-empty { min-height:112px; border:1px solid rgba(255,255,255,.15); border-radius:7px; background:rgba(255,255,255,.07); overflow:hidden; } .collection-flow-timing { display:block; padding:7px 10px; background:rgba(255,255,255,.1); color:#d9ecef; font-size:9px; font-weight:900; line-height:1.3; text-align:center; text-transform:uppercase; } .collection-flow-content { display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:center; padding:12px; } .collection-flow-number { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid rgba(94,234,212,.5); border-radius:50%; color:#5eead4; font-size:11px; font-weight:900; } .collection-flow-content strong, .collection-flow-content small, .collection-flow-content em { display:block; } .collection-flow-content strong { color:#fff; font-size:12px; line-height:1.3; } .collection-flow-content small { margin-top:3px; color:#bcd0d5; font-size:10px; line-height:1.3; } .collection-flow-content em { margin-top:5px; color:#5eead4; font-size:10px; font-style:normal; font-weight:900; } .collection-flow-empty { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; padding:13px; color:#b9d0d5; text-align:center; } .collection-panel { overflow:visible; } .collection-execution-window,.voice-blast-window { margin:14px 0 0; padding:14px; border:1px solid #cfdde3; border-radius:6px; background:#f7fafb; } .collection-execution-window legend,.voice-blast-window legend { padding:0 6px; color:#405d6d; font-size:10px; font-weight:900; text-transform:uppercase; } .collection-weekdays { display:grid; grid-template-columns:repeat(7,minmax(44px,1fr)); gap:7px; } .collection-weekdays label { position:relative; display:grid; place-items:center; min-height:38px; border:1px solid #cddbe1; border-radius:5px; background:#fff; color:#607683; cursor:pointer; font-size:10px; font-weight:900; } .collection-weekdays label input { position:absolute; width:1px; height:1px; opacity:0; } .collection-weekdays label.is-selected { border-color:#0fa58c; background:#e3f6f1; color:#087568; box-shadow:inset 0 -2px #0fa58c; } .collection-window-end { display:flex; align-items:center; gap:12px; margin-top:12px; } .collection-window-end > span { color:#526b79; font-size:10px; font-weight:800; } .collection-window-end input { width:130px; min-height:36px; } .collection-execution-window p,.voice-blast-window p { margin:10px 0 0; color:#687d89; font-size:10px; line-height:1.45; } .collection-product-head { display:grid; grid-template-columns:minmax(220px,.55fr) minmax(580px,1.45fr); gap:28px; align-items:center; margin-bottom:14px; padding:24px; border:1px solid #cfdde3; border-radius:7px; background:#fff; box-shadow:0 10px 26px rgba(25,56,74,.09); } .collection-product-head > div:first-child > span,.voice-blast-hero > div:first-child > span,.voice-blast-form-head span,.voice-blast-guide > span,.voice-blast-history-head span { display:block; color:#078b76; font-size:10px; font-weight:900; text-transform:uppercase; } .collection-product-head h2 { margin:5px 0 4px; color:#102a43; font-size:23px; } .collection-product-head p { margin:0; color:#687d89; font-size:12px; } .collection-product-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .collection-product-switch a { position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); gap:15px; align-items:center; min-height:108px; padding:20px 18px; overflow:hidden; border:2px solid #c9d9e0; border-radius:7px; background:#f4f8fa; color:#173247; text-decoration:none; box-shadow:0 6px 14px rgba(25,56,74,.09); transition:.18s ease; } .collection-product-switch a:first-child { border-color:#b9d8e8; background:#f1f9fd; } .collection-product-switch a:last-child { border-color:#b8dfd5; background:#eff9f6; } .collection-product-switch a > span { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:#dce9ef; color:#496979; font-size:13px; font-weight:900; box-shadow:inset 0 0 0 1px rgba(73,105,121,.08); } .collection-product-switch a:first-child > span { background:#dceff7; color:#176485; } .collection-product-switch a:last-child > span { background:#d8f2eb; color:#087568; } .collection-product-switch strong,.collection-product-switch small { display:block; } .collection-product-switch strong { font-size:15px; line-height:1.3; } .collection-product-switch small { margin-top:6px; color:#667c89; font-size:10px; line-height:1.35; } .collection-product-switch a:hover { border-color:#4ab8a3; transform:translateY(-2px); box-shadow:0 10px 20px rgba(25,56,74,.13); } .collection-product-switch a.is-active { min-height:116px; padding-top:30px; border-color:#056b5b; background:#078f78; color:#fff; outline:3px solid rgba(15,165,140,.2); outline-offset:3px; transform:translateY(-3px) scale(1.012); box-shadow:inset 0 -7px #075f51,0 16px 30px rgba(7,143,120,.32); } .collection-product-switch a.is-active::after { content:"Selecionado"; position:absolute; top:0; right:0; padding:7px 13px; border-radius:0 0 0 7px; background:#f4c95d; color:#493500; font-size:9px; font-weight:900; text-transform:uppercase; box-shadow:0 3px 8px rgba(0,0,0,.16); } .collection-product-switch a.is-active > span { background:#fff; color:#078f78; box-shadow:0 5px 13px rgba(0,0,0,.2); } .collection-product-switch a.is-active strong { color:#fff; font-size:16px; } .collection-product-switch a.is-active small { color:#d8fff6; } .collection-product-switch a.is-active:hover { border-color:#04594c; background:#067c69; transform:translateY(-4px) scale(1.012); box-shadow:inset 0 -7px #064f44,0 18px 34px rgba(7,112,95,.38); } .voice-blast-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.42fr); gap:24px; align-items:center; margin-bottom:14px; padding:24px; border:1px solid #b9d8e8; border-left:4px solid #187ca4; border-radius:7px; background:linear-gradient(115deg,#f7fcff 0%,#fff 70%); } .voice-blast-hero h3 { margin:6px 0 7px; color:#102a43; font-size:25px; } .voice-blast-hero p { margin:0; color:#607784; line-height:1.5; } .voice-blast-guard { padding:15px 16px; border:1px solid #f0d89d; border-radius:6px; background:#fff8e7; } .voice-blast-guard strong,.voice-blast-guard small { display:block; } .voice-blast-guard strong { color:#76560c; font-size:12px; } .voice-blast-guard small { margin-top:5px; color:#806a38; font-size:10px; line-height:1.45; } .voice-blast-explainer { margin-bottom:14px; padding:20px; border:1px solid #d4e0e5; border-left:4px solid #0fa58c; border-radius:7px; background:#fff; box-shadow:0 6px 18px rgba(25,56,74,.05); } .voice-blast-explainer-head { display:flex; align-items:center; gap:12px; } .voice-blast-explainer-head h3 { margin:0; color:#173247; font-size:17px; } .voice-blast-explainer-head p { margin:4px 0 0; color:#687d89; font-size:11px; } .voice-blast-explainer-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:15px; } .voice-blast-explainer-steps > div { position:relative; min-height:96px; padding:13px 12px 12px 44px; border:1px solid #dce6ea; border-radius:6px; background:#f8fafb; } .voice-blast-explainer-steps > div > span { position:absolute; top:12px; left:11px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#0fa58c; color:#fff; font-size:10px; font-weight:900; } .voice-blast-explainer-steps strong,.voice-blast-explainer-steps small { display:block; } .voice-blast-explainer-steps strong { color:#173247; font-size:11px; } .voice-blast-explainer-steps small { margin-top:4px; color:#687d89; font-size:9px; line-height:1.45; } .voice-blast-example { margin-top:12px; padding:12px 14px; border:1px solid #b9d8e8; border-radius:6px; background:#edf7fc; } .voice-blast-example strong { color:#176485; font-size:11px; } .voice-blast-example p { margin:4px 0 0; color:#496b7c; font-size:10px; line-height:1.5; } .voice-blast-rules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; } .voice-blast-rules > div { padding:11px 12px; border-top:3px solid #c8d9df; background:#f7f9fa; } .voice-blast-rules strong,.voice-blast-rules small { display:block; } .voice-blast-rules strong { color:#405d6d; font-size:10px; } .voice-blast-rules small { margin-top:4px; color:#718591; font-size:9px; line-height:1.4; } .voice-blast-workspace { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:14px; align-items:start; } .voice-blast-form,.voice-blast-guide,.voice-blast-history { border:1px solid #d4e0e5; border-radius:7px; background:#fff; box-shadow:0 6px 18px rgba(25,56,74,.06); } .voice-blast-form { padding:20px; } .voice-blast-form-head,.voice-blast-history-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:14px; border-bottom:1px solid #e0e8ec; } .voice-blast-form-head h3,.voice-blast-history-head h3,.voice-blast-guide h3 { margin:4px 0 0; color:#173247; font-size:17px; } .voice-blast-form-head b { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#e4f6f2; color:#078b76; font-size:11px; } .voice-blast-field { display:block; margin-top:16px; } .voice-blast-field > span,.voice-blast-date > span { display:block; margin-bottom:6px; color:#405d6d; font-size:10px; font-weight:900; text-transform:uppercase; } .voice-blast-field input,.voice-blast-date input { width:100%; min-height:42px; } .voice-blast-upload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; } .voice-blast-upload { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-areas:"icon title" "icon copy" "action action"; gap:4px 12px; min-height:146px; padding:15px; border:1px dashed #9fbac5; border-radius:6px; background:#f8fbfc; cursor:pointer; } .voice-blast-upload.has-model { cursor:default; } .voice-blast-upload:hover { border-color:#0fa58c; background:#f1faf7; } .voice-blast-upload input { position:absolute; width:1px; height:1px; opacity:0; } .voice-blast-upload-icon { grid-area:icon; display:grid; place-items:center; width:44px; height:44px; border-radius:6px; background:#dceff7; color:#176485; font-size:10px; font-weight:900; } .voice-blast-upload-icon.is-audio { background:#e1f5ef; color:#087568; } .voice-blast-upload strong { grid-area:title; align-self:end; color:#173247; font-size:12px; } .voice-blast-upload small { grid-area:copy; color:#6e828e; font-size:10px; line-height:1.4; } .voice-blast-upload em { grid-area:action; align-self:end; padding-top:9px; border-top:1px solid #dce6ea; color:#078b76; font-size:10px; font-style:normal; font-weight:900; } .voice-blast-upload-actions { grid-area:action; display:flex; align-items:center; justify-content:space-between; gap:10px; align-self:end; padding-top:9px; border-top:1px solid #dce6ea; } .voice-blast-upload-actions label { cursor:pointer; } .voice-blast-upload-actions em { padding:0; border:0; } .voice-blast-upload-actions a { display:inline-flex; align-items:center; min-height:30px; padding:6px 10px; border:1px solid #8fd6cd; border-radius:5px; background:#fff; color:#087568; font-size:10px; font-weight:900; text-decoration:none; } .voice-blast-upload-actions a:hover { border-color:#0fa58c; background:#e8f8f4; } .voice-blast-audio { width:100%; margin-top:12px; } .voice-blast-intelligence { margin-top:14px; overflow:hidden; border:1px solid #c7e3dc; border-radius:6px; background:#eff9f6; } .voice-blast-intelligence-toggle { display:flex; gap:12px; padding:14px; cursor:pointer; } .voice-blast-intelligence-toggle input { flex:0 0 auto; margin-top:2px; } .voice-blast-intelligence-toggle strong,.voice-blast-intelligence-toggle small { display:block; } .voice-blast-intelligence-toggle strong { color:#126454; font-size:12px; } .voice-blast-intelligence-toggle small { margin-top:4px; color:#5f7d75; font-size:10px; line-height:1.4; } .interaction-audio-manager { display:none; grid-template-columns:minmax(220px,1fr) auto minmax(220px,360px) auto; gap:12px; align-items:center; padding:14px; border-top:1px solid #c7e3dc; background:#fff; } .voice-blast-intelligence.is-enabled .interaction-audio-manager,.collection-interaction.is-enabled .interaction-audio-manager { display:grid; } .interaction-audio-manager > div strong,.interaction-audio-manager > div small { display:block; } .interaction-audio-manager > div strong { color:#173247; font-size:12px; } .interaction-audio-manager > div small { margin-top:4px; color:#667c89; font-size:10px; line-height:1.4; } .interaction-audio-manager audio { width:100%; min-width:0; height:38px; } .interaction-audio-manager .collection-upload-button input { position:absolute; width:1px; height:1px; opacity:0; } .interaction-audio-download { white-space:nowrap; text-decoration:none; } .interaction-audio-default { padding:8px 10px; border:1px solid #b7dcd5; border-radius:5px; background:#e9f8f4; color:#087568; font-size:10px; font-weight:900; white-space:nowrap; } .interaction-audio-manager .collection-delete-audio { grid-column:2/-1; justify-self:end; margin:0; } .voice-blast-schedule { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:15px 0 0; padding:0; border:0; } .voice-blast-schedule legend { grid-column:1/-1; margin-bottom:7px; color:#405d6d; font-size:10px; font-weight:900; text-transform:uppercase; } .voice-blast-schedule > label:not(.voice-blast-date) { display:flex; gap:9px; padding:12px; border:1px solid #d6e1e6; border-radius:6px; background:#fff; } .voice-blast-schedule strong,.voice-blast-schedule small { display:block; } .voice-blast-schedule strong { color:#173247; font-size:11px; } .voice-blast-schedule small { margin-top:3px; color:#718591; font-size:9px; } .voice-blast-date { grid-column:1/-1; } .voice-blast-window-times { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; } .voice-blast-window-times label > span { display:block; margin-bottom:5px; color:#526b79; font-size:9px; font-weight:900; text-transform:uppercase; } .voice-blast-window-times input { width:100%; min-height:40px; } .voice-blast-submit { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin-top:16px; min-height:48px; padding:10px 16px; } .voice-blast-submit span,.voice-blast-submit small { display:block; } .voice-blast-submit small { opacity:.82; font-size:9px; } .voice-blast-guide { padding:20px; } .voice-blast-guide ol { margin:16px 0 0; padding:0; list-style:none; } .voice-blast-guide li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; padding:13px 0; border-top:1px solid #e2e9ec; } .voice-blast-guide li b { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#e6eef2; color:#537080; font-size:10px; } .voice-blast-guide li strong,.voice-blast-guide li small { display:block; } .voice-blast-guide li strong { color:#173247; font-size:11px; } .voice-blast-guide li small { margin-top:3px; color:#718591; font-size:9px; line-height:1.4; } .voice-blast-history { margin-top:14px; padding:20px; } .voice-blast-history-head > small { padding:6px 9px; border-radius:999px; background:#edf3f6; color:#5f7481; font-size:9px; font-weight:900; } .voice-blast-list article { display:grid; grid-template-columns:minmax(220px,1fr) 110px minmax(190px,.6fr) auto; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid #e0e8ec; } .voice-blast-list article:last-child { border-bottom:0; } .voice-blast-campaign-main strong,.voice-blast-campaign-main small,.voice-blast-campaign-metric strong,.voice-blast-campaign-metric small,.voice-blast-campaign-ai strong,.voice-blast-campaign-ai small { display:block; } .voice-blast-campaign-main > strong { margin-top:6px; color:#173247; font-size:12px; } .voice-blast-campaign-main small,.voice-blast-campaign-metric small,.voice-blast-campaign-ai small { margin-top:3px; color:#718591; font-size:9px; } .voice-blast-campaign-metric strong { color:#187ca4; font-size:20px; } .voice-blast-campaign-ai strong { color:#405d6d; font-size:11px; } .voice-blast-status { display:inline-flex; padding:4px 7px; border-radius:999px; background:#e7eff3; color:#4c6675; font-size:8px; font-weight:900; text-transform:uppercase; } .voice-blast-status.is-scheduled,.voice-blast-status.is-waiting_window { background:#fff1c9; color:#795700; }.voice-blast-status.is-queued { background:#dff6ef; color:#087568; }.voice-blast-status.is-draft { background:#e8edf7; color:#435c82; }.voice-blast-status.is-completed { background:#dcf6e7; color:#176a3a; } .voice-blast-empty { padding:32px; text-align:center; }.voice-blast-empty strong,.voice-blast-empty span { display:block; }.voice-blast-empty strong { color:#173247; }.voice-blast-empty span { margin-top:5px; color:#718591; font-size:10px; } .portal-theme-dark .collection-product-head,.portal-theme-dark .voice-blast-form,.portal-theme-dark .voice-blast-guide,.portal-theme-dark .voice-blast-history { border-color:#38505c; background:#10222b; } .portal-theme-dark .voice-blast-explainer { border-color:#38505c; border-left-color:#35c4a7; background:#10222b; } .portal-theme-dark .voice-blast-explainer-head h3,.portal-theme-dark .voice-blast-explainer-steps strong,.portal-theme-dark .collection-plain-guide strong { color:#eef6f8; } .portal-theme-dark .voice-blast-explainer-steps > div,.portal-theme-dark .voice-blast-rules > div { border-color:#38505c; background:#132832; } .portal-theme-dark .voice-blast-example { border-color:#315b70; background:#142c38; } .portal-theme-dark .collection-product-head h2,.portal-theme-dark .voice-blast-form h3,.portal-theme-dark .voice-blast-guide h3,.portal-theme-dark .voice-blast-history h3,.portal-theme-dark .voice-blast-campaign-main > strong,.portal-theme-dark .voice-blast-campaign-ai strong { color:#eef6f8; } .portal-theme-dark .collection-product-switch a,.portal-theme-dark .voice-blast-upload,.portal-theme-dark .voice-blast-schedule > label:not(.voice-blast-date) { border-color:#45616d; background:#142832; color:#eef6f8; } .portal-theme-dark .collection-product-switch a:first-child { border-color:#315b70; background:#142c38; } .portal-theme-dark .collection-product-switch a:last-child { border-color:#32695e; background:#14352f; } .portal-theme-dark .collection-execution-window,.portal-theme-dark .voice-blast-window { border-color:#38505c; background:#132832; } .portal-theme-dark .collection-weekdays label { border-color:#45606c; background:#10222b; color:#b8cbd2; } .portal-theme-dark .collection-weekdays label.is-selected { border-color:#35c4a7; background:#143a33; color:#8ce7d3; } .portal-theme-dark .collection-product-switch a.is-active { border-color:#52dfc1; background:#087c69; outline-color:rgba(82,223,193,.25); box-shadow:inset 0 -7px #35c4a7,0 16px 30px rgba(0,0,0,.4); } .portal-theme-dark .collection-product-switch a.is-active strong { color:#fff; } @media (max-width:980px) { .collection-product-head,.voice-blast-hero,.voice-blast-workspace { grid-template-columns:1fr; }.collection-plain-guide,.voice-blast-rules { grid-template-columns:1fr; }.voice-blast-explainer-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }.voice-blast-guide { display:none; }.voice-blast-list article { grid-template-columns:minmax(0,1fr) 90px auto; }.voice-blast-campaign-ai { display:none; } } @media (max-width:620px) { .collection-product-head { padding:14px; }.collection-product-switch,.voice-blast-upload-grid,.voice-blast-schedule,.voice-blast-explainer-steps { grid-template-columns:1fr; }.collection-product-switch a { min-height:92px; padding:16px; }.collection-product-switch a.is-active { min-height:106px; padding-top:27px; transform:none; }.collection-product-switch a.is-active:hover { transform:none; }.voice-blast-hero,.voice-blast-form,.voice-blast-history,.voice-blast-explainer { padding:15px; }.voice-blast-explainer-steps > div { min-height:0; }.voice-blast-upload-actions { align-items:stretch; flex-direction:column; }.voice-blast-upload-actions label,.voice-blast-upload-actions a { width:100%; justify-content:center; text-align:center; }.collection-weekdays { grid-template-columns:repeat(4,minmax(0,1fr)); }.collection-window-end { align-items:stretch; flex-direction:column; }.collection-window-end input { width:100%; }.voice-blast-list article { grid-template-columns:minmax(0,1fr) auto; gap:10px; }.voice-blast-campaign-metric { text-align:right; }.voice-blast-campaign-actions { grid-column:1/-1; }.voice-blast-campaign-actions button,.voice-blast-campaign-actions a { width:100%; text-align:center; }.voice-blast-date { grid-column:auto; } } .collection-rule-list { display:grid; gap:12px; } .collection-rule { border:1px solid #d5e1e5; border-left:5px solid #94a3b8; border-radius:8px; background:#fff; overflow:hidden; transition:border-color .16s ease, box-shadow .16s ease; } .collection-rule.is-enabled { border-color:#80d8c5; border-left-color:#0f9f82; box-shadow:0 8px 24px rgba(15,159,130,.08); } .collection-rule.needs-audio { border-left-color:#e3a008; } .collection-rule > summary { display:grid; grid-template-columns:38px minmax(180px,1fr) auto auto; gap:12px; align-items:center; min-height:68px; padding:12px 14px; cursor:pointer; list-style:none; background:#f8fbfb; } .collection-rule > summary::-webkit-details-marker { display:none; } .collection-rule[open] > summary { border-bottom:1px solid #dce6e9; } .collection-rule-order { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#e4f5f1; color:#087568; font-weight:900; } .collection-rule-summary strong, .collection-rule-summary small { display:block; } .collection-rule-summary strong { color:#15323b; font-size:15px; } .collection-rule-summary small { margin-top:4px; color:#607983; } .collection-audio-state, .collection-enabled-state { display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:900; white-space:nowrap; } .collection-audio-state.ok { background:#dff8ee; color:#087568; } .collection-audio-state.missing { background:#fff2c7; color:#8a5800; } .collection-enabled-state { background:#e8eef2; color:#4d6470; } .collection-rule.is-enabled .collection-enabled-state { background:#0f9f82; color:#fff; } .collection-rule-body { padding:18px; } .collection-status-control { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid #e2eaed; } .collection-status-control strong, .collection-status-control small { display:block; } .collection-status-control small { margin-top:3px; color:#6b7f87; } .switch-control { position:relative; display:inline-flex; flex:0 0 auto; } .switch-control input { position:absolute; opacity:0; pointer-events:none; } .switch-control span { position:relative; width:48px; height:26px; border-radius:999px; background:#cbd5db; cursor:pointer; transition:background .16s ease; } .switch-control span::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(15,23,42,.22); transition:transform .16s ease; } .switch-control input:checked + span { background:#0f9f82; } .switch-control input:checked + span::after { transform:translateX(22px); } .switch-control input:focus-visible + span { outline:3px solid rgba(45,212,191,.32); outline-offset:2px; } .collection-rule-grid { display:grid; grid-template-columns:minmax(220px,1.25fr) repeat(3,minmax(150px,.75fr)); gap:12px; } .collection-field { min-width:0; } .collection-field > span { display:block; margin-bottom:6px; color:#405965; font-size:11px; font-weight:900; text-transform:uppercase; } .collection-field input, .collection-field select { width:100%; min-height:42px; } .collection-field small { display:block; margin-top:5px; color:#71858e; } .collection-audio-box { display:grid; grid-template-columns:minmax(220px,1fr) auto minmax(220px,.75fr) auto; gap:12px; align-items:center; margin-top:16px; padding:14px; border:1px solid #d9e5e8; border-radius:8px; background:#f7fafb; } .collection-audio-box strong, .collection-audio-box small { display:block; } .collection-audio-box small { margin-top:4px; color:#6a7f88; } .collection-audio-box audio { width:100%; min-width:200px; height:36px; } .collection-upload-button { margin:0; white-space:nowrap; cursor:pointer; } .collection-upload-button input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; } .collection-audio-warning { color:#9a6500; font-size:12px; font-weight:800; } .collection-delete-audio { color:#9f2736; font-size:12px; font-weight:800; white-space:nowrap; } .collection-preview { margin-top:16px; padding:14px; border:1px solid #d7e3e6; border-radius:8px; background:#f8fbfc; } .collection-preview-head { display:flex; align-items:center; justify-content:space-between; gap:16px; } .collection-preview-head strong, .collection-preview-head small { display:block; } .collection-preview-head small { margin-top:4px; color:#6a7f88; } .collection-list-button { flex:0 0 auto; min-width:138px; } .collection-preview-result { margin-top:14px; border-top:1px solid #d7e3e6; padding-top:14px; } .collection-preview-result.is-loading p { margin:0; color:#607983; } .collection-preview-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; } .collection-preview-summary strong, .collection-preview-summary span { display:block; } .collection-preview-summary span { color:#607983; font-size:12px; } .collection-preview-result.has-error .collection-preview-summary { padding:11px 12px; border-radius:7px; background:#fff0f1; color:#a11f32; } .collection-preview-result.is-empty .collection-preview-summary { padding:11px 12px; border-radius:7px; background:#eef8f5; color:#176b5e; } .collection-preview-table-wrap { max-height:430px; overflow:auto; border:1px solid #d7e3e6; border-radius:8px; background:#fff; } .collection-preview-table { width:100%; margin:0; } .collection-preview-table th { position:sticky; top:0; z-index:1; background:#edf4f5; } .collection-preview-table td { vertical-align:top; } .collection-preview-table td strong, .collection-preview-table td small { display:block; } .collection-preview-table td small { margin-top:3px; color:#6a7f88; } .collection-channels { margin:16px 0 0; padding:0; border:0; } .collection-channels legend { margin-bottom:8px; color:#405965; font-size:11px; font-weight:900; text-transform:uppercase; } .collection-channel { display:inline-flex; align-items:center; gap:8px; min-height:40px; margin:0 8px 8px 0; padding:8px 13px; border:1px solid #ccdadd; border-radius:7px; background:#fff; color:#405965; cursor:pointer; font-weight:800; } .collection-channel.is-selected { border-color:#4fc7b0; background:#e8faf5; color:#087568; } .collection-interaction { margin-top:10px; overflow:hidden; border:1px solid #d4e1e6; border-radius:8px; background:#f8fafb; } .collection-interaction.is-enabled { border-color:#75cfbd; background:#f1fbf8; } .collection-interaction .collection-status-control { margin:0; padding:14px; border-bottom:0; } .collection-interaction.is-enabled .collection-status-control { border-bottom:1px solid #d4e8e3; } .collection-interaction-options, .collection-interaction-script, .collection-interaction .interaction-audio-manager { display:none; } .collection-interaction.is-enabled .collection-interaction-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 14px 14px; } .collection-interaction-options > label { display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px; align-items:start; min-width:0; margin:0; padding:11px; border:1px solid #d2e3df; border-radius:6px; background:#fff; cursor:pointer; } .collection-interaction-options input { width:17px; min-width:17px; height:17px; margin-top:1px; } .collection-interaction-options strong, .collection-interaction-options small { display:block; } .collection-interaction-options strong { color:#18384a; font-size:12px; } .collection-interaction-options small { margin-top:4px; color:#667c89; font-size:10px; line-height:1.4; } .collection-interaction.is-enabled .interaction-audio-manager { margin:0 14px 14px; border:1px solid #d2e3df; border-radius:6px; } .collection-interaction.is-enabled .collection-interaction-script { display:block; margin:0 14px 14px; padding:11px 12px; border-left:3px solid #1687c9; background:#edf7fd; } .collection-interaction-script strong { color:#155d86; font-size:10px; text-transform:uppercase; } .collection-interaction-script p { margin:5px 0 0; color:#365d70; font-size:11px; line-height:1.5; } .collection-savebar { position:sticky; bottom:12px; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; padding:14px 16px; border:1px solid #b8d8d1; border-radius:8px; background:rgba(247,252,251,.96); box-shadow:0 14px 34px rgba(15,42,51,.14); backdrop-filter:blur(8px); } .collection-savebar strong, .collection-savebar span { display:block; } .collection-savebar span { margin-top:3px; color:#637b84; font-size:12px; } .portal-theme-dark .collection-rule, .portal-theme-dark .collection-rule > summary, .portal-theme-dark .collection-channel { background:#13242d; border-color:#38505c; } .portal-theme-dark .collection-rule-summary strong, .portal-theme-dark .collection-status-control strong { color:#edf8fa; } .portal-theme-dark .collection-rule-summary small, .portal-theme-dark .collection-status-control small { color:#a9c0c7; } .portal-theme-dark .collection-rule-body { background:#0e1d25; } .portal-theme-dark .collection-audio-box { background:#13242d; border-color:#38505c; } .portal-theme-dark .collection-preview { background:#13242d; border-color:#38505c; } .portal-theme-dark .collection-preview-result { border-color:#38505c; } .portal-theme-dark .collection-preview-table-wrap { background:#0e1d25; border-color:#38505c; } .portal-theme-dark .collection-preview-table th { background:#1a3039; } .portal-theme-dark .collection-preview-result.has-error .collection-preview-summary { background:#3b2028; color:#ffb4bf; } .portal-theme-dark .collection-preview-result.is-empty .collection-preview-summary { background:#17352f; color:#9ce5d5; } .portal-theme-dark .collection-savebar { background:rgba(19,36,45,.96); border-color:#42635f; } .portal-theme-dark .collection-how, .portal-theme-dark .collection-interaction, .portal-theme-dark .collection-interaction-options > label { background:#13242d; border-color:#38505c; } .portal-theme-dark .collection-how h3, .portal-theme-dark .collection-how-steps strong, .portal-theme-dark .collection-interaction-options strong { color:#edf8fa; } .portal-theme-dark .collection-how-steps > div { background:#0e1d25; border-color:#38505c; } .portal-theme-dark .collection-view-nav, .portal-theme-dark .collection-monitor { background:#10222b; border-color:#38505c; } .portal-theme-dark .collection-view-nav-head { border-color:#38505c; background:#0d1d25; } .portal-theme-dark .collection-view-nav-head > div > span { color:#eef6f8; } .portal-theme-dark .collection-view-nav-state { border-color:#45616d; background:#132832; color:#bcd0d7; } .portal-theme-dark .collection-view-nav a { border-color:#3b5662; background:#142832; box-shadow:0 3px 8px rgba(0,0,0,.2); } .portal-theme-dark .collection-view-nav a:hover, .portal-theme-dark .collection-view-nav a.is-active, .portal-theme-dark .collection-operation-filters, .portal-theme-dark .collection-next-card, .portal-theme-dark .collection-integrity-card, .portal-theme-dark .collection-audit-timeline { background:#13242d; border-color:#38505c; } .portal-theme-dark .collection-view-nav a:hover { border-color:#52727e; background:#172e38; } .portal-theme-dark .collection-view-nav a.is-active { border-color:#35b79c; background:#123a33; box-shadow:0 4px 12px rgba(0,0,0,.24); } .portal-theme-dark .collection-view-nav a.is-active strong { color:#8ce7d3; } .portal-theme-dark .collection-view-nav-options a:nth-child(1) { border-color:#315b70; background:#142c38; } .portal-theme-dark .collection-view-nav-options a:nth-child(2) { border-color:#32695e; background:#14352f; } .portal-theme-dark .collection-view-nav-options a:nth-child(3) { border-color:#725d30; background:#342d1d; } .portal-theme-dark .collection-view-nav-options a:nth-child(1).is-active { border-color:#2b99c4; background:#176f92; } .portal-theme-dark .collection-view-nav-options a:nth-child(2).is-active { border-color:#35c4a7; background:#0d806c; } .portal-theme-dark .collection-view-nav-options a:nth-child(3).is-active { border-color:#d2a23e; background:#8c6717; } .portal-theme-dark .collection-view-nav a.is-active strong, .portal-theme-dark .collection-view-nav a.is-active small { color:#fff; } .portal-theme-dark .collection-view-nav strong, .portal-theme-dark .collection-monitor-head h3, .portal-theme-dark .collection-operation-kpis strong, .portal-theme-dark .collection-next-card strong, .portal-theme-dark .collection-integrity-card strong, .portal-theme-dark .collection-audit-head strong, .portal-theme-dark .collection-audit-list article strong { color:#eef6f8; } .portal-theme-dark .collection-monitor-meta, .portal-theme-dark .collection-operation-table th { background:#13242d; border-color:#38505c; } .portal-theme-dark .collection-operation-kpis { background:#0c1a22; border-color:#38505c; } .portal-theme-dark .collection-batch-bar { border-color:#32695e; background:#12332f; } .portal-theme-dark .collection-batch-bar > label { color:#d9efea; } .portal-theme-dark .collection-operation-table-wrap, .portal-theme-dark .collection-audit-head, .portal-theme-dark .collection-audit-list article { border-color:#38505c; } @media (max-width: 1120px) { .collection-operation-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } .collection-operation-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .collection-hero { grid-template-columns:1fr; } .collection-how-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .collection-rule-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .collection-audio-box { grid-template-columns:minmax(220px,1fr) auto; } } @media (max-width: 720px) { .collection-view-nav-head { padding:11px 12px; } .collection-view-nav-head small { display:none; } .collection-view-nav-options { gap:7px; padding:9px; } .collection-view-nav a { grid-template-columns:1fr; justify-items:center; gap:6px; min-height:76px; padding:9px 5px; text-align:center; } .collection-tab-index { width:26px; height:26px; } .collection-tab-copy strong { font-size:10px; line-height:1.2; } .collection-tab-copy small { display:none; } .collection-monitor-head { align-items:stretch; flex-direction:column; padding:18px 14px 14px; } .collection-refresh-form button { width:100%; } .collection-monitor-meta { align-items:flex-start; flex-direction:column; gap:7px; padding:10px 14px; } .collection-operation-kpis { grid-template-columns:1fr 1fr; gap:9px; padding:14px; } .collection-operation-kpis > div { min-height:96px; padding:14px; } .collection-operation-kpis > div:last-child { grid-column:1 / -1; } .collection-now-grid { grid-template-columns:1fr; padding:14px 14px 0; } .collection-operation-filters { grid-template-columns:1fr; margin:14px; padding:12px; } .collection-operation-filters button, .collection-operation-filters a { width:100%; } .collection-batch-bar { grid-template-columns:1fr auto; margin:0 14px 12px; } .collection-batch-bar > label { grid-column:1 / -1; } .collection-batch-bar button { grid-column:1 / -1; width:100%; } .collection-operation-table-wrap { margin:0 14px; overflow:visible; border:0; } .collection-operation-table, .collection-operation-table tbody { display:grid; min-width:0; gap:10px; } .collection-operation-table thead { display:none; } .collection-operation-table tr { display:block; overflow:hidden; border:1px solid #dce5ea; border-radius:6px; background:#fff; } .collection-operation-table td { display:grid; grid-template-columns:82px minmax(0,1fr); gap:9px; width:auto; padding:9px 11px; border-bottom:1px solid #e5ebee; } .collection-operation-table td::before { content:attr(data-label); color:#71808c; font-size:9px; font-weight:900; text-transform:uppercase; } .collection-operation-table td:last-child { border-bottom:0; } .collection-operation-table .collection-select-column { display:flex; align-items:center; justify-content:flex-start; width:auto; padding:9px 11px; text-align:left; } .collection-operation-table .collection-select-column::before { margin-right:9px; } .collection-operation-table td[colspan] { display:block; } .collection-operation-table td[colspan]::before { display:none; } .collection-report-foot { align-items:flex-start; flex-direction:column; padding:12px 14px 16px; } .collection-audit-timeline { margin:0 14px 16px; } .collection-audit-head { align-items:flex-start; flex-direction:column; } .collection-audit-list article { grid-template-columns:12px minmax(0,1fr); } .collection-audit-list article > .collection-work-status { grid-column:2; justify-self:start; } .collection-hero { padding:18px 14px; gap:18px; } .collection-hero h3 { font-size:24px; } .collection-hero-status { align-items:flex-start; flex-wrap:wrap; } .collection-hero-status small { width:100%; margin-left:19px; } .collection-flow { grid-template-columns:1fr; } .collection-how { padding:16px 14px; } .collection-how-steps, .collection-interaction.is-enabled .collection-interaction-options { grid-template-columns:1fr; } .interaction-audio-manager { grid-template-columns:1fr; align-items:stretch; } .interaction-audio-manager .collection-upload-button,.interaction-audio-manager .interaction-audio-download { width:100%; justify-content:center; text-align:center; } .interaction-audio-manager .collection-delete-audio { grid-column:auto; justify-self:start; } .collection-flow-step { min-height:0; } .collection-rule > summary { grid-template-columns:34px minmax(0,1fr); gap:9px; } .collection-audio-state, .collection-enabled-state { grid-column:2; justify-self:start; } .collection-rule-body { padding:14px 12px; } .collection-rule-grid, .collection-audio-box { grid-template-columns:1fr; } .collection-audio-box audio { min-width:0; } .collection-upload-button { width:100%; justify-content:center; } .collection-channel { width:100%; margin-right:0; justify-content:flex-start; } .collection-savebar { position:static; align-items:stretch; flex-direction:column; } .collection-savebar button { width:100%; } .collection-preview { padding:12px; } .collection-preview-head, .collection-preview-summary { align-items:stretch; flex-direction:column; } .collection-list-button { width:100%; } .collection-preview-table-wrap { max-height:none; overflow:visible; border:0; background:transparent; } .collection-preview-table, .collection-preview-table tbody { display:grid; gap:9px; } .collection-preview-table thead { display:none; } .collection-preview-table tr { display:block; overflow:hidden; border:1px solid #d7e3e6; border-radius:8px; background:#fff; } .collection-preview-table td { display:grid; grid-template-columns:78px minmax(0,1fr); gap:9px; width:auto; padding:8px 10px; border-bottom:1px solid #e2eaed; } .collection-preview-table td::before { content:attr(data-label); color:#6a7f88; font-size:10px; font-weight:900; text-transform:uppercase; } .collection-preview-table td:last-child { border-bottom:0; } .portal-theme-dark .collection-preview-table tr { background:#0e1d25; border-color:#38505c; } } .call-flow-section { margin:16px 0; } .call-flow-table { width:100%; table-layout:auto; } .call-flow-table th, .call-flow-table td { vertical-align:middle; } .call-endpoint { min-width:150px; max-width:260px; padding-left:11px; border-left:3px solid #94a3b8; } .call-endpoint strong, .call-endpoint span { display:block; overflow-wrap:anywhere; } .call-endpoint strong { color:var(--ink); font-size:13px; line-height:1.3; } .call-endpoint span { margin-top:3px; color:var(--muted); font-size:12px; line-height:1.35; } .call-endpoint-customer { border-color:#14b8a6; } .call-endpoint-extension { border-color:#3b82f6; } .call-endpoint-queue { border-color:#f59e0b; } .call-endpoint-secretary { border-color:#a855f7; } .call-direction { display:inline-flex; align-items:center; justify-content:center; min-width:76px; min-height:28px; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:900; } .call-direction.inbound { background:#dff8f1; color:#087568; } .call-direction.outbound { background:#e7f0ff; color:#1d4ed8; } .recordings-flow-table .mono { max-width:190px; font-size:11px; overflow-wrap:anywhere; } .portal-theme-dark .call-endpoint strong { color:#edf8fa; } .portal-theme-dark .call-direction.inbound { background:#123c36; color:#83e8d4; } .portal-theme-dark .call-direction.outbound { background:#172f52; color:#a9c9ff; } @media (max-width: 760px) { .calls-panel .sortable-table, .call-flow-table { display:block; min-width:0; } .calls-panel .sortable-table thead, .call-flow-table thead { display:none; } .calls-panel .sortable-table tbody, .call-flow-table tbody { display:grid; gap:10px; } .calls-panel .sortable-table tr, .call-flow-table tr { display:block; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 5px 16px rgba(15,42,51,.06); } .calls-panel .sortable-table td, .call-flow-table td { display:grid; grid-template-columns:82px minmax(0,1fr); gap:10px; align-items:center; width:auto; padding:9px 11px; border-bottom:1px solid var(--line); background:transparent !important; text-align:left; } .calls-panel .sortable-table td::before, .call-flow-table td::before { content:attr(data-label); color:var(--muted); font-size:10px; font-weight:900; line-height:1.3; text-transform:uppercase; } .calls-panel .sortable-table td:last-child, .call-flow-table td:last-child { border-bottom:0; } .call-endpoint { min-width:0; max-width:none; } .recordings-flow-table .mono { max-width:none; } .portal-theme-dark .calls-panel .sortable-table tr, .portal-theme-dark .call-flow-table tr { background:#13242d; } .calls-panel #callEmpty td, .call-flow-table td[colspan] { display:block; } .calls-panel #callEmpty td::before, .call-flow-table td[colspan]::before { display:none; } } .portal-theme-dark .cdc-api-card { border-color:#38505c; background:#10222b; } .portal-theme-dark .cdc-api-title h3 { color:#f4f8fa; } .portal-theme-dark .cdc-api-title p { color:#b7c6ce; } .portal-theme-dark .cdc-api-steps { border-color:#38505c; background:#13242d; } .portal-theme-dark .cdc-api-step { border-color:#38505c; } .portal-theme-dark .cdc-api-step strong { color:#eef5f7; } .portal-theme-dark .cdc-api-step small { color:#aabac2; } .portal-theme-dark .cdc-token-field > span { color:#d9e5ea; } .portal-theme-dark .cdc-token-field > input { border-color:#45606c; background:#13242d; color:#f4f8fa; } .portal-theme-dark .cdc-validation-result { background:#13242d; border-color:#38505c; color:#c3d0d6; } .portal-theme-dark .cdc-validation-result strong { color:#f4f8fa; } .portal-theme-dark .cdc-validation-result.is-loading { background:#172f52; color:#a9c9ff; } .portal-theme-dark .cdc-validation-result.is-success { background:#17352f; color:#9ce5d5; } .portal-theme-dark .cdc-validation-result.is-error { background:#3b2028; color:#ffb4bf; } .portal-theme-dark .cdc-validation-result.is-error strong { color:#ffb4bf; } .portal-theme-dark .cdc-telephony-config { border-color:#38505c; background:#13242d; } .portal-theme-dark .cdc-telephony-heading strong, .portal-theme-dark .cdc-master-toggle > span:first-child strong { color:#f4f8fa; } .portal-theme-dark .cdc-telephony-heading small, .portal-theme-dark .cdc-master-toggle > span:first-child small, .portal-theme-dark .cdc-sip-inventory-note { color:#aabac2; } .portal-theme-dark .cdc-sip-picker, .portal-theme-dark .cdc-master-toggle { border-color:#38505c; background:#10222b; } .portal-theme-dark .cdc-sip-picker label > span { color:#dce8ed; } .portal-theme-dark .cdc-sip-picker select { border-color:#49616d; background:#172b35; color:#f4f8fa; } @media (max-width: 720px) { .cdc-api-header { align-items:flex-start; flex-direction:column; padding:18px 18px 14px 22px; } .cdc-api-steps { grid-template-columns:1fr; } .cdc-api-step { padding:12px 18px 12px 22px; border-right:0; border-bottom:1px solid #e3e9ed; } .cdc-api-step:last-child { border-bottom:0; } .cdc-api-fields { grid-template-columns:1fr; padding:18px 18px 6px 22px; } .cdc-validate-button { width:100%; } .cdc-validation-result { grid-template-columns:auto minmax(0,1fr); margin:12px 18px 18px 22px; } .cdc-remove-token { margin:0 18px 18px 22px; } } /* Portal appearance system: Retro keeps the established interface; Classic is the Kapella-inspired shell. */ .portal-classic-topbar, .portal-classic-page-head { display:none; } .portal-preference-menu { position:relative; z-index:30; } .portal-preference-menu > summary { display:flex; align-items:center; justify-content:center; min-height:42px; padding:9px 14px; border:1px solid #cdd9e3; border-radius:9px; background:#fff; color:#173247; cursor:pointer; font-size:12px; font-weight:900; list-style:none; } .portal-preference-menu > summary::-webkit-details-marker { display:none; } .portal-preference-menu > summary::after { content:""; width:6px; height:6px; margin-left:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); } .portal-preference-menu[open] > summary::after { transform:translateY(2px) rotate(225deg); } .portal-preference-panel { position:absolute; top:calc(100% + 9px); right:0; width:min(330px,calc(100vw - 28px)); padding:16px; border:1px solid #d7e1e8; border-radius:8px; background:#fff; color:#153044; box-shadow:0 18px 45px rgba(15,38,53,.18); } .portal-preference-heading { padding-bottom:12px; border-bottom:1px solid #e4ebef; } .portal-preference-heading strong, .portal-preference-heading small { display:block; } .portal-preference-heading strong { font-size:15px; } .portal-preference-heading small { margin-top:3px; color:#667d8b; font-size:11px; } .portal-appearance-controls { display:grid; gap:14px; padding-top:14px; } .portal-appearance-group > span { display:block; margin-bottom:7px; color:#637986; font-size:10px; font-weight:900; text-transform:uppercase; } .portal-appearance-options { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px; border:1px solid #dbe4e9; border-radius:7px; background:#f2f5f7; } .portal-appearance-options button { min-height:36px; padding:7px 10px; border:0; border-radius:4px; background:transparent; color:#536b79; cursor:pointer; font-size:12px; font-weight:900; } .portal-appearance-options button.is-active { background:#0fa58c; color:#fff; box-shadow:0 2px 7px rgba(15,165,140,.24); } .portal-preference-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:15px -16px -16px; padding:12px 16px; border-top:1px solid #e4ebef; background:#f7f9fa; } .portal-preference-links a { display:flex; align-items:center; justify-content:center; min-height:34px; border:1px solid #d7e1e8; border-radius:4px; background:#fff; color:#244457; font-size:11px; font-weight:900; } .portal-visual-retro .portal-hero:has(.portal-preference-menu[open]) { z-index:26; overflow:visible; } .portal-visual-retro .portal-preference-menu-retro .portal-preference-panel { top:auto; bottom:calc(100% + 9px); } .portal-theme-dark .portal-preference-menu > summary, .portal-theme-dark .portal-preference-panel { border-color:#3b5662; background:#142832; color:#edf6f8; } .portal-theme-dark .portal-preference-heading, .portal-theme-dark .portal-preference-links { border-color:#38505c; } .portal-theme-dark .portal-preference-heading small, .portal-theme-dark .portal-appearance-group > span { color:#a9bdc5; } .portal-theme-dark .portal-appearance-options { border-color:#38505c; background:#0d1d25; } .portal-theme-dark .portal-appearance-options button { color:#b8cbd2; } .portal-theme-dark .portal-appearance-options button.is-active { color:#fff; } .portal-theme-dark .portal-preference-links { background:#0d1d25; } .portal-theme-dark .portal-preference-links a { border-color:#3b5662; background:#142832; color:#edf6f8; } .portal-visual-classic { --ink:#132b3a; --muted:#647987; --line:#dce4e9; --surface:#ffffff; min-height:100vh; background:#f1f4f7; color:var(--ink); } .portal-visual-classic .portal-main { max-width:1480px; padding:0 24px 36px; } .portal-visual-classic .portal-classic-topbar { position:sticky; top:0; z-index:24; display:grid; grid-template-columns:minmax(210px,.7fr) minmax(220px,1.3fr) auto; align-items:center; min-height:68px; margin:0 -24px 0; padding:0 24px; border-bottom:1px solid #dfe6ea; background:rgba(255,255,255,.97); box-shadow:0 2px 8px rgba(20,43,58,.05); backdrop-filter:blur(10px); } .portal-classic-brand { display:flex; align-items:center; gap:11px; min-width:0; color:#112c3e; } .portal-classic-brand img, .portal-classic-brand > span { width:38px; height:38px; flex:0 0 38px; border-radius:5px; object-fit:contain; } .portal-classic-brand img { padding:3px; border:1px solid #dce5e9; background:#fff; } .portal-classic-brand > span { display:flex; align-items:center; justify-content:center; background:#0fa58c; color:#fff; font-size:13px; font-weight:900; } .portal-classic-brand strong { overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; } .portal-classic-location { min-width:0; padding-left:22px; border-left:1px solid #e1e7eb; } .portal-classic-location span, .portal-classic-location strong { display:block; } .portal-classic-location span { color:#758895; font-size:10px; font-weight:800; text-transform:uppercase; } .portal-classic-location strong { margin-top:3px; overflow:hidden; color:#163247; font-size:14px; text-overflow:ellipsis; white-space:nowrap; } .portal-classic-account { display:flex; align-items:center; justify-content:flex-end; gap:10px; } .portal-classic-alerts { position:relative; display:flex; align-items:center; gap:7px; min-height:38px; padding:8px 11px; border:1px solid #d9e2e7; border-radius:5px; background:#fff; color:#4f6573; font-size:11px; font-weight:800; } .portal-classic-alerts > span { width:8px; height:8px; border-radius:50%; background:#0fa58c; box-shadow:0 0 0 3px #dff7f1; } .portal-preference-menu-classic > summary { justify-content:flex-start; min-width:190px; padding:5px 10px 5px 6px; border:0; background:transparent; } .portal-preference-menu-classic > summary:hover { background:#f2f6f7; } .portal-menu-avatar { display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin-right:9px; overflow:hidden; border-radius:50%; background:#143f51; color:#fff; } .portal-menu-avatar img { width:100%; height:100%; object-fit:cover; } .portal-menu-avatar b { font-size:13px; } .portal-preference-menu-classic > summary > span:nth-child(2) { min-width:0; flex:1; } .portal-preference-menu-classic > summary small, .portal-preference-menu-classic > summary strong { display:block; overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap; } .portal-preference-menu-classic > summary small { color:#0b8f7a; font-size:9px; font-weight:900; text-transform:uppercase; } .portal-preference-menu-classic > summary strong { margin-top:2px; color:#163247; font-size:12px; } .portal-preference-menu-classic .portal-account-extension { display:block; margin-top:2px; overflow:hidden; color:#74858f; font-size:9px; font-style:normal; font-weight:700; text-overflow:ellipsis; white-space:nowrap; } .portal-preference-menu-classic .portal-account-extension.is-linked { color:#087568; } .portal-visual-classic .portal-hero { display:none; } .portal-visual-classic .portal-classic-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:27px 2px 18px; } .portal-visual-classic .portal-did-strip-classic { display:flex; max-width:none; margin:0 0 14px; border-radius:5px; background:#fff; box-shadow:0 2px 7px rgba(20,43,58,.055); } .portal-visual-classic.portal-theme-dark .portal-did-strip-classic { border-color:#38505c; background:#142832; } .portal-classic-page-head > div:first-child > span { color:#0a9a82; font-size:10px; font-weight:900; text-transform:uppercase; } .portal-classic-page-head h1 { margin:4px 0 5px; color:#102b3d; font-size:25px; line-height:1.15; letter-spacing:0; } .portal-classic-page-head p { max-width:760px; margin:0; color:#697e8b; font-size:12px; } .portal-classic-plan { min-width:190px; padding:10px 14px; border-left:3px solid #0fa58c; background:#fff; box-shadow:0 1px 3px rgba(20,43,58,.06); } .portal-classic-plan small, .portal-classic-plan strong { display:block; } .portal-classic-plan small { color:#718591; font-size:9px; font-weight:900; text-transform:uppercase; } .portal-classic-plan strong { margin-top:3px; color:#18364a; font-size:12px; } .portal-visual-classic .portal-nav-box { position:sticky; top:68px; z-index:20; margin:0 0 20px; padding:10px; border:1px solid #dce4e9; border-radius:6px; background:rgba(255,255,255,.97); box-shadow:0 3px 10px rgba(20,43,58,.06); backdrop-filter:blur(10px); } .portal-visual-classic .portal-nav-head { display:none; } .portal-visual-classic .portal-tabs { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; overflow:visible; padding:0; } .portal-visual-classic .portal-tabs a { justify-content:flex-start; min-width:0; min-height:42px; padding:7px 9px; border:1px solid #dce4e9; border-radius:4px; background:#fff; color:#263f50; box-shadow:none; font-size:11px; line-height:1.15; white-space:normal; } .portal-visual-classic .portal-tabs a:hover { transform:none; border-color:#8acfc1; background:#f2fbf8; box-shadow:none; } .portal-visual-classic .portal-tabs a.active { border-color:#0fa58c; background:#0fa58c; color:#fff; box-shadow:0 3px 8px rgba(15,165,140,.18); } .portal-visual-classic .portal-tabs a.active::after { display:none; } .portal-visual-classic .portal-tab-icon { width:24px; height:24px; flex:0 0 24px; border-radius:4px; background:#e7f6f3; color:#087b69; font-size:8px; } .portal-visual-classic .portal-tabs a.active .portal-tab-icon { background:rgba(255,255,255,.2); color:#fff; } .portal-visual-classic .portal-card, .portal-visual-classic .panel, .portal-visual-classic .portal-kpi, .portal-visual-classic .collection-view-nav, .portal-visual-classic .collection-monitor, .portal-visual-classic .collection-rule, .portal-visual-classic .cdc-api-card { border-color:#dce4e9; border-radius:6px; background-color:#fff; background-image:none; box-shadow:0 2px 7px rgba(20,43,58,.055); } .portal-visual-classic .portal-card::before, .portal-visual-classic .portal-kpi::before, .portal-visual-classic .panel::before { border-radius:6px 6px 0 0; } .portal-visual-classic .portal-card h3, .portal-visual-classic .panel h2, .portal-visual-classic .portal-section-head h3 { color:#173247; letter-spacing:0; } .portal-visual-classic .portal-kpis { gap:12px; } .portal-visual-classic .portal-kpi { min-height:96px; padding:15px; } .portal-visual-classic .portal-kpi strong { color:#173247; font-size:25px; } .portal-visual-classic input, .portal-visual-classic select, .portal-visual-classic textarea { border-radius:4px; } .portal-visual-classic button, .portal-visual-classic .button, .portal-visual-classic .btn { border-radius:4px; } .portal-visual-classic table th { background:#f3f6f8; color:#4f6674; } .portal-visual-classic table td { border-color:#e2e8ec; } .portal-visual-classic.portal-theme-dark { --ink:#eef6f8; --muted:#a5b7c0; --line:#344c58; --surface:#12242d; background:#091820; color:#eef6f8; } .portal-visual-classic.portal-theme-dark .portal-classic-topbar { border-color:#314954; background:rgba(15,32,41,.97); box-shadow:0 2px 8px rgba(0,0,0,.24); } .portal-visual-classic.portal-theme-dark .portal-classic-brand, .portal-visual-classic.portal-theme-dark .portal-classic-location strong, .portal-visual-classic.portal-theme-dark .portal-preference-menu-classic > summary strong, .portal-visual-classic.portal-theme-dark .portal-classic-page-head h1, .portal-visual-classic.portal-theme-dark .portal-classic-plan strong { color:#eef6f8; } .portal-visual-classic.portal-theme-dark .portal-classic-brand img { border-color:#38505c; background:#fff; } .portal-visual-classic.portal-theme-dark .portal-classic-location { border-color:#314954; } .portal-visual-classic.portal-theme-dark .portal-classic-location span, .portal-visual-classic.portal-theme-dark .portal-classic-page-head p { color:#a4b7c0; } .portal-visual-classic.portal-theme-dark .portal-classic-alerts { border-color:#38505c; background:#132832; color:#c3d2d8; } .portal-visual-classic.portal-theme-dark .portal-preference-menu-classic > summary:hover { background:#142832; } .portal-visual-classic.portal-theme-dark .portal-classic-plan, .portal-visual-classic.portal-theme-dark .portal-nav-box, .portal-visual-classic.portal-theme-dark .portal-tabs a, .portal-visual-classic.portal-theme-dark .portal-card, .portal-visual-classic.portal-theme-dark .panel, .portal-visual-classic.portal-theme-dark .portal-kpi, .portal-visual-classic.portal-theme-dark .collection-view-nav, .portal-visual-classic.portal-theme-dark .collection-monitor, .portal-visual-classic.portal-theme-dark .collection-rule, .portal-visual-classic.portal-theme-dark .cdc-api-card { border-color:#38505c; background-color:#10222b; color:#edf6f8; } .portal-visual-classic.portal-theme-dark .portal-tabs a { color:#dce8ec; } .portal-visual-classic.portal-theme-dark .portal-tabs a:hover { border-color:#4e756f; background:#15312f; } .portal-visual-classic.portal-theme-dark .portal-tabs a.active { border-color:#18af96; background:#0d927d; color:#fff; } .portal-visual-classic.portal-theme-dark .portal-tab-icon { background:#173832; color:#8bdfcf; } .portal-visual-classic.portal-theme-dark .portal-card h3, .portal-visual-classic.portal-theme-dark .panel h2, .portal-visual-classic.portal-theme-dark .portal-section-head h3, .portal-visual-classic.portal-theme-dark .portal-kpi strong { color:#f1f7f9; } .portal-visual-classic.portal-theme-dark table th { background:#162c36; color:#bdd0d7; } .portal-visual-classic.portal-theme-dark table td { border-color:#38505c; } @media (max-width: 1180px) { .portal-visual-classic .portal-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); } } @media (max-width: 820px) { .portal-visual-classic .portal-main { padding:0 12px 24px; } .portal-visual-classic .portal-classic-topbar { grid-template-columns:minmax(0,1fr) auto; min-height:60px; margin:0 -12px; padding:0 12px; } .portal-classic-location, .portal-classic-alerts { display:none; } .portal-classic-brand strong { font-size:13px; } .portal-preference-menu-classic > summary { min-width:0; padding-right:5px; } .portal-preference-menu-classic > summary > span:nth-child(2) { display:none; } .portal-preference-menu-classic > summary::after { margin-left:5px; } .portal-preference-menu-classic .portal-preference-panel { position:fixed; top:66px; right:10px; } .portal-visual-classic .portal-classic-page-head { align-items:flex-start; padding:20px 0 14px; } .portal-classic-page-head h1 { font-size:22px; } .portal-classic-page-head p { font-size:11px; line-height:1.5; } .portal-classic-plan { display:none; } .portal-visual-classic .portal-nav-box { top:60px; margin-bottom:14px; padding:8px; border-radius:5px; } .portal-visual-classic .portal-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; overflow:visible; padding:0; } .portal-visual-classic .portal-tabs a { min-height:44px; padding:7px 8px; } .portal-visual-classic .portal-card, .portal-visual-classic .panel { margin-bottom:12px; padding:13px; border-radius:5px; } .portal-visual-classic .portal-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .portal-visual-classic .portal-kpi { min-height:88px; border-radius:5px; } .portal-visual-classic .portal-kpi strong { font-size:22px; } .portal-preference-menu-retro .portal-preference-panel { position:fixed; top:72px; right:12px; bottom:auto; } } /* Classic collection ruler: real rules become a clear chronological journey. */ .portal-visual-classic .collection-hero { grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr); gap:22px; padding:20px; border:1px solid #dce4e9; border-radius:6px; background:#fff; color:#173247; box-shadow:0 2px 7px rgba(20,43,58,.055); } .portal-visual-classic .collection-hero.is-enabled { border-color:#9cd8cc; } .portal-visual-classic .collection-eyebrow { color:#0a8f79; } .portal-visual-classic .collection-hero h3 { color:#173247; font-size:23px; letter-spacing:0; } .portal-visual-classic .collection-hero p { color:#647987; font-size:12px; } .portal-visual-classic .collection-hero-status { color:#647987; } .portal-visual-classic .collection-hero-status strong { color:#173247; } .portal-visual-classic .collection-hero-status small { color:#718591; } .portal-visual-classic .collection-flow { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .portal-visual-classic .collection-flow-step { position:relative; min-height:126px; border:1px solid #cfdbe2; border-radius:6px; background:#fff; box-shadow:0 3px 9px rgba(20,43,58,.07); } .portal-visual-classic .collection-flow-timing { min-height:28px; padding:8px 9px 7px; background:#2d77c7; color:#fff; font-size:9px; letter-spacing:0; } .portal-visual-classic .collection-flow-step.is-due .collection-flow-timing { background:#0fa58c; } .portal-visual-classic .collection-flow-step.is-overdue .collection-flow-timing { background:#d58a17; } .portal-visual-classic .collection-flow-timing::after { content:""; position:absolute; top:28px; left:50%; width:0; height:0; border:5px solid transparent; border-top-color:#2d77c7; transform:translateX(-50%); } .portal-visual-classic .collection-flow-step.is-due .collection-flow-timing::after { border-top-color:#0fa58c; } .portal-visual-classic .collection-flow-step.is-overdue .collection-flow-timing::after { border-top-color:#d58a17; } .portal-visual-classic .collection-flow-content { padding:15px 12px 12px; } .portal-visual-classic .collection-flow-number { border-color:#b8c9d3; background:#eef4f7; color:#48616f; } .portal-visual-classic .collection-flow-content strong { color:#173247; font-size:11px; } .portal-visual-classic .collection-flow-content small { color:#647987; } .portal-visual-classic .collection-flow-content em { color:#0b8d78; } .portal-visual-classic .collection-flow-empty { min-height:126px; border-color:#d6e1e6; background:#f7f9fa; color:#647987; } .portal-visual-classic .collection-rule-list { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; } .portal-visual-classic .collection-rule > summary { min-height:76px; } .portal-visual-classic .collection-rule[open] { grid-column:1 / -1; } .portal-visual-classic.portal-theme-dark .collection-hero, .portal-visual-classic.portal-theme-dark .collection-flow-step { border-color:#38505c; background:#10222b; color:#eef6f8; } .portal-visual-classic.portal-theme-dark .collection-hero h3, .portal-visual-classic.portal-theme-dark .collection-hero-status strong, .portal-visual-classic.portal-theme-dark .collection-flow-content strong { color:#eef6f8; } .portal-visual-classic.portal-theme-dark .collection-hero p, .portal-visual-classic.portal-theme-dark .collection-hero-status, .portal-visual-classic.portal-theme-dark .collection-hero-status small, .portal-visual-classic.portal-theme-dark .collection-flow-content small { color:#a9bdc5; } .portal-visual-classic.portal-theme-dark .collection-flow-number { border-color:#45606c; background:#17303a; color:#bcd0d7; } .portal-visual-classic.portal-theme-dark .collection-flow-empty { border-color:#38505c; background:#13242d; color:#a9bdc5; } @media (max-width: 1120px) { .portal-visual-classic .collection-hero { grid-template-columns:1fr; } .portal-visual-classic .collection-rule-list { grid-template-columns:1fr; } } @media (max-width: 720px) { .portal-visual-classic .collection-hero { padding:15px 12px; } .portal-visual-classic .collection-flow { grid-template-columns:1fr; } .portal-visual-classic .collection-flow-step { min-height:0; } .portal-visual-classic .collection-flow-content { grid-template-columns:32px minmax(0,1fr); } .portal-visual-classic .collection-rule > summary { grid-template-columns:34px minmax(0,1fr); } .portal-visual-classic .collection-rule .collection-audio-state, .portal-visual-classic .collection-rule .collection-enabled-state { grid-column:2; } } /* Meu Perfil now groups account data and the operational guide. */ .portal-profile-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 18px; } .portal-profile-sections a { display:flex; align-items:center; gap:12px; min-height:76px; padding:14px 16px; border:1px solid #cfdde6; border-radius:8px; background:#fff; color:#173247; box-shadow:0 8px 20px rgba(15,23,42,.05); } .portal-profile-sections a:hover { border-color:#74cfc0; background:#f4fbf9; } .portal-profile-sections a.active { border:2px solid #10a58e; background:#eaf9f5; box-shadow:0 12px 26px rgba(16,165,142,.14); } .portal-profile-section-icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:#e7f3f1; color:#08786b; font-size:11px; font-weight:950; } .portal-profile-sections a.active .portal-profile-section-icon { background:#10a58e; color:#fff; } .portal-profile-sections a > span:last-child { display:grid; gap:4px; min-width:0; } .portal-profile-sections strong { font-size:15px; } .portal-profile-sections small { color:#667b89; line-height:1.35; } /* Direct access to Voice Blast deserves a visible place without a new permission. */ .portal-tabs a.voice-blast-tab { border:2px solid #71cfc1; background:#eefbf8; color:#075f56; box-shadow:0 7px 18px rgba(15,165,140,.10); } .portal-tabs a.voice-blast-tab .portal-tab-icon { background:#ccefe8; color:#08786b; } .portal-tabs a.voice-blast-tab:hover { border-color:#10a58e; background:#e3f8f3; } .portal-tabs a.voice-blast-tab.active { border-color:#0d9f89; background:linear-gradient(135deg,#10b99b,#08786b); color:#fff; box-shadow:0 12px 26px rgba(15,165,140,.22); } .portal-tabs a.voice-blast-tab.active .portal-tab-icon { background:rgba(255,255,255,.2); color:#fff; } .portal-theme-dark .portal-profile-sections a { border-color:#3b5069; background:#132138; color:#f2f7ff; } .portal-theme-dark .portal-profile-sections a:hover, .portal-theme-dark .portal-profile-sections a.active { border-color:#38d4c2; background:#123631; } .portal-theme-dark .portal-profile-sections small { color:#b6c5d7; } .portal-theme-dark .portal-tabs a.voice-blast-tab { border-color:#278a7c !important; background:#0f332e !important; color:#c9fff5 !important; } .portal-theme-dark .portal-tabs a.voice-blast-tab.active { border-color:#38d4c2 !important; background:linear-gradient(135deg,#10a890,#087268) !important; color:#fff !important; } @media (max-width: 720px) { .portal-profile-sections { grid-template-columns:1fr; gap:8px; } .portal-profile-sections a { min-height:64px; padding:11px 12px; } .portal-profile-section-icon { flex-basis:36px; width:36px; height:36px; } .portal-tabs a.voice-blast-tab { white-space:normal; text-align:left; } } /* VOICE BLAST EXPERIENCE 20260728 */ .voice-blast-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) 180px minmax(240px,.7fr); gap:24px; align-items:center; margin-bottom:14px; padding:28px 30px; overflow:hidden; border:1px solid #0f766e; border-radius:8px; background:linear-gradient(120deg,#064e4a 0%,#0f766e 54%,#155e75 100%); color:#fff; box-shadow:0 18px 38px rgba(6,78,74,.18); } .voice-blast-hero::before { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg,#22d3ee 0 25%,#fbbf24 25% 50%,#34d399 50% 75%,#fb7185 75% 100%); } .voice-blast-hero-copy { position:relative; z-index:1; min-width:0; } .voice-blast-hero-copy > span { display:block; margin-bottom:7px; color:#99f6e4; font-size:10px; font-weight:950; text-transform:uppercase; } .voice-blast-hero-copy h3 { margin:0; color:#fff; font-size:28px; line-height:1.15; letter-spacing:0; } .voice-blast-hero-copy p { max-width:650px; margin:10px 0 0; color:#d9fffa; font-size:13px; line-height:1.55; } .voice-blast-hero-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; } .voice-blast-hero-tags span { padding:6px 9px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(255,255,255,.09); color:#fff; font-size:9px; font-weight:850; } .voice-blast-signal { position:relative; z-index:1; display:grid; justify-items:center; align-content:center; min-height:132px; padding:14px; border-left:1px solid rgba(255,255,255,.24); border-right:1px solid rgba(255,255,255,.24); } .voice-blast-signal strong { margin-top:9px; color:#fff; font-size:18px; letter-spacing:0; } .voice-blast-signal small { margin-top:2px; color:#bff8ef; font-size:9px; } .voice-blast-wave,.voice-blast-guide-wave { display:flex; align-items:center; justify-content:center; gap:5px; height:50px; } .voice-blast-wave i,.voice-blast-guide-wave i { display:block; width:5px; border-radius:999px; background:#fff; } .voice-blast-wave i:nth-child(1),.voice-blast-wave i:nth-child(9) { height:12px; opacity:.55; } .voice-blast-wave i:nth-child(2),.voice-blast-wave i:nth-child(8) { height:24px; background:#67e8f9; } .voice-blast-wave i:nth-child(3),.voice-blast-wave i:nth-child(7) { height:38px; background:#fbbf24; } .voice-blast-wave i:nth-child(4),.voice-blast-wave i:nth-child(6) { height:30px; background:#a7f3d0; } .voice-blast-wave i:nth-child(5) { height:50px; background:#fff; } .voice-blast-guard { position:relative; z-index:1; padding:15px 17px; border:1px solid #e4bd4f; border-left:4px solid #d99b08; border-radius:6px; background:#fff5ce; box-shadow:0 7px 18px rgba(70,52,8,.12); } .voice-blast-guard strong,.voice-blast-guard small { display:block; } .voice-blast-guard strong { color:#493400; font-size:13px; } .voice-blast-guard small { margin-top:6px; color:#604b18; font-size:10px; line-height:1.5; } .voice-blast-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 14px; } .voice-blast-overview > div { position:relative; min-height:104px; padding:16px 17px 14px; overflow:hidden; border:1px solid #d4e1e7; border-top:4px solid #0891b2; border-radius:7px; background:#fff; box-shadow:0 8px 20px rgba(15,23,42,.055); } .voice-blast-overview > div::after { content:""; position:absolute; top:17px; right:17px; width:12px; height:34px; border-radius:4px; background:#cffafe; box-shadow:-8px 8px 0 #e6f8fb,8px 6px 0 #a5f3fc; } .voice-blast-overview > div.is-amber { border-top-color:#d97706; } .voice-blast-overview > div.is-amber::after { background:#fde68a; box-shadow:-8px 8px 0 #fef3c7,8px 6px 0 #fbbf24; } .voice-blast-overview > div.is-green { border-top-color:#16a34a; } .voice-blast-overview > div.is-green::after { background:#bbf7d0; box-shadow:-8px 8px 0 #dcfce7,8px 6px 0 #4ade80; } .voice-blast-overview > div.is-coral { border-top-color:#e11d48; } .voice-blast-overview > div.is-coral::after { background:#fecdd3; box-shadow:-8px 8px 0 #ffe4e6,8px 6px 0 #fb7185; } .voice-blast-overview span,.voice-blast-overview strong,.voice-blast-overview small { display:block; } .voice-blast-overview span { color:#526979; font-size:9px; font-weight:950; text-transform:uppercase; } .voice-blast-overview strong { margin-top:6px; color:#143044; font-size:27px; line-height:1; } .voice-blast-overview small { margin-top:5px; color:#718591; font-size:9px; } .voice-blast-explainer { border:1px solid #d8e3e8; border-left:5px solid #0891b2; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.05); } .voice-blast-explainer-steps > div:nth-child(1) { border-top:3px solid #0891b2; background:#f0fbfd; } .voice-blast-explainer-steps > div:nth-child(2) { border-top:3px solid #d97706; background:#fffaf0; } .voice-blast-explainer-steps > div:nth-child(3) { border-top:3px solid #16a34a; background:#f3fbf5; } .voice-blast-explainer-steps > div:nth-child(4) { border-top:3px solid #e11d48; background:#fff5f6; } .voice-blast-workspace { grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start; } .voice-blast-form { padding:0; overflow:hidden; border-color:#cbd9e1; box-shadow:0 14px 32px rgba(15,23,42,.07); } .voice-blast-form-head { padding:21px 22px; border-bottom:1px solid #dce6eb; background:linear-gradient(90deg,#f7fbfc,#eef8f7); } .voice-blast-form-head h3 { font-size:20px; letter-spacing:0; } .voice-blast-form-head p { max-width:680px; margin:6px 0 0; color:#647b89; font-size:10px; line-height:1.45; } .voice-blast-form-head b { width:46px; height:46px; background:#0f766e; color:#fff; box-shadow:0 8px 16px rgba(15,118,110,.2); } .voice-blast-stage { position:relative; margin:0; padding:20px 22px 22px; border-bottom:1px solid #dce6eb; background:#fff; } .voice-blast-stage.is-identity { border-left:5px solid #0891b2; background:#f8fcfd; } .voice-blast-stage.is-files { border-left:5px solid #d97706; background:#fffdf8; } .voice-blast-stage.is-intelligence { border-left:5px solid #16a34a; background:#f8fcf9; } .voice-blast-stage.is-schedule { border-left:5px solid #e11d48; background:#fffafb; } .voice-blast-stage-head { display:flex; align-items:center; gap:12px; margin-bottom:15px; } .voice-blast-stage-head > span { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:#e0f2fe; color:#036985; font-size:10px; font-weight:950; } .is-files .voice-blast-stage-head > span { background:#fef3c7; color:#9a5805; } .is-intelligence .voice-blast-stage-head > span { background:#dcfce7; color:#167239; } .is-schedule .voice-blast-stage-head > span { background:#ffe4e6; color:#ae1239; } .voice-blast-stage-head strong,.voice-blast-stage-head small { display:block; } .voice-blast-stage-head strong { color:#173247; font-size:13px; } .voice-blast-stage-head small { margin-top:3px; color:#6c818e; font-size:9px; line-height:1.4; } .voice-blast-field { margin-top:0; } .voice-blast-field input,.voice-blast-date input,.voice-blast-window-times input { min-height:48px; border:1px solid #bfd0da; background:#fff; font-size:13px; box-shadow:inset 0 1px 2px rgba(15,23,42,.035); } .voice-blast-field input:focus,.voice-blast-date input:focus,.voice-blast-window-times input:focus { border-color:#0891b2; box-shadow:0 0 0 3px rgba(8,145,178,.13); } .voice-blast-upload-grid { margin-top:0; gap:12px; } .voice-blast-upload { min-height:178px; padding:18px; border:2px dashed #86bdd0; border-radius:7px; background:#f2fbfe; transition:border-color .16s ease,background .16s ease,transform .16s ease; } .voice-blast-upload:last-child { border-color:#e4ad54; background:#fff9ed; } .voice-blast-upload:hover { border-color:#0891b2; background:#eaf8fc; transform:translateY(-1px); } .voice-blast-upload:last-child:hover { border-color:#d97706; background:#fff5dc; } .voice-blast-upload-icon { width:52px; height:52px; border-radius:7px; background:#cff3fb; color:#08728c; font-size:11px; box-shadow:inset 0 0 0 1px rgba(8,114,140,.08); } .voice-blast-upload-icon.is-audio { background:#fde7b0; color:#9a5805; } .voice-blast-upload strong { font-size:13px; } .voice-blast-upload small { font-size:10px; line-height:1.5; } .voice-blast-upload em,.voice-blast-upload-actions em { color:#08728c; font-size:11px; } .voice-blast-upload:last-child em { color:#9a5805; } .voice-blast-upload.has-file { border-style:solid; border-color:#16a34a; background:#f0fbf3; } .voice-blast-audio { margin:12px 0 0; } .voice-blast-intelligence { margin-top:0; border:1px solid #abd9bd; border-radius:7px; background:#effaf3; } .voice-blast-intelligence-toggle { min-height:68px; align-items:center; padding:15px 17px; } .voice-blast-intelligence-toggle input { width:20px; height:20px; accent-color:#16a34a; } .voice-blast-intelligence-toggle strong { color:#145c2f; font-size:13px; } .voice-blast-intelligence.is-enabled { border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.09); } .interaction-audio-manager { border-top-color:#abd9bd; } .voice-blast-schedule { gap:12px; margin-top:0; } .voice-blast-schedule > label:not(.voice-blast-date) { position:relative; min-height:84px; align-items:center; padding:14px 15px; border:2px solid #d4dfe5; border-radius:7px; background:#fff; cursor:pointer; } .voice-blast-schedule > label:not(.voice-blast-date):has(input:checked) { border-color:#e11d48; background:#fff0f3; box-shadow:0 0 0 3px rgba(225,29,72,.08); } .voice-blast-schedule input[type="radio"] { width:19px; height:19px; accent-color:#e11d48; } .voice-blast-schedule strong { font-size:12px; } .voice-blast-schedule small { font-size:9px; line-height:1.45; } .voice-blast-window { margin-top:15px; padding:17px; border:1px solid #f0b7c4; border-radius:7px; background:#fff; } .voice-blast-window legend { color:#a7193c; } .voice-blast-window .collection-weekdays label { min-height:42px; border-radius:6px; } .voice-blast-window .collection-weekdays label.is-selected { border-color:#e11d48; background:#ffe6eb; color:#a7193c; box-shadow:inset 0 -3px #e11d48; } .voice-blast-window p { padding:10px 12px; border-left:3px solid #f59e0b; background:#fff8e7; color:#705319; } .voice-blast-submit { min-height:66px; margin:0; padding:13px 22px; border:0; border-radius:0; background:linear-gradient(90deg,#0f766e,#0b8f80); color:#fff; box-shadow:none; } .voice-blast-submit > span { text-align:left; } .voice-blast-submit strong { display:block; font-size:15px; } .voice-blast-submit small { margin-top:3px; font-size:9px; } .voice-blast-submit > b { font-size:26px; font-weight:500; } .voice-blast-submit:hover { background:linear-gradient(90deg,#0b625c,#087b70); } .voice-blast-guide { position:sticky; top:78px; overflow:hidden; padding:0; border-color:#164e63; background:#123f4d; color:#fff; box-shadow:0 14px 32px rgba(18,63,77,.16); } .voice-blast-guide > span,.voice-blast-guide > h3,.voice-blast-guide > ol,.voice-blast-guide-note { margin-left:20px; margin-right:20px; } .voice-blast-guide > span { margin-top:20px; color:#67e8f9; } .voice-blast-guide h3 { color:#fff; font-size:19px; letter-spacing:0; } .voice-blast-guide-wave { justify-content:flex-start; height:54px; margin:16px 0 2px; padding:0 20px; background:#0d3440; } .voice-blast-guide-wave i { width:4px; background:#67e8f9; } .voice-blast-guide-wave i:nth-child(1),.voice-blast-guide-wave i:nth-child(7) { height:12px; } .voice-blast-guide-wave i:nth-child(2),.voice-blast-guide-wave i:nth-child(6) { height:22px; background:#fbbf24; } .voice-blast-guide-wave i:nth-child(3),.voice-blast-guide-wave i:nth-child(5) { height:36px; } .voice-blast-guide-wave i:nth-child(4) { height:46px; background:#fff; } .voice-blast-guide ol { margin-top:0; } .voice-blast-guide li { border-top-color:rgba(255,255,255,.13); } .voice-blast-guide li b { background:#fff; color:#164e63; } .voice-blast-guide li:nth-child(2) b { background:#fef3c7; color:#92400e; } .voice-blast-guide li:nth-child(3) b { background:#dcfce7; color:#166534; } .voice-blast-guide li:nth-child(4) b { background:#ffe4e6; color:#9f1239; } .voice-blast-guide li strong { color:#fff; font-size:12px; } .voice-blast-guide li small { color:#c7e2e7; font-size:9px; } .voice-blast-guide-note { margin-top:14px; margin-bottom:20px; padding:13px; border-left:4px solid #fbbf24; background:#fff8e7; color:#604711; } .voice-blast-guide-note strong,.voice-blast-guide-note small { display:block; } .voice-blast-guide-note strong { font-size:11px; } .voice-blast-guide-note small { margin-top:4px; font-size:9px; line-height:1.45; } .voice-blast-history { border-top:5px solid #0891b2; box-shadow:0 12px 28px rgba(15,23,42,.06); } .voice-blast-history-head h3 { font-size:20px; letter-spacing:0; } .voice-blast-list { display:grid; gap:10px; margin-top:14px; } .voice-blast-list article { padding:14px; border:1px solid #dce5ea; border-left:4px solid #0891b2; border-radius:7px; background:#f9fbfc; } .voice-blast-list article:last-child { border-bottom:1px solid #dce5ea; } .portal-theme-dark .voice-blast-hero { border-color:#2dd4bf; background:linear-gradient(120deg,#083d3a,#0b625b 56%,#164e63); } .portal-theme-dark .voice-blast-guard { border-color:#8b712d; border-left-color:#fbbf24; background:#302917; box-shadow:none; } .portal-theme-dark .voice-blast-guard strong { color:#fff4bf; } .portal-theme-dark .voice-blast-guard small { color:#eadb9a; } .portal-theme-dark .voice-blast-overview > div { border-color:#3b5069; background:#132138; } .portal-theme-dark .voice-blast-overview strong,.portal-theme-dark .voice-blast-stage-head strong { color:#f3f8ff; } .portal-theme-dark .voice-blast-overview span,.portal-theme-dark .voice-blast-overview small,.portal-theme-dark .voice-blast-stage-head small { color:#b7c8d7; } .portal-theme-dark .voice-blast-stage { border-bottom-color:#344a5f; background:#122033; } .portal-theme-dark .voice-blast-stage.is-identity { background:#102734; } .portal-theme-dark .voice-blast-stage.is-files { background:#2c261b; } .portal-theme-dark .voice-blast-stage.is-intelligence { background:#14281e; } .portal-theme-dark .voice-blast-stage.is-schedule { background:#2a1d25; } .portal-theme-dark .voice-blast-form-head { border-color:#344a5f; background:#13263a; } .portal-theme-dark .voice-blast-form-head p { color:#b5c6d5; } .portal-theme-dark .voice-blast-upload { border-color:#3f7b8d; background:#132c38; } .portal-theme-dark .voice-blast-upload:last-child { border-color:#8b6b35; background:#2e291d; } .portal-theme-dark .voice-blast-intelligence { border-color:#33704a; background:#153020; } .portal-theme-dark .voice-blast-intelligence-toggle strong { color:#baf1cb; } .portal-theme-dark .voice-blast-schedule > label:not(.voice-blast-date),.portal-theme-dark .voice-blast-window { border-color:#57404a; background:#251d26; } .portal-theme-dark .voice-blast-schedule > label:not(.voice-blast-date):has(input:checked) { border-color:#fb7185; background:#3a202a; } .portal-theme-dark .voice-blast-list article { border-color:#3b5069; border-left-color:#22d3ee; background:#132138; } @media (max-width:1100px) { .voice-blast-hero { grid-template-columns:minmax(0,1fr) 160px; } .voice-blast-guard { grid-column:1/-1; padding:12px 0 0; border-left:0; border-top:2px solid #fbbf24; } .voice-blast-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:980px) { .voice-blast-workspace { grid-template-columns:1fr; } .voice-blast-guide { position:relative; top:auto; display:block; } .voice-blast-guide ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; } } @media (max-width:700px) { .voice-blast-hero { grid-template-columns:1fr; gap:16px; padding:22px 18px; } .voice-blast-hero-copy h3 { font-size:23px; } .voice-blast-signal { min-height:82px; border:0; border-top:1px solid rgba(255,255,255,.24); border-bottom:1px solid rgba(255,255,255,.24); } .voice-blast-overview { gap:8px; } .voice-blast-overview > div { min-height:94px; padding:14px; } .voice-blast-overview strong { font-size:23px; } .voice-blast-stage { padding:17px 14px 19px; } .voice-blast-form-head { padding:18px 14px; } .voice-blast-form-head b { width:40px; height:40px; } .voice-blast-stage-head { align-items:flex-start; } .voice-blast-upload-grid,.voice-blast-schedule,.voice-blast-window-times { grid-template-columns:1fr; } .voice-blast-upload { min-height:160px; } .voice-blast-window .collection-weekdays { grid-template-columns:repeat(4,minmax(0,1fr)); } .voice-blast-guide ol { grid-template-columns:1fr; } .interaction-audio-manager { grid-template-columns:1fr; } .interaction-audio-manager .collection-delete-audio { grid-column:auto; justify-self:start; } .voice-blast-submit { padding:13px 16px; } } @media (max-width:430px) { .voice-blast-overview { grid-template-columns:1fr; } .voice-blast-hero-tags { display:grid; grid-template-columns:1fr; } .voice-blast-hero-tags span { text-align:center; } .voice-blast-window .collection-weekdays { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* MOBILE PORTAL HEADER SCROLL FIX 20260728 Touch devices can report a wide landscape viewport. Pointer detection keeps the large menu from covering the working area in that case. */ @media (max-width:900px), (hover:none) and (pointer:coarse) { .is-portal-page > .app-header { position:relative !important; top:auto !important; z-index:12; } .portal-shell .portal-classic-topbar, .portal-shell .portal-nav-box, .portal-visual-classic .portal-nav-box { position:relative !important; top:auto !important; z-index:8; } .portal-shell .portal-nav-box { backdrop-filter:none; } } /* CLIENT PORTAL HUMAN UX 20260728 Shared visual hierarchy for every client workspace except Voice Blast, which has its own purpose-built experience. */ .portal-workspace:not(.portal-workspace--voice_blast) { --workspace-accent:#0f766e; --workspace-accent-strong:#115e59; --workspace-soft:#eaf8f5; --workspace-line:#b9ddd6; display:block; min-width:0; margin-top:14px; } .portal-workspace--agents,.portal-workspace--dashboard { --workspace-accent:#059669; --workspace-accent-strong:#047857; --workspace-soft:#ecfdf5; --workspace-line:#a7f3d0; } .portal-workspace--calls { --workspace-accent:#0284c7; --workspace-accent-strong:#0369a1; --workspace-soft:#eff8ff; --workspace-line:#bae6fd; } .portal-workspace--recordings,.portal-workspace--audios { --workspace-accent:#7c3aed; --workspace-accent-strong:#6d28d9; --workspace-soft:#f5f3ff; --workspace-line:#ddd6fe; } .portal-workspace--productivity,.portal-workspace--reports { --workspace-accent:#2563eb; --workspace-accent-strong:#1d4ed8; --workspace-soft:#eff6ff; --workspace-line:#bfdbfe; } .portal-workspace--financial { --workspace-accent:#d97706; --workspace-accent-strong:#b45309; --workspace-soft:#fff8e8; --workspace-line:#fde2a7; } .portal-workspace--tickets { --workspace-accent:#e11d48; --workspace-accent-strong:#be123c; --workspace-soft:#fff1f2; --workspace-line:#fecdd3; } .portal-workspace--history { --workspace-accent:#475569; --workspace-accent-strong:#334155; --workspace-soft:#f1f5f9; --workspace-line:#cbd5e1; } .portal-workspace--profile,.portal-workspace--access_users,.portal-workspace--instructions { --workspace-accent:#0891b2; --workspace-accent-strong:#0e7490; --workspace-soft:#ecfeff; --workspace-line:#a5f3fc; } .portal-workspace--digital_collection { --workspace-accent:#0f766e; --workspace-accent-strong:#115e59; --workspace-soft:#ecfdf5; --workspace-line:#a7f3d0; } .portal-workspace:not(.portal-workspace--voice_blast) > .portal-card, .portal-workspace:not(.portal-workspace--voice_blast) > .detail-board, .portal-workspace:not(.portal-workspace--voice_blast) > .portal-kpis, .portal-workspace:not(.portal-workspace--voice_blast) > .portal-grid, .portal-workspace:not(.portal-workspace--voice_blast) > .collection-hero, .portal-workspace:not(.portal-workspace--voice_blast) > .collection-how, .portal-workspace:not(.portal-workspace--voice_blast) > .collection-plain-guide, .portal-workspace:not(.portal-workspace--voice_blast) > .collection-view-nav, .portal-workspace:not(.portal-workspace--voice_blast) > .collection-monitor { position:relative; } .portal-workspace:not(.portal-workspace--voice_blast) > .portal-card:first-child, .portal-workspace:not(.portal-workspace--voice_blast) > .detail-board:first-child, .portal-workspace:not(.portal-workspace--voice_blast) > .collection-hero:first-child, .portal-workspace:not(.portal-workspace--voice_blast) > .collection-monitor:first-child { border-top:5px solid var(--workspace-accent); } .portal-workspace:not(.portal-workspace--voice_blast) .portal-card { border-color:#d5e0e8; border-radius:7px; background:#fff; box-shadow:0 10px 26px rgba(15,42,51,.065); } .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head { align-items:center; min-height:58px; margin:-16px -16px 18px; padding:15px 16px; border-bottom:1px solid #dbe5eb; background:linear-gradient(90deg,var(--workspace-soft),#fff 68%); } .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head > div:first-child { min-width:0; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head h2, .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head h3 { margin:0; color:#153149; font-size:18px; line-height:1.2; letter-spacing:0; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head p { max-width:780px; margin:5px 0 0; color:#617688; line-height:1.45; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head > .badge { border-color:var(--workspace-line); background:var(--workspace-soft); color:var(--workspace-accent-strong); } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpis, .portal-workspace:not(.portal-workspace--voice_blast) .insight-grid, .portal-workspace:not(.portal-workspace--voice_blast) .finance-summary, .portal-workspace:not(.portal-workspace--voice_blast) .call-summary, .portal-workspace:not(.portal-workspace--voice_blast) .productivity-scoreboard { gap:10px; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi { position:relative; min-height:112px; overflow:hidden; padding:16px 15px 14px; border:1px solid #d8e3ea; border-top:4px solid var(--workspace-accent); border-radius:7px; background:#fff; box-shadow:0 7px 18px rgba(15,42,51,.05); } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi::after { content:""; position:absolute; right:13px; bottom:13px; width:26px; height:26px; border:7px solid var(--workspace-line); border-radius:50%; opacity:.58; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi.ok { border-top-color:#16a34a; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi.info { border-top-color:#0284c7; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi.warn { border-top-color:#d97706; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi.danger { border-top-color:#dc2626; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi.violet { border-top-color:#7c3aed; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi > span { position:relative; z-index:1; color:#647887; font-size:9px; font-weight:950; text-transform:uppercase; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi > strong { position:relative; z-index:1; display:block; margin-top:7px; color:#102d43; font-size:25px; line-height:1; letter-spacing:0; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi > small { position:relative; z-index:1; display:block; max-width:calc(100% - 32px); margin-top:7px; color:#6d8190; line-height:1.35; } .portal-workspace:not(.portal-workspace--voice_blast) a.portal-kpi:hover { border-color:var(--workspace-accent); transform:translateY(-2px); box-shadow:0 12px 24px rgba(15,42,51,.1); } .portal-workspace:not(.portal-workspace--voice_blast) .toolbar, .portal-workspace:not(.portal-workspace--voice_blast) .collection-operation-filters, .portal-workspace:not(.portal-workspace--voice_blast) .portal-call-period-toolbar, .portal-workspace:not(.portal-workspace--voice_blast) .portal-custom-period-form { gap:10px; margin:14px 0; padding:14px; border:1px solid #d4e1e8; border-left:4px solid var(--workspace-accent); border-radius:7px; background:#f7fafc; } .portal-workspace:not(.portal-workspace--voice_blast) .toolbar label, .portal-workspace:not(.portal-workspace--voice_blast) .collection-operation-filters label, .portal-workspace:not(.portal-workspace--voice_blast) .portal-custom-period-form label { color:#50687a; font-size:9px; font-weight:950; text-transform:uppercase; } .portal-workspace:not(.portal-workspace--voice_blast) input, .portal-workspace:not(.portal-workspace--voice_blast) select, .portal-workspace:not(.portal-workspace--voice_blast) textarea { min-height:42px; border-color:#bfd0dc; border-radius:6px; background:#fff; } .portal-workspace:not(.portal-workspace--voice_blast) input:focus, .portal-workspace:not(.portal-workspace--voice_blast) select:focus, .portal-workspace:not(.portal-workspace--voice_blast) textarea:focus { border-color:var(--workspace-accent); outline:0; box-shadow:0 0 0 3px color-mix(in srgb,var(--workspace-accent) 14%,transparent); } .portal-workspace:not(.portal-workspace--voice_blast) button:not(.sort-button), .portal-workspace:not(.portal-workspace--voice_blast) .button { min-height:40px; border-radius:6px; font-weight:850; } .portal-workspace:not(.portal-workspace--voice_blast) button.primary, .portal-workspace:not(.portal-workspace--voice_blast) .button.primary { border-color:var(--workspace-accent); background:var(--workspace-accent); } .portal-workspace:not(.portal-workspace--voice_blast) button.primary:hover, .portal-workspace:not(.portal-workspace--voice_blast) .button.primary:hover { border-color:var(--workspace-accent-strong); background:var(--workspace-accent-strong); } .portal-workspace:not(.portal-workspace--voice_blast) .table-scroll, .portal-workspace:not(.portal-workspace--voice_blast) .collection-operation-table-wrap { overflow:auto; border:1px solid #cfdae3; border-radius:7px; background:#fff; box-shadow:0 5px 16px rgba(15,42,51,.04); } .portal-workspace:not(.portal-workspace--voice_blast) table { border-collapse:separate; border-spacing:0; } .portal-workspace:not(.portal-workspace--voice_blast) table thead th { position:sticky; top:0; z-index:2; padding:11px 10px; border-bottom:1px solid #c5d4df; background:#eaf0f6; color:#314b61; font-size:9px; font-weight:950; text-transform:uppercase; } .portal-workspace:not(.portal-workspace--voice_blast) table tbody td { padding:11px 10px; border-bottom:1px solid #dce6ec; color:#213d52; vertical-align:middle; } .portal-workspace:not(.portal-workspace--voice_blast) table tbody tr:nth-child(even) td { background:#f8fbfc; } .portal-workspace:not(.portal-workspace--voice_blast) table tbody tr:hover td { background:var(--workspace-soft); } .portal-workspace:not(.portal-workspace--voice_blast) table tbody tr:last-child td { border-bottom:0; } .portal-workspace:not(.portal-workspace--voice_blast) td[colspan] { padding:26px 16px; color:#6c7f8d; text-align:center; } .portal-workspace:not(.portal-workspace--voice_blast) .badge, .portal-workspace:not(.portal-workspace--voice_blast) .status-chip, .portal-workspace:not(.portal-workspace--voice_blast) .duration-badge, .portal-workspace:not(.portal-workspace--voice_blast) .call-direction { white-space:normal; line-height:1.25; } /* Module-specific hierarchy */ .portal-workspace--agents .monitor-live-head, .portal-workspace--calls .insight-hero, .portal-workspace--productivity .productivity-hero, .portal-workspace--financial .finance-hero, .portal-workspace--tickets .call-center-hero { overflow:hidden; border:1px solid var(--workspace-line); border-left:5px solid var(--workspace-accent); border-radius:7px; background:linear-gradient(120deg,var(--workspace-soft),#fff 64%); } .portal-workspace--agents .status-strip { gap:10px; } .portal-workspace--agents .status-tile { min-height:118px; border-radius:7px; box-shadow:0 8px 18px rgba(15,42,51,.07); } .portal-workspace--agents .monitor-alert { min-height:78px; padding:14px 16px; border-radius:7px; } .portal-workspace--agents .monitor-title { min-height:46px; padding:12px 14px; border-radius:6px 6px 0 0; background:#15384d; color:#fff; } .portal-workspace--agents .monitor-extension, .portal-workspace--agents .monitor-queue { border-radius:7px; box-shadow:0 6px 16px rgba(15,42,51,.05); } .portal-workspace--recordings .archive-policy > div, .portal-workspace--productivity .productivity-awards > div, .portal-workspace--productivity .productivity-chart-card { border-radius:7px; box-shadow:0 6px 16px rgba(15,42,51,.045); } .portal-workspace--financial .finance-main { border-radius:7px; background:linear-gradient(135deg,#12495a,#0f766e); } .portal-workspace--financial .finance-recharge-form { border-radius:7px; } .portal-workspace--profile .portal-public-gate, .portal-workspace--access_users .access-groups-panel, .portal-workspace--audios .portal-card { border-left:5px solid var(--workspace-accent); } .portal-workspace--history > .portal-card:nth-child(odd), .portal-workspace--reports > .portal-card:nth-child(odd) { border-left:4px solid var(--workspace-accent); } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) { --workspace-soft:#17283a; --workspace-line:#3c5368; } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-card, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .table-scroll, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .collection-operation-table-wrap { border-color:#344b60; background:#122033; } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head { border-color:#344b60; background:linear-gradient(90deg,#172d3f,#122033 72%); } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head h2, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head h3, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi > strong, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) table tbody td { color:#eef6fc; } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head p, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi > span, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi > small { color:#b2c4d2; } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .toolbar, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .collection-operation-filters, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-call-period-toolbar, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-custom-period-form { border-color:#3a5267; background:#17263a; } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) input, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) select, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) textarea { border-color:#465d72; background:#101d2e; color:#f3f8fb; } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) table thead th { border-color:#465d72; background:#1d3247; color:#d9e7f1; } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) table tbody td { border-color:#30465b; background:#122033; } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) table tbody tr:nth-child(even) td { background:#15253a; } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) table tbody tr:hover td { background:#1b3345; } @media (max-width:980px) { .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpis, .portal-workspace:not(.portal-workspace--voice_blast) .insight-grid, .portal-workspace:not(.portal-workspace--voice_blast) .finance-summary, .portal-workspace:not(.portal-workspace--voice_blast) .call-summary, .portal-workspace:not(.portal-workspace--voice_blast) .productivity-scoreboard { grid-template-columns:repeat(2,minmax(0,1fr)); } .portal-workspace--agents .status-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head { align-items:flex-start; } } @media (max-width:700px) { .portal-workspace:not(.portal-workspace--voice_blast) { margin-top:10px; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-card { margin-bottom:12px; padding:13px; overflow:visible; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head { min-height:0; margin:-13px -13px 14px; padding:14px 13px; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head h2, .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head h3 { font-size:16px; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpis, .portal-workspace:not(.portal-workspace--voice_blast) .insight-grid, .portal-workspace:not(.portal-workspace--voice_blast) .finance-summary, .portal-workspace:not(.portal-workspace--voice_blast) .call-summary, .portal-workspace:not(.portal-workspace--voice_blast) .productivity-scoreboard { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi { min-height:100px; padding:13px 12px; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi > strong { font-size:21px; } .portal-workspace:not(.portal-workspace--voice_blast) .toolbar, .portal-workspace:not(.portal-workspace--voice_blast) .collection-operation-filters, .portal-workspace:not(.portal-workspace--voice_blast) .portal-call-period-toolbar, .portal-workspace:not(.portal-workspace--voice_blast) .portal-custom-period-form { display:grid; grid-template-columns:1fr; padding:12px; } .portal-workspace:not(.portal-workspace--voice_blast) .toolbar > div, .portal-workspace:not(.portal-workspace--voice_blast) .toolbar input, .portal-workspace:not(.portal-workspace--voice_blast) .toolbar select, .portal-workspace:not(.portal-workspace--voice_blast) .toolbar button, .portal-workspace:not(.portal-workspace--voice_blast) .toolbar .button { width:100%; min-width:0; } .portal-workspace:not(.portal-workspace--voice_blast) .table-scroll, .portal-workspace:not(.portal-workspace--voice_blast) .collection-operation-table-wrap { max-width:100%; } .portal-workspace--agents .status-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .portal-workspace--agents .status-tile { min-height:102px; padding:14px; } .portal-workspace--agents .monitor-alerts,.portal-workspace--agents .monitor-layout { grid-template-columns:1fr; } .portal-workspace--productivity .productivity-awards, .portal-workspace--productivity .productivity-charts, .portal-workspace--recordings .archive-policy { grid-template-columns:1fr; } .portal-workspace--financial .finance-hero, .portal-workspace--tickets .call-center-hero { grid-template-columns:1fr; } } @media (max-width:430px) { .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpis, .portal-workspace:not(.portal-workspace--voice_blast) .insight-grid, .portal-workspace:not(.portal-workspace--voice_blast) .finance-summary, .portal-workspace:not(.portal-workspace--voice_blast) .call-summary, .portal-workspace:not(.portal-workspace--voice_blast) .productivity-scoreboard, .portal-workspace--agents .status-strip { grid-template-columns:1fr; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi { min-height:92px; } } /* PORTAL DESIGN CORRECTION 20260728 Apple-design principles: restraint, predictable hierarchy, immediate touch feedback and compact layouts that preserve context on a phone. */ .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards > div, .portal-workspace:not(.portal-workspace--voice_blast) .detail-mini > div, .portal-workspace:not(.portal-workspace--voice_blast) .usage-mini > div, .portal-workspace:not(.portal-workspace--voice_blast) .archive-policy > div, .portal-workspace:not(.portal-workspace--voice_blast) .agent-activity-summary > div, .portal-workspace:not(.portal-workspace--voice_blast) .diagnostic-card, .portal-workspace:not(.portal-workspace--voice_blast) .access-group-card { overflow:hidden; border-radius:7px; box-shadow:0 5px 14px rgba(15,42,51,.045); } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards > div { min-height:98px; padding:14px; border-top:3px solid var(--workspace-accent); } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards > div:nth-child(1) { border-top-color:#16a34a; } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards > div:nth-child(2) { border-top-color:#0284c7; } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards > div:nth-child(3) { border-top-color:#d97706; } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards > div:nth-child(4) { border-top-color:#7c3aed; } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards strong { margin:8px 0 4px; color:#173149; font-size:21px; line-height:1.1; letter-spacing:0; } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards small { line-height:1.35; } .portal-workspace--reports .call-flow-section { border-left:5px solid #2563eb; } .portal-workspace--reports .call-flow-section .portal-section-head { background:linear-gradient(90deg,#eff6ff,#fff 72%); } .portal-workspace--reports .agent-activity-report { border-top-color:#2563eb; } .portal-workspace--reports .agent-activity-eyebrow { color:#1d4ed8; } .portal-workspace:not(.portal-workspace--voice_blast) a, .portal-workspace:not(.portal-workspace--voice_blast) button { -webkit-tap-highlight-color:transparent; } .portal-workspace:not(.portal-workspace--voice_blast) a:active, .portal-workspace:not(.portal-workspace--voice_blast) button:active { transform:scale(.98); transition:transform 80ms ease-out; } @media (max-width:820px) { .portal-workspace:not(.portal-workspace--voice_blast) .portal-card, .portal-workspace:not(.portal-workspace--voice_blast) .detail-board, .portal-workspace:not(.portal-workspace--voice_blast) .diagnostic-card, .portal-workspace:not(.portal-workspace--voice_blast) .access-group-card { border-radius:7px; } .portal-workspace:not(.portal-workspace--voice_blast) .portal-card { overflow-x:auto; overflow-y:hidden; box-shadow:0 6px 18px rgba(15,42,51,.055); } .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi::after { display:none; } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0 14px; } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards > div { min-height:94px; padding:12px; } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards .badge { max-width:100%; overflow-wrap:anywhere; } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards strong { font-size:20px; } .portal-workspace--reports .portal-kpis { margin-bottom:12px; } .portal-workspace--reports .call-flow-section { margin-top:12px; } .portal-workspace--reports .call-flow-section .portal-section-head .button { width:100%; justify-content:center; } .portal-workspace:not(.portal-workspace--voice_blast) table { min-width:620px; } .portal-workspace:not(.portal-workspace--voice_blast) .call-flow-table, .portal-workspace:not(.portal-workspace--voice_blast) .secretary-workflow-table, .portal-workspace:not(.portal-workspace--voice_blast) .agent-activity-table { min-width:0; } } @media (max-width:430px) { .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards { grid-template-columns:repeat(2,minmax(0,1fr)); } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards > div { min-height:88px; padding:11px; } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards strong { font-size:18px; } .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards small { font-size:10px; } } @media (prefers-reduced-motion:reduce) { .portal-workspace:not(.portal-workspace--voice_blast) *, .portal-workspace:not(.portal-workspace--voice_blast) *::before, .portal-workspace:not(.portal-workspace--voice_blast) *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } } @media (prefers-reduced-transparency:reduce) { .portal-shell .portal-classic-topbar, .portal-shell .portal-nav-box { background:#fff; backdrop-filter:none; } .portal-theme-dark .portal-classic-topbar, .portal-theme-dark .portal-nav-box { background:#102030; } } @media (prefers-contrast:more) { .portal-workspace:not(.portal-workspace--voice_blast) .portal-card, .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi, .portal-workspace:not(.portal-workspace--voice_blast) .productivity-awards > div { border-color:currentColor; box-shadow:none; } } /* ADMIN LOG SUBTABS 20260728 */ .admin-log-hub { padding:0; overflow:hidden; border-top:5px solid #0f766e; } .admin-log-hub-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px 22px 16px; border-bottom:1px solid #d9e4e9; background:linear-gradient(90deg,#edf9f6,#fff 70%); } .admin-log-hub-head > div { min-width:0; } .admin-log-hub-head > div > span { display:block; margin-bottom:5px; color:#0f766e; font-size:10px; font-weight:950; text-transform:uppercase; } .admin-log-hub-head h2 { margin:0; color:#153149; font-size:23px; letter-spacing:0; } .admin-log-hub-head p { max-width:760px; margin:6px 0 0; line-height:1.45; } .admin-log-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; position:relative; top:auto; z-index:auto; padding:14px 22px 20px; overflow:visible; border:0; background:#fff; } .admin-log-tabs a { display:grid; grid-template-columns:42px minmax(0,1fr); gap:12px; align-items:center; min-height:78px; padding:13px 15px; border:1px solid #cfdce4; border-radius:7px; background:#f8fafb; color:#173149; text-decoration:none; box-shadow:0 4px 12px rgba(15,42,51,.04); transition:border-color .14s ease,background .14s ease,box-shadow .14s ease,transform .08s ease; } .admin-log-tabs a > span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#e6eef3; color:#536a7a; font-size:11px; font-weight:950; } .admin-log-tabs a strong,.admin-log-tabs a small { display:block; } .admin-log-tabs a strong { font-size:14px; line-height:1.25; } .admin-log-tabs a small { margin-top:4px; color:#667c8b; font-size:10px; line-height:1.35; } .admin-log-tabs a:hover { border-color:#79c7ba; background:#f0faf7; box-shadow:0 8px 18px rgba(15,118,110,.09); } .admin-log-tabs a:active { transform:scale(.99); } .admin-log-tabs a.active { border-color:#0f9f87; background:#eaf9f5; box-shadow:inset 0 -4px #0f9f87,0 8px 18px rgba(15,118,110,.1); } .admin-log-tabs a.active > span { background:#0f9f87; color:#fff; } .admin-log-tabs a.active strong { color:#0b675b; } @media (max-width:700px) { .admin-log-hub-head { padding:17px 14px 13px; } .admin-log-hub-head h2 { font-size:20px; } .admin-log-hub-head > .badge { display:none; } .admin-log-tabs { grid-template-columns:1fr; padding:11px 14px 15px; } .admin-log-tabs a { min-height:66px; padding:11px 12px; } } /* Commercial state: client uses standalone telephony services without an active URA. */ .portal-no-ura .portal-plan-head strong { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #d8e1e6; border-radius:999px; background:#f8fafc; color:#425466; } .portal-no-ura .portal-plan-head strong::before { content:""; width:8px; height:8px; border-radius:50%; background:#94a3b8; box-shadow:0 0 0 4px #e9eef2; } .portal-no-ura .portal-ura-pill { min-height:88px; background:#fff; } .portal-no-ura .portal-ura-pill:nth-child(1) { border-top:4px solid #0f9f8c; } .portal-no-ura .portal-ura-pill:nth-child(2) { border-top:4px solid #1687c9; } .portal-no-ura .portal-ura-pill:nth-child(3) { border-top:4px solid #7c4dcc; } .portal-no-ura .portal-classic-plan { border-left-color:#94a3b8; } .portal-upgrade-showcase { margin:0 0 18px; overflow:hidden; border:1px solid #d8e4e8; border-radius:10px; background:#fff; box-shadow:0 14px 34px rgba(20,43,58,.08); } .portal-upgrade-copy { padding:22px 24px 18px; border-bottom:1px solid #e3eaee; background:#f7fafb; } .portal-upgrade-copy > span { display:block; margin-bottom:6px; color:#087d70; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } .portal-upgrade-copy h2 { margin:0; color:#173447; font-size:24px; line-height:1.15; } .portal-upgrade-copy p { max-width:820px; margin:7px 0 0; color:#5f7480; font-size:14px; line-height:1.5; } .portal-upgrade-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:18px 24px; } .portal-upgrade-plan { position:relative; min-height:210px; padding:17px; border:1px solid #dce6ea; border-radius:8px; background:#fff; box-shadow:0 7px 18px rgba(20,43,58,.06); } .portal-upgrade-plan::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:8px 0 0 8px; background:#0f9f8c; } .portal-upgrade-plan--2::before { background:#1687c9; } .portal-upgrade-plan--3::before { background:#7c4dcc; } .portal-upgrade-plan > div { display:flex; align-items:center; justify-content:space-between; gap:8px; } .portal-upgrade-plan small { color:#718591; font-size:10px; font-weight:900; text-transform:uppercase; } .portal-upgrade-plan > div span { padding:4px 7px; border-radius:999px; background:#eef4f6; color:#536b77; font-size:9px; font-weight:800; } .portal-upgrade-plan > strong { display:block; margin:18px 0 4px; color:#173447; font-size:17px; } .portal-upgrade-plan > p { margin:0 0 13px; color:#5f7480; font-size:12px; } .portal-upgrade-plan ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; } .portal-upgrade-plan li { position:relative; padding-left:19px; color:#294858; font-size:12px; line-height:1.35; } .portal-upgrade-plan li::before { content:"+"; position:absolute; left:0; top:-1px; display:grid; place-items:center; width:14px; height:14px; border-radius:50%; background:#e5f7f3; color:#087d70; font-size:10px; font-weight:900; } .portal-upgrade-foot { display:flex; align-items:center; gap:10px; padding:13px 24px; border-top:1px solid #eadcae; background:#fffbeb; color:#765413; font-size:12px; } .portal-upgrade-foot strong { color:#5d4008; } .portal-theme-dark .portal-upgrade-showcase, .portal-theme-dark .portal-upgrade-plan { border-color:#314653; background:#102230; } .portal-theme-dark .portal-upgrade-copy { border-color:#314653; background:#142936; } .portal-theme-dark .portal-upgrade-copy h2, .portal-theme-dark .portal-upgrade-plan > strong { color:#f0f7f8; } .portal-theme-dark .portal-upgrade-copy p, .portal-theme-dark .portal-upgrade-plan > p, .portal-theme-dark .portal-upgrade-plan li { color:#b8c8cf; } .portal-theme-dark .portal-upgrade-foot { border-color:#665329; background:#302916; color:#ead59a; } @media (max-width:900px) { .ai-subpage-nav--plans { grid-template-columns:1fr; } .portal-upgrade-plans { grid-template-columns:1fr; padding:14px; } .portal-upgrade-copy { padding:18px; } .portal-upgrade-copy h2 { font-size:21px; } .portal-upgrade-plan { min-height:0; } .portal-upgrade-foot { align-items:flex-start; flex-direction:column; padding:13px 18px; } } /* PORTAL PREMIUM SYSTEM 20260814 Shared presentation for every client portal tab, theme and visual mode. */ .portal-shell { --portal-premium-ink:#102b3a; --portal-premium-muted:#5b7180; --portal-premium-line:#dbe5eb; --portal-premium-surface:#ffffff; --portal-premium-soft:#f3f8fa; --portal-premium-accent:#0f8f7b; --portal-premium-accent-strong:#0b6e63; --portal-premium-navy:#123442; --portal-premium-gold:#b99754; --portal-premium-radius:14px; --portal-premium-shadow:0 18px 44px rgba(24,52,68,.09); color:var(--portal-premium-ink); background-color:#eef4f7; background-image: radial-gradient(circle at 10% 0%,rgba(15,143,123,.10),transparent 31rem), radial-gradient(circle at 95% 5%,rgba(52,102,246,.08),transparent 27rem), linear-gradient(180deg,#f5f9fb 0%,#edf3f6 100%); } .portal-shell ::selection { background:#bcecdf; color:#0a332f; } .portal-shell a, .portal-shell button, .portal-shell input, .portal-shell select, .portal-shell textarea { outline-color:var(--portal-premium-accent); } .portal-shell a:focus-visible, .portal-shell button:focus-visible, .portal-shell input:focus-visible, .portal-shell select:focus-visible, .portal-shell textarea:focus-visible { outline:3px solid rgba(15,143,123,.28); outline-offset:2px; } .portal-shell .portal-main { width:min(100%,1360px); max-width:1360px; padding:24px clamp(14px,2vw,28px) 40px; } /* Brand and operational header. */ .portal-shell .portal-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,340px); align-items:stretch; gap:clamp(20px,2vw,28px); overflow:hidden; padding:clamp(22px,2.2vw,30px); border:0; border-radius:16px; background-color:#fff; background-image: radial-gradient(circle at 14% 0%,rgba(15,143,123,.11),transparent 24rem), radial-gradient(circle at 82% 8%,rgba(124,58,237,.07),transparent 22rem), linear-gradient(145deg,#ffffff 0%,#f8fbfc 72%,#eef5f7 100%); box-shadow:var(--portal-premium-shadow); } .portal-shell .portal-hero::before, .portal-shell .portal-hero::after { display:none; content:none; } .portal-shell .portal-hero-body { gap:16px; } .portal-shell .portal-identity { display:grid; grid-template-columns:minmax(104px,156px) minmax(0,1fr); align-items:center; gap:clamp(18px,2vw,26px); width:100%; min-width:0; } .portal-shell .portal-logo { width:100%; max-width:156px; max-height:92px; margin:0; padding:10px; border:0; border-radius:14px; background:#fff; box-shadow:0 12px 28px rgba(23,53,70,.10); object-fit:contain; } .portal-shell .portal-copy { gap:8px; } .portal-shell .portal-eyebrow { display:none; } .portal-shell .portal-identity h2, .portal-shell .portal-identity strong { max-width:28ch; margin:0; color:var(--portal-premium-ink); font-size:clamp(27px,2.65vw,40px); font-weight:900; line-height:1.04; letter-spacing:-.03em; text-wrap:balance; overflow-wrap:normal; } .portal-shell .portal-identity .muted { max-width:64ch; margin:0; color:var(--portal-premium-muted); font-size:14px; line-height:1.55; } .portal-shell .portal-plan-head { max-width:none; padding-top:2px; } .portal-shell .portal-plan-head > span { color:#647986; font-size:11px; letter-spacing:.08em; } .portal-shell .portal-plan-head > strong { color:var(--portal-premium-accent-strong); } .portal-shell .portal-ura-modes { max-width:none; gap:10px; } .portal-shell .portal-ura-pill { min-height:88px; padding:15px; border:0; border-radius:var(--portal-premium-radius); background:rgba(255,255,255,.82); box-shadow:0 8px 24px rgba(24,52,68,.07); } .portal-shell .portal-ura-pill.is-active { border:0; background:linear-gradient(145deg,#0f8f7b,#123d4a); transform:none; box-shadow:0 14px 30px rgba(15,111,99,.20); } .portal-shell .portal-ura-pill.is-active small, .portal-shell .portal-ura-pill.is-active span { color:#fff !important; } .portal-shell .portal-did-strip { max-width:none; min-height:64px; padding:11px 13px; border:0; border-radius:var(--portal-premium-radius); background:#fff; box-shadow:0 8px 24px rgba(24,52,68,.07); } .portal-shell .portal-did-list a { min-height:44px; border-radius:10px; } .portal-shell .portal-hero-side { display:grid; grid-template-rows:auto minmax(150px,1fr) auto; gap:12px; min-width:0; } .portal-shell .portal-user-greeting, .portal-shell .portal-status-board { border:0; border-radius:var(--portal-premium-radius); background:rgba(255,255,255,.88); box-shadow:0 10px 28px rgba(24,52,68,.08); } .portal-shell .portal-user-greeting { padding:15px; } .portal-shell .portal-user-avatar { width:56px; height:56px; flex-basis:56px; border-width:2px; border-radius:14px; } .portal-shell .portal-status-board { min-height:150px; padding:18px; } .portal-shell .portal-status-board::after { height:3px; } .portal-shell .portal-hero .actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; max-width:none; margin:0; } .portal-shell .portal-hero .actions > a, .portal-shell .portal-hero .actions > span, .portal-shell .portal-hero .actions > button, .portal-shell .portal-hero .actions summary, .portal-shell .portal-hero .actions .logout { min-height:44px; border-radius:11px; font-size:11px; } .portal-shell .portal-hero .actions .logout { min-height:44px; } /* Shared navigation and page surfaces. */ .portal-shell .portal-nav-box { margin-top:18px; margin-bottom:18px; padding:12px; border:0; border-radius:16px; background:rgba(255,255,255,.94); box-shadow:0 12px 34px rgba(24,52,68,.08); } .portal-shell .portal-nav-head { padding:0 2px 10px; } .portal-shell:not(.portal-visual-classic) .portal-tabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px; overflow:visible; padding:0; } .portal-shell .portal-tabs a { min-width:0; min-height:48px; padding:10px 12px; border:0; border-radius:12px; background:#eef4f6; color:#274554; box-shadow:none; font-size:11px; line-height:1.2; } .portal-shell .portal-tabs a:hover { transform:none; background:#e4f2ef; color:#0d6259; box-shadow:none; } .portal-shell .portal-tabs a.active, .portal-shell .portal-tabs a.whatsapp-official-tab.active, .portal-shell .portal-tabs a.voice-blast-tab.active { border:0 !important; background:linear-gradient(135deg,var(--portal-premium-accent),var(--portal-premium-accent-strong)) !important; color:#fff !important; box-shadow:0 10px 24px rgba(15,111,99,.18) !important; } .portal-shell .portal-tabs a.active::after { display:none !important; content:none !important; } .portal-shell .portal-tab-icon { background:#b9ddd5; color:#0b655b; } .portal-shell .portal-tabs a.active .portal-tab-icon { background:rgba(255,255,255,.20); color:#fff; box-shadow:none; } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .portal-card, .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi, .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .status-tile, .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .diagnostic-card, .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .access-group-card { border-width:0; border-radius:var(--portal-premium-radius); background-color:var(--portal-premium-surface); box-shadow:0 10px 30px rgba(24,52,68,.075); } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .portal-card { padding:clamp(16px,2vw,22px); } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head { min-height:0; margin:calc(clamp(16px,2vw,22px) * -1) calc(clamp(16px,2vw,22px) * -1) 18px; padding:16px clamp(16px,2vw,22px); border:0; border-bottom:1px solid var(--portal-premium-line); border-radius:14px 14px 0 0; background:linear-gradient(90deg,#f0f8f6,#fff 72%); } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head h2, .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head h3 { color:var(--portal-premium-ink); letter-spacing:-.015em; } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi { position:relative; min-height:112px; overflow:hidden; padding:16px; } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi::before { height:3px; border-radius:14px 14px 0 0; } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi > strong { color:var(--portal-premium-ink); font-size:clamp(24px,2.2vw,32px); font-variant-numeric:tabular-nums; } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi > span, .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi > small { color:var(--portal-premium-muted); } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) input, .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) select, .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) textarea { min-height:44px; border:1px solid #cbd9e1; border-radius:10px; background:#fff; color:var(--portal-premium-ink); } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .button, .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .btn, .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) button { min-height:42px; border-radius:10px; } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) table thead th { background:#eaf2f5; color:#3d5867; } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) table tbody tr:hover td { background:#f0f8f6; } .portal-shell .portal-workspace--profile .portal-public-gate, .portal-shell .portal-workspace--access_users .access-groups-panel, .portal-shell .portal-workspace--audios .portal-card, .portal-shell .portal-workspace--history > .portal-card:nth-child(odd), .portal-shell .portal-workspace--reports > .portal-card:nth-child(odd) { border-left-width:0; } /* Redirecionamento: brand-led, simple enough to follow at a glance. */ .portal-forwarding-dialog { --forwarding-tim:#004c97; --forwarding-claro:#e4242d; --forwarding-vivo:#660099; width:min(880px,calc(100vw - 28px)); max-height:calc(100vh - 28px); overflow:hidden; padding:0; border:0; border-radius:16px; background:#fff; color:#173544; box-shadow:0 32px 90px rgba(7,27,39,.36); } .portal-forwarding-dialog::backdrop { background:rgba(7,27,39,.72); backdrop-filter:blur(6px); } .portal-forwarding-dialog > form { top:16px; right:16px; } .portal-forwarding-dialog > form button { min-width:44px; height:44px; padding:0 13px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(255,255,255,.14); color:#fff; } .portal-forwarding-card { max-height:calc(100vh - 28px); overflow:auto; padding:0; background:#fff; } .portal-forwarding-hero { display:flex; align-items:center; gap:16px; min-height:132px; padding:26px 88px 26px 28px; background:#103846; background-image:radial-gradient(circle at 15% 0%,rgba(40,214,174,.22),transparent 18rem),linear-gradient(135deg,#103846,#0f6e65); color:#fff; } .portal-forwarding-symbol { position:relative; width:54px; height:54px; flex:0 0 54px; border-radius:14px; background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.16); } .portal-forwarding-symbol::before { content:""; position:absolute; left:13px; top:15px; width:23px; height:23px; border:5px solid #0f8f7b; border-left-color:transparent; border-bottom-color:transparent; border-radius:3px; transform:rotate(45deg); } .portal-forwarding-symbol::after { content:""; position:absolute; left:12px; bottom:12px; width:25px; height:5px; border-radius:5px; background:#0f8f7b; transform:rotate(-22deg); } .portal-forwarding-hero h2 { margin:0; color:#fff; font-size:clamp(26px,3vw,36px); line-height:1.05; letter-spacing:-.03em; } .portal-forwarding-hero p { margin:8px 0 0; color:#d9f5ef; font-size:15px; line-height:1.45; } .portal-forwarding-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(250px,.78fr); gap:0; } .portal-forwarding-main { min-width:0; padding:24px 26px 28px; } .portal-forwarding-aside { min-width:0; padding:24px; background:#f1f6f8; } .portal-forwarding-destination { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 16px; border-radius:12px; background:#eaf7f4; } .portal-forwarding-destination small { display:block; color:#0c7669; font-size:10px; font-weight:900; text-transform:uppercase; } .portal-forwarding-destination h3 { margin:3px 0 0; color:#173b46; font-size:15px; } .portal-forwarding-destination > span, .portal-forwarding-destination > select { min-width:190px; padding:11px 12px; border:1px solid #a8d8ce; border-radius:10px; background:#fff; color:#123e43; font-size:15px; font-weight:900; text-align:right; } .portal-forwarding-destination > span { display:block; } .portal-forwarding-carriers { margin-top:22px; } .portal-forwarding-carriers > h3, .portal-forwarding-activation > h3 { margin:0; color:#294b59; font-size:13px; } .portal-forwarding-operators { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; } .portal-forwarding-operators .portal-forwarding-operator { position:relative; display:flex; min-width:0; min-height:78px; align-items:center; justify-content:center; gap:8px; padding:10px; border:2px solid transparent; border-radius:12px; background:#f3f6f8; color:#35515e; font-size:12px; font-weight:900; transition:transform .16s cubic-bezier(.16,1,.3,1),box-shadow .16s cubic-bezier(.16,1,.3,1),border-color .16s ease; } .portal-forwarding-operator-logo { display:grid; place-items:center; width:56px; height:38px; padding:7px; border-radius:9px; background:#fff; } .portal-forwarding-operator-logo img { display:block; width:100%; max-width:46px; height:24px; object-fit:contain; } .portal-forwarding-operator-claro .portal-forwarding-operator-logo img { width:28px; height:28px; } .portal-forwarding-operators .portal-forwarding-operator:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(23,53,68,.10); } .portal-forwarding-operator-tim[aria-pressed="true"] { border-color:var(--forwarding-tim); background:#eef6ff; color:#003d78; box-shadow:0 10px 24px rgba(0,76,151,.14); } .portal-forwarding-operator-claro[aria-pressed="true"] { border-color:var(--forwarding-claro); background:#fff1f1; color:#b71d25; box-shadow:0 10px 24px rgba(228,36,45,.14); } .portal-forwarding-operator-vivo[aria-pressed="true"] { border-color:var(--forwarding-vivo); background:#f8effb; color:#5c087c; box-shadow:0 10px 24px rgba(102,0,153,.14); } .portal-forwarding-dialog[data-forwarding-selected-operator="tim"] .portal-forwarding-activation { box-shadow:inset 0 3px var(--forwarding-tim); } .portal-forwarding-dialog[data-forwarding-selected-operator="claro"] .portal-forwarding-activation { box-shadow:inset 0 3px var(--forwarding-claro); } .portal-forwarding-dialog[data-forwarding-selected-operator="vivo"] .portal-forwarding-activation { box-shadow:inset 0 3px var(--forwarding-vivo); } .portal-forwarding-operators .portal-forwarding-operator[aria-pressed="true"]::after { content:"✓"; position:absolute; top:7px; right:7px; display:grid; place-items:center; width:18px; height:18px; border-radius:999px; background:currentColor; color:#fff; font-size:11px; } .portal-forwarding-activation { margin-top:22px; padding:16px; border-radius:12px; background:#102f3d; } .portal-forwarding-activation > h3 { color:#d9ecef; } .portal-forwarding-code-box { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; margin-top:10px; } .portal-forwarding-code-box input { min-width:0; min-height:48px; padding:11px 13px; border:0; border-radius:10px; background:#fff; color:#0e3650; font-size:clamp(15px,2vw,19px); font-weight:900; } .portal-forwarding-code-box button { min-height:48px; padding:10px 14px; border:0; border-radius:10px; background:#0f9b83; color:#fff; font-weight:900; } .portal-forwarding-code-box button:disabled { opacity:.48; } .portal-forwarding-copy-status { min-height:17px; margin-top:7px; color:#b9d5da; } .portal-forwarding-card > .portal-forwarding-layout .portal-forwarding-step { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:12px 0 0; padding:0; list-style:none; } .portal-forwarding-step li { min-width:0; padding:11px; border-radius:11px; background:#f3f7f8; color:#5d7380; font-size:10px; line-height:1.35; } .portal-forwarding-step li strong, .portal-forwarding-step li span { display:block; } .portal-forwarding-step li strong { margin-bottom:4px; color:#173b46; font-size:11px; } .portal-forwarding-stop { margin:0; padding:16px; border:0; border-radius:12px; background:#fff3e8; } .portal-forwarding-stop h3 { margin:0; color:#9a4b0f; font-size:17px; text-transform:none; } .portal-forwarding-stop p { margin:6px 0 0; color:#7b4c28; font-size:11px; line-height:1.45; } .portal-forwarding-stop .portal-forwarding-code-box { grid-template-columns:1fr; } .portal-forwarding-stop .portal-forwarding-code-box input { text-align:center; } .portal-forwarding-stop > small { display:block; margin-top:9px; color:#8c694c; line-height:1.4; } .portal-forwarding-video-button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; margin-top:14px; padding:10px 13px; border-radius:11px; background:#fff; color:#0b7065; font-size:12px; font-weight:900; text-decoration:none; } .portal-forwarding-video-button > span[aria-hidden="true"] { display:grid; place-items:center; width:24px; height:24px; border-radius:999px; background:#dff5ef; color:#0f8f7b; font-size:10px; } .portal-forwarding-note { margin:12px 2px 0; color:#6c808a; line-height:1.45; } .portal-forwarding-layout-empty { grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr); } .portal-forwarding-unavailable { margin:0; min-height:132px; padding:20px; border:1px dashed #bdcdd5; border-radius:12px; background:#f7fafb; color:#4f6875; line-height:1.55; } /* Explicit dark treatment: not an automatic inversion. */ .portal-shell.portal-theme-dark { --portal-premium-ink:#eff7fa; --portal-premium-muted:#afc2cc; --portal-premium-line:#334d5b; --portal-premium-surface:#112532; --portal-premium-soft:#142b38; --portal-premium-shadow:0 20px 48px rgba(0,0,0,.24); background-color:#091923; background-image:radial-gradient(circle at 10% 0%,rgba(15,143,123,.16),transparent 30rem),linear-gradient(180deg,#0b1d27,#091923); } .portal-theme-dark .portal-hero { background-color:#102331; background-image:radial-gradient(circle at 16% 0%,rgba(33,194,158,.15),transparent 23rem),radial-gradient(circle at 82% 8%,rgba(124,58,237,.12),transparent 22rem),linear-gradient(145deg,#142c39,#0e202c); } .portal-theme-dark .portal-logo { background:#fff; } .portal-theme-dark .portal-ura-pill, .portal-theme-dark .portal-did-strip, .portal-theme-dark .portal-user-greeting, .portal-theme-dark .portal-status-board { background:#142c39; box-shadow:0 12px 28px rgba(0,0,0,.20); } .portal-theme-dark .portal-identity h2, .portal-theme-dark .portal-identity strong, .portal-theme-dark .portal-did-copy span, .portal-theme-dark .portal-did-list a strong, .portal-theme-dark .portal-user-greeting strong, .portal-theme-dark .portal-status-board strong { color:#eff7fa; } .portal-theme-dark .portal-identity .muted, .portal-theme-dark .portal-did-copy small, .portal-theme-dark .portal-user-greeting small, .portal-theme-dark .portal-status-board small { color:#afc2cc; } .portal-theme-dark .portal-nav-box { background:#102532; box-shadow:0 12px 34px rgba(0,0,0,.22); } .portal-theme-dark .portal-tabs a { background:#18313f; color:#cfdee5; } .portal-theme-dark .portal-tabs a:hover { background:#1b3b43; color:#eafffa; } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-card, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpi, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .status-tile, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .diagnostic-card, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .access-group-card { background-color:#112532; box-shadow:0 12px 30px rgba(0,0,0,.18); } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) .portal-section-head { border-color:#324b59; background:linear-gradient(90deg,#163740,#112532 74%); } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) input, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) select, .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) textarea { border-color:#45606f; background:#0b1d28; color:#f1f7fa; } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) table thead th { background:#1a3544; color:#d7e4ea; } .portal-theme-dark .portal-workspace:not(.portal-workspace--voice_blast) table tbody tr:hover td { background:#173544; } .portal-theme-dark .portal-forwarding-dialog, .portal-theme-dark .portal-forwarding-card { background:#102430; color:#eef6f8; } .portal-theme-dark .portal-forwarding-main { background:#102430; } .portal-theme-dark .portal-forwarding-aside { background:#0b1d27; } .portal-theme-dark .portal-forwarding-destination { background:#153b39; } .portal-theme-dark .portal-forwarding-destination h3, .portal-theme-dark .portal-forwarding-carriers > h3 { color:#e9f6f6; } .portal-theme-dark .portal-forwarding-destination > span, .portal-theme-dark .portal-forwarding-destination > select { border-color:#3f716b; background:#0d232d; color:#eef8f7; } .portal-theme-dark .portal-forwarding-operators .portal-forwarding-operator { background:#172f3b; color:#d8e6eb; } .portal-theme-dark .portal-forwarding-operator-tim[aria-pressed="true"] { border-color:#58a9ee; background:#152f49; color:#9ecfff; } .portal-theme-dark .portal-forwarding-operator-claro[aria-pressed="true"] { border-color:#ff747a; background:#42262d; color:#ffb3b7; } .portal-theme-dark .portal-forwarding-operator-vivo[aria-pressed="true"] { border-color:#d385ef; background:#382545; color:#e5b3f7; } .portal-theme-dark .portal-forwarding-step li { background:#172f3b; color:#adc0c8; } .portal-theme-dark .portal-forwarding-step li strong { color:#eef6f8; } .portal-theme-dark .portal-forwarding-stop { background:#39291d; } .portal-theme-dark .portal-forwarding-stop h3 { color:#f2c38c; } .portal-theme-dark .portal-forwarding-stop p, .portal-theme-dark .portal-forwarding-stop > small { color:#d7b38e; } .portal-theme-dark .portal-forwarding-video-button { background:#15323c; color:#9fe6d8; } .portal-theme-dark .portal-forwarding-unavailable { border-color:#45606f; background:#132b37; color:#c0d0d7; } /* Classic stays compact while sharing the premium craft. */ .portal-shell.portal-visual-classic .portal-hero { display:none; } .portal-visual-classic .portal-tabs { gap:8px; } .portal-visual-classic .portal-tabs a { min-height:44px; border:0; border-radius:10px; background:#eef4f6; } .portal-visual-classic .portal-card, .portal-visual-classic .panel, .portal-visual-classic .portal-kpi { border-width:0; border-radius:var(--portal-premium-radius); box-shadow:0 8px 24px rgba(24,52,68,.07); } .portal-visual-classic .portal-nav-box { border-radius:14px; } /* Appearance is a first-class portal control, shared by all four visual modes. */ .portal-shell .portal-preference-menu { min-width:0; z-index:45; } .portal-shell .portal-preference-menu > summary { min-height:44px; border-color:#cad8df; border-radius:11px; background:rgba(255,255,255,.92); color:#274554; transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease; } .portal-shell .portal-preference-menu > summary:hover, .portal-shell .portal-preference-menu[open] > summary { border-color:#88cfc2; background:#edf9f6; color:#0b6e63; box-shadow:0 8px 20px rgba(15,111,99,.10); } .portal-shell .portal-preference-menu-retro > summary::before { content:"✦"; display:grid; place-items:center; width:24px; height:24px; margin-right:8px; border-radius:8px; background:linear-gradient(145deg,#16ad95,#0b6e63); color:#fff; font-size:11px; } .portal-shell .portal-preference-panel { width:min(360px,calc(100vw - 24px)); padding:18px; border:1px solid #d6e2e8; border-radius:14px; background:#fff; color:#173544; box-shadow:0 24px 60px rgba(16,43,58,.20); } .portal-shell .portal-preference-heading { padding-bottom:14px; border-color:#e1e9ed; } .portal-shell .portal-preference-heading strong { color:#173544; font-size:18px; letter-spacing:-.02em; } .portal-shell .portal-preference-heading small { margin-top:5px; color:#667c88; font-size:12px; line-height:1.4; } .portal-shell .portal-appearance-controls { gap:16px; padding-top:16px; } .portal-shell .portal-appearance-group > span { margin-bottom:8px; color:#607582; font-size:10px; letter-spacing:.08em; } .portal-shell .portal-appearance-options { gap:8px; padding:5px; border:1px solid #d9e4e9; border-radius:12px; background:#edf3f5; } .portal-shell .portal-appearance-options button { position:relative; min-height:44px; padding:9px 12px; border-radius:9px; color:#49616e; font-size:12px; transition:background-color .16s ease,color .16s ease,box-shadow .16s ease; } .portal-shell .portal-appearance-options button:hover { background:#fff; color:#173f4b; } .portal-shell .portal-appearance-options button.is-active { padding-left:29px; background:linear-gradient(135deg,#119b84,#0b7568); color:#fff; box-shadow:0 7px 16px rgba(15,143,123,.22); } .portal-shell .portal-appearance-options button.is-active::before { content:"✓"; position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:11px; } .portal-shell .portal-preference-links { gap:8px; margin:17px -18px -18px; padding:13px 18px; border-color:#e1e9ed; background:#f4f7f8; } .portal-shell .portal-preference-links a, .portal-shell .portal-preference-links button { min-height:40px; border-radius:9px; } /* In Retro the panel becomes part of the card and pushes content instead of covering it. */ .portal-visual-retro .portal-hero:has(.portal-preference-menu-retro[open]) { overflow:visible; } .portal-visual-retro .portal-preference-menu-retro[open] { grid-column:1 / -1; } .portal-visual-retro .portal-preference-menu-retro .portal-preference-panel { position:static; width:100%; margin-top:10px; box-sizing:border-box; } .portal-visual-retro .portal-preference-menu-retro[open] > summary { width:100%; } /* In Classic it remains a compact account menu anchored to the top bar. */ .portal-visual-classic .portal-preference-menu-classic .portal-preference-panel { top:calc(100% + 10px); right:0; bottom:auto; } .portal-visual-classic .portal-preference-menu-classic > summary { border-radius:11px; } .portal-theme-dark .portal-preference-menu > summary { border-color:#385462; background:#142c39; color:#dce9ee; } .portal-theme-dark .portal-preference-menu > summary:hover, .portal-theme-dark .portal-preference-menu[open] > summary { border-color:#3b8378; background:#173a3d; color:#a9eee0; } .portal-theme-dark .portal-preference-panel { border-color:#38525f; background:#102631; color:#eef7f9; box-shadow:0 26px 64px rgba(0,0,0,.38); } .portal-theme-dark .portal-preference-heading { border-color:#38505c; } .portal-theme-dark .portal-preference-heading strong { color:#eef7f9; } .portal-theme-dark .portal-preference-heading small, .portal-theme-dark .portal-appearance-group > span { color:#abc0c9; } .portal-theme-dark .portal-appearance-options { border-color:#38525f; background:#0a1c25; } .portal-theme-dark .portal-appearance-options button { color:#b8cbd3; } .portal-theme-dark .portal-appearance-options button:not(.is-active) { background:transparent !important; box-shadow:none; } .portal-theme-dark .portal-appearance-options button:hover { background:#17333f; color:#effafa; } .portal-theme-dark .portal-appearance-options button.is-active { background:linear-gradient(135deg,#12a88f,#0c7468) !important; color:#fff; } .portal-theme-dark .portal-preference-links { border-color:#38505c; background:#0b1d26; } .portal-theme-dark .portal-preference-links a, .portal-theme-dark .portal-preference-links button { border-color:#3b5662; background:#142f3a; color:#eef7f9; } @media (max-width:1080px) { .portal-shell .portal-hero { grid-template-columns:1fr; } .portal-shell .portal-hero-side { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto; } .portal-shell .portal-hero-side .actions { grid-column:1/-1; grid-template-columns:repeat(3,minmax(0,1fr)); } .portal-shell .portal-status-board { min-height:0; } } @media (max-width:820px) { .portal-shell .portal-main { padding:14px 12px 28px; } .portal-shell .portal-hero { padding:20px; border-radius:14px; } .portal-shell .portal-hero-side { grid-template-columns:1fr; } .portal-shell .portal-hero-side .actions { grid-column:auto; grid-template-columns:repeat(2,minmax(0,1fr)); } .portal-shell .portal-ura-modes { grid-template-columns:repeat(3,minmax(0,1fr)); } .portal-shell .portal-nav-box { position:sticky; top:0; margin:14px 0; padding:8px; border-radius:13px; } .portal-shell:not(.portal-visual-classic) .portal-tabs { display:flex !important; grid-template-columns:none !important; flex-wrap:nowrap !important; gap:7px !important; overflow-x:auto !important; overflow-y:hidden !important; padding:0 0 4px !important; scroll-snap-type:x proximity !important; } .portal-shell:not(.portal-visual-classic) .portal-tabs a { flex:0 0 138px !important; width:auto !important; min-width:138px; scroll-snap-align:start; white-space:normal !important; } .portal-visual-classic .portal-preference-menu-classic .portal-preference-panel { position:fixed; top:68px; right:12px; bottom:auto; left:12px; width:auto; max-height:calc(100vh - 84px); overflow:auto; box-sizing:border-box; } } @media (max-width:640px) { .portal-shell .portal-identity { grid-template-columns:1fr; align-items:start; } .portal-shell .portal-logo { width:min(138px,55vw); max-width:138px; max-height:78px; } .portal-shell .portal-identity h2, .portal-shell .portal-identity strong { max-width:18ch; font-size:clamp(26px,9vw,34px); } .portal-shell .portal-plan-head { align-items:flex-start; flex-direction:column; gap:6px; } .portal-shell .portal-plan-head strong { text-align:left; } .portal-shell .portal-ura-modes { grid-template-columns:1fr; } .portal-shell .portal-ura-pill { min-height:72px; } .portal-shell .portal-did-strip { align-items:flex-start; flex-direction:column; } .portal-shell .portal-did-list { width:100%; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; overflow:visible; } .portal-shell .portal-did-list a { width:100%; max-width:100%; flex:0 0 auto; box-sizing:border-box; justify-content:space-between; } .portal-shell .portal-hero-side .actions { grid-template-columns:1fr; } .portal-forwarding-dialog { width:calc(100vw - 16px); max-height:calc(100vh - 16px); border-radius:14px; } .portal-forwarding-card { max-height:calc(100vh - 16px); } .portal-forwarding-hero { min-height:122px; padding:22px 70px 22px 18px; } .portal-forwarding-symbol { width:46px; height:46px; flex-basis:46px; } .portal-forwarding-symbol::before { left:11px; top:13px; width:20px; height:20px; } .portal-forwarding-hero h2 { font-size:25px; } .portal-forwarding-hero p { font-size:13px; } .portal-forwarding-layout { grid-template-columns:1fr; } .portal-forwarding-layout-empty { grid-template-columns:1fr; } .portal-forwarding-main, .portal-forwarding-aside { padding:18px; } .portal-forwarding-destination { align-items:stretch; flex-direction:column; gap:10px; } .portal-forwarding-destination > span, .portal-forwarding-destination > select { width:100%; min-width:0; text-align:left; } .portal-forwarding-operators { gap:7px; } .portal-forwarding-operators .portal-forwarding-operator { min-height:70px; flex-direction:column; gap:5px; padding:8px 5px; } .portal-forwarding-operator-logo { width:50px; height:32px; padding:6px; } .portal-forwarding-code-box { grid-template-columns:1fr; } .portal-forwarding-code-box button { width:100%; } .portal-forwarding-card > .portal-forwarding-layout .portal-forwarding-step { grid-template-columns:1fr; } } @media (max-width:430px) { .portal-shell .portal-hero { padding:17px; } .portal-shell .portal-workspace:not(.portal-workspace--voice_blast) .portal-kpis, .portal-shell .portal-workspace--agents .status-strip { grid-template-columns:1fr; } .portal-forwarding-symbol { display:none; } .portal-forwarding-hero { padding-left:18px; } } @media (prefers-reduced-motion:reduce) { .portal-forwarding-dialog *, .portal-forwarding-dialog *::before, .portal-forwarding-dialog *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }