/* New panel (Instantly-style). Tokens: docs/rediseno-instantly/investigacion/05 §4 and the spec §5.1. */
:root {
  --bg: #ffffff; --text: #14171f; --muted: #5d6778; --line: #e9ecf2;
  --primary: #006bff; --primary-dark: #0052c4; --primary-soft: #f1f9ff; --hover: #f4f6fa;
  --badge: #404040; --ok: #1a7f37; --warn: #b26a00; --bad: #c62828;
  --sent: #006bff; --replies: #e8590c; --replies-text: #c2410c;  /* replies text: same hue, 4.5:1 on white */
}
[x-cloak] { display: none !important; }
* { box-sizing: border-box; }
body.panel { margin: 0; background: var(--bg); color: var(--text); font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; }
.panel a { color: var(--primary); text-decoration: none; }
.panel a:hover { color: var(--primary-dark); }
/* A link styled as a button or a chip keeps its own text colour: `.panel a` is more specific than `.btn-p`. */
.panel a.btn-p, .panel a.btn-p:hover { color: #ffffff; }
.panel a.chip, .panel a.chip:hover { color: var(--text); }
.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; }
.grow { flex-grow: 1; }
.muted { color: var(--muted); }

.shell { display: flex; min-height: 100vh; }
.sidebar { width: 90px; flex-shrink: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 8px; background: var(--bg); }
.sidebar-nav { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; }
.panel .logo { width: 36px; height: 36px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.panel .nav { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #3d4554; }
.panel .nav:hover { background: var(--hover); color: var(--text); }
.panel .nav-on, .panel .nav-on:hover { background: var(--primary-soft); color: var(--primary); }
.panel .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--text); color: #fff; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.panel .logo:hover, .panel .avatar:hover { color: #fff; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ico-s { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.main-col { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 56px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; padding: 0 24px; }
.page-title { margin: 0; font-size: 16px; font-weight: 500; }
.content { padding: 24px 32px 48px; display: flex; flex-direction: column; gap: 24px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row-baseline { display: flex; align-items: baseline; gap: 12px; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.h2 { margin: 0; font-size: 18px; font-weight: 600; }

.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; color: var(--text); background: #fff; cursor: pointer; }
.chip:hover { border-color: #cfd6e0; }
.btn-p { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 6px; font-family: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--primary); background: var(--primary); color: #fff; cursor: pointer; }
.btn-p:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.select { height: 36px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; font-family: inherit; font-size: 14px; color: var(--text); background: #fff; }
.check { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-size: 14px; color: #3d4554; }

.ws { position: relative; }
.menu { position: absolute; right: 0; top: 42px; width: 220px; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 23, 31, .12); padding: 6px; z-index: 20; display: flex; flex-direction: column; gap: 2px; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px; border: 0; background: none; border-radius: 6px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text); text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--hover); }
.menu-check { margin-left: auto; font-size: 12px; color: var(--primary); }

.card { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 16px; }
.stat { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.stat-label { font-size: 13px; color: var(--muted); }
.stat-value { font-size: 26px; font-weight: 700; }
.stat-value-off { color: var(--muted); }
.stat-sub { font-size: 13px; color: var(--muted); }
.stat-help { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; align-self: flex-start; }
.stat-hl { border-color: #b8d6ff; background: #f7fbff; }
.stat-link { font-size: 13px; font-weight: 600; }

.alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; font-size: 14px; border: 1px solid var(--line); }
.alert-warn { border-color: #f3d9a4; background: #fffaf0; }
.alert-warn .ico-s { color: #9a5b00; }
.alert-danger { border-color: #f5c2c0; background: #fff5f5; }
.alert-danger .ico-s { color: var(--bad); }
.alert-info { border-color: #b8d6ff; background: #f7fbff; }
.alert-info .ico-s { color: var(--primary-dark); }
/* A long mailbox address breaks inside its line instead of pushing "Ver" off a phone's screen. */
.alert > span { min-width: 0; overflow-wrap: anywhere; }
.alert-link { margin-left: auto; font-weight: 600; flex-shrink: 0; }

.chart { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.legend { display: flex; gap: 20px; font-size: 13px; color: #3d4554; align-items: center; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-sent { background: var(--sent); }
.dot-replies { background: var(--replies); }
/* Plot between two number axes. The SVG is 220px tall for a 200 viewBox, so its
   grid lines (y = 10, 100, 190) sit at 11, 110 and 209px: the axis labels are
   16px lines in a column padded 3px, spread top to bottom, which centres them there. */
.chart-plot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 6px; }
.chart-yaxis { height: 220px; padding: 3px 0; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.chart-yaxis-sent { color: var(--sent); text-align: right; }
.chart-yaxis-replies { color: var(--replies-text); }
.chart-svg { width: 100%; height: 220px; display: block; }
.chart-grid { stroke: #f1f3f7; stroke-width: 1; }
.chart-grid-base { stroke: var(--line); }
.chart-line { fill: none; }
.chart-line-sent { stroke: var(--sent); stroke-width: 2.5; }
.chart-line-replies { stroke: var(--replies); stroke-width: 2; }
.chart-dot { stroke-width: 9; stroke-linecap: round; }
.chart-dot-sent { stroke: var(--sent); }
.chart-dot-replies { stroke: var(--replies); }
.chart-area { position: relative; }
.chart-cols { position: absolute; inset: 0; display: flex; }
.chart-col { flex: none; height: 100%; }
.chart-col:hover { background: rgba(20, 23, 31, .06); }
/* The day's label: --at is where its point sits (0-100 % of the plot). left: --at
   and translateX(-(--at)) of its own width keep it inside the plot at both ends.
   The column is not positioned, so the label's box is the whole plot. */
.chart-tip { display: none; position: absolute; top: 6px; left: var(--at); transform: translateX(calc(-1 * var(--at))); z-index: 2; pointer-events: none; flex-direction: column; gap: 2px; padding: 6px 9px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 12px rgba(20, 23, 31, .12); font-size: 12px; line-height: 16px; color: var(--text); white-space: nowrap; }
.chart-col:hover .chart-tip { display: flex; }
.tip-sent, .tip-replies { display: flex; align-items: center; gap: 6px; }
.tip-sent::before, .tip-replies::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.tip-sent::before { background: var(--sent); }
.tip-replies::before { background: var(--replies); }
.chart-axis { grid-column: 2; position: relative; height: 16px; font-size: 12px; line-height: 16px; color: var(--muted); }
.chart-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }

/* A row of 7 campaign tabs does not fit a 375px phone. As a flex item of
   .content's column layout .tabs defaults to min-width: auto (its content's
   full width), which was stretching the whole page sideways instead of
   staying inside the viewport. overflow-x makes .tabs scroll in place
   (and, per the flexbox spec, sets its automatic minimum size to 0); the
   explicit min-width is belt and braces for engines that need it spelled
   out. flex-shrink: 0 on .tab keeps each label readable instead of being
   squeezed. */
.tabs { display: flex; gap: 24px; padding: 0 20px; border-bottom: 1px solid var(--line); overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.tab { padding: 12px 2px; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0; font-family: inherit; cursor: pointer; flex-shrink: 0; }
.tab-on { color: var(--primary); border-bottom-color: var(--primary); }
.table { width: 100%; border-collapse: collapse; }
/* Around a table whose cells can run long (a long email - .td is nowrap): the
   wrapper scrolls instead of the table itself, so it never clips a row's own
   absolutely-positioned content (a "more actions" menu, .ws/.menu above) the
   way overflow on .table would. `position: relative` is for an .sr-only label
   in the last column, otherwise absolutely placed at the table's full width.
   One rule for delivery 4 (Buzones) and delivery 6A (Ajustes, Buscar lead,
   a campaign's Leads tab); delivery 5's .card-scroll (the card of the searches)
   is the same rule. */
.table-wrap, .card-scroll { overflow-x: auto; position: relative; }
.th { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; background: var(--badge); color: #fff; border-radius: 8px; padding: 4px 8px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; background: #f1f3f7; color: #3d4554; border-radius: 8px; padding: 3px 8px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.empty { padding: 32px; text-align: center; color: var(--muted); }
.range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.range-custom { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 100%; }
.range-custom .select { min-width: 0; max-width: 100%; }

/* Delivery 2: campaigns (forms, modal, side panel, status dots, progress). */
.small { font-size: 12px; }
.h3 { margin: 0; font-size: 16px; font-weight: 600; }
.panel a.name { font-weight: 600; color: var(--text); }
.panel a.name:hover { color: var(--primary); }
.back { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.panel a.back { color: var(--muted); }
.input, .textarea { height: 36px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; font-family: inherit; font-size: 14px; color: var(--text); background: #fff; min-width: 0; }
.textarea { height: auto; padding: 8px 10px; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid #b8d6ff; border-color: var(--primary); }
.input-s { width: 96px; }
.search { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.search .ico-s { position: absolute; left: 10px; color: var(--muted); }
.search .input { padding-left: 32px; width: 260px; max-width: 100%; }
.form { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.label { font-size: 13px; font-weight: 600; color: #3d4554; }
.help { font-size: 13px; color: var(--muted); margin: 0; }
.radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-d { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 6px; font-family: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--bad); background: var(--bad); color: #fff; cursor: pointer; }
.icon-btn { width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; display: inline-flex; align-items: center; justify-content: center; color: #3d4554; cursor: pointer; }
.icon-btn:hover { background: var(--hover); }
.actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.menu-item.danger { color: var(--bad); }
.panel a.menu-item { color: var(--text); }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.st-active::before { background: var(--primary); }
.st-paused::before { background: #d38b00; }
.st-error::before { background: var(--bad); }
.st-completed::before { background: var(--ok); }
.progress { width: 120px; height: 6px; border-radius: 3px; background: #eef1f6; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--primary); }
.row:hover { background: #fafbfd; }
.camp-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.modal-bg { position: fixed; inset: 0; background: rgba(20, 23, 31, .35); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal { background: #fff; border-radius: 10px; padding: 20px 24px; width: 420px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 32px rgba(20, 23, 31, .18); text-align: left; white-space: normal; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.drawer-bg { position: fixed; inset: 0; background: rgba(20, 23, 31, .2); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; background: #fff; border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(20, 23, 31, .12); z-index: 41; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.drawer-head { display: flex; align-items: center; gap: 12px; }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 12px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.mail { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.copy { white-space: pre-wrap; font-family: inherit; font-size: 14px; margin: 0; overflow-wrap: anywhere; }
.counters { display: flex; gap: 28px; flex-wrap: wrap; }
.counter b { font-size: 20px; display: block; }
.variant { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.variant-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill-warn { background: #fff4e0; color: #8a5300; }
.pill-blue { background: var(--primary-soft); color: var(--primary-dark); }
.thumb { max-width: 100%; border: 1px solid var(--line); border-radius: 6px; }
details.advanced > summary { cursor: pointer; font-weight: 600; color: var(--primary); }

/* Delivery 3a: Secuencias (the mockup's two columns, variant rows, switches, variables). */
.bad { color: var(--bad); }
.seq { display: flex; gap: 20px; align-items: flex-start; }
.seq-steps { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.seq-step { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.seq-group { display: flex; flex-direction: column; gap: 2px; }
.seq-group-title { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 6px 4px 2px; }
.seq-row { display: flex; align-items: center; gap: 8px; }
.var { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; flex-grow: 1; min-width: 0; }
.panel a.var { color: var(--text); }
.var:hover { background: #f7f9fc; }
.var-on { border-color: #b8d6ff; background: var(--primary-soft); }
.var-text { display: flex; flex-direction: column; min-width: 0; }
.var-subject { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.var-note { font-size: 12px; color: var(--muted); }
.letter { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.sw { width: 34px; height: 20px; border-radius: 10px; border: 0; background: #c9d1dd; position: relative; cursor: pointer; flex-shrink: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.sw-on { background: var(--primary); }
.sw-on::after { left: 17px; }
.link-btn { border: 0; background: none; color: var(--primary); font-family: inherit; font-size: 14px; font-weight: 600; padding: 6px 4px; cursor: pointer; }
.seq-delay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); color: #3d4554; }
.input-xs { width: 64px; }
.seq-editor { flex-grow: 1; min-width: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.seq-editor-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seq-form { display: flex; flex-direction: column; gap: 14px; }
.seq-body { min-height: 300px; line-height: 1.6; font-size: 15px; }
.vchips { display: flex; flex-wrap: wrap; gap: 6px; }
.vchip { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border-radius: 6px; background: #f1f3f7; font: 500 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: #3d4554; }
.seq-preview { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: #f7f9fc; display: flex; flex-direction: column; gap: 8px; }
.seq-history { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.seq-rev { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.modal-wide { width: 640px; max-height: calc(100vh - 32px); overflow-y: auto; }
.launch-list { margin: 0; padding-left: 20px; color: var(--bad); }
.launch-list li { overflow-wrap: anywhere; }
@media (max-width: 1024px) {
  .seq { flex-direction: column; }
  .seq-steps { width: 100%; }
}

/* Delivery 5: Buscar leads (the search form and its lines). */
.finder { padding: 24px; max-width: 980px; }
.finder-form { display: flex; flex-direction: column; gap: 20px; }
.stack-tight { display: flex; flex-direction: column; gap: 4px; }
.finder-campaign { max-width: 360px; }
.lines { display: flex; flex-direction: column; gap: 8px; }
.line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 8px; align-items: center; max-width: 720px; }
.line[hidden] { display: none; }
.finder-places { width: 100%; max-width: 480px; }
.finder-over { color: var(--bad); }
.finder .btn-p[disabled] { opacity: .5; cursor: not-allowed; }
.td-state { white-space: normal; min-width: 150px; max-width: 300px; overflow-wrap: anywhere; }
.run-state { white-space: normal; overflow-wrap: anywhere; }
/* The searches table fits a 1,280 px desktop (1,124 px of card) with no scroll even with long
   sector lists and a long error: tighter cells and its long columns wrap, at any length. Below
   that, the card scrolls (.card-scroll). */
.table-runs .th, .table-runs .td { padding-left: 10px; padding-right: 10px; }
.table-runs .td-wrap { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .chart-axis .tick-minor { display: none; }
  .line { grid-template-columns: minmax(0, 1fr) 32px; }
  .line input[name=offer] { grid-column: 1; grid-row: 2; }
  .finder { padding: 16px; }
}
@media (max-width: 380px) {   /* a 320px phone has a 129px plot: half its dates, half the width apart */
  .chart-axis .tick-narrow { display: none; }
}
@media (max-width: 768px) {
  .sidebar { width: 64px; }
  .content { padding: 16px; }
  .table { display: block; overflow-x: auto; }
  .kv { grid-template-columns: 1fr; }
  .search .input { width: 100%; }
}

/* Delivery 4: the Unibox (three columns), Buzones (health, warm-up, drawer tabs and the settings form). */
.content-flush { padding: 0; gap: 0; }
/* From 768 px the filters, the list and the thread each scroll inside the viewport
   (the height under the 57 px top bar), so the page never grows with the list:
   Instantly's pattern. The two left columns narrow with the window (240 + 380 px
   at 1440, 170 + 250 px at 768). Below 768 px, see the phone block further down. */
.unibox { display: grid; grid-template-columns: clamp(170px, 17vw, 240px) clamp(250px, 27vw, 380px) minmax(0, 1fr); height: calc(100vh - 57px); height: calc(100dvh - 57px); }
/* `position: relative` is for the composer's .sr-only label («Tu respuesta»), which is
   absolutely placed: with no positioned ancestor its containing block is the page, the
   column's overflow does not clip it, and a thread taller than the viewport makes the page
   scroll to reach it (same cause as .table-wrap). */
.unibox > .ub-filters, .unibox > .ub-list, .unibox > .ub-pane { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Their rows never shrink to fit the column (a flex item that scrolls itself,
   like the phone's .tabs, would otherwise collapse to 0 px): the column scrolls. */
.unibox > .ub-filters > *, .unibox > .ub-list > *, .unibox > .ub-pane > * { flex-shrink: 0; }
.ub-back, .ub-alert-pane { display: none; }
.ub-filters { border-right: 1px solid var(--line); padding: 8px 10px 24px; display: flex; flex-direction: column; min-width: 0; }
.ub-sec { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; }
.ub-filter, .panel a.ub-filter { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; list-style: none; overflow-wrap: anywhere; }
.ub-filter::-webkit-details-marker { display: none; }
.ub-filter:hover { background: var(--hover); }
.ub-filter-on, .panel a.ub-filter-on { background: var(--primary-soft); color: var(--primary-dark); }
.ub-square { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ub-count { margin-left: auto; font-size: 13px; color: var(--muted); }
.ub-sub { padding-left: 12px; display: flex; flex-direction: column; }
.ub-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.ub-list .tabs { padding: 0 16px; }
.ub-note { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); margin: 0; }
.ub-search { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; }
.ub-search .search, .ub-search .search .input { width: 100%; }
.ub-alert { margin: 12px 16px 0; }
.ub-bulk { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ub-thread { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ub-thread:hover { background: #f7f9fc; }
.ub-thread-on, .ub-thread-on:hover { background: var(--primary-soft); }
.ub-thread-main, .panel a.ub-thread-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex-grow: 1; color: var(--text); }
.ub-thread-top { display: flex; align-items: baseline; gap: 8px; }
.ub-company { font-weight: 500; overflow-wrap: anywhere; }
.ub-unread .ub-company { font-weight: 700; }
.ub-time { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ub-subject { font-size: 13px; color: #3d4554; overflow-wrap: anywhere; }
.ub-snippet { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.label-chip { display: inline-flex; align-self: flex-start; align-items: center; border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.label-pending { background: #fffbeb; color: #8a4b00; box-shadow: inset 0 0 0 1px #f5c26b; }   /* no classification yet (#128) */
.ub-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ub-pager { display: flex; align-items: center; gap: 8px; padding: 12px 16px; flex-wrap: wrap; }
.ub-pane { display: flex; flex-direction: column; min-width: 0; }
.ub-head { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.unibox .ub-head { position: sticky; top: 0; z-index: 2; background: var(--bg); }   /* stays on top of its scrolling thread */
.ub-who { display: flex; flex-direction: column; min-width: 0; }
.ub-who strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ub-avatar { width: 32px; height: 32px; border-radius: 50%; background: #e8eefb; color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.ub-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.ub-summary { display: flex; gap: 10px; padding: 12px 14px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; }
.ub-summary strong { font-weight: 600; white-space: nowrap; }
.ub-mail { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ub-mail-in { border-color: #b8d6ff; background: #fbfdff; }
.ub-mail > strong { overflow-wrap: anywhere; }   /* the message's own subject (_thread.html) */
.ub-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.ub-quote > summary { cursor: pointer; font-size: 13px; color: var(--muted); width: fit-content; }
.ub-quote > summary:hover { color: var(--text); }
.ub-quote > .copy { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--muted); }
.ub-meta > span { overflow-wrap: anywhere; }
.ub-composer { border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; }
.ub-composer-note { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.ub-composer textarea { border: 0; padding: 14px; min-height: 160px; font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--text); resize: vertical; }
.ub-composer textarea:focus { outline: 2px solid #b8d6ff; }
.ub-composer-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.hl { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hl::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b8c1cf; flex-shrink: 0; }
.hl-green::before { background: var(--ok); }
.hl-amber::before { background: var(--warn); }
.hl-red::before { background: var(--bad); }
.flame-on { color: var(--ok); }
.flame-bad { color: var(--bad); }
.flame-off { color: #b8c1cf; }
.drawer .tabs { padding: 0; }
.drawer .form { padding: 0; max-width: none; }
.drawer-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.acc-title { overflow-wrap: anywhere; }
.dns-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; flex-wrap: wrap; }
.dns-row strong { width: 64px; }
.dns-value { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; flex-basis: 100%; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Phone: one column and the page scrolls. An open thread shows alone, under
   «Volver a la lista» (its filters kept); with none open, the filters and the list. */
@media (max-width: 767.98px) {
  .unibox { grid-template-columns: minmax(0, 1fr); height: auto; }
  .unibox > .ub-filters, .unibox > .ub-list, .unibox > .ub-pane { overflow-y: visible; }
  .unibox-open > .ub-filters, .unibox-open > .ub-list, .unibox:not(.unibox-open) > .ub-pane { display: none; }
  .unibox .ub-head { position: static; }
  .ub-back { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 600; }
  .ub-alert-pane { display: flex; }
  .ub-filters, .ub-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .ub-head, .ub-body { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 768px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  /* A table scrolls inside its card here; an .sr-only label in its last column is
     absolutely placed, so without this it sits at the table's full width and
     widens the page (Buzones at 375 px: 926 px of page). */
  .table { position: relative; }
}

/* Delivery 6: lead search in the header, Ajustes, a lead's actions, the login. */
.top-search { flex: 0 1 260px; min-width: 0; }
.top-search .search, .top-search .input { width: 100%; }
.top-search-link { display: none; }
.help-warn { color: #8a5300; }
.switches { display: flex; flex-direction: column; }
.switch-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.switch-row:last-child { border-bottom: 0; }
.switch-row > .grow { min-width: 0; }
.settings-group { display: flex; flex-direction: column; gap: 16px; }
.settings-group + .settings-group { border-top: 1px solid var(--line); padding-top: 16px; }
.textarea-prompt { width: 100%; min-height: 200px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.input-w { width: 100%; max-width: 480px; }
.lead-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* A lead's mockup in its side panel: a small thumbnail of the top of the image, a link to the whole of it. */
.mockup-thumb { display: block; width: 200px; max-width: 100%; }
.mockup-thumb .thumb { display: block; width: 100%; height: 130px; object-fit: cover; object-position: top; }
/* A table stays inside its card: a long cell is cut (its whole text in its
   title) and a table still too wide scrolls inside the card, never the page
   (its .table-wrap is the one rule above, next to .table). */
.cut { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cut-wide { max-width: 420px; }
.copy-lines { white-space: pre-line; }   /* an email body: its line breaks, never its HTML */
.reason-bad { color: var(--bad); }
.reason-warn { color: #8a5300; }
.st-ok::before { background: var(--ok); }
.st-warn::before { background: #d38b00; }
.st-bad::before { background: var(--bad); }
.st-run::before { background: var(--primary); }
.st-muted::before { background: var(--muted); }
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: #f7f8fb; }
.login-card { width: 400px; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 8px 24px rgba(20, 23, 31, .06); }
.login-card .input { width: 100%; height: 40px; }
.login-card .btn-p { justify-content: center; height: 40px; }
.login-head { display: flex; align-items: center; gap: 12px; }
@media (max-width: 768px) {
  .tabs { overflow-x: auto; padding: 0 4px; }
  .tab { white-space: nowrap; }
}
@media (max-width: 480px) {
  .top-search { display: none; }
  .top-search-link { display: inline-flex; }
}