/* ClickDialog Reputation OS — Client Portal (Visual Direction Lock) */
:root {
  --cd-blue: #1557ff;
  --cd-blue-dark: #0c3dcc;
  --cd-blue-soft: #eef4ff;
  --cd-indigo: #6b38d7;
  --cd-indigo-dark: #4c1fb0;
  --cd-green: #149946;
  --cd-green-soft: #e9f9ee;
  --cd-orange: #f07a18;
  --cd-orange-soft: #fff3e5;
  --cd-red: #ef2f24;
  --cd-red-soft: #fff0ef;
  --cd-purple-soft: #f0e7ff;
  --cd-ink: #11182f;
  --cd-muted: #59647d;
  --cd-soft: #f6f8fc;
  --cd-line: #dfe5ef;
  --cd-surface: #ffffff;
  --cd-shadow: 0 18px 60px rgba(18, 31, 62, .06);
  --cd-radius: 10px;
  --cd-radius-sm: 8px;
  --cd-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Captación V2: barra operativa + editor inline + vista previa ---------- */
.status-pill.info { background: #e9f1ff; color: #1e5ec8; }
.capture-v2-screen { max-width: 1180px; margin: 0 auto; display: grid; gap: 20px; }

.capture-status-bar {
  display: grid;
  grid-template-columns: 1fr 2.2fr 1.3fr;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--cd-line);
  border-radius: 16px;
  background: #fff;
}
.capture-status-bar-item { display: grid; gap: 4px; align-content: start; }
.capture-status-bar-label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--cd-muted);
  margin-bottom: 2px;
}
.capture-status-bar-status { margin: 0; }
.capture-status-bar-detail { margin: 0; color: var(--cd-muted); font-size: 12.5px; }
.capture-status-bar-url {
  margin: 0; color: var(--cd-ink); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.capture-status-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.capture-status-bar-actions .btn { min-height: 44px; }
.capture-status-bar-feedback { min-height: 1.2em; margin: 0; color: var(--cd-green); font-size: 12.5px; font-weight: 650; }
.capture-status-bar-qr-row { display: flex; align-items: center; gap: 10px; }
.capture-status-bar-qr-row img {
  width: 56px; height: 56px; border-radius: 8px; border: 1px solid var(--cd-line); object-fit: contain; flex: 0 0 auto;
}
.capture-status-bar-qr-copy { display: grid; gap: 4px; }
.capture-status-bar-qr-copy .btn { min-height: 44px; }
.capture-status-bar-hint { margin: 0; color: var(--cd-muted); font-size: 11.5px; }

.capture-v2-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.capture-v2-card { display: grid; gap: 10px; padding: 22px; border-radius: 8px; align-content: start; }
.capture-v2-card h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
.capture-v2-main-head { display: grid; gap: 4px; }
.capture-v2-help, .capture-v2-card > p { margin: 0; color: var(--cd-muted); font-size: 13px; }
.capture-v2-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.capture-v2-actions .btn { min-height: 44px; }
.capture-v2-preview-card {
  display: grid; gap: 18px; justify-items: center; padding: 22px; border-radius: 8px; align-content: start;
  position: sticky; top: 92px;
}
.capture-v2-preview-head { width: 100%; }
.capture-v2-preview-head h2 { margin: 2px 0 0; font-size: 18px; letter-spacing: 0; }
.capture-v2-preview-head p { margin: 6px 0 0; color: var(--cd-muted); font-size: 13px; }
.capture-v2-phone { width: min(320px, 100%); border-width: 9px; border-radius: 38px; box-shadow: 0 18px 42px rgba(17,24,47,.18); }
.capture-v2-public-page {
  min-height: 560px; padding: 28px 18px 18px; display: flex; flex-direction: column; align-items: center;
  text-align: center; background: #fff;
}
.capture-v2-preview-logo {
  width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 12px;
  background: var(--preview-brand); color: #fff; font-size: 18px; font-weight: 800;
}
.capture-v2-preview-logo img { width: 100%; height: 100%; object-fit: cover; }
.capture-v2-preview-name { margin-top: 12px; color: #3f4b62; font-size: 13px; }
.capture-v2-public-page h3 { margin: 12px 0 6px; font-size: 18px; letter-spacing: 0; }
.capture-v2-public-page > p { max-width: 30ch; margin: 0; color: var(--cd-muted); font-size: 12px; line-height: 1.45; }
.capture-v2-preview-actions { width: 100%; display: grid; gap: 8px; margin-top: 18px; }
.capture-v2-preview-action {
  min-height: 48px; padding: 12px; display: grid; place-items: center; border: 1px solid var(--cd-line);
  border-radius: 10px; text-align: center; font-size: 12px;
}
.capture-v2-preview-action.primary { border-color: var(--preview-brand); background: var(--preview-brand); color: #fff; }
.capture-v2-preview-social {
  margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  color: #6d788c; font-size: 11px;
}
.capture-v2-preview-social[hidden] { display: none; }
.capture-v2-preview-powered { margin-top: auto; padding-top: 16px; color: #929bad; font-size: 10px; }

/* Editor inline de la página pública (sin drawer) */
.capture-editor-fields {
  display: grid; gap: 18px; align-content: start;
}
.capture-editor-fields fieldset {
  margin: 0; padding: 0; border: 0; display: grid; gap: 12px;
}
.capture-editor-fields legend {
  margin-bottom: 4px; color: #35405b; font-size: 12px; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase;
}
.capture-editor-fields .field { gap: 6px; margin: 0; }
.capture-v2-save-row {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 4px;
}
.capture-save-status { color: var(--cd-green); font-size: 13px; font-weight: 650; }
.capture-editor-fields .btn { min-height: 44px; }
.capture-logo-row { display: flex; align-items: center; gap: 12px; }
.capture-logo-avatar {
  width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden;
  border-radius: 12px; background: var(--swatch, var(--cd-blue)); color: #fff; font-size: 14px; font-weight: 800;
}
.capture-logo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.capture-media-field { position: relative; flex: 1; }
.capture-media-field input[type='file'] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.capture-media-btn {
  min-height: 48px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px dashed #b9c4d6; border-radius: 8px; background: #fbfcfe; color: #34405b; cursor: pointer;
}
.capture-media-field:focus-within .capture-media-btn { outline: 3px solid #b8caff; outline-offset: 2px; }
.capture-remove-row { min-height: 18px; }
.capture-remove-row .text-link, .capture-v2-card .text-link {
  border: 0; background: transparent; color: var(--cd-muted); font-size: 12px; text-decoration: underline;
}
.capture-mvp-palette { margin: 0; padding: 0; border: 0; }
.capture-mvp-palette legend { margin-bottom: 8px; color: #35405b; font-size: 13px; font-weight: 650; text-transform: none; letter-spacing: 0; }
.capture-mvp-palette > div { display: flex; flex-wrap: wrap; gap: 10px; }
.capture-mvp-palette label { position: relative; display: block; }
.capture-mvp-palette input { position: absolute; opacity: 0; }
.capture-mvp-palette label > span:not(.sr-only) {
  width: 36px; height: 36px; display: block; border: 3px solid #fff; border-radius: 50%;
  background: var(--swatch); box-shadow: 0 0 0 1px #b9c4d6; cursor: pointer;
}
.capture-mvp-palette input:checked + span { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cd-blue); }
.capture-mvp-palette input:focus-visible + span { outline: 3px solid #9bb7ff; outline-offset: 4px; }
.field-error { margin: 0; color: var(--cd-red); font-size: 13px; }
.field-error[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 900px) {
  .capture-v2-grid { grid-template-columns: 1fr; }
  .capture-v2-preview-card { position: static; }
  .capture-v2-actions { flex-direction: column; }
  .capture-v2-actions .btn, .capture-v2-actions a.btn { width: 100%; }
  .capture-v2-preview-card > a.btn { width: 100%; }
}
@media (max-width: 767px) {
  .capture-status-bar { grid-template-columns: 1fr; gap: 14px; }
  .capture-status-bar-actions .btn, .capture-status-bar-qr-copy .btn { width: 100%; }
  .capture-v2-save-row { flex-direction: column-reverse; align-items: stretch; }
  .capture-v2-save-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .screen { transition: none !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #fbfcff;
  color: var(--cd-ink);
  font-family: var(--cd-font);
  font-size: 14px;
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: var(--cd-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; }
ul, ol { margin: 0; padding-left: 1.2rem; }

/* ---------- Shell ---------- */
.portal-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.portal-sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--cd-line); background: #ffffff;
  display: flex; flex-direction: column; padding: 26px 14px 20px;
}
.brand { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 12px; padding: 0 10px 34px; }
.brand-mark {
  position: relative; width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(140deg, #1b6dff, #6735df);
}
.brand-mark::before { content: ""; position: absolute; inset: 9px 8px 11px 8px; border-radius: 4px; background: #ffffff; }
.brand-mark::after { content: ""; position: absolute; left: 8px; bottom: -4px; border-top: 9px solid #1b6dff; border-right: 9px solid transparent; }
.brand-name { font-size: 18px; font-weight: 760; line-height: 1.1; }
.brand-sub { color: #6a748c; font-size: 12px; line-height: 1.2; margin-top: 1px; }

.portal-nav { display: grid; gap: 4px; }
.portal-nav a {
  min-height: 44px; border: 0; border-radius: var(--cd-radius-sm); background: transparent;
  color: #34405b; display: grid; grid-template-columns: 24px 1fr; align-items: center;
  gap: 11px; padding: 0 12px; text-align: left; font-size: 15px; font-weight: 560;
}
.portal-nav a:hover { background: #f4f7fe; text-decoration: none; }
.portal-nav a.active { background: var(--cd-blue-soft); color: var(--cd-blue); font-weight: 720; }
.nav-icon, .icon { display: inline-flex; align-items: center; justify-content: center; }
.nav-icon { width: 22px; height: 22px; }
.icon { width: 16px; height: 16px; vertical-align: -3px; }
.nav-icon svg, .icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.sidebar-help { margin-top: auto; padding: 14px 12px 0; color: #6a748c; font-size: 12.5px; border-top: 1px solid var(--cd-line); }
.sidebar-help a { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: #34405b; font-weight: 600; }

.portal-main { min-width: 0; padding: 0 26px 40px; }

/* ---------- Top strip (persistent: business, Google, sync, bell, avatar) ---------- */
.topstrip {
  position: sticky; top: 0; z-index: 15; background: #fbfcffee; backdrop-filter: blur(6px);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 0 12px; margin-bottom: 14px; border-bottom: 1px solid var(--cd-line);
}
.biz-switch {
  min-height: 38px; border: 1px solid var(--cd-line); border-radius: 999px; background: #fff;
  display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 6px; font-weight: 700; color: var(--cd-ink);
}
.biz-switch .biz-dot {
  width: 26px; height: 26px; border-radius: 999px; background: linear-gradient(140deg, #1557ff, #7597ff);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}
.status-pill { min-height: 32px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.status-pill.ok { background: var(--cd-green-soft); color: var(--cd-green); }
.status-pill.warn { background: var(--cd-orange-soft); color: #a24d00; }
.status-pill.gray { background: #eef1f6; color: #59647d; }
.status-pill .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.spacer { flex: 1; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--cd-line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; position: relative; color: #34405b;
}
.icon-btn .dot-badge { position: absolute; top: 4px; right: 5px; width: 8px; height: 8px; border-radius: 999px; background: var(--cd-red); border: 2px solid #fff; }
.avatar-btn {
  min-height: 38px; border: 1px solid var(--cd-line); border-radius: 999px; background: #fff;
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px;
}
.avatar {
  width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(140deg, #1557ff, #7597ff);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 780; font-size: 12.5px;
}
.dropdown-wrap { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-sm); box-shadow: var(--cd-shadow); min-width: 220px; padding: 8px; z-index: 30;
}
.dropdown-menu a, .dropdown-menu button {
  display: flex; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 10px;
  border-radius: 7px; color: var(--cd-ink); font-size: 13.5px; font-weight: 600;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: #f4f7fe; text-decoration: none; }
.dropdown-menu hr { border: none; border-top: 1px solid var(--cd-line); margin: 6px 4px; }

/* ---------- Page head ---------- */
.page-head { margin-bottom: 18px; }
.page-head h1 { margin: 0 0 4px; font-size: 26px; font-weight: 780; }
.page-head p { margin: 0; color: #4b5670; font-size: 15px; }

.screen { display: grid; gap: 18px; }
.grid { display: grid; gap: 16px; }
.kpi-grid { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.kpi-grid.kpi-5 { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
.two-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.main-grid { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); }
.lower-home { grid-template-columns: 1fr 1fr; }

/* ---------- Cards / primitives ---------- */
.card { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); box-shadow: var(--cd-shadow); }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card h2, .card h3 { margin: 0; font-size: 16px; line-height: 1.25; }
.muted { color: var(--cd-muted); }
.tiny { color: var(--cd-muted); font-size: 12px; }
.section-gap { margin-top: 4px; }
.empty { color: var(--cd-muted); text-align: center; padding: 30px 10px; font-size: 14px; }

.kpi-card { min-height: 118px; padding: 18px; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 14px; }
.kpi-title { color: #35405b; font-weight: 620; font-size: 13.5px; }
.kpi-value { margin-top: 4px; font-size: 24px; line-height: 1; font-weight: 800; }
.delta { margin-top: 8px; color: var(--cd-green); font-size: 12px; }
.delta.bad { color: var(--cd-orange); }

.bubble { width: 50px; height: 50px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bubble.blue { color: var(--cd-blue); background: #e8f0ff; }
.bubble.green { color: var(--cd-green); background: #dff7e7; }
.bubble.orange { color: var(--cd-orange); background: #fff0dc; }
.bubble.red { color: var(--cd-red); background: var(--cd-red-soft); }
.bubble.purple { color: var(--cd-indigo); background: var(--cd-purple-soft); }
.bubble svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }

.badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 22px; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 680; white-space: nowrap; }
.badge.blue { background: var(--cd-blue-soft); color: var(--cd-blue); }
.badge.green { background: var(--cd-green-soft); color: var(--cd-green); }
.badge.orange { background: var(--cd-orange-soft); color: #bd5a08; }
.badge.red { background: var(--cd-red-soft); color: var(--cd-red); }
.badge.purple { background: var(--cd-purple-soft); color: var(--cd-indigo); }
.badge.gray { background: #eef1f6; color: #59647d; }

.btn { min-height: 40px; border: 1px solid var(--cd-line); border-radius: var(--cd-radius-sm); background: #fff; color: #1b2742; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; font-weight: 700; font-size: 13.5px; }
.btn:hover { border-color: #c8d2e2; text-decoration: none; }
.btn.primary { border-color: var(--cd-blue); background: var(--cd-blue); color: #fff; }
.btn.primary:hover { background: var(--cd-blue-dark); }
.btn.success { border-color: #29b65b; color: var(--cd-green); }
.btn.danger { border-color: #ffbab4; color: var(--cd-red); }
.btn.disabled, .btn:disabled { background: #f5f6f9; color: #a3abb9; pointer-events: none; }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.btn.icon-only { width: 40px; padding: 0; }
.btn.block { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; border-bottom: 1px solid var(--cd-line); }
.tab { border: 0; background: transparent; color: #303a54; padding: 0 0 12px; font-weight: 650; font-size: 14px; position: relative; }
.tab.active { color: var(--cd-blue); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--cd-blue); border-radius: 3px 3px 0 0; }
.pill-count { display: inline-flex; margin-left: 5px; min-width: 22px; height: 20px; align-items: center; justify-content: center; border-radius: 999px; background: #edf2ff; color: var(--cd-blue); font-size: 11.5px; padding: 0 5px; }
.tab.active .pill-count { background: var(--cd-blue); color: #fff; }

.select-like { min-height: 36px; border: 1px solid var(--cd-line); border-radius: var(--cd-radius-sm); background: #fff; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; color: #303a54; font-weight: 600; font-size: 13px; }

/* ---------- Hero next action ---------- */
.hero-action {
  border-radius: var(--cd-radius); padding: 26px; color: #fff;
  background: linear-gradient(135deg, #5b3df0, #6f4dff 55%, #8a5bff);
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  box-shadow: 0 20px 50px rgba(90, 50, 230, .25);
}
.hero-action .eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; font-weight: 750; opacity: .85; margin-bottom: 8px; }
.hero-action h2 { margin: 0 0 6px; font-size: 21px; font-weight: 800; }
.hero-action p { margin: 0; opacity: .92; font-size: 14px; max-width: 60ch; }
.hero-action .btn { margin-top: 14px; background: #fff; color: #5b3df0; border-color: #fff; }
.hero-action .btn:hover { background: #f2eeff; }
.hero-icon { width: 78px; height: 78px; border-radius: 999px; background: rgba(255,255,255,.16); display: inline-flex; align-items: center; justify-content: center; }
.hero-icon svg { width: 36px; height: 36px; stroke: #fff; stroke-width: 1.8; fill: none; }
.hero-action.calm { background: linear-gradient(135deg, #0f9d58, #17b56b 60%, #38cf8a); box-shadow: 0 20px 50px rgba(15, 157, 88, .22); }
.hero-action.calm .btn { color: #0f9d58; }

/* ---------- Work list / pending ---------- */
.work-list { display: grid; }
.work-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--cd-line); }
.work-item:last-child { border-bottom: 0; }
.work-num { width: 26px; height: 26px; border-radius: 999px; background: var(--cd-blue-soft); color: var(--cd-blue); font-weight: 800; font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center; }
.work-item strong { display: block; }
.work-item .tiny { margin-top: 2px; }

.health-good { color: var(--cd-green); font-weight: 800; font-size: 17px; }
.trend-mini { width: 100%; height: 46px; display: block; margin: 10px 0; }

/* ---------- Review / Case workspace (shared pattern) ---------- */
.split-workspace { grid-template-columns: minmax(380px, .85fr) minmax(420px, 1fr); align-items: start; }
.list-panel { overflow: hidden; }
.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cd-line); }
.search-mini { flex: 1; min-width: 0; border: 1px solid var(--cd-line); border-radius: var(--cd-radius-sm); background: #fff; padding: 0 10px; height: 36px; }
.search-mini input { width: 100%; height: 100%; border: 0; outline: 0; font-size: 13px; }

.entry-row { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px; border-bottom: 1px solid var(--cd-line); cursor: pointer; }
.entry-row:last-child { border-bottom: 0; }
.entry-row.active { background: var(--cd-blue-soft); }
.entry-row:hover { background: #fbfdff; }
.person { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 780; font-size: 13px; color: #1548d7; background: #e1ebff; flex-shrink: 0; }
.person.purple { color: #6b38d7; background: #eadcff; }
.person.green { color: #124b28; background: #dff5e5; }
.person.orange { color: #a14b00; background: #ffe4d4; }
.person.red { color: #a3231c; background: #ffe1df; }
.entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entry-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 3px; color: #59647d; font-size: 12.5px; }
.entry-copy { margin: 8px 0 0; color: #33405b; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.review-stars { color: #f6b512; font-size: 15px; white-space: nowrap; }

.detail-panel { overflow: hidden; }
.detail-block { padding: 20px; border-bottom: 1px solid var(--cd-line); }
.detail-block:last-child { border-bottom: 0; }
.detail-title-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }
.quote-box, .reply-box, .warning-box, .note-box { border: 1px solid var(--cd-line); border-radius: var(--cd-radius-sm); padding: 14px; background: #fff; font-size: 13.5px; }
.reply-box { min-height: 100px; resize: vertical; width: 100%; color: var(--cd-ink); font-family: inherit; }
.warning-box { display: flex; gap: 10px; background: var(--cd-orange-soft); border-color: #ffd29a; color: #a24d00; }
.note-box { background: var(--cd-soft); }
.ai-assist-block { background: var(--cd-purple-soft, #f5f0ff); border-radius: var(--cd-radius-sm); }
.ai-assist-block h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.char-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }

/* ---------- Casos specific ---------- */
.priority-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.priority-dot.urgent { background: var(--cd-red); }
.priority-dot.high { background: var(--cd-orange); }
.priority-dot.medium { background: var(--cd-blue); }
.priority-dot.low { background: #9aa4ba; }
.classification-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.classification-grid .field { display: grid; gap: 4px; }
.classification-grid .field label { color: var(--cd-muted); font-size: 12px; font-weight: 650; }

/* ---------- QR / Captación ---------- */
.qr-grid { grid-template-columns: 1fr 1fr 1fr; }
.copy-block { background: #f6f8fc; border: 1px solid var(--cd-line); border-radius: var(--cd-radius-sm); padding: 12px 14px; font-size: 13px; word-break: break-word; }
.qr-preview-wrap { grid-template-columns: minmax(260px, .8fr) 1fr; }
.phone-frame {
  width: 240px; margin: 0 auto; border: 10px solid #16192a; border-radius: 34px; overflow: hidden;
  box-shadow: 0 20px 45px rgba(15, 23, 55, .25); background: #fff;
}
.phone-screen { padding: 26px 18px; text-align: center; background: linear-gradient(180deg, #f7f9ff, #fff); min-height: 380px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.phone-logo { width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(135deg, #c9853c, #5c2b15); }
.phone-screen h4 { margin: 4px 0 0; font-size: 15px; }
.phone-screen p { margin: 0; font-size: 12px; color: #59647d; }
.metric-tile { text-align: center; padding: 16px; }
.metric-tile .kpi-value { font-size: 22px; }

/* ---------- Configuración ---------- */
.config-layout { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.config-nav { display: grid; gap: 4px; position: sticky; top: 90px; }
.config-nav button { text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: var(--cd-radius-sm); color: #34405b; font-weight: 600; font-size: 13.5px; }
.config-nav button:hover { background: #f4f7fe; }
.config-nav button.active { background: var(--cd-blue-soft); color: var(--cd-blue); }
.config-section { display: none; display: grid; gap: 16px; }
.config-section.active { display: grid; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 5px; }
.field label { color: var(--cd-muted); font-size: 12.5px; font-weight: 650; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cd-line); }
.toggle-row:last-child { border-bottom: 0; }
.switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; z-index: 1; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: #d7dce6; border-radius: 999px; transition: background .15s; }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 999px; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .track { background: var(--cd-green); }
.switch input:checked + .track + .thumb { left: 21px; }

/* ---------- Reports charts ---------- */
.chart-card { min-height: 340px; }
.chart { width: 100%; height: 240px; display: block; }
.bar-list { display: grid; gap: 18px; }
.rating-bar { display: grid; grid-template-columns: 74px 1fr 44px; gap: 14px; align-items: center; font-size: 13px; }
.bar-track { height: 9px; border-radius: 999px; background: #edf0f5; overflow: hidden; }
.bar-track > span { display: block; height: 100%; border-radius: inherit; background: var(--cd-blue); }
.topic-bar { display: grid; grid-template-columns: 130px 1fr 40px; gap: 14px; align-items: center; font-size: 13px; margin-bottom: 14px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { border-bottom: 1px solid var(--cd-line); padding: 11px 8px; text-align: left; vertical-align: middle; font-size: 13px; }
.data-table th { color: #59647d; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .3px; }
.recommend-card { background: linear-gradient(135deg, #fff8e8, #fff); border-color: #f4dfa0; }

/* ---------- Forms ---------- */
input, select, textarea {
  font-family: var(--cd-font); font-size: 13.5px; padding: 9px 11px; border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-sm); background: #fff; color: var(--cd-ink); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(21, 87, 255, .3); border-color: var(--cd-blue); }
label { font-size: 12.5px; font-weight: 650; color: var(--cd-muted); display: block; margin: 10px 0 4px; }
textarea { min-height: 90px; resize: vertical; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.filters select, .filters input { width: auto; min-width: 140px; }

/* ---------- Modal / toast ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 60; overflow-y: auto; }
.modal { background: #fff; border-radius: 14px; padding: 22px 24px; width: 100%; max-width: 640px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal h2 { margin-top: 0; font-size: 18px; }
.toast { position: fixed; bottom: 22px; right: 22px; background: #10214d; color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: var(--cd-shadow); z-index: 99; font-size: 14px; max-width: 380px; }
.toast.error { background: var(--cd-red); }
.risk-note { background: var(--cd-red-soft); border: 1px solid #f3c1c1; border-radius: var(--cd-radius-sm); padding: 12px 14px; margin: 8px 0; font-size: 13.5px; color: var(--cd-red); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* ---------- Login (kept for auth flows, not in visual lock scope) ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #10214d 0%, #1557ff 100%); padding: 20px; }
.login-card { background: #fff; border-radius: 16px; padding: 34px 34px 28px; width: 100%; max-width: 400px; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.login-card h1 { margin: 0 0 4px; font-size: 21px; }
.login-card p.hint, .hint { color: var(--cd-muted); font-size: 13px; margin-top: 0; }
.login-demo { margin-top: 16px; font-size: 12.5px; color: var(--cd-muted); background: var(--cd-soft); border-radius: 8px; padding: 10px 12px; }

/* ---------- Responsive ---------- */
.mobile-topnav { display: none; }

@media (max-width: 1180px) {
  .kpi-grid, .kpi-grid.kpi-5, .lower-home, .qr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-grid, .two-grid, .split-workspace, .qr-preview-wrap, .config-layout { grid-template-columns: 1fr; }
  .config-nav { position: static; display: flex; flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar { display: none; }
  .mobile-topnav {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; position: sticky; top: 0; z-index: 20;
    background: #fff; border-bottom: 1px solid var(--cd-line); padding: 6px 4px;
  }
  .mobile-topnav a { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; font-size: 10px; color: #34405b; border-radius: 8px; }
  .mobile-topnav a.active { color: var(--cd-blue); background: var(--cd-blue-soft); }
  .mobile-topnav .nav-icon svg { width: 18px; height: 18px; }
  .portal-main { padding: 0 12px 30px; }
  .topstrip { padding: 10px 0; }
  .biz-switch .profile-email, .avatar-btn span:not(.avatar) { display: none; }
  .kpi-grid, .kpi-grid.kpi-5, .lower-home, .qr-grid, .field-grid, .classification-grid { grid-template-columns: 1fr; }
  .hero-action { grid-template-columns: 1fr; text-align: left; }
  .hero-icon { display: none; }
  .page-head h1 { font-size: 22px; }
}

:root {
  --cd-soft: #f4f7fc;
  --cd-line: #e1e7f0;
  --cd-radius: 15px;
  --cd-radius-sm: 10px;
  --cd-shadow: 0 1px 2px rgba(20, 35, 65, .025), 0 12px 34px rgba(20, 35, 65, .055);
}

body { background: #f7f9fd; letter-spacing: -.005em; }
button, a, input, select, textarea { transition: border-color .16s ease-out, background-color .16s ease-out, color .16s ease-out, box-shadow .16s ease-out, transform .16s ease-out; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(21, 87, 255, .22); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.portal-shell { grid-template-columns: 250px minmax(0, 1fr); }
.portal-sidebar { padding: 28px 16px 22px; border-color: #e6eaf2; }
.brand { padding: 0 10px 38px; }
.brand-mark { border-radius: 11px; box-shadow: 0 8px 20px rgba(21, 87, 255, .16); }
.portal-nav { gap: 6px; }
.portal-nav a { min-height: 46px; border-radius: 11px; padding: 0 13px; font-weight: 600; }
.portal-nav a.active { box-shadow: inset 3px 0 0 var(--cd-blue); }
.portal-main { padding: 0 32px 52px; }
.topstrip { padding: 18px 0 14px; margin-bottom: 24px; background: rgba(247, 249, 253, .94); backdrop-filter: blur(12px); }
.biz-switch, .icon-btn, .avatar-btn { box-shadow: 0 1px 2px rgba(20, 35, 65, .03); }
.page-head { margin-bottom: 24px; }
.page-head h1 { margin: 3px 0 6px; font-size: clamp(28px, 2.4vw, 34px); font-weight: 790; letter-spacing: -.035em; }
.page-head p { max-width: 70ch; color: #647089; font-size: 15px; }
.page-kicker, .section-eyebrow { color: var(--cd-blue); font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.screen { gap: 22px; }
.grid { gap: 18px; }
.card { border-color: var(--cd-line); box-shadow: var(--cd-shadow); }
.card-pad { padding: 24px; }
.card-head { margin-bottom: 18px; }
.card h2 { font-size: 18px; letter-spacing: -.02em; }
.card h3 { font-size: 16px; }
.empty.compact { padding: 18px 8px; }
.btn { min-height: 42px; border-radius: 10px; padding: 0 17px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20, 35, 65, .08); }
.btn.primary { box-shadow: 0 7px 18px rgba(21, 87, 255, .18); }
.btn.small { min-height: 36px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--cd-blue); font-size: 13px; font-weight: 750; }
.text-link:hover { text-decoration: none; gap: 8px; }
.text-link .icon { width: 14px; height: 14px; }
.status-pill { font-weight: 700; }

.hero-action { min-height: 190px; padding: 32px 34px; border-radius: 20px; box-shadow: 0 20px 45px rgba(77, 48, 196, .17); }
.hero-action h2 { font-size: clamp(23px, 2vw, 29px); letter-spacing: -.03em; }
.hero-action p { max-width: 68ch; font-size: 14.5px; }
.hero-action .btn { min-height: 44px; padding: 0 18px; }
.hero-score { width: 190px; min-height: 126px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.12); display: flex; flex-direction: column; justify-content: center; padding: 18px 20px; backdrop-filter: blur(8px); }
.hero-score > span { font-size: 11.5px; font-weight: 700; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.hero-score strong { margin: 2px 0; font-size: 40px; line-height: 1; letter-spacing: -.05em; }
.hero-score strong small { color: #ffd460; font-size: 20px; }
.hero-score em { font-size: 11.5px; font-style: normal; opacity: .78; }
.home-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-link { position: relative; grid-template-columns: 54px minmax(0, 1fr) 24px; min-height: 138px; color: var(--cd-ink); text-decoration: none; overflow: hidden; }
.kpi-link::before { content: ""; position: absolute; inset: auto 18px 0; height: 2px; background: var(--cd-blue); opacity: 0; transform: scaleX(.5); transition: opacity .16s, transform .16s; }
.kpi-link:hover { border-color: #bfcdf0; transform: translateY(-2px); text-decoration: none; box-shadow: 0 16px 36px rgba(31, 58, 112, .1); }
.kpi-link:hover::before { opacity: 1; transform: scaleX(1); }
.kpi-arrow { color: #9aa6bb; }
.kpi-arrow .icon { width: 18px; height: 18px; }
.kpi-support { margin-top: 8px; color: var(--cd-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-kpi .kpi-value { font-size: 20px; line-height: 1.15; }
.home-lower-grid { grid-template-columns: minmax(0, 1.35fr) minmax(340px, .9fr); align-items: start; }
.activity-list { display: grid; margin: 0 -8px -8px; }
.activity-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) 20px; gap: 13px; align-items: center; padding: 16px 10px; border-top: 1px solid var(--cd-line); color: inherit; text-decoration: none; border-radius: 10px; }
.activity-item:hover { background: #f8faff; text-decoration: none; }
.activity-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.activity-item p { margin: 5px 0 4px; color: #46516a; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.activity-chevron { color: #a2acbd; }
.system-list { display: grid; margin: 0 -5px; }
.system-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 5px; border-top: 1px solid var(--cd-line); color: inherit; text-decoration: none; }
.system-row:hover { text-decoration: none; }
.system-row > div { display: grid; gap: 2px; }
.system-row > div > span { color: var(--cd-muted); font-size: 12px; }
.system-icon, .metric-icon, .destination-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.system-icon { width: 38px; height: 38px; border-radius: 11px; }
.system-icon.blue { color: var(--cd-blue); background: var(--cd-blue-soft); }
.system-icon.green { color: var(--cd-green); background: var(--cd-green-soft); }
.system-icon.orange { color: var(--cd-orange); background: var(--cd-orange-soft); }
.system-icon.purple { color: var(--cd-indigo); background: var(--cd-purple-soft); }
.system-report-link { margin-top: 15px; background: #f7f9fd; }

.workspace-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.workspace-intro > div { display: grid; gap: 6px; }
.workspace-intro > div > strong { font-size: 15px; }
.workspace-source, .human-review-note { display: inline-flex; align-items: center; gap: 7px; width: fit-content; }
.workspace-source { color: var(--cd-blue); font-size: 12px; font-weight: 800; }
.workspace-source.private { color: var(--cd-indigo); }
.human-review-note { min-height: 34px; border-radius: 999px; padding: 0 13px; background: var(--cd-purple-soft); color: var(--cd-indigo); font-size: 12px; font-weight: 700; }
.human-review-note.calm { background: var(--cd-green-soft); color: #14753b; }
.workspace-tabs { gap: 24px; }
.workspace-tabs .tab { min-height: 44px; }
.split-workspace { grid-template-columns: minmax(360px, .82fr) minmax(480px, 1.18fr); gap: 20px; }
.list-panel, .detail-panel { border-radius: 16px; }
.list-toolbar { min-height: 68px; padding: 12px 14px; background: #fbfcfe; }
.search-mini { height: 44px; background: #fff; }
.sort-control { margin: 0; }
.sort-control select { width: 152px; height: 44px; padding-block: 0; }
.entry-row { width: 100%; border: 0; border-bottom: 1px solid var(--cd-line); border-radius: 0; background: #fff; color: var(--cd-ink); text-align: left; font-family: inherit; }
button.entry-row { min-height: 116px; }
.entry-row:hover { background: #f9fbff; }
.entry-row.active { background: #f1f5ff; box-shadow: inset 3px 0 0 var(--cd-blue); }
.entry-head strong { font-size: 14px; }
.detail-panel { position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow-y: auto; }
.detail-block { padding: 24px; }
.quote-box { background: #f8faff; border-color: #e2e8f3; line-height: 1.55; }
.reply-box { min-height: 128px; border-color: #d7def0; background: #fcfdff; line-height: 1.55; }
.warning-box { border-radius: 11px; }

.capture-commandbar { min-height: 76px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.capture-publish-state { display: flex; align-items: center; gap: 12px; min-width: 0; }
.capture-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cd-green); box-shadow: 0 0 0 5px var(--cd-green-soft); }
.capture-live-dot.paused { background: var(--cd-muted); box-shadow: 0 0 0 5px #eef1f6; }
.capture-publish-state > div { display: grid; min-width: 0; }
.capture-publish-state span:last-child { color: var(--cd-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capture-command-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.capture-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.capture-metric { min-height: 96px; padding: 18px; display: flex; align-items: center; gap: 14px; }
.capture-metric > div { display: grid; gap: 2px; }
.capture-metric strong { font-size: 22px; letter-spacing: -.03em; }
.capture-metric span:last-child { color: var(--cd-muted); font-size: 12.5px; }
.capture-metric.upcoming strong { font-size: 15px; }
.metric-icon { width: 44px; height: 44px; border-radius: 13px; }
.metric-icon.blue { color: var(--cd-blue); background: var(--cd-blue-soft); }
.metric-icon.purple { color: var(--cd-indigo); background: var(--cd-purple-soft); }
.metric-icon.neutral { color: #69758c; background: #eef1f6; }
.capture-studio { display: grid; grid-template-columns: minmax(520px, 1.08fr) minmax(390px, .92fr); gap: 22px; align-items: start; }
.capture-editor { display: grid; gap: 18px; }
.capture-section { padding: 26px; }
.capture-section-head { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; margin-bottom: 20px; }
.capture-section-head h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.capture-section-head p { margin: 4px 0 0; color: var(--cd-muted); font-size: 13px; }
.section-number { width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--cd-blue-soft); color: var(--cd-blue); font-size: 11px; font-weight: 850; }
.capture-mode-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px; border: 1px solid #bfcdf2; border-radius: 13px; background: #f8faff; }
.mode-check { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--cd-blue); }
.capture-mode-card p { margin: 3px 0 0; color: var(--cd-muted); font-size: 12.5px; }
.capture-helper, .field-help { color: var(--cd-muted); font-size: 12px; }
.capture-helper { margin: 12px 0 0; }
.capture-fields { margin-bottom: 14px; }
.capture-section .field > label { margin-top: 0; }
.slug-input { height: 42px; display: flex; align-items: center; border: 1px solid var(--cd-line); border-radius: 10px; overflow: hidden; background: #fff; }
.slug-input span { height: 100%; display: flex; align-items: center; padding: 0 11px; border-right: 1px solid var(--cd-line); background: #f4f6fa; color: #6c768b; font-weight: 700; }
.slug-input input { height: 100%; border: 0; border-radius: 0; outline: 0; }
.destination-list { display: grid; }
.destination-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 15px 0; border-top: 1px solid var(--cd-line); }
.destination-row:first-child { border-top: 0; padding-top: 0; }
.destination-row > div { display: grid; gap: 2px; }
.destination-row > div > span { color: var(--cd-muted); font-size: 12px; }
.category-list { display: grid; gap: 8px; }
.category-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--cd-line); border-radius: 10px; background: #fff; }
.category-reorder { display: flex; gap: 4px; }
.category-reorder .icon-btn { width: 26px; height: 26px; font-size: 12px; }
.category-label { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.category-add-row { display: flex; gap: 8px; }
.category-add-row input { flex: 1; }
.capture-material-checklist { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cd-line); }
.capture-material-checklist h3 { margin: 0 0 4px; font-size: 15px; }
.material-step-row { padding: 12px 0; }
.destination-icon { width: 40px; height: 40px; border-radius: 12px; }
.destination-icon.google { color: #a26500; background: #fff3d8; }
.destination-icon.private { color: var(--cd-indigo); background: var(--cd-purple-soft); }
.destination-icon.case { color: var(--cd-blue); background: var(--cd-blue-soft); }
.destination-icon.neutral { color: #68748a; background: #eef1f6; }
.plate-copy-card { display: grid; gap: 5px; margin: 14px 0; padding: 18px; border: 1px solid #d8e1f3; border-radius: 13px; background: #f8faff; }
.plate-copy-card > span { color: var(--cd-blue); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.plate-copy-card strong { font-size: 18px; }
.plate-copy-card p { margin: 0; color: var(--cd-muted); font-size: 13px; }
.capture-preview-panel { position: sticky; top: 92px; padding: 24px; background: #f0f3f9; overflow: hidden; }
.preview-panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 18px; }
.preview-panel-head h2 { margin: 4px 0 0; }
.preview-device { min-height: 30px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; background: #fff; border: 1px solid var(--cd-line); color: var(--cd-muted); font-size: 11px; font-weight: 700; }
.capture-phone { width: 310px; border-width: 9px; border-radius: 42px; box-shadow: 0 22px 48px rgba(17, 24, 47, .22); }
.phone-hardware { height: 22px; display: grid; place-items: center; background: #16192a; }
.phone-hardware span { width: 74px; height: 5px; border-radius: 99px; background: #3c4051; }
.capture-phone-screen { min-height: 585px; padding: 26px 18px 18px; gap: 7px; background: #fff; }
.public-brand-mark { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: var(--cd-blue-soft); color: var(--cd-blue); font-weight: 850; }
.public-kicker { margin-top: 6px; color: var(--cd-blue); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.capture-phone-screen h4 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.capture-phone-screen > p { color: var(--cd-ink); font-size: 14px; font-weight: 750; }
.public-intro { max-width: 230px; color: var(--cd-muted); font-size: 10.5px; line-height: 1.4; }
.public-actions { width: 100%; display: grid; gap: 8px; margin-top: 12px; }
.public-action { min-height: 58px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 15px; gap: 9px; align-items: center; padding: 10px 11px; border: 1px solid var(--cd-line); border-radius: 12px; background: #fff; text-align: left; }
.public-action > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #f0f3f8; color: #59647d; font-size: 9px; font-weight: 850; }
.public-action > div { display: grid; gap: 1px; }
.public-action strong { font-size: 10.5px; }
.public-action small { color: var(--cd-muted); font-size: 8.5px; }
.public-action.primary { border-color: var(--cd-blue); background: var(--cd-blue); color: #fff; }
.public-action.primary > span:first-child { background: rgba(255,255,255,.15); color: #fff; }
.public-action.primary small { color: rgba(255,255,255,.75); }
.public-action.compact { min-height: 49px; }
.public-divider { position: relative; margin: 4px 0; color: #929bad; font-size: 8.5px; text-align: center; }
.public-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--cd-line); }
.public-divider span { position: relative; padding: 0 8px; background: #fff; }
.public-trust { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: #6d788c; font-size: 8.5px; }
.public-powered { margin-top: auto; color: #9aa3b3; font-size: 8px; }
.preview-link-card { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 13px; align-items: center; margin-top: 18px; padding: 13px; border-radius: 13px; background: #fff; border: 1px solid var(--cd-line); }
.preview-link-card img { border-radius: 8px; }
.preview-link-card > div { min-width: 0; display: grid; gap: 3px; }
.preview-link-card span { color: var(--cd-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.preview-link-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.preview-link-card small { color: var(--cd-muted); font-size: 10px; }
.capture-advanced { overflow: hidden; }
.capture-advanced summary { min-height: 88px; padding: 18px 22px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; cursor: pointer; list-style: none; }
.capture-advanced summary::-webkit-details-marker { display: none; }
.summary-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--cd-blue); background: var(--cd-blue-soft); }
.capture-advanced summary > span:nth-child(2) { display: grid; gap: 3px; }
.capture-advanced summary small { color: var(--cd-muted); font-size: 12px; }
.capture-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 22px; border-top: 1px solid var(--cd-line); background: #fbfcfe; }
.capture-guide-grid h3 { margin: 0 0 12px; }
.capture-guide-grid .checklist { gap: 9px; color: #48546d; font-size: 12.5px; }
.capture-guide-grid .checklist li { position: relative; padding-left: 18px; }
.capture-guide-grid .checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--cd-green); font-weight: 900; }

.report-updated-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--cd-green); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.report-updated-pill .icon { width: 14px; height: 14px; }
#report-export .icon { width: 14px; height: 14px; }

.report-toolbar { padding: 12px 18px; }
.report-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.report-select-group { display: flex; align-items: center; gap: 9px; }
.report-select-group label { margin: 0; color: var(--cd-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.report-select-group select { min-height: 36px; font-weight: 650; font-size: 13px; padding: 0 10px; }
.report-range-text { font-size: 13px; font-weight: 650; color: var(--cd-muted); }
.report-range-text::before { content: "·"; margin-right: 8px; color: var(--cd-line); font-weight: 400; }
.report-toolbar-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.report-custom-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cd-line); }
.report-custom-dates[hidden] { display: none; }
.report-custom-dates .field { min-width: 160px; }
.report-custom-dates .field label { margin: 0 0 4px; }

.report-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.report-kpi { min-height: 114px; padding: 18px; display: flex; align-items: center; gap: 13px; }
.report-kpi > div { display: grid; gap: 2px; }
.report-kpi > div > span { color: var(--cd-muted); font-size: 12px; font-weight: 700; }
.report-kpi > div > strong { font-size: 25px; line-height: 1.05; }
.report-primary-grid { grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr); }
.report-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-metric-card { display: grid; gap: 6px; }
.report-metric-value { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.reports-screen .chart-card { min-height: 360px; }
.reports-screen .chart { margin-top: 8px; width: 100%; height: 260px; }
.reports-screen .bar-track { height: 10px; }
.reports-screen .rating-bar { grid-template-columns: 80px 1fr 56px; padding: 3px 0; }
.chart-line.current { stroke: #1557ff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot.current { fill: #fff; stroke: #1557ff; stroke-width: 3; }
.chart-caption { margin-top: 6px; }

.topic-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.topic-group { display: grid; gap: 10px; align-content: start; }
.topic-group-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 750; }
.topic-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.topic-dot.positivo { background: var(--cd-green); }
.topic-dot.neutral { background: var(--cd-muted); }
.topic-dot.negativo { background: var(--cd-red); }
.topic-pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 650; }
.topic-pill b { font-weight: 800; }
.topic-pill.positivo { background: var(--cd-green-soft); color: var(--cd-green); }
.topic-pill.neutral { background: #eef1f6; color: #59647d; }
.topic-pill.negativo { background: var(--cd-red-soft); color: var(--cd-red); }
.topic-pill-btn { border: 0; cursor: pointer; font-family: inherit; transition: transform .12s, box-shadow .12s; }
.topic-pill-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(20, 36, 70, .12); }
.topic-drilldown-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.topic-review-row { border: 1px solid var(--cd-line); border-radius: 10px; padding: 12px; margin-bottom: 10px; }

.report-action-card { display: grid; gap: 16px; }
.report-action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.report-action-body { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.report-action-body p { margin: 6px 0 4px; color: #364057; font-size: 14px; max-width: 60ch; }

.config-layout { grid-template-columns: 278px minmax(0, 1fr); gap: 22px; align-items: start; }
.config-sidebar { position: sticky; top: 92px; padding: 12px; }
.config-sidebar-head { display: grid; gap: 3px; padding: 10px 10px 16px; border-bottom: 1px solid var(--cd-line); }
.config-sidebar-head span { color: var(--cd-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.config-sidebar-head strong { font-size: 14px; }
.config-nav { position: static; display: grid; gap: 5px; padding: 10px 0; }
.config-nav button { min-height: 64px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 11px; }
.config-nav button > span:nth-child(2) { display: grid; gap: 2px; }
.config-nav button strong { color: inherit; font-size: 13px; }
.config-nav button small { color: #7b8498; font-size: 10.5px; font-weight: 500; }
.config-nav button.active small { color: #5e7ac8; }
.config-nav-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #f0f3f8; color: #667188; }
.config-nav button.active .config-nav-icon { background: #dfe9ff; color: var(--cd-blue); }
.config-sidebar-foot { display: flex; gap: 8px; padding: 14px 10px 6px; border-top: 1px solid var(--cd-line); color: var(--cd-muted); font-size: 10.5px; line-height: 1.45; }
.config-content { min-width: 0; display: grid; gap: 18px; }
.config-status-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.config-status-strip a { min-height: 76px; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; align-items: center; padding: 13px; border: 1px solid var(--cd-line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(20,35,65,.02); }
.config-status-strip a:hover { border-color: #bdcae3; text-decoration: none; }
.config-status-strip a > div { display: grid; gap: 2px; min-width: 0; }
.config-status-strip small { color: var(--cd-muted); font-size: 10.5px; }
.config-status-strip strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.config-panels { min-width: 0; }
.config-section { display: none; gap: 18px; }
.config-section.active { display: grid; }
.settings-card { padding: 30px; }
.settings-card-head { align-items: flex-start; }
.settings-card-head p { max-width: 62ch; margin: 6px 0 0; color: var(--cd-muted); font-size: 13px; }
.settings-card .field-grid { gap: 18px; }
.settings-card .field { gap: 7px; }
.config-section input, .config-section select { min-height: 44px; }
.config-section .field > div:not(.slug-input) { min-height: 44px; display: flex; align-items: center; padding: 10px 12px; border: 1px solid #e8ecf3; border-radius: 10px; background: #f8fafd; color: #3d485f; }
.config-section .toggle-row { margin-top: 14px; padding: 17px; border: 1px solid var(--cd-line); border-radius: 12px; background: #fbfcfe; }
.settings-note { display: flex; gap: 8px; align-items: center; padding: 13px 14px; border-radius: 11px; background: var(--cd-purple-soft); color: #5a35aa; font-size: 12.5px; }
.settings-save-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cd-line); }
.settings-save-row > span { color: var(--cd-muted); font-size: 11.5px; }
#config-google, #config-plan { gap: 18px; }
#config-google > .card, #config-plan > .card, #config-google > .grid .card, #config-plan > .grid .card { padding: 26px; }

@media (max-width: 1280px) {
  .home-lower-grid, .capture-studio, .report-primary-grid, .report-metric-grid { grid-template-columns: 1fr; }
  .capture-preview-panel, .config-sidebar, .detail-panel { position: static; max-height: none; }
  .capture-preview-panel { display: grid; justify-items: center; }
  .preview-panel-head, .preview-link-card { width: 100%; }
}

@media (max-width: 1180px) {
  .portal-shell { grid-template-columns: 228px minmax(0, 1fr); }
  .portal-main { padding-inline: 22px; }
  .home-kpi-grid, .report-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-workspace, .config-layout { grid-template-columns: 1fr; }
  .detail-panel { position: static; max-height: none; }
  .config-sidebar { position: static; }
  .config-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capture-guide-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .capture-metrics, .config-status-strip { grid-template-columns: 1fr; }
  .topic-groups { grid-template-columns: 1fr; }
  .workspace-intro { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 760px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar { display: none; }
  .mobile-topnav { display: grid; grid-template-columns: repeat(6, 1fr); }
  .mobile-topnav a { min-height: 50px; }
  .portal-main { padding: 0 14px 34px; }
  .topstrip { padding: 10px 0; margin-bottom: 18px; }
  .topstrip #ts-sync { display: none; }
  .page-head { margin-bottom: 20px; }
  .page-head h1 { font-size: 27px; }
  .screen { gap: 18px; }
  .card-pad, .capture-section, .settings-card { padding: 20px; }
  .hero-action { min-height: 0; padding: 25px; }
  .hero-score { width: 100%; min-height: 92px; }
  .home-kpi-grid, .report-kpi-grid { grid-template-columns: 1fr; }
  .workspace-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 20px; scrollbar-width: none; }
  .workspace-tabs::-webkit-scrollbar { display: none; }
  .list-toolbar { align-items: stretch; flex-direction: column; }
  .sort-control select { width: 100%; }
  .capture-commandbar { align-items: stretch; flex-direction: column; }
  .capture-command-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .capture-command-actions .btn { width: 100%; }
  .capture-studio { grid-template-columns: 1fr; }
  .capture-mode-card { grid-template-columns: 36px minmax(0, 1fr); }
  .capture-mode-card .badge { grid-column: 2; width: fit-content; }
  .destination-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .capture-phone { width: min(310px, 100%); }
  .capture-advanced summary { grid-template-columns: 40px minmax(0, 1fr); }
  .capture-advanced summary > .badge { grid-column: 2; width: fit-content; }
  .report-toolbar-row { align-items: stretch; flex-direction: column; }
  .report-select-group { justify-content: space-between; }
  .report-range-text { margin-left: 0; }
  .report-range-text::before { display: none; }
  .report-toolbar-actions { margin-left: 0; justify-content: space-between; }
  .config-nav { grid-template-columns: 1fr; }
  .settings-save-row { align-items: stretch; flex-direction: column; }
  .settings-save-row .btn { width: 100%; }
}

@media (max-width: 520px) {
  .mobile-topnav a { font-size: 9px; }
  .topstrip .status-pill { display: none; }
  .capture-command-actions { grid-template-columns: 1fr; }
  .capture-fields, .field-grid, .classification-grid { grid-template-columns: 1fr; }
  .activity-title { align-items: flex-start; flex-direction: column; gap: 3px; }
  .system-row { grid-template-columns: 38px minmax(0, 1fr); }
  .system-row > .status-pill { grid-column: 2; width: fit-content; }
  .kpi-link { grid-template-columns: 50px minmax(0, 1fr) 20px; }
  .rating-bar { grid-template-columns: 68px 1fr 34px; gap: 8px; }
  .topic-bar { grid-template-columns: 100px 1fr 32px; gap: 8px; }
}

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

/* ---------- Mobile application architecture ---------- */
html, body { max-width: 100%; }
.mobile-only, .mobile-header, .mobile-bottom-nav, .mobile-filter-sheet { display: none; }
.analysis-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0; color: var(--cd-muted); font-size: 12.5px; }
.customer-block { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cd-line); }
.customer-block > div { min-width: 0; display: grid; gap: 2px; }
.customer-block span { color: var(--cd-muted); font-size: 12px; overflow-wrap: anywhere; }
.mobile-nav-row {
  min-height: 64px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px;
  gap: 12px; align-items: center; padding: 12px 4px; color: var(--cd-ink);
  border-bottom: 1px solid var(--cd-line); text-decoration: none;
}
.mobile-nav-row:hover { text-decoration: none; }
.mobile-nav-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.mobile-nav-row small { color: var(--cd-muted); font-size: 12px; line-height: 1.35; }
.mobile-nav-row > .icon { color: #9aa6bb; }
.mobile-utility-list { display: grid; border-top: 1px solid var(--cd-line); }
.mobile-logout-row {
  width: 100%; min-height: 52px; margin-top: 22px; border: 1px solid #ffd0cd; border-radius: 12px;
  background: #fff; color: var(--cd-red); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 750;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .portal-shell { grid-template-columns: 84px minmax(0, 1fr); }
  .portal-sidebar { padding: 22px 10px; }
  .brand { display: flex; justify-content: center; padding: 0 0 28px; }
  .brand > div:last-child, .portal-nav a > span:last-child, .sidebar-help { display: none; }
  .portal-nav a { min-height: 52px; display: grid; grid-template-columns: 1fr; place-items: center; padding: 0; }
  .portal-main { padding-inline: 20px; }
  .topstrip #ts-sync { display: none; }
  .home-kpi-grid, .report-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .config-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-card { padding: 24px; }
  .split-workspace { grid-template-columns: minmax(235px, .78fr) minmax(0, 1.22fr); gap: 14px; }
  .list-toolbar { align-items: stretch; flex-direction: column; }
  .sort-control, .sort-control select { width: 100%; }
  .entry-row { padding: 13px 10px; }
  .detail-block { padding: 18px; }
}

@media (min-width: 840px) and (max-width: 1023px) {
  .split-workspace { grid-template-columns: minmax(270px, .82fr) minmax(360px, 1.18fr); gap: 16px; }
  .entry-row { padding: 13px; }
  .detail-block { padding: 18px; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .split-workspace { grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); }
}

@media (max-width: 767px) {
  :root { --mobile-nav-height: 66px; }
  html, body { overflow-x: clip; }
  body { min-width: 0; background: #fff; font-size: 14px; }
  body.sheet-open { overflow: hidden; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
  button, .btn, .btn.small, .icon-btn, .avatar-btn { min-height: 44px; }
  .mobile-only { display: block; }
  button.mobile-only { display: inline-flex; }

  .portal-shell { display: block; min-height: 100dvh; }
  .portal-sidebar { display: none; }
  .portal-main {
    min-height: 100dvh; padding: 0 14px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 26px);
  }
  .topstrip, .page-head { display: none; }
  .mobile-header {
    position: sticky; top: 0; z-index: 35; min-height: calc(58px + env(safe-area-inset-top));
    margin: 0 -14px 14px; padding: env(safe-area-inset-top) 10px 0;
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center;
    background: rgba(255,255,255,.97); border-bottom: 1px solid var(--cd-line); backdrop-filter: blur(12px);
  }
  .mobile-back, .mobile-header-spacer { width: 44px; height: 44px; display: grid; place-items: center; }
  .mobile-back { min-width: 44px; padding: 0; color: var(--cd-ink); border: 0; background: transparent; border-radius: 11px; }
  .mobile-back:hover { background: var(--cd-soft); text-decoration: none; }
  .mobile-back .icon { width: 22px; height: 22px; }
  .mobile-header-copy { min-width: 0; display: grid; justify-items: center; line-height: 1.2; }
  .mobile-header-copy span { max-width: 100%; color: var(--cd-muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-header-copy strong { max-width: 100%; margin-top: 2px; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-bottom-nav {
    position: fixed; z-index: 50; inset: auto 0 0; min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start;
    padding: 5px max(4px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-right));
    border-top: 1px solid var(--cd-line); background: rgba(255,255,255,.98); box-shadow: 0 -8px 26px rgba(20,35,65,.07);
  }
  .mobile-bottom-nav a {
    min-width: 0; min-height: 56px; display: grid; grid-template-rows: 27px 18px; place-items: center;
    padding: 4px 2px 2px; color: #6d778b; border-radius: 10px; font-size: 10px; font-weight: 700; text-decoration: none;
  }
  .mobile-bottom-nav a.active { color: var(--cd-blue); background: var(--cd-blue-soft); }
  .mobile-bottom-nav .nav-icon { width: 23px; height: 23px; }
  .mobile-bottom-nav span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .mobile-bottom-nav a > span:last-child { white-space: nowrap; }
  .toast { right: 12px; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px); left: 12px; max-width: none; }
  .screen { gap: 16px; }
  .card { box-shadow: none; }

  /* Inicio */
  .home-screen > .hero-action, .home-screen > .home-kpi-grid { display: none; }
  .mobile-home-status { display: grid; gap: 9px; padding: 18px; border: 1px solid #cbd8fb; border-radius: 16px; background: #f5f8ff; }
  .mobile-home-status.is-calm { border-color: #bfe6ce; background: #f2fbf5; }
  .mobile-home-status h2, .mobile-home-status p { margin: 0; }
  .mobile-home-status h2 { font-size: 21px; letter-spacing: -.025em; }
  .mobile-home-status p { color: #4b5670; line-height: 1.45; }
  .mobile-home-status .btn { width: fit-content; margin-top: 3px; }
  .mobile-pending-block { display: grid; }
  .mobile-section-title { min-height: 38px; display: flex; align-items: center; justify-content: space-between; }
  .mobile-section-title h2 { margin: 0; font-size: 17px; }
  .mobile-section-title > span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--cd-orange-soft); color: #a24d00; font-size: 12px; font-weight: 800; }
  .mobile-row-list { border-top: 1px solid var(--cd-line); }
  .mobile-kpi-block {
    overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px; border: 1px solid var(--cd-line); border-radius: 14px; background: var(--cd-line);
  }
  .mobile-kpi-block a { min-height: 84px; display: grid; align-content: center; gap: 4px; padding: 13px 15px; background: #fff; color: inherit; text-decoration: none; }
  .mobile-kpi-block span { color: var(--cd-muted); font-size: 12px; font-weight: 700; }
  .mobile-kpi-block strong { font-size: 23px; line-height: 1; }
  .mobile-kpi-block strong small { color: #f6b512; font-size: 13px; }
  .home-lower-grid { display: grid; gap: 20px; }
  .home-lower-grid > .card { border: 0; border-radius: 0; padding: 0; }
  .home-lower-grid .card-head { margin-bottom: 8px; }
  .activity-list, .system-list { margin: 0; }
  .activity-item { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 10px; padding: 13px 2px; border-radius: 0; }
  .activity-item .person { width: 40px; height: 40px; }
  .system-row { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 12px 2px; }
  .system-report-link { margin-top: 12px; }

  /* Shared mobile list → detail */
  .workspace-intro { display: flex; gap: 5px; margin-bottom: -4px; }
  .workspace-intro .human-review-note { display: none; }
  .workspace-tabs { display: none; }
  .split-workspace { display: block; }
  .mobile-list-screen .detail-panel { display: none; }
  .mobile-detail-screen .workspace-intro, .mobile-detail-screen .list-panel { display: none; }
  .list-panel, .detail-panel { border: 0; border-radius: 0; overflow: visible; }
  .list-toolbar { min-height: 58px; margin: 0 -2px; padding: 7px 2px 10px; display: grid; grid-template-columns: minmax(0, 1fr) 44px; border-bottom: 1px solid var(--cd-line); background: #fff; }
  .list-toolbar .btn.icon-only, .mobile-sheet-head .icon-btn { width: 44px; min-width: 44px; }
  .desktop-filter-control { display: none; }
  .sort-control { min-width: 0; }
  .sort-control select { width: 100%; height: 44px; }
  .entry-row { min-height: 104px; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 14px 2px; }
  button.entry-row { min-height: 104px; }
  .entry-row.active { background: #fff; box-shadow: none; }
  .entry-row .person { width: 40px; height: 40px; }
  .entry-head { justify-content: space-between; gap: 6px; }
  .entry-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .entry-copy { font-size: 13px; }
  .detail-panel { position: static; max-height: none; }
  .detail-block { padding: 16px 0; }
  .detail-block:first-child { padding-top: 4px; }
  .detail-title-row { grid-template-columns: 44px minmax(0, 1fr); }
  .detail-title-row > :last-child { grid-column: 2; }
  .classification-grid { grid-template-columns: 1fr; }
  .reply-box { min-height: 150px; font-size: 16px; }
  .detail-panel .actions > .btn { flex: 1 1 140px; }
  .analysis-meta { display: grid; gap: 5px; }
  .review-analysis-block .topic-pill-list { margin-top: 10px; }

  .mobile-filter-sheet {
    position: fixed; z-index: 80; inset: 0; min-height: 100dvh; overflow-y: auto;
    padding: calc(18px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
    background: #fff; align-content: start; gap: 18px;
  }
  .mobile-filter-sheet:not([hidden]) { display: grid; }
  .mobile-sheet-head { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .mobile-sheet-head h2 { margin: 2px 0 0; font-size: 21px; }
  .mobile-sheet-head .icon-btn { font-size: 25px; }

  /* Captación */
  .capture-commandbar, .capture-metrics, .capture-preview-panel { display: none; }
  .capture-studio { display: none; }
  .mobile-capture-overview { display: none; }
  .capture-route-root .mobile-capture-overview, .capture-route-enlace .mobile-capture-overview { display: grid; gap: 16px; }
  .mobile-capture-status { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border: 1px solid #cfe8d7; border-radius: 15px; background: #f4fbf6; }
  .mobile-capture-status .capture-live-dot { margin-top: 7px; }
  .mobile-capture-status > div { min-width: 0; display: grid; gap: 2px; }
  .mobile-capture-status small, .mobile-capture-status span:last-child { color: var(--cd-muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mobile-quick-actions .btn { width: 100%; padding-inline: 8px; }
  .mobile-quick-actions .btn:last-child { grid-column: 1 / -1; }
  .mobile-capture-sections { display: none; border-top: 1px solid var(--cd-line); }
  .capture-route-root .mobile-capture-sections { display: block; }
  .capture-route-pagina .capture-studio, .capture-route-formulario .capture-studio, .capture-route-material .capture-studio { display: block; }
  .capture-editor { display: block; }
  .capture-editor > [data-capture-section], .capture-advanced[data-capture-section] { display: none; }
  .capture-route-pagina [data-capture-section="pagina"],
  .capture-route-formulario [data-capture-section="formulario"],
  .capture-route-material [data-capture-section="material"] { display: block; }
  .capture-section, .capture-advanced { border: 0; border-radius: 0; padding: 8px 0 18px; }
  .capture-section + .capture-section { margin-top: 8px; }
  .capture-section-head { margin-bottom: 16px; grid-template-columns: 32px minmax(0, 1fr); }
  .capture-section-head h2 { font-size: 18px; }
  .capture-fields, .field-grid { grid-template-columns: 1fr; }
  .capture-mode-card { grid-template-columns: 34px minmax(0, 1fr); }
  .capture-mode-card .badge { grid-column: 2; width: fit-content; }
  .destination-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .destination-row .text-link { grid-column: 2 / -1; }
  .capture-advanced summary { min-height: 72px; padding: 14px 2px; grid-template-columns: 40px minmax(0, 1fr); }
  .capture-guide-grid { padding: 16px 2px; }
  button.mobile-capture-save { display: none; width: 100%; position: sticky; bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px); z-index: 20; margin: 12px 0 4px; box-shadow: 0 10px 28px rgba(21,87,255,.24); }
  .capture-route-pagina button.mobile-capture-save, .capture-route-formulario button.mobile-capture-save { display: flex; }

  /* Reportes */
  .report-toolbar { border: 0; border-radius: 0; padding: 0 0 14px; }
  .report-toolbar-row { display: grid; gap: 10px; }
  .report-select-group { display: grid; gap: 5px; }
  .report-select-group select { min-height: 44px; width: 100%; }
  .report-range-text { margin: 0; font-size: 12.5px; }
  .report-toolbar-actions { margin: 0; justify-content: space-between; }
  .report-custom-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .report-custom-dates .field { min-width: 0; }
  .report-custom-dates .btn { grid-column: 1 / -1; }
  .report-kpi-grid {
    overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
    border: 1px solid var(--cd-line); border-radius: 14px; background: var(--cd-line);
  }
  .report-kpi { min-height: 86px; padding: 12px; border: 0; border-radius: 0; gap: 8px; }
  .report-kpi .bubble { width: 36px; height: 36px; }
  .report-kpi > div > strong { font-size: 20px; }
  .report-primary-grid { display: grid; gap: 16px; }
  .reports-screen .card-pad { padding: 16px; }
  .reports-screen .chart-card { min-height: 0; }
  .reports-screen .chart { height: 210px; margin-top: 4px; }
  .reports-screen .rating-bar { grid-template-columns: 62px minmax(0, 1fr) 54px; gap: 7px; font-size: 11.5px; }
  .report-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .report-metric-card { padding: 14px !important; }
  .report-metric-card h2 { font-size: 14px; }
  .report-metric-value { font-size: 22px; }
  .topic-groups { grid-template-columns: 1fr; gap: 14px; }
  .report-action-head, .report-action-body { display: grid; }
  .report-action-body .btn { width: 100%; }
  .data-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }

  /* Configuración */
  .config-layout { display: block; }
  .config-route-root .config-sidebar, .config-route-root .config-content { display: none; }
  .mobile-settings-index { display: block; border-top: 1px solid var(--cd-line); }
  .config-route-section .mobile-settings-index, .config-route-section .config-sidebar, .config-route-section .config-status-strip { display: none; }
  .config-content, .config-panels { display: block; }
  .config-section { gap: 14px; }
  .settings-card, #config-google > .card, #config-plan > .card, #config-google > .grid .card, #config-plan > .grid .card { padding: 8px 0 18px; border: 0; border-radius: 0; }
  .settings-card .field-grid { grid-template-columns: 1fr; gap: 12px; }
  .settings-card .toggle-row { margin-top: 10px; padding: 14px 10px; }
  .settings-save-row { position: relative; align-items: stretch; flex-direction: column; margin-top: 18px; }
  .settings-save-row .btn { width: 100%; }
  .config-section .two-grid { grid-template-columns: 1fr; }
  .config-section .actions .btn { flex: 1 1 140px; }
  .switch { width: 48px; height: 30px; }
  .switch .thumb { width: 24px; height: 24px; }
  .capture-advanced summary > .badge { grid-column: 2; width: fit-content; }
  .desktop-report-back { display: none; }

  .more-screen { padding-top: 2px; }

  /* Full-screen mobile dialogs */
  .modal-back { padding: 0; align-items: stretch; background: #fff; }
  .modal { width: 100%; max-width: none; min-height: 100dvh; border-radius: 0; padding: calc(22px + env(safe-area-inset-top)) 18px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 22px); box-shadow: none; }
}

@media (max-width: 374px) {
  .portal-main { padding-inline: 10px; }
  .mobile-header { margin-inline: -10px; }
  .mobile-bottom-nav a { font-size: 9px; }
  .mobile-home-status { padding: 15px; }
  .mobile-kpi-block a { padding-inline: 11px; }
  .mobile-quick-actions { grid-template-columns: 1fr; }
  .mobile-quick-actions .btn:last-child { grid-column: auto; }
  .report-kpi { padding: 10px 8px; }
  .report-custom-dates { grid-template-columns: 1fr; }
  .report-custom-dates .btn { grid-column: auto; }
}

/* Agente IA — resumen + drawer + modal (wireframe) */
.ai-agent-screen { display: grid; gap: 20px; }
.ai-agent-compact { max-width: 1180px; gap: 20px; width: 100%; margin-inline: auto; }

.ai-section-tabs {
  display: flex; gap: 4px; padding: 4px; width: fit-content;
  border: 1px solid var(--cd-line); border-radius: 12px; background: #fff;
}
.ai-section-tabs a {
  min-height: 40px; padding: 0 14px; border-radius: 9px;
  display: inline-flex; align-items: center; color: var(--cd-muted);
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.ai-section-tabs a:hover, .ai-section-tabs a:focus-visible { color: var(--cd-blue); }
.ai-section-tabs a.active { color: #fff; background: var(--cd-blue); }

.memory-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.memory-heading h2 { margin: 3px 0 4px; font-size: 24px; letter-spacing: -.025em; }
.memory-heading p { max-width: 720px; margin: 0; color: var(--cd-muted); line-height: 1.5; }
.memory-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.memory-metrics .card { min-height: 92px; padding: 16px; display: grid; align-content: center; gap: 7px; }
.memory-metrics span { color: var(--cd-muted); font-size: 12px; font-weight: 700; }
.memory-metrics strong { font-size: 25px; line-height: 1; }
.memory-list-card { padding: 0; overflow: hidden; }
.memory-list-head { padding: 18px 20px 12px; }
.memory-list-head h3 { margin: 0; font-size: 17px; }
.memory-list-head p { margin: 5px 0 0; max-width: 720px; }
.memory-filters {
  display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  gap: 10px; align-items: end; padding: 12px 20px 16px; border-bottom: 1px solid var(--cd-line);
}
.memory-filters .field { min-width: 0; gap: 4px; }
.memory-filters label { font-size: 11.5px; }
.memory-filters select { width: 100%; min-height: 40px; font-size: 13px; }
.memory-filters .btn { min-height: 40px; white-space: nowrap; }
.memory-table-wrap { max-width: 100%; overflow-x: auto; }
.memory-table { width: 100%; min-width: 0; margin: 0; table-layout: fixed; }
.memory-table th { white-space: nowrap; }
.memory-table td { vertical-align: top; }
.memory-table th:nth-child(1) { width: 18%; }
.memory-table th:nth-child(2) { width: 21%; }
.memory-table th:nth-child(3) { width: 10%; }
.memory-table th:nth-child(4) { width: 9%; }
.memory-table th:nth-child(5) { width: 9%; }
.memory-table th:nth-child(6) { width: 10%; }
.memory-table th:nth-child(7) { width: 23%; }
.memory-copy-cell { min-width: 0; max-width: none; white-space: normal; line-height: 1.4; }
.memory-detail-link {
  padding: 0; border: 0; background: transparent; color: var(--cd-blue);
  font: inherit; text-align: left; cursor: pointer;
}
.memory-detail-link:hover { text-decoration: underline; }
.memory-confidence { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.memory-actions { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.memory-actions .btn { min-height: 34px; padding: 5px 9px; }
.memory-state {
  min-height: 230px; padding: 40px 24px; display: grid; place-items: center;
  align-content: center; gap: 8px; text-align: center; color: var(--cd-muted);
}
.memory-state strong { color: var(--cd-text); font-size: 16px; }
.memory-state p { max-width: 560px; margin: 0; line-height: 1.5; }
.memory-pagination {
  min-height: 58px; padding: 10px 20px; border-top: 1px solid var(--cd-line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.memory-pagination > div { display: flex; gap: 8px; }
.memory-detail { display: grid; gap: 18px; }
.memory-detail-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.memory-detail-head h2 { margin: 0; font-size: 20px; }
.memory-detail section h3 { margin: 0 0 7px; font-size: 12px; color: var(--cd-muted); text-transform: uppercase; letter-spacing: .05em; }
.memory-long-copy { margin: 0; padding: 13px; border: 1px solid var(--cd-line); border-radius: 12px; background: #f8fafc; white-space: pre-wrap; line-height: 1.5; }
.memory-detail-grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.memory-detail-grid > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--cd-line); border-radius: 10px; }
.memory-detail-grid dt { margin-bottom: 4px; color: var(--cd-muted); font-size: 11px; font-weight: 700; }
.memory-detail-grid dd { margin: 0; overflow-wrap: anywhere; font-size: 13px; }
.memory-tech summary { min-height: 40px; display: flex; align-items: center; color: var(--cd-blue); cursor: pointer; font-weight: 700; }
.memory-confirm { display: grid; gap: 14px; }
.memory-confirm h2, .memory-confirm p { margin: 0; }
.memory-confirm p { color: var(--cd-muted); line-height: 1.5; }
.memory-confirm-check { min-height: 46px; padding: 12px; display: flex; gap: 10px; align-items: start; border: 1px solid var(--cd-line); border-radius: 12px; }
.memory-confirm-check input { width: 18px; height: 18px; flex: 0 0 auto; }
.memory-confirm-error { min-height: 18px; color: var(--cd-red); font-size: 13px; }
.memory-confirm .actions { justify-content: flex-end; }

.ai-status-bar {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--cd-line);
  border-radius: 16px;
  background: #fff;
}
.ai-status-bar-label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--cd-muted);
  margin-bottom: 2px;
}
.ai-status-bar-item strong { font-size: 15px; font-weight: 750; }
.ai-status-bar-action { justify-self: end; }
.ai-status-bar-action .btn { min-height: 44px; min-width: 160px; }

.ai-agent-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.ai-agent-config-col { display: grid; gap: 16px; }
.ai-config-heading h2 {
  margin: 0;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cd-muted);
  font-weight: 750;
}

.ai-summary-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 104px;
  max-height: 112px;
  padding: 20px;
  border: 1px solid var(--cd-line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.ai-summary-card-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  background: #f3f6fb; color: #2f5fa7;
}
.ai-summary-card-icon .icon { width: 22px; height: 22px; }
.ai-summary-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ai-summary-card-top h3 { margin: 0; font-size: 15px; font-weight: 750; }
.ai-summary-edit {
  width: 92px; min-width: 92px; height: 40px; min-height: 40px;
  padding: 0 12px; font-size: 13px; flex: 0 0 auto;
}
.ai-summary-card-text {
  margin: 6px 0 0;
  color: var(--cd-muted);
  font-size: 13.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-summary-card-sub { color: #64748b; font-size: 12.5px; }

.ai-preview-card {
  position: sticky; top: 72px;
  padding: 20px;
  border: 1px solid var(--cd-line);
  border-radius: 16px;
  background: #fff;
  display: grid; gap: 14px;
}
.ai-preview-card-head h2 { margin: 0; font-size: 16px; }
.ai-preview-card-head .tiny { margin: 4px 0 0; }
.ai-preview-sample { display: grid; gap: 4px; }
.ai-preview-sample p { margin: 0; font-size: 14px; font-weight: 650; }
.ai-preview-answer-label {
  font-size: 12px; font-weight: 750; color: var(--cd-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ai-preview-empty {
  padding: 14px; border-radius: 12px; background: #f5f7fb; border: 1px dashed var(--cd-line);
}
.ai-preview-footnote { margin: 0; }
.ai-preview-state-safe { color: #1f6b3a; font-weight: 700; }
.ai-preview-state-review { color: #8a4b12; font-weight: 700; }

.ai-agent-mode-option {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px; border: 1px solid var(--cd-line); border-radius: 14px; background: #fbfcfe; cursor: pointer;
}
.ai-agent-mode-option.selected { border-color: #9db7de; background: #f4f8ff; }
.ai-agent-mode-option strong { display: block; font-size: 14px; }
.ai-agent-mode-option small { display: block; margin-top: 4px; color: var(--cd-muted); line-height: 1.45; }
.ai-agent-mode-option input { margin-top: 3px; width: 18px; height: 18px; accent-color: #2f5fa7; }
.ai-drawer-mode-list { display: grid; gap: 10px; }

.ai-drawer-notice {
  margin-top: 16px; padding: 14px; border-radius: 12px; border: 1px solid var(--cd-line);
  background: #f5f7fb; display: grid; gap: 8px;
}
.ai-drawer-notice.is-connected { background: var(--cd-green-soft); border-color: #c7e8d2; }
.ai-drawer-notice.is-pending { background: var(--cd-orange-soft); border-color: #f0d2ad; }
.ai-drawer-notice .btn { width: fit-content; min-height: 40px; }
.ai-drawer-hint { margin: 6px 0 0; color: var(--cd-muted); }

.ai-toggle-list { display: grid; margin-top: 8px; border: 1px solid var(--cd-line); border-radius: 14px; background: #fbfcfe; overflow: hidden; }
.ai-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; max-height: 56px; padding: 0 14px;
  border-bottom: 1px solid var(--cd-line); font-size: 14px; font-weight: 650;
}
.ai-toggle-row:last-child { border-bottom: 0; }

.ai-agent-counter { margin-top: 6px; color: var(--cd-muted); font-size: 12px; text-align: right; }

.ai-agent-preview-result { display: grid; gap: 10px; }
.ai-agent-preview-card { padding: 14px; border-radius: 14px; border: 1px solid var(--cd-line); background: #fff; display: grid; gap: 10px; }
.ai-preview-safe { border-color: #c7e8d2; background: #f5fbf7; }
.ai-preview-review { border-color: #f0d2ad; background: #fff9f2; }
.ai-agent-preview-body {
  padding: 12px; border-radius: 12px; background: #fff;
  border: 1px solid var(--cd-line); white-space: pre-wrap; line-height: 1.5;
}
.ai-preview-generating { color: var(--cd-muted); }
.ai-compact-note { background: #f5f7fb; color: #334155; }
.ai-compact-details summary { cursor: pointer; font-weight: 700; font-size: 12.5px; color: var(--cd-blue); list-style: none; }
.ai-compact-details[open] summary { margin-bottom: 8px; }
.ai-cb-preview-meta { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--cd-line); }
.ai-cb-preview-meta h4 { margin: 6px 0 0; font-size: 13px; }
.ai-preview-guard { margin: 0; color: var(--cd-muted); }

.ai-editor-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(15, 23, 42, .22);
  display: flex; justify-content: flex-end;
}
.ai-editor-drawer {
  width: min(560px, 100%);
  height: 100vh;
  background: #fff;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  box-shadow: -12px 0 40px rgba(15, 23, 42, .12);
}
.ai-editor-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 20px 14px; border-bottom: 1px solid var(--cd-line);
}
.ai-editor-header h2 { margin: 0; font-size: 20px; }
.ai-editor-header .tiny { margin: 6px 0 0; }
.ai-editor-body {
  overflow: auto; padding: 18px 20px 24px; display: grid; gap: 14px;
  align-content: start;
}
.ai-editor-footer {
  border-top: 1px solid var(--cd-line);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #fff;
}
.ai-drawer-error { color: var(--cd-red); margin: 0 0 8px; }
.ai-editor-footer-actions { display: flex; justify-content: flex-end; gap: 10px; }
.ai-editor-footer-actions .btn { min-height: 44px; min-width: 120px; }
#ai-drawer-save.primary { background: var(--cd-blue); color: #fff; border-color: var(--cd-blue); }

.ai-test-modal-dialog {
  width: min(960px, 100%);
  max-height: 760px;
  overflow: auto;
  padding: 0;
}
.ai-test-modal { display: grid; gap: 0; }
.ai-test-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 22px 12px; border-bottom: 1px solid var(--cd-line);
}
.ai-test-modal-head h2 { margin: 0; font-size: 20px; }
.ai-test-modal-head .tiny { margin: 6px 0 0; }
.ai-test-modal-grid {
  display: grid;
  grid-template-columns: 46% 54%;
  gap: 0;
  min-height: 420px;
}
.ai-test-col { padding: 18px 22px 22px; display: grid; gap: 12px; align-content: start; }
.ai-test-col + .ai-test-col { border-left: 1px solid var(--cd-line); background: #f8fafc; }
.ai-test-col h3 {
  margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--cd-muted);
}
.ai-test-modal-result { display: grid; gap: 10px; }
.ai-test-status strong { font-size: 15px; }

.ai-agent-compact input,
.ai-agent-compact select,
.ai-agent-compact textarea,
.ai-editor-drawer input,
.ai-editor-drawer select,
.ai-editor-drawer textarea,
.ai-test-modal input,
.ai-test-modal select,
.ai-test-modal textarea { min-height: 42px; font-size: 14px; }
.ai-agent-compact textarea,
.ai-editor-drawer textarea,
.ai-test-modal textarea { min-height: 88px; line-height: 1.45; }

@media (max-width: 1024px) {
  .ai-agent-layout { grid-template-columns: 1fr; }
  .ai-preview-card { position: static; }
  .memory-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .memory-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .ai-agent-screen {
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 28px);
  }
  .ai-agent-compact { gap: 14px; }
  .ai-section-tabs { width: 100%; overflow-x: auto; }
  .ai-section-tabs a { flex: 1 0 auto; justify-content: center; }
  .memory-heading h2 { font-size: 21px; }
  .memory-metrics {
    overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
    border: 1px solid var(--cd-line); border-radius: 14px; background: var(--cd-line);
  }
  .memory-metrics .card { min-height: 82px; border: 0; border-radius: 0; }
  .memory-metrics .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .memory-list-card { margin-inline: 0; }
  .memory-list-head { padding-inline: 18px; }
  .memory-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 18px; }
  .memory-filters .btn { grid-column: 1 / -1; width: 100%; }
  .memory-table-wrap { padding-left: 18px; }
  .memory-table { width: 980px; min-width: 980px; table-layout: auto; }
  .memory-pagination { padding-inline: 18px; }
  .memory-detail-grid { grid-template-columns: 1fr; }
  .memory-confirm .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .ai-status-bar {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .ai-status-bar-action {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .ai-status-bar-action .btn { width: 100%; }
  .ai-summary-card {
    max-height: none;
    min-height: 0;
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 16px;
  }
  .ai-summary-card-icon { width: 40px; height: 40px; border-radius: 12px; }
  .ai-summary-edit { width: auto; min-width: 72px; }
  .ai-editor-overlay { background: #fff; }
  .ai-editor-drawer {
    width: 100%;
    height: 100dvh;
    box-shadow: none;
  }
  .ai-test-modal-dialog { max-height: none; height: 100%; border-radius: 0; }
  .ai-test-modal-grid { grid-template-columns: 1fr; min-height: 0; }
  .ai-test-col + .ai-test-col { border-left: 0; border-top: 1px solid var(--cd-line); }
  .ai-agent-compact input,
  .ai-agent-compact select,
  .ai-agent-compact textarea,
  .ai-editor-drawer input,
  .ai-editor-drawer select,
  .ai-editor-drawer textarea,
  .ai-test-modal input,
  .ai-test-modal select,
  .ai-test-modal textarea { min-height: 44px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-editor-drawer { transition: none; }
}