:root {
  color-scheme: dark;
  --ink: #111311;
  --ink-soft: #2a2e2b;
  --paper: #f7f7f3;
  --canvas: #e9eae5;
  --line: #c9ccc5;
  --line-dark: #555b56;
  --blue: #2767ff;
  --signal: #dcff52;
  --danger: #ba2c2c;
  --muted: #6f756f;
  --shadow: 0 24px 70px rgb(17 19 17 / 18%);
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--canvas);
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(390px, .75fr); }
.login-brand { background: var(--ink); color: white; padding: clamp(28px, 5vw, 72px); display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; position: relative; overflow: hidden; }
.login-brand::after { content: ""; position: absolute; width: 72%; aspect-ratio: 1; right: -28%; top: 8%; border: 1px solid #ffffff26; border-radius: 50%; box-shadow: 0 0 0 80px #ffffff08, 0 0 0 160px #ffffff05; }
.brand-lockup { display: flex; gap: 13px; align-items: center; letter-spacing: .12em; position: relative; z-index: 1; }
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup strong { font-size: 17px; line-height: 1; }
.brand-lockup small { font-size: 8px; margin-top: 5px; letter-spacing: .28em; opacity: .66; }
.brand-lockup--sportex { width: fit-content; display: grid; gap: 4px; align-items: start; }
.sportex-logo-frame { position: relative; width: 174px; height: 25px; display: block; overflow: hidden; flex: 0 0 auto; }
.sportex-logo { position: absolute; top: -36px; left: -29px; display: block; width: 225px; max-width: none; height: auto; }
.sportex-logo-frame--login { width: 236px; height: 32px; }
.sportex-logo-frame--login .sportex-logo { top: -50px; left: -40px; width: 307px; }
.brand-product-label { color: #aab4ac; font: 700 8px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .28em; }
.brand-lockup--light { color: white; }
.login-thesis { max-width: 760px; position: relative; z-index: 1; }
.eyebrow, .section-code { font: 700 11px/1 "Arial Narrow", "Segoe UI", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.login-thesis .eyebrow { color: var(--signal); }
.login-thesis h1 { margin: 18px 0 24px; font: 900 clamp(62px, 8vw, 126px)/.78 "Arial Narrow", "Segoe UI", sans-serif; letter-spacing: -.055em; text-transform: uppercase; }
.login-thesis p { max-width: 590px; margin: 0; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.55; color: #d7dad4; }
.route-line { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; padding: 0; margin: 64px 0 0; border-top: 1px solid #ffffff3b; }
.route-line li { padding-top: 15px; color: #919790; text-transform: uppercase; letter-spacing: .11em; font-size: 10px; }
.route-line li::before { content: ""; display: block; width: 7px; height: 7px; background: #6d736d; margin-top: -19px; margin-bottom: 13px; border-radius: 50%; }
.route-line li.is-active { color: white; }
.route-line li.is-active::before { width: 44%; height: 5px; border-radius: 0; background: var(--signal); }
.login-panel { background: var(--paper); display: grid; place-items: center; padding: 42px; }
.login-form { width: min(410px, 100%); display: grid; gap: 20px; }
.login-form h2, .sheet-head h2, .password-dialog h2 { margin: 9px 0 7px; font: 800 38px/1 "Arial Narrow", "Segoe UI", sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.login-form p { margin: 0; color: var(--muted); }
label { display: grid; gap: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
input, select { width: 100%; border: 1px solid var(--line); background: white; padding: 13px 14px; min-height: 48px; outline: none; border-radius: 0; color: var(--ink); }
input:focus, select:focus, button:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(39 103 255 / 18%); outline: none; }
.button { min-height: 46px; border: 1px solid transparent; padding: 0 19px; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .075em; transition: transform .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .5; cursor: wait; transform: none; }
.button--primary { color: #18221c; background: var(--signal); border-color: var(--signal); }
.button--signal { color: #18221c; background: var(--signal); border-color: var(--signal); }
.button--outline { color: var(--ink); background: transparent; border-color: var(--line-dark); }
.button--full { width: 100%; }
.form-error { min-height: 18px; margin: 0; color: var(--danger) !important; font-size: 13px; text-transform: none; letter-spacing: 0; }
.environment-note { color: var(--muted); line-height: 1.45; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px 1fr; }
.sidebar { background: var(--ink); color: white; padding: 28px 22px 22px; display: flex; flex-direction: column; position: sticky; height: 100vh; top: 0; }
.side-nav { margin-top: 70px; display: grid; gap: 7px; }
.nav-item { width: 100%; border: 0; border-left: 3px solid transparent; background: transparent; color: #8e958e; padding: 13px 12px; display: flex; justify-content: space-between; text-align: left; font-weight: 700; }
.nav-item b { min-width: 24px; font-size: 10px; padding: 3px 7px; text-align: center; background: #ffffff12; }
.nav-item.is-active { color: white; border-left-color: var(--signal); background: #ffffff0d; }
.sidebar-foot { margin-top: auto; border-top: 1px solid #ffffff1c; padding-top: 18px; display: grid; gap: 12px; }
.sidebar-foot > span { color: #7f867f; font: 700 9px/1 monospace; letter-spacing: .12em; overflow: hidden; text-overflow: ellipsis; }
.text-button { color: white; border: 0; padding: 0; background: transparent; text-align: left; font-size: 12px; }
.workspace { min-width: 0; }
.topbar { height: 82px; padding: 0 clamp(20px, 4vw, 58px); background: var(--paper); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar strong { display: block; margin-top: 5px; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.replay-actions { display: flex; align-items: center; gap: 9px; }
.account-button { display: flex; gap: 9px; align-items: center; border: 0; background: transparent; color: var(--ink); text-align: left; }
.account-button > span { width: 34px; height: 34px; display: grid; place-items: center; background: var(--ink); color: white; font-weight: 800; font-size: 11px; }
.account-button small { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.production-track { height: 52px; padding: 0 clamp(20px, 4vw, 58px); background: white; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.production-track span { display: flex; align-items: center; gap: 10px; border-right: 1px solid var(--line); padding: 0 13px; font: 700 10px/1 "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #858b84; }
.production-track span:first-child { border-left: 1px solid var(--line); }
.production-track b { font: 500 9px/1 monospace; }
.production-track .is-active { background: var(--ink); color: white; box-shadow: inset 0 -4px var(--signal); }
.content { padding: clamp(30px, 4vw, 62px); }
.view-header { display: grid; grid-template-columns: 1fr minmax(240px, 430px); gap: 40px; align-items: end; margin-bottom: 34px; }
.view-header h1 { margin: 9px 0 0; font: 900 clamp(42px, 5vw, 76px)/.9 "Arial Narrow", "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: -.045em; }
.view-header p { margin: 0; color: var(--muted); line-height: 1.55; }
.metrics-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); color: white; margin-bottom: 20px; }
.metrics-strip article { min-height: 110px; padding: 23px; border-right: 1px solid #ffffff24; display: grid; align-content: space-between; }
.metrics-strip span { color: #9ba19b; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.metrics-strip strong { font: 800 27px/1 "Arial Narrow", sans-serif; letter-spacing: -.02em; }
.commercial-header h1 { max-width: 820px; font-family: "Bahnschrift Condensed", "Arial Narrow", sans-serif; }
.commercial-intro { display: grid; gap: 13px; justify-items: start; }
.local-proof { display: inline-flex; align-items: center; min-height: 29px; padding: 0 10px; background: var(--signal); color: var(--ink); font: 800 9px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; }
.metrics-strip--commercial article:first-child { box-shadow: inset 0 4px var(--signal); }
.metrics-strip--commercial article:nth-child(2) { box-shadow: inset 0 4px var(--blue); }
.metrics-strip--commercial article:nth-child(3) { box-shadow: inset 0 4px #f2a93b; }
.commercial-list { display: grid; gap: 16px; }
.commercial-card { display: grid; grid-template-columns: 78px minmax(0, 1.2fr) minmax(260px, .8fr); min-height: 226px; background: var(--paper); border: 1px solid var(--line); position: relative; overflow: hidden; }
.evidence-rail { display: grid; grid-template-rows: repeat(3, 1fr); justify-items: center; background: var(--ink); color: white; padding: 18px 0; position: relative; }
.evidence-rail::before { content: ""; position: absolute; top: 35px; bottom: 35px; left: 50%; border-left: 2px dashed #ffffff42; }
.evidence-node { width: 28px; height: 28px; display: grid; place-items: center; background: var(--ink); border: 1px solid #ffffff66; border-radius: 50%; z-index: 1; font: 700 9px/1 "Cascadia Mono", Consolas, monospace; }
.evidence-node.is-live { color: var(--ink); background: var(--signal); border-color: var(--signal); }
.conversation-pane { padding: 24px 27px; display: grid; align-content: space-between; gap: 22px; }
.conversation-meta { display: grid; align-content: start; justify-items: start; gap: 13px; min-width: 0; }
.conversation-meta strong { display: block; font: 800 23px/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif; letter-spacing: -.015em; }
.conversation-meta small { display: block; margin-top: 6px; color: var(--muted); font: 700 9px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.attribution-chip { display: block; max-width: 100%; min-height: 30px; padding: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #e4e8ff; color: #174ac8; font: 800 9px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; }
.attribution-chip.is-unknown { background: #f5e6ca; color: #75480b; }
.message-quote { margin: 0; padding: 17px 19px; background: white; border-left: 4px solid var(--blue); font: 500 16px/1.5 Aptos, "Segoe UI", sans-serif; }
.message-quote::before { content: "MENSAJE NORMALIZADO"; display: block; margin-bottom: 9px; color: var(--muted); font: 700 8px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .1em; }
.decision-pane { padding: 24px 27px; border-left: 1px solid var(--line); background: #eeefe9; display: grid; align-content: space-between; gap: 20px; }
.stage-lockup { display: grid; gap: 8px; }
.stage-lockup > span { color: var(--muted); font: 700 9px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .09em; text-transform: uppercase; }
.stage-lockup strong { font: 900 clamp(38px, 4vw, 58px)/.8 "Bahnschrift Condensed", "Arial Narrow", sans-serif; letter-spacing: -.045em; }
.next-action { border-top: 1px solid var(--line); padding-top: 16px; }
.next-action span { display: block; margin-bottom: 7px; color: var(--blue); font: 800 9px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .09em; text-transform: uppercase; }
.next-action strong { font-size: 14px; line-height: 1.35; }
.commercial-empty { min-height: 310px; display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 35px; padding: 42px; background: var(--paper); border: 1px solid var(--line); }
.commercial-empty h2 { margin: 10px 0 12px; max-width: 650px; font: 900 clamp(34px, 4.2vw, 62px)/.88 "Bahnschrift Condensed", "Arial Narrow", sans-serif; letter-spacing: -.04em; text-transform: uppercase; }
.commercial-empty p { max-width: 690px; margin: 0; color: var(--muted); line-height: 1.55; }
.evidence-spool { width: 150px; height: 150px; border: 16px solid var(--ink); border-radius: 50%; display: grid; place-items: center; position: relative; }
.evidence-spool::before { content: ""; position: absolute; inset: 25px; border: 2px dashed var(--line-dark); border-radius: 50%; }
.evidence-spool span { position: absolute; width: 8px; height: 8px; background: var(--signal); border-radius: 50%; }
.evidence-spool span:nth-child(1) { top: 7px; }
.evidence-spool span:nth-child(2) { right: 12px; bottom: 24px; }
.evidence-spool span:nth-child(3) { left: 8px; bottom: 35px; }
.empty-actions { display: grid; gap: 10px; min-width: 235px; }
.ledger { background: var(--paper); border: 1px solid var(--line); }
.order-board-shell { overflow-x: auto; border: 1px solid var(--line); background: var(--paper); }
.orders-view-switch { display: flex; justify-content: flex-end; gap: 6px; margin: 14px 0 8px; }
.orders-view-switch [aria-pressed="true"] { background: var(--surface-strong); color: var(--text-on-strong); }
.orders-sheet { min-width: 860px; }
.orders-sheet table { width: 100%; border-collapse: collapse; font-size: 13px; }
.orders-sheet th { padding: 12px 14px; text-align: left; background: var(--surface-strong); color: var(--text-on-strong); font: 800 9px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; }
.orders-sheet td { padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.orders-sheet tbody tr:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.orders-board { display: grid; grid-template-columns: repeat(5, minmax(218px, 1fr)); min-width: 1090px; align-items: start; }
.order-column { min-height: 320px; border-right: 1px solid var(--line); }
.order-column:last-child { border-right: 0; }
.order-column-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--line); font: 800 9px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; }
.order-column-head strong { display: grid; min-width: 23px; height: 23px; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--ink); }
.order-card-stack { display: grid; gap: 10px; padding: 10px; }
.order-card { display: grid; gap: 7px; padding: 13px; border: 1px solid var(--line); border-top: 4px solid var(--blue); background: var(--paper); box-shadow: 0 8px 18px rgb(12 24 17 / 7%); }
.order-card[data-status="design_pending"] { border-top-color: #8a5cff; }
.order-card[data-status="production_ready"] { border-top-color: var(--signal); }
.order-card[data-status="in_production"] { border-top-color: #f2a93b; }
.order-card[data-status="completed"] { border-top-color: #3d9b68; }
.order-card-number { color: var(--muted); font: 800 9px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .07em; }
.order-card small { color: var(--muted); }
.order-card-money { font-weight: 800; }
.order-card-actions { display: grid; gap: 6px; margin-top: 4px; }
.ledger-head, .ledger-row { display: grid; grid-template-columns: 1.05fr 1.7fr repeat(3, .85fr) 1fr .8fr; align-items: center; }
.ledger--clients .ledger-head, .ledger--clients .ledger-row { grid-template-columns: 1.2fr 1.2fr 1fr .7fr; }
.ledger-head { min-height: 44px; background: var(--surface-strong); color: var(--text-on-strong); border-bottom: 1px solid var(--line); font: 700 9px/1 monospace; text-transform: uppercase; letter-spacing: .1em; }
.ledger-head span, .ledger-row > span { padding: 0 15px; }
.ledger-row { min-height: 68px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row:hover { background: white; }
.ledger-row .primary { font-weight: 800; }
.ledger-row .secondary { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.status-chip { display: inline-flex; width: fit-content; align-items: center; gap: 7px; padding: 7px 9px; background: #e5e9df; color: #172014; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.status-chip::before { content: ""; width: 7px; height: 7px; background: var(--blue); border-radius: 50%; }
.status-chip--production_ready { background: var(--signal); color: #172014; }
.status-chip--production_ready::before { background: #172014; }
.empty-state { min-height: 220px; display: grid; grid-template-columns: auto 1fr auto; gap: 25px; align-items: center; padding: 36px; }
.empty-number { color: #c4c7c0; font: 900 74px/1 "Arial Narrow", sans-serif; letter-spacing: -.06em; }
.empty-state strong { font-size: 17px; }
.empty-state p { margin: 6px 0 0; color: var(--muted); }

dialog { border: 0; padding: 0; color: var(--ink); background: var(--paper); box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(17 19 17 / 66%); backdrop-filter: blur(3px); }
.sheet-dialog { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.sheet-dialog form { padding: 0; }
.sheet-head { background: var(--ink); color: white; display: flex; justify-content: space-between; align-items: flex-start; padding: 25px 30px; }
.sheet-head .section-code { color: var(--signal); }
.sheet-head h2 { margin-bottom: 0; }
.icon-button { border: 1px solid #ffffff45; background: transparent; color: white; width: 38px; height: 38px; font-size: 25px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; }
.form-block { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 25px 30px 30px; display: grid; gap: 17px; align-content: start; }
.form-block:nth-child(3) { border-left: 1px solid var(--line); }
.form-block--wide { grid-column: 1 / -1; }
.form-block legend { transform: translateY(50%); padding: 0 8px 0 0; background: var(--paper); font: 800 13px/1 "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.form-block legend b { color: var(--blue); margin-right: 7px; }
.form-block p { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 0; }
.segmented { display: flex; gap: 0; }
.segmented label { display: block; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 11px 15px; border: 1px solid var(--line); background: white; }
.segmented input:checked + span { background: var(--surface-strong); color: var(--text-on-strong); border-color: var(--surface-strong); }
.three-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.sheet-dialog > form > .form-error { padding: 0 30px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 30px; border-top: 1px solid var(--line); background: white; }
.password-dialog { width: min(470px, calc(100vw - 32px)); padding: 30px; }
.password-dialog form { display: grid; gap: 17px; }
.password-dialog p { margin: 0; color: var(--muted); }
.password-dialog .sheet-actions { padding: 18px 0 0; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 390px; padding: 15px 18px; background: var(--ink); color: white; box-shadow: var(--shadow); transform: translateY(130%); opacity: 0; transition: .2s ease; font-size: 13px; }
.toast.is-visible { transform: translateY(0); opacity: 1; }
.toast.is-error { background: var(--danger); }

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { min-height: 44vh; padding: 34px; }
  .login-thesis h1 { font-size: clamp(58px, 13vw, 100px); margin-top: 45px; }
  .route-line { margin-top: 55px; }
  .login-panel { min-height: 56vh; }
  .app-shell { grid-template-columns: 78px 1fr; }
  .sidebar { padding: 23px 14px; }
  .sidebar .brand-lockup > span:last-child, .nav-item span, .sidebar-foot .text-button { display: none; }
  .side-nav { margin-top: 45px; }
  .nav-item { justify-content: center; border-left: 0; border-bottom: 3px solid transparent; }
  .nav-item.is-active { border-bottom-color: var(--signal); }
  .topbar { padding: 0 22px; }
  .replay-actions .button { font-size: 9px; padding: 0 11px; }
  .production-track { padding: 0 22px; overflow-x: auto; grid-template-columns: repeat(5, minmax(145px, 1fr)); }
  .content { padding: 32px 22px; }
  .metrics-strip { grid-template-columns: 1fr 1fr; }
  .view-header { grid-template-columns: 1fr; gap: 15px; }
  .commercial-card { grid-template-columns: 60px 1fr; }
  .decision-pane { grid-column: 2; border-left: 0; border-top: 1px solid var(--line); }
  .commercial-empty { grid-template-columns: 120px 1fr; }
  .evidence-spool { width: 110px; height: 110px; border-width: 12px; }
  .empty-actions { grid-column: 2; display: flex; flex-wrap: wrap; }
  .ledger { overflow-x: auto; }
  .ledger-head, .ledger-row { min-width: 900px; }
  .ledger--clients .ledger-head, .ledger--clients .ledger-row { min-width: 650px; }
}

@media (max-width: 650px) {
  .login-brand { min-height: 50vh; }
  .login-brand::after { display: none; }
  .login-thesis p { font-size: 15px; }
  .route-line li { font-size: 8px; }
  .login-panel { padding: 34px 23px; }
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: 64px; padding: 0 16px; flex-direction: row; align-items: center; }
  .sidebar .brand-lockup > span:last-child { display: block; }
  .side-nav { margin: 0 0 0 auto; display: flex; }
  .nav-item { width: 48px; padding: 8px; }
  .sidebar-foot { display: none; }
  .topbar { height: auto; min-height: 88px; align-items: flex-start; padding: 17px; }
  .topbar-actions { align-items: flex-end; flex-direction: column-reverse; }
  .replay-actions { display: none !important; }
  .account-button small { display: none; }
  .button--signal { font-size: 10px; min-height: 40px; padding: 0 12px; }
  .production-track { padding: 0; }
  .content { padding: 27px 16px; }
  .view-header h1 { font-size: 48px; }
  .metrics-strip { grid-template-columns: 1fr 1fr; }
  .metrics-strip article { min-height: 92px; padding: 16px; }
  .metrics-strip strong { font-size: 21px; }
  .empty-state { grid-template-columns: 1fr; padding: 25px; }
  .commercial-card { grid-template-columns: 42px 1fr; }
  .conversation-pane, .decision-pane { padding: 19px; }
  .attribution-chip { width: fit-content; }
  .commercial-empty { grid-template-columns: 1fr; padding: 28px; }
  .evidence-spool { width: 88px; height: 88px; border-width: 10px; }
  .commercial-empty .empty-actions { grid-column: 1; display: grid; min-width: 0; }
  .empty-number { font-size: 56px; }
  .form-grid { display: block; }
  .form-block:nth-child(3) { border-left: 0; }
  .three-fields { grid-template-columns: 1fr; }
  .sheet-actions { padding: 16px; }
  .sheet-actions .button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* TASK-20260803-004 · CRM comercial local */
textarea { width: 100%; min-height: 104px; resize: vertical; border: 1px solid var(--line); background: white; padding: 13px 14px; outline: none; border-radius: 0; color: var(--ink); font: inherit; line-height: 1.45; }
textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(39 103 255 / 18%); }
button { cursor: pointer; }

.stage-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 16px; border: 1px solid var(--line-dark); background: var(--paper); }
.stage-station { --stage-color: #8b918a; min-width: 0; min-height: 92px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr; gap: 13px 9px; align-items: end; padding: 15px; border: 0; border-right: 1px solid var(--line); border-top: 5px solid var(--stage-color); background: transparent; color: var(--ink); text-align: left; }
.stage-station:last-child { border-right: 0; }
.stage-station[data-stage="NUEVO"] { --stage-color: var(--signal); }
.stage-station[data-stage="EN_CALIFICACION"] { --stage-color: var(--blue); }
.stage-station[data-stage="COTIZADO"] { --stage-color: #8a5cff; }
.stage-station[data-stage="EN_SEGUIMIENTO"] { --stage-color: #f2a93b; }
.stage-station[data-stage="PERDIDO"] { --stage-color: #c55245; }
.stage-station[data-stage="SENA_VALIDADA"] { --stage-color: #3d9b68; }
.stage-station:hover, .stage-station.is-filtered { background: white; box-shadow: inset 0 -4px var(--stage-color); }
.stage-station .stage-index { align-self: start; color: var(--muted); font: 700 9px/1 "Cascadia Mono", Consolas, monospace; }
.stage-station strong { min-width: 0; font: 800 14px/1.05 "Bahnschrift Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; }
.stage-station b { grid-row: 1 / 3; grid-column: 3; align-self: center; font: 900 29px/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif; }

.crm-filterbar { display: grid; grid-template-columns: minmax(220px, 1.8fr) repeat(3, minmax(150px, .8fr)) auto; align-items: end; gap: 12px; margin-bottom: 16px; padding: 15px; border: 1px solid var(--line); background: white; }
.crm-filterbar label { gap: 6px; font-size: 9px; }
.crm-filterbar input, .crm-filterbar select { min-height: 42px; padding: 9px 11px; font-size: 12px; }
.crm-clear { min-height: 42px; }

.crm-workspace { display: grid; grid-template-columns: minmax(320px, 370px) minmax(0, 1fr); gap: 16px; align-items: start; }
.lead-master { min-width: 0; max-height: calc(100vh - 110px); min-height: 720px; position: sticky; top: 16px; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--line-dark); background: var(--paper); }
.lead-master:focus { outline: none; }
.lead-master-head { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-dark); background: var(--ink); color: white; }
.lead-master-head > div { display: grid; gap: 7px; }
.lead-master-head .section-code { color: var(--signal); }
.lead-master-head strong { font-size: 13px; }
.persistence-chip { flex: none; padding: 7px 8px; border: 1px solid #ffffff45; color: #d7dad4; font: 700 8px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; }
.lead-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.crm-workspace { grid-template-columns: minmax(0, 1fr); }
.lead-master { max-height: none; min-height: 0; position: static; }
.lead-kanban { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding: 12px; background: var(--canvas); }
.lead-kanban-column { min-width: 0; display: grid; grid-template-rows: auto minmax(160px, 1fr); gap: 9px; }
.lead-kanban-column-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-bottom: 2px solid var(--signal); background: var(--paper); font-size: 11px; }
.lead-kanban-column-head span { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: var(--surface-strong); color: var(--muted); font-size: 9px; }
.lead-kanban-stack { min-height: 180px; display: grid; align-content: start; gap: 9px; padding: 2px; }
.lead-kanban-card { display: grid; gap: 7px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 0 3px 10px rgb(24 34 28 / 6%); cursor: grab; }
.lead-kanban-card:hover { border-color: var(--blue); box-shadow: 0 8px 18px rgb(24 34 28 / 12%); }
.lead-kanban-card:active { cursor: grabbing; }
.lead-kanban-card strong { font-size: 13px; line-height: 1.2; }
.lead-kanban-contact, .lead-kanban-meta { color: var(--muted); font-size: 10px; }
.lead-kanban-next { padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; line-height: 1.35; }
.lead-detail { margin-top: 16px; }
.order-card { cursor: grab; }
.order-card:active { cursor: grabbing; }
.lead-row { --stage-color: #8b918a; width: 100%; position: relative; display: grid; gap: 12px; padding: 17px 16px 17px 19px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.lead-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--stage-color); }
.lead-row[data-stage="NUEVO"] { --stage-color: var(--signal); }
.lead-row[data-stage="EN_CALIFICACION"] { --stage-color: var(--blue); }
.lead-row[data-stage="COTIZADO"] { --stage-color: #8a5cff; }
.lead-row[data-stage="EN_SEGUIMIENTO"] { --stage-color: #f2a93b; }
.lead-row[data-stage="PERDIDO"] { --stage-color: #c55245; }
.lead-row[data-stage="SENA_VALIDADA"] { --stage-color: #3d9b68; }
.lead-row:hover { background: white; }
.lead-row.is-selected { background: white; box-shadow: inset -4px 0 var(--blue); }
.lead-row-top, .lead-row-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lead-row-identity { min-width: 0; }
.lead-row-identity strong, .lead-row-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-row-identity strong { font-size: 14px; }
.lead-row-identity small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.lead-stage { flex: none; max-width: 118px; padding: 6px 7px; background: #e7e9e3; font: 800 8px/1 "Cascadia Mono", Consolas, monospace; text-transform: uppercase; letter-spacing: .04em; }
.lead-row-meta { color: var(--muted); font-size: 10px; }
.origin-dot { display: inline-flex; align-items: center; gap: 5px; }
.origin-dot::before { content: ""; width: 6px; height: 6px; background: #a36a18; border-radius: 50%; }
.origin-dot.is-exact::before { background: var(--blue); }
.lead-row-next { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.35; }
.lead-row-next b { color: var(--blue); font: 800 8px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; }
.lead-list-empty { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 30px; text-align: center; }
.lead-list-empty p { margin: 0 0 8px; color: var(--muted); }

.lead-detail { min-width: 0; border: 1px solid var(--line-dark); background: #e9ebe5; }
.lead-detail:focus { outline: none; }
.lead-detail-head { min-height: 148px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); gap: 30px; align-items: center; padding: 25px 28px; background: var(--ink); color: white; box-shadow: inset 0 -5px var(--signal); }
.mobile-back { display: none; }
.lead-title { min-width: 0; }
.lead-title .section-code { color: var(--signal); }
.lead-title h2 { margin: 9px 0 7px; font: 900 clamp(34px, 4vw, 58px)/.85 "Bahnschrift Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: -.035em; }
.lead-title p { margin: 0; color: #aeb4ad; }
.lead-status-lockup { display: grid; justify-items: start; gap: 8px; padding-left: 24px; border-left: 1px solid #ffffff2e; }
.lead-status-lockup small { color: #8f968f; font: 700 8px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; }
.lead-status-lockup > strong { max-width: 390px; font-size: 14px; line-height: 1.35; }
.lead-status-lockup time { color: #c9cec8; font-size: 10px; }
.detail-stage { --stage-color: var(--signal); padding: 7px 9px; border-left: 4px solid var(--stage-color); background: #ffffff12; font: 800 9px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }
.detail-stage[data-stage="EN_CALIFICACION"] { --stage-color: var(--blue); }
.detail-stage[data-stage="COTIZADO"] { --stage-color: #8a5cff; }
.detail-stage[data-stage="EN_SEGUIMIENTO"] { --stage-color: #f2a93b; }
.detail-stage[data-stage="PERDIDO"] { --stage-color: #c55245; }
.detail-stage[data-stage="SENA_VALIDADA"] { --stage-color: #3d9b68; }
.lead-detail-grid { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 350px); gap: 16px; padding: 16px; }
.detail-main, .detail-side, .command-stack { min-width: 0; display: grid; align-content: start; gap: 16px; }
.detail-card { min-width: 0; border: 1px solid var(--line); background: var(--paper); }
.detail-card-head { min-height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.detail-card-head > div { display: grid; gap: 6px; }
.detail-card-head h3 { margin: 0; font: 800 21px/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; }
.brief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brief-fact { min-width: 0; min-height: 82px; display: grid; align-content: start; gap: 8px; padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brief-fact:nth-child(3n) { border-right: 0; }
.brief-fact span { color: var(--muted); font: 700 8px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; }
.brief-fact strong { overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; }
.safety-note { margin: 0; padding: 14px 18px; border-left: 5px solid #3d9b68; background: #e2f1e7; color: #24573b; font-size: 11px; line-height: 1.45; }
.qualification-grid { display: grid; grid-template-columns: 1fr 1fr; }
.qualification-column { min-width: 0; padding: 18px; }
.qualification-column + .qualification-column { border-left: 1px solid var(--line); }
.qualification-column h4 { margin: 0 0 14px; font: 800 12px/1 "Cascadia Mono", Consolas, monospace; text-transform: uppercase; }
.qualification-column.is-confirmed h4 { color: #2a774d; }
.qualification-column.is-missing h4 { color: #a15a1d; }
.qualification-row { display: grid; grid-template-columns: minmax(82px, .7fr) 1.3fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.qualification-row span { color: var(--muted); font-size: 10px; }
.qualification-row strong { overflow-wrap: anywhere; font-size: 11px; }
.qualification-column ul { margin: 0; padding: 0; list-style: none; }
.qualification-column li { position: relative; padding: 10px 0 10px 19px; border-top: 1px solid var(--line); font-size: 11px; }
.qualification-column li::before { content: "?"; position: absolute; left: 0; color: #a15a1d; font-weight: 900; }
.qualification-complete { margin: 0; padding: 15px; background: #e2f1e7; color: #24573b; font-size: 11px; }
.read-only-banner { padding: 11px 18px; background: #e4e8ff; color: #174ac8; font: 800 8px/1.2 "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.conversation-timeline { display: grid; gap: 12px; padding: 18px; }
.message-row { width: min(78%, 570px); display: grid; gap: 8px; padding: 13px 15px; border: 1px solid var(--line); background: white; }
.message-row.is-delta { justify-self: end; border-color: #b8c7f4; background: #edf1ff; }
.message-author { color: var(--blue); font: 800 8px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }
.message-row.is-client .message-author { color: #55705d; }
.message-row p { margin: 0; font-size: 13px; line-height: 1.45; }
.message-row time { justify-self: end; color: var(--muted); font-size: 9px; }
.activity-timeline { padding: 6px 18px 18px; }
.activity-row { display: grid; grid-template-columns: 12px minmax(110px, .6fr) minmax(0, 1.6fr) auto; gap: 10px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.activity-row:last-child { border-bottom: 0; }
.activity-node { width: 8px; height: 8px; margin-top: 3px; border: 2px solid var(--blue); border-radius: 50%; }
.activity-row strong { font: 800 9px/1.3 "Cascadia Mono", Consolas, monospace; text-transform: uppercase; }
.activity-row p { margin: 0; font-size: 11px; line-height: 1.4; }
.activity-row time { color: var(--muted); font-size: 9px; }

.creative-preview { --creative-accent: var(--blue); min-height: 230px; display: grid; align-content: end; gap: 9px; padding: 22px; border-top: 10px solid var(--creative-accent); background: var(--ink); color: white; }
.creative-preview::before { content: "SPORTEX / AD"; align-self: start; margin-bottom: 42px; color: var(--creative-accent); font: 900 34px/.8 "Bahnschrift Condensed", "Arial Narrow", sans-serif; letter-spacing: -.04em; }
.creative-preview .creative-format { width: fit-content; padding: 5px 7px; background: var(--creative-accent); color: var(--ink); font: 800 8px/1 "Cascadia Mono", Consolas, monospace; }
.creative-preview > b { color: #aeb4ad; font: 700 8px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; }
.creative-preview > strong { font: 900 28px/.9 "Bahnschrift Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; }
.creative-preview p { margin: 0; color: #c6cbc5; font-size: 11px; line-height: 1.4; }
.origin-metadata { display: grid; grid-template-columns: 88px 1fr; margin: 0; padding: 10px 18px 18px; }
.origin-metadata dt, .origin-metadata dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; font-size: 10px; }
.origin-metadata dt { color: var(--muted); }
.origin-metadata dd { font-weight: 700; }
.unknown-origin { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 14px; padding: 28px; text-align: center; }
.unknown-origin strong { padding: 10px; border: 1px solid #a36a18; color: #75480b; font: 900 15px/1 "Cascadia Mono", Consolas, monospace; }
.unknown-origin p { max-width: 260px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.command-form { display: grid; gap: 13px; padding: 17px; }
.command-field { gap: 7px; font-size: 9px; }
.command-field input, .command-field select { min-height: 42px; padding: 9px 11px; }
.command-help { margin: -2px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.button--full { width: 100%; }
.lead-detail-empty { min-height: 620px; display: grid; place-items: center; align-content: center; gap: 9px; text-align: center; }
.lead-detail-empty h2, .lead-detail-empty p { margin: 0; }
.lead-detail-empty p { color: var(--muted); }
.reset-dialog { width: min(520px, calc(100vw - 28px)); border-top: 8px solid var(--signal); padding: 28px; }
.reset-dialog form { display: grid; gap: 16px; }
.reset-dialog h2 { margin: 0; font: 900 34px/.95 "Bahnschrift Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; }
.reset-dialog p { margin: 0; color: var(--muted); line-height: 1.45; }
.reset-dialog .sheet-actions { margin: 4px -28px -28px; }
.confirmation-check { grid-template-columns: auto 1fr; align-items: start; padding: 14px; border: 1px solid var(--line); background: white; text-transform: none; letter-spacing: 0; line-height: 1.4; }
.confirmation-check input { width: 18px; min-height: 18px; margin: 1px 0 0; padding: 0; }

@media (max-width: 1180px) {
  .crm-filterbar { grid-template-columns: 1.5fr repeat(3, 1fr); }
  .crm-clear { grid-column: 4; }
  .crm-workspace { grid-template-columns: 310px minmax(0, 1fr); }
  .lead-detail-grid { grid-template-columns: 1fr; }
  .detail-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-side > .detail-card { align-self: start; }
  .command-stack { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .stage-board { grid-template-columns: repeat(6, minmax(145px, 1fr)); overflow-x: auto; scroll-snap-type: x proximity; }
  .stage-station { scroll-snap-align: start; }
  .crm-filterbar { grid-template-columns: 1fr 1fr; }
  .crm-search { grid-column: 1 / -1; }
  .crm-clear { grid-column: 2; }
  .crm-workspace { grid-template-columns: 280px minmax(0, 1fr); }
  .brief-grid { grid-template-columns: 1fr 1fr; }
  .brief-fact:nth-child(3n) { border-right: 1px solid var(--line); }
  .brief-fact:nth-child(2n) { border-right: 0; }
  .qualification-grid, .detail-side, .command-stack { grid-template-columns: 1fr; }
  .qualification-column + .qualification-column { border-left: 0; border-top: 1px solid var(--line); }
  .command-stack { grid-column: auto; }
}

@media (max-width: 650px) {
  .commercial-header h1 { font-size: 43px; }
  .metrics-strip--commercial { margin-bottom: 14px; }
  .stage-board { margin: 0 -16px 14px; border-left: 0; border-right: 0; }
  .stage-station { min-width: 144px; min-height: 82px; padding: 13px; }
  .crm-filterbar { grid-template-columns: 1fr; padding: 13px; }
  .crm-search, .crm-clear { grid-column: 1; }
  .crm-clear { width: 100%; }
  .crm-workspace { display: block; }
  .lead-master { position: static; min-height: 580px; max-height: none; }
  .lead-list { max-height: none; overflow: visible; }
  .lead-detail { display: none; border-left: 0; border-right: 0; margin: 0 -16px; }
  .crm-workspace.is-detail-open .lead-master { display: none; }
  .crm-workspace.is-detail-open .lead-detail { display: block; }
  .lead-detail-head { grid-template-columns: 1fr; gap: 17px; padding: 18px 17px 22px; }
  .mobile-back { display: inline-flex; width: fit-content; min-height: 42px; align-items: center; padding: 0 12px; border: 1px solid #ffffff45; background: transparent; color: white; }
  .lead-title h2 { font-size: 43px; }
  .lead-status-lockup { padding: 16px 0 0; border-left: 0; border-top: 1px solid #ffffff2e; }
  .lead-detail-grid { padding: 10px; }
  .brief-grid { grid-template-columns: 1fr 1fr; }
  .brief-fact { min-height: 74px; padding: 13px; }
  .message-row { width: 90%; }
  .activity-row { grid-template-columns: 12px 1fr auto; }
  .activity-row p { grid-column: 2 / -1; }
  .detail-card-head { padding: 14px; }
  .reset-dialog { padding: 22px; }
  .reset-dialog .sheet-actions { margin: 2px -22px -22px; display: grid; }
}
@media (max-width: 650px) {
  #local-demo-actions { display: flex !important; }
  #local-demo-actions .button { min-height: 36px; padding: 0 9px; font-size: 8px; }
  .stage-station { min-width: 160px; }
}

/* TASK-20260803-005 · experiencia comercial aprobada */
:root {
  --ink: #18221c;
  --ink-soft: #344039;
  --paper: #ffffff;
  --canvas: #ffffff;
  --line: #d6dbd3;
  --line-dark: #9ca69e;
  --blue: #2457d6;
  --signal: #cfe64e;
  --danger: #bf4335;
  --success: #2f7a57;
  --muted: #68736c;
  --shadow: 0 22px 55px rgb(24 34 28 / 16%);
}

/* El login conserva la firma SPORTEX en ambos temas; no invierte grafito y blanco. */
.login-shell { background: #101612; }
.login-brand { background: #18221c; color: #ffffff; }
.login-brand .brand-lockup--light,
.login-brand .login-thesis h1 { color: #ffffff; }
.login-brand .login-thesis p { color: #c3cec6; }
.login-panel { background: #101612; color: #ffffff; }
.login-panel .login-form h2,
.login-panel label { color: #ffffff; }
.login-panel .login-form p,
.login-panel .environment-note { color: #9aa69e; }
.login-panel input { background: #18211b; border-color: #39443c; color: #ffffff; }

.button { min-height: 40px; border-radius: 8px; padding: 0 15px; font-size: 11px; text-transform: none; letter-spacing: 0; }
.button--primary { background: var(--blue); }
.button--quiet { color: var(--ink); background: #f5f7f3; border-color: var(--line); }
.button--quiet:hover { background: #e9eee8; }
.app-shell { grid-template-columns: 248px minmax(0, 1fr); background: var(--canvas); }
.sidebar { width: auto; height: 100vh; padding: 20px 16px 16px; overflow-y: auto; background: var(--ink); z-index: 15; }
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; }
.sidebar-close { display: none; }
.side-nav { margin-top: 28px; gap: 3px; }
.nav-group-label { margin: 23px 10px 7px; color: #879188; font: 700 9px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.nav-group-label:first-child { margin-top: 0; }
.nav-item { min-height: 39px; padding: 9px 10px; border: 0; border-radius: 7px; color: #bac2bb; font-size: 12px; font-weight: 600; }
.nav-item:hover { color: white; background: #ffffff0b; }
.nav-item.is-active { border: 0; color: white; background: #ffffff12; box-shadow: inset 3px 0 var(--signal); }
.nav-item b { border-radius: 999px; background: #ffffff16; }
.sidebar-foot { position: static; }
.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 10; height: 66px; padding: 0 24px; background: rgb(255 255 255 / 94%); backdrop-filter: blur(12px); }
.topbar-title { display: grid; gap: 2px; }
.topbar-title span { color: var(--muted); font-size: 10px; }
.topbar-title strong { margin: 0; font: 700 17px/1.2 "Bahnschrift SemiCondensed", "Segoe UI", sans-serif; }
.mobile-menu-button { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.content { padding: 24px; }
.page-intro { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 20px; }
.page-intro > div { min-width: 0; }
.page-intro h1 { margin: 4px 0 0; font: 750 clamp(28px, 3vw, 40px)/1 "Bahnschrift SemiCondensed", "Segoe UI", sans-serif; letter-spacing: -.025em; }
.page-intro p { max-width: 520px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.page-intro--compact { margin-bottom: 14px; }
.page-kicker { color: var(--blue); font: 700 9px/1.2 "Cascadia Mono", Consolas, monospace; letter-spacing: .09em; text-transform: uppercase; }

.today-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.today-metrics button { min-height: 118px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 10px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); text-align: left; }
.today-metrics button:hover, .today-metrics button.is-selected { border-color: var(--blue); box-shadow: 0 0 0 2px rgb(36 87 214 / 10%); }
.today-metrics span { font-size: 12px; font-weight: 700; }
.today-metrics strong { grid-row: 1 / 3; grid-column: 2; font: 750 32px/1 "Bahnschrift SemiCondensed", "Segoe UI", sans-serif; color: var(--blue); }
.today-metrics small { align-self: end; color: var(--muted); font-size: 10px; line-height: 1.35; }
.today-board { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.today-board > header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.today-board h2 { margin: 4px 0 0; font-size: 18px; }
.today-board > header > span { color: var(--muted); font-size: 11px; }
.today-list { display: grid; }
.today-row { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(180px, 1fr) minmax(240px, 1.45fr) auto; gap: 20px; align-items: center; min-height: 82px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.today-row:last-child { border-bottom: 0; }
.today-row:hover { background: #f8faf7; }
.today-flag, .today-identity, .today-next { display: grid; gap: 5px; min-width: 0; }
.today-flag > span { width: fit-content; padding: 5px 8px; border-radius: 999px; background: #e8eefc; color: #1d4bbd; font-size: 9px; font-weight: 800; }
.today-row[data-priority="overdue"] .today-flag > span { background: #f8e5e2; color: var(--danger); }
.today-row[data-priority="waiting"] .today-flag > span { background: #edf0eb; color: #566159; }
.today-row[data-priority="decision"] .today-flag > span { background: #e5f2e9; color: var(--success); }
.today-flag small, .today-identity span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.today-identity strong, .today-next strong { overflow: hidden; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; }
.today-next span { color: var(--blue); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.today-empty { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 30px; text-align: center; }
.today-empty p { margin: 0; color: var(--muted); }

.crm-filterbar { grid-template-columns: minmax(210px, 1.5fr) repeat(3, minmax(125px, .7fr)) auto; gap: 9px; margin-bottom: 10px; padding: 10px; border-radius: 10px; }
.crm-filterbar label { text-transform: none; letter-spacing: 0; }
.crm-filterbar input, .crm-filterbar select { min-height: 38px; border-radius: 7px; }
.crm-workspace { grid-template-columns: 300px minmax(0, 1fr); gap: 10px; height: calc(100vh - 280px); min-height: 540px; }
.lead-master { position: static; min-height: 0; max-height: none; height: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lead-master-head { min-height: 58px; padding: 11px 13px; border: 0; background: var(--ink); }
.lead-master-head > div { gap: 3px; }
.lead-master-head span { font-size: 10px; }
.lead-master-head strong { color: #c8d0c9; font-size: 10px; font-weight: 500; }
.persistence-chip { border-radius: 999px; font-size: 7px; }
.lead-list { overflow-y: auto; }
.lead-row { gap: 9px; padding: 13px 12px 13px 15px; }
.lead-row::before { width: 3px; background: #aeb6af; }
.lead-row[data-priority="response"]::before { background: var(--blue); }
.lead-row[data-priority="overdue"]::before { background: var(--danger); }
.lead-row[data-priority="waiting"]::before { background: #7e8a81; }
.lead-row[data-priority="decision"]::before { background: var(--success); }
.lead-row.is-selected { box-shadow: inset -3px 0 var(--blue); }
.lead-row-identity strong { font-size: 12px; }
.lead-row-identity small { font-size: 10px; }
.lead-priority { flex: none; max-width: 104px; padding: 5px 7px; border-radius: 999px; background: #edf0eb; color: var(--ink-soft); font-size: 8px; font-weight: 800; }
.lead-row-meta { font-size: 9px; }
.lead-row-next { padding-top: 8px; font-size: 10px; }

.lead-detail { min-height: 0; height: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); }
.lead-mobile-tabs { display: none; }
.lead-focus { height: 100%; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(380px, 1fr) 330px; }
.lead-chat-pane { min-width: 0; min-height: 0; max-height: 100%; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--paper); }
.lead-focus-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: white; }
.lead-focus-head h2 { margin: 3px 0; font: 750 22px/1 "Bahnschrift SemiCondensed", "Segoe UI", sans-serif; }
.lead-focus-head p { margin: 0; color: var(--muted); font-size: 10px; }
.lead-conversation { min-height: 0; overflow-y: auto; align-content: start; padding: 16px; }
.message-row { width: min(82%, 560px); border-radius: 11px; padding: 11px 13px; box-shadow: 0 2px 7px rgb(24 34 28 / 5%); }
.message-row.is-delta { border-color: #c9d4f2; background: #eaf0ff; }
.message-row p { font-size: 12px; }
.draft-area { padding: 12px; border-top: 1px solid var(--line); background: white; }
.draft-area > header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.draft-area > header small { color: var(--muted); font-size: 9px; }
.draft-input { min-height: 68px; max-height: 110px; border-radius: 8px; padding: 10px 11px; font-size: 12px; }
.draft-actions { display: flex; gap: 7px; margin-top: 8px; }
.draft-actions .button:last-child { margin-left: auto; }
.draft-resource { display: grid; gap: 4px; margin-top: 7px; padding: 9px 11px; border: 1px solid #b9d0c1; border-radius: 8px; background: #edf7f0; }
.draft-resource strong { font-size: 10px; }
.draft-resource span, .draft-resource small { color: #3d5c49; font-size: 9px; }
.lead-work-pane { min-width: 0; min-height: 0; max-height: 100%; height: 100%; overflow-y: auto; border-left: 1px solid var(--line); background: white; }
.work-head { min-height: 57px; display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.work-head strong { color: var(--muted); font-size: 9px; }
.work-section { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.work-section h3 { margin: 0 0 9px; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.inline-command { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.inline-command select, .work-action-form input, .work-followup-form select { min-height: 37px; padding: 8px 9px; border-radius: 7px; }
.work-summary, .work-suggestion p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.fact-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fact-chips span { padding: 6px 7px; border-radius: 6px; background: #edf5ef; color: #315d43; font-size: 9px; }
.work-missing ul { margin: 0; padding-left: 17px; color: #7b4a20; font-size: 10px; line-height: 1.55; }
.work-complete { margin: 0; color: var(--success); font-size: 10px; }
.work-action { background: #f4f7ff; box-shadow: inset 3px 0 var(--blue); }
.work-action-form { display: grid; gap: 7px; }
.work-action-form textarea { min-height: 68px; border-radius: 7px; padding: 9px; font-size: 11px; }
.work-suggestion { background: #f8f9f6; }
.work-origin { display: grid; gap: 5px; }
.work-origin h3 { margin-bottom: 3px; }
.work-origin strong { font-size: 11px; }
.work-origin small { color: var(--muted); font-size: 9px; }
.work-followup { border-bottom: 1px solid var(--line); }
.work-followup summary { padding: 13px 14px; font-size: 10px; font-weight: 800; cursor: pointer; }
.work-followup-form { display: grid; gap: 7px; padding: 0 14px 14px; }
.work-followup textarea { min-height: 65px; border-radius: 7px; font-size: 11px; }
.lead-detail-empty { min-height: 100%; }

.lead-sheet-dialog { width: min(980px, calc(100vw - 28px)); max-height: calc(100vh - 28px); border-radius: 12px; overflow: auto; }
.lead-sheet-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 18px 20px; background: var(--surface-strong); color: var(--text-on-strong); }
.lead-sheet-head h2 { margin: 5px 0; font: 750 28px/1 "Bahnschrift SemiCondensed", "Segoe UI", sans-serif; }
.lead-sheet-head p { margin: 0; color: #bdc6be; font-size: 11px; }
.lead-sheet-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.lead-sheet-body .detail-card { align-self: start; border-radius: 9px; overflow: hidden; }

/* Leads administra oportunidades; WhatsApp conserva el chat completo. */
#commercial-view .crm-workspace { display: block; height: auto; min-height: 0; }
#commercial-view .lead-master { display: block; height: auto; min-height: 0; max-height: none; overflow: visible; }
#commercial-view .lead-list { overflow-x: auto; overflow-y: visible; overscroll-behavior-inline: contain; }
#commercial-view .lead-detail { display: none; }
.lead-kanban-card { min-width: 0; }
.lead-kanban-preview { overflow: hidden; padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.lead-sheet-actions { display: flex; align-items: center; gap: 8px; }
.lead-sheet-actions .button { white-space: nowrap; }
.lead-message-preview { display: grid; gap: 7px; }
.lead-message-preview-row { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.lead-message-preview-row.is-delta { margin-left: 12%; border-color: #c8d7b8; background: #edf5e7; }
.lead-message-preview-row strong { font-size: 9px; }
.lead-message-preview-row p { margin: 0; font-size: 11px; line-height: 1.4; }
.lead-message-preview-row time { color: var(--muted); font-size: 8px; }
.lead-message-preview + .text-button { margin-top: 10px; }
.lead-quick-reply { display: grid; gap: 8px; }
.lead-quick-reply textarea { min-height: 74px; max-height: 150px; resize: vertical; padding: 10px; border-radius: 8px; font-size: 11px; }
.lead-sheet-more-info { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.lead-sheet-more-info > summary { padding: 13px; cursor: pointer; font-size: 11px; font-weight: 800; }
.lead-sheet-more-info[open] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 12px 12px; }
.lead-sheet-more-info[open] > summary { grid-column: 1 / -1; padding: 13px 0 0; }
.lead-sheet-more-info .detail-card { border: 1px solid var(--line); }
:root[data-theme="dark"] .lead-message-preview-row { border-color: #3a463d; background: #1b231d; }
:root[data-theme="dark"] .lead-message-preview-row.is-delta { border-color: #4b704d; background: #26412d; color: #f4faf2; }
:root[data-theme="dark"] .lead-message-preview-row.is-delta time { color: #c7d8c7; }

.candidate-panel, .settings-reset, .results-panel { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.candidate-panel header h2, .settings-reset h2, .results-panel h2 { margin: 5px 0 13px; font-size: 18px; }
.candidate-list { display: grid; gap: 8px; }
.candidate-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.candidate-row > div { display: grid; gap: 3px; }
.candidate-row span, .candidate-row small { color: var(--muted); font-size: 10px; }
.module-content { display: grid; gap: 14px; }
.module-grid, .results-metrics, .playbook-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.results-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.module-card { min-height: 145px; display: grid; align-content: space-between; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.module-card h2 { margin: 0; font-size: 17px; }
.module-card p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.module-card small { color: var(--muted); font-size: 10px; }
.results-metrics .module-card p { color: var(--blue); font: 750 31px/1 "Bahnschrift SemiCondensed", "Segoe UI", sans-serif; }
.results-panel { margin-top: 0; }
.result-row { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 11px; }
.result-row span { color: var(--muted); }
.creative-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.creative-module-card { min-height: 230px; display: grid; align-content: end; gap: 8px; padding: 20px; border-top: 8px solid var(--creative-color); border-radius: 8px; background: var(--surface-strong); color: var(--text-on-strong); }
.creative-module-card > span, .creative-module-card small { color: var(--creative-color); font-size: 9px; font-weight: 800; }
.creative-module-card h2 { margin: 0; font: 750 24px/1 "Bahnschrift SemiCondensed", "Segoe UI", sans-serif; }
.creative-module-card p { margin: 0; color: #c8d0c9; font-size: 11px; line-height: 1.45; }
.settings-reset p { color: var(--muted); }
.stage-board { border-radius: 8px; overflow: auto; }
.stage-station { min-width: 130px; }
.sidebar-scrim { position: fixed; inset: 0; z-index: 14; background: rgb(24 34 28 / 48%); }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .content { padding: 18px; }
  .crm-workspace { grid-template-columns: 275px minmax(0, 1fr); }
  .lead-focus { grid-template-columns: minmax(340px, 1fr) 300px; }
  .today-row { grid-template-columns: 145px minmax(160px, .8fr) minmax(220px, 1.2fr) auto; gap: 13px; }
}

@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 278px; height: 100vh; padding: 20px 16px; flex-direction: column; transform: translateX(-105%); transition: transform .2s ease; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-brand { width: 100%; }
  .sidebar-close { display: grid; place-items: center; }
  .sidebar .brand-lockup > span:last-child, .nav-item span, .sidebar-foot .text-button { display: block; }
  .side-nav { width: 100%; margin-top: 28px; display: grid; }
  .nav-item { width: 100%; justify-content: space-between; border: 0; }
  .nav-item.is-active { border: 0; box-shadow: inset 3px 0 var(--signal); }
  .sidebar-foot { display: grid; }
  .mobile-menu-button { display: block; }
  .topbar { justify-content: flex-start; }
  .topbar-actions { margin-left: auto; }
  body.menu-open { overflow: hidden; }
  .crm-workspace { grid-template-columns: 260px minmax(0, 1fr); }
  .lead-focus { grid-template-columns: 1fr 290px; }
  .today-metrics { grid-template-columns: 1fr 1fr; }
  .results-metrics { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .topbar { min-height: 62px; height: 62px; padding: 0 12px; align-items: center; }
  .topbar-actions { flex-direction: row; align-items: center; }
  .account-button small, .replay-actions { display: none !important; }
  .content { padding: 14px 12px 22px; }
  .page-intro { align-items: start; margin-bottom: 14px; }
  .page-intro h1 { font-size: 30px; }
  .page-intro p { display: none; }
  .today-metrics { grid-template-columns: 1fr 1fr; gap: 7px; }
  .today-metrics button { min-height: 100px; padding: 13px; }
  .today-metrics strong { font-size: 27px; }
  .today-row { grid-template-columns: 1fr auto; gap: 9px 12px; padding: 13px; }
  .today-flag { grid-column: 1; }
  .today-identity { grid-column: 1; }
  .today-next { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line); }
  .today-row > .button { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 0 11px; font-size: 10px; }
  .crm-filterbar { grid-template-columns: 1fr 1fr; }
  .crm-search { grid-column: 1 / -1; }
  .crm-clear { grid-column: 2; }
  .crm-workspace { display: block; height: auto; min-height: 0; }
  .lead-master { min-height: calc(100vh - 235px); height: auto; }
  .lead-list { overflow: visible; }
  .lead-detail { display: none; height: calc(100vh - 144px); margin: 0; border-radius: 9px; }
  .crm-workspace.is-detail-open .lead-master { display: none; }
  .crm-workspace.is-detail-open .lead-detail { display: block; }
  .lead-mobile-tabs { height: 42px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); background: white; }
  .lead-mobile-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; font-size: 11px; font-weight: 700; }
  .lead-mobile-tabs button.is-active { border-bottom-color: var(--blue); color: var(--blue); }
  .lead-focus { height: calc(100% - 42px); display: block; }
  .lead-focus[data-mobile-tab="chat"] .lead-work-pane { display: none; }
  .lead-focus[data-mobile-tab="work"] .lead-chat-pane { display: none; }
  .lead-chat-pane, .lead-work-pane { height: 100%; }
  .lead-work-pane { border-left: 0; }
  .lead-focus-head { min-height: 64px; padding: 9px 11px; }
  .lead-focus-head h2 { font-size: 18px; }
  .lead-focus-head .button { display: none; }
  .mobile-back { display: inline-flex; min-height: 34px; padding: 0 8px; border-color: var(--line); border-radius: 7px; color: var(--ink); }
  .lead-conversation { padding: 10px; }
  .message-row { width: 91%; }
  .draft-area { padding: 9px; }
  .draft-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .draft-actions .button:last-child { grid-column: 1 / -1; margin: 0; }
  .lead-sheet-body { grid-template-columns: 1fr; }
  .lead-sheet-actions .button { padding: 0 9px; font-size: 10px; }
  .lead-sheet-more-info[open] { grid-template-columns: 1fr; }
  .module-grid, .creative-module-grid, .playbook-list { grid-template-columns: 1fr; }
  .results-metrics { grid-template-columns: 1fr 1fr; }
  .candidate-row { align-items: start; }
  .ledger { overflow-x: auto; }
  .ledger-head, .ledger-row { min-width: 900px; }
  .ledger--clients .ledger-head, .ledger--clients .ledger-row { min-width: 650px; }
  .toast { left: 12px; right: 12px; bottom: 12px; }
}

@media (max-width: 430px) {
  .today-metrics button { min-height: 92px; }
  .today-metrics span { font-size: 10px; }
  .today-metrics small { font-size: 8px; }
  .today-board > header { padding: 11px 13px; }
  .today-row > .button { min-width: 74px; font-size: 9px; }
  .crm-filterbar { grid-template-columns: 1fr; }
  .crm-search, .crm-clear { grid-column: 1; }
  .results-metrics { grid-template-columns: 1fr; }
}

/* WhatsApp es una superficie operativa propia: conversación primero, contexto al lado. */
.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; }
#local-demo-actions[hidden] { display: none !important; }
.whatsapp-intro { align-items: center; }
.sync-state { min-width: 250px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.sync-state > div { display: grid; gap: 2px; }
.sync-state strong { font-size: 11px; }
.sync-state small { color: var(--muted); font-size: 9px; }
.sync-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #d59b21; box-shadow: 0 0 0 4px rgb(213 155 33 / 13%); }
.whatsapp-workspace { height: calc(100vh - 178px); min-height: 570px; display: grid; grid-template-columns: 330px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: 0 18px 45px rgb(24 34 28 / 8%); }
.whatsapp-master { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border-right: 1px solid var(--line); background: white; }
.whatsapp-master-head { display: grid; gap: 11px; padding: 14px; border-bottom: 1px solid var(--line); }
.whatsapp-master-head > div { display: flex; align-items: center; justify-content: space-between; }
.whatsapp-master-head strong { font-size: 13px; }
.whatsapp-master-head > div span { min-width: 24px; padding: 4px 7px; border-radius: 999px; background: #edf0eb; color: var(--muted); font-size: 9px; text-align: center; }
.whatsapp-search { text-transform: none; letter-spacing: 0; }
.whatsapp-search input { min-height: 39px; padding: 9px 11px; border-radius: 8px; background: var(--paper); font-size: 11px; }
.whatsapp-unread-filter { width: fit-content; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 750; }
.whatsapp-unread-filter:hover, .whatsapp-unread-filter.is-active { border-color: var(--blue); background: var(--selected-bg); color: var(--selected-text); }
.whatsapp-list { min-height: 0; overflow-y: auto; }
.whatsapp-row { width: 100%; min-height: 94px; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: start; padding: 13px; border: 0; border-bottom: 1px solid #e6e9e3; background: white; color: var(--ink); text-align: left; }
.whatsapp-row:hover { background: #f7f9f5; }
.whatsapp-row.is-selected { background: #edf3ff; box-shadow: inset 3px 0 var(--blue); }
.whatsapp-row.is-closed { background: color-mix(in srgb, var(--paper) 92%, var(--canvas)); color: var(--muted); }
.whatsapp-row.is-closed .whatsapp-avatar { opacity: .62; filter: grayscale(.35); }
.whatsapp-row.is-closed .whatsapp-team,
.whatsapp-row.is-closed .whatsapp-preview { color: var(--muted); }
.whatsapp-row.is-closed:hover { background: color-mix(in srgb, var(--signal) 8%, var(--paper)); box-shadow: inset 3px 0 color-mix(in srgb, var(--muted) 70%, transparent); }
.whatsapp-closed-state { width: fit-content; padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 999px; color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.whatsapp-row.is-unread .whatsapp-row-head strong, .whatsapp-row.is-unread .whatsapp-preview { color: var(--ink); font-weight: 800; }
.whatsapp-unread-badge { min-width: 18px; height: 18px; display: grid; place-items: center; margin-left: auto; padding: 0 5px; border-radius: 999px; background: #22a06b; color: white; font-size: 9px; font-weight: 900; }
.whatsapp-avatar { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #b9c0ba; border-radius: 50%; background: var(--paper); color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.whatsapp-avatar--detail { width: 40px; height: 40px; flex: 0 0 auto; border-color: #b8c8ef; background: #eaf0ff; color: #1f4db8; }
.whatsapp-row-copy { min-width: 0; display: grid; gap: 4px; }
.whatsapp-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.whatsapp-row-head strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-row-head time { flex: none; color: var(--muted); font-size: 7px; }
.whatsapp-team { overflow: hidden; color: #315d43; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-preview { overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-stage { width: fit-content; margin-top: 2px; padding: 3px 6px; border-radius: 999px; background: #edf0eb; color: #566159; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.whatsapp-detail { min-width: 0; min-height: 0; height: 100%; overflow: hidden; background: var(--paper); }
.whatsapp-mobile-tabs { display: none; }
.whatsapp-focus { height: 100%; grid-template-columns: minmax(400px, 1fr) 330px; }
.whatsapp-chat-head { justify-content: flex-start; }
.whatsapp-chat-head .button { margin-left: auto; }
.whatsapp-chat-identity { min-width: 0; display: grid; gap: 3px; }
.whatsapp-chat-identity h2 { margin: 0; overflow: hidden; font: 750 18px/1.1 "Bahnschrift SemiCondensed", "Segoe UI", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-chat-identity p { margin: 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-detail-empty, .whatsapp-empty { min-height: 100%; display: grid; place-items: center; align-content: center; gap: 8px; padding: 28px; text-align: center; }
.whatsapp-detail-empty h2, .whatsapp-empty strong { margin: 0; font-size: 18px; }
.whatsapp-detail-empty p, .whatsapp-empty p { max-width: 320px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.whatsapp-empty-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--signal); font-size: 22px; }

/* Concepto WhatsApp primero: el producto ocupa el marco, la inteligencia no invade el chat. */
#whatsapp-view { height: 100%; }
#whatsapp-view .whatsapp-workspace { height: calc(100vh - 114px); min-height: 580px; border-radius: 4px; box-shadow: none; }
.whatsapp-row { min-height: 82px; }
.whatsapp-chat-pane { height: 100%; }
.whatsapp-chat-head { min-height: 64px; padding: 10px 14px; background: var(--paper); }
.whatsapp-chat-menu { width: 38px; height: 38px; margin-left: auto; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; }
.whatsapp-chat-menu:hover { background: #e9ece7; color: var(--ink); }
.whatsapp-chat-pane .lead-conversation { padding: 22px 6%; background-color: var(--paper); background-image: radial-gradient(rgb(24 34 28 / 7%) .7px, transparent .7px); background-size: 14px 14px; }
.whatsapp-chat-pane .message-row { border: 0; border-radius: 8px; }
.whatsapp-chat-pane .message-row.is-client { background: white; }
.whatsapp-chat-pane .message-row.is-delta { background: #dcebd6; box-shadow: 0 2px 7px rgb(24 34 28 / 5%); }
.whatsapp-operational-event { justify-self: center; width: min(78%, 540px); display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--signal) 24%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--paper) 92%, var(--signal)); color: var(--ink-soft); box-shadow: 0 2px 7px rgb(24 34 28 / 4%); }
.whatsapp-operational-mark { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--signal) 24%, transparent); color: color-mix(in srgb, var(--signal) 62%, #203023); font-size: 11px; font-weight: 900; }
.whatsapp-operational-copy { min-width: 0; display: grid; gap: 2px; }
.whatsapp-operational-copy strong { overflow: hidden; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-operational-copy small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-operational-event time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.whatsapp-composer { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 42px; gap: 9px; align-items: end; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--paper); }
.whatsapp-image-preview { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: 54px minmax(0, 1fr) 30px; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 11px; }
.whatsapp-image-preview img { width: 54px; height: 54px; border-radius: 7px; object-fit: cover; }
.whatsapp-image-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-image-remove { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--surface-strong); color: var(--ink); font-size: 18px; }
.whatsapp-image-message { width: min(320px, 72vw); margin: 4px 0; display: grid; gap: 6px; }
.whatsapp-image-message:not(.is-loading) { cursor: zoom-in; }
.whatsapp-image-message img { width: 100%; max-height: 360px; border-radius: 7px; object-fit: cover; }
.whatsapp-image-message figcaption { font-size: 12px; line-height: 1.4; }
.whatsapp-image-loading { min-height: 110px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); font-size: 10px; }
.whatsapp-composer-icon, .whatsapp-send { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #657068; font-size: 24px; }
.whatsapp-send { width: 42px; height: 42px; background: var(--blue); color: white; font-size: 18px; }
.whatsapp-composer button:disabled { opacity: .46; cursor: default; }
.whatsapp-composer-input { min-height: 42px; max-height: 108px; resize: none; padding: 11px 16px; border: 1px solid #d9ddd7; border-radius: 22px; background: white; font-size: 12px; line-height: 1.45; }
.whatsapp-local-note { position: absolute; top: -21px; right: 14px; padding: 4px 8px; border: 1px solid var(--line); border-bottom: 0; border-radius: 7px 7px 0 0; background: var(--paper); color: var(--muted); font-size: 8px; }
.whatsapp-image-viewer { width: min(900px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; background: rgb(9 13 10 / 96%); }
.whatsapp-image-viewer::backdrop { background: rgb(0 0 0 / 72%); }
.whatsapp-image-viewer-body { min-height: min(680px, calc(100vh - 64px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
.whatsapp-image-viewer-body .icon-button { justify-self: end; background: white; color: #172019; }
.whatsapp-image-viewer-body img { width: 100%; height: min(590px, calc(100vh - 170px)); object-fit: contain; }
.whatsapp-image-viewer-body .button { justify-self: center; }
.whatsapp-more-info { border-top: 1px solid var(--line); }
.whatsapp-more-info > summary { padding: 13px 2px; color: var(--ink-soft); cursor: pointer; font-size: 11px; font-weight: 800; }
.whatsapp-more-info[open] > summary { color: var(--blue); }

/* Ningún hijo puede ensanchar la pestaña completa: la lectura sucede dentro de cada panel. */
#whatsapp-view, .whatsapp-workspace, .whatsapp-detail, .whatsapp-detail-workspace,
.whatsapp-chat-pane, .whatsapp-inline-details, .whatsapp-inline-details-body,
.whatsapp-row-copy, .whatsapp-chat-identity { min-width: 0; max-width: 100%; }
#whatsapp-view { overflow-x: clip; }
.whatsapp-detail-workspace { overflow: hidden; }

@media (max-width: 1050px) {
  .whatsapp-workspace { grid-template-columns: 290px minmax(0, 1fr); }
  .whatsapp-focus { grid-template-columns: minmax(330px, 1fr) 290px; }
}

@media (max-width: 720px) {
  .whatsapp-intro { align-items: flex-start; }
  .sync-state { min-width: 0; width: auto; padding: 7px 9px; }
  .sync-state small { display: none; }
  #whatsapp-view .whatsapp-workspace { height: calc(100vh - 90px); min-height: 520px; display: block; border-radius: 0; }
  .whatsapp-master, .whatsapp-detail { height: 100%; }
  .whatsapp-detail { display: none; }
  .whatsapp-workspace.is-detail-open .whatsapp-master { display: none; }
  .whatsapp-workspace.is-detail-open .whatsapp-detail { display: block; }
  .whatsapp-chat-pane { height: 100%; }
  .whatsapp-chat-head { min-height: 62px; }
  .whatsapp-chat-head .whatsapp-avatar { display: none; }
  .whatsapp-chat-menu { flex: 0 0 auto; }
  .whatsapp-chat-pane .lead-conversation { padding: 12px 10px 30px; }
  .whatsapp-operational-event { width: min(94%, 480px); grid-template-columns: 20px minmax(0, 1fr); border-radius: 12px; }
  .whatsapp-operational-event time { grid-column: 2; }
  .whatsapp-composer { grid-template-columns: 36px minmax(0, 1fr) 40px; gap: 7px; padding: 9px; }
  .whatsapp-composer-icon { width: 36px; height: 40px; }
  .whatsapp-send { width: 40px; height: 40px; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf3ee;
  --ink-soft: #c3cec6;
  --paper: #171d19;
  --canvas: #0e1310;
  --line: #303a33;
  --line-dark: #68756c;
  --blue: #7698ff;
  --signal: #cee65a;
  --danger: #ff8175;
  --success: #69c996;
  --muted: #8e9b92;
  --shadow: 0 24px 70px rgb(0 0 0 / 42%);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .workspace,
:root[data-theme="dark"] .content { background: var(--canvas); color: var(--ink); }
:root[data-theme="dark"] .topbar { background: rgb(23 29 25 / 95%); }
:root[data-theme="dark"] .sidebar { background: #101612; }
:root[data-theme="dark"] .account-button > span,
:root[data-theme="dark"] .whatsapp-empty-mark { background: #2b352e; color: var(--signal); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] dialog { background: #1d241f; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #77837b; }
:root[data-theme="dark"] .button--outline,
:root[data-theme="dark"] .button--quiet,
:root[data-theme="dark"] .mobile-menu-button,
:root[data-theme="dark"] .mobile-back { color: var(--ink); background: transparent; }
:root[data-theme="dark"] .button--signal { color: #18221c; }

:root[data-theme="dark"] .today-metrics button,
:root[data-theme="dark"] .today-board,
:root[data-theme="dark"] .crm-filterbar,
:root[data-theme="dark"] .crm-workspace,
:root[data-theme="dark"] .lead-master,
:root[data-theme="dark"] .lead-detail,
:root[data-theme="dark"] .lead-focus-head,
:root[data-theme="dark"] .lead-work-pane,
:root[data-theme="dark"] .work-section,
:root[data-theme="dark"] .draft-area,
:root[data-theme="dark"] .lead-mobile-tabs,
:root[data-theme="dark"] .candidate-panel,
:root[data-theme="dark"] .settings-reset,
:root[data-theme="dark"] .results-panel,
:root[data-theme="dark"] .module-card,
:root[data-theme="dark"] .candidate-row,
:root[data-theme="dark"] .commercial-card,
:root[data-theme="dark"] .message-quote,
  :root[data-theme="dark"] .sync-state { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .order-board-shell,
:root[data-theme="dark"] .order-column,
:root[data-theme="dark"] .order-card { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .fact-chips span { background: #263b2d; color: #91d0a8; }
:root[data-theme="dark"] .work-action { background: #1b2740; }
:root[data-theme="dark"] .work-suggestion { background: #1a201c; }
:root[data-theme="dark"] .attribution-chip { background: #23325c; color: #aebfff; }
:root[data-theme="dark"] .attribution-chip.is-unknown { background: #3b2d1d; color: #efc983; }
:root[data-theme="dark"] .draft-resource { background: #1d3325; border-color: #395c45; }
:root[data-theme="dark"] .draft-resource span,
:root[data-theme="dark"] .draft-resource small { color: #9dc7aa; }

:root[data-theme="dark"] .whatsapp-workspace,
:root[data-theme="dark"] .whatsapp-master,
:root[data-theme="dark"] .whatsapp-detail { background: #141a16; }
:root[data-theme="dark"] .whatsapp-master-head,
:root[data-theme="dark"] .whatsapp-chat-head { background: #1a211c; }
:root[data-theme="dark"] .whatsapp-master-head > div span,
:root[data-theme="dark"] .whatsapp-stage { background: #283129; color: var(--muted); }
:root[data-theme="dark"] .whatsapp-search input { background: #222a24; }
:root[data-theme="dark"] .whatsapp-row { background: #171d19; color: var(--ink); border-bottom-color: #29322b; }
:root[data-theme="dark"] .whatsapp-row:hover { background: #202821; }
:root[data-theme="dark"] .whatsapp-row.is-selected { background: #1d2c45; }
:root[data-theme="dark"] .whatsapp-avatar { background: #252d27; border-color: #47534a; color: var(--ink-soft); }
:root[data-theme="dark"] .whatsapp-avatar--detail { background: #243354; border-color: #536fae; color: #b9c9ff; }
:root[data-theme="dark"] .whatsapp-team { color: #82bd96; }
:root[data-theme="dark"] .whatsapp-chat-menu:hover { background: #29312b; color: var(--ink); }
:root[data-theme="dark"] .whatsapp-chat-pane .lead-conversation { background-color: #101612; background-image: radial-gradient(rgb(170 188 176 / 8%) .7px, transparent .7px); }
:root[data-theme="dark"] .whatsapp-chat-pane .message-row.is-client { background: #252d27; color: var(--ink); }
:root[data-theme="dark"] .whatsapp-chat-pane .message-row.is-delta { background: #24412f; color: #edf5ef; }
:root[data-theme="dark"] .whatsapp-composer,
:root[data-theme="dark"] .whatsapp-local-note { background: #1b221d; }
:root[data-theme="dark"] .whatsapp-composer-input { background: #252d27; border-color: #39443c; }

/* Las etapas pertenecen a la empresa; WhatsApp las usa como índice, no como regla. */
#whatsapp-view .whatsapp-workspace { grid-template-columns: 410px minmax(0, 1fr); }
.whatsapp-master { position: relative; grid-template-columns: 66px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.whatsapp-list-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.whatsapp-stage-rail { z-index: 3; width: 66px; min-width: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 10px 7px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 86%, var(--canvas)); scrollbar-width: thin; transition: width .32s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease; }
.whatsapp-stage-rail:hover,
.whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) { width: 174px; box-shadow: 18px 0 34px rgb(10 18 12 / 20%); }
.whatsapp-stage-tab { width: 100%; min-height: 48px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 25px; align-items: center; gap: 7px; padding: 6px; overflow: hidden; border: 0; border-radius: 11px; background: transparent; color: var(--muted); text-align: left; transition: color .2s ease, background .2s ease, transform .2s ease; }
.whatsapp-stage-tab:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); color: var(--ink); }
.whatsapp-stage-tab.is-active { background: color-mix(in srgb, var(--blue) 15%, var(--paper)); color: var(--blue); box-shadow: inset 3px 0 var(--blue); }
.whatsapp-stage-index { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 9px; font: 800 9px/1 "Cascadia Mono", Consolas, monospace; }
.whatsapp-stage-name { overflow: hidden; opacity: 0; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-8px); transition: opacity .18s ease .04s, transform .24s ease .04s; }
.whatsapp-stage-count { min-width: 23px; padding: 4px 5px; border-radius: 999px; background: color-mix(in srgb, currentColor 11%, transparent); font: 800 8px/1 "Cascadia Mono", Consolas, monospace; text-align: center; }
.whatsapp-stage-rail:hover .whatsapp-stage-name,
.whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name { opacity: 1; transform: translateX(0); }

.whatsapp-chat-menu { width: auto; min-width: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 800; }
.whatsapp-chat-menu:hover { border-color: var(--line); }
.whatsapp-details-icon { font-size: 20px; font-weight: 400; line-height: 1; }
.whatsapp-details-label { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }

.lead-sheet-dialog.is-whatsapp-detail { width: min(590px, 100vw); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; overflow: hidden; border: 0; border-radius: 18px 0 0 18px; background: var(--canvas); box-shadow: -24px 0 70px rgb(0 0 0 / 28%); animation: whatsapp-detail-in .34s cubic-bezier(.22, 1, .36, 1); }
.lead-sheet-dialog.is-whatsapp-detail::backdrop { background: rgb(8 14 10 / 48%); backdrop-filter: blur(3px); }
.is-whatsapp-detail #lead-sheet-content { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.whatsapp-detail-sheet-head { min-height: 92px; padding: 19px 22px; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.whatsapp-detail-sheet-head p { color: var(--muted); }
.whatsapp-detail-sheet-body { display: flex; flex-direction: column; align-items: stretch; gap: 11px; overflow-y: auto; padding: 12px; }
.whatsapp-detail-sheet-body .detail-card { flex: 0 0 auto; width: 100%; border-radius: 11px; }
.process-overview { display: grid; grid-template-columns: minmax(140px, .65fr) minmax(0, 1.35fr); gap: 10px; padding: 13px; }
.process-current-stage,
.process-next-action,
.process-transitions,
.process-missing-summary { min-width: 0; display: grid; align-content: start; gap: 6px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--paper) 88%, var(--canvas)); }
.process-current-stage { box-shadow: inset 3px 0 var(--blue); }
.process-current-label { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.process-current-value { color: var(--blue); font: 750 20px/1.05 "Bahnschrift SemiCondensed", "Segoe UI", sans-serif; }
.process-current-stage small,
.process-next-action small { color: var(--muted); font-size: 9px; }
.process-next-action strong { font-size: 12px; line-height: 1.45; }
.process-transitions,
.process-missing-summary { grid-column: 1 / -1; }
.process-transition-list { display: flex; flex-wrap: wrap; gap: 6px; }
.process-transition-chip { padding: 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 11%, transparent); color: var(--blue); font-size: 9px; font-weight: 700; }
.process-transition-empty { color: var(--muted); font-size: 10px; }
.process-missing-summary { border-color: color-mix(in srgb, #d59b21 42%, var(--line)); background: color-mix(in srgb, #d59b21 8%, var(--paper)); }
.process-missing-summary strong { font-size: 10px; line-height: 1.45; }

@keyframes whatsapp-detail-in {
  from { opacity: 0; transform: translateX(52px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1050px) and (min-width: 721px) {
  #whatsapp-view .whatsapp-workspace { grid-template-columns: 350px minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .whatsapp-master { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .whatsapp-stage-rail,
  .whatsapp-stage-rail:hover,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) { width: 100%; flex-direction: row; gap: 6px; padding: 7px 8px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); box-shadow: none; scrollbar-width: none; }
  .whatsapp-stage-rail::-webkit-scrollbar { display: none; }
  .whatsapp-stage-tab { width: auto; min-width: max-content; min-height: 38px; grid-template-columns: auto 23px; gap: 6px; padding: 5px 8px; border-radius: 9px; }
  .whatsapp-stage-index { display: none; }
  .whatsapp-stage-name { opacity: 1; font-size: 9px; transform: none; }
  .whatsapp-chat-menu { width: 38px; padding: 0; }
  .whatsapp-details-label { display: none; }
  .lead-sheet-dialog.is-whatsapp-detail { width: 100vw; border-radius: 0; }
  .process-overview { grid-template-columns: 1fr; }
  .process-transitions,
  .process-missing-summary { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-master,
  .whatsapp-stage-rail,
  .whatsapp-stage-tab,
  .whatsapp-stage-name,
  .lead-sheet-dialog.is-whatsapp-detail { animation: none; transition: none; }
}

/* Firma SPORTEX: grafito, blanco y lima. Etapas como pestañas, no como barra. */
:root {
  --blue: #18221c;
  --signal: #cfe64e;
}
:root[data-theme="dark"] {
  --blue: #cfe64e;
  --signal: #cfe64e;
}

#whatsapp-view .whatsapp-workspace { grid-template-columns: 370px minmax(0, 1fr); }
.whatsapp-master { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
.whatsapp-stage-rail,
.whatsapp-stage-rail:hover,
.whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) {
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 7px;
  padding: 10px 11px 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  background: var(--paper);
  box-shadow: inset 0 -1px var(--line);
  scrollbar-width: none;
  transition: none;
}
.whatsapp-stage-rail::-webkit-scrollbar { display: none; }
.whatsapp-stage-tab {
  width: auto;
  min-width: max-content;
  min-height: 40px;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-bottom-color: transparent;
  border-radius: 10px 10px 3px 3px;
  background: color-mix(in srgb, var(--paper) 94%, white);
  color: var(--ink-soft);
  transform: translateY(1px);
  transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}
.whatsapp-stage-tab:hover {
  border-color: color-mix(in srgb, var(--signal) 60%, var(--line));
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--signal) 8%, var(--paper));
  color: var(--ink);
  transform: translateY(0);
}
.whatsapp-stage-tab.is-active {
  border-color: var(--signal);
  border-bottom-color: var(--signal);
  background: var(--signal);
  color: #18221c;
  box-shadow: none;
  transform: translateY(0);
}
.whatsapp-stage-index { display: none; }
.whatsapp-stage-name,
.whatsapp-stage-rail:hover .whatsapp-stage-name,
.whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name {
  opacity: 1;
  overflow: visible;
  font-size: 9px;
  transform: none;
}
.whatsapp-stage-count { background: rgb(24 34 28 / 10%); color: inherit; }
.whatsapp-row.is-selected { background: color-mix(in srgb, var(--signal) 11%, var(--paper)); box-shadow: inset 3px 0 var(--signal); }
.whatsapp-avatar--detail { border-color: color-mix(in srgb, var(--signal) 55%, var(--line)); background: color-mix(in srgb, var(--signal) 13%, var(--paper)); color: var(--ink); }
.whatsapp-team { color: color-mix(in srgb, var(--signal) 58%, var(--ink)); }
.whatsapp-send { background: var(--signal); color: #18221c; }
.process-current-stage { box-shadow: inset 3px 0 var(--signal); }
.process-current-value,
.process-transition-chip { color: color-mix(in srgb, var(--signal) 62%, var(--ink)); }
.process-transition-chip { background: color-mix(in srgb, var(--signal) 11%, transparent); }

:root[data-theme="dark"] .whatsapp-row.is-selected { background: color-mix(in srgb, var(--signal) 12%, #171d19); }
:root[data-theme="dark"] .whatsapp-avatar--detail { background: color-mix(in srgb, var(--signal) 11%, #171d19); border-color: color-mix(in srgb, var(--signal) 48%, #47534a); color: white; }
:root[data-theme="dark"] .whatsapp-team { color: color-mix(in srgb, var(--signal) 72%, white); }
:root[data-theme="dark"] .whatsapp-chat-pane .message-row.is-delta { background: color-mix(in srgb, var(--signal) 17%, #171d19); color: white; }
:root[data-theme="dark"] .process-current-value,
:root[data-theme="dark"] .process-transition-chip { color: var(--signal); }

@media (max-width: 1050px) and (min-width: 721px) {
  #whatsapp-view .whatsapp-workspace { grid-template-columns: 340px minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .whatsapp-stage-rail,
  .whatsapp-stage-rail:hover,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) { padding: 8px 8px 0; }
  .whatsapp-stage-tab { min-height: 38px; padding: 6px 9px; }
}

/* Lengüetas de proceso: laterales, independientes y con apertura horizontal. */
.whatsapp-master { position: relative; display: block; }
.whatsapp-list-pane { width: 100%; height: 100%; }
.whatsapp-stage-rail,
.whatsapp-stage-rail:hover,
.whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) {
  position: absolute;
  z-index: 6;
  top: 108px;
  left: 0;
  width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.whatsapp-stage-tab {
  width: 160px;
  min-width: 160px;
  min-height: 42px;
  grid-template-columns: minmax(0, 1fr) 25px;
  gap: 8px;
  padding: 7px 8px 7px 13px;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: var(--paper);
  color: var(--ink-soft);
  box-shadow: 8px 7px 22px rgb(8 14 10 / 13%);
  transform: translateX(-136px);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .18s ease, color .18s ease, border-color .18s ease;
}
.whatsapp-stage-tab:hover,
.whatsapp-stage-tab:focus-visible {
  z-index: 2;
  border-color: var(--signal);
  border-left: 0;
  background: var(--paper);
  color: var(--ink);
  transform: translateX(0);
}
.whatsapp-stage-tab.is-active {
  border-color: var(--signal);
  border-left: 0;
  background: var(--signal);
  color: #18221c;
  transform: translateX(-128px);
}
.whatsapp-stage-tab.is-active:hover,
.whatsapp-stage-tab.is-active:focus-visible { transform: translateX(0); }
.whatsapp-stage-name { padding-left: 2px; }
.whatsapp-stage-count { justify-self: end; min-width: 23px; background: rgb(24 34 28 / 11%); }

@media (max-width: 720px) {
  .whatsapp-stage-rail,
  .whatsapp-stage-rail:hover,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) { top: 108px; padding: 0; }
  .whatsapp-stage-tab { width: 146px; min-width: 146px; min-height: 46px; transform: translateX(-126px); }
  .whatsapp-stage-tab.is-active { transform: translateX(-119px); }
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible { transform: translateX(0); }
}

/* Escritorio: las etapas viven fuera del panel y nunca pisan la lista de chats. */
@media (min-width: 721px) {
  #whatsapp-view {
    --whatsapp-stage-gutter: 50px;
    padding-left: var(--whatsapp-stage-gutter);
  }

  #whatsapp-view .whatsapp-workspace {
    grid-template-columns: 340px minmax(0, 1fr);
    overflow: visible;
  }

  .whatsapp-stage-rail,
  .whatsapp-stage-rail:hover,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) {
    top: 108px;
    right: 100%;
    left: auto;
    width: var(--whatsapp-stage-gutter);
    gap: 6px;
    align-items: stretch;
  }

  .whatsapp-stage-tab,
  .whatsapp-stage-tab.is-active {
    position: relative;
    width: 100%;
    min-width: 100%;
    min-height: 82px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 6px;
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 11px 0 0 11px;
    box-shadow: -9px 8px 24px rgb(8 14 10 / 11%);
    transform: none;
  }

  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible {
    border-right: 0;
    transform: translateX(-5px);
  }

  .whatsapp-stage-name {
    max-height: 70px;
    overflow: visible;
    padding-left: 0;
    font: 800 8px/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
    letter-spacing: .015em;
    line-height: 1;
    text-overflow: clip;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
  }

  .whatsapp-stage-count {
    position: absolute;
    top: 5px;
    right: 4px;
    min-width: 17px;
    padding: 2px 4px;
    font-size: 7px;
  }
}

/* TASK-20260816-001 · WhatsApp como sistema visual transversal. */
:root {
  --surface-canvas: #f4f6f2;
  --surface-panel: #ffffff;
  --surface-raised: #f8faf7;
  --surface-input: #ffffff;
  --surface-hover: #f0f4ee;
  --surface-selected: color-mix(in srgb, var(--signal) 14%, var(--surface-panel));
  --surface-disabled: #edf0eb;
  --text-on-strong: #ffffff;
  --focus-ring: color-mix(in srgb, var(--signal) 44%, transparent);
  --selected-edge: var(--signal);
  --interactive-shadow: 0 8px 24px rgb(24 34 28 / 8%);
  --paper: var(--surface-panel);
  --canvas: var(--surface-canvas);
}

:root[data-theme="dark"] {
  --surface-canvas: #0e1310;
  --surface-panel: #171d19;
  --surface-raised: #1d241f;
  --surface-input: #252d27;
  --surface-hover: #202821;
  --surface-selected: color-mix(in srgb, var(--signal) 12%, #171d19);
  --surface-disabled: #242b26;
  --text-on-strong: #edf3ee;
  --focus-ring: color-mix(in srgb, var(--signal) 38%, transparent);
  --interactive-shadow: 0 10px 30px rgb(0 0 0 / 28%);
}

body,
.app-shell,
.workspace,
.content { background: var(--surface-canvas); color: var(--ink); }

.topbar,
.production-track,
.today-board,
.lead-master,
.lead-detail,
.detail-card,
.commercial-card,
.ledger,
.crm-filterbar,
.crm-workspace,
.lead-focus-head,
.lead-work-pane,
.draft-area,
.lead-mobile-tabs,
.candidate-panel,
.settings-reset,
.results-panel,
.module-card,
.candidate-row,
.sync-state,
.whatsapp-workspace,
.whatsapp-master,
.whatsapp-detail,
.whatsapp-row,
.sheet-actions,
.message-quote,
.confirmation-check,
.segmented span,
dialog { background: var(--surface-panel); color: var(--ink); }

input,
select,
textarea,
.whatsapp-composer-input { background: var(--surface-input); color: var(--ink); border-color: var(--line); }

.today-row,
.ledger-row,
.lead-row,
.whatsapp-row,
.stage-station,
.today-metrics button,
.nav-item,
.button,
.whatsapp-chat-menu { transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }

.today-row:hover,
.ledger-row:hover,
.lead-row:hover,
.whatsapp-row:hover,
.stage-station:hover,
.button--quiet:hover,
.whatsapp-chat-menu:hover { background: var(--surface-hover); color: var(--ink); }

.lead-row.is-selected,
.whatsapp-row.is-selected,
.stage-station.is-filtered,
.today-metrics button.is-selected,
.today-metrics button:hover {
  background: var(--surface-selected);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--selected-edge) 58%, var(--line));
  box-shadow: inset 3px 0 var(--selected-edge), var(--interactive-shadow);
}

.button:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled { cursor: not-allowed; opacity: .58; }

:where(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--selected-edge);
  outline-offset: 2px;
  border-color: var(--selected-edge);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.message-row.is-client { background: var(--surface-input); color: var(--ink); }
.whatsapp-chat-head,
.whatsapp-master-head,
.whatsapp-composer,
.whatsapp-local-note { background: var(--surface-raised); color: var(--ink); }
.whatsapp-search input { background: var(--surface-input); }

:root[data-theme="dark"] .lead-row:hover,
:root[data-theme="dark"] .lead-row.is-selected,
:root[data-theme="dark"] .ledger-row:hover,
:root[data-theme="dark"] .stage-station:hover,
:root[data-theme="dark"] .stage-station.is-filtered,
:root[data-theme="dark"] .today-row:hover,
:root[data-theme="dark"] .today-metrics button:hover,
:root[data-theme="dark"] .today-metrics button.is-selected,
:root[data-theme="dark"] .whatsapp-row:hover,
:root[data-theme="dark"] .whatsapp-row.is-selected { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .today-row,
  .ledger-row,
  .lead-row,
  .whatsapp-row,
  .stage-station,
  .today-metrics button,
  .nav-item,
  .button,
  .whatsapp-chat-menu { transition: none; }
}

/* Voz SPORTEX: tipografía condensada, grande y frontal sobre la forma mínima. */
.whatsapp-stage-tab,
.whatsapp-stage-tab:hover,
.whatsapp-stage-tab:focus-visible,
.whatsapp-stage-tab.is-active,
.whatsapp-stage-tab.is-active:hover,
.whatsapp-stage-tab.is-active:focus-visible,
.whatsapp-stage-tab:not(.is-active) {
  width: 42px;
  min-width: 42px;
  height: 88px;
  min-height: 88px;
}

.whatsapp-stage-name,
.whatsapp-stage-rail:hover .whatsapp-stage-name,
.whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name,
.whatsapp-stage-tab:hover .whatsapp-stage-name,
.whatsapp-stage-tab:focus-visible .whatsapp-stage-name {
  max-height: 79px;
  font: 900 10px/.92 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .025em;
  text-transform: uppercase;
}

@media (min-width: 721px) {
  #whatsapp-view { --whatsapp-stage-gutter: 42px; }
}

@media (max-width: 720px) {
  .whatsapp-master { padding-left: 42px; }
  .whatsapp-stage-rail,
  .whatsapp-stage-rail:hover,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible),
  .whatsapp-stage-tab,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible {
    width: 42px;
    min-width: 42px;
  }

  .whatsapp-stage-tab,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible {
    height: 76px;
    min-height: 76px;
  }

  .whatsapp-stage-name,
  .whatsapp-stage-rail:hover .whatsapp-stage-name,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name {
    max-height: 68px;
    font-size: 9px;
  }
}

@media (min-width: 721px) {
  .whatsapp-stage-tab,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible,
  .whatsapp-stage-tab:not(.is-active) {
    height: 96px;
    min-height: 96px;
  }

  .whatsapp-stage-name,
  .whatsapp-stage-rail:hover .whatsapp-stage-name,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name {
    max-height: 87px;
  }
}

@media (max-width: 720px) {
  .whatsapp-stage-tab,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible {
    height: 88px;
    min-height: 88px;
  }

  .whatsapp-stage-name,
  .whatsapp-stage-rail:hover .whatsapp-stage-name,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name {
    max-height: 80px;
  }
}

/* Los nombres largos respiran sin reducir el peso tipográfico. */
@media (min-width: 721px) {
  .whatsapp-stage-tab,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible,
  .whatsapp-stage-tab:not(.is-active) {
    height: 96px;
    min-height: 96px;
  }

  .whatsapp-stage-name,
  .whatsapp-stage-rail:hover .whatsapp-stage-name,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name {
    max-height: 87px;
  }
}

@media (max-width: 720px) {
  .whatsapp-stage-tab,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible {
    height: 88px;
    min-height: 88px;
  }

  .whatsapp-stage-name,
  .whatsapp-stage-rail:hover .whatsapp-stage-name,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name {
    max-height: 80px;
  }
}

/* El índice y el panel comparten una misma piel: no hay costura ni giro en hover. */
.whatsapp-stage-rail::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -1px;
  right: -5px;
  bottom: -1px;
  width: 7px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.whatsapp-stage-tab,
.whatsapp-stage-tab:hover,
.whatsapp-stage-tab:focus-visible {
  z-index: 1;
  border-right: 0;
  background: var(--paper);
}

.whatsapp-stage-tab::after {
  z-index: 0;
  top: 0;
  right: -7px;
  bottom: 0;
  width: 8px;
  border: 0;
  background: inherit;
}

.whatsapp-stage-rail:hover .whatsapp-stage-name,
.whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name,
.whatsapp-stage-tab:hover .whatsapp-stage-name,
.whatsapp-stage-tab:focus-visible .whatsapp-stage-name {
  opacity: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

@media (min-width: 721px) {
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible { transform: none; }

  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible {
    z-index: 2;
    background: var(--signal);
    transform: translateX(-6px);
  }
}

@media (max-width: 720px) {
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible { background: var(--signal); }
}

/* Versión mínima: una pestaña plana, un borde y un único estado activo. */
.whatsapp-stage-rail::before,
.whatsapp-stage-tab::after { content: none; }

.whatsapp-stage-rail,
.whatsapp-stage-rail:hover,
.whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) {
  gap: 1px;
  box-shadow: none;
}

.whatsapp-stage-tab,
.whatsapp-stage-tab:hover,
.whatsapp-stage-tab:focus-visible,
.whatsapp-stage-tab.is-active,
.whatsapp-stage-tab.is-active:hover,
.whatsapp-stage-tab.is-active:focus-visible {
  min-height: 64px;
  padding: 5px 3px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: var(--paper);
  box-shadow: none;
  transform: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.whatsapp-stage-tab:hover,
.whatsapp-stage-tab:focus-visible {
  border-color: color-mix(in srgb, var(--signal) 38%, var(--line));
  border-right: 0;
  background: color-mix(in srgb, var(--signal) 4%, var(--paper));
}

.whatsapp-stage-tab.is-active,
.whatsapp-stage-tab.is-active:hover,
.whatsapp-stage-tab.is-active:focus-visible {
  border-color: var(--signal);
  border-right: 0;
  background: var(--signal);
  color: #18221c;
}

.whatsapp-stage-count { display: none; }

.whatsapp-stage-name,
.whatsapp-stage-rail:hover .whatsapp-stage-name,
.whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name,
.whatsapp-stage-tab:hover .whatsapp-stage-name,
.whatsapp-stage-tab:focus-visible .whatsapp-stage-name {
  max-height: 55px;
  opacity: 1;
  font-size: 7.3px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

@media (min-width: 721px) {
  #whatsapp-view { --whatsapp-stage-gutter: 36px; }
}

@media (max-width: 720px) {
  .whatsapp-master { padding-left: 36px; }
  .whatsapp-stage-rail,
  .whatsapp-stage-rail:hover,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible),
  .whatsapp-stage-tab,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible {
    width: 36px;
    min-width: 36px;
  }
}

/* Viñetas de índice: nacen detrás del marco y la activa sobresale. */
.whatsapp-stage-tab::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 9px;
  right: -5px;
  bottom: 9px;
  width: 8px;
  border: 1px solid var(--line);
  border-left: 0;
  background: inherit;
}

.whatsapp-stage-tab:not(.is-active) {
  box-shadow: inset -3px 0 color-mix(in srgb, var(--signal) 22%, var(--line)), -7px 7px 18px rgb(8 14 10 / 8%);
}

.whatsapp-stage-tab.is-active {
  z-index: 2;
  box-shadow: inset -4px 0 rgb(24 34 28 / 18%), -10px 9px 24px rgb(8 14 10 / 16%);
}

@media (min-width: 721px) {
  .whatsapp-stage-tab.is-active { transform: translateX(-7px); }
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible { transform: translateX(-10px); }
}

/* Detalles forman parte del puesto de conversación, no de un modal. */
.whatsapp-detail-workspace {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.whatsapp-detail-workspace.is-details-open {
  grid-template-columns: minmax(230px, 1fr) 220px;
}

@media (min-width: 721px) {
  #whatsapp-view .whatsapp-workspace.is-contact-details-open {
    grid-template-columns: 230px minmax(0, 1fr);
  }
}

.whatsapp-inline-details {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: var(--canvas);
  box-shadow: -14px 0 30px rgb(8 14 10 / 10%);
  animation: whatsapp-inline-details-in .28s cubic-bezier(.22, 1, .36, 1);
}

.whatsapp-inline-details-head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.whatsapp-inline-details-head > div { min-width: 0; }
.whatsapp-inline-details-head h2 {
  margin: 3px 0 2px;
  overflow: hidden;
  font: 750 17px/1 "Bahnschrift SemiCondensed", "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whatsapp-inline-details-head p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whatsapp-inline-details-close {
  flex: 0 0 auto;
  border-color: #18221c;
  border-radius: 50%;
  background: #18221c;
  color: #ffffff;
}
.whatsapp-inline-details-close:hover,
.whatsapp-inline-details-close:focus-visible {
  border-color: var(--blue);
  background: var(--blue);
  color: #ffffff;
}
:root[data-theme="dark"] .whatsapp-inline-details-close {
  border-color: var(--signal);
  background: var(--signal);
  color: #18221c;
}

.whatsapp-inline-details-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  padding: 9px;
}

.whatsapp-inline-details-body .detail-card {
  flex: 0 0 auto;
  width: 100%;
  border-radius: 9px;
}

.whatsapp-inline-details-body .brief-grid { grid-template-columns: 1fr 1fr; }
.whatsapp-inline-details-body .detail-card-head { padding: 12px; }
.whatsapp-inline-details-body .detail-card-head h3 { font-size: 18px; }

.whatsapp-inline-details-body .process-overview { grid-template-columns: 1fr; }
.whatsapp-inline-details-body .process-transitions,
.whatsapp-inline-details-body .process-missing-summary { grid-column: 1; }

@keyframes whatsapp-inline-details-in {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 900px) and (min-width: 721px) {
  .whatsapp-detail-workspace.is-details-open {
    grid-template-columns: minmax(190px, 1fr) minmax(205px, 220px);
  }
}

@media (max-width: 720px) {
  .whatsapp-detail-workspace { position: relative; display: block; }
  .whatsapp-detail-workspace > .whatsapp-chat-pane { height: 100%; }
  .whatsapp-inline-details {
    position: absolute;
    z-index: 5;
    top: 62px;
    right: 0;
    bottom: 62px;
    width: min(310px, 86vw);
    border-top: 1px solid var(--line);
    box-shadow: -18px 0 38px rgb(8 14 10 / 24%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-inline-details { animation: none; }
}

/* Segunda pasada: viñetas compactas y una ficha realmente legible. */
@media (min-width: 721px) {
  #whatsapp-view { --whatsapp-stage-gutter: 44px; }

  .whatsapp-stage-rail,
  .whatsapp-stage-rail:hover,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) {
    gap: 3px;
  }

  .whatsapp-stage-tab,
  .whatsapp-stage-tab.is-active {
    min-height: 72px;
    padding: 4px;
    border-radius: 10px 0 0 10px;
  }

  .whatsapp-stage-name {
    max-height: 61px;
    font-size: 7.4px;
  }

  .whatsapp-stage-count {
    top: 3px;
    right: 2px;
    min-width: 14px;
    padding: 1px 3px;
    background: transparent;
    font-size: 6px;
  }

  .whatsapp-stage-tab:not(.is-active) {
    box-shadow: inset -2px 0 color-mix(in srgb, var(--signal) 25%, var(--line)), -3px 4px 10px rgb(8 14 10 / 5%);
  }

  .whatsapp-stage-tab.is-active { transform: translateX(-6px); }
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible { transform: translateX(-8px); }

  #whatsapp-view:has(.whatsapp-workspace.is-contact-details-open) { padding-left: 0; }
  #whatsapp-view .whatsapp-workspace.is-contact-details-open {
    grid-template-columns: minmax(0, 1fr);
  }
  .whatsapp-workspace.is-contact-details-open .whatsapp-master { display: none; }
  .whatsapp-detail-workspace.is-details-open {
    grid-template-columns: minmax(280px, 1fr) 440px;
  }
}

.whatsapp-stage-tab::after {
  top: 7px;
  right: -4px;
  bottom: 7px;
  width: 6px;
}

@media (max-width: 720px) {
  .whatsapp-stage-rail,
  .whatsapp-stage-rail:hover,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) { gap: 2px; }

  .whatsapp-stage-tab,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible {
    min-height: 64px;
    box-shadow: inset -2px 0 color-mix(in srgb, var(--signal) 25%, var(--line));
  }

  .whatsapp-stage-name { max-height: 55px; }

  .whatsapp-inline-details {
    position: absolute;
    z-index: 10;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    box-shadow: none;
  }
}

/* Mobile conserva la misma lectura vertical dentro de un margen propio. */
@media (max-width: 720px) {
  .whatsapp-master { padding-left: 44px; }
  .whatsapp-list-pane { width: 100%; }

  .whatsapp-stage-rail,
  .whatsapp-stage-rail:hover,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) {
    left: 0;
    width: 44px;
    gap: 5px;
  }

  .whatsapp-stage-tab,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible {
    position: relative;
    width: 44px;
    min-width: 44px;
    min-height: 70px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 5px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 9px 9px 0;
    transform: none;
  }

  .whatsapp-stage-name {
    max-height: 60px;
    overflow: visible;
    padding: 0;
    font: 800 7px/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
    letter-spacing: .01em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
  }

  .whatsapp-stage-count {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 15px;
    padding: 1px 3px;
    font-size: 6px;
  }
}

/* Cierre visual: el índice queda reducido a su forma esencial. */
.whatsapp-stage-rail::before,
.whatsapp-stage-tab::after { content: none !important; }

.whatsapp-stage-rail,
.whatsapp-stage-rail:hover,
.whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) {
  gap: 1px;
  box-shadow: none;
}

.whatsapp-stage-tab,
.whatsapp-stage-tab:hover,
.whatsapp-stage-tab:focus-visible,
.whatsapp-stage-tab.is-active,
.whatsapp-stage-tab.is-active:hover,
.whatsapp-stage-tab.is-active:focus-visible,
  .whatsapp-stage-tab:not(.is-active) {
  height: 68px;
  min-height: 68px;
  box-sizing: border-box;
  padding: 5px 3px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: var(--paper);
  box-shadow: none;
  transform: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.whatsapp-stage-tab:hover,
.whatsapp-stage-tab:focus-visible {
  border-color: color-mix(in srgb, var(--signal) 38%, var(--line));
  border-right: 0;
  background: color-mix(in srgb, var(--signal) 4%, var(--paper));
}

.whatsapp-stage-tab.is-active,
.whatsapp-stage-tab.is-active:hover,
.whatsapp-stage-tab.is-active:focus-visible {
  border-color: var(--signal);
  border-right: 0;
  background: var(--signal);
  color: #18221c;
}

.whatsapp-stage-count { display: none; }

.whatsapp-stage-name,
.whatsapp-stage-rail:hover .whatsapp-stage-name,
.whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name,
.whatsapp-stage-tab:hover .whatsapp-stage-name,
.whatsapp-stage-tab:focus-visible .whatsapp-stage-name {
  max-height: 55px;
  opacity: 1;
  font: 800 7.3px/1 "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

@media (min-width: 721px) {
  #whatsapp-view { --whatsapp-stage-gutter: 36px; }
}

@media (max-width: 720px) {
  .whatsapp-master { padding-left: 36px; }
  .whatsapp-stage-rail,
  .whatsapp-stage-rail:hover,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible),
  .whatsapp-stage-tab,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible {
    width: 36px;
    min-width: 36px;
  }

  .whatsapp-stage-tab,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible {
    border-left: 1px solid var(--line);
    border-right: 0;
    border-radius: 8px 0 0 8px;
  }
}

/* Voz SPORTEX final: la palabra es el único gesto expresivo. */
.whatsapp-stage-tab,
.whatsapp-stage-tab:hover,
.whatsapp-stage-tab:focus-visible,
.whatsapp-stage-tab.is-active,
.whatsapp-stage-tab.is-active:hover,
.whatsapp-stage-tab.is-active:focus-visible,
.whatsapp-stage-tab:not(.is-active) {
  width: 42px;
  min-width: 42px;
  height: 96px;
  min-height: 96px;
}

.whatsapp-stage-name,
.whatsapp-stage-rail:hover .whatsapp-stage-name,
.whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name,
.whatsapp-stage-tab:hover .whatsapp-stage-name,
.whatsapp-stage-tab:focus-visible .whatsapp-stage-name {
  max-height: 87px;
  font: 900 10px/.92 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .025em;
  text-transform: uppercase;
}

@media (min-width: 721px) {
  #whatsapp-view { --whatsapp-stage-gutter: 42px; }
}

@media (max-width: 720px) {
  .whatsapp-master { padding-left: 42px; }
  .whatsapp-stage-rail,
  .whatsapp-stage-rail:hover,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible),
  .whatsapp-stage-tab,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible {
    width: 42px;
    min-width: 42px;
  }

  .whatsapp-stage-tab,
  .whatsapp-stage-tab:hover,
  .whatsapp-stage-tab:focus-visible,
  .whatsapp-stage-tab.is-active,
  .whatsapp-stage-tab.is-active:hover,
  .whatsapp-stage-tab.is-active:focus-visible,
  .whatsapp-stage-tab:not(.is-active) {
    height: 88px;
    min-height: 88px;
  }

  .whatsapp-stage-name,
  .whatsapp-stage-rail:hover .whatsapp-stage-name,
  .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) .whatsapp-stage-name {
    max-height: 80px;
    font-size: 9px;
  }
}

/* Superficies fuertes y burbujas conservan contraste al invertir el tema. */
:root {
  --surface-strong: #18221c;
  --surface-strong-muted: #aab4ac;
  --surface-outbound: #edf3ff;
  --text-outbound: #18221c;
}

:root[data-theme="dark"] {
  --surface-strong: #101612;
  --surface-strong-muted: #9aa69e;
  --surface-outbound: color-mix(in srgb, var(--signal) 17%, #171d19);
  --text-outbound: #edf3ee;
}

.sidebar,
.lead-master-head,
.lead-detail-head,
.sheet-head,
.metrics-strip,
.evidence-rail,
.creative-preview,
.production-track .is-active {
  background: var(--surface-strong);
  color: var(--text-on-strong);
}

.lead-master-head small,
.lead-master-head span,
.lead-detail-head p,
.sheet-head p,
.metrics-strip span { color: var(--surface-strong-muted); }

.message-row.is-delta,
:root[data-theme="dark"] .message-row.is-delta {
  background: var(--surface-outbound);
  color: var(--text-outbound);
}

/* Índice comercial: la etapa elegida guía; el resto acompaña sin ocupar panel. */
#whatsapp-view .whatsapp-stage-rail {
  width: 42px;
  padding: 8px 3px;
  gap: 4px;
  overflow-x: clip;
}
#whatsapp-view .whatsapp-stage-rail:hover,
#whatsapp-view .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) { width: 42px; box-shadow: none; }
#whatsapp-view .whatsapp-stage-tab,
#whatsapp-view .whatsapp-stage-tab:hover,
#whatsapp-view .whatsapp-stage-tab:focus-visible {
  width: 36px;
  min-width: 36px;
  min-height: 48px;
  height: 48px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px 0 0 8px;
  background: var(--paper);
  color: var(--muted);
  box-shadow: none;
  transform: none;
}
#whatsapp-view .whatsapp-stage-tab:hover,
#whatsapp-view .whatsapp-stage-tab:focus-visible { background: var(--surface-hover); color: var(--ink); }
#whatsapp-view .whatsapp-stage-tab.is-active,
#whatsapp-view .whatsapp-stage-tab.is-active:hover,
#whatsapp-view .whatsapp-stage-tab.is-active:focus-visible {
  border-color: var(--line);
  background: var(--surface-selected);
  color: var(--ink);
  box-shadow: inset -3px 0 var(--signal);
}
#whatsapp-view .whatsapp-stage-tab:not(.is-active) {
  border-color: var(--line);
  background: var(--paper);
  color: var(--muted);
  box-shadow: none;
}
#whatsapp-view .whatsapp-stage-tab:not(.is-active):hover,
#whatsapp-view .whatsapp-stage-tab:not(.is-active):focus-visible {
  border-color: var(--line-dark);
  background: var(--surface-hover);
  color: var(--ink);
  box-shadow: none;
}
#whatsapp-view .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-rail:hover .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-tab:hover .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-tab:focus-visible .whatsapp-stage-name {
  max-height: 68px;
  opacity: 1;
  font: 800 7px/.95 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}
#whatsapp-view .whatsapp-stage-tab .whatsapp-stage-name { max-height: 38px; font-size: 6.3px; }

/* Etapas WhatsApp: misma caja que el menú lateral. */
#whatsapp-view {
  --whatsapp-stage-gutter: 172px;
  padding-left: var(--whatsapp-stage-gutter);
}
#whatsapp-view .whatsapp-stage-rail,
#whatsapp-view .whatsapp-stage-rail:hover,
#whatsapp-view .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) {
  width: var(--whatsapp-stage-gutter);
  padding: 20px 8px 16px 0;
  gap: 3px;
  background: #101612;
}
#whatsapp-view .whatsapp-stage-tab,
#whatsapp-view .whatsapp-stage-tab:hover,
#whatsapp-view .whatsapp-stage-tab:focus-visible,
#whatsapp-view .whatsapp-stage-tab.is-active,
#whatsapp-view .whatsapp-stage-tab.is-active:hover,
#whatsapp-view .whatsapp-stage-tab.is-active:focus-visible,
#whatsapp-view .whatsapp-stage-tab:not(.is-active) {
  position: relative;
  width: 164px;
  min-width: 164px;
  min-height: 39px;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #bac2bb;
  box-shadow: none;
  text-align: left;
  transform: none;
}
#whatsapp-view .whatsapp-stage-tab:hover,
#whatsapp-view .whatsapp-stage-tab:focus-visible,
#whatsapp-view .whatsapp-stage-tab:not(.is-active):hover,
#whatsapp-view .whatsapp-stage-tab:not(.is-active):focus-visible {
  background: #ffffff0b;
  color: white;
  box-shadow: none;
}
#whatsapp-view .whatsapp-stage-tab.is-active,
#whatsapp-view .whatsapp-stage-tab.is-active:hover,
#whatsapp-view .whatsapp-stage-tab.is-active:focus-visible {
  background: #ffffff12;
  color: white;
  box-shadow: inset 3px 0 var(--signal);
}
#whatsapp-view .whatsapp-stage-tab.is-active::after {
  content: none !important;
}
#whatsapp-view .whatsapp-stage-index { display: none; }
#whatsapp-view .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-rail:hover .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-tab:hover .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-tab:focus-visible .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-tab .whatsapp-stage-name {
  max-height: none;
  overflow: hidden;
  opacity: 1;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: none;
}
#whatsapp-view .whatsapp-stage-count {
  display: block;
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #ffffff16;
  color: white;
  font: 600 10px/1 "Segoe UI", Arial, sans-serif;
  text-align: center;
}

/* Toda acción verde conserva texto grafito, también fuera de la vista base. */
.button--signal,
.button--primary,
.whatsapp-send,
:root[data-theme="dark"] .whatsapp-inline-details-close { color: #18221c; }

/* Prueba de lectura: las etapas guían desde arriba, antes de abrir el chat. */
#whatsapp-view {
  height: calc(100vh - 114px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding-left: 0;
}
#whatsapp-view .whatsapp-workspace { height: auto; min-height: 0; }
#whatsapp-view .whatsapp-stage-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #101612;
}
#whatsapp-view .whatsapp-stage-rail,
#whatsapp-view .whatsapp-stage-rail:hover,
#whatsapp-view .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) {
  position: static;
  width: auto;
  flex: 1 1 auto;
  min-height: 55px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  background: #101612;
  box-shadow: none;
}
#whatsapp-view #whatsapp-stage-config {
  flex: 0 0 auto;
  min-height: 39px;
  border-color: #ffffff38;
  color: white;
}
#whatsapp-view #whatsapp-stage-config:hover,
#whatsapp-view #whatsapp-stage-config:focus-visible {
  border-color: var(--signal);
  background: #ffffff12;
  color: white;
}
#whatsapp-view .whatsapp-stage-tab,
#whatsapp-view .whatsapp-stage-tab:hover,
#whatsapp-view .whatsapp-stage-tab:focus-visible,
#whatsapp-view .whatsapp-stage-tab.is-active,
#whatsapp-view .whatsapp-stage-tab.is-active:hover,
#whatsapp-view .whatsapp-stage-tab.is-active:focus-visible,
#whatsapp-view .whatsapp-stage-tab:not(.is-active) {
  width: auto;
  min-width: max-content;
  min-height: 39px;
  padding: 9px 10px;
  border-radius: 7px;
}
#whatsapp-view .whatsapp-stage-tab.is-active,
#whatsapp-view .whatsapp-stage-tab.is-active:hover,
#whatsapp-view .whatsapp-stage-tab.is-active:focus-visible { box-shadow: inset 3px 0 var(--signal); }
#whatsapp-view .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-rail:hover .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-tab:hover .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-tab:focus-visible .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-tab .whatsapp-stage-name {
  font-size: 12px;
  writing-mode: horizontal-tb;
  transform: none;
}
@media (max-width: 720px) {
  #whatsapp-view { height: calc(100vh - 90px); gap: 6px; }
  #whatsapp-view .whatsapp-workspace { height: auto; min-height: 0; }
  #whatsapp-view .whatsapp-stage-bar { gap: 6px; padding: 6px 8px; }
  #whatsapp-view .whatsapp-stage-rail,
  #whatsapp-view .whatsapp-stage-rail:hover,
  #whatsapp-view .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) {
    min-height: 51px;
    padding: 0;
  }
  #whatsapp-view #whatsapp-stage-config { padding: 7px 9px; font-size: 10px; }
  #whatsapp-view .whatsapp-master { padding-left: 0; }
}

#whatsapp-view {
  --whatsapp-tab-edge: #2c3930;
  --whatsapp-tab-fill-top: #18211b;
  --whatsapp-tab-fill-bottom: #101711;
  height: calc(100vh - 114px);
  min-height: 0;
  display: block;
  overflow: hidden;
  padding: 0 12px 12px;
}
#whatsapp-view .whatsapp-workspace-shell {
  height: 100%;
  min-height: 580px;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
}
#whatsapp-view .whatsapp-stage-bar {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: end;
  gap: 12px;
  padding: 0 26px;
  background: transparent;
}
#whatsapp-view .whatsapp-stage-rail,
#whatsapp-view .whatsapp-stage-rail:hover,
#whatsapp-view .whatsapp-stage-rail:has(.whatsapp-stage-tab:focus-visible) {
  position: static;
  width: auto;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: end;
  gap: 2px;
  padding: 0;
  overflow-x: auto;
  overflow-y: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
}
#whatsapp-view .whatsapp-stage-rail::-webkit-scrollbar { display: none; }
#whatsapp-view .whatsapp-stage-tab,
#whatsapp-view .whatsapp-stage-tab:hover,
#whatsapp-view .whatsapp-stage-tab:focus-visible,
#whatsapp-view .whatsapp-stage-tab.is-active,
#whatsapp-view .whatsapp-stage-tab.is-active:hover,
#whatsapp-view .whatsapp-stage-tab.is-active:focus-visible,
#whatsapp-view .whatsapp-stage-tab:not(.is-active) {
  position: relative;
  isolation: isolate;
  width: clamp(118px, 9.4vw, 140px);
  min-width: clamp(118px, 9.4vw, 140px);
  min-height: 52px;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 19px 18px 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  clip-path: none;
  color: #c6cdc6;
  text-align: left;
  transform: none;
  transition: color .16s ease;
}
#whatsapp-view .whatsapp-stage-tab::before,
#whatsapp-view .whatsapp-stage-tab::after {
  position: absolute;
  z-index: 0;
  content: "" !important;
  pointer-events: none;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}
#whatsapp-view .whatsapp-stage-tab::before {
  inset: 0;
  z-index: 0;
  background: var(--whatsapp-tab-edge);
}
#whatsapp-view .whatsapp-stage-tab::after {
  inset: 1px 1px 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--whatsapp-tab-fill-top), var(--whatsapp-tab-fill-bottom));
}
#whatsapp-view .whatsapp-stage-tab > * { position: relative; z-index: 2; }
#whatsapp-view .whatsapp-stage-tab:hover,
#whatsapp-view .whatsapp-stage-tab:focus-visible,
#whatsapp-view .whatsapp-stage-tab:not(.is-active):hover,
#whatsapp-view .whatsapp-stage-tab:not(.is-active):focus-visible {
  background: transparent;
  color: #f3f6f2;
  box-shadow: none;
}
#whatsapp-view .whatsapp-stage-tab:hover::after,
#whatsapp-view .whatsapp-stage-tab:focus-visible::after {
  background: linear-gradient(180deg, #1f2a22, #141c16);
}
#whatsapp-view .whatsapp-stage-tab:focus-visible { outline: 1px solid var(--signal); outline-offset: 2px; }
#whatsapp-view .whatsapp-stage-tab.is-active,
#whatsapp-view .whatsapp-stage-tab.is-active:hover,
#whatsapp-view .whatsapp-stage-tab.is-active:focus-visible {
  min-height: 54px;
  background: linear-gradient(180deg, #1d281f, #111913);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  color: #f7faf5;
  box-shadow: inset 0 0 0 2px #c7f13c;
}
#whatsapp-view .whatsapp-stage-tab.is-active::before,
#whatsapp-view .whatsapp-stage-tab.is-active::after { display: none; }
#whatsapp-view .whatsapp-stage-index {
  width: 16px;
  height: 16px;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.3;
  color: #bac2bc;
}
#whatsapp-view .whatsapp-stage-tab.is-active .whatsapp-stage-index { color: #c7f13c; }
#whatsapp-view .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-rail:hover .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-tab:hover .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-tab:focus-visible .whatsapp-stage-name,
#whatsapp-view .whatsapp-stage-tab .whatsapp-stage-name {
  display: block;
  max-height: none;
  overflow: hidden;
  opacity: 1;
  color: inherit;
  font: 650 10px/1.1 "Bahnschrift", "Segoe UI", sans-serif;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  transform: none;
}
#whatsapp-view .whatsapp-stage-count {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 18px;
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c7f13c;
  font: 800 8px/1 "Cascadia Mono", Consolas, monospace;
  text-align: right;
}
#whatsapp-view #whatsapp-stage-config {
  position: absolute;
  right: 26px;
  bottom: 9px;
  flex: 0 0 auto;
  min-height: 34px;
  margin: 0;
  padding: 7px 10px;
  border-color: #334037;
  border-radius: 6px;
  background: #151d17;
  color: #d4dbd4;
  font-size: 9px;
}
#whatsapp-view #whatsapp-stage-config:hover,
#whatsapp-view #whatsapp-stage-config:focus-visible {
  border-color: #c7f13c;
  background: #202a22;
  color: #f4f7f2;
}
#whatsapp-view .whatsapp-workspace {
  position: relative;
  z-index: 1;
  height: auto;
  min-height: 0;
  grid-template-columns: 410px minmax(0, 1fr);
  border: 1px solid #324137;
  border-radius: 11px;
  background: #0e1510;
  box-shadow: none;
}
@media (max-width: 900px) {
  #whatsapp-view { padding: 0 7px 7px; }
  #whatsapp-view .whatsapp-stage-bar { gap: 7px; padding: 0 10px; }
  #whatsapp-view .whatsapp-stage-tab,
  #whatsapp-view .whatsapp-stage-tab:hover,
  #whatsapp-view .whatsapp-stage-tab:focus-visible,
  #whatsapp-view .whatsapp-stage-tab.is-active,
  #whatsapp-view .whatsapp-stage-tab:not(.is-active) { width: 118px; min-width: 118px; }
  #whatsapp-view .whatsapp-workspace { grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  #whatsapp-view { height: calc(100vh - 90px); }
  #whatsapp-view .whatsapp-workspace-shell { min-height: 0; grid-template-rows: 54px minmax(0, 1fr); }
  #whatsapp-view .whatsapp-stage-bar { padding: 0 6px; }
  #whatsapp-view .whatsapp-stage-tab,
  #whatsapp-view .whatsapp-stage-tab:hover,
  #whatsapp-view .whatsapp-stage-tab:focus-visible,
  #whatsapp-view .whatsapp-stage-tab.is-active,
  #whatsapp-view .whatsapp-stage-tab:not(.is-active) { width: 116px; min-width: 116px; min-height: 46px; padding: 17px 14px 8px; }
  #whatsapp-view .whatsapp-stage-tab.is-active { min-height: 48px; }
  #whatsapp-view .whatsapp-stage-count { top: 6px; right: 14px; }
  #whatsapp-view #whatsapp-stage-config { right: 6px; bottom: 6px; font-size: 8px; }
  #whatsapp-view .whatsapp-workspace { grid-template-columns: 1fr; }
}

/* La navegación y el panel comparten un único contorno SVG. */
.content:has(> #whatsapp-view:not([hidden])) { background: #0e1110; }
#whatsapp-view {
  --whatsapp-panel-surface: #141916;
  --whatsapp-tab-border: #2c3930;
  --whatsapp-panel-border: #324137;
  --whatsapp-tab-active-outline: #c3ed3d;
  box-sizing: border-box;
  width: calc(100% + 41px);
  max-width: none;
  height: calc(100vh - 123px);
  min-height: 0;
  display: block;
  overflow: hidden;
  margin: 18px 0 -18px -26px;
  padding: 0 12px 12px;
  background: #0e1110;
}
#whatsapp-view .whatsapp-workspace-shell {
  position: relative;
  isolation: isolate;
  height: 100%;
  min-height: 580px;
  display: grid;
  grid-template-rows: 67px minmax(0, 1fr);
  background: transparent;
}
#whatsapp-view .whatsapp-tabbed-panel-frame {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#whatsapp-view .whatsapp-tabbed-panel-frame__surface { fill: var(--whatsapp-panel-surface); }
#whatsapp-view .whatsapp-tabbed-panel-frame__active-surface { fill: var(--whatsapp-panel-surface); }
#whatsapp-view .whatsapp-tabbed-panel-frame__inactive { fill: url("#whatsapp-tab-inactive-gradient"); }
#whatsapp-view .whatsapp-tabbed-panel-frame__outline {
  fill: none;
  stroke: url("#whatsapp-panel-outline-stroke");
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#whatsapp-view .whatsapp-tabbed-panel-frame__inactive-outline {
  fill: none;
  stroke: var(--whatsapp-tab-border);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#whatsapp-view .whatsapp-tabbed-panel-frame__active-contour,
#whatsapp-view .whatsapp-tabbed-panel-frame__active-contour-outline {
  fill: none;
  stroke: url("#whatsapp-active-contour-stroke");
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
#whatsapp-view .whatsapp-tabbed-panel-frame__active-contour--outer {
  stroke-width: 2;
  opacity: .035;
  filter: url("#whatsapp-tab-active-halo-outer");
}
#whatsapp-view .whatsapp-tabbed-panel-frame__active-contour--near {
  stroke-width: 1.5;
  opacity: .08;
  filter: url("#whatsapp-tab-active-halo-near");
}
#whatsapp-view .whatsapp-tabbed-panel-frame__active-contour-outline {
  stroke-width: 1;
}
#whatsapp-view .whatsapp-tabbed-panel-frame__active-halo {
  fill: none;
  stroke: url("#whatsapp-active-contour-stroke");
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
#whatsapp-view .whatsapp-tabbed-panel-frame__active-halo--outer {
  stroke-width: 2;
  opacity: .07;
  filter: url("#whatsapp-tab-active-halo-outer");
}
#whatsapp-view .whatsapp-tabbed-panel-frame__active-halo--near {
  stroke-width: 1.5;
  opacity: .21;
  filter: url("#whatsapp-tab-active-halo-near");
}
#whatsapp-view .whatsapp-tabbed-panel-frame__active-outline {
  fill: none;
  stroke: url("#whatsapp-active-contour-stroke");
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#whatsapp-view .whatsapp-stage-bar {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: block;
  padding: 0 29px;
  background: transparent;
}
#whatsapp-view .whatsapp-process-tabs {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 67px;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
#whatsapp-view .whatsapp-process-tabs::-webkit-scrollbar { display: none; }
#whatsapp-view .whatsapp-process-tab {
  position: relative;
  z-index: 1;
  flex: 0 0 180px;
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  height: 67px;
  margin: 0 -1px 0 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #a6aca9;
  text-align: left;
  transition: color .16s ease;
}
#whatsapp-view .whatsapp-process-tab.is-active { z-index: 2; color: #f2f5f1; }
#whatsapp-view .whatsapp-process-tab:hover:not(.is-active) { color: #d4dad5; }
#whatsapp-view .whatsapp-process-tab:focus-visible {
  outline: 1px solid #89948d;
  outline-offset: -5px;
}
#whatsapp-view .whatsapp-process-tab__content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 24px;
  transform: translateY(-1px);
}
#whatsapp-view .whatsapp-process-tab__icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
}
#whatsapp-view .whatsapp-process-tab:not(.is-active) .whatsapp-process-tab__icon { color: #9ca49f; }
#whatsapp-view .whatsapp-process-tab.is-active .whatsapp-process-tab__icon { color: var(--whatsapp-tab-active-outline); }
#whatsapp-view .whatsapp-process-tab__name {
  overflow: hidden;
  color: inherit;
  font: 500 12px/1.1 "Segoe UI", sans-serif;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#whatsapp-view .whatsapp-process-tab.is-active .whatsapp-process-tab__name { font-weight: 600; }
#whatsapp-view .whatsapp-process-tab__count {
  position: absolute;
  top: 13px;
  right: 38px;
  color: var(--whatsapp-tab-active-outline);
  font: 700 9px/1 "Cascadia Mono", Consolas, monospace;
}
#whatsapp-view .whatsapp-process-tab.is-active .whatsapp-process-tab__count { color: var(--whatsapp-tab-active-outline); }
#whatsapp-view .whatsapp-workspace {
  position: relative;
  z-index: 1;
  height: auto;
  min-height: 0;
  grid-template-columns: 410px minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: inset(1px);
}
#whatsapp-view .whatsapp-master,
#whatsapp-view .whatsapp-detail { background-color: var(--whatsapp-panel-surface); }
#whatsapp-view .whatsapp-master {
  background-image:
    linear-gradient(180deg, transparent 0, var(--whatsapp-panel-surface) 120px),
    linear-gradient(90deg, #131915 0, #131915 20%, #181d17 55%, #181d17 100%);
}
#whatsapp-view .whatsapp-detail {
  background-image: linear-gradient(180deg, #191e16 0, #191e16 16px, #141916 120px, #101412 100%);
}
#whatsapp-view .whatsapp-master-head,
#whatsapp-view .whatsapp-chat-head { background: var(--whatsapp-panel-surface); }
#whatsapp-view .whatsapp-master-head {
  background-image: linear-gradient(90deg, #131915 0, #131915 20%, #181d17 55%, #181d17 100%);
}
#whatsapp-view .whatsapp-master-head {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "search edit" "unread edit";
  align-items: center;
  gap: 9px 10px;
  padding: 14px;
}
#whatsapp-view .whatsapp-master-head > div { display: none; }
#whatsapp-view .whatsapp-search { grid-area: search; }
#whatsapp-view #whatsapp-unread-filter { grid-area: unread; }
#whatsapp-view #whatsapp-stage-config {
  position: static;
  grid-area: edit;
  width: auto;
  min-width: 76px;
  min-height: 30px;
  margin: 0;
  padding: 6px 8px;
  border-color: #334037;
  border-radius: 6px;
  background: #151d17;
  color: #d4dbd4;
  font-size: 9px;
}
#whatsapp-view #whatsapp-stage-config:hover,
#whatsapp-view #whatsapp-stage-config:focus-visible {
  border-color: var(--whatsapp-tab-active-outline);
  background: #202a22;
  color: #f4f7f2;
}
@media (max-width: 900px) {
  #whatsapp-view { padding: 0 7px 7px; }
  #whatsapp-view .whatsapp-stage-bar { padding: 0 29px; }
  #whatsapp-view .whatsapp-workspace { grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  #whatsapp-view {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 720px) {
  #whatsapp-view { height: calc(100vh - 90px); }
  #whatsapp-view .whatsapp-workspace-shell { min-height: 0; grid-template-rows: 67px minmax(0, 1fr); }
  #whatsapp-view .whatsapp-stage-bar { padding: 0 29px; }
  #whatsapp-view .whatsapp-process-tabs,
  #whatsapp-view .whatsapp-process-tab,
  #whatsapp-view .whatsapp-process-tab__content { height: 67px; }
  #whatsapp-view .whatsapp-process-tab {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
  }
  #whatsapp-view .whatsapp-process-tab__content { padding: 0 24px; }
  #whatsapp-view .whatsapp-process-tab__count { top: 10px; right: 30px; }
  #whatsapp-view .whatsapp-workspace { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #whatsapp-view .whatsapp-process-tab { transition: none; }
}

/* Mi empresa comparte el lenguaje visual de SPORTEX sin alterar el panel de WhatsApp. */
.company-form { display: grid; gap: 18px; max-width: 1360px; margin: 0 auto; }
.company-intro { align-items: center; }
.company-save-cluster { display: flex; align-items: center; gap: 13px; }
.company-save-status { color: var(--muted); font: 700 10px/1 "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.company-save-status.is-dirty { color: var(--signal); }
.company-section-nav { position: sticky; top: 0; z-index: 4; display: flex; gap: 4px; padding: 8px; overflow-x: auto; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-panel) 94%, transparent); backdrop-filter: blur(14px); }
.company-section-nav a { flex: 0 0 auto; padding: 10px 13px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 750; }
.company-section-nav a:hover, .company-section-nav a:focus-visible { background: var(--surface-hover); color: var(--ink); outline: none; }
.company-section { scroll-margin-top: 78px; display: grid; gap: 20px; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--line); background: var(--surface-panel); }
.company-section > header { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.company-section > header h2 { margin: 0 0 6px; font: 800 clamp(22px, 2.5vw, 31px)/1 "Bahnschrift SemiCondensed", "Segoe UI", sans-serif; letter-spacing: -.02em; }
.company-section > header p { max-width: 680px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.company-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.company-field-grid label { min-width: 0; }
.company-field-grid label small { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.company-field-wide { grid-column: 1 / -1; }
.company-entity-list { display: grid; gap: 12px; }
.company-empty { display: grid; justify-items: start; gap: 6px; min-height: 108px; align-content: center; padding: 20px; border: 1px dashed var(--line); color: var(--muted); }
.company-empty strong { color: var(--ink); font-size: 14px; }
.company-empty p { margin: 0; font-size: 12px; }
.company-entity-card { display: grid; gap: 18px; padding: 20px; border: 1px solid var(--line); border-left: 4px solid var(--blue); background: var(--surface-raised); }
.company-entity-card.is-inactive { opacity: .7; border-left-color: var(--line-dark); }
.company-entity-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.company-entity-head > div { min-width: 0; }
.company-entity-head strong { display: block; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.company-entity-head small { color: var(--muted); }
.company-entity-actions { display: flex; align-items: center; gap: 8px; }
.company-active-toggle { display: flex; grid-auto-flow: column; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.company-active-toggle input { width: 18px; min-height: 18px; height: 18px; padding: 0; accent-color: var(--signal); }
.company-remove { min-height: 34px; padding: 0 11px; }
.company-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.company-card-grid .company-span-2 { grid-column: span 2; }
.company-card-grid .company-span-all { grid-column: 1 / -1; }
.company-subsection { display: grid; gap: 10px; padding-top: 15px; border-top: 1px solid var(--line); }
.company-subsection > header { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.company-subsection h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.company-tier-list, .company-size-row-list { display: grid; gap: 8px; }
.company-tier-row { display: grid; grid-template-columns: 1fr 1fr 1.3fr .8fr auto; gap: 8px; align-items: end; }
.company-size-row { display: grid; grid-template-columns: minmax(90px, .35fr) minmax(0, 1.65fr) auto; gap: 8px; align-items: end; }
.company-inline-remove { width: 42px; min-height: 48px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 20px; }
.company-inline-remove:hover { border-color: var(--danger); color: #ff7777; }
.company-form input, .company-form select, .company-form textarea { border-radius: 7px; }
.company-form .form-error { padding: 4px 2px 30px; }

@media (max-width: 900px) {
  .company-section > header { grid-template-columns: 1fr auto; }
  .company-section > header .section-code { grid-column: 1 / -1; }
  .company-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-tier-row { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
  .company-tier-row label:nth-child(3) { grid-column: 1 / 2; }
}

@media (max-width: 720px) {
  .company-intro { align-items: flex-start; }
  .company-save-cluster { width: 100%; justify-content: space-between; }
  .company-section-nav { top: -1px; margin-inline: -4px; }
  .company-section { padding: 18px 14px; }
  .company-section > header { grid-template-columns: 1fr; }
  .company-section > header .button { width: 100%; }
  .company-field-grid, .company-card-grid { grid-template-columns: 1fr; }
  .company-field-wide, .company-card-grid .company-span-2, .company-card-grid .company-span-all { grid-column: 1; }
  .company-entity-head { align-items: flex-start; }
  .company-entity-actions { flex-direction: column; align-items: flex-end; }
  .company-tier-row, .company-size-row { grid-template-columns: 1fr; }
  .company-tier-row label:nth-child(3) { grid-column: 1; }
  .company-inline-remove { width: 100%; min-height: 36px; }
}